/* ================================================================
   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}
  .svc-chip:nth-child(odd){align-self:flex-start}
  .svc-chip:nth-child(even){align-self:flex-end}
  .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-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-text .svc-tagrow{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.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}
  .svc-pillar-top.is-reverse .svc-pillar-img{order:0}
}

/* ---------- 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 —
   9 organic tiles -> 5+4, 8 gtm tiles -> 4+4, 7 bold tiles -> 4+3 */
@media(min-width:860px){
  .svc-pillar[data-pillar="organic"] .svc-shelf{grid-template-columns:repeat(5,1fr)}
  .svc-pillar[data-pillar="gtm"] .svc-shelf{grid-template-columns:repeat(4,1fr)}
  .svc-pillar[data-pillar="bold"] .svc-shelf{grid-template-columns:repeat(4,1fr)}
}
.svc-tile{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:3/3.2;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{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform .5s var(--ease)}
.svc-tile-img svg{width:24%;min-width:34px;stroke-width:1.3;fill:none}
.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{position:absolute;left:0;right:0;bottom:0;padding:16px;font-family:var(--serif);font-weight:500;font-size:.98rem;line-height:1.25;color:var(--ink);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:20px;display:flex;align-items:center;font-size:.86rem;line-height:1.5;opacity:0;transform:translateY(8px);pointer-events:none;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}

/* 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}
}

/* ---------- 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-style:italic;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.05;letter-spacing:-.02em;margin-top:20px;max-width:70%}
.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}