/* ================================================================
   Tuesdays — SERVICES page styles
   Shared tokens/nav/footer/buttons/crumb live in shared.css.

   Conventions carried over from Mediapods v2 per client feedback:
   - no numeral markers anywhere (the source doc numbered each
     pillar 01–05 — dropped, icon + label instead)
   - pillar "pods" are visual tiles (icon + hover/tap reveal),
     never text-only accordion rows
   - pillar intros are alternating image+text blocks

   New for this page: 5 services pillars don't map onto the 3i
   (Infinia/Intent/Influence) system used on Market Leadership /
   Mediapods, so this page runs its own 5-colour token set, scoped
   locally (same pattern mediapods.css used before 3i colours were
   promoted to shared.css).
   ================================================================ */

:root{
  --svc-intel:#3E5C8A;        --svc-intel-tint:#EAF0F8;
  --svc-organic:#4F7A52;      --svc-organic-tint:#EBF3EA;
  --svc-performance:#C98A2E;  --svc-performance-tint:#FBF1E1;
  --svc-gtm:#2E8A8A;          --svc-gtm-tint:#E7F5F5;
  --svc-bold:#8A3E6E;         --svc-bold-tint:#F6E9F1;
  --cta-purple:#E9DCF1; --cta-ink:#3A2A4A;
}

/* ---------- HERO ---------- */
.svc-hero{padding-top:clamp(110px,14vw,160px);padding-bottom:clamp(56px,7vw,84px)}
.svc-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.svc-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.5rem,5.4vw,4.2rem);line-height:1.05;letter-spacing:-.02em;margin-top:22px}
.svc-hero h1 em{font-style:italic;color:var(--accent)}
.svc-intro{margin-top:24px;max-width:54ch;font-size:1.1rem;line-height:1.65;color:var(--ink-soft)}
.svc-hero .cta-row{margin-top:34px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}

.svc-hero-visual{position:relative;height:clamp(280px,30vw,380px)}
.svc-chip{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 18px 12px 12px;border-radius:100px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 30px -18px rgba(22,24,29,.25);animation:svcBob 6s ease-in-out infinite}
.svc-chip-ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.svc-chip-ic svg{width:16px;height:16px;stroke-width:1.6;fill:none}
.svc-chip span{font-family:var(--sans);font-weight:600;font-size:.86rem;white-space:nowrap}
.svc-chip[data-p="intel"]{top:2%;left:6%;animation-delay:0s}
.svc-chip[data-p="intel"] .svc-chip-ic{background:var(--svc-intel-tint)}
.svc-chip[data-p="intel"] svg{stroke:var(--svc-intel)}
.svc-chip[data-p="organic"]{top:22%;right:2%;animation-delay:1.1s}
.svc-chip[data-p="organic"] .svc-chip-ic{background:var(--svc-organic-tint)}
.svc-chip[data-p="organic"] svg{stroke:var(--svc-organic)}
.svc-chip[data-p="performance"]{top:48%;left:14%;animation-delay:2.2s}
.svc-chip[data-p="performance"] .svc-chip-ic{background:var(--svc-performance-tint)}
.svc-chip[data-p="performance"] svg{stroke:var(--svc-performance)}
.svc-chip[data-p="gtm"]{top:66%;right:12%;animation-delay:3.3s}
.svc-chip[data-p="gtm"] .svc-chip-ic{background:var(--svc-gtm-tint)}
.svc-chip[data-p="gtm"] svg{stroke:var(--svc-gtm)}
.svc-chip[data-p="bold"]{top:86%;left:30%;animation-delay:4.4s}
.svc-chip[data-p="bold"] .svc-chip-ic{background:var(--svc-bold-tint)}
.svc-chip[data-p="bold"] svg{stroke:var(--svc-bold)}
@keyframes svcBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

@media(max-width:760px){
  .svc-hero-grid{grid-template-columns:1fr}
  .svc-hero-visual{position:static;height:auto;margin-top:36px;
    display:flex;flex-direction:column;gap:16px}
  .svc-chip{position:static;width:fit-content;
    animation:svcBobSm 3.2s ease-in-out infinite}
  /* mobile: chips stack in a centred column (desktop keeps the scattered layout) */
  .svc-hero-visual{align-items:center}
  .svc-chip{align-self:center}
  .svc-chip span:not(.svc-chip-ic){display:inline;font-size:.82rem}
}
@keyframes svcBobSm{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ---------- PILLARS ---------- */
.svc-pillars{display:flex;flex-direction:column;gap:40px;padding-top:8px}
.svc-pillar{border-radius:32px;padding:clamp(32px,5vw,56px);scroll-margin-top:110px}
.svc-pillar[data-pillar="intel"]{background:var(--svc-intel-tint)}
.svc-pillar[data-pillar="organic"]{background:var(--svc-organic-tint)}
.svc-pillar[data-pillar="performance"]{background:var(--svc-performance-tint)}
.svc-pillar[data-pillar="gtm"]{background:var(--svc-gtm-tint)}
.svc-pillar[data-pillar="bold"]{background:var(--svc-bold-tint)}

.svc-pillar-top{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:44px}
.svc-pillar-top.is-reverse .svc-pillar-img{order:2}
.svc-pillar-img{position:relative;aspect-ratio:16/10;border-radius:22px;overflow:hidden}
.svc-pillar-img img{width:100%;height:100%;object-fit:cover}
.svc-pillar-img[data-viz]{background:#fff}
.svc-pillar-img canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.svc-pillar-badge{z-index:2}
.svc-pillar-badge{position:absolute;top:16px;left:16px;width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px -12px rgba(22,24,29,.35)}
.svc-pillar-badge svg{width:20px;height:20px;stroke-width:1.5;fill:none}
.svc-pillar[data-pillar="intel"] .svc-pillar-badge svg{stroke:var(--svc-intel)}
.svc-pillar[data-pillar="organic"] .svc-pillar-badge svg{stroke:var(--svc-organic)}
.svc-pillar[data-pillar="performance"] .svc-pillar-badge svg{stroke:var(--svc-performance)}
.svc-pillar[data-pillar="gtm"] .svc-pillar-badge svg{stroke:var(--svc-gtm)}
.svc-pillar[data-pillar="bold"] .svc-pillar-badge svg{stroke:var(--svc-bold)}

.svc-pillar-text h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,3.4vw,2.5rem);letter-spacing:-.01em}
.svc-pillar-name{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--p-ink,var(--ink))}
.svc-pillar-name::before{content:'';width:22px;height:2px;border-radius:2px;background:currentColor}
.svc-pillar[data-pillar="intel"]{--p-ink:var(--svc-intel)}
.svc-pillar[data-pillar="organic"]{--p-ink:var(--svc-organic)}
.svc-pillar[data-pillar="performance"]{--p-ink:var(--svc-performance)}
.svc-pillar[data-pillar="gtm"]{--p-ink:var(--svc-gtm)}
.svc-pillar[data-pillar="bold"]{--p-ink:var(--svc-bold)}
.svc-pillar-text h2{line-height:1.12}
.svc-pillar-text p + p{margin-top:10px}
.svc-pillar-text strong{font-weight:600;color:var(--ink)}
.svc-pillar-text p{margin-top:16px;max-width:44ch;font-size:1.03rem;line-height:1.6;color:var(--ink-soft)}

@media(max-width:760px){
  .svc-pillar-top{grid-template-columns:1fr;gap:32px}
  .svc-pillar-top.is-reverse .svc-pillar-img{order:0}
  /* stacked layout: centre the pillar intro to match the centred tiles */
  .svc-pillar-text{text-align:center}
  .svc-pillar-text p{margin-left:auto;margin-right:auto}
}

/* ---------- SHELF (visual tiles) ---------- */
.svc-shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}

/* fixed column counts on desktop so rows split exactly as specified —
   4 strategy -> 4, 9 organic -> 5+4, 6 gtm -> 3+3,
   6 performance -> 3+3, 7 bold -> 4+3.
   Starts at 1024px (not 860) so the 5-across organic row never squeezes
   tiles narrow enough for the hover description to overflow; between
   phone and 1024 the auto-fit grid above takes over. */
@media(min-width:1024px){
  .svc-pillar[data-pillar="intel"] .svc-shelf{grid-template-columns:repeat(4,1fr)}
  .svc-pillar[data-pillar="organic"] .svc-shelf{grid-template-columns:repeat(5,1fr)}
  .svc-pillar[data-pillar="gtm"] .svc-shelf{grid-template-columns:repeat(3,1fr)}
  .svc-pillar[data-pillar="performance"] .svc-shelf{grid-template-columns:repeat(3,1fr)}
  .svc-pillar[data-pillar="bold"] .svc-shelf{grid-template-columns:repeat(4,1fr)}
}

/* Rectangular, content-height tiles: icon + label stacked and centred in
   normal flow (no more square aspect-ratio with an absolutely-placed icon).
   The description overlay still covers the whole tile on hover/tap. */
.svc-tile{position:relative;border-radius:20px;overflow:hidden;min-height:150px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:28px 22px;text-align:center;background:rgba(255,255,255,.65);cursor:pointer;outline:none}
.svc-tile:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.svc-tile-img{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.9);flex:0 0 auto;transition:transform .5s var(--ease)}
.svc-tile-img svg{width:24px;height:24px;stroke-width:1.4;fill:none}
.svc-pillar[data-pillar="intel"] .svc-tile-img{background:var(--svc-intel-tint)}
.svc-pillar[data-pillar="organic"] .svc-tile-img{background:var(--svc-organic-tint)}
.svc-pillar[data-pillar="performance"] .svc-tile-img{background:var(--svc-performance-tint)}
.svc-pillar[data-pillar="gtm"] .svc-tile-img{background:var(--svc-gtm-tint)}
.svc-pillar[data-pillar="bold"] .svc-tile-img{background:var(--svc-bold-tint)}
.svc-pillar[data-pillar="intel"] .svc-tile-img svg{stroke:var(--svc-intel)}
.svc-pillar[data-pillar="organic"] .svc-tile-img svg{stroke:var(--svc-organic)}
.svc-pillar[data-pillar="performance"] .svc-tile-img svg{stroke:var(--svc-performance)}
.svc-pillar[data-pillar="gtm"] .svc-tile-img svg{stroke:var(--svc-gtm)}
.svc-pillar[data-pillar="bold"] .svc-tile-img svg{stroke:var(--svc-bold)}
.svc-tile-label{font-family:var(--serif);font-weight:500;font-size:1rem;line-height:1.25;color:var(--ink);max-width:22ch;transition:opacity .3s var(--ease)}
.svc-tile-badge{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;z-index:2;transition:background .3s var(--ease),transform .3s var(--ease)}
.svc-tile-badge svg{width:12px;height:12px;stroke:var(--ink);stroke-width:1.8}
.svc-tile-desc{position:absolute;inset:0;background:rgba(22,24,29,.94);color:#fff;padding:18px 22px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.86rem;line-height:1.5;opacity:0;transform:translateY(8px);pointer-events:none;overflow:auto;transition:opacity .35s ease,transform .35s ease}
.svc-tile.is-open .svc-tile-img{transform:scale(1.06)}
.svc-tile.is-open .svc-tile-label{opacity:0}
.svc-tile.is-open .svc-tile-badge{background:#fff;transform:rotate(45deg)}
.svc-tile.is-open .svc-tile-desc{opacity:1;transform:translateY(0);pointer-events:auto}

/* phones: single column, compact bars instead of full-width squares */
@media(max-width:560px){
  .svc-shelf{grid-template-columns:1fr;gap:12px}
  .svc-tile{min-height:118px;padding:20px 44px;gap:10px}
  .svc-tile-img{width:44px;height:44px}
  .svc-tile-img svg{width:20px;height:20px}
  .svc-tile-label{font-size:.98rem;max-width:none}
  .svc-tile-desc{padding:14px 40px 14px 20px;font-size:.84rem}
}

/* Desktop-only hover preview. Deliberately NOT applied on touch devices:
   :hover can get stuck active after a tap (no mouse to clear it), which
   fights the JS .is-open toggle and makes the panel un-closeable on tap —
   touch devices get open/close purely from .is-open above. */
@media(hover:hover) and (pointer:fine){
  .svc-tile:hover .svc-tile-img,.svc-tile:focus-visible .svc-tile-img{transform:scale(1.06)}
  .svc-tile:hover .svc-tile-label,.svc-tile:focus-visible .svc-tile-label{opacity:0}
  .svc-tile:hover .svc-tile-badge,.svc-tile:focus-visible .svc-tile-badge{background:#fff;transform:rotate(45deg)}
  .svc-tile:hover .svc-tile-desc,.svc-tile:focus-visible .svc-tile-desc{opacity:1;transform:translateY(0);pointer-events:auto}
}

/* ================================================================
   STICKY TRACKER — pill that follows scroll, morphs colour per
   pillar, expands into a jump-panel on click.
   ================================================================ */
.svc-tracker{position:fixed;left:28px;bottom:28px;z-index:70;
  --cur:var(--svc-intel); --cur-tint:var(--svc-intel-tint)}

.svc-pill{all:unset;display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:10px 20px 10px 10px;border-radius:100px;background:var(--cur-tint);
  box-shadow:0 16px 34px -16px rgba(22,24,29,.35);
  transition:background-color .5s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.svc-pill:hover{transform:translateY(-2px)}
.svc-pill-ic{width:30px;height:30px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.svc-pill-ic svg{width:14px;height:14px;stroke:var(--cur);stroke-width:1.7;fill:none;transition:stroke .5s var(--ease)}
.svc-pill-label{font-family:var(--sans);font-weight:600;font-size:.88rem;color:var(--ink);white-space:nowrap;transition:opacity .25s ease}
.svc-pill-label.swap{opacity:0}
.svc-pill-plus{width:20px;height:20px;border-radius:50%;background:var(--cur);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;flex:0 0 auto;transition:transform .35s var(--ease),background-color .5s var(--ease)}
.svc-tracker.open .svc-pill-plus{transform:rotate(45deg)}

/* first-visit attention ring — pointer-events:none is load-bearing: without
   it, the ring's scaled-up box (transform:scale(1.5) during the animation)
   can sit on top of the AI pill positioned just above it on desktop and
   silently swallow clicks meant for that pill */
.svc-pill::before{content:'';position:absolute;inset:0;border-radius:100px;border:1.5px solid var(--cur);opacity:0;pointer-events:none;transition:border-color .5s var(--ease)}
.svc-tracker.attn .svc-pill::before{animation:svcPulse 1.8s var(--ease) 3}
@keyframes svcPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}

.svc-panel{position:absolute;left:0;bottom:calc(100% + 14px);width:min(380px,80vw);
  background:var(--bg);border-radius:24px;padding:26px;box-shadow:0 40px 90px -30px rgba(22,24,29,.5);
  transform-origin:bottom left;transform:scale(.92) translateY(10px);opacity:0;pointer-events:none;
  transition:transform .4s var(--ease),opacity .3s var(--ease)}
.svc-tracker.open .svc-panel{transform:none;opacity:1;pointer-events:auto}
.svc-panel-close{all:unset;position:absolute;top:14px;right:16px;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-faint);font-size:20px;line-height:1;
  transition:background .25s var(--ease),color .25s var(--ease)}
.svc-panel-close:hover{background:var(--paper-2);color:var(--ink)}
.svc-panel-head .eyebrow{color:var(--accent)}
.svc-panel-head h3{font-family:var(--serif);font-weight:500;font-size:1.3rem;margin-top:8px;letter-spacing:-.01em}
.svc-panel-list{margin-top:20px;display:flex;flex-direction:column;gap:4px}
.svc-panel-item{all:unset;display:flex;align-items:center;gap:14px;padding:12px 10px;border-radius:14px;cursor:pointer;
  transition:background .25s var(--ease)}
.svc-panel-item:hover,.svc-panel-item:focus-visible{background:var(--p-tint)}
.svc-panel-item.is-active{background:var(--p-tint)}
.svc-panel-ic{width:36px;height:36px;border-radius:50%;background:var(--p-tint);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.svc-panel-ic svg{width:16px;height:16px;stroke:var(--p);stroke-width:1.6;fill:none}
.svc-panel-item strong{display:block;font-family:var(--sans);font-weight:600;font-size:.94rem}
.svc-panel-item small{display:block;margin-top:2px;font-size:.8rem;color:var(--ink-soft);line-height:1.35}

.svc-scrim{position:fixed;inset:0;z-index:65;background:rgba(22,24,29,.35);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s var(--ease)}
.svc-scrim.show{opacity:1;visibility:visible}

@media(max-width:600px){
  .svc-tracker{left:16px;right:16px;bottom:16px}
  .svc-pill{width:100%;justify-content:space-between}
  .svc-panel{left:0;right:0;width:auto;bottom:calc(100% + 12px)}
}

/* ================================================================
   AI-ENABLED MARKETING pill — deliberately kept separate from the
   pillar tracker rather than merged into one widget: on desktop
   there's room to stack them, but two full-width bars competing for
   the same strip on mobile reads as clutter, so on mobile this
   collapses to an icon-only FAB on the opposite corner instead of
   stacking with the tracker bar.
   ================================================================ */
.svc-ai-pill{all:unset;position:fixed;left:28px;bottom:112px;z-index:69;display:flex;align-items:center;justify-content:center;
  cursor:pointer;width:52px;height:52px;border-radius:50%;background:var(--accent);
  box-shadow:0 16px 34px -16px rgba(240,78,48,.55);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.svc-ai-pill:hover{transform:translateY(-2px)}
.svc-ai-ic{width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.svc-ai-ic svg{width:18px;height:18px;stroke:#fff;stroke-width:1.6;fill:none}

.svc-ai-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);z-index:80;
  width:min(440px,88vw);background:var(--bg);border-radius:24px;padding:clamp(28px,4vw,40px);
  box-shadow:0 40px 90px -30px rgba(22,24,29,.5);opacity:0;pointer-events:none;
  transition:transform .35s var(--ease),opacity .3s var(--ease)}
.svc-ai-modal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.svc-ai-modal-ic{width:52px;height:52px;border-radius:50%;background:var(--accent-tint);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.svc-ai-modal-ic svg{width:24px;height:24px;stroke:var(--accent);stroke-width:1.5;fill:none}
.svc-ai-modal h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.3rem,2.4vw,1.7rem);letter-spacing:-.01em;line-height:1.2}
.svc-ai-modal p{margin-top:16px;font-size:1rem;line-height:1.6;color:var(--ink-soft)}

@media(max-width:600px){
  .svc-ai-pill{left:auto;right:16px;bottom:84px}
  /* keep the fixed tracker bar from covering the footer copyright line */
  body[data-page="services"] .foot-bottom{padding-bottom:96px}
}

/* ---------- CTA (pastel purple, not dark) ---------- */
.svc-cta{background:var(--cta-purple);color:var(--cta-ink)}
.svc-cta .eyebrow{color:var(--accent)}
.svc-cta h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.08;letter-spacing:-.01em;max-width:70%}
.svc-cta h2 span{display:inline-block}
.svc-cta h2 span:nth-child(2){font-style:italic;color:var(--accent)}
.svc-cta p{margin-top:22px;max-width:70%;font-size:1.08rem;line-height:1.6;opacity:.82}
@media(max-width:700px){.svc-cta h2,.svc-cta p{max-width:100%}}
.svc-cta .cta-row{margin-top:36px}

/* ================================================================
   MOTION (content-update round)
   - tiles rise in one by one when their shelf scrolls into view
     (shelf observed separately from the pillar, so on tall mobile
     pillars the tiles don't animate before they're actually visible)
   - B2B Bold: marker sweep under the bolded line
   - CTA: the three phrases land one after another
   Hidden start-states only apply once services.js adds .svc-js, so
   if the script fails nothing stays invisible.
   ================================================================ */
@media(prefers-reduced-motion:no-preference){
  .svc-js .svc-shelf .svc-tile{opacity:0;transform:translateY(18px);
    transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
  .svc-js .svc-shelf.tiles-in .svc-tile{opacity:1;transform:none}

  .svc-mark{background:linear-gradient(rgba(138,62,110,.2),rgba(138,62,110,.2)) no-repeat 0 88% / 0% 42%;
    transition:background-size 1.2s var(--ease) .5s}
  .svc-pillar.in .svc-mark{background-size:100% 42%}

  .svc-cta h2 span{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .svc-cta h2.in span{opacity:1;transform:none}
  .svc-cta h2.in span:nth-child(2){transition-delay:.25s}
  .svc-cta h2.in span:nth-child(3){transition-delay:.5s}
}
@media(prefers-reduced-motion:reduce){
  .svc-mark{background:rgba(138,62,110,.16)}
}