/* ============================================================
   SERVICES — modules of one business operating system.
   Compact launcher cards that open into full app windows.
   ============================================================ */
/* Quiet reassurance under the heading — "works on your existing site" is the
   default; a new site is a small option, not a headline. Deliberately muted. */
.svc-sub-note{margin-top:10px;font-size:12.5px;color:var(--ink-faint);line-height:1.5;
  max-width:52ch;margin-left:auto;margin-right:auto}

/* ASORA leads the roster. She sits at the top as one large horizontal card;
   the seven specialists sit below as her team. The hierarchy is carried by
   size + position + a crown + an org-chart connector line — no extra copy. */
.svc-roster{display:flex;flex-direction:column;align-items:center;perspective:1600px}
.svc-lead{width:100%}

/* The team: seven cards, centred and wrapping, so the last (short) row centres
   itself instead of leaving an orphan slot. Fixed-width cards keep every card
   the same size across rows. Hierarchy comes from ASORA's size + position, not
   a drawn connector line. */
/* Layout that reads "one employee + two inclusions", not "three employees":
   ASORA is a prominent full-width masthead (svc-lead), then a labelled divider,
   then ECHO + ATLAS as a smaller two-card row below. */
.svc-lead{width:100%;max-width:920px;margin:0 auto}
.svc-comeswith{display:flex;align-items:center;gap:16px;justify-content:center;max-width:920px;
  margin:26px auto 4px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint)}
.svc-comeswith span{height:1px;flex:1;max-width:140px;background:var(--line)}
.svc-team{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
  width:100%;max-width:760px;margin:0 auto}
/* ASORA gently featured: her green emphasis, so she's clearly the one you hire. */
.pillar-featured{border-color:color-mix(in srgb,var(--svc-soft) 42%,var(--line))!important;
  box-shadow:0 26px 60px -34px var(--svc-glow)}
.pillar-featured .p-mod{color:var(--svc-soft)}
@media(max-width:760px){.svc-team{grid-template-columns:1fr;max-width:420px}
  .pillar-lead{grid-template-columns:1fr!important;text-align:center;justify-items:center}}

/* LEDGER — a warm, premium amber callout: a separate product (AI + a real
   ACCA accountant) with its own page. Soft amber wash, glowing icon, pill CTA. */
.svc-ledger{display:flex;align-items:center;gap:18px;max-width:680px;margin:42px auto 0;
  padding:20px 22px;border-radius:var(--r-lg);text-decoration:none;transition:.28s var(--ease);
  background:linear-gradient(120deg,rgba(174,124,46,.09),rgba(174,124,46,.02) 62%),var(--panel);
  border:1px solid rgba(174,124,46,.24);
  box-shadow:0 24px 54px -34px rgba(174,124,46,.45),0 8px 22px -16px rgba(28,20,14,.22)}
.svc-ledger:hover{transform:translateY(-3px);border-color:rgba(174,124,46,.45);
  box-shadow:0 36px 72px -34px rgba(174,124,46,.5)}
.svc-ledger-ic{width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(174,124,46,.26),rgba(174,124,46,.08));
  border:1px solid rgba(174,124,46,.32);
  box-shadow:0 8px 20px -8px rgba(174,124,46,.45),inset 0 1px 0 rgba(255,255,255,.5)}
.svc-ledger-ic svg{width:23px;height:23px;stroke:#9A6B24;fill:none;stroke-width:1.7}
.svc-ledger-txt{font-size:13.5px;color:var(--ink-soft);line-height:1.5;flex:1}
.svc-ledger-txt b{display:block;color:var(--ink);font-weight:600;font-size:15px;margin-bottom:2px}
.svc-ledger-go{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:#F6F4EF;font-weight:600;white-space:nowrap;flex:none;background:#AE7C2E;padding:10px 16px;
  border-radius:var(--r-pill);box-shadow:0 8px 18px -8px rgba(174,124,46,.5);transition:.2s var(--ease)}
.svc-ledger:hover .svc-ledger-go{filter:brightness(1.08);transform:translateX(2px)}
@media(max-width:560px){.svc-ledger{flex-wrap:wrap}.svc-ledger-txt{flex:1 1 100%;order:3}}
.svc-team > .pillar{flex:0 1 262px}

/* ASORA — the product hero: a living lamplight orb for her presence on the
   left, her identity + a checked capability grid on the right, the whole card
   floating on a soft brass glow. Premium, alive, clearly THE product.

   max-width: at full wrap width the right column stretched far past its own
   copy — .p-out caps at 48ch, so the card opened with a large empty quadrant to
   the right of her name and tagline. Containing the card lets the text fill its
   column and reads as a designed object rather than a stretched panel. */
.pillar-lead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center;
  padding:38px 44px;width:100%;max-width:1080px;margin-inline:auto;
  background:radial-gradient(120% 130% at 0% 0%,color-mix(in srgb,var(--svc-soft) 8%,transparent),transparent 55%),var(--panel);
  box-shadow:0 36px 84px -44px var(--svc-glow),0 10px 30px -18px rgba(28,20,14,.28)!important}
.lead-portrait{display:flex;flex-direction:column;align-items:center;gap:15px;flex:none}
/* her presence — a glowing orb that gently breathes, not a flat tile. The lit
   core is --orb-lit: the one green on the site outside the logo, meaning "she
   is alive and answering". Body stays brass so it reads as lamplight on a
   living thing, not a second brand colour. See THE ONE RULE in tokens.css. */
.pillar-lead .p-ic{width:110px;height:110px;border-radius:50%;border:none;
  position:relative;overflow:hidden;isolation:isolate;
  /* Brass-dominant, with green only as the lit core. The green stop is held
     tight (out by 26%) and brass takes the rest; a near-black brass at the rim
     gives the falloff a real sphere has, which is what "deep" reads as. Letting
     green run to 56% made it a green ball with a brown edge. */
  background:radial-gradient(circle at 34% 30%,
    var(--orb-lit) 0%,
    var(--svc-soft) 26%,
    var(--svc-deep) 72%,
    #402F1B 100%);
  box-shadow:0 0 0 8px color-mix(in srgb,var(--svc-soft) 12%,transparent),
    0 22px 50px -14px var(--svc-glow),
    inset 0 2px 7px rgba(255,255,255,.28),
    /* inner rim shadow — the edge of a solid object, not a flat disc */
    inset 0 -10px 22px -8px rgba(46,32,14,.55);
  animation:orbBreathe 4.5s var(--ease) infinite}

/* ALIVE, not just pulsing. Two light blooms drift inside the sphere on
   different, deliberately non-matching cycles (9s and 14s), so the highlight
   never returns to the same place at the same time and the surface reads as
   something with weather inside it rather than a looping animation. The
   breathing scale above stays — together they give motion in two axes.
   overflow:hidden on the parent keeps both blooms inside the circle. */
.pillar-lead .p-ic::before,
.pillar-lead .p-ic::after{content:"";position:absolute;inset:-30%;
  border-radius:50%;pointer-events:none;z-index:1}
/* The specular highlight — warm cream, not white, and half the strength it
   was. At .62 white it bleached the brass out of the whole upper half. */
.pillar-lead .p-ic::before{
  background:radial-gradient(circle at 34% 30%,rgba(255,244,222,.34),transparent 42%);
  animation:orbDriftA 9s var(--ease-soft) infinite}
/* The second bloom is BRASS, not green. Screened green over a brass sphere
   desaturated the whole thing toward olive — the green belongs in the lit core
   only, where it reads as her presence rather than as the orb's colour. */
.pillar-lead .p-ic::after{
  background:radial-gradient(circle at 66% 64%,var(--svc-soft),transparent 50%);
  opacity:.34;mix-blend-mode:screen;
  animation:orbDriftB 14s var(--ease-soft) infinite}
/* the icon rides above the weather */
.pillar-lead .p-ic svg{position:relative;z-index:2;
  width:47px;height:47px;stroke:#F6F4EF;stroke-width:1.7}

@keyframes orbBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes orbDriftA{
  0%,100%{transform:translate(0,0) scale(1)}
  35%    {transform:translate(9%,-7%) scale(1.1)}
  70%    {transform:translate(-7%,6%) scale(.94)}
}
@keyframes orbDriftB{
  0%,100%{transform:translate(0,0) scale(1)}
  40%    {transform:translate(-10%,-8%) scale(1.14)}
  75%    {transform:translate(7%,9%) scale(.9)}
}
/* Motion is decoration here — with reduced-motion the orb still reads as her
   presence, it just stops moving. */
@media(prefers-reduced-motion:reduce){
  .pillar-lead .p-ic,
  .pillar-lead .p-ic::before,
  .pillar-lead .p-ic::after{animation:none}
}
.lead-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--svc-soft);font-weight:600}
.lead-badge .led{width:6px;height:6px;border-radius:50%;background:var(--svc-soft);
  box-shadow:0 0 8px var(--svc-glow);animation:ledPulse 2.4s var(--ease) infinite}
.pillar-lead .lead-main{display:flex;flex-direction:column;min-width:0}
.pillar-lead .p-mod{color:var(--svc-soft)}
.pillar-lead .lead-name{display:flex;align-items:center;gap:12px}
.pillar-lead .lead-name h3{font-size:30px;font-weight:700;letter-spacing:-.02em;margin:3px 0 0}
.pillar-lead .p-role{font-size:15px;margin-top:4px}
.pillar-lead .p-out{font-size:15.5px;line-height:1.55;margin-top:9px;max-width:48ch;color:var(--ink-soft)}
/* capabilities as a premium checked grid */
.lead-caps{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:11px 30px;margin:20px 0 0;padding:0}
.lead-caps li{font-size:13px;color:var(--ink-soft);padding-left:24px;position:relative;line-height:1.4}
.lead-caps li::before{content:'';position:absolute;left:0;top:1px;width:16px;height:16px;border-radius:50%;
  background:color-mix(in srgb,var(--svc-soft) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--svc-soft) 34%,transparent)}
.lead-caps li::after{content:'✓';position:absolute;left:4.5px;top:.5px;font-size:9px;color:var(--svc-soft);font-weight:700}
/* voice badge on her orb — presents "she takes calls too" as a channel cue
   (like a status badge on an avatar), not a button. */
.lead-orb{position:relative;display:grid;place-items:center}
.lead-voice{position:absolute;bottom:-2px;right:-2px;width:36px;height:36px;border-radius:50%;
  background:var(--panel);border:3px solid var(--bg);display:grid;place-items:center;
  box-shadow:0 6px 16px -6px var(--svc-glow)}
.lead-voice svg{width:16px;height:16px;fill:var(--svc-soft)}
.pillar-lead .p-open-row{margin-top:17px}
.lead-crown{width:23px;height:23px;flex:none;fill:var(--svc-soft);
  filter:drop-shadow(0 2px 5px var(--svc-glow))}

/* ============================================================
   PREMIUM PRESENTATION — atmosphere + depth + rack-focus.
   The roster read flat because the cards sat ON the paper with
   equal weight. Light the section, float every card, push ASORA
   forward and set the team back, and pull focus on hover.
   ============================================================ */
/* (1) Light the room — a soft warm spotlight centred on ASORA, so the section
   is a lit environment rather than flat paper. */
.svc-roster{position:relative}
.svc-roster::before{content:"";position:absolute;left:50%;top:-46px;transform:translateX(-50%);
  width:min(1060px,96%);height:460px;pointer-events:none;z-index:0;
  background:radial-gradient(52% 62% at 50% 34%, color-mix(in srgb,var(--ember-soft) 14%, transparent), transparent 72%)}
.svc-lead,.svc-team{position:relative;z-index:1}

/* (2) Real depth — every card floats off the paper; ASORA sits forward with a
   deep, soft shadow, the team sits back with a shallower one. */
.pillar{box-shadow:0 16px 40px -26px rgba(28,20,14,.40)}
.svc-team > .pillar{box-shadow:0 12px 30px -22px rgba(28,20,14,.32)}
.pillar-lead{box-shadow:0 46px 104px -56px rgba(28,20,14,.60),0 12px 30px -20px rgba(28,20,14,.28)}

/* (3) Rack focus — hovering any card gently recedes the rest, like a camera
   pulling focus; the hovered one lifts and deepens its own coloured shadow. */
.pillar{transition:transform .32s var(--ease),box-shadow .38s var(--ease),
  opacity .38s var(--ease),filter .38s var(--ease),border-color .2s var(--ease)}
.svc-roster:has(.pillar:hover) .pillar:not(:hover){opacity:.48;filter:saturate(.72)}
.pillar:hover{box-shadow:0 34px 78px -36px var(--svc-glow),0 10px 24px -16px rgba(28,20,14,.32)}
.pillar-lead:hover{transform:translateY(-4px)}

/* (ASORA's name + orb are styled in the product-hero block above.) */

/* ============================================================
   3D WORKFORCE CONSTELLATION — the premium stage. A warm near-
   black panel (the brand's own #130F10) so the glowing nodes
   pop; full-bleed with feathered edges so it reads as a lit
   moment inside the ivory page. WebGL draws the glow; the node
   labels are real HTML buttons projected on top (see
   js/components/constellation.js). Card layout is the fallback.
   ============================================================ */
#services{overflow-x:clip}
.svc-roster.is-fallback{display:none}

.svc-stage{position:relative;width:100vw;margin-left:50%;transform:translateX(-50%);
  height:clamp(540px,64vh,760px);margin-top:32px;overflow:hidden;isolation:isolate;cursor:grab;
  background:radial-gradient(125% 92% at 50% 40%,#251b17 0%,#17110f 46%,#100b0a 100%);
  touch-action:pan-y}
.svc-stage.grabbing{cursor:grabbing}
/* feather top & bottom into the ivory page */
.svc-stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(var(--bg),transparent 13%,transparent 87%,var(--bg))}
/* grain film — same as the light canvases, kills banding on the dark gradient */
.svc-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.4;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cst-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.cst-labels{position:absolute;inset:0;z-index:3;pointer-events:none}

/* Node label buttons — JS sets .transform each frame to sit on the projected
   3D node, so DO NOT transition transform here (it would lag the nodes). */
.cst-node{position:absolute;top:0;left:0;pointer-events:auto;display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px 6px 9px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.14);
  background:rgba(20,14,12,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#F4EEE9;cursor:pointer;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;font-weight:600;
  transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}
.cst-node:hover,.cst-node:focus-visible{border-color:var(--c);background:rgba(20,14,12,.82);
  box-shadow:0 0 0 1px var(--c),0 10px 34px -8px var(--c);outline:none}
.cst-node.active{border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 12px 38px -8px var(--c)}
.cst-dot{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c);flex:none}
.cst-name{line-height:1}
/* ASORA's label — the lead: larger and crowned */
.cst-node.cst-lead{padding:9px 17px 9px 13px;font-size:13px;letter-spacing:.1em;
  background:rgba(20,14,12,.74);border-color:rgba(255,255,255,.24)}
.cst-crown{color:var(--c);font-size:14px;line-height:1;filter:drop-shadow(0 0 7px var(--c))}
/* when a profile window is open, the constellation labels recede */
.svc-stage.focused .cst-node:not(.active){opacity:.35!important}

.cst-hint{position:absolute;left:0;right:0;bottom:18px;z-index:3;text-align:center;pointer-events:none;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(244,238,233,.42);margin:0}

/* — Launcher card (meet the employee) — compact, unchanged size —
   Each card carries its own signature accent via --svc-* (set inline per
   employee in js/components/services.js). Defaults here fall back to the brand
   green, so a card with no accent still looks exactly as before. */
.pillar{--svc-soft:var(--ember-soft);--svc-deep:var(--ember-deep);
  --svc-tint:rgba(143,111,62,.13);--svc-glow:var(--glow);
  border-radius:var(--r-lg);padding:18px;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .25s var(--ease),border-color .2s var(--ease),box-shadow .25s var(--ease),opacity .4s,filter .4s;
  will-change:transform}
.pillar:hover{border-color:var(--svc-soft)!important;
  box-shadow:0 26px 60px -34px var(--svc-glow),inset 0 1px 0 rgba(20,20,20,.06)}
/* Signature top-accent bar in the employee's colour — subtle at rest, lights up
   on hover. A cool, clean identity cue (Linear/Vercel-style). */
.pillar::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--svc-soft),color-mix(in srgb,var(--svc-soft) 22%,transparent));
  opacity:.5;transition:opacity .25s var(--ease)}
.pillar:hover::before,.pillar-featured::before{opacity:1}
.p-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
/* Cooler icon — a soft gradient in the employee's colour with a glow + inner
   highlight, instead of a flat tint. */
.p-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;transition:.22s var(--ease);
  background:linear-gradient(150deg,color-mix(in srgb,var(--svc-soft) 26%,var(--panel)),var(--svc-tint));
  border:1px solid var(--svc-glow);
  box-shadow:0 8px 20px -8px var(--svc-glow),inset 0 1px 0 rgba(255,255,255,.5)}
.pillar:hover .p-ic{border-color:var(--svc-soft);transform:translateY(-2px) scale(1.04)}
.p-ic svg{width:20px;height:20px;stroke:var(--svc-soft);fill:none;stroke-width:1.7}
/* status — every employee is simply "at work" right now, in its own colour */
.p-status{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:8.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.p-status .led{width:6px;height:6px;border-radius:50%;background:var(--ink-faint)}
.p-status.on{color:var(--svc-soft)}
.p-status.on .led{background:var(--svc-soft);box-shadow:0 0 0 0 var(--svc-glow);
  animation:ledPulse 2.4s var(--ease) infinite}
.p-mod{font-family:var(--font-mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:8px}
.pillar h3{font-size:15.5px;font-weight:600;letter-spacing:-.02em;margin-bottom:2px;line-height:1.2;
  transition:color .2s var(--ease)}
.pillar:hover h3{color:var(--svc-soft)}
.p-role{font-size:12.5px;font-weight:600;color:var(--svc-soft);margin-bottom:8px;line-height:1.3}
/* min-height = two lines, so a one-line sentence (ATLAS) reserves the same
   space as a two-line one (ASORA/ECHO) and every dark spec box lines up. */
.pillar .p-out{font-size:12.5px;color:var(--ink-soft);line-height:1.5;min-height:3em}

/* Spec strip — a clean, light "technical readout" tile that sits naturally on
   the ivory card (no dark box, no pastel canvas). Mono facts, the employee's
   colour as the only accent on the › markers. */
.p-stack{list-style:none;margin:13px 0 0;padding:12px 13px;display:flex;flex-direction:column;gap:6px;
  border-radius:11px;background:rgba(20,15,12,.035);border:1px solid var(--line)}
.p-stack li{font-family:var(--font-mono);font-size:10px;letter-spacing:.01em;color:var(--ink-soft);
  line-height:1.55;padding-left:14px;position:relative}
.p-stack li::before{content:'›';position:absolute;left:0;top:0;font-weight:700;color:var(--svc-soft)}
.pillar:hover .p-stack{border-color:var(--line-2)}
.p-open-row{margin-top:14px;font-size:11px;font-family:var(--font-mono);letter-spacing:.05em;
  color:var(--ink-faint);display:flex;align-items:center;gap:6px;transition:.2s var(--ease)}
.p-open-row span{transition:transform .2s var(--ease)}
.pillar:hover .p-open-row{color:var(--svc-soft)}
.pillar:hover .p-open-row span{transform:translate(2px,-2px)}
.pillar.active{border-color:var(--svc-soft)!important}
.pillar.active h3,.pillar.active .p-open-row{color:var(--svc-soft)}

/* Rest of the roster subtly dims when a module is open — focus moves on */
.svc-roster.dimmed .pillar:not(.active){opacity:.38;filter:saturate(.6)}
.svc-roster.dimmed .pillar:not(.active):hover{opacity:.7}

/* — Ecosystem strip — the ordered tour through the platform — */
.eco-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:24px}
.eco-step{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-soft);
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:7px 13px;
  background:rgba(20,20,20,.02);cursor:pointer;font-family:inherit;transition:.25s var(--ease)}
.eco-step:hover{border-color:var(--ember);color:var(--ink);background:rgba(143,111,62,.1)}
.eco-ic{width:15px;height:15px;display:grid;place-items:center}
.eco-ic svg{width:13px;height:13px;stroke:var(--ember-soft);fill:none;stroke-width:1.7}
.eco-arrow{color:var(--ink-faint);font-size:12px}

/* — The service window (opens like an application) — */
.window{border-radius:var(--r-lg);overflow:hidden;max-height:0;opacity:0;transform:scale(.985);
  transition:max-height .55s var(--ease),opacity .4s,transform .45s var(--ease),margin .55s var(--ease);
  margin:0;will-change:max-height}
.window.open{max-height:2800px;opacity:1;transform:scale(1);margin:14px 0 2px}
.win-bar{display:flex;align-items:center;gap:9px;padding:12px 20px;border-bottom:1px solid var(--line);
  background:var(--panel-2)}
.win-bar .wtitle{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint)}
.win-bar .wclose{margin-left:auto;background:none;border:1px solid var(--line-2);color:var(--ink-faint);
  width:26px;height:26px;border-radius:7px;cursor:pointer;font-size:14px;line-height:1;transition:.25s}
.win-bar .wclose:hover{border-color:var(--ink-soft);color:var(--ink)}
.win-body{padding:4px 26px 22px;display:grid;grid-template-columns:1.06fr .94fr;gap:30px;position:relative;overflow:hidden}
/* The two-column collapse lives HERE, with the component, not in
   responsive.css — the industry landing pages render this window but do not
   load responsive.css, so the case study stayed two-up on a 390px phone and
   the right-hand column wrapped to one or two words per line. Any page that
   can show .win-body now gets its breakpoints automatically. */
@media(max-width:980px){
  .win-body{grid-template-columns:1fr;gap:24px}
}
@media(max-width:560px){
  .win-body{padding:4px 18px 20px;gap:16px}
  .win-l,.win-r{gap:0}
}
.win-body::before{content:"";position:absolute;width:360px;height:360px;
  background:radial-gradient(circle,var(--glow),transparent 70%);top:-180px;right:-120px;
  opacity:.2;filter:blur(50px);pointer-events:none}

.win-sub{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin:2px 0 8px}

/* These four rules are also the Businesses case-study window's ONLY styling
   for its header tag / name / about text — that window reuses these generic
   .window/.win-* classes on purpose (see js/components/businesses.js), so
   they must stay even though the Services window itself no longer uses them. */
.win-l > .tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600}
.win-l h4{font-family:var(--font-serif);font-weight:400;font-size:25px;letter-spacing:-.005em;
  margin:8px 0 9px;line-height:1.12;color:var(--ink)}
.win-over{font-size:13.5px;color:var(--ink-soft);line-height:1.6;max-width:34em}

/* Also still used by the Businesses case-study window's "Automated"/"Result" lists. */
.win-deliver{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.win-deliver .d{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-soft)}
.d-ic{width:17px;height:17px;border-radius:50%;background:transparent;
  border:1px solid var(--line-2);display:grid;place-items:center;flex:none}
.d-ic svg{width:10px;height:10px;stroke:var(--ink-soft);fill:none;stroke-width:2.2}

/* — Hero: an employee profile, not a headline — */
.win-hero{padding:22px 26px 20px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.win-hero::before{content:"";position:absolute;width:320px;height:320px;
  background:radial-gradient(circle,var(--glow),transparent 70%);top:-160px;left:-100px;
  opacity:.18;filter:blur(50px);pointer-events:none}
.win-hero-top{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.win-avatar{width:48px;height:48px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:rgba(143,111,62,.13);border:1px solid rgba(143,111,62,.25)}
.win-avatar svg{width:23px;height:23px;stroke:var(--ember-soft);fill:none;stroke-width:1.6}
.win-hero-id{min-width:0}
.win-hero-name{font-family:var(--font-serif);font-size:26px;line-height:1.1;color:var(--ink)}
.win-hero-role{font-size:12.5px;font-weight:600;color:var(--ember-soft);margin-top:2px}
.win-pill{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--green-soft);
  border:1px solid rgba(143,111,62,.35);padding:6px 12px;border-radius:var(--r-pill)}
.win-pill .led{width:6px;height:6px;border-radius:50%;background:var(--green-soft);
  box-shadow:0 0 0 0 rgba(143,111,62,.5);animation:ledPulse 2.4s var(--ease) infinite}
.win-voice{font-family:var(--font-serif);font-style:italic;font-size:19px;line-height:1.4;color:var(--ink);
  margin:16px 0 8px;max-width:36em}
.win-intro-line{font-size:13.5px;color:var(--ink-soft);line-height:1.6;max-width:38em}

/* animated flow — a compact row of steps that wraps, not a tall list.
   align-items:stretch matches every tile in a row to the tallest one, so
   uneven label lengths never create a ragged, uneven-height row. */
.flow-steps{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:8px 3px;margin-top:2px}
.flow-step{display:flex;flex-direction:column;align-items:center;gap:7px;width:82px;padding:11px 6px 10px;
  border-radius:13px;border:1px solid var(--line-2);background:var(--panel-2);text-align:center;
  opacity:0;transform:translateY(8px);transition:.22s var(--ease)}
.window.open .flow-step{opacity:1;transform:none}
.flow-step .fi{width:22px;height:22px;border-radius:50%;background:var(--panel);
  border:1px solid rgba(143,111,62,.3);display:grid;place-items:center;flex:none;
  font-family:var(--font-mono);font-size:9.5px;color:var(--ember-soft)}
.flow-step span:last-child{font-size:10.5px;color:var(--ink-soft);line-height:1.25}
.flow-arrow{display:flex;align-items:center;align-self:center;color:var(--ink-faint);opacity:.4;flex:none}
.flow-arrow svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2}

@media(max-width:560px){
  .flow-step{width:73px;padding:9px 5px 8px}
  .flow-step span:last-child{font-size:9.5px}
  .flow-arrow{display:none}
}

.win-r{display:flex;flex-direction:column;gap:10px}
.win-block{border-radius:14px;border:1px solid var(--line);background:var(--panel-2);padding:14px 16px}
.win-block h5{font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:8px;font-weight:600}
/* "Works with your tools" integration chips */
.win-integ .integ-row{display:flex;flex-wrap:wrap;gap:7px}
.integ{font-size:11.5px;color:var(--ink-soft);border:1px solid var(--line-2);
  padding:6px 11px;border-radius:var(--r-pill);background:rgba(20,20,20,.02)}

/* "What I can do" — first-person capability checklist */
.win-caps{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px}
.win-cap{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--ink-soft);line-height:1.4;
  opacity:0;transform:translateY(6px);transition:.22s var(--ease)}
.window.open .win-cap{opacity:1;transform:none}
.cap-ic{width:17px;height:17px;border-radius:50%;background:rgba(143,111,62,.12);flex:none;margin-top:1px;
  border:1px solid rgba(143,111,62,.3);display:grid;place-items:center}
.cap-ic svg{width:9px;height:9px;stroke:var(--ember-soft);fill:none;stroke-width:3}

/* The two ways to move — hire now, or ask ASORA first. Sits right under
   the timeline instead of its own footer bar, right-aligned under it. */
.win-cta-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px}

/* --biz-color is only ever set on the Businesses case-study window (see
   js/components/businesses.js) — falling back to --ember keeps the Services
   employee windows (which never set it) exactly as before. Before this fix,
   these were hardcoded to --ember, so every business's case study showed
   the same green CTA regardless of that business's own brand colour (e.g.
   CWP's window showed green instead of CWP's actual navy). */
.win-cta{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font-weight:600;font-size:14px;
  padding:14px 26px;border-radius:var(--r-pill);background:var(--biz-color,var(--ember));color:#F6F4EF;
  box-shadow:var(--shadow-glow);transition:.22s var(--ease);cursor:pointer;border:none;font-family:inherit}
.win-cta span{transition:transform .22s var(--ease)}
.win-cta:hover{filter:brightness(1.12);transform:translateY(-2px)}
.win-cta:hover span{transform:translateX(4px)}

.win-cta-secondary{font-family:inherit;font-weight:600;font-size:13px;color:var(--ember-soft);
  background:rgba(143,111,62,.08);border:1px solid rgba(143,111,62,.28);padding:12px 22px;
  border-radius:var(--r-pill);cursor:pointer;transition:.22s var(--ease)}
.win-cta-secondary:hover{background:rgba(143,111,62,.16);border-color:var(--ember);
  box-shadow:0 0 0 4px rgba(143,111,62,.1)}

/* — Services window only: a compact, centered profile card instead of a
   full-bleed panel. Scoped to .svc-window so the Businesses case-study
   window (.biz-window), which reuses the same base classes, is untouched. */
.svc-window.open{max-width:720px;margin-left:auto;margin-right:auto}
.svc-window .win-body{grid-template-columns:1fr;gap:4px;padding-bottom:22px}
.svc-window .win-hero{padding:20px 24px 18px}
.svc-window .win-r{margin-top:14px}
.svc-window .win-cta{padding:9px 18px;font-size:12.5px;gap:7px}
.svc-window .win-cta-secondary{padding:8px 15px;font-size:11.5px}

@media(max-width:560px){
  .win-hero{padding:18px 18px 16px}
  .win-hero-top{flex-wrap:wrap}
  .win-pill{margin-left:0;order:3;flex-basis:100%;width:fit-content}
  .win-voice{font-size:16px}
  .win-caps{grid-template-columns:1fr}
  .win-cta-row{flex-direction:column;align-items:stretch;justify-content:center}
  .svc-window .win-cta{align-self:stretch;font-size:12.5px;padding:12px 18px;gap:6px;justify-content:center}
  .svc-window .win-cta-secondary{font-size:12px;padding:11px 18px;text-align:center}
}

/* ---------- Phone: the ASORA hero card keeps its presence but sheds bulk.
   Lives at the end of the file so it wins the source-order cascade. ---------- */
@media(max-width:760px){
  /* capability list: one clean left-aligned column (two crammed columns
     wrapped awkwardly at phone width), centred as a block under the orb */
  .lead-caps{grid-template-columns:1fr;gap:9px;width:fit-content;margin:16px auto 0;text-align:left}
  .pillar-lead .p-ic{width:94px;height:94px}
  .pillar-lead .p-ic svg{width:40px;height:40px}
  .pillar-lead .lead-name h3{font-size:26px}
  .svc-ledger{margin-top:28px}
}

/* ---------- ASORA hero card, premium pass ----------------------------------
   Flat white box → designed surface: soft green atmosphere + fine grain film,
   an editorial serif statement for her one-liner, ink name with a quiet mono
   role (one green voice, not three), and hairline structure between the
   portrait column, capabilities and the close. CSS only, markup untouched. */
.pillar-lead{position:relative;isolation:isolate;
  background:
    radial-gradient(130% 150% at 8% 0%,color-mix(in srgb,var(--svc-soft) 11%,transparent),transparent 55%),
    radial-gradient(95% 130% at 100% 105%,color-mix(in srgb,var(--svc-soft) 5%,transparent),transparent 58%),
    var(--panel)}
.pillar-lead::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  pointer-events:none;mix-blend-mode:overlay;opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* the portrait becomes its own editorial column, divided by a hairline */
.lead-portrait{align-self:stretch;justify-content:center;
  padding-right:clamp(18px,2.6vw,34px);border-right:1px solid var(--line)}
/* one green voice: ink name, quiet mono role — the orb carries the colour */
.pillar-lead .lead-name h3{color:var(--ink);font-size:34px}
.pillar-lead .p-role{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--svc-soft);font-weight:600;margin-top:8px}
/* her one-liner as a serif statement, the card's editorial centrepiece */
.pillar-lead .p-out{font-family:var(--font-serif);font-size:19.5px;line-height:1.48;
  color:var(--ink);letter-spacing:-.008em;margin-top:12px;max-width:44ch}
.pillar-lead .lead-caps{border-top:1px solid var(--line);padding-top:18px;margin-top:20px}
.pillar-lead .p-open-row{border-top:1px solid var(--line);padding-top:15px;margin-top:20px;width:100%}
@media(max-width:760px){
  .lead-portrait{border-right:0;padding-right:0}
  .pillar-lead .lead-name{justify-content:center}
  .pillar-lead .p-out{font-size:17.5px}
  .pillar-lead .lead-caps{border-top:0;padding-top:0}
}