/* Bergence Digital, teal: /digital-teal/. Palette B (see sites/digital/docs/DESIGN.md).
   Loaded after sand.css and digital.css, like digital-blue.css, and built from it: the same hero window,
   pinned service cards and ribbon, plus the three-pillar band, the forward-deployed pods and the results.
   Every colour on this route is a token below; dark mode swaps the tokens, nothing else. */

:root {
  color-scheme: light dark;

  /* palette B */
  --deep: #0B3B3C;          /* primary dark: headings, nav, dark sections, footer */
  --teal: #17807E;          /* secondary: icons, borders, fills, strokes */
  --teal-text: #0F6664;     /* teal for small text: #17807E is 4.49:1 on off-white, this is 6.4:1 */
  --volt: #C8F04A;          /* accent: primary CTAs, key numbers. Never text on light grounds */
  --volt-hover: #B6E02F;
  --sage: #E6EFEA;          /* alternate sections, cards */
  --off: #F8F9F5;           /* page */
  --surface: #FFFFFF;       /* windows and cards that sit on sage */
  --danger: #D64545;        /* hang-up button only */
  --ok: #17807E;

  /* derived */
  --teal-wash: #DDEBE5;     /* teal 10% on off-white: icon tiles, chips */
  --teal-wash-2: #CBE1DA;   /* teal 18%: highlights, tags */
  --tile-a: #D6E8E1; --tile-b: #E2EEE8; --tile-c: #EDF4E3;
  --sk: #E0E8E4;            /* skeleton bars in the fragments */
  --sk-2: #EBF1EE;
  --dim: #A9BAB5;           /* rival bars, inactive dots */
  --deep-hover: #0E4C4D;
  --shade: 11, 59, 60;      /* deep teal as rgb, for shadows */
  --focus: #0F6664;
  --grid: rgba(23, 128, 126, 0.08);
  --grid-hot: rgba(23, 128, 126, 0.3);
  --scrn: #FFFFFF;          /* phone screens inside the fragments */
  --frame: #0B3B3C;         /* phone frames, dark panels inside the fragments */

  /* the names sand.css, digital.css and digital-blue.css use */
  --ground: var(--off);
  --raised: var(--surface);
  --sunken: var(--sage);
  --ink: var(--deep);
  --muted: #5A6B66;         /* 5.3:1 on off-white, 4.8:1 on sage */
  --soft: rgba(11, 59, 60, 0.8);
  --line: rgba(11, 59, 60, 0.12);
  --line-strong: rgba(11, 59, 60, 0.24);
  --amber: var(--teal);
  --sand: var(--teal);
  --on-light: var(--deep);
  --stick: calc(var(--nav-top) + var(--nav-h) + 20px);

  /* code colours for the sweep and the lens (digital-teal-hero.js reads these) */
  --syn-key: #0B3B3C; --syn-str: #2F7D32; --syn-num: #A15C00; --syn-fn: #0F6664; --syn-tag: #3D6B5C; --syn-pun: #7A8A85; --syn-txt: #1F3A3A;
  --lens: #FFFFFF;
}

/* dark: background around #0A2526, surfaces from deep teal, off-white text, volt unchanged */
@media (prefers-color-scheme: dark) {
  :root {
    --sage: #0E2F30;
    --off: #0A2526;
    --surface: #123F40;
    --teal: #2A9D9A;
    --teal-text: #4FC2BE;   /* 7.2:1 on #0A2526 */
    --teal-wash: #15494A;
    --teal-wash-2: #1D5A5A;
    --tile-a: #1A5051; --tile-b: #174748; --tile-c: #1F5249;
    --sk: #1C4C4D;
    --sk-2: #184445;
    --dim: #4A6E6D;
    --deep-hover: #F8F9F5;
    --shade: 0, 0, 0;
    --focus: #C8F04A;
    --grid: rgba(79, 194, 190, 0.07);
    --grid-hot: rgba(79, 194, 190, 0.26);
    --scrn: #164546;
    --frame: #061819;
    --ground: #0A2526;
    --raised: #0F3233;
    --sunken: #071C1D;
    --ink: #F8F9F5;
    --muted: #9FB3AE;       /* 7.3:1 on #0A2526 */
    --soft: rgba(248, 249, 245, 0.8);
    --line: rgba(248, 249, 245, 0.12);
    --line-strong: rgba(248, 249, 245, 0.24);
    --on-light: #0B3B3C;
    --syn-key: #C8F04A; --syn-str: #8FD694; --syn-num: #F0B46A; --syn-fn: #4FC2BE; --syn-tag: #9AD1C0; --syn-pun: #7F9A95; --syn-txt: #E3ECE8;
    --lens: #0F3233;
  }
}

html { background: var(--ground); scrollbar-color: var(--line-strong) var(--ground); }
body { background: var(--ground); color: var(--ink); }
::selection { background: var(--volt); color: var(--deep); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.skip { background: var(--ink); color: var(--ground); }

/* ---------------- nav ---------------- */
.nav { background: color-mix(in srgb, var(--raised) 95%, transparent); box-shadow: 0 1px 2px rgba(var(--shade), 0.05); transition: transform 0.4s var(--ease); }
.nav .cta, .rb-cta { background: var(--volt); color: var(--deep); }
.nav .cta:hover, .rb-cta:hover { background: var(--volt-hover); }
/* the nav's "Start a project": a pill inside the bar with an arrow chip, the page's one CTA */
.nav .cta, .rb-cta { flex: none; align-self: center; gap: 12px; height: calc(var(--nav-h) - 12px); margin: 0 5px 0 4px; padding: 0 5px 0 22px; border-radius: 99px; font-size: 15.5px; font-weight: 650; letter-spacing: -0.005em; white-space: nowrap; box-shadow: 0 8px 18px -10px rgba(var(--shade), 0.6); }
.nav .cta svg { box-sizing: content-box; width: 14px; height: 14px; padding: 8px; border-radius: 50%; background: #FFFFFF; color: var(--volt); transition: transform 0.24s var(--ease); }
.nav .cta:hover svg { transform: translateX(3px); }
/* on the home page it waits until the hero's own button has scrolled away (digital-teal-hero.js) */
html.has-hero .nav .cta { max-width: 260px; overflow: hidden; transition: background-color 0.24s var(--ease), max-width 0.6s cubic-bezier(0.16, 1, 0.3, 1), padding 0.6s cubic-bezier(0.16, 1, 0.3, 1), margin 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s var(--ease); }
html.has-hero:not(.cta-on) .nav .cta { max-width: 0; padding: 0; margin: 0; opacity: 0; box-shadow: none; pointer-events: none; visibility: hidden; }
.menu { background: var(--raised); }
.ext { display: inline-flex; align-items: center; gap: 6px; }
.ext svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.menu .ext svg { width: 18px; height: 18px; }

/* ---------------- buttons ---------------- */
.btn-volt { background: var(--volt); color: var(--deep); }
.btn-volt:hover { background: var(--volt-hover); }
.btn-volt:hover .arr { transform: translateX(4px); }
/* the primary CTA: taller, a pill, with the arrow in a white chip */
.btn-volt { height: 58px; gap: 16px; padding: 0 8px 0 28px; border-radius: 99px; font-size: 16px; box-shadow: 0 14px 28px -14px rgba(var(--shade), 0.6); transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease); }
.btn-volt:hover { transform: translateY(-1px); box-shadow: 0 18px 34px -14px rgba(var(--shade), 0.7); }
.btn-volt .arr { position: relative; width: 42px; height: 42px; border-radius: 50%; background: #FFFFFF; -webkit-mask: none; mask: none; }
.btn-volt .arr::before { content: ""; position: absolute; inset: 13px; background: var(--volt); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; }
.btn-volt:hover .arr { transform: translateX(3px); }
.btn-line { height: 58px; padding: 0 26px; border-radius: 99px; font-size: 16px; }
.btn-line { box-shadow: inset 0 0 0 1.5px var(--teal); color: var(--teal-text); }
.btn-line:hover { background: var(--teal-wash); }

/* ---------------- hero ---------------- */
/* Two columns: the copy on the left, a live product window on the right that cycles through what we
   build (digital-teal-hero.js). Behind them, a blueprint grid that lights up around the pointer. */
.hx-teal { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 4.5vw, 80px); min-height: 100svh; padding: calc(var(--nav-top) + var(--nav-h) + 32px) var(--edge) calc(52px + clamp(32px, 6vh, 64px)); background: var(--ground); }
.hx-teal::before, .hx-teal::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--grid-c) 1px, transparent 1px), linear-gradient(90deg, var(--grid-c) 1px, transparent 1px); background-size: 44px 44px; background-position: -1px -1px; }
.hx-teal::before { --grid-c: var(--grid); -webkit-mask-image: radial-gradient(ellipse 60% 75% at 72% 52%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse 60% 75% at 72% 52%, #000 25%, transparent 78%); }
.hx-teal::after { --grid-c: var(--grid-hot); -webkit-mask-image: radial-gradient(220px circle at var(--mx, -999px) var(--my, -999px), #000, transparent); mask-image: radial-gradient(220px circle at var(--mx, -999px) var(--my, -999px), #000, transparent); }
.hx-field { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.hx-teal > .hx-copy, .hx-teal > .hx-stage, .hx-teal > .hx-logos { position: relative; z-index: 1; }
.hx-teal > .hx-logos { position: absolute; background: var(--ground); }
.hx-teal .hx-title { font-size: clamp(36px, 4.2vw, 72px); line-height: 0.98; text-wrap: balance; color: var(--ink); }
.hx-sub { margin-top: 28px; max-width: 46ch; font-size: clamp(19px, 1.55vw, 24px); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; color: var(--teal-text); text-wrap: balance; }
.hx-teal .hx-lede { margin-top: 18px; max-width: 54ch; font-size: 17px; color: var(--soft); }
.hx-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
/* the headline is two lines on desktop: "Bespoke AI solutions," then "no matter the complexity." */
@media (min-width: 901px) {
  .hx-teal .hx-ln { display: block; white-space: nowrap; }
  .hx-teal > .hx-copy { padding-bottom: 108px; }   /* centre the copy on the window, not on the window plus its switch row */
}

/* the window and the switch under it */
.hx-stage { display: flex; flex-direction: column; gap: 64px; }
.hs { position: relative; cursor: default; -webkit-user-select: none; user-select: none; }
.hs-tilt { position: relative; }
.hs-panel { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 50px 90px -46px rgba(var(--shade), 0.42), 0 14px 28px -16px rgba(var(--shade), 0.16); }
.hs-bar { display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.hs-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--sk); }
.hs-url { min-width: 0; margin-left: 12px; padding: 4px 14px; border-radius: 99px; background: var(--sunken); font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-pill { flex: none; margin-left: auto; padding: 3px 10px; border-radius: 99px; background: var(--teal-wash); font-size: 11px; font-weight: 600; color: var(--teal-text); white-space: nowrap; }
.hs-live { display: flex; align-items: center; gap: 6px; margin-left: 10px; font-size: 11.5px; font-weight: 600; color: var(--teal-text); }
.hs-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: beat 1.6s ease-in-out infinite; }
.hs-body { position: relative; aspect-ratio: 560 / 360; }
.scr { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
.scr.is-on { visibility: visible; }
.scr text { font-family: var(--font); }
.hs-code { position: absolute; left: 0; right: 0; top: 43px; bottom: 0; width: 100%; height: calc(100% - 43px); pointer-events: none; }

.hx-teal .hx-switch { margin-top: 0; font-size: clamp(15px, 1.1vw, 17px); gap: 0 12px; }
.hx-teal .hx-switch .sw { gap: 12px; }
.hx-teal .hx-switch button[aria-current="true"] { color: var(--ink); text-decoration-color: var(--teal); }
.hx-teal .hx-switch .sc { color: var(--teal-text); }
.sw-h { flex: none; margin-right: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }

/* the screens' moving parts */
.dk { fill: var(--ink); }
.sk-l { fill: none; stroke: var(--scrn); stroke-width: 1.5; }
.route { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 7; }
.ring { fill: var(--scrn); stroke: var(--teal); stroke-width: 2.5; }
.dim { fill: var(--dim); }
.hl { fill: var(--volt); }                                        /* the one volt highlight in the AI answer */
.sh { filter: drop-shadow(0 10px 14px rgba(var(--shade), 0.14)); }
.cur-p { fill: var(--deep); stroke: #FFFFFF; stroke-width: 1.4; stroke-linejoin: round; }
.rip { fill: var(--teal); opacity: 0; }
.cur, .badge, .rip, .grow, .hl { transform-box: fill-box; }
.rip, .badge { transform-origin: center; }
.grow, .hl { transform-origin: 0 50%; }
.cur { opacity: 0; }
.hs .scr.is-on .route { animation: run 1s linear infinite; }
.hs .scr.is-on .live, .hs .scr.is-on .ring { animation: beat 1.6s ease-in-out infinite; }
.hs .scr.is-on .wave rect { animation: talk 0.9s ease-in-out infinite alternate; }
.hs .scr.is-on .cur { animation: cur-web 4.2s var(--ease) infinite; }
.hs .scr.is-on .cur-ai { animation-name: cur-ai; }
.hs .scr.is-on .rip { animation: rip 4.2s ease-out infinite; }
.hs .scr.is-on .badge { animation: badge 4.2s var(--ease) infinite; }
@keyframes cur-web { 0% { opacity: 0; transform: translate(270px, 140px); } 10% { opacity: 1; } 40%, 88% { opacity: 1; transform: translate(498px, 316px); } 100% { opacity: 0; transform: translate(498px, 316px); } }
@keyframes cur-ai { 0% { opacity: 0; transform: translate(280px, 250px); } 10% { opacity: 1; } 40%, 88% { opacity: 1; transform: translate(416px, 310px); } 100% { opacity: 0; transform: translate(416px, 310px); } }
@keyframes rip { 0%, 40% { opacity: 0; transform: scale(0.2); } 46% { opacity: 0.35; } 70%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes badge { 0%, 42% { opacity: 0; transform: scale(0.3); } 52% { opacity: 1; transform: scale(1.3); } 60%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* status cards, floating in front of the window */
.hs-float { position: absolute; inset: 0; pointer-events: none; }
.fl { display: none; position: absolute; inset: 0; }
.fl.is-on { display: block; }
.chip { position: absolute; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 40px -22px rgba(var(--shade), 0.4), 0 2px 6px rgba(var(--shade), 0.06); white-space: nowrap; transition: translate 0.5s var(--ease); }
.chip b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); }
.chip small { display: block; margin-top: 1px; font-size: 12px; line-height: 1.3; color: var(--muted); }
.fa { top: -28px; right: 5%; translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -10px); }
.fb { bottom: -30px; left: -6%; translate: calc(var(--px, 0) * -9px) calc(var(--py, 0) * -7px); }
.ch-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--teal-wash); color: var(--teal-text); }
.ch-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ch-ic.solid { background: var(--teal); color: #FFFFFF; }
.ch-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px var(--teal-wash); }

/* the platforms strip along the hero's foot */
.hx-logos { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 28px; height: 52px; padding-left: var(--edge); border-top: 1px solid var(--line); }
.lg-h { flex: none; font-size: 13px; color: var(--muted); }
.hx-logos .marquee { flex: 1; min-width: 0; height: 100%; align-items: center; }
.mq-row { display: flex; flex: none; align-items: center; gap: 40px; padding-right: 40px; animation: mq 60s linear infinite; }
.mq-row li { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--muted); white-space: nowrap; }
.mq-row img { width: 18px; height: 18px; opacity: 0.6; }
.mq-row .lg-own img { filter: grayscale(1); }
@media (prefers-color-scheme: dark) { .mq-row img { filter: invert(1); opacity: 0.55; } .mq-row .lg-own img { filter: grayscale(1); } }

/* ---------------- the ribbon ---------------- */
.ribbon { position: fixed; z-index: 21; top: var(--nav-top); left: 12px; right: 12px; height: var(--nav-h); display: flex; align-items: stretch; padding-left: 8px; background: color-mix(in srgb, var(--raised) 97%, transparent); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px -12px rgba(var(--shade), 0.18); transform: translateY(calc(-100% - 24px)); transition: transform 0.4s var(--ease); }
html.rib .ribbon { transform: none; }
html.rib .nav { transform: translateY(calc(-100% - 24px)); }
.ribbon > a[data-i] { display: flex; align-items: center; gap: 9px; margin: 8px 2px; padding: 0 14px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--muted); white-space: nowrap; transition: color 0.2s var(--ease), background-color 0.2s var(--ease); }
.ribbon > a[data-i]:hover { color: var(--ink); }
.ribbon > a[aria-current="true"] { background: var(--teal-wash); color: var(--teal-text); }
.ribbon svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rb-cta { display: flex; align-items: center; white-space: nowrap; transition: background-color 0.2s var(--ease); }
.rb-cta .arr { position: relative; flex: none; box-sizing: content-box; width: 14px; height: 14px; padding: 8px; border-radius: 50%; background: #FFFFFF; -webkit-mask: none; mask: none; transition: transform 0.24s var(--ease); }
.rb-cta .arr::before { content: ""; position: absolute; inset: 8px; background: var(--volt); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; }
.rb-cta:hover .arr { transform: translateX(3px); }

.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee:hover .mq-row { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-100%); } }

/* ---------------- section heads (pillars, pods, results) ---------------- */
.room-h { max-width: 22ch; font-size: clamp(32px, 3.6vw, 56px); font-weight: 500; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; color: var(--ink); }
.room-h span { color: var(--muted); }
.room-lede { max-width: 52ch; margin-top: 18px; font-size: 18px; line-height: 1.5; color: var(--soft); text-wrap: pretty; }
/* two-sentence heads and ledes: each sentence starts its own line on wider screens */
@media (min-width: 761px) {
  .room-h, .stack-head h2 { max-width: none; text-wrap: initial; }
  .room-h span, .stack-head h2 span, .room-lede .ln { display: block; }
  .room-lede:has(.ln) { max-width: 86ch; }
}

/* ---------------- three pillars ---------------- */
.pillars { padding: clamp(64px, 8vw, 112px) var(--edge) clamp(56px, 7vw, 96px); background: var(--ground); }
.pl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.pl { position: relative; display: flex; flex-direction: column; min-height: 248px; padding: 28px; background: var(--sunken); border: 1px solid var(--line); border-radius: 18px; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); }
.pl:hover { border-color: var(--teal); }
.pl-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--deep); color: var(--volt); }
@media (prefers-color-scheme: dark) { .pl-ic { background: var(--surface); } }
.pl-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pl h3 { margin-top: 28px; font-size: clamp(22px, 1.8vw, 28px); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); }
.pl p { margin-top: 10px; color: var(--soft); text-wrap: pretty; }
.pl a { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: auto; padding-top: 22px; font-weight: 600; color: var(--teal-text); }
.pl a::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }   /* the whole card is the link */
.pl a .arr { transition: transform 0.2s var(--ease); }
.pl:hover a .arr { transform: translateX(4px); }

/* ---------------- the services: one pinned section ---------------- */
.stack-room { position: relative; height: calc(100svh + 6 * 72svh); padding: 0 var(--edge); background: var(--ground); }
.stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; padding: calc(var(--stick) + 4px) 0 28px; overflow: clip; }
.stack-head { flex: none; padding-bottom: 20px; }
.stack-head h2 { max-width: 40ch; font-size: clamp(26px, 2.5vw, 38px); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
.stack-head h2 span { color: var(--muted); }
.stack { position: relative; flex: 1; min-height: 0; }
.card { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px; padding: clamp(28px, 2.8vw, 40px); background: var(--raised); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 -6px 18px -14px rgba(var(--shade), 0.16), 0 1px 2px rgba(var(--shade), 0.05); transform-origin: 50% 0; transform: translateY(var(--y, 0px)) scale(calc(1 - var(--cover, 0) * 0.04)); }
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--deep); opacity: calc(var(--cover, 0) * 0.08); pointer-events: none; }
.c-copy { display: flex; flex-direction: column; min-height: 0; }
.c-copy h3 { font-size: clamp(28px, 2.6vw, 40px); font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; }
.c-lede { margin-top: 14px; max-width: 36ch; font-size: 17px; line-height: 1.5; color: var(--soft); text-wrap: pretty; }
.c-num { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.c-num b { color: var(--teal-text); }
.tag-p { padding: 3px 10px; border-radius: 99px; background: var(--teal-wash); font-size: 11.5px; font-weight: 600; letter-spacing: 0; color: var(--teal-text); }
.c-svc { display: flex; flex: 1; flex-direction: column; min-height: 0; margin-top: clamp(18px, 3vh, 32px); border-top: 1px solid var(--line); counter-reset: svc; }
.c-svc li { position: relative; display: flex; flex: 1 1 0; flex-direction: column; justify-content: center; gap: 3px; min-height: 48px; max-height: 108px; padding: 8px 0 8px 44px; border-bottom: 1px solid var(--line); counter-increment: svc; }
.c-svc li::before { content: counter(svc, decimal-leading-zero); position: absolute; left: 0; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--teal-wash); color: var(--teal-text); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.c-svc b { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); }
.c-svc span { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.c-svc a { color: var(--teal-text); text-decoration: underline; text-underline-offset: 0.18em; }
.c-go { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: clamp(16px, 2.6vh, 28px); padding: 12px 18px; border-radius: 10px; background: var(--deep); color: var(--off); font-size: 14.5px; font-weight: 600; transition: background-color 0.2s var(--ease); }
.c-go:hover { background: var(--teal); color: #FFFFFF; }
@media (prefers-color-scheme: dark) { .c-go { background: var(--ink); color: var(--ground); box-shadow: inset 0 0 0 1px var(--line-strong); } .c-go:hover { background: var(--teal); color: #FFFFFF; } }
.c-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: translate 0.2s var(--ease); }
.c-go:hover svg { translate: 3px 0; }
.c-fig { position: relative; min-height: 0; background: var(--sunken); border-radius: 14px; }
.c-fig svg { position: absolute; inset: clamp(14px, 1.8vw, 26px); width: calc(100% - 2 * clamp(14px, 1.8vw, 26px)); height: calc(100% - 2 * clamp(14px, 1.8vw, 26px)); overflow: visible; }

/* fragment and diagram parts, all from tokens */
.c-fig text { font-family: var(--font); }
.card-w { fill: var(--surface); stroke: var(--line-strong); }
.cw { fill: var(--raised); stroke: var(--line); }
.ln { fill: none; stroke: var(--line-strong); }
.dot { fill: var(--dim); }
.tint, .tint-c { fill: var(--teal-wash-2); }
.tile-a { fill: var(--tile-a); } .tile-b { fill: var(--tile-b); } .tile-c { fill: var(--tile-c); }
.scrn { fill: var(--scrn); }
.sk { fill: var(--sk); }
.sk2 { fill: var(--sk-2); }
.inkf { fill: var(--frame); }
.inkf2 { fill: var(--dim); }
.bf, .bl-f, .tag { fill: var(--teal); }
.tag-s { fill: var(--teal-wash-2); }
.bl { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.w { fill: #FFFFFF; }
.w-m { fill: rgba(255, 255, 255, 0.72); }
.w-f { fill: rgba(255, 255, 255, 0.85); }
.w-s { fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wk { fill: #FFFFFF; }               /* white button inside a teal banner */
.wo { fill: #FFFFFF; fill-opacity: 0.14; }
.wo2 { fill: #FFFFFF; fill-opacity: 0.24; }
.end { fill: var(--danger); }
.k { fill: var(--ink); }
.kd { fill: var(--deep); }           /* deep text on volt, in either mode */
.m { fill: var(--muted); }
.b { fill: var(--teal-text); }
.bk { fill: #0F6664; }
.ph-ring { fill: none; stroke: var(--surface); stroke-width: 2; }   /* a thin edge around the portraits in the fragments */               /* teal text on a white button, in either mode */
.node { fill: var(--surface); stroke: var(--teal); stroke-width: 2; }
.tick { fill: none; stroke: var(--teal); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dash { fill: none; stroke: var(--line-strong); stroke-dasharray: 4 4; }
.live { fill: var(--teal); }
.flow { fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-dasharray: 4 5; }
.spoke { fill: none; stroke: var(--teal); stroke-opacity: 0.45; stroke-width: 1.5; stroke-dasharray: 3 6; }
.orbit { fill: none; stroke: var(--teal); stroke-opacity: 0.3; stroke-width: 1.5; stroke-dasharray: 2 9; }
.prog { fill: none; stroke: var(--teal); stroke-width: 2; }
.clock { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; }
.wave rect { fill: var(--teal); }

html.js .pop { opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease-enter); transition-delay: calc(var(--d, 0) * 90ms); }
html.js .on .pop { opacity: 1; transform: none; }
html.js .flow, html.js .spoke { opacity: 0; transition: opacity 0.6s var(--ease) 0.5s; }
html.js .on .flow, html.js .on .spoke { opacity: 1; animation: run 1.2s linear infinite; }
@keyframes run { to { stroke-dashoffset: -18; } }
html.js .prog { stroke-dasharray: 460; stroke-dashoffset: 460; transition: stroke-dashoffset 1.4s var(--ease) 0.2s; }
html.js .on .prog { stroke-dashoffset: 0; }
html.js .bar { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1s var(--ease-enter); transition-delay: calc(var(--d, 0) * 90ms + 200ms); }
html.js .on .bar { transform: none; }
.orbit { transform-box: fill-box; transform-origin: center; }
html.js .on .orbit { animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
html.js .on .live { animation: beat 1.6s ease-in-out infinite; }
@keyframes beat { 50% { opacity: 0.35; } }
.wave rect { transform-box: fill-box; transform-origin: center; }
html.js .on .wave rect { animation: talk 0.9s ease-in-out infinite alternate; }
.wave rect:nth-child(3n) { animation-delay: -0.3s; }
.wave rect:nth-child(3n + 1) { animation-delay: -0.6s; }
.wave rect:nth-child(4n) { animation-duration: 0.7s; }
@keyframes talk { to { transform: scaleY(0.35); } }
.clock { transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); }
html.js .clock { stroke-dasharray: 289; stroke-dashoffset: 289; transition: stroke-dashoffset 1.6s var(--ease) 0.6s; }
html.js .on .clock { stroke-dashoffset: 0; }

/* ---------------- forward-deployed pods ---------------- */
/* the one deep-teal room: what a pod is, how an engagement runs, and why it is faster */
.pods { padding: clamp(80px, 10vw, 144px) var(--edge); background: var(--deep); color: #F8F9F5; }
@media (prefers-color-scheme: dark) { .pods { background: var(--sunken); border-block: 1px solid var(--line); } }
.pods .room-h { color: #F8F9F5; }
.pods .room-h span { color: #9FC4BC; }
.pods .room-lede { color: rgba(248, 249, 245, 0.82); }
.pod-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 64px; align-items: end; }
.pod-head .room-lede { margin-top: 22px; }
.pod-team { display: flex; align-items: center; gap: 14px; justify-self: end; padding: 14px 18px; border: 1px solid rgba(248, 249, 245, 0.16); border-radius: 16px; }
.pod-team ul { display: flex; }
.pod-team li { display: grid; place-items: center; width: 40px; height: 40px; margin-left: -8px; border-radius: 50%; background: #17807E; border: 2px solid var(--deep); font-size: 12px; font-weight: 600; color: #FFFFFF; }
@media (prefers-color-scheme: dark) { .pod-team li { border-color: var(--sunken); } }
.pod-team li:first-child { margin-left: 0; }
.pod-team li.ai { background: var(--volt); color: var(--deep); }
.pod-team p { font-size: 14px; line-height: 1.35; color: rgba(248, 249, 245, 0.82); }
.pod-team b { display: block; font-weight: 600; color: #F8F9F5; }


/* ---------------- how an engagement runs: a track that fills phase by phase ---------------- */
.phases-wrap { position: relative; margin-top: clamp(48px, 6vw, 80px); }
.ph-track { position: absolute; left: 24px; right: calc(25% - 12px + 24px); top: 23px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px); }
.ph-track i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: var(--teal); transition: width 0.9s cubic-bezier(0.65, 0, 0.35, 1); }
.phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ph { position: relative; display: flex; flex-direction: column; }
.ph-n { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--line-strong); font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ph.is-on .ph-n { background: var(--teal); border-color: var(--teal); color: #FFFFFF; transform: scale(1.06); }
.ph-card { flex: 1; margin-top: 20px; padding: 10px 10px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.ph.is-on .ph-card { border-color: color-mix(in srgb, var(--teal) 45%, transparent); box-shadow: 0 30px 60px -44px rgba(var(--shade), 0.5); }
.ph-card h3 { margin: 22px 14px 0; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.ph-card p { margin: 8px 14px 0; max-width: 30ch; font-size: 15.5px; line-height: 1.5; color: var(--soft); }

/* the little product UI in each phase; it plays when the phase lights up */
.ph-art { position: relative; height: 164px; padding: 16px; overflow: hidden; border-radius: 12px; background: color-mix(in srgb, var(--teal-wash) 55%, var(--surface)); font-size: 12.5px; color: var(--ink); }
.pa-t { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
/* scope: the brief, ticked off */
.ph-scope { display: flex; flex-direction: column; gap: 7px; }
.ph-scope .pa-t { margin-bottom: 2px; }
.pa-row { display: flex; align-items: center; gap: 10px; padding: 5px 10px; border-radius: 8px; background: var(--surface); font-weight: 500; box-shadow: 0 1px 2px rgba(var(--shade), 0.06); }
.pa-row i { position: relative; flex: none; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line-strong); transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease); }
.pa-row i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ph.is-on .pa-row i { background: var(--teal); border-color: var(--teal); }
.ph.is-on .pa-row i::after { transform: rotate(45deg) scale(1); }
.ph.is-on .pa-row:nth-of-type(2) i, .ph.is-on .pa-row:nth-of-type(2) i::after { transition-delay: 0.3s; }
.ph.is-on .pa-row:nth-of-type(3) i, .ph.is-on .pa-row:nth-of-type(3) i::after { transition-delay: 0.6s; }
.ph.is-on .pa-row:nth-of-type(4) i, .ph.is-on .pa-row:nth-of-type(4) i::after { transition-delay: 0.9s; }
/* pilot: the first version loads on real rows */
.ph-pilot { display: flex; flex-direction: column; gap: 10px; }
.pa-bar { display: flex; align-items: center; justify-content: space-between; }
.pa-bar b { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px; background: var(--surface); font-size: 11px; font-weight: 600; color: var(--teal-text); opacity: 0; transition: opacity 0.3s var(--ease) 1.1s; }
.pa-bar b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); animation: beat 1.6s ease-in-out infinite; }
.ph.is-on .pa-bar b { opacity: 1; }
.pa-load { height: 4px; border-radius: 99px; background: var(--sk); overflow: hidden; }
.pa-load i { display: block; width: 0; height: 100%; background: var(--teal); transition: width 1.1s cubic-bezier(0.65, 0, 0.35, 1); }
.ph.is-on .pa-load i { width: 100%; }
.pa-rows { display: grid; gap: 7px; }
.pa-rows i { position: relative; display: block; height: 14px; overflow: hidden; border-radius: 5px; background: var(--sk); }
.pa-rows i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 5px; background: color-mix(in srgb, var(--teal) 70%, var(--surface)); transform: scaleX(0); transform-origin: left; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.pa-rows i:nth-child(1) { --w: 82%; } .pa-rows i:nth-child(2) { --w: 64%; } .pa-rows i:nth-child(3) { --w: 74%; } .pa-rows i:nth-child(4) { --w: 48%; }
.ph.is-on .pa-rows i::after { transform: none; }
.ph.is-on .pa-rows i:nth-child(1)::after { transition-delay: 0.5s; } .ph.is-on .pa-rows i:nth-child(2)::after { transition-delay: 0.65s; }
.ph.is-on .pa-rows i:nth-child(3)::after { transition-delay: 0.8s; } .ph.is-on .pa-rows i:nth-child(4)::after { transition-delay: 0.95s; }
/* production: wired into your systems */
.ph-prod { padding: 14px 16px 30px; }
.ph-prod svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pa-sys rect { fill: var(--surface); stroke: var(--line-strong); }
.pa-app rect { fill: var(--surface); stroke: var(--line-strong); transition: fill 0.4s var(--ease) 1s, stroke 0.4s var(--ease) 1s; }
.ph-prod text { font-size: 11px; font-weight: 600; text-anchor: middle; fill: var(--ink); }
.pa-app text { transition: fill 0.4s var(--ease) 1s; }
.ph.is-on .pa-app rect { fill: var(--teal); stroke: var(--teal); }
.ph.is-on .pa-app text { fill: #FFFFFF; }
.pa-wire { fill: none; stroke: var(--teal); stroke-width: 2; stroke-dasharray: 130; stroke-dashoffset: 130; transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1); }
.pa-wire:nth-child(2) { transition-delay: 0.15s; } .pa-wire:nth-child(3) { transition-delay: 0.3s; }
.ph.is-on .pa-wire { stroke-dashoffset: 0; }
.ph.is-done .pa-wire { stroke-dasharray: 5 6; animation: flow 1.2s linear infinite; }   /* data flowing once it is wired */
@keyframes flow { to { stroke-dashoffset: -22; } }
.pa-ok { position: absolute; left: 16px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--teal-text); opacity: 0; transform: translateY(4px); transition: opacity 0.3s var(--ease) 1.2s, transform 0.3s var(--ease) 1.2s; }
.pa-ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.ph.is-on .pa-ok { opacity: 1; transform: none; }
/* support: adoption climbing */
.ph-support svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 96px; }
.pa-area { fill: color-mix(in srgb, var(--teal) 16%, transparent); opacity: 0; transition: opacity 0.6s var(--ease) 0.8s; }
.pa-line { fill: none; stroke: var(--teal); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 300; stroke-dashoffset: 300; transition: stroke-dashoffset 1.3s cubic-bezier(0.65, 0, 0.35, 1); }
.ph.is-on .pa-area { opacity: 1; }
.ph.is-on .pa-line { stroke-dashoffset: 0; }
.pa-up { position: absolute; right: 14px; top: 14px; padding: 2px 9px; border-radius: 99px; background: var(--surface); font-size: 11px; font-weight: 600; color: var(--teal-text); opacity: 0; transition: opacity 0.3s var(--ease) 1.2s; }
.ph.is-on .pa-up { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ph-track i, .ph *, .ph *::before, .ph *::after { transition: none !important; animation: none !important; } }

.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 6vw, 72px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid rgba(248, 249, 245, 0.14); }
.why h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: #F8F9F5; }
.why p { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: rgba(248, 249, 245, 0.78); }
.why svg { width: 22px; height: 22px; margin-bottom: 14px; fill: none; stroke: #4FC2BE; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------- results ---------------- */
/* case cards, no index numbers: who it was for and the work type, a rule, then one big outcome */
.work { padding: clamp(80px, 10vw, 144px) var(--edge); background: var(--ground); }
.work-eye { display: block; margin-bottom: 18px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-text); }
.res { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 4.5vw, 56px); }
.re { display: flex; flex-direction: column; grid-column: span 2; min-height: 260px; padding: clamp(26px, 2.4vw, 36px); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.re:nth-child(-n+2) { grid-column: span 3; }
/* read in this order: what kind of work, what we built (the heading), then the outcome */
.re-type { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.re h3 { margin: 16px 0 36px; max-width: 24ch; font-size: clamp(24px, 2vw, 32px); font-weight: 500; line-height: 1.12; letter-spacing: -0.028em; color: var(--ink); text-wrap: balance; }
.re-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.45; color: var(--soft); }
.re-stat b { font-size: clamp(22px, 1.7vw, 28px); font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; color: var(--teal-text); font-variant-numeric: tabular-nums; }
/* the sports CRM: the one dark card, heading larger */
.re.hero-re { background: var(--deep); border-color: var(--deep); }
@media (prefers-color-scheme: dark) { .re.hero-re { background: var(--surface); border-color: var(--line-strong); } }
.re.hero-re .re-type { color: rgba(248, 249, 245, 0.66); }
.re.hero-re h3 { font-size: clamp(32px, 3vw, 48px); color: #F8F9F5; }
.re.hero-re .re-stat { border-color: rgba(248, 249, 245, 0.16); color: rgba(248, 249, 245, 0.84); }
.re.hero-re .re-stat b { font-size: clamp(26px, 2.2vw, 36px); color: var(--volt); }

/* ---------------- close and footer ---------------- */
.close-room { background: var(--sunken); }
.close-room .ul, .mail { text-decoration-color: var(--teal); }
.mail:hover { color: var(--teal-text); }

/* contact: the ask on the left, the brief form on the right */
.close-room.ask { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 112px); align-items: start; text-align: left; padding-top: clamp(96px, 10vw, 160px); padding-bottom: clamp(96px, 10vw, 160px); }
.ask-l { position: sticky; top: var(--stick); }
.ask h2 { margin: 0; max-width: 12ch; font-size: clamp(40px, 4.6vw, 72px); }
.ask-note { max-width: 36ch; margin-top: 24px !important; font-size: 18px; line-height: 1.5; color: var(--soft) !important; }
.ask .mail { margin-top: 28px; }
.ask-form { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; padding: clamp(26px, 3vw, 44px); background: var(--raised); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 40px 80px -56px rgba(var(--shade), 0.4); }
.ask-needs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.ask-needs legend, .ask-f > span { display: block; margin-bottom: 12px; padding: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ask-f > span { margin-bottom: 4px; }
.ask-needs label { position: relative; cursor: pointer; }
.ask-needs input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ask-needs span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 99px; font-size: 14.5px; font-weight: 500; color: var(--ink); transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease); }
.ask-needs label:hover span { border-color: var(--teal); }
.ask-needs input:checked + span { background: var(--teal); border-color: var(--teal); color: #FFFFFF; }
.ask-needs input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.ask-f { display: flex; flex-direction: column; min-width: 0; }
.ask-f.wide { grid-column: 1 / -1; }
.ask-f input, .ask-f select, .ask-f textarea { width: 100%; padding: 10px 0 12px; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: none; color: var(--ink); font: 400 17px/1.4 inherit; font-family: inherit; transition: border-color 0.15s var(--ease); }
.ask-f select { appearance: none; -webkit-appearance: none; padding-right: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23707A78' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 4px center / 12px 8px; cursor: pointer; }
.ask-f textarea { resize: vertical; min-height: 84px; }
.ask-f textarea::placeholder { color: var(--muted); opacity: 0.8; }
.ask-f input:hover, .ask-f select:hover, .ask-f textarea:hover { border-bottom-color: var(--teal); }
.ask-f input:focus-visible, .ask-f select:focus-visible, .ask-f textarea:focus-visible { outline: none; border-bottom: 2px solid var(--teal); padding-bottom: 11px; }
.ask-go { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.ask-go .btn:hover .arr { transform: translateX(4px); }
.ask-hint { margin: 0 !important; font-size: 14px; color: var(--muted); }
@media (max-width: 900px) {
  .close-room.ask { grid-template-columns: minmax(0, 1fr); }
  .ask-l { position: static; }
}
@media (max-width: 560px) {
  .ask-form { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
  .ask-go .btn { flex: 1 1 100%; justify-content: center; }
}
.footer { background: var(--deep); color: rgba(248, 249, 245, 0.72); border-top: 0; }
.footer .brand { color: #F8F9F5; }
.footer .logo small { color: rgba(248, 249, 245, 0.62); }
.footer nav a:hover { color: #F8F9F5; }
@media (prefers-color-scheme: dark) { .footer { background: var(--sunken); border-top: 1px solid var(--line); } }

/* ---------------- responsive ---------------- */
@media (max-width: 1280px) and (min-width: 901px) {
  .nav-links .wide { display: none; }       /* the two in-page links go first; Bergence Group and Epitom stay */
}
@media (max-width: 1100px) {
  .chip { padding: 8px 12px 8px 8px; gap: 10px; grid-template-columns: 28px minmax(0, 1fr) auto; }
  .ch-ic { width: 28px; height: 28px; }
  .chip b { font-size: 12.5px; }
  .chip small { font-size: 11px; }
  .card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 28px; }
  .nav-links a { padding: 0 9px; }
  .pl-grid { grid-template-columns: minmax(0, 1fr); }
  .pl { min-height: 0; }
  .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .ph-track { display: none; }
  .res { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .re, .re:nth-child(-n+2) { grid-column: span 1; }
  .re.hero-re { grid-column: span 2; }
}
@media (max-width: 900px) {
  .hx-teal { grid-template-columns: minmax(0, 1fr); gap: 36px; min-height: 0; padding-top: calc(var(--nav-top) + var(--nav-h) + 28px); padding-bottom: calc(52px + 36px); }
  .hx-teal::before { -webkit-mask-image: linear-gradient(transparent, #000 40%, transparent); mask-image: linear-gradient(transparent, #000 40%, transparent); }
  .fa { top: -22px; right: -4px; }
  .fb { bottom: -24px; left: -4px; }
  .chip { translate: none; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 10px; }
  .ch-ic { width: 24px; height: 24px; border-radius: 7px; }
  .ch-ic svg { width: 14px; height: 14px; }
  .chip b { font-size: 11.5px; }
  .chip small { font-size: 10px; }
  .ch-dot { width: 6px; height: 6px; }
  .lg-h { display: none; }
  .hx-logos { padding-left: 0; }
  .card { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 20px; }
  .c-svc { flex: none; }
  .c-svc li { flex: none; }
  .c-fig { order: -1; }
  .ribbon { padding-left: 4px; overflow-x: auto; scrollbar-width: none; }
  .ribbon::-webkit-scrollbar { display: none; }
  .ribbon > a[data-i] { padding: 0 12px; margin: 8px 0; }
  .ribbon svg, .ribbon .grow, .rb-cta { display: none; }
  .pod-head { grid-template-columns: minmax(0, 1fr); }
  .pod-team { justify-self: start; }
  .why { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 900px), (max-height: 620px) {
  .stack-room { height: auto; padding: clamp(40px, 6vw, 72px) var(--edge); }
  .stage { position: static; height: auto; padding: 0; overflow: visible; }
  .stack { display: grid; gap: 20px; }
  .card { position: relative; inset: auto; transform: none; }
  .card::after { display: none; }
  .c-fig { aspect-ratio: 560 / 440; }
}
@media (min-width: 901px) and (min-height: 621px) {
  html:not(.unpin) .card { container-type: size; }
}
@container (max-height: 660px) {
  .c-svc span { display: none; }
  .c-svc li { min-height: 0; max-height: none; padding-top: 6px; padding-bottom: 6px; }
  .c-num { margin-bottom: 10px; }
  .c-go { margin-top: 14px; }
}
@container (max-height: 500px) {
  .c-lede { display: none; }
  .c-copy h3 { font-size: 28px; }
}
html.unpin .stack-room { height: auto; padding: clamp(40px, 6vw, 72px) var(--edge); }
html.unpin .stage { position: static; height: auto; padding: 0; overflow: visible; }
html.unpin .stack { display: grid; gap: 20px; }
html.unpin .card { position: relative; inset: auto; transform: none; }
html.unpin .card::after { display: none; }
html.unpin .c-fig { aspect-ratio: 560 / 440; }
html.unpin .c-svc, html.unpin .c-svc li { flex: none; }

.stack-tabs { display: none; }

/* ---------------- phones ---------------- */
@media (max-width: 760px) {
  .hx-teal { gap: 0; padding-top: calc(var(--nav-top) + var(--nav-h) + 24px); padding-bottom: calc(52px + 28px); }
  .hx-teal > .hx-copy, .hx-teal > .hx-stage { display: contents; }
  .hx-teal .hx-title { order: 1; font-size: clamp(34px, 9.6vw, 46px); }
  .hx-sub { order: 2; margin-top: 16px; font-size: 19px; }
  .hx-teal .hx-lede { order: 3; margin-top: 12px; font-size: 16px; }
  .hx-teal > .hx-stage > .hs { order: 4; margin-top: 44px; }
  .hx-teal .hx-switch { order: 5; }
  .hx-actions { order: 6; margin-top: 36px; }
  .hx-actions .btn { flex: 1 1 100%; justify-content: center; }
  .sw-h { display: none; }

  .hx-teal .hx-switch, .stack-tabs { display: flex; flex-wrap: nowrap; gap: 8px; width: auto; max-width: none; margin: 40px calc(-1 * var(--edge)) 0; padding: 2px var(--edge); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; font-size: 15px; }
  .hx-teal .hx-switch::-webkit-scrollbar, .stack-tabs::-webkit-scrollbar { display: none; }
  .hx-teal .hx-switch .sw { flex: none; gap: 0; }
  .hx-teal .hx-switch i { display: none; }
  .hx-teal .hx-switch button, .stack-tabs button { flex: none; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 99px; background: var(--raised); color: var(--muted); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); }
  .hx-teal .hx-switch button[aria-current="true"], .stack-tabs button[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }

  .fa { top: -26px; right: -6px; }
  .fb { bottom: -26px; left: -6px; }

  .stack-room { padding: 56px 0 64px; }
  .stack-head { padding: 0 var(--edge) 4px; }
  .stack-head h2 { font-size: 28px; }
  .stack-tabs { position: sticky; z-index: 5; top: calc(var(--nav-top) + var(--nav-h) + 8px); margin: 12px 0 0; padding: 8px var(--edge); background: linear-gradient(var(--ground) 70%, transparent); }
  .stack { display: flex; align-items: stretch; gap: 12px; margin-top: 8px; padding: 4px var(--edge) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--edge); scrollbar-width: none; overscroll-behavior-x: contain; }
  .stack::-webkit-scrollbar { display: none; }
  .card { flex: 0 0 calc(100% - 2 * var(--edge) - 20px); display: flex; flex-direction: column; gap: 0; padding: 0 0 22px; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; box-shadow: 0 18px 36px -26px rgba(var(--shade), 0.35); }
  .c-fig { order: -1; border-radius: 0; aspect-ratio: 560 / 440; }
  .c-fig svg { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
  .c-copy { flex: 1; padding: 20px 20px 0; }
  .c-num { margin-bottom: 10px; flex-wrap: wrap; }
  .c-copy h3 { font-size: 26px; }
  .c-lede { margin-top: 10px; font-size: 15.5px; }
  .c-svc { margin: 18px 0 20px; }
  .c-svc li { min-height: 0; padding: 11px 0 11px 40px; }
  .c-svc li::before { width: 26px; height: 26px; font-size: 11px; }
  .c-svc b { font-size: 15px; }
  .c-svc span { display: none; }
  .c-go { margin-top: auto; align-self: stretch; justify-content: center; }
  .ribbon { display: none; }
  html.rib .nav { transform: none; }

  .pl { padding: 24px; }
  .pl h3 { margin-top: 20px; }
  .phases { grid-template-columns: minmax(0, 1fr); }
  .pod-team { flex-direction: column; align-items: flex-start; }
  .res { grid-template-columns: minmax(0, 1fr); }
  .re, .re:nth-child(-n+2), .re.hero-re { grid-column: auto; min-height: 0; }
  .re h3 { margin-bottom: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav, .ribbon, .card, .pl { transition: none; }
  .mq-row, .chip, .hs-live::before { animation: none; }
  .chip { transition: none; }
  .hs .scr.is-on .route, .hs .scr.is-on .live, .hs .scr.is-on .ring, .hs .scr.is-on .wave rect, .hs .scr.is-on .rip { animation: none; }
  .hs .scr.is-on .badge { animation: none; }
  .hs .cur { display: none; }
  .marquee { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
  .marquee .mq-row + .mq-row { display: none; }
  .mq-row { flex-wrap: wrap; gap: 12px 40px; }
  html.js .pop, html.js .flow, html.js .spoke { opacity: 1; transform: none; transition: none; }
  html.js .on .flow, html.js .on .spoke, html.js .on .orbit, html.js .on .live, html.js .on .wave rect { animation: none; }
  html.js .prog, html.js .clock { stroke-dashoffset: 0; transition: none; }
  html.js .bar { transform: none; transition: none; }
}

/* the smallest phones: the nav button drops its arrow so it fits beside Menu */
@media (max-width: 400px) {
  .nav .cta { padding: 0 14px; }
  .nav .cta svg { display: none; }
}