/* ============================================================
   CONCEPT C — V3 · VISUAL-FIRST
   Same brand, same Concept C DNA — hairlines, monospace index
   labels, precise alignment, restraint — but the presentation is
   rebuilt around imagery, composition and demonstration rather
   than around tables and lists.

   Inherits every colour, type, radius, shadow and motion value
   from shared/brand.css unchanged. Nothing here is a new brand
   decision.
   ============================================================ */

:root {
  --ln: 1px solid var(--ss-ink-200);
  --ln-soft: 1px solid var(--ss-ink-100);
  --ln-dark: 1px solid rgba(255,255,255,.16);
  --gut: 48px;
  --nav-height: 76px;
}

/* ============================================================
   TYPE — fewer sizes, more contrast between them
   ============================================================ */
.t-display {
  font-size: clamp(38px, 5.4vw, 76px); line-height: 1.02;
  letter-spacing: -0.035em; font-weight: 700;
}
.t-h2 {
  font-size: clamp(28px, 3.3vw, 46px); line-height: 1.08;
  letter-spacing: -0.028em; font-weight: 700;
}
.t-h3 { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.16; letter-spacing: -0.02em; font-weight: 700; }
.t-h4 { font-size: 17px; line-height: 1.26; letter-spacing: -0.012em; font-weight: 700; }
.t-lead { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.58; color: var(--fg-3); }
.t-body { font-size: 15.5px; line-height: 1.64; color: var(--fg-3); }
.t-sm { font-size: 13.5px; line-height: 1.58; color: var(--fg-3); }
.q { color: var(--ss-turquoise); }

.ix {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ss-ink-400); display: inline-block;
}
.ix--brand { color: var(--ss-turquoise); }
.on-dark .ix { color: rgba(255,255,255,.45); }
.on-dark .ix--brand { color: var(--ss-turquoise-400); }
.on-dark .t-lead, .on-dark .t-body, .on-dark .t-sm { color: rgba(255,255,255,.74); }

.wrap { width: 100%; max-width: 1340px; margin: 0 auto; padding: 0 var(--gut); }
.wrap--narrow { max-width: 1080px; }

.sec { padding: clamp(72px, 8vw, 128px) 0; }
.sec--tight { padding: clamp(52px, 5vw, 76px) 0; }
.sec--surface { background: var(--bg-surface); }
.sec--navy { background: var(--ss-navy); color: rgba(255,255,255,.76); }
.sec--blue { background: var(--ss-blue-700); color: rgba(255,255,255,.78); }
.sec--rule { border-top: var(--ln); }

/* Section opener: one mono label, one headline, at most one line of support */
.open { max-width: 860px; margin-bottom: clamp(36px, 4vw, 60px); }
.open .ix { margin-bottom: 18px; }
.open h2 { margin-bottom: 18px; }
.open p { max-width: 62ch; }

/* ============================================================
   NAVIGATION — redesigned
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: var(--ln-soft);
  transition: box-shadow var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.nav[data-scrolled="true"] { border-bottom-color: var(--ss-ink-200); box-shadow: var(--shadow-1); }
.nav__in { height: var(--nav-height); display: flex; align-items: center; gap: 36px; }
.nav__logo { display: flex; align-items: center; }
.nav__logo img { height: 28px; }
.nav__links { display: flex; align-items: center; gap: 2px; margin-left: auto; }

.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--ss-navy);
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: none; border: 0; cursor: pointer; min-height: 42px;
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav__link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px;
  height: 1.5px; background: var(--ss-turquoise);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-standard);
}
.nav__link:hover::after, .nav__link[aria-expanded="true"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ss-turquoise-600); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__chev { transition: transform var(--dur-base) var(--ease-standard); }
.nav__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

/* The contact CTA is visually distinct — the only filled element in the bar */
.nav__cta {
  margin-left: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ss-navy); color: #fff;
  font-size: 14px; font-weight: 600;
  padding: 0 20px; height: 44px; border-radius: var(--radius-sm);
  transition: background var(--dur-base) var(--ease-standard);
}
.nav__cta:hover { background: var(--ss-turquoise); }
.nav__cta svg { transition: transform var(--dur-base) var(--ease-standard); }
.nav__cta:hover svg { transform: translate(2px, -2px); }

.nav__burger { display: none; }

/* ---- Services mega-menu ---- */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-bottom: var(--ln);
  box-shadow: 0 18px 40px rgba(0,35,53,.09);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              visibility var(--dur-base);
}
.nav[data-mega="true"] .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega__in { display: grid; grid-template-columns: repeat(3, 1fr) 0.9fr; gap: 1px; background: var(--ss-ink-100); }
.mega__card {
  background: #fff; padding: 30px 30px 32px; display: block;
  transition: background var(--dur-base) var(--ease-standard);
}
.mega__card:hover { background: var(--bg-surface); }
.mega__card .ix { margin-bottom: 16px; }
.mega__card h3 { font-size: 17px; margin-bottom: 9px; letter-spacing: -0.015em; }
.mega__card p { font-size: 13.5px; line-height: 1.55; color: var(--fg-3); margin-bottom: 18px; }
.mega__go { font-size: 13px; font-weight: 600; color: var(--ss-blue); display: inline-flex; gap: 7px; align-items: center; }
.mega__card:hover .mega__go .arr { transform: translateX(3px); }
.mega__rule { height: 2px; background: var(--ss-ink-100); margin-bottom: 18px; position: relative; }
.mega__rule::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 26px;
  background: var(--ss-turquoise);
  transition: width var(--dur-slow) var(--ease-standard);
}
.mega__card:hover .mega__rule::after { width: 100%; }
.mega__aside { background: var(--ss-navy); padding: 30px; color: rgba(255,255,255,.7); }
.mega__aside .ix { color: var(--ss-turquoise-400); margin-bottom: 14px; }
.mega__aside h3 { color: #fff; font-size: 16px; margin-bottom: 10px; }
.mega__aside p { font-size: 13px; line-height: 1.6; margin-bottom: 18px; }
.mega__aside a { font-size: 13px; font-weight: 600; color: var(--ss-turquoise-400); display: inline-flex; gap: 7px; }

/* ---- Mobile navigation — designed, not stacked ---- */
.mnav {
  position: fixed; inset: 0; z-index: 200; background: #fff;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-standard), visibility var(--dur-base);
}
.mnav[data-open="true"] { opacity: 1; visibility: visible; }
.mnav__top {
  height: var(--nav-height); display: flex; align-items: center;
  justify-content: space-between; border-bottom: var(--ln-soft); flex: none;
}
.mnav__x {
  width: 44px; height: 44px; border: var(--ln); background: #fff;
  border-radius: var(--radius-sm); display: grid; place-items: center;
}
.mnav__body { flex: 1; overflow-y: auto; padding: 8px 0 40px; }
.mnav__primary { border-bottom: var(--ln-soft); padding: 14px 0 18px; }
.mnav__item {
  display: flex; align-items: baseline; gap: 16px; padding: 13px 0;
  font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -0.028em;
  color: var(--ss-navy);
  opacity: 0; transform: translateY(8px);
}
.mnav[data-open="true"] .mnav__item { animation: mnavIn 420ms var(--ease-standard) forwards; }
.mnav__item:nth-child(1) { animation-delay: 40ms; }
.mnav__item:nth-child(2) { animation-delay: 80ms; }
.mnav__item:nth-child(3) { animation-delay: 120ms; }
.mnav__item:nth-child(4) { animation-delay: 160ms; }
.mnav__item:nth-child(5) { animation-delay: 200ms; }
.mnav__item .ix { font-size: 10px; color: var(--ss-ink-300); flex: none; }
@keyframes mnavIn { to { opacity: 1; transform: none; } }

.mnav__sub { padding: 20px 0 8px; }
.mnav__sub > .ix { display: block; margin-bottom: 8px; }
.mnav__slink {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 0; border-top: var(--ln-soft);
  font-size: 16px; font-weight: 600; color: var(--fg-2);
}
.mnav__slink span.d { display: block; font-size: 12.5px; font-weight: 400; color: var(--fg-3); margin-top: 3px; }
.mnav__foot { padding: 24px 0 0; border-top: var(--ln); }
.mnav__foot .btn { width: 100%; }
.mnav__meta { display: flex; justify-content: space-between; margin-top: 20px; }

/* ============================================================
   DEVICE FRAMES — how real work is presented
   ============================================================ */
.browser {
  border-radius: 8px; overflow: hidden; background: #fff;
  border: var(--ln); box-shadow: 0 24px 60px rgba(0,35,53,.14), 0 4px 12px rgba(0,35,53,.06);
}
.browser__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px; background: var(--ss-ink-50); border-bottom: var(--ln-soft);
}
.browser__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ss-ink-200); flex: none; }
.browser__url {
  margin-left: 10px; flex: 1;
  font-family: var(--font-mono); font-size: 11px; color: var(--ss-ink-500);
  background: #fff; border: var(--ln-soft); border-radius: 20px;
  padding: 4px 12px; text-align: center; max-width: 320px;
}
.browser img { width: 100%; height: auto; display: block; }

.phone {
  border-radius: 26px; padding: 7px; background: var(--ss-navy);
  box-shadow: 0 24px 50px rgba(0,35,53,.22), 0 4px 10px rgba(0,35,53,.1);
}
.phone__screen { border-radius: 20px; overflow: hidden; background: #fff; position: relative; }
.phone__notch {
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 32%; height: 5px; border-radius: 3px; background: rgba(0,0,0,.28); z-index: 2;
}
.phone img { width: 100%; height: auto; display: block; }

/* ============================================================
   HERO — visual-first
   ============================================================ */
.hero { padding: clamp(48px, 6vw, 86px) 0 0; overflow: hidden; }
.hero__grid {
  display: grid; grid-template-columns: 1.02fr 1fr;
  gap: clamp(32px, 5vw, 76px); align-items: center;
}
.hero h1 { margin-bottom: 22px; max-width: 13ch; }
.hero__lead { max-width: 44ch; margin-bottom: 32px; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* The composition: real product work, layered */
.comp { position: relative; padding: 18px 0 56px 0; }
.comp__browser { position: relative; z-index: 1; }
.comp__phone { position: absolute; left: 0; bottom: 0; width: 31%; z-index: 2; }
.comp__chip {
  position: absolute; right: -14px; bottom: 6px; z-index: 3;
  background: #fff; border: var(--ln); border-radius: var(--radius-md);
  box-shadow: var(--shadow-3); padding: 13px 16px; max-width: 232px;
}
.comp__chip .ix { display: block; margin-bottom: 7px; font-size: 9.5px; }
.comp__chip b { display: block; font-size: 13px; color: var(--ss-navy); margin-bottom: 3px; }
.comp__chip span.m { font-size: 11.5px; color: var(--fg-3); line-height: 1.45; display: block; }
.comp__tick {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ss-turquoise-600);
  background: var(--ss-turquoise-100); padding: 3px 7px; border-radius: 3px; margin-top: 8px;
}

/* Service strip under the hero */
.strip { border-top: var(--ln); margin-top: clamp(40px, 5vw, 72px); }
.strip__in { display: grid; grid-template-columns: repeat(3, 1fr); }
.strip__i { padding: 26px 32px 28px 0; border-right: var(--ln-soft); }
.strip__i:last-child { border-right: 0; }
.strip__i .ix { display: block; margin-bottom: 10px; }
.strip__i b { display: block; font-size: 16px; color: var(--ss-navy); letter-spacing: -0.015em; margin-bottom: 6px; }
.strip__i span { font-size: 13.5px; line-height: 1.5; color: var(--fg-3); }

/* ============================================================
   PILLARS — alternating immersive layouts, not three cards
   ============================================================ */
.pil { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.pil + .pil { margin-top: clamp(64px, 7vw, 116px); }
.pil--flip .pil__media { order: -1; }
.pil__txt .ix { margin-bottom: 18px; }
.pil__txt h3 { margin-bottom: 16px; max-width: 16ch; }
.pil__txt p { max-width: 50ch; margin-bottom: 26px; }
.pil__link {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 600; color: var(--ss-navy);
  padding-bottom: 6px; border-bottom: 2px solid var(--ss-turquoise);
}
.pil__link:hover { color: var(--ss-turquoise-600); }
.pil__media { position: relative; }

/* Placeholder treatment — honest, never stock */
.ph {
  border: 2px dashed var(--ss-ink-200); border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(135deg, var(--ss-ink-50) 0 12px, #fff 12px 24px);
  display: grid; place-items: center; text-align: center;
  padding: 40px 32px; min-height: 300px;
}
.ph__in { max-width: 44ch; }
.ph .ix { display: block; margin-bottom: 14px; color: var(--ss-ink-400); }
.ph b { display: block; font-size: 17px; color: var(--ss-ink-700); margin-bottom: 10px; letter-spacing: -0.015em; }
.ph p { font-size: 13.5px; line-height: 1.6; color: var(--ss-ink-500); }
.ph__tag {
  display: inline-block; margin-top: 16px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ss-ink-500); border: 1px dashed var(--ss-ink-300);
  padding: 4px 8px; border-radius: 3px;
}

/* Format-matrix figure — the adaptation idea, drawn */
.fmx { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; justify-content: center; }
.fmx i {
  display: block; background: var(--ss-blue-100);
  border: 1px solid var(--ss-blue); border-radius: 2px;
  position: relative;
}
.fmx i::after {
  content: attr(data-s); position: absolute; left: 3px; bottom: 2px;
  font-family: var(--font-mono); font-size: 7.5px; color: var(--ss-blue); letter-spacing: .02em;
}
.fmx i:nth-child(3n) { background: var(--ss-turquoise-100); border-color: var(--ss-turquoise); }
.fmx i:nth-child(3n)::after { color: var(--ss-turquoise-600); }

/* ============================================================
   OPERATIONS DEMONSTRATION — the control argument, shown
   ============================================================ */
.ops { border: var(--ln-dark); border-radius: var(--radius-md); overflow: hidden; background: rgba(255,255,255,.03); }
.ops__rail {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-bottom: var(--ln-dark);
}
.ops__st {
  position: relative; background: none; border: 0; cursor: pointer;
  padding: 22px 20px 20px; text-align: left; color: rgba(255,255,255,.6);
  border-right: var(--ln-dark);
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base);
}
.ops__st:last-child { border-right: 0; }
.ops__st:hover { background: rgba(255,255,255,.05); color: rgba(255,255,255,.85); }
.ops__st[aria-selected="true"] { background: rgba(255,255,255,.08); color: #fff; }
.ops__st::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: rgba(255,255,255,.14);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-standard), background var(--dur-base);
}
.ops__st[data-done="true"]::before { transform: scaleX(1); background: var(--ss-turquoise); }
.ops__st[data-gate="true"][data-done="true"]::before { background: var(--ss-turquoise-400); }
.ops__st .n { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; opacity: .7; }
.ops__st .l { display: block; margin-top: 9px; font-size: 14.5px; font-weight: 700; letter-spacing: -0.012em; line-height: 1.22; }
.ops__st .g {
  display: inline-block; margin-top: 10px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.72);
}
.ops__st[data-gate="true"] .g { background: var(--ss-turquoise); color: var(--ss-navy); }

.ops__panel { display: none; padding: clamp(26px, 3vw, 40px); }
.ops__panel[data-active="true"] { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 3.5vw, 56px); }
.ops__panel h3 { color: #fff; font-size: 22px; letter-spacing: -0.02em; margin-bottom: 14px; }
.ops__panel > div > p { font-size: 15px; line-height: 1.62; color: rgba(255,255,255,.76); max-width: 46ch; }
.ops__checks { margin-top: 24px; }
.ops__checks .ix { display: block; margin-bottom: 12px; }
.ops__checks li {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 10px 0; border-top: var(--ln-dark);
  font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.8);
}
.ops__checks li svg { flex: none; margin-top: 2px; }
.ops__note {
  margin-top: 22px; padding: 14px 16px;
  border-left: 2px solid var(--ss-turquoise);
  background: rgba(0,169,157,.08);
  font-size: 13px; line-height: 1.56; color: rgba(255,255,255,.82);
}

/* The right-hand visual: an abstracted record, not a fake dashboard */
.rec { border: var(--ln-dark); border-radius: var(--radius-sm); background: rgba(0,0,0,.18); }
.rec__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: var(--ln-dark);
}
.rec__hd .ix { color: rgba(255,255,255,.5); }
.rec__row {
  display: grid; grid-template-columns: 88px 1fr auto; gap: 14px; align-items: center;
  padding: 13px 16px; border-bottom: var(--ln-dark);
  font-size: 12.5px; color: rgba(255,255,255,.78);
}
.rec__row:last-child { border-bottom: 0; }
.rec__row .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.44); }
.rec__row .v { color: #fff; }
.rec__pill {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 3px; white-space: nowrap;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.75);
}
.rec__pill--ok { background: rgba(0,169,157,.18); color: var(--ss-turquoise-400); }
.rec__pill--hold { background: rgba(255,255,255,.14); color: #fff; }
.rec__bar { height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.rec__bar i { display: block; height: 100%; background: var(--ss-turquoise); }

/* ============================================================
   WORK — large showcases
   ============================================================ */
.show { position: relative; }
.show + .show { margin-top: clamp(72px, 8vw, 132px); }
.show__hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 30px; flex-wrap: wrap; }
.show__hd h3 { max-width: 22ch; }
.show__meta { display: flex; gap: 8px; flex-wrap: wrap; }
.tag {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--fg-3); border: var(--ln); padding: 5px 9px; border-radius: 3px;
}
.on-dark .tag, .sec--navy .tag { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.22); }

.show__stage { position: relative; display: grid; grid-template-columns: 1fr 272px; gap: clamp(20px, 3vw, 44px); align-items: end; }
.show__stage--solo { grid-template-columns: 1fr; }
.show__body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 56px); margin-top: 34px; padding-top: 30px; border-top: var(--ln); }
.sec--navy .show__body { border-top-color: rgba(255,255,255,.16); }
.show__body p { max-width: 52ch; }
.show__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px 0; align-self: start; }
.show__facts--4 { grid-template-columns: repeat(4, 1fr); }
.show__facts > div { padding: 12px 16px 14px 0; border-bottom: var(--ln-soft); }
.sec--navy .show__facts > div { border-bottom-color: rgba(255,255,255,.14); }
.show__facts .ix { display: block; margin-bottom: 5px; font-size: 10px; }
.show__facts b { font-size: 15px; color: var(--ss-navy); letter-spacing: -0.01em; }
.sec--navy .show__facts b { color: #fff; }

/* Two-brand split — one platform, two identities, not merged */
.twin { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ss-ink-200); border: var(--ln); border-radius: var(--radius-md); overflow: hidden; }
.sec--navy .twin, .sec--surface .twin { background: var(--ss-ink-200); }
.twin__c { background: #fff; padding: 0 0 26px; }
.twin__hd { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: var(--ln-soft); }
/* Both brands are shown in an identical frame so the pair reads as one
   platform, while the art direction inside stays entirely their own. */
.twin__shot { background: var(--ss-ink-50); aspect-ratio: 10 / 7; overflow: hidden; }
.twin__shot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.twin__b { padding: 22px 22px 0; }
.twin__b h4 { margin-bottom: 9px; }
.twin__b p { font-size: 14px; line-height: 1.6; color: var(--fg-3); }
.twin__shared {
  margin-top: 22px; padding: 18px 22px;
  background: var(--ss-navy); color: rgba(255,255,255,.78);
  border-radius: var(--radius-md);
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.twin__shared .ix { color: var(--ss-turquoise-400); flex: none; }
.twin__shared p { font-size: 13.5px; line-height: 1.55; margin: 0; }

/* ============================================================
   WHY — four differentiators, visually led
   ============================================================ */
.why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--ss-ink-200); border-top: var(--ln); border-left: var(--ln); }
.why__c { background: #fff; padding: clamp(26px, 3vw, 40px); }
.why__c .ix { display: block; margin-bottom: 20px; }
.why__c h3 { font-size: 21px; letter-spacing: -0.02em; margin-bottom: 12px; max-width: 20ch; }
.why__c p { font-size: 14.5px; line-height: 1.62; color: var(--fg-3); max-width: 46ch; }
.why__fig { margin-top: 24px; }

/* Compact accountability split — who does what, drawn */
.split { border-top: var(--ln-soft); }
.split__r {
  display: grid; grid-template-columns: 104px 1fr auto; gap: 14px; align-items: center;
  padding: 11px 0; border-bottom: var(--ln-soft);
}
.split__r:last-child { border-bottom: 0; }
.split__r .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ss-ink-400); }
.split__r .v { font-size: 13.5px; color: var(--fg-2); }
.split__r .b {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 3px; white-space: nowrap;
  background: var(--ss-ink-100); color: var(--ss-ink-700);
}
.split__r .b--auto { background: var(--ss-turquoise-100); color: var(--ss-turquoise-600); }

/* Delivery overlap — small, informative, brand-native */
.ov { margin-top: 6px; }
.ov__r { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; padding: 6px 0; }
.ov__l { font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ss-ink-400); }
.ov__t { position: relative; height: 18px; background: var(--ss-ink-50); border: var(--ln-soft); border-radius: 2px; }
.ov__s { position: absolute; top: 0; bottom: 0; background: var(--ss-blue-100); border-left: 1px solid var(--ss-blue); border-right: 1px solid var(--ss-blue); }
.ov__s--hit { background: var(--ss-turquoise); border-color: var(--ss-turquoise); }

/* ============================================================
   CLOSE — confident final section
   ============================================================ */
.close { padding: clamp(80px, 9vw, 140px) 0; }
.close__in { max-width: 780px; }
.close h2 { margin-bottom: 20px; }
.close p { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.58; margin-bottom: 36px; max-width: 48ch; }
.close__cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.close__alt { font-size: 14px; color: rgba(255,255,255,.62); }
.close__alt a { color: var(--ss-turquoise-400); font-weight: 600; }

/* ============================================================
   FOOTER
   ============================================================ */
.ft { background: var(--ss-navy-800); color: rgba(255,255,255,.6); padding: 64px 0 30px; }
.ft__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 44px; padding-bottom: 44px; border-bottom: var(--ln-dark); }
.ft__logo { height: 28px; margin-bottom: 16px; }
.ft__about { font-size: 13.5px; line-height: 1.7; max-width: 38ch; }
.ft h4 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 15px; font-weight: 400; }
.ft a { font-size: 14px; color: rgba(255,255,255,.72); display: block; padding: 6px 0; }
.ft a:hover { color: var(--ss-turquoise-400); }
.ft__btm { margin-top: 26px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255,255,255,.44); }

/* ============================================================
   PREVIEW CHROME — deliberately separate from the site's own
   navigation, and hideable so mockups can be seen clean.
   ============================================================ */
.pv {
  position: fixed; left: 18px; bottom: 18px; z-index: 300;
  font-family: var(--font-sans);
}
.pv__btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ss-navy); color: #fff; border: 0;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  padding: 0 16px; height: 40px; border-radius: 22px;
  box-shadow: 0 8px 24px rgba(0,35,53,.3); cursor: pointer;
}
.pv__btn i { width: 7px; height: 7px; border-radius: 50%; background: var(--ss-turquoise); display: block; }
.pv__menu {
  display: none; position: absolute; left: 0; bottom: 50px;
  width: 268px; background: var(--ss-navy); border-radius: var(--radius-md);
  box-shadow: 0 16px 44px rgba(0,35,53,.36); padding: 8px; overflow: hidden;
}
.pv[data-open="true"] .pv__menu { display: block; }
.pv__menu strong {
  display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.44); padding: 10px 12px 8px; font-weight: 400;
}
.pv__menu a {
  display: block; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 13px; color: rgba(255,255,255,.82);
}
.pv__menu a:hover { background: rgba(255,255,255,.1); color: #fff; }
.pv__menu a[aria-current="true"] { background: var(--ss-turquoise); color: #fff; }
.pv__menu hr { border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 8px 0; }
body[data-pv="off"] .pv { display: none; }

/* ============================================================
   REVEAL — subtle, purposeful, and fail-safe.
   The hidden state is applied only once JS has confirmed it is
   running, so a script failure or a no-JS client still sees
   every section. Nothing load-bearing depends on the animation.
   ============================================================ */
.js .rv { opacity: 0; transform: translateY(14px); }
.js .rv[data-in="true"] {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--ease-standard), transform 620ms var(--ease-standard);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  :root { --gut: 36px; }
  .mega__in { grid-template-columns: repeat(3, 1fr); }
  .mega__aside { display: none; }
}
@media (max-width: 1000px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  /* The mega-menu is desktop-only. Left in the layout it keeps a min-content
     width wider than the viewport, which inflates the document and stretches
     every fixed-position element — including the mobile menu itself. */
  .mega { display: none; }
  .nav__burger {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 44px; height: 44px;
    border: var(--ln); border-radius: var(--radius-sm); background: #fff;
  }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { max-width: 15ch; }
  .comp { padding: 10px 0 48px 0; }
  .pil, .pil--flip .pil__media { grid-template-columns: 1fr; order: 0; }
  .pil__media { order: -1 !important; }
  .show__stage { grid-template-columns: 1fr; }
  .show__body { grid-template-columns: 1fr; gap: 26px; }
  .ops__panel[data-active="true"] { grid-template-columns: 1fr; }
  .why { grid-template-columns: 1fr; }
  .ft__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ft__grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --gut: 22px; --nav-height: 64px; }
  .strip__in { grid-template-columns: 1fr; }
  .strip__i { border-right: 0; border-bottom: var(--ln-soft); padding: 20px 0 22px; }
  .strip__i:last-child { border-bottom: 0; }
  .twin { grid-template-columns: 1fr; }
  .show__facts, .show__facts--4 { grid-template-columns: 1fr 1fr; }
  .comp { padding: 0 0 42px 0; }
  .comp__phone { width: 36%; left: -6px; }
  .comp__chip { right: 0; bottom: -6px; max-width: 200px; padding: 11px 13px; }
  .hero__cta .btn { width: 100%; }
  .ft__grid { grid-template-columns: 1fr; }
  .pv { left: 12px; bottom: 12px; }

  /* The stage rail becomes a scrollable track, keeping the sequence legible */
  .ops__rail {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .ops__st { flex: 0 0 72%; scroll-snap-align: start; }
}
@media (max-width: 480px) {
  .mnav__item { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .rv[data-in="true"] { opacity: 1; transform: none; transition: none; }
  .mnav__item { opacity: 1; transform: none; animation: none; }
  .mega { transition: opacity 1ms; }
}

/* ============================================================
   V3.1 — PROVISIONAL ATTRIBUTION FLAG
   Used where a project's relationship to Seastream is not yet
   confirmed. Deliberately conspicuous: this must be impossible
   to publish by accident.
   ============================================================ */
.flag {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px dashed var(--ss-danger); border-radius: var(--radius-md);
  padding: 16px 18px; margin: 0 0 32px;
  background: rgba(200,68,58,.04);
}
.flag__k {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ss-danger);
  border: 1px solid var(--ss-danger); border-radius: 3px;
  padding: 3px 7px; flex: none; margin-top: 1px;
}
.flag p { font-size: 13px; line-height: 1.6; color: var(--fg-2); margin: 0; max-width: 92ch; }
.sec--navy .flag { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.4); }
.sec--navy .flag p { color: rgba(255,255,255,.82); }
.sec--navy .flag__k { color: #fff; border-color: rgba(255,255,255,.55); }

/* Status chips using Plireo's own language — never "operational" */
.st {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 3px; white-space: nowrap;
}
.st::before { content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none; }
.st--dev { background: var(--ss-blue-100); color: var(--ss-blue); }
.st--dev::before { background: var(--ss-blue); }
.st--plan { background: #fff; color: var(--ss-ink-500); border: 1px dashed var(--ss-ink-300); }
.st--plan::before { background: var(--ss-ink-300); }
.st--test { background: var(--ss-ink-100); color: var(--ss-ink-700); }
.st--test::before { background: var(--ss-ink-500); }
.sec--navy .st--dev { background: rgba(0,169,157,.16); color: var(--ss-turquoise-400); }
.sec--navy .st--dev::before { background: var(--ss-turquoise-400); }
.sec--navy .st--plan { background: transparent; color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.3); }
.sec--navy .st--test { background: rgba(255,255,255,.1); color: rgba(255,255,255,.78); }
.sec--navy .st--test::before { background: rgba(255,255,255,.6); }

/* Capability rows for the Plireo showcase */
.caprow { border-top: var(--ln); }
.caprow__r {
  display: grid; grid-template-columns: 1fr 1.5fr auto; gap: 24px; align-items: baseline;
  padding: 15px 0; border-bottom: var(--ln-soft);
}
.sec--navy .caprow { border-top-color: rgba(255,255,255,.18); }
.sec--navy .caprow__r { border-bottom-color: rgba(255,255,255,.12); }
.caprow__r b { font-size: 15px; color: var(--fg-1); letter-spacing: -0.01em; }
.sec--navy .caprow__r b { color: #fff; }
.caprow__r span.d { font-size: 13.5px; line-height: 1.55; color: var(--fg-3); }
.sec--navy .caprow__r span.d { color: rgba(255,255,255,.7); }
@media (max-width: 760px) {
  .caprow__r { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  .flag { flex-direction: column; gap: 10px; }
}

/* ============================================================
   V3.2 — ENTERPRISE POSITIONING
   Components for showing real production work at scale.
   No new brand values; all tokens inherited.
   ============================================================ */

/* Mosaic — multi-format adaptation, shown rather than described */
.mos { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ss-ink-200);
       border: var(--ln); border-radius: 8px; overflow: hidden;
       box-shadow: 0 24px 60px rgba(0,35,53,.14), 0 4px 12px rgba(0,35,53,.06); }
.mos__c { position: relative; overflow: hidden; background: var(--ss-ink-50); aspect-ratio: 4 / 3; }
.mos__c img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mos__c span.l {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(0,35,53,.78); color: #fff; padding: 4px 8px; border-radius: 3px;
  backdrop-filter: blur(4px);
}
.mos--tall .mos__c:first-child { grid-row: span 2; aspect-ratio: 4 / 6.06; }

/* Production gallery — varied cells, hairline grid */
.gal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--ss-ink-200);
       border: var(--ln); }
.gal__i { position: relative; background: #fff; overflow: hidden; grid-column: span 2; aspect-ratio: 16 / 10; }
.gal__i--w { grid-column: span 3; }
.gal__i--f { grid-column: span 6; aspect-ratio: 24 / 7; }
.gal__i img { width: 100%; height: 100%; object-fit: cover; display: block;
              transition: transform var(--dur-slow) var(--ease-standard); }
.gal__i:hover img { transform: scale(1.02); }
.gal__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 26px 14px 12px;
  background: linear-gradient(to top, rgba(0,35,53,.82), rgba(0,35,53,0));
}
.gal__cap b, .gal__cap span {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; font-weight: 400;
}
.gal__cap b { color: var(--ss-turquoise-400); }

/* Scale figures — structural counts only, never performance */
.scale { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--ln); border-left: var(--ln); }
.scale > div { border-right: var(--ln); border-bottom: var(--ln); padding: 22px 24px 24px; }
.scale .ix { display: block; margin-bottom: 10px; }
.scale b { display: block; font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: -0.03em;
           color: var(--ss-navy); line-height: 1.05; }
.sec--navy .scale b { color: #fff; }
.scale span.s { display: block; font-size: 13px; line-height: 1.5; color: var(--fg-3); margin-top: 9px; }
.sec--navy .scale > div { border-color: rgba(255,255,255,.16); }
.sec--navy .scale span.s { color: rgba(255,255,255,.7); }

/* Discreet provenance note — not a banner */
.prov { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; }
.prov .ix { flex: none; padding-top: 1px; }
.prov p { font-size: 12.5px; line-height: 1.6; color: var(--fg-3); max-width: 88ch; margin: 0; }
.sec--navy .prov p { color: rgba(255,255,255,.62); }

/* Expertise page section anchors */
.xhd { display: grid; grid-template-columns: 160px 1fr; gap: 40px; align-items: start;
       padding-bottom: 26px; margin-bottom: clamp(30px,3.5vw,48px); border-bottom: var(--ln); }
.sec--navy .xhd { border-bottom-color: rgba(255,255,255,.18); }
.xhd h2 { margin-bottom: 14px; }
.xhd p { max-width: 58ch; }

@media (max-width: 1000px) {
  .gal { grid-template-columns: repeat(2, 1fr); }
  .gal__i, .gal__i--w { grid-column: span 1; }
  .gal__i--f { grid-column: span 2; aspect-ratio: 16 / 7; }
  .scale { grid-template-columns: repeat(2, 1fr); }
  .xhd { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 680px) {
  .gal { grid-template-columns: 1fr; }
  .gal__i, .gal__i--w, .gal__i--f { grid-column: span 1; aspect-ratio: 16 / 10; }
  .scale { grid-template-columns: 1fr; }
  .mos--tall .mos__c:first-child { grid-row: auto; aspect-ratio: 4 / 3; }
}

/* ============================================================
   V3.3 — CORRECTION PASS
   (1) spacing tokens so text never meets a divider
   (2) dark-section contrast raised to WCAG 2.2 AA
   (3) a simpler, commercial operations presentation
   No brand values changed.
   ============================================================ */

:root {
  --cell: 30px;          /* standard internal padding for a grid cell */
  --cell-lg: 40px;       /* generous cell, used in wide columns       */
  --cell-sm: 22px;       /* compact cell, used in dense records       */
}

/* ---- (1) SPACING · dividers always have air on both sides ---- */
.strip__i {
  padding: 30px var(--cell) 32px;
  border-right: var(--ln-soft);
}
.strip__i:first-child { padding-left: 0; }
.strip__i:last-child { padding-right: 0; border-right: 0; }

.scale > div { padding: var(--cell-sm) var(--cell) 26px; }
.ops__st { padding: 22px var(--cell-sm) 20px; }
.gov__c { padding: var(--cell) var(--cell) 28px; }
.why__c { padding: var(--cell-lg); }
.rec__row { padding: 13px var(--cell-sm); gap: 16px; }
.rec__hd { padding: 13px var(--cell-sm); }
.twin__hd, .twin__b { padding-left: var(--cell-sm); padding-right: var(--cell-sm); }
.mega__card { padding: 30px var(--cell) 32px; }
.caps__c { padding: var(--cell) var(--cell) 28px; }

/* The label column of a section header needs separation from the text */
.xhd { grid-template-columns: 180px 1fr; gap: 48px; }
.open { padding-right: var(--cell); }

@media (max-width: 760px) {
  .strip__i { padding: 24px 0 26px; border-right: 0; border-bottom: var(--ln-soft); }
  .strip__i:last-child { border-bottom: 0; }
  :root { --cell: 22px; --cell-lg: 24px; --cell-sm: 18px; }
}

/* ---- (2) CONTRAST on dark · measured against #002335 ----
   Previous values failed AA for small text:
     .on-dark .ix   .45 → 4.29:1    now .62 → 6.91:1
     .rec__row .k   .44 → 4.16:1    now .62 → 6.91:1
     .ft h4         .40 → 3.79:1    now .58 → 6.29:1
   Separators were effectively invisible at .16 (1.63:1); raised so the
   modular grid actually reads on dark.                                  */
.on-dark .ix,
.sec--navy .ix,
.sec--deep .ix { color: rgba(255,255,255,.62); letter-spacing: .09em; }
.on-dark .ix--brand,
.sec--navy .ix--brand,
.sec--deep .ix--brand { color: var(--ss-turquoise-400); }

.rec__row .k { color: rgba(255,255,255,.62); }
.rec__hd .ix { color: rgba(255,255,255,.62); }
.ft h4 { color: rgba(255,255,255,.58); letter-spacing: .09em; }

:root { --ln-dark: 1px solid rgba(255,255,255,.22); }
.sec--navy .xhd { border-bottom-color: rgba(255,255,255,.24); }
.on-dark .shead { border-bottom-color: rgba(255,255,255,.24); }
.sec--navy .scale > div { border-color: rgba(255,255,255,.22); }
.sec--navy .show__body,
.sec--navy .show__facts > div { border-color: rgba(255,255,255,.22); }
.sec--navy .prov p { color: rgba(255,255,255,.72); }
.close__alt { color: rgba(255,255,255,.74); }

/* Status pills: raise the surface so the chip itself is visible */
.rec__pill { background: rgba(255,255,255,.14); color: rgba(255,255,255,.88); }
.rec__pill--ok { background: rgba(0,169,157,.26); color: #6FD8CE; }
.rec__pill--hold { background: rgba(255,255,255,.2); color: #fff; }

/* ---- (3) OPERATIONS · a commercial presentation ---- */
.flow5 {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 2px solid rgba(255,255,255,.22);
  margin-bottom: clamp(40px, 4vw, 64px);
}
.flow5__s { position: relative; padding: 24px var(--cell-sm) 0 0; }
.flow5__s::before {
  content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px;
  background: var(--ss-turquoise);
  transform: scaleX(0); transform-origin: left;
  transition: transform 700ms var(--ease-standard);
}
.js .rv[data-in="true"] .flow5__s::before { transform: scaleX(1); }
.flow5__s:nth-child(2)::before { transition-delay: 120ms; }
.flow5__s:nth-child(3)::before { transition-delay: 240ms; }
.flow5__s:nth-child(4)::before { transition-delay: 360ms; }
.flow5__s:nth-child(5)::before { transition-delay: 480ms; }
.flow5__s--gate::before { background: var(--ss-turquoise-400); }
.flow5__n {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em;
  color: rgba(255,255,255,.62); display: block; margin-bottom: 10px;
}
.flow5__s h3 { color: #fff; font-size: clamp(16px, 1.4vw, 19px); letter-spacing: -0.015em; line-height: 1.22; margin-bottom: 9px; }
.flow5__s p { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.78); max-width: 26ch; }
.flow5__s--gate h3 { color: var(--ss-turquoise-400); }

.eac { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.22);
       border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-md); overflow: hidden; }
.eac__c { background: var(--ss-navy); padding: var(--cell-lg) var(--cell) 34px; }
.eac__c h3 { color: #fff; font-size: clamp(19px,1.7vw,23px); letter-spacing: -0.02em; margin: 14px 0 12px; }
.eac__c p { font-size: 14.5px; line-height: 1.62; color: rgba(255,255,255,.8); }
.eac__ico { width: 26px; height: 26px; }
.eac__ico path, .eac__ico circle, .eac__ico rect { stroke: var(--ss-turquoise-400); }

@media (max-width: 1000px) {
  .flow5 { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .flow5__s { padding-top: 22px; border-top: 2px solid rgba(255,255,255,.22); }
  .flow5 { border-top: 0; }
  .eac { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .flow5 { grid-template-columns: 1fr; row-gap: 22px; }
  .flow5__s p { max-width: none; }
}

/* ============================================================
   CONTACT · form styling only.
   The integration itself is the live site's, unchanged.
   ============================================================ */
.ctc { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.form { display: grid; gap: 20px; margin-top: 4px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--fg-1); margin-bottom: 8px; }
.field input, .field textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--fg-1);
  padding: 13px 14px; min-height: 48px; background: #fff;
  border: var(--ln); border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field input:hover, .field textarea:hover { border-color: var(--ss-ink-300); }
.field input:focus, .field textarea:focus {
  border-color: var(--ss-turquoise); outline: none; box-shadow: var(--shadow-focus);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--ss-danger); background: #FEF7F6;
}
.field__err { display: none; margin-top: 7px; font-size: 13px; color: var(--ss-danger); }
.field input[aria-invalid="true"] ~ .field__err,
.field textarea[aria-invalid="true"] ~ .field__err { display: block; }
.form__note { font-size: 13px; line-height: 1.6; color: var(--fg-3); max-width: 60ch; }
.form__note a { color: var(--ss-blue); font-weight: 600; border-bottom: 1px solid var(--ss-ink-200); }
.form__note a:hover { border-bottom-color: var(--ss-turquoise); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* `display:flex` on these would beat the `hidden` attribute, so state them
   as not-displayed first. Without this both panels render on page load. */
[hidden] { display: none !important; }

.form__ok {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border-radius: var(--radius-md);
  background: var(--ss-turquoise-100); border: 1px solid var(--ss-turquoise);
}
.form__ok b { display: block; color: var(--ss-turquoise-600); font-size: 15px; margin-bottom: 4px; }
.form__ok p { font-size: 14px; line-height: 1.55; color: var(--ss-blue-700); margin: 0; }
.form__err {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border-radius: var(--radius-md);
  background: #FEF2F1; border: 1px solid var(--ss-danger);
}
.form__err b { display: block; color: var(--ss-danger); font-size: 15px; margin-bottom: 4px; }
.form__err p { font-size: 14px; line-height: 1.55; color: var(--ss-ink-700); margin: 0; }
.form__err a, .form__ok a { color: inherit; font-weight: 600; text-decoration: underline; }

.aside__b { padding: 24px 0; border-bottom: var(--ln-soft); }
.aside__b:first-child { padding-top: 0; }
.aside__b:last-child { border-bottom: 0; }
.aside__b .ix { display: block; margin-bottom: 10px; }
.aside__b h3 { font-size: 17px; letter-spacing: -0.015em; margin-bottom: 8px; }
.aside__b p { font-size: 14.5px; line-height: 1.6; color: var(--fg-3); }
.aside__b a.m { color: var(--ss-blue); font-weight: 600; }

@media (max-width: 900px) {
  .ctc { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
}

/* Approval card — the control idea, without interface styling */
.appr { border: var(--ln); border-radius: var(--radius-md); overflow: hidden; background: #fff;
        box-shadow: var(--shadow-2); }
.appr__hd { padding: 20px var(--cell) 18px; border-bottom: var(--ln-soft); background: var(--bg-surface); }
.appr__hd .ix { display: block; margin-bottom: 8px; }
.appr__hd b { font-size: 19px; letter-spacing: -0.02em; color: var(--ss-navy); }
.appr__l { display: flex; gap: 13px; align-items: flex-start; padding: 16px var(--cell);
           border-bottom: var(--ln-soft); font-size: 14.5px; line-height: 1.5; color: var(--fg-2); }
.appr__l:last-child { border-bottom: 0; }
.appr__l svg { flex: none; margin-top: 2px; }
.appr__l b { color: var(--fg-1); font-weight: 600; }

/* The light-text rule was scoped to `.on-dark` only, so `.t-lead`, `.t-body`
   and `.t-sm` kept their dark ink inside `.sec--navy` / `.sec--deep`
   sections — 2.93:1 against navy. Scope it to every dark surface. */
.sec--navy .t-lead, .sec--navy .t-body, .sec--navy .t-sm,
.sec--deep .t-lead, .sec--deep .t-body, .sec--deep .t-sm,
.close.sec--navy p, .close.sec--navy .t-lead {
  color: rgba(255,255,255,.80);
}
.sec--navy .pil__txt .t-sm, .sec--deep .pil__txt .t-sm { color: rgba(255,255,255,.72); }
.sec--navy .inline-link { color: var(--ss-turquoise-400); border-bottom-color: rgba(255,255,255,.3); }
.sec--navy .pil__link { color: #fff; border-bottom-color: var(--ss-turquoise-400); }
.sec--navy .pil__link:hover { color: var(--ss-turquoise-400); }
.sec--navy .tag { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.3); }

/* ============================================================
   CONTRAST ON LIGHT SURFACES
   Measured on the rendered pages, not assumed:
     brand turquoise #00A99D as text on white = 2.93:1  (fails AA)
     turquoise-600   #008C82 as text on white = 4.14:1
     ink-400         #7D7D7D as text on white = 3.60:1  (fails AA)
     ink-500         #5E6A73 as text on white = 5.33:1  (passes)
   Small *text* therefore uses the darker tokens that already exist in
   the locked palette. The turquoise rule, chips and borders keep the
   brand turquoise: they are graphics, judged at the 3:1 UI threshold.
   No new colour is introduced.
   ============================================================ */
.eyebrow { color: var(--ss-turquoise-600); }
.eyebrow::before { background: var(--ss-turquoise); }     /* the rule stays brand turquoise */
.on-dark .eyebrow, .sec--navy .eyebrow, .sec--deep .eyebrow { color: var(--ss-turquoise-400); }

.ix { color: var(--ss-ink-500); }
.ix--brand { color: var(--ss-turquoise-600); }
.sec--navy .ix--brand, .sec--deep .ix--brand, .on-dark .ix--brand { color: var(--ss-turquoise-400); }

.flow5__n { color: rgba(255,255,255,.72); }
.rec__hd .ix, .rec__row .k { color: rgba(255,255,255,.68); }
.gal__cap b { color: #6FD8CE; }

/* Footer baseline and preview-badge headings were also at .44 (4.16:1). */
.ft__btm { color: rgba(255,255,255,.66); }
.mnav__item .ix { color: var(--ss-ink-500); }

/* The V3.3 .xhd override came after the responsive rule in source order and
   re-imposed two columns on small screens. Restore the collapse. */
@media (max-width: 1000px) {
  .xhd { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   V3.4 — TARGETED CORRECTIONS
   ============================================================ */

/* Cropped screenshot frame — shows a considered detail, not a whole page */
.crop { border-radius: 8px; overflow: hidden; border: var(--ln); background: #fff;
        box-shadow: 0 18px 44px rgba(0,35,53,.12), 0 3px 10px rgba(0,35,53,.05); }
.crop__bar { display: flex; align-items: center; gap: 7px; padding: 10px 13px;
             background: var(--ss-ink-50); border-bottom: var(--ln-soft); }
.crop__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ss-ink-200); flex: none; }
.crop__url { margin-left: 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ss-ink-500); }
.crop__v { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ss-ink-50); }
.crop__v img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.crop__cap { padding: 13px 16px; border-top: var(--ln-soft); font-size: 12.5px; line-height: 1.5;
             color: var(--fg-3); }

/* Engineering block: text carries its own weight, image is a supporting detail */
.eng { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(32px, 4.5vw, 72px); align-items: center; }
.eng__pts { border-top: var(--ln); margin: 26px 0 28px; }
.eng__pts li { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: baseline;
               padding: 13px 0; border-bottom: var(--ln-soft); font-size: 14.5px; line-height: 1.5; }
.eng__pts li b { font-size: 13px; color: var(--fg-1); letter-spacing: -0.005em; }
.eng__pts li span { color: var(--fg-3); }

/* Adaptation chain — one craft, four surfaces */
.chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
         background: var(--ss-ink-200); border: var(--ln); }
.chain__i { background: #fff; display: flex; flex-direction: column; }
.chain__v { aspect-ratio: 5 / 4; overflow: hidden; background: var(--ss-ink-50); }
.chain__v img { width: 100%; height: 100%; object-fit: cover; display: block;
                transition: transform var(--dur-slow) var(--ease-standard); }
.chain__i:hover img { transform: scale(1.03); }
.chain__m { padding: 16px var(--cell-sm) 20px; }
.chain__m .ix { display: block; margin-bottom: 7px; }
.chain__m b { display: block; font-size: 15px; letter-spacing: -0.01em; color: var(--ss-navy); margin-bottom: 5px; }
.chain__m span { font-size: 13px; line-height: 1.5; color: var(--fg-3); }

@media (max-width: 1000px) {
  .eng { grid-template-columns: 1fr; gap: 36px; }
  .eng__media { order: -1; }
  .chain { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .chain { grid-template-columns: 1fr; }
  .eng__pts li { grid-template-columns: 1fr; gap: 4px; }
}

/* Build card — pillar 03's visual. Keeps Plireo out of the services section
   (it already appears, properly framed, in Engineering) and gives the three
   pillars comparable column heights so none is centred against dead space. */
.build { border: var(--ln); border-radius: var(--radius-md); overflow: hidden; background: #fff;
         box-shadow: var(--shadow-2); }
.build__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
             padding: 18px var(--cell) 16px; border-bottom: var(--ln-soft); background: var(--bg-surface); }
.build__g { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ss-ink-100); }
.build__c { background: #fff; padding: 20px var(--cell-sm) 22px; }
.build__c b { display: block; font-size: 14.5px; letter-spacing: -0.01em; color: var(--ss-navy); margin-bottom: 6px; }
.build__c span { font-size: 13px; line-height: 1.5; color: var(--fg-3); }
.build__f { padding: 15px var(--cell); border-top: var(--ln-soft); font-size: 12.5px;
            line-height: 1.55; color: var(--fg-3); }

/* Service pillars: align to the top so a tall media column never strands the text */
.pil { align-items: start; }
.pil__txt { padding-top: 4px; }

@media (max-width: 600px) { .build__g { grid-template-columns: 1fr; } }

/* ============================================================
   LEGAL PAGES — plain, readable prose
   ============================================================ */
.legal { max-width: 760px; }
.legal h2 { font-size: clamp(19px, 1.7vw, 23px); letter-spacing: -0.02em; margin: clamp(32px,3.5vw,46px) 0 12px; }
.legal h2:first-of-type { margin-top: 0; }
.legal p { font-size: 15.5px; line-height: 1.7; color: var(--fg-3); margin-bottom: 14px; }
.legal ul { margin: 0 0 16px; }
.legal li { font-size: 15.5px; line-height: 1.6; color: var(--fg-3); padding: 7px 0 7px 18px; position: relative; }
.legal li::before { content: ""; position: absolute; left: 0; top: 16px; width: 5px; height: 5px; background: var(--ss-turquoise); }
.legal li b { color: var(--fg-1); font-weight: 600; }
.legal a { color: var(--ss-blue); font-weight: 600; border-bottom: 1px solid var(--ss-ink-200); }
.legal a:hover { border-bottom-color: var(--ss-turquoise); }
.legal__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
               color: var(--ss-ink-500); margin-bottom: 30px; display: block; }

/* Square social placement — shown whole, because the brand band and the
   legal line are part of the craft and cropping them loses the point. */
.sq { border: var(--ln); border-radius: var(--radius-md); overflow: hidden; background: #fff;
      box-shadow: var(--shadow-2); max-width: 520px; }
.sq__v { aspect-ratio: 1 / 1; background: var(--ss-ink-50); overflow: hidden; }
.sq__v img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sq__ph { aspect-ratio: 1 / 1; display: grid; place-items: center; text-align: center; padding: 34px;
          border-bottom: var(--ln-soft);
          background: repeating-linear-gradient(135deg, var(--ss-ink-50) 0 12px, #fff 12px 24px); }
.sq__ph b { display: block; font-size: 16px; color: var(--ss-ink-700); margin-bottom: 9px; letter-spacing: -0.015em; }
.sq__ph p { font-size: 13px; line-height: 1.6; color: var(--ss-ink-500); max-width: 40ch; }
.sq__ph code { font-family: var(--font-mono); font-size: 11.5px; color: var(--ss-blue);
               background: var(--ss-blue-100); padding: 2px 6px; border-radius: 3px; }
.sq__m { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
         padding: 14px var(--cell-sm); border-top: var(--ln-soft); }
.sq__m b { font-size: 14px; color: var(--ss-navy); }

/* ============================================================
   PAIR · the plain two-column editorial row.
   Used where a block of argument sits beside one piece of
   evidence — a card, a record, a portrait. Collapses early,
   because two 48ch columns stop being readable before the
   layout stops fitting.
   ============================================================ */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 3.5vw, 60px);
        align-items: start; margin-top: 38px; }

/* PORTRAIT · one person, shown at the ratio the photograph was
   taken at rather than cropped to a square. */
.port { border: var(--ln); border-radius: var(--radius-md); overflow: hidden;
        background: var(--ss-ink-50); box-shadow: var(--shadow-2); max-width: 460px; }
.port img { display: block; width: 100%; height: auto; }
.port__cap { display: flex; justify-content: space-between; align-items: center;
             gap: 14px; padding: 16px var(--cell-sm); border-top: var(--ln); background: #fff; }

@media (max-width: 860px) {
  .pair { grid-template-columns: 1fr; gap: 32px; }
  .port { max-width: none; }
}

/* ============================================================
   LIGHT-SURFACE VARIANTS.
   .flow5 and .rec were built for navy sections, so their text
   is white. V3.4 reuses both on white and surface sections —
   which rendered them invisible. These modifiers restate the
   colours for a light background; the dark defaults above are
   untouched, so every existing navy use is unaffected.
   ============================================================ */
.flow5--light { border-top-color: var(--ss-ink-200); }
.flow5--light .flow5__n { color: var(--ss-ink-500); }
.flow5--light .flow5__s h3 { color: var(--ss-navy); }
.flow5--light .flow5__s p { color: var(--ss-ink-700); }
.flow5--light .flow5__s--gate h3 { color: var(--ss-turquoise-600); }
.flow5--light .flow5__s--gate::before { background: var(--ss-turquoise-600); }

.rec--light { border: var(--ln); background: #fff; }
.rec--light .rec__hd { border-bottom: var(--ln); }
.rec--light .rec__hd .ix { color: var(--ss-ink-500); }
.rec--light .rec__row { border-bottom: var(--ln); color: var(--ss-ink-700); }
.rec--light .rec__row:last-child { border-bottom: 0; }
.rec--light .rec__row .k { color: var(--ss-ink-500); }
.rec--light .rec__row .v { color: var(--ss-navy); }

@media (max-width: 1000px) {
  .flow5--light .flow5__s { border-top-color: var(--ss-ink-200); }
}

/* Success panel: turquoise-600 on turquoise-100 measured 3.74:1. */
.form__ok b { color: var(--ss-blue-700); }
/* Preview-badge section labels — development chrome, but held to
   the same bar as everything else. */
.pv__menu strong { color: rgba(255,255,255,.66); }

/* ============================================================
   PRIMARY BUTTON · contrast correction.

   White on the brand turquoise #00A99D measures 2.93:1 — the
   main call to action on every page, against a 4.5:1 AA
   requirement. Confirmed with the client on 2 Nov 2026: keep
   the brand colour exactly, carry the label in navy instead.

     navy #002335 on turquoise #00A99D    5.54:1
     navy #002335 on turq-400  #33BCB1    6.94:1  (hover)

   The hover had to be inverted. It previously darkened to
   turquoise-600, which with a navy label would be 3.93:1 —
   still a fail. Brightening to turquoise-400 passes, and a
   button that lights up under the cursor reads better than one
   that dims. Every value here is an existing palette step; no
   new colour is introduced.

   Scoped to this version only, because shared/brand.css is
   shared with every preserved concept.
   ============================================================ */
.btn-primary { background: var(--ss-turquoise); color: var(--ss-navy); }
.btn-primary:hover { background: var(--ss-turquoise-400); color: var(--ss-navy); }
.btn-primary .arr { color: inherit; }

/* Preview-badge current item — development chrome, same correction. */
.pv__menu a[aria-current="true"] { background: var(--ss-turquoise); color: var(--ss-navy); }

/* Two near-misses found while re-measuring the buttons. Neither
   needs a palette decision — both use values already in use. */

/* .q is the turquoise emphasis inside a display heading. At the
   pure brand turquoise it measured 2.93:1 against a 3:1
   large-text requirement — a 0.07 miss. turquoise-600 is already
   what .eyebrow and .ix--brand use for brand text, so this is a
   consistency fix: 4.14:1. */
.q { color: var(--ss-turquoise-600); }
.sec--navy .q, .on-dark .q { color: var(--ss-turquoise-400); }

/* Error-panel heading was 4.42:1 on its own tint. The border and
   field states keep --ss-danger; only the text darkens. */
.form__err b { color: #B23A31; }

/* ============================================================
   COOKIE CONSENT
   Reject and Accept share one treatment on purpose — unequal
   prominence between them is a dark pattern, not a design choice.
   ============================================================ */
.cookie-banner {
  position: fixed; z-index: 90; left: var(--gut); right: var(--gut); bottom: var(--gut);
  max-width: 520px; padding: var(--cell-sm) var(--cell);
  background: var(--ss-navy); color: #fff;
  border-radius: var(--radius-md); box-shadow: var(--shadow-3);
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.cookie-banner.is-open { opacity: 1; transform: none; }
.cookie-banner__title {
  font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--ss-turquoise-400); margin-bottom: 10px;
}
.cookie-banner__text {
  font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.84); margin-bottom: 18px;
}
.cookie-banner__text a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-consent {
  flex: 1 1 auto; justify-content: center;
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,.42);
  font-size: 13.5px; padding: 10px 16px;
}
.btn-consent:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.btn-consent:focus-visible { outline: 2px solid var(--ss-turquoise-400); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; transform: none; }
}
@media (max-width: 520px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 18px; }
  .btn-consent { flex: 1 1 100%; }
}

/* ============================================================
   LANGUAGE SWITCH
   A secondary control, not a fourth nav item: it should be
   findable without competing with Our Expertise or the CTA.
   Every value is an existing token.
   ============================================================ */
.nav__lang {
  display: inline-flex; align-items: center; min-height: 42px;
  margin-left: 4px; padding: 10px 12px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ss-ink-500); border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav__lang::before {
  content: ""; width: 1px; height: 14px; margin-right: 12px;
  background: var(--ss-ink-200);
}
.nav__lang:hover { color: var(--ss-navy); }
.nav__lang:focus-visible { outline: 2px solid var(--ss-turquoise); outline-offset: 2px; }

/* The footer's bottom bar is one inline row. Without this the language link
   inherits .ft a — display:block, 6px padding, 14px — and silently adds
   15px to every page that has a counterpart. */
.ft__btm a {
  display: inline; padding: 0; font-size: inherit;
  color: inherit; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,.3);
}
.ft__btm a:hover { color: #fff; text-decoration-color: currentColor; }

/* The mobile menu's language link sits in a row of .ix labels. */
.mnav__meta a.ix { text-decoration: underline; text-underline-offset: 3px; }
.mnav__meta a.ix:hover { color: var(--ss-turquoise-600); }