/* Vision Bridge v5: Elexoft-style structure, VBT brand.
   Dark theme only (the reference is dark; brand logo is the light variant).
   Ground: neutral charcoal like Elexoft (no colour mixed into surfaces).
   Brand colours are accents only: teal for actions (buttons, icons, links, focus),
   gold for labels, figures and the soft warm glows behind sections.
   Radius system: pills for all interactive buttons, 20px cards, 14px small cards. */

:root {
  --bg: #0f0f10;
  --bg-2: #141415;
  --bg-3: #1a1a1b;
  --card: #171718;
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);
  --ink: #f5f5f4;
  --ink-2: #bdbdbb;
  --ink-3: #8f8f8d;
  /* Brand palette = the logo (vision-bridge-logo.svg): teal gradient #075E63 to #149A9D,
     gold gradient #D9A316 / #C99A24 / #A87508. The -l tints are the same hues lifted for
     small text on the charcoal ground (AA). */
  --teal: #149a9d;
  --teal-d: #075e63;
  --teal-l: #3cc3c5;        /* logo teal hue, lifted for text on dark: 8.4:1 */
  --gold: #d9a316;
  --gold-2: #c99a24;
  --gold-d: #a87508;
  --gold-l: #e9bb45;        /* logo gold hue, lifted for text on dark: 10:1 */
  --grad-teal: linear-gradient(135deg, #075e63 0%, #149a9d 100%);
  --grad-gold: linear-gradient(90deg, #d9a316 0%, #c99a24 55%, #a87508 100%);
  --grad-brand: linear-gradient(90deg, #149a9d 0%, #d9a316 100%);
  --r: 20px;
  --r-s: 14px;
  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* type scale (Elexoft rhythm, round 2). Single source of truth: use these tokens, not raw sizes. */
  --fs-h1-home: clamp(30px, 3.1vw, 44px);   /* home hero h1 */
  --fs-h1: clamp(32px, 3.3vw, 47px);        /* inner page hero h1 */
  --fs-h2: clamp(24px, 2.2vw, 32px);        /* section titles (.h2) */
  --fs-h3: clamp(18px, 1.45vw, 20px);       /* mid headings (.h3, prose h3) */
  --fs-h4: 18px;                            /* card / step / item titles */
  --fs-display: clamp(24px, 2.2vw, 32px);   /* big card titles (services rise, work cards) */
  --fs-lead: clamp(15px, 1.2vw, 17px);      /* hero sub, lead paragraph */
  --fs-body: 15px;
  --fs-sm: 14px;                            /* lists, meta, small print */
  --fs-xs: 13px;
  --sec-y: clamp(56px, 7vw, 96px);          /* .sec vertical padding */
  --sec-y-tight: clamp(40px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--teal-l); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; }
.skip:focus { left: 12px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.center { text-align: center; }
.narrow { max-width: 640px; margin-left: auto; margin-right: auto; }
.mt-l { margin-top: 40px; }
.mt-s { margin-top: 22px; }
.sec { position: relative; padding: var(--sec-y) 0; }

/* ---------- type ---------- */
.eyebrow {
  display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-l); padding-bottom: 10px; margin-bottom: 16px; position: relative;
}
.eyebrow::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--grad-gold); border-radius: 2px; }
.eyebrow--center { display: block; text-align: center; }
.eyebrow--center::after { left: 50%; transform: translateX(-50%); }
.h2 { font-size: var(--fs-h2); line-height: 1.2; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
.h2.center { max-width: 820px; margin: 0 auto; }
.h4 { font-size: 16px; font-weight: 600; margin: 24px 0 10px; }
.lead { font-size: var(--fs-lead); color: var(--ink); margin-top: 20px; line-height: 1.6; }
.body { color: var(--ink-2); margin-top: 18px; max-width: 62ch; }
.body.center { margin-left: auto; margin-right: auto; }
.quiet { color: #3b4648; }
.ph-note { color: var(--ink-3); font-size: var(--fs-sm); margin-top: 14px; }
.tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  padding: 5px 12px; border-radius: 999px; background: rgba(11,13,14,.08); color: #1c2729; border: 1px solid rgba(11,13,14,.14);
}
.tag--ph { background: rgba(217,163,22,.12); color: var(--gold-l); border: 1px dashed rgba(217,163,22,.55); }
.tag--ph-dark { background: rgba(120,82,0,.1); color: #5d4100; border: 1px dashed rgba(120,82,0,.55); }

/* ---------- buttons ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap;
  min-height: 48px; padding: 0 24px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px;
  border: 1px solid transparent; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.pill i { font-size: 17px; transition: transform .3s var(--ease); }
.pill:hover i { transform: translateX(3px); }
.pill:active { transform: translateY(1px); }
.pill--sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.pill--lg { min-height: 56px; padding: 0 32px; font-size: 16px; }
/* teal fill + near-black text: 5.7:1 */
.pill--fill { background: linear-gradient(135deg, #149a9d 0%, #1aa7aa 100%); color: #061011; box-shadow: inset 0 -2px 0 rgba(7,94,99,.55); }
.pill--fill:hover { background: var(--teal-l); }
.pill--light { background: #fff; color: #0b0d0e; }
.pill--light:hover { background: var(--teal-l); }
.pill--ghost { border-color: var(--line-2); color: var(--ink); background: rgba(255,255,255,.04); }
.pill--ghost:hover { border-color: var(--teal-l); background: rgba(255,255,255,.06); }

/* ---------- utility bar ---------- */
.util { background: #0a0a0a; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.util__inner { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: 16px; }
.util__list { display: flex; gap: 28px; }
.util__list li { display: flex; align-items: center; gap: 8px; }
.util__list i { color: var(--teal-l); font-size: 15px; }
.util__cta { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 600; color: #061011; background: var(--grad-gold); padding: 0 16px; align-self: stretch; }
.util__cta:hover { background: var(--gold-l); }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 40; background: rgba(11,13,14,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.hdr__inner { display: flex; align-items: center; gap: 24px; height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand img { width: 54px; height: auto; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.05; }
.brand__txt b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.brand__txt small { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-top: 3px; }
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__item { position: relative; }
.nav__btn, .nav__link {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; text-decoration: none;
  font-size: 15px; font-weight: 500; color: var(--ink-2); padding: 10px 12px; border-radius: 999px; transition: color .2s, background-color .2s;
}
.nav__btn i { font-size: 13px; transition: transform .3s var(--ease); }
.nav__btn:hover, .nav__link:hover, .nav__btn[aria-expanded="true"] { color: var(--ink); background: rgba(255,255,255,.05); }
.nav__btn[aria-expanded="true"] i { transform: rotate(180deg); }
.dd {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: 380px; padding: 10px; border-radius: var(--r); background: #121617; border: 1px solid var(--line-2);
  box-shadow: 0 24px 60px rgba(0,0,0,.5); display: grid; gap: 2px;
}
.dd[hidden], .mnav[hidden] { display: none; }
.dd::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge */
.dd:not([hidden]) { animation: ddIn .28s var(--ease); }
@keyframes ddIn { from { opacity: 0; transform: translate(-50%, 6px); } }
.dd--compact { width: 240px; }
.dd a { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-s); text-decoration: none; transition: background-color .2s; }
.dd a:hover, .dd a:focus-visible { background: rgba(255,255,255,.05); }
.dd a > i { font-size: 22px; color: var(--teal-l); margin-top: 1px; flex: none; }
.dd b { display: block; font-size: 15px; font-weight: 600; }
.dd small { display: block; font-size: 13px; color: var(--ink-3); line-height: 1.45; margin-top: 3px; }
.hdr__cta { flex: none; }
.burger { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.burger span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mnav { border-top: 1px solid var(--line); max-height: calc(100dvh - 76px); overflow-y: auto; padding: 8px 0 28px; background: var(--bg); }
.macc > button, .mnav__link {
  display: flex; width: 100%; justify-content: space-between; align-items: center; min-height: 56px;
  background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; text-decoration: none;
  font-size: 17px; font-weight: 600; padding: 0 4px; text-align: left;
}
.macc > button i { transition: transform .3s var(--ease); color: var(--teal-l); }
.macc > button[aria-expanded="true"] i { transform: rotate(45deg); }
.macc ul { padding: 6px 0 12px 4px; border-bottom: 1px solid var(--line); }
.macc ul a { display: block; padding: 10px 0; color: var(--ink-2); text-decoration: none; }
.mnav__cta { width: 100%; margin-top: 24px; }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100dvh - 116px); display: flex; align-items: center; padding: 72px 0 64px; }
.hero__media {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
  background:
    radial-gradient(55% 45% at 50% 18%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(45% 40% at 82% 70%, rgba(217,163,22,.10), transparent 70%),
    radial-gradient(40% 40% at 12% 85%, rgba(20,154,157,.08), transparent 70%),
    linear-gradient(180deg, #1c1c1d, #121213 60%, #0f0f10);
}
.hero__drift {
  position: absolute; inset: -20%;
  background:
    radial-gradient(30% 25% at 30% 40%, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(25% 20% at 70% 70%, rgba(217,163,22,.07), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 120px);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(6%, -4%, 0) scale(1.08); } }
.hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,15,16,.30), rgba(15,15,16,.55) 60%, var(--bg)); }
.hero__inner { text-align: center; width: 100%; }
.hero__pill {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 14px; color: var(--ink);
  padding: 6px 16px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--line-2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin-bottom: 28px; transition: border-color .3s;
}
.hero__pill:hover { border-color: var(--teal-l); }
.hero__pill-tag { background: var(--grad-gold); color: #1a1300; font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 999px; }
.hero__title { font-size: var(--fs-h1-home); line-height: 1.1; letter-spacing: -.035em; font-weight: 800; max-width: 22ch; margin: 0 auto; text-wrap: balance; }
.hero__sub { font-size: var(--fs-lead); color: var(--ink-2); max-width: 620px; margin: 20px auto 0; }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }
.hero__ctas .pill { min-width: 220px; }
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); max-width: 820px; margin: 48px auto 0;
  border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-2);
  background: rgba(255,255,255,.05); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.stats > div { padding: 22px 12px; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; }
.stats dd small { font-size: 15px; font-weight: 600; color: var(--ink-2); margin-left: 4px; letter-spacing: 0; }
.stats > div + div { border-left: 1px solid var(--line-2); }
.stats dd { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.stats dt { font-size: 12.5px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- logos ---------- */
.logos { padding-bottom: 72px; }
.marquee { margin-top: 40px; display: grid; gap: 18px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 18px; width: max-content; animation: marq 48s linear infinite; }
.marquee__row--rev .marquee__track { animation-direction: reverse; }
@keyframes marq { to { transform: translateX(calc(-50% - 9px)); } }
.logo-tile {
  width: 176px; height: 92px; flex: none; border-radius: var(--r-s); display: grid; place-items: center;
  border: 1px dashed var(--line-2); background: var(--card); color: var(--ink-3); font-size: 13px; font-weight: 600; letter-spacing: .04em;
}

/* ---------- glows ---------- */
.glow { position: absolute; z-index: -1; width: 700px; height: 700px; border-radius: 50%; filter: blur(40px); pointer-events: none; }
.glow--l { left: -260px; top: 10%; background: radial-gradient(circle, rgba(217,163,22,.09), transparent 65%); }
.glow--r { right: -240px; top: 0; background: radial-gradient(circle, rgba(20,154,157,.07), transparent 65%); }
.about, .trust { isolation: isolate; overflow: hidden; }

/* ---------- image slots (flat stand-ins) ---------- */
.slot { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-2);
  background: linear-gradient(145deg, #262627, #19191a 55%, #131314); }
.slot::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 30% 20%, rgba(255,255,255,.06), transparent 70%); }
.slot__lbl { position: absolute; left: 14px; bottom: 12px; z-index: 1; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- about ---------- */
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.collage { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.slot--a { aspect-ratio: 4 / 3; }
.slot--b { aspect-ratio: 3 / 4; grid-row: span 2; margin-top: 40px; }
.slot--c { aspect-ratio: 4 / 3; }
.checks { display: grid; gap: 12px; margin-bottom: 32px; }
.checks li { display: flex; gap: 12px; color: var(--ink-2); font-size: var(--fs-sm); }
.checks i { color: var(--teal-l); font-size: 19px; flex: none; margin-top: 1px; }
.checks b { color: var(--ink); font-weight: 600; }
.checks--tight { gap: 10px; }

/* ---------- services (Elexoft-style pinned rise) ----------
   Desktop: the section is 180vh tall and its stage sticks under the header. The four
   full-bleed columns start staggered down the screen at 25% opacity and scrub up into
   one aligned row as you scroll (main.js). Without JS, on tablet/phone or with reduced
   motion it is a plain aligned grid. */
.services { position: relative; padding: 88px 0 72px; }
.services__stage { position: relative; }
.svc { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 40px; }
/* borders live on each card (as on Elexoft) so they travel with it while it rises */
.svc__card {
  display: flex; flex-direction: column; padding: 72px 32px 64px;
  border: solid var(--line-2); border-width: 2px .5px; background: var(--bg);
  transition: background-color .4s var(--ease); will-change: transform, opacity;
}
.svc__card:first-child { border-left-width: 0; }
.svc__card:last-child { border-right-width: 0; }
.svc__card:hover { background-color: #101416; }
.svc__ico { position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; color: var(--ink); font-size: 40px; }
.svc__dot { position: absolute; top: -4px; right: -6px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-l); }
.svc__t {
  margin-top: 20px; min-height: 3.2em; font-size: var(--fs-display); line-height: 1.08;
  letter-spacing: -.045em; font-weight: 700; color: var(--ink);
}
.svc__card p { margin-top: 14px; color: rgba(255,255,255,.72); font-size: var(--fs-sm); line-height: 1.65; flex: 1; }
.svc__card .pill { align-self: flex-start; margin-top: 32px; }
.services__more { margin-top: 44px; }
@media (min-width: 1101px) {
  .js-motion .services { height: 180vh; padding: 0; }
  .js-motion .services__stage {
    position: sticky; top: 76px; min-height: calc(100dvh - 76px);
    display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 24px 0;
  }
  .js-motion .svc__card { padding: 44px 32px 40px; }
  .js-motion .services__more { margin-top: 28px; }
}

/* ---------- why (expanding) ---------- */
.why__row { display: flex; gap: 16px; margin-top: 44px; min-height: 240px; }
.why__card {
  flex: 1; min-width: 0; padding: 30px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--card);
  transition: flex-grow .6s var(--ease), border-color .4s, background-color .4s; cursor: default; outline-offset: 4px;
}
.why__card.is-open { flex-grow: 2.6; border-color: rgba(217,163,22,.45); background: linear-gradient(135deg, rgba(217,163,22,.10), var(--card) 60%); }
.why__ico { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #061011; font-size: 24px; margin-bottom: 26px; }
.why__card h3 { font-size: var(--fs-h4); font-weight: 700; margin-bottom: 10px; }
.why__card p { color: var(--ink-2); font-size: var(--fs-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 52ch; }
.why__card.is-open p { -webkit-line-clamp: unset; }

/* ---------- trust + globe ---------- */
.trust__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.trust__list { display: grid; gap: 18px; margin-top: 30px; }
.trust__list li { display: flex; gap: 16px; }
.trust__list i { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 22px; color: var(--teal-l); background: rgba(255,255,255,.05); border: 1px solid var(--line-2); }
.trust__list b { display: block; font-weight: 600; }
.trust__list span { color: var(--ink-2); font-size: var(--fs-sm); }
.globe { position: relative; aspect-ratio: 1; max-width: 560px; width: 100%; margin: 0 auto; }
.globe__cv { width: 100%; height: 100%; }
.globe__chip {
  position: absolute; left: var(--x); top: var(--y); padding: 10px 16px; border-radius: 12px; font-size: 13px; font-weight: 600;
  background: rgba(28,28,29,.85); border: 1px solid var(--line-2); box-shadow: 0 10px 30px rgba(0,0,0,.4);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: bob 6s ease-in-out infinite;
}
.globe__chip:nth-of-type(2) { animation-delay: -1.5s; } .globe__chip:nth-of-type(3) { animation-delay: -3s; } .globe__chip:nth-of-type(4) { animation-delay: -4.5s; }
.globe__chip::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-right: 8px; vertical-align: middle; }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* ---------- big numbers ---------- */
.nums { background: #0a0a0a; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 48px 0; }
.nums__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.num { display: flex; flex-direction: column; gap: 14px; }
.num__v { font-size: clamp(44px, 4.4vw, 64px); font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.num__k { color: var(--gold-l); font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .04em; }
.num__d { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 6px; }
.num--ph .num__v { color: #3a4344; }
.num--ph .tag { margin-top: 10px; }

/* ---------- AI ---------- */
.ai__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.slot--ai { aspect-ratio: 1 / 1.1; }
.ai__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.mini { padding: 22px 20px; border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--card); transition: border-color .3s, transform .4s var(--ease); }
.mini:hover { border-color: rgba(60,195,197,.6); transform: translateY(-4px); }
.mini > i { font-size: 26px; color: var(--teal-l); }
.mini h3 { font-size: 16px; font-weight: 700; margin: 14px 0 10px; }
.mini li { font-size: 13.5px; color: var(--ink-2); padding-left: 18px; position: relative; margin-top: 5px; }
.mini li::before { content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 5px; border-left: 2px solid var(--teal-l); border-bottom: 2px solid var(--teal-l); transform: rotate(-45deg); }

/* ---------- portfolio sticky stack ---------- */
.work { isolation: isolate; overflow: clip; }
.work__bg { position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 40% at 20% 10%, rgba(217,163,22,.08), transparent 70%), radial-gradient(40% 40% at 90% 60%, rgba(255,255,255,.04), transparent 70%), linear-gradient(180deg, #161617, #0f0f10); }
.work__head { margin-bottom: 40px; }
.stack { display: grid; gap: 28px; }
.scard {
  position: sticky; top: calc(110px + var(--i, 0) * 22px);
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center;
  padding: clamp(28px, 4vw, 48px); border-radius: 28px; color: #0e1718; min-height: 480px;
  box-shadow: 0 -20px 60px rgba(0,0,0,.35); transform-origin: 50% 0;
}
.scard:nth-child(1) { --i: 0; } .scard:nth-child(2) { --i: 1; } .scard:nth-child(3) { --i: 2; } .scard:nth-child(4) { --i: 3; }
/* pastel set in the Elexoft spirit, kept to the brand: gold-yellow, pale teal, stone, cool grey */
.scard--mint { background: #f4e6b8; }
.scard--sand { background: #cfe6e6; }
.scard--teal { background: #ebe3d5; }
.scard--grey { background: #dfe3ea; }
.scard h3 { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.12; letter-spacing: -.03em; font-weight: 800; margin: 16px 0 14px; }
.scard p { color: #2a3537; font-size: var(--fs-body); }
.scard h4 { font-size: 15px; font-weight: 700; margin: 22px 0 8px; }
.dots li { position: relative; padding-left: 18px; color: #2a3537; margin-top: 4px; font-size: var(--fs-sm); }
.dots li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-d); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgba(7,94,99,.1); color: #0b4a4e; }
.scard__media figcaption { font-size: 13px; color: #3b4648; margin-top: 10px; }
.browser { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px rgba(7,40,42,.25); border: 1px solid rgba(0,0,0,.08); }
.browser__bar { display: flex; gap: 6px; padding: 10px 12px; background: #eef1f2; border-bottom: 1px solid rgba(0,0,0,.06); }
.browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #c9d0d2; }
.browser--ph { background: #e8d6a8; }
.browser__ph { aspect-ratio: 16 / 9; display: grid; place-items: center; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6b5519;
  background: repeating-linear-gradient(135deg, rgba(120,82,0,.06) 0 12px, transparent 12px 24px); }
.flow { display: grid; gap: 10px; counter-reset: f; }
.flow li { counter-increment: f; position: relative; display: grid; gap: 2px; padding: 14px 18px 14px 58px; border-radius: 14px; background: rgba(255,255,255,.7); border: 1px solid rgba(7,94,99,.15); }
.flow li::before { content: counter(f); position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--teal-d); color: #fff; }
.flow li b { font-size: 15px; }
.flow li span { font-size: 13.5px; color: #3b4648; }
.flow__split { background: #0e1718 !important; color: #fff; }
.flow__split span { color: #bcd9da !important; }
.flow__split::before { background: var(--gold) !important; color: #1a1300 !important; }
.flow--layers li { padding-left: 18px; }
.flow--layers li::before { display: none; }
.flow--layers li:nth-child(odd) { margin-right: 32px; } .flow--layers li:nth-child(even) { margin-left: 32px; }

/* ---------- testimonials ---------- */
.testi__card { margin: 40px auto 0; max-width: 980px; display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: center; padding: 28px; border-radius: 28px; background: linear-gradient(135deg, #1b1b1c, #131314); border: 1px solid var(--line-2); }
.testi__video { aspect-ratio: 9 / 14; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(160deg, #242425, #141415); border: 1px dashed var(--line-2); }
.testi__video i { font-size: 56px; color: rgba(255,255,255,.35); }
.testi__q { display: block; font-size: 40px; color: var(--gold); margin: 18px 0 6px; }
.testi__text { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; font-style: italic; color: var(--ink); max-width: 44ch; }
.testi__who { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px dashed var(--line-2); }
.testi__who small { display: block; color: var(--ink-3); font-size: 13px; }
.testi__who b { color: var(--ink-3); }
.avatar-ph { width: 44px; height: 44px; border-radius: 50%; border: 1px dashed var(--line-2); background: #1a2021; }

/* ---------- tech ---------- */
.tech__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.tgroup { padding: 26px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--card); }
.tgroup h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; margin-bottom: 16px; }
.tgroup h3 i { font-size: 22px; color: var(--teal-l); }
.tgroup p { display: flex; flex-wrap: wrap; gap: 8px; }
.tgroup span { font-size: 13.5px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--ink-2); }
.tgroup--hl { background: linear-gradient(135deg, rgba(217,163,22,.12), var(--card) 70%); border-color: rgba(217,163,22,.40); }
.tgroup--hl span { border-color: rgba(60,195,197,.3); color: var(--ink); }

/* ---------- process (curved line) ---------- */
.proc__head { max-width: 640px; }
.proc__head .pill { margin-top: 28px; }
.path { position: relative; margin-top: 52px; --top: 250px; --drop: 170px; }
.path__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.path__track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 3; }
.path__line { fill: none; stroke: url(#pg); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(217,163,22,.3)); }
/* odd steps: text ABOVE the badge; even steps: badge then text BELOW. The curve runs
   between the two badge rows, so it never crosses copy. */
.steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; align-items: start; }
.step { position: relative; display: flex; flex-direction: column; }
.step:nth-child(odd) { height: var(--top); justify-content: flex-end; }
.step:nth-child(odd) .step__n { order: 3; margin-top: 18px; }
.step:nth-child(even) { margin-top: calc(var(--top) + var(--drop) - 40px); }
.step:nth-child(even) .step__n { margin-bottom: 18px; }
.step__n {
  width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; position: relative; z-index: 1;
  font-weight: 800; background: #1a2122; color: var(--ink-3); border: 1px solid var(--line-2); transition: background-color .4s, color .4s, box-shadow .4s;
}
.step.is-lit .step__n { background: #fff; color: var(--teal-d); box-shadow: 0 0 0 6px rgba(255,255,255,.12), 0 0 24px rgba(217,163,22,.35); }
.step h3 { font-size: var(--fs-h4); font-weight: 700; }
.step p { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 8px; }
.sprint { margin-top: 48px; display: flex; align-items: center; gap: 24px; padding: 26px 30px; border-radius: var(--r); border: 1px solid rgba(217,163,22,.4); background: linear-gradient(90deg, rgba(217,163,22,.1), rgba(255,255,255,.02)); }
.sprint__ico { width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #1a1300; font-size: 24px; }
.sprint__txt { flex: 1; }
.sprint h3 { font-size: var(--fs-h4); font-weight: 700; }
.sprint p { color: var(--ink-2); font-size: var(--fs-body); margin-top: 4px; }

/* ---------- build (HRive) ---------- */
.build__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.build__shot { position: relative; padding: 36px 36px 64px; border-radius: 28px; background: linear-gradient(145deg, #e7e6e2, #bcbbb6); }
.build__float { position: absolute; right: -14px; bottom: 24px; width: 46%; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.35); border: 4px solid #fff; }
.build__shot figcaption { position: absolute; left: 36px; bottom: 22px; max-width: 48%; font-size: 13px; color: #1c2a2b; font-weight: 500; }

/* ---------- industries ---------- */
.ind__grid { display: grid; grid-template-columns: .8fr 1.1fr 1fr; gap: 48px; margin-top: 40px; align-items: center; }
.ind__media { position: relative; aspect-ratio: 4 / 5; }
.slot--ind { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.slot--ind.is-on { opacity: 1; }
.slot--ind[data-ind-img="1"] { background: linear-gradient(145deg, #2a2619, #151412); }
.slot--ind[data-ind-img="2"] { background: linear-gradient(145deg, #232426, #141415); }
.slot--ind[data-ind-img="3"] { background: linear-gradient(145deg, #262524, #151414); }
.ind__list { display: grid; }
.ind__list button {
  text-align: left; background: none; border: 0; cursor: pointer; padding: 10px 0;
  font-size: clamp(26px, 2.9vw, 40px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; color: #3d4748; transition: color .35s var(--ease), transform .35s var(--ease);
}
.ind__list button:hover { color: var(--ink-2); }
.ind__list button[aria-selected="true"] { color: var(--ink); transform: translateX(10px); }
.ind__list button[aria-selected="true"]::before { content: ""; display: inline-block; width: 26px; height: 3px; border-radius: 2px; background: var(--teal); vertical-align: middle; margin-right: 14px; }
.ind__panels p { font-size: 17px; color: var(--ink-2); line-height: 1.55; margin-bottom: 24px; }
[role="tabpanel"]:not([hidden]) { animation: fadeUp .5s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }

/* ---------- insights ---------- */
.ins__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ins__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.post { display: flex; flex-direction: column; gap: 10px; text-decoration: none; padding: 12px 12px 24px; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); transition: border-color .3s, transform .4s var(--ease); }
.post:hover { border-color: rgba(60,195,197,.55); transform: translateY(-4px); }
.post__img { aspect-ratio: 16 / 9; border-radius: 14px; margin-bottom: 8px; background: linear-gradient(135deg, #262627, #151516); }
.post__img--2 { background: linear-gradient(135deg, #3a3319, #15130d); }
.post__img--3 { background: linear-gradient(135deg, #22252a, #131416); }
.post__meta { font-size: 13px; color: var(--gold-l); font-weight: 600; padding: 0 10px; }
.post__meta i { font-style: normal; color: var(--ink-3); margin: 0 4px; }
.post h3 { font-size: var(--fs-h4); line-height: 1.3; font-weight: 700; padding: 0 10px; }
.post p { color: var(--ink-2); font-size: var(--fs-sm); padding: 0 10px; }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.faq__list { display: grid; gap: 12px; }
.faq details { border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--card); transition: border-color .3s; }
.faq details[open] { border-color: rgba(60,195,197,.5); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-weight: 600; font-size: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.06); color: var(--teal-l); transition: transform .3s var(--ease); }
.faq details[open] summary i { transform: rotate(45deg); }
.faq details p { padding: 0 22px 22px; color: var(--ink-2); }

/* ---------- CTA ---------- */
.cta { padding: 16px 0 88px; }
.cta__panel { position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; padding: clamp(36px, 6vw, 80px) clamp(24px, 6vw, 72px); border: 1px solid var(--line-2); }
.cta__bg { position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(55% 90% at 88% 40%, rgba(217,163,22,.20), transparent 70%), radial-gradient(35% 60% at 100% 100%, rgba(20,154,157,.16), transparent 70%), linear-gradient(120deg, #161617, #1c1b18); }
.cta__txt { max-width: 620px; }
.cta__txt p { color: var(--ink-2); font-size: var(--fs-lead); margin: 14px 0 28px; }
.cta__txt small { display: block; margin-top: 16px; color: var(--ink-3); font-size: 14px; }

/* ---------- footer ---------- */
.ftr { border-top: 1px solid var(--line); background: #0a0a0a; padding-top: 64px; }
.ftr__grid { display: grid; grid-template-columns: 1.1fr 2fr; gap: 56px; }
.ftr__brand p { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 20px; max-width: 36ch; }
.ftr__note { display: flex; gap: 8px; align-items: center; color: var(--ink-3) !important; font-size: 14px !important; }
.ftr__note i { color: var(--teal-l); }
.ftr__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.ftr__cols h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; margin-bottom: 14px; }
.ftr__cols a { display: inline-block; text-decoration: none; color: var(--ink-2); font-size: var(--fs-sm); padding: 5px 0; transition: color .2s; }
.ftr__cols a:hover { color: var(--teal-l); }
.ftr__bottom { position: relative; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; padding-bottom: 28px; color: var(--ink-3); font-size: 14px; }
.ftr__bottom::before { content: ""; position: absolute; top: 0; left: var(--gut); right: var(--gut); border-top: 1px solid var(--line); }
.ftr__bottom a { text-decoration: none; margin-left: 24px; }
.ftr__bottom a:hover { color: var(--ink); }

.totop { position: fixed; right: 24px; bottom: 24px; z-index: 30; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; text-decoration: none;
  background: #121a1b; border: 1px solid var(--line-2); font-size: 20px; opacity: 0; pointer-events: none; transition: opacity .3s, border-color .3s; }
.totop.is-on { opacity: 1; pointer-events: auto; }
.totop:hover { border-color: var(--teal-l); }

/* ---------- reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); }

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .nav, .hdr__cta { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 1100px) {
  .svc { grid-template-columns: 1fr 1fr; }
  .svc__card { padding: 48px 28px; }
  .svc__card:nth-child(2n+1) { border-left-width: 0; }
  .svc__card:nth-child(2n) { border-right-width: 0; }
  .svc__card:nth-child(n+3) { border-top-width: 0; }
  .svc__t { min-height: 2.2em; }
  .ai__cards { grid-template-columns: 1fr; }
  .mini { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; }
  .mini > i { grid-row: span 2; }
  .mini h3 { margin-top: 0; }
  .mini ul { display: flex; flex-wrap: wrap; gap: 4px 18px; }
  .ftr__grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .about__grid, .trust__grid, .ai__grid, .build__grid, .faq__grid { grid-template-columns: 1fr; }
  .about__txt { order: -1; }
  .globe { max-width: 440px; }
  .nums__grid { grid-template-columns: 1fr 1fr; }
  .scard { grid-template-columns: 1fr; min-height: 0; top: calc(92px + var(--i, 0) * 14px); }
  .tech__grid { grid-template-columns: 1fr 1fr; }
  .ind__grid { grid-template-columns: 1fr 1fr; }
  .ind__media { grid-row: span 2; }
  .why__row { flex-direction: column; min-height: 0; }
  .why__card p { -webkit-line-clamp: unset; }
  /* process becomes a vertical timeline */
  .path__svg { display: none; }
  .steps { grid-template-columns: 1fr; gap: 0; border-left: 2px solid rgba(255,255,255,.08); margin-left: 19px; }
  .step, .step:nth-child(n) { height: auto; margin-top: 0; padding: 0 0 32px 40px; justify-content: flex-start; }
  .step::before { content: ""; position: absolute; left: -2px; top: 0; width: 2px; height: 0; background: var(--teal); transition: height .6s var(--ease); }
  .step.is-lit::before { height: 100%; }
  .step .step__n, .step:nth-child(n) .step__n { position: absolute; left: -21px; top: 0; margin: 0; order: 0; }
  .step h3 { margin-top: 8px; }
  .ins__grid { grid-template-columns: 1fr; }
  .post { display: grid; grid-template-columns: 180px 1fr; column-gap: 20px; align-items: start; }
  .post__img { grid-row: span 3; margin: 0; }
  .post > *:not(.post__img) { padding: 0; }
  .post { padding: 12px; }
}
@media (max-width: 767px) {
  .util { display: none; }
  .hdr__inner { height: 68px; }
  .mnav { max-height: calc(100dvh - 68px); }
  .brand img { width: 44px; }
  .brand__txt b { font-size: 16px; }
  .hero { min-height: 0; padding: 48px 0 40px; text-align: left; }
  .hero__inner { text-align: left; }
  .hero__pill { font-size: 12.5px; }
  .hero__title { margin: 0; }
  .eyebrow--center.hero__eyebrow, .hero .eyebrow--center { text-align: left; }
  .hero .eyebrow--center::after { left: 0; transform: none; }
  .hero__sub { margin-left: 0; }
  .hero__ctas { justify-content: flex-start; }
  .hero__ctas .pill { width: 100%; }
  .stats { grid-template-columns: 1fr 1fr; margin-top: 40px; }
  .stats > div:nth-child(3) { border-left: 0; }
  .stats > div:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .stats dd { font-size: 28px; }
  .logo-tile { width: 132px; height: 72px; font-size: 12px; }
  .svc { grid-template-columns: 1fr; }
  .svc__card, .svc__card:nth-child(n) { border-width: 1px 0 0; padding: 36px var(--gut); }
  .svc__card:last-child { border-bottom-width: 1px; }
  .svc__t { min-height: 0; font-size: 26px; }
  .nums__grid { grid-template-columns: 1fr; gap: 28px; }
  .num { flex-direction: row; align-items: flex-start; gap: 18px; }
  .num__v { min-width: 104px; font-size: 44px; }
  .scard { position: relative; top: 0; padding: 24px; border-radius: 22px; gap: 24px; box-shadow: none; }
  .scard h3 { font-size: 22px; }
  .flow--layers li:nth-child(n) { margin: 0; }
  .testi__card { grid-template-columns: 1fr; padding: 22px; }
  .testi__video { aspect-ratio: 16 / 10; }
  .tech__grid { grid-template-columns: 1fr; }
  .ind__grid { grid-template-columns: 1fr; gap: 24px; }
  .ind__media { grid-row: auto; aspect-ratio: 16 / 10; }
  .ind__list { grid-template-columns: 1fr 1fr; gap: 4px 16px; }
  .ind__list button { font-size: 24px; }
  .ind__list button[aria-selected="true"] { transform: none; }
  .ind__list button[aria-selected="true"]::before { width: 14px; margin-right: 8px; }
  .post { grid-template-columns: 1fr; }
  .post__img { grid-row: auto; margin-bottom: 8px; }
  .build__shot { padding: 18px 18px 52px; }
  .build__float { right: -6px; bottom: 36px; width: 50%; border-width: 3px; }
  .build__shot figcaption { left: 18px; bottom: 16px; }
  .sprint { flex-direction: column; align-items: flex-start; padding: 24px; }
  .ftr__cols { grid-template-columns: 1fr 1fr; }
  .ftr__bottom a { margin: 0 20px 0 0; }
  .totop { right: 16px; bottom: 16px; width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .marquee__track { flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee__row--rev { display: none; }
  .scard { position: relative; top: 0; }
}

/* =====================================================================
   INNER PAGES
   Shared components for every page except home, in v5's visual language:
   same tokens, pills, 20px cards / 14px small cards, gold eyebrows,
   teal icons and actions, warm glows. Usage: site/COMPONENTS.md.
   ===================================================================== */

/* ---------- nav: current page (set by site.js) ---------- */
.nav__link[aria-current="page"], .nav__link.is-current, .nav__btn.is-current { color: var(--ink); }
.nav__link[aria-current="page"]::after, .nav__link.is-current::after, .nav__btn.is-current::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); margin-left: 2px;
}
.dd a[aria-current="page"] { background: rgba(255,255,255,.05); }
.dd a[aria-current="page"] b { color: var(--teal-l); }
.macc ul a[aria-current="page"], .mnav__link[aria-current="page"] { color: var(--teal-l); }
.macc > button.is-current { color: var(--ink); }
.ftr__cols a[aria-current="page"] { color: var(--ink); }

/* ---------- section helpers ---------- */
.sec--tight { padding: var(--sec-y-tight) 0; }
.sec--flush-top { padding-top: 0; }
.sec--band { background: #0a0a0a; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec--glow { isolation: isolate; overflow: hidden; }
.sec-head { margin-bottom: 40px; }
.sec-head .body { margin-top: 18px; }
.sec-head--center { text-align: center; }
.sec-head--center .body { margin-left: auto; margin-right: auto; }
.sec-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--teal-l); font-weight: 600; text-decoration: none; }
.link-arrow i { transition: transform .3s var(--ease); }
.link-arrow:hover i { transform: translateX(3px); }

/* ---------- page hero (smaller sibling of .hero) ---------- */
.phero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(36px, 5vw, 60px) 0 clamp(48px, 6.5vw, 84px); border-bottom: 1px solid var(--line); }
.phero__media {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(45% 60% at 85% 20%, rgba(217,163,22,.10), transparent 70%),
    radial-gradient(35% 50% at 8% 100%, rgba(20,154,157,.08), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 120px),
    linear-gradient(180deg, #1a1a1b, #121213 70%, var(--bg));
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
          mask-image: linear-gradient(180deg, #000 70%, transparent);
}
.phero__inner { position: relative; }
.phero .crumbs { margin-bottom: clamp(24px, 3.4vw, 40px); }
.phero__title { font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -.035em; font-weight: 800; max-width: 20ch; text-wrap: balance; }
.phero__lede { font-size: var(--fs-lead); color: var(--ink-2); max-width: 640px; margin-top: 20px; }
.phero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.phero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 24px; color: var(--ink-3); font-size: var(--fs-sm); }
.phero__meta i { color: var(--teal-l); margin-right: 6px; }
.phero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.phero--center { text-align: center; }
.phero--center .phero__title, .phero--center .phero__lede { margin-left: auto; margin-right: auto; }
.phero--center .phero__ctas, .phero--center .phero__meta, .phero--center .crumbs ol { justify-content: center; }
.phero--center .eyebrow::after { left: 50%; transform: translateX(-50%); }

/* ---------- breadcrumbs ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-3); }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.crumbs li + li::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--ink-3); border-top: 1.5px solid var(--ink-3); transform: rotate(45deg); margin-right: 6px; opacity: .7; }
.crumbs a { color: var(--ink-2); text-decoration: none; padding: 4px 0; }
.crumbs a:hover { color: var(--teal-l); }
.crumbs [aria-current="page"] { color: var(--ink); }

/* ---------- prose (articles, legal pages) ---------- */
.prose { max-width: 72ch; color: var(--ink-2); font-size: 16px; line-height: 1.75; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { color: var(--ink); font-size: clamp(22px, 2vw, 28px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; margin-top: 2.2em; scroll-margin-top: 110px; }
.prose h3 { color: var(--ink); font-size: var(--fs-h3); line-height: 1.3; font-weight: 700; margin-top: 1.8em; scroll-margin-top: 110px; }
.prose h4 { color: var(--ink); font-size: 16px; font-weight: 600; margin-top: 1.6em; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .7em; }
.prose > :first-child { margin-top: 0; }
.prose strong, .prose b { color: var(--ink); font-weight: 600; }
.prose a { color: var(--teal-l); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { display: grid; gap: .5em; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--teal-l); }
.prose ol { counter-reset: pr; }
.prose ol li { counter-increment: pr; position: relative; padding-left: 36px; }
.prose ol li::before { content: counter(pr); position: absolute; left: 0; top: .2em; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--ink); background: rgba(255,255,255,.06); border: 1px solid var(--line-2); line-height: 1; }
.prose blockquote { margin: 1.6em 0; padding: 20px 24px; border-left: 3px solid var(--gold); border-radius: 0 var(--r-s) var(--r-s) 0; background: linear-gradient(90deg, rgba(217,163,22,.08), rgba(255,255,255,.02)); color: var(--ink); font-size: 17px; }
.prose hr { border: 0; border-top: 1px solid var(--line-2); margin: 2.4em 0; }
.prose code { font-size: .9em; padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.06); color: var(--ink); }
.prose figure { margin: 2em 0; }
.prose figcaption { font-size: 14px; color: var(--ink-3); margin-top: 10px; }
.table-wrap { overflow-x: auto; border-radius: var(--r-s); border: 1px solid var(--line-2); }
.prose table, .table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.prose th, .prose td, .table th, .table td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.prose th, .table th { color: var(--ink); font-weight: 600; background: rgba(255,255,255,.03); }
.prose tr:last-child td, .table tr:last-child td { border-bottom: 0; }
.prose--center { margin-left: auto; margin-right: auto; }

/* article / legal layout: prose + sticky aside (table of contents, facts) */
.layout-aside { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(40px, 6vw, 80px); align-items: start; }
.layout-aside__side { position: sticky; top: 110px; display: grid; gap: 16px; }
.toc { padding: 22px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--card); }
.toc h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; margin-bottom: 12px; }
.toc a { display: block; padding: 6px 0; color: var(--ink-2); text-decoration: none; font-size: 14.5px; line-height: 1.45; }
.toc a:hover { color: var(--teal-l); }

/* ---------- split: text + media ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.split--rev > :first-child { order: 2; }
.split--wide-text { grid-template-columns: 1.15fr .85fr; }
.split--top { align-items: start; }
.slot--16x9 { aspect-ratio: 16 / 9; }
.slot--4x3 { aspect-ratio: 4 / 3; }
.slot--1x1 { aspect-ratio: 1; }
.slot--4x5 { aspect-ratio: 4 / 5; }
.shot { position: relative; padding: 28px; border-radius: 28px; background: linear-gradient(145deg, #e7e6e2, #bcbbb6); }
.shot figcaption { font-size: 13px; color: #1c2a2b; font-weight: 500; margin-top: 14px; }

/* ---------- feature list (icon + title + text) ---------- */
.feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 40px; }
.feats--3 { grid-template-columns: repeat(3, 1fr); }
.feats--1 { grid-template-columns: 1fr; gap: 20px; }
.feat { display: flex; gap: 16px; }
.feat > i { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 22px; color: var(--teal-l); background: rgba(255,255,255,.05); border: 1px solid var(--line-2); }
.feat h3 { font-size: 16px; font-weight: 700; }
.feat p { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 4px; }

/* ---------- numbered steps (vertical, static) ---------- */
.nsteps { display: grid; gap: 0; counter-reset: ns; border-left: 2px solid rgba(255,255,255,.08); margin-left: 19px; }
.nsteps > li { counter-increment: ns; position: relative; padding: 0 0 36px 44px; }
.nsteps > li:last-child { padding-bottom: 0; }
.nsteps > li::before {
  content: counter(ns); position: absolute; left: -21px; top: 0; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; font-weight: 800; background: #fff; color: var(--teal-d);
  box-shadow: 0 0 0 6px rgba(255,255,255,.08), 0 0 24px rgba(217,163,22,.25);
}
.nsteps h3 { font-size: var(--fs-h4); font-weight: 700; padding-top: 7px; }
.nsteps p { color: var(--ink-2); font-size: var(--fs-body); margin-top: 8px; max-width: 62ch; }
.nsteps__meta { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--gold-l); }
/* horizontal row of steps (desktop), stacks on tablet */
.nsteps--row { grid-template-columns: repeat(var(--n, 4), 1fr); gap: 24px; border-left: 0; margin-left: 0; }
.nsteps--row > li { padding: 60px 0 0; }
.nsteps--row > li::before { left: 0; }
.nsteps--row > li::after { content: ""; position: absolute; left: 52px; right: -12px; top: 19px; height: 2px; background: linear-gradient(90deg, var(--teal), rgba(217,163,22,.5)); opacity: .5; }
.nsteps--row > li:last-child::after { display: none; }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.card { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--card); color: inherit; text-decoration: none; transition: border-color .3s, transform .4s var(--ease); }
.card__ico { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #061011; font-size: 24px; margin-bottom: 22px; }
.card__ico--line { border-radius: 12px; width: 44px; height: 44px; font-size: 22px; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); color: var(--teal-l); }
.card__kicker { font-size: 13px; font-weight: 600; color: var(--gold-l); margin-bottom: 10px; }
.card h3 { font-size: var(--fs-h4); line-height: 1.3; font-weight: 700; }
.card p { color: var(--ink-2); font-size: var(--fs-body); margin-top: 10px; }
.card p.card__kicker { font-size: 13px; color: var(--gold-l); margin-top: 0; }
.card ul { margin-top: 14px; }
.card .tag { align-self: flex-start; margin-bottom: 14px; }
.card__foot { margin-top: auto; padding-top: 22px; }
.card__more { display: inline-flex; align-items: center; gap: 8px; color: var(--teal-l); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.card__more i { transition: transform .3s var(--ease); }
a.card:hover, .card--link:hover { border-color: rgba(60,195,197,.55); transform: translateY(-4px); }
a.card:hover .card__more i, a.card__more:hover i { transform: translateX(3px); }
.card--hl { background: linear-gradient(135deg, rgba(217,163,22,.12), var(--card) 70%); border-color: rgba(217,163,22,.40); }
.card--ph { border-style: dashed; background: rgba(255,255,255,.02); }
.card--ph h3 { color: var(--ink-2); }
/* pastel card (v5 work cards) for project teasers; text is dark */
.card--pastel { color: #0e1718; border: 0; background: #f4e6b8; }
.card--pastel p, .card--pastel li { color: #2a3537; }
.card--pastel .card__more { color: var(--teal-d); }
.card--pastel p.card__kicker { color: #6b4f00; }
.card--sand { background: #cfe6e6; }
.card--stone { background: #ebe3d5; }
.card--grey { background: #dfe3ea; }

/* ---------- fact rows (label : value, no statistics) ---------- */
.facts { border-radius: var(--r); border: 1px solid var(--line-2); background: var(--card); overflow: hidden; }
.facts > div { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 20px; padding: 18px 24px; }
.facts > div + div { border-top: 1px solid var(--line); }
.facts dt { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-l); font-weight: 600; padding-top: 2px; }
.facts dd { color: var(--ink); }
.facts dd small { display: block; color: var(--ink-3); font-size: 14px; margin-top: 2px; }

/* ---------- callout (gold, like the v5 Sprint bar) ---------- */
.callout { display: flex; align-items: center; gap: 24px; padding: 26px 30px; border-radius: var(--r); border: 1px solid rgba(217,163,22,.4); background: linear-gradient(90deg, rgba(217,163,22,.1), rgba(255,255,255,.02)); }
.callout__ico { width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #1a1300; font-size: 24px; }
.callout__txt { flex: 1; }
.callout h3 { font-size: var(--fs-h4); font-weight: 700; }
.callout p { color: var(--ink-2); font-size: var(--fs-body); margin-top: 4px; }
.callout--teal { border-color: rgba(60,195,197,.4); background: linear-gradient(90deg, rgba(20,154,157,.1), rgba(255,255,255,.02)); }
.callout--teal .callout__ico { background: var(--teal); color: #061011; }

/* ---------- placeholder block (content we do not have yet) ---------- */
.ph-block { display: grid; place-items: center; gap: 12px; text-align: center; padding: 40px 24px; border-radius: var(--r); border: 1px dashed rgba(217,163,22,.45); background: repeating-linear-gradient(135deg, rgba(217,163,22,.035) 0 12px, transparent 12px 24px); color: var(--ink-2); font-size: 15px; }

/* ---------- tags / badges on dark surfaces ---------- */
/* .tag (base) is for pastel cards; on dark backgrounds add one of these */
.tag--dark { background: rgba(255,255,255,.06); color: var(--ink-2); border-color: var(--line-2); }
.tag--teal { background: rgba(20,154,157,.14); color: var(--teal-l); border-color: rgba(60,195,197,.4); }
.tag--gold { background: rgba(217,163,22,.12); color: var(--gold-l); border-color: rgba(217,163,22,.45); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- generic tabs ([data-tabs], site.js) ---------- */
.tabs__list { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); }
.tabs__list [role="tab"] { min-height: 42px; padding: 0 20px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--ink-2); transition: background-color .3s var(--ease), color .3s var(--ease); }
.tabs__list [role="tab"]:hover { color: var(--ink); }
.tabs__list [role="tab"][aria-selected="true"] { background: var(--teal); color: #061011; }
.tabs__panel { margin-top: 32px; }

/* ---------- forms (dark inputs, label above) ---------- */
.form { display: grid; gap: 22px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 6px; }
.form__note { color: var(--ink-3); font-size: 14px; }
.form-panel { padding: clamp(24px, 4vw, 40px); border-radius: 28px; border: 1px solid var(--line-2); background: linear-gradient(135deg, #1b1b1c, #131314); }
.field { display: grid; gap: 8px; min-width: 0; }
.field__label { font-size: 15px; font-weight: 600; color: var(--ink); }
.field__label .opt { font-weight: 500; color: var(--ink-3); margin-left: 6px; font-size: 13.5px; }
.field__label .req { color: var(--gold-l); margin-left: 2px; }
.field__help { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
.field__error { font-size: 13.5px; color: #ff9b8a; font-weight: 500; min-height: 0; }
.field__error:empty { display: none; }
.input {
  width: 100%; min-height: 50px; padding: 12px 16px; border-radius: var(--r-s); font: inherit; font-size: 16px; color: var(--ink);
  background: #121213; border: 1px solid var(--line-2); transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.input::placeholder { color: #7d7d7b; }
.input:hover { border-color: rgba(255,255,255,.24); }
.input:focus { outline: none; border-color: var(--teal-l); box-shadow: 0 0 0 3px rgba(60,195,197,.25); background: #151516; }
textarea.input { min-height: 150px; resize: vertical; line-height: 1.6; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--teal-l) 50%), linear-gradient(135deg, var(--teal-l) 50%, transparent 50%);
  background-position: right 22px center, right 16px center; background-size: 6px 6px; background-repeat: no-repeat; }
select.input option { background: #121213; color: var(--ink); }
.field.is-invalid .input, .input[aria-invalid="true"] { border-color: #ff9b8a; }
.field.is-invalid .input:focus { box-shadow: 0 0 0 3px rgba(255,155,138,.22); }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; color: var(--ink-2); font-size: 15px; }
.check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--teal); cursor: pointer; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.choices legend { font-size: 15px; font-weight: 600; margin-bottom: 10px; padding: 0; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--ink-2); font-size: 14.5px; font-weight: 500; transition: border-color .2s, background-color .2s, color .2s; }
.choice input:hover + span { border-color: rgba(255,255,255,.28); }
.choice input:checked + span { border-color: var(--teal-l); background: rgba(20,154,157,.16); color: var(--ink); }
.choice input:focus-visible + span { outline: 2px solid var(--teal-l); outline-offset: 3px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 404 ---------- */
.nf__code { font-size: clamp(96px, 16vw, 200px); font-weight: 800; letter-spacing: -.06em; line-height: .9; color: transparent; -webkit-text-stroke: 1px var(--line-2); margin-bottom: 18px; }

/* ---------- inner pages: responsive ---------- */
@media (max-width: 1100px) {
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .layout-aside { grid-template-columns: 1fr; }
  .layout-aside__side { position: static; order: -1; }
  .nsteps--row { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .nsteps--row > li::after { display: none; }
}
@media (max-width: 960px) {
  .split, .split--wide-text, .phero__grid { grid-template-columns: 1fr; }
  .split--rev > :first-child { order: 0; }
  .cards, .cards--2 { grid-template-columns: 1fr 1fr; }
  .feats--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .phero__ctas .pill { width: 100%; }
  .phero--center { text-align: left; }
  .phero--center .phero__title, .phero--center .phero__lede { margin-left: 0; }
  .phero--center .phero__ctas, .phero--center .phero__meta, .phero--center .crumbs ol { justify-content: flex-start; }
  .phero--center .eyebrow::after { left: 0; transform: none; }
  .btns .pill { width: 100%; }
  .cards, .cards--2, .cards--4, .feats, .feats--3 { grid-template-columns: 1fr; }
  .card { padding: 24px; }
  .nsteps--row { grid-template-columns: 1fr; border-left: 2px solid rgba(255,255,255,.08); margin-left: 19px; gap: 0; }
  .nsteps--row > li { padding: 0 0 36px 44px; }
  .nsteps--row > li::before { left: -21px; }
  .facts > div { grid-template-columns: 1fr; gap: 4px; padding: 16px 20px; }
  .callout { flex-direction: column; align-items: flex-start; padding: 24px; }
  .form__row { grid-template-columns: 1fr; }
  .prose { font-size: 15.5px; }
  .tabs__list { display: flex; border-radius: var(--r-s); }
  .tabs__list [role="tab"] { flex: 1 1 auto; border-radius: 10px; }
}

/* ---------- pastel work card (.scard) helpers for inner pages (work, services) ---------- */
.scard__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-weight: 700; font-size: 15px; color: var(--teal-d); text-decoration: none; }
.scard__link i { transition: transform .3s var(--ease); }
.scard__link:hover i { transform: translateX(3px); }
.scard__link:focus-visible { outline: 2px solid var(--teal-d); outline-offset: 4px; border-radius: 4px; }
.scard .tags { margin-top: 4px; }
.scard .dots { display: grid; gap: 2px; }
.scard h3.scard__sub { font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1.4; margin: 22px 0 8px; }
.scard h3.scard__sub--lg { font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -.02em; line-height: 1.2; margin-top: 18px; }
/* a single card per section: no sticking, no stacking shadow */
.scard--solo { position: relative; top: 0; box-shadow: none; min-height: 0; }
@media (max-width: 767px) { .scard__link { margin-top: 20px; } }

/* =====================================================================
   ROUND 2 SHARED COMPONENTS (usage and markup: site/COMPONENTS.md)
   All motion is progressive: without JS or with reduced motion every
   component shows its content statically.
   ===================================================================== */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- (c/d) scroll progress bar: thin gold line under the header ----------
   Lives in the header partial. Tracks the whole page, or the [data-progress] element
   (the article body) when a page has one. */
.sprog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.sprog span { display: block; height: 100%; width: 100%; background: var(--grad-brand); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; box-shadow: 0 0 8px rgba(217,163,22,.45); }

/* ---------- (a) tabs with a sliding underline ([data-tabs] + .utabs) ---------- */
.utabs__list { position: relative; display: flex; gap: 4px; border-bottom: 1px solid var(--line-2); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.utabs__list::-webkit-scrollbar { display: none; }
.utabs__list [role="tab"] { flex: none; min-height: 48px; padding: 0 18px; border: 0; background: none; cursor: pointer; font-weight: 600; font-size: var(--fs-body); color: var(--ink-3); white-space: nowrap; transition: color .3s var(--ease); display: inline-flex; align-items: center; gap: 8px; }
.utabs__list [role="tab"] i { font-size: 18px; }
.utabs__list [role="tab"]:hover { color: var(--ink); }
.utabs__list [role="tab"][aria-selected="true"] { color: var(--ink); }
.utabs__list [role="tab"][aria-selected="true"] i { color: var(--teal-l); }
.utabs__list [role="tab"]:focus-visible { outline-offset: -3px; }
.utabs__ink { position: absolute; left: 0; bottom: 0; height: 2px; width: var(--w, 0); transform: translateX(var(--x, 0)); background: var(--teal-l); border-radius: 2px; transition: transform .45s var(--ease), width .45s var(--ease); pointer-events: none; }
/* no JS: the selected tab carries its own underline */
.utabs__list:not(.is-inked) [role="tab"][aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--teal-l); }
.utabs__panel { padding-top: 32px; }
.utabs__panel[hidden] { display: none; }
.utabs--center .utabs__list { justify-content: safe center; }

/* ---------- (b) expanding cards row ([data-xcards] > .xcard) ---------- */
.xcards { display: flex; gap: 16px; min-height: 280px; }
.xcard {
  position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 28px; border-radius: var(--r);
  border: 1px solid var(--line-2); background: var(--card); overflow: hidden; outline-offset: 4px;
  transition: flex-grow .6s var(--ease), border-color .4s, background-color .4s;
}
.xcard.is-open { flex-grow: 2.6; border-color: rgba(217,163,22,.45); background: linear-gradient(135deg, rgba(217,163,22,.10), var(--card) 60%); }
.xcard__ico { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #061011; font-size: 23px; margin-bottom: 22px; }
.xcard__n { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; color: var(--gold-l); margin-bottom: 14px; }
.xcard h3 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.3; }
.xcard p { color: var(--ink-2); font-size: var(--fs-body); margin-top: 10px; max-width: 56ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xcard.is-open p { -webkit-line-clamp: unset; }
.xcard__more { margin-top: auto; padding-top: 18px; opacity: 0; transition: opacity .4s; }
.xcard.is-open .xcard__more { opacity: 1; }

/* ---------- (e) progress rail for sticky stacks ([data-prail]) ---------- */
.prail { position: fixed; right: max(16px, calc((100vw - var(--wrap)) / 2 - 36px)); top: 50%; z-index: 20; transform: translateY(-50%); display: grid; gap: 18px; padding: 10px 0; opacity: 0; pointer-events: none; transition: opacity .35s; }
.prail.is-on { opacity: 1; }
.prail::before { content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 2px; margin-left: -1px; background: var(--line-2); border-radius: 2px; }
.prail::after { content: ""; position: absolute; left: 50%; top: 10px; width: 2px; margin-left: -1px; height: calc((100% - 20px) * var(--p, 0)); background: var(--gold); border-radius: 2px; }
.prail i { position: relative; z-index: 1; width: 10px; height: 10px; border-radius: 50%; background: #2a2a2b; border: 2px solid #3a3a3b; transition: background-color .3s, border-color .3s, transform .3s var(--ease); }
.prail i.is-done { background: var(--gold); border-color: var(--gold); }
.prail i.is-on { background: var(--bg); border-color: var(--gold-l); transform: scale(1.5); box-shadow: 0 0 0 4px rgba(217,163,22,.18); }
.prail--inline { position: absolute; right: 0; top: 50%; opacity: 1; }
@media (max-width: 767px) { .prail:not(.prail--inline) { display: none; } }

/* ---------- (f) pinned scroll tour ([data-tour]) ----------
   Default (no JS, <=960px, reduced motion): a vertical list, one framed screenshot + caption per stop.
   Pinned (site.js adds .is-pinned): the stage sticks, one frame stays put and its screenshot and
   caption swap through the stops as you scroll; a rail on the right shows the current stop. */
.tour__list { display: grid; gap: clamp(40px, 6vw, 72px); counter-reset: tour; }
.tour__stop { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(28px, 4vw, 56px); align-items: center; counter-increment: tour; }
.tour__shot { padding: clamp(14px, 2vw, 24px); border-radius: 24px; background: linear-gradient(145deg, #e7e6e2, #bcbbb6); }
.tour__shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.tour__cap { max-width: 42ch; }
.tour__n { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; color: var(--gold-l); margin-bottom: 12px; }
.tour__n:empty::before { content: counter(tour, decimal-leading-zero); }
.tour__cap h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; }
.tour__cap p { color: var(--ink-2); margin-top: 10px; }
.tour__cap .checks { margin: 16px 0 0; }
.tour.is-pinned { position: relative; height: calc((var(--n, 4) - 1) * 65vh + 100dvh - 76px); }
.tour.is-pinned .tour__stage { position: sticky; top: 76px; height: calc(100dvh - 76px); display: flex; align-items: center; }
.tour.is-pinned .tour__list { position: relative; display: grid; gap: 0; width: 100%; padding-right: 48px; }
.tour.is-pinned .tour__stop { grid-area: 1 / 1; }
.tour.is-pinned .tour__stop:not(:first-child) .tour__shot { background: none; }
.tour.is-pinned .tour__stop:not(:first-child) .browser { background: transparent; box-shadow: none; border-color: transparent; }
.tour.is-pinned .tour__stop:not(:first-child) .browser__bar { visibility: hidden; }
.tour.is-pinned .tour__shot img, .tour.is-pinned .tour__cap { opacity: 0; transition: opacity .55s var(--ease), transform .55s var(--ease); }
.tour.is-pinned .tour__cap { transform: translateY(14px); pointer-events: none; }
.tour.is-pinned .tour__stop.is-active .tour__shot img { opacity: 1; }
.tour.is-pinned .tour__stop.is-active .tour__cap { opacity: 1; transform: none; pointer-events: auto; }
.tour.is-pinned .tour__stop.is-active { z-index: 1; }

/* ---------- (g) stacking cards ([data-stack] > .stackc__card) ---------- */
.stackc { display: grid; gap: 24px; }
.stackc__card {
  position: sticky; top: calc(100px + var(--i, 0) * 18px);
  display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: start;
  min-height: 300px; padding: clamp(26px, 3.4vw, 44px); border-radius: 24px; border: 1px solid var(--line-2);
  background: linear-gradient(145deg, #1c1c1d, #151516); box-shadow: 0 -18px 50px rgba(0,0,0,.45); transform-origin: 50% 0;
}
.stackc__card:nth-child(1) { --i: 0; } .stackc__card:nth-child(2) { --i: 1; } .stackc__card:nth-child(3) { --i: 2; } .stackc__card:nth-child(4) { --i: 3; }
.stackc__card:nth-child(5) { --i: 4; } .stackc__card:nth-child(6) { --i: 5; } .stackc__card:nth-child(7) { --i: 6; } .stackc__card:nth-child(8) { --i: 7; }
.stackc__card:nth-child(4n+2) { background: linear-gradient(145deg, #1f1d17, #151414); }
.stackc__card:nth-child(4n+3) { background: linear-gradient(145deg, #172021, #131516); }
.stackc__n { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; color: var(--gold-l); }
.stackc__card h3 { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; letter-spacing: -.02em; font-weight: 700; margin-top: 10px; }
.stackc__card .xcard__ico, .stackc__ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #061011; font-size: 23px; margin-bottom: 18px; }
.stackc__body > p { color: var(--ink-2); }
.stackc__body > * + * { margin-top: 14px; }

/* ---------- (h) filter gallery ([data-filter]) ---------- */
.fgal__chips { display: none; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.fgal.is-ready .fgal__chips { display: flex; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.chip:hover { border-color: rgba(255,255,255,.28); color: var(--ink); }
.chip[aria-pressed="true"] { border-color: var(--teal-l); background: rgba(20,154,157,.16); color: var(--ink); }
.chip__n { font-size: 12px; color: var(--ink-3); font-weight: 600; }
[data-filter-item][hidden] { display: none !important; }
.fgal__empty { padding: 32px; text-align: center; color: var(--ink-3); border: 1px dashed var(--line-2); border-radius: var(--r); }

/* ---------- (d/i) table of contents: scroll-spy + numbered legal layout ---------- */
.toc a { position: relative; padding-left: 14px; border-left: 2px solid var(--line); transition: color .2s, border-color .2s; }
.toc a.is-active { color: var(--ink); border-left-color: var(--teal-l); }
.toc--num { counter-reset: tocn; }
.toc--num a { counter-increment: tocn; display: grid; grid-template-columns: 26px 1fr; }
.toc--num a::before { content: counter(tocn, decimal-leading-zero); font-size: 12px; font-weight: 700; color: var(--ink-3); padding-top: 2px; }
.toc--num a.is-active::before { color: var(--gold-l); }
.layout-toc { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.layout-toc__side { position: sticky; top: 104px; max-height: calc(100vh - 128px); overflow-y: auto; }
.prose--num { counter-reset: hnum; }
.prose--num h2 { counter-increment: hnum; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline; }
.prose--num h2::before { content: counter(hnum, decimal-leading-zero); font-size: .62em; font-weight: 700; letter-spacing: .06em; color: var(--gold-l); }

/* ---------- (j) "In short" box + comparison table ---------- */
.inshort { margin: 0 0 2em; padding: 22px 24px; border-radius: var(--r); border: 1px solid rgba(60,195,197,.35); background: linear-gradient(135deg, rgba(20,154,157,.10), rgba(255,255,255,.02) 70%); }
.inshort__t { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-l); margin-bottom: 12px; }
.inshort__t i { font-size: 18px; }
.inshort ul { display: grid; gap: 8px; }
.inshort li { position: relative; padding-left: 22px; color: var(--ink); font-size: var(--fs-body); line-height: 1.6; }
.inshort li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--teal-l); }
.prose .inshort ul li { padding-left: 22px; }
.prose .inshort ul li::before { left: 2px; }
.prose .inshort > * + * { margin-top: 0; }
.ctable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.5; }
.ctable th, .ctable td { text-align: left; vertical-align: top; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.ctable thead th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; background: rgba(255,255,255,.03); }
.ctable tbody th { color: var(--ink); font-weight: 600; width: 28%; }
.ctable td, .ctable tbody th { color: var(--ink-2); background: transparent; }
.ctable tbody th { color: var(--ink); }
.ctable .ctable__hl { background: rgba(20,154,157,.07); color: var(--ink); }
.ctable thead .ctable__hl { color: var(--teal-l); }
.ctable tr:last-child > * { border-bottom: 0; }
.ctable i { margin-right: 6px; vertical-align: -2px; }
.ctable .yes { color: var(--teal-l); } .ctable .no { color: #ff9b8a; }
.prose .ctable { font-size: var(--fs-sm); }

/* ---------- round 2 responsive ---------- */
@media (max-width: 1100px) {
  .layout-toc { grid-template-columns: 1fr; }
  .layout-toc__side { position: static; max-height: none; }
}
@media (max-width: 960px) {
  .xcards { flex-direction: column; min-height: 0; }
  .xcard, .xcard.is-open { flex: none; }
  .xcard p { -webkit-line-clamp: unset; }
  .xcard__more { opacity: 1; }
  .tour__stop { grid-template-columns: 1fr; gap: 20px; }
  .stackc__card { grid-template-columns: 1fr; min-height: 0; top: calc(88px + var(--i, 0) * 12px); gap: 16px; }
}
@media (max-width: 767px) {
  .stackc__card { position: relative; top: 0; box-shadow: none; padding: 24px; border-radius: 20px; }
  .xcard { padding: 24px; }
  .inshort { padding: 20px; }
  .ctable--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ctable--stack tr { display: block; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .ctable--stack tr:last-child { border-bottom: 0; }
  .ctable--stack th, .ctable--stack td { display: block; padding: 4px 0; border: 0; width: auto; }
  .ctable--stack tbody th { font-size: var(--fs-body); margin-bottom: 4px; }
  .ctable--stack td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  .ctable--stack .ctable__hl { background: none; }
  .ctable--stack td.ctable__hl::before { color: var(--teal-l); }
}
@media (prefers-reduced-motion: reduce) {
  .stackc__card { position: relative; top: 0; }
  .prail:not(.prail--inline) { display: none; }
}

/* ---------- TEMPORARY PHOTOS ----------
   TODO(replace-before-launch): every file in /assets/img/temp-pinterest/ is an unlicensed Pinterest
   placeholder. Replace with licensed or original photos, then delete the folder.
   Find usages: grep -rn "temp-pinterest\|TODO(replace-before-launch)" site/ */
.slot--img { background: #151516; }
.slot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.slot--img::after { z-index: 1; background: linear-gradient(180deg, rgba(15,15,16,0) 55%, rgba(15,15,16,.28)), rgba(15,15,16,.08); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; opacity: .6; filter: saturate(.8); }
.hero__media--photo + .hero__shade { background: linear-gradient(180deg, rgba(15,15,16,.62), rgba(15,15,16,.72) 55%, var(--bg)); }
.cta__bg--team { --cta-photo: url("/assets/img/temp-pinterest/wide-cta-team.jpg"); }
.cta__bg--session-dark { --cta-photo: url("/assets/img/temp-pinterest/wide-session-dark.jpg"); }
.cta__bg--session-office { --cta-photo: url("/assets/img/temp-pinterest/wide-session-office.jpg"); }
.cta__bg--session-whiteboard { --cta-photo: url("/assets/img/temp-pinterest/wide-session-whiteboard.jpg"); }
[class*="cta__bg--"] {
  background:
    linear-gradient(90deg, rgba(14,14,15,.95) 0%, rgba(14,14,15,.9) 42%, rgba(14,14,15,.66) 100%),
    radial-gradient(55% 90% at 88% 40%, rgba(217,163,22,.14), transparent 70%),
    var(--cta-photo) 50% 40% / cover no-repeat, #151516;
}
@media (max-width: 767px) {
  [class*="cta__bg--"] { background: linear-gradient(180deg, rgba(14,14,15,.9), rgba(14,14,15,.92)), var(--cta-photo) 50% 40% / cover no-repeat, #151516; }
}
.cta__bg[data-drift] { inset: -8% 0; }  /* room for the scroll drift so the photo never shows an edge */


/* =====================================================================
   BLACK + TEAL LAYER (user request): near-black ground, alternating deep
   teal-black bands, teal glows at page heroes and footer, hero photo graded
   black to deep teal. Colours come from the logo teal #075E63. Remove this
   block to return to the neutral charcoal look.
   ===================================================================== */
:root { --bg: #0b0d0e; --bg-teal: #061719; }
body { background: var(--bg); }
/* alternate bands: every other content section sits on teal-black */
main > section.sec:nth-of-type(even):not(.cta),
main > .sec:nth-of-type(even):not(.cta) { background-color: var(--bg-teal); }
.nums { background-color: #051315; }
/* home hero: photo graded black to deep teal */
.hero__img { filter: saturate(.7) contrast(1.05) brightness(.9); }
.hero__media--photo + .hero__shade {
  background:
    radial-gradient(55% 70% at 12% 95%, rgba(7,94,99,.55), transparent 70%),
    radial-gradient(40% 50% at 92% 8%, rgba(20,154,157,.18), transparent 70%),
    linear-gradient(180deg, rgba(8,12,13,.72) 0%, rgba(6,23,25,.80) 55%, var(--bg) 100%);
}
/* inner page heroes: teal glow bottom-left, faint gold top-right */
.phero {
  background:
    radial-gradient(55% 90% at 0% 100%, rgba(7,94,99,.38), transparent 70%),
    radial-gradient(35% 60% at 100% 0%, rgba(217,163,22,.06), transparent 70%),
    var(--bg);
}
/* footer: black with a teal edge */
.ftr { background: radial-gradient(60% 140% at 50% 0%, rgba(7,94,99,.30), transparent 70%), #070909; border-top-color: rgba(20,154,157,.28); }
.hdr { background: rgba(11,13,14,.78); }

/* hero video: same black/teal grade as the photo; reduced motion shows the poster only */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } .hero__media--video { background: url(/assets/img/temp-pinterest/video/hero-poster.jpg) center / cover no-repeat; } }


/* =====================================================================
   VISUAL ROUND COMPONENTS (docs: COMPONENTS.md "Visual round")
   Cinematic hero, lazy video, collage, big split, pinned list, tab media,
   icon marquee, photo cards. Colours come from the tokens above; the
   black/teal overlay grade matches the home hero. All static without JS
   and with prefers-reduced-motion.
   TODO(replace-before-launch): media placed in these slots is temporary Pinterest media.
   ===================================================================== */

/* ---------- 1. cinematic inner-page hero: .phero.phero--cinema ---------- */
.phero--cinema { display: flex; flex-direction: column; min-height: 88svh; padding: 0; border-bottom: 0; background: #070a0b; }
.phero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #070a0b; }
.phero__bg > img, .phero__bg > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) contrast(1.05) brightness(.92); }
.phero__bg { animation: cinemaIn 2.4s var(--ease) both; }
@keyframes cinemaIn { from { transform: scale(1.08); } }
.phero__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 52%, rgba(6,12,13,.50), transparent 75%),
    radial-gradient(55% 70% at 8% 100%, rgba(7,94,99,.50), transparent 70%),
    radial-gradient(40% 50% at 94% 6%, rgba(20,154,157,.16), transparent 70%),
    linear-gradient(180deg, rgba(8,12,13,.70) 0%, rgba(7,16,18,.66) 40%, rgba(6,23,25,.80) 78%, var(--bg) 100%);
}
.phero--cinema .phero__inner { flex: 1; display: flex; flex-direction: column; width: 100%; padding-top: clamp(20px, 3vw, 32px); padding-bottom: clamp(56px, 8vw, 104px); }
.phero--cinema .crumbs { margin-bottom: 0; }
.phero--cinema .crumbs ol { color: rgba(245,245,244,.72); }
.phero--cinema .crumbs a { color: rgba(245,245,244,.82); }
.phero__center { margin: auto; padding-top: clamp(40px, 6vw, 72px); max-width: 900px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.phero__center .eyebrow::after { left: 50%; transform: translateX(-50%); }
.phero--cinema .phero__title { font-size: clamp(34px, 4.4vw, 62px); max-width: 20ch; margin: 0 auto; text-shadow: 0 2px 30px rgba(0,0,0,.45); }
.phero--cinema .phero__lede { color: rgba(245,245,244,.86); max-width: 660px; margin-left: auto; margin-right: auto; text-shadow: 0 1px 16px rgba(0,0,0,.5); }
.phero--cinema .phero__ctas, .phero--cinema .phero__meta { justify-content: center; }
.phero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin-top: 28px; }
.phero__chips > * { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink); text-decoration: none; background: rgba(8,14,15,.55); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .3s; }
.phero__chips > * i { color: var(--teal-l); font-size: 15px; }
.phero__chips > a:hover { border-color: var(--teal-l); }
.phero__cue { position: absolute; left: 50%; bottom: 22px; width: 22px; height: 34px; margin-left: -11px; border: 1.5px solid rgba(255,255,255,.35); border-radius: 12px; pointer-events: none; }
.phero__cue::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--teal-l); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 50% { transform: translateY(8px); opacity: .3; } }
@media (max-width: 767px) {
  .phero--cinema { min-height: 70svh; }
  .phero__center { text-align: center; }
  .phero--cinema .phero__ctas .pill { width: 100%; }
  .phero--cinema .phero__ctas { width: 100%; }
  .phero__cue { display: none; }
}

/* ---------- 2. lazy video ([data-lazy-video]) + shared media frame ---------- */
video[data-lazy-video] { background: #0b0f10; }
.vmedia { position: relative; overflow: hidden; border-radius: var(--r); background: #0b0f10; border: 1px solid var(--line-2); box-shadow: 0 30px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(20,154,157,.06); }
.vmedia > img, .vmedia > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vmedia::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 60%, rgba(6,12,13,.35)); }

/* ---------- 3. staggered collage ([data-collage] > .collage__item) ----------
   Uses its own hook so the home .collage (about section) is untouched. */
[data-collage] { --u: clamp(44px, 4.3vw, 62px); --py: 0px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: var(--u); gap: 16px; }
.collage__item { translate: 0 var(--py, 0px); position: relative; overflow: hidden; border-radius: var(--r); background: #121516; border: 1px solid var(--line); box-shadow: 0 24px 60px -30px rgba(0,0,0,.8); }
.collage__item > img, .collage__item > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: transform 1.2s var(--ease); }
.collage__item:hover > img { transform: scale(1.04); }
[data-collage] > .collage__item:nth-child(1) { grid-column: 1; grid-row: 1 / span 4; }
[data-collage] > .collage__item:nth-child(2) { grid-column: 2; grid-row: 2 / span 6; }
[data-collage] > .collage__item:nth-child(3) { grid-column: 1; grid-row: 5 / span 5; }
[data-collage] > .collage__item:nth-child(4) { grid-column: 2; grid-row: 8 / span 3; }
.collage--3 > .collage__item:nth-child(1) { grid-row: 1 / span 5; }
.collage--3 > .collage__item:nth-child(2) { grid-row: 2 / span 7; }
.collage--3 > .collage__item:nth-child(3) { grid-row: 6 / span 4; }
@media (max-width: 640px) {
  [data-collage] { grid-auto-rows: auto; gap: 10px; }
  [data-collage] > .collage__item:nth-child(n) { grid-column: auto; grid-row: auto; aspect-ratio: 1 / 1; }
  [data-collage] > .collage__item:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: auto; }
  [data-collage] > .collage__item:nth-child(4) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}

/* ---------- 4. big split: text + LARGE media (.bigsplit) ---------- */
.bigsplit { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.bigsplit--rev { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
.bigsplit--rev > .bigsplit__media { order: -1; }
.bigsplit:has(> .bigsplit__media--tall) { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
.bigsplit--rev:has(> .bigsplit__media--tall) { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
.bigsplit__txt .h2 { margin-top: 0; }
.bigsplit__txt .body, .bigsplit__txt .lead { margin-top: 18px; }
.bigsplit__txt .checks { margin: 24px 0 0; }
.bigsplit__media { position: relative; }
.bigsplit__media > .vmedia { aspect-ratio: 4 / 3; }
.bigsplit__media--wide > .vmedia { aspect-ratio: 16 / 10; }
.bigsplit__media--tall > .vmedia { aspect-ratio: 4 / 5; max-height: min(82svh, 760px); margin-inline: auto; }
.bigsplit__media::before { content: ""; position: absolute; inset: 12% -4% -6% 12%; z-index: -1; border-radius: var(--r); background: radial-gradient(60% 60% at 60% 60%, rgba(20,154,157,.22), transparent 70%); pointer-events: none; }
.bigsplit__cap { margin-top: 12px; font-size: var(--fs-xs); color: var(--ink-3); }
.bigsplit + .bigsplit { margin-top: clamp(64px, 8vw, 120px); }
@media (max-width: 960px) {
  .bigsplit, .bigsplit:has(> .bigsplit__media--tall), .bigsplit--rev:has(> .bigsplit__media--tall) { grid-template-columns: 1fr; }
  .bigsplit--rev > .bigsplit__media { order: 0; }
  .bigsplit__media--tall > .vmedia { max-height: 72svh; width: 100%; }
  .bigsplit__media::before { display: none; }
}

/* ---------- 5. pinned list + swapping media ([data-pinlist]) ----------
   Same tab ARIA as [data-tabs]; site.js cross-fades [data-pin-img] and pins on large desktops. */
.pinlist { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.pinlist__media { position: relative; aspect-ratio: 4 / 5; max-height: 72svh; width: 100%; border-radius: var(--r); overflow: hidden; background: #121516; border: 1px solid var(--line-2); box-shadow: 0 30px 80px -30px rgba(0,0,0,.75); }
.pinlist__img { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity .7s var(--ease), transform 1.4s var(--ease); }
.pinlist__img.is-on { opacity: 1; transform: none; }
.pinlist__img > img, .pinlist__img > video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.pinlist__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6,12,13,.4)); }
.pinlist__list { display: grid; }
.pinlist__list [role="tab"] { text-align: left; background: none; border: 0; cursor: pointer; padding: 8px 0; font-size: clamp(24px, 2.6vw, 38px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; color: #4a5657; transition: color .35s var(--ease), transform .35s var(--ease); }
.pinlist__list [role="tab"]:hover { color: var(--ink-2); }
.pinlist__list [role="tab"][aria-selected="true"] { color: var(--ink); transform: translateX(10px); }
.pinlist__list [role="tab"][aria-selected="true"]::before { content: ""; display: inline-block; width: 26px; height: 3px; border-radius: 2px; background: var(--teal); vertical-align: middle; margin-right: 14px; }
.pinlist__panels [role="tabpanel"] > p { font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.6; }
.pinlist__panels [role="tabpanel"] > * + * { margin-top: 18px; }
.pinlist__panels h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.02em; }
.pinlist__steps { display: none; }
.is-pinned .pinlist__steps { display: flex; grid-column: 1 / -1; justify-content: center; gap: 8px; }
.pinlist__steps i { width: 28px; height: 3px; border-radius: 2px; background: var(--line-2); transition: background .35s var(--ease), width .35s var(--ease); }
.pinlist__steps i.is-on { background: var(--teal); width: 44px; }
@media (max-width: 1100px) {
  .pinlist { grid-template-columns: 1fr 1fr; }
  .pinlist__media { grid-row: span 2; }
}
@media (max-width: 767px) {
  .pinlist { grid-template-columns: 1fr; gap: 22px; }
  .pinlist__media { grid-row: auto; aspect-ratio: 16 / 10; }
  .pinlist__list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 2px var(--gut); }
  .pinlist__list::-webkit-scrollbar { display: none; }
  .pinlist__list [role="tab"] { flex: none; font-size: 15px; letter-spacing: 0; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); }
  .pinlist__list [role="tab"][aria-selected="true"] { transform: none; background: var(--teal); border-color: var(--teal); color: #061011; }
  .pinlist__list [role="tab"][aria-selected="true"]::before { display: none; }
}

/* ---------- 6. tab panels with a large image (.utabs__panel--media) ---------- */
.utabs__panel--media { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4.5vw, 64px); align-items: center; }
.utabs__panel--media[hidden] { display: none; }
.utabs__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: #121516; border: 1px solid var(--line-2); box-shadow: 0 30px 70px -32px rgba(0,0,0,.75); }
.utabs__media > img, .utabs__media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.utabs__panel--media:not([hidden]) .utabs__media > img { animation: tabImg 1s var(--ease); }
@keyframes tabImg { from { transform: scale(1.05); opacity: .4; } }
@media (max-width: 960px) {
  .utabs__panel--media { grid-template-columns: 1fr; }
  .utabs__media { order: -1; aspect-ratio: 16 / 10; }
}

/* ---------- 7. icon + label marquee ([data-imarquee]) ---------- */
.imarquee { position: relative; overflow: hidden; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.imarquee__track { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.imarquee__track > li { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 132px; min-height: 104px; padding: 16px 10px; border-radius: var(--r-s); background: var(--card); border: 1px solid var(--line-2); text-align: center; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); line-height: 1.3; transition: border-color .3s, color .3s; }
.imarquee__track > li i { font-size: 30px; color: var(--teal-l); }
.imarquee__track > li:hover { border-color: rgba(60,195,197,.5); color: var(--ink); }
.imarquee.is-running .imarquee__track { flex-wrap: nowrap; justify-content: flex-start; width: max-content; padding-right: 12px; animation: imq var(--dur, 40s) linear infinite; }
.imarquee--rev.is-running .imarquee__track { animation-direction: reverse; }
.imarquee.is-running:hover .imarquee__track, .imarquee.is-running:focus-within .imarquee__track { animation-play-state: paused; }
.imarquee:not(.is-running) { -webkit-mask-image: none; mask-image: none; }
@keyframes imq { to { transform: translateX(-50%); } }
.imarquee + .imarquee { margin-top: 12px; }
@media (max-width: 767px) { .imarquee__track > li { width: 112px; min-height: 92px; } .imarquee__track > li i { font-size: 26px; } }
/* phones, static strip (reduced motion / no JS): one swipeable row instead of many wrapped rows */
@media (max-width: 767px) {
  .imarquee:not(.is-running) { overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding-left: var(--gut); padding-right: var(--gut); }
  .imarquee:not(.is-running)::-webkit-scrollbar { display: none; }
  .imarquee:not(.is-running) .imarquee__track { flex-wrap: nowrap; justify-content: flex-start; width: max-content; }
}

/* ---------- 8. photo cards (.pcard, .pcard--bg) ---------- */
.pcard { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--card); color: inherit; text-decoration: none; transition: border-color .3s, transform .4s var(--ease); }
.pcard__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #121516; }
.pcard__img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: transform 1s var(--ease); }
.pcard__body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.pcard__body h3 { font-size: var(--fs-h4); line-height: 1.3; font-weight: 700; }
.pcard__body p { color: var(--ink-2); font-size: var(--fs-body); margin-top: 10px; }
.pcard__body p.card__kicker { margin: 0 0 8px; font-size: 13px; color: var(--gold-l); }
.pcard__body .card__more { margin-top: auto; padding-top: 20px; }
.pcard:hover > .pcard__img > img, .pcard:hover > img { transform: scale(1.06); }
a.pcard:hover { border-color: rgba(60,195,197,.55); transform: translateY(-4px); }
a.pcard:hover .card__more i { transform: translateX(3px); }
.pcard--bg { justify-content: flex-end; min-height: clamp(340px, 30vw, 440px); background: #0d1112; }
.pcard--bg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); transition: transform 1s var(--ease); }
.pcard--bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6,12,13,.15) 0%, rgba(6,12,13,.55) 45%, rgba(6,14,16,.94) 100%); }
.pcard--bg > .pcard__body { position: relative; z-index: 2; flex: 0 0 auto; }
.pcard--bg .pcard__body p { color: rgba(245,245,244,.84); }
.pcard__ico { position: absolute; top: 18px; left: 18px; z-index: 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; color: var(--teal-l); background: rgba(8,14,15,.6); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ---------- visual round: reduced motion = static ---------- */
@media (prefers-reduced-motion: reduce) {
  .phero__bg { animation: none; }
  .phero__bg > video { display: none; }
  .phero__cue::after { animation: none; }
  .imarquee__track { animation: none !important; }
  .pinlist__img, .collage__item > img, .pcard__img > img, .pcard--bg > img { transition: none; }
  .utabs__panel--media:not([hidden]) .utabs__media > img { animation: none; }
}

/* =====================================================================
   TEAL GRADIENT LAYER (user request: "teal + black like the contact modal",
   applied site-wide). Replaces the flat black / teal-black bands with the
   modal's recipe: a soft logo-teal glow in one corner over a charcoal to
   black gradient, alternating corners down the page so the whole site reads
   as one continuous teal and black flow. Cards take the modal panel look.
   Delete this block to return to the flat bands above.
   ===================================================================== */
:root {
  --glow-a: rgba(20,154,157,.14);   /* logo teal #149A9D */
  --glow-b: rgba(7,94,99,.34);      /* logo deep teal #075E63 */
  --grad-panel: radial-gradient(120% 80% at 100% 0%, rgba(20,154,157,.16), transparent 55%), linear-gradient(180deg, #121718, #0c1011);
}
body { background: linear-gradient(180deg, #0c1011 0%, #0a0e0f 100%) fixed; }
/* sections: odd = glow top-right, even = glow bottom-left (never flat black) */
main > section.sec:not(.cta),
main > .sec:not(.cta) {
  background:
    radial-gradient(70% 60% at 100% 0%, var(--glow-a), transparent 60%),
    radial-gradient(60% 55% at 0% 100%, rgba(7,94,99,.18), transparent 65%),
    linear-gradient(180deg, #111617 0%, #0b0f10 100%);
}
main > section.sec:nth-of-type(even):not(.cta),
main > .sec:nth-of-type(even):not(.cta) {
  background:
    radial-gradient(70% 60% at 0% 100%, var(--glow-b), transparent 62%),
    radial-gradient(50% 45% at 100% 0%, rgba(20,154,157,.08), transparent 60%),
    linear-gradient(180deg, #0b0f10 0%, #0f1415 100%);
}
/* sections that are not .sec (home services rise, numbers band, etc.) */
.services, .nums, .ind, .work { background-color: transparent; }
.nums { background: radial-gradient(60% 120% at 50% 50%, rgba(7,94,99,.30), transparent 70%), #0a0f10; }
/* cards and panels: the modal panel look */
.card:not(.card--pastel):not(.card--sand):not(.card--stone):not(.card--grey),
.tgroup, .why__card, .faq details, .form-panel, .mini, .stackc__card {
  background: var(--grad-panel);
  border-color: rgba(60,195,197,.22);
}
.card:not(.card--pastel):not(.card--sand):not(.card--stone):not(.card--grey):hover,
.tgroup:hover, .why__card:hover { border-color: rgba(60,195,197,.42); }
/* header picks up the same tint */
.hdr { background: rgba(10,15,16,.80); border-bottom-color: rgba(60,195,197,.14); }
/* section background layers that painted flat black under the teal gradient */
.work__bg { background: radial-gradient(60% 50% at 15% 10%, rgba(20,154,157,.16), transparent 70%), radial-gradient(50% 50% at 90% 70%, rgba(7,94,99,.22), transparent 70%) !important; }
.services { background: radial-gradient(60% 50% at 100% 0%, rgba(20,154,157,.14), transparent 60%), radial-gradient(55% 50% at 0% 100%, rgba(7,94,99,.26), transparent 65%), linear-gradient(180deg, #111617, #0b0f10); }
.svc__card { background: linear-gradient(180deg, rgba(18,23,24,.92), rgba(12,16,17,.92)); }
.svc__card:hover { background: radial-gradient(120% 80% at 100% 0%, rgba(20,154,157,.18), transparent 55%), linear-gradient(180deg, #121718, #0c1011); }
/* pinned sections get wrapped in a GSAP .pin-spacer, so "main > section" no longer matches them */
.pin-spacer > section.sec, section.ind.sec {
  background:
    radial-gradient(70% 60% at 0% 100%, rgba(7,94,99,.34), transparent 62%),
    radial-gradient(50% 45% at 100% 0%, rgba(20,154,157,.10), transparent 60%),
    linear-gradient(180deg, #0b0f10 0%, #0f1415 100%);
}
section:has([data-pinlist]), .pin-spacer > section {
  background:
    radial-gradient(70% 60% at 0% 100%, rgba(7,94,99,.34), transparent 62%),
    radial-gradient(55% 50% at 100% 0%, rgba(20,154,157,.14), transparent 60%),
    linear-gradient(180deg, #0b0f10 0%, #0f1415 100%);
}
[data-pinlist], .pin-spacer:has([data-pinlist]) > [data-pinlist] { background: transparent !important; }
section .pin-spacer { background: none !important; }
/* industries (home) and pinned lists (service pages): stronger two-corner glow so the pinned view never reads as flat black */
section.ind.sec, section:has([data-pinlist]), .pin-spacer > section.ind {
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(20,154,157,.22), transparent 62%),
    radial-gradient(65% 70% at 0% 100%, rgba(7,94,99,.42), transparent 65%),
    radial-gradient(40% 40% at 55% 55%, rgba(20,154,157,.06), transparent 70%),
    linear-gradient(180deg, #0d1213 0%, #0f1516 100%);
}