/* ============================================================================
   Signature App House — marketing site
   Design-system tokens (colors, typography, spacing, elevation, base) followed
   by the page styles, converted from the inline styles in the Claude Design
   file. tokens/theme-dark.css is deliberately absent: it only activates on
   [data-theme="dark"] and nothing ever sets that.
   ========================================================================= */

/* --- Fonts ---------------------------------------------------------------
   Self-hosted variable fonts (tools/fetch-fonts.sh). Weight ranges, not one
   file per weight. Noto Sans Thai is only linked from /th/ -- see page.mjs. */
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/fonts/public-sans-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Thai';
  src: url('/fonts/noto-sans-thai-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --- Color tokens -------------------------------------------------------- */
:root {
  --blue-50:#EAF3FD; --blue-100:#CFE4FA; --blue-200:#A2C9F3; --blue-300:#6BA6E8;
  --blue-400:#2F82DC; --blue-500:#0A6CCB; --blue-600:#0959AC; --blue-700:#08488B;
  --blue-800:#0A3A6E; --blue-900:#0B2E58; --blue-electric:#2E9BE6;

  --navy-700:#0F2E4C; --navy-800:#0A2A4E; --navy-900:#072A50; --navy-950:#051A33;

  --teal-50:#E6F6F4; --teal-300:#5EE7D5; --teal-500:#14B8A6; --teal-600:#0D9488; --teal-700:#0B7E74;
  --amber-300:#FCD34D; --amber-500:#F59E0B; --amber-600:#D97B06;
  /* Not in the design system. The 12px bold "Challenge" label only reaches
     3.09:1 on white with amber-600; this hits 5.02:1. */
  --amber-700:#B45309;

  --slate-50:#F8FAFC; --slate-100:#F1F5F9; --slate-200:#E2E8F0; --slate-300:#CBD5E1;
  --slate-400:#94A3B8; --slate-500:#64748B; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1E293B; --slate-900:#0F172A; --white:#FFFFFF;

  --color-brand:var(--blue-500); --color-brand-hover:var(--blue-600);
  --color-brand-soft:var(--blue-50); --color-highlight:var(--amber-500);

  --text-strong:var(--navy-900); --text-body:var(--slate-700); --text-muted:var(--slate-500);
  --text-subtle:var(--slate-400); --text-link:var(--blue-500);

  --surface-page:var(--slate-50); --surface-card:var(--white);
  --border-subtle:var(--slate-200); --border-brand:var(--blue-500);
  --ring-brand:rgba(10,108,203,.35);

  /* --- Typography ------------------------------------------------------- */
  --font-display:'Archivo','Public Sans',system-ui,sans-serif;
  --font-body:'Public Sans',system-ui,-apple-system,sans-serif;
  /* JetBrains Mono dropped: the system stack renders these few labels fine and
     saves a whole font download. */
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-thai:'Noto Sans Thai','Leelawadee UI','Thonburi',var(--font-body);

  --fw-bold:700; --fw-extra:800; --fw-black:900;

  --text-2xs:11px; --text-xs:12px; --text-sm:14px; --text-base:16px; --text-lg:18px;
  --text-xl:20px; --text-2xl:24px; --text-3xl:30px; --text-4xl:38px; --text-5xl:48px;

  --tracking-tight:-.02em; --tracking-eyebrow:.14em;

  /* --- Spacing / radii / sizing ----------------------------------------- */
  --radius-xs:6px; --radius-sm:10px; --radius-md:12px; --radius-lg:18px;
  --radius-xl:24px; --radius-2xl:32px; --radius-pill:999px;
  --container-xl:1280px;

  /* --- Elevation / motion ----------------------------------------------- */
  --shadow-sm:0 1px 2px rgba(11,46,88,.04),0 2px 6px rgba(11,46,88,.05);
  --shadow-md:0 6px 20px rgba(11,46,88,.07),0 2px 6px rgba(11,46,88,.05);
  --shadow-lg:0 18px 40px rgba(11,46,88,.10),0 6px 14px rgba(11,46,88,.06);
  --focus-ring:0 0 0 3px var(--ring-brand);

  --ease-standard:cubic-bezier(.2,0,0,1);
  --dur-base:180ms;
  --transition-base:all var(--dur-base) var(--ease-standard);

  --gradient-brand:linear-gradient(135deg,#0A6CCB 0%,#08488B 100%);
  --gradient-navy:linear-gradient(160deg,#0A2A4E 0%,#072A50 55%,#0A3A6E 100%);
  --gradient-hero:linear-gradient(115deg,#061B39 0%,#0A3A78 40%,#0A6CCB 74%,#2E9BE6 100%);
}

/* --- Base ---------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  margin:0; font-family:var(--font-body); font-size:var(--text-base); line-height:1.5;
  color:var(--text-body); background:var(--surface-page);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
h1,h2,h3,h4 { font-family:var(--font-display); color:var(--text-strong); line-height:1.1;
  letter-spacing:var(--tracking-tight); margin:0 }
p { margin:0 }
a { color:var(--text-link); text-decoration:none }
a:hover { text-decoration:underline }
img { max-width:100% }
::selection { background:var(--blue-100); color:var(--navy-900) }
/* Focus rings use outline, not box-shadow. Several components own a decorative
   box-shadow and animate it, so a ring on that property both loses the cascade
   and arrives late; outline is unshared, untransitioned, and already follows the
   element's border-radius. */
:focus-visible { outline:3px solid var(--color-brand); outline-offset:2px }
:lang(th), .thai { font-family:var(--font-thai) }

.i { flex:none; display:block }

.skip {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:#fff; color:var(--navy-900); padding:12px 20px;
  border-radius:0 0 var(--radius-sm) 0; font-weight:700;
}
.skip:focus { left:0 }

.wrap { max-width:var(--container-xl); margin:0 auto; padding-inline:24px }

/* Eyebrow — the DS component, as markup instead of React. */
.eyebrow {
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display);
  font-weight:var(--fw-bold); font-size:var(--text-xs);
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--color-brand);
}
.eyebrow::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none }

/* StepBadge — likewise. */
.badge {
  width:56px; height:56px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-lg); font-family:var(--font-display); font-weight:var(--fw-extra);
  font-size:20px; letter-spacing:-.02em;
}
.badge-brand { background:var(--gradient-brand); color:#fff; box-shadow:var(--shadow-sm) }
.badge-soft  { background:var(--blue-50); color:var(--color-brand) }

.sec-head { max-width:760px; margin:0 0 48px; display:flex; flex-direction:column; align-items:flex-start; gap:16px }
.sec-head h2 { font-size:var(--text-5xl); font-weight:var(--fw-extra); letter-spacing:-.025em; line-height:1.05 }
.sec-head p { font-size:var(--text-lg); color:var(--text-muted); line-height:1.6; max-width:620px }

.btn {
  height:54px; padding:0 30px; display:inline-flex; align-items:center; gap:10px;
  border-radius:var(--radius-pill); font-weight:700; font-size:var(--text-lg);
  text-decoration:none; cursor:pointer;
  /* transform and shadow only, so hover stays off the main thread */
  transition:transform var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard),
             background-color var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard);
}
.btn:hover { text-decoration:none }
/* The arrow leads the eye in the direction the link goes. */
.btn .i { transition:transform var(--dur-base) var(--ease-standard) }
.btn:hover .i { transform:translateX(3px) }
.btn:hover .i-diag { transform:translate(3px,-3px) }

.btn-light { background:#fff; color:var(--navy-900); box-shadow:0 10px 30px rgba(0,0,0,.22) }
.btn-light:hover { transform:translateY(-2px); box-shadow:0 18px 40px rgba(0,0,0,.30) }
/* Press returns it to the surface rather than lifting further. */
.btn-light:active { transform:translateY(0); box-shadow:0 6px 16px rgba(0,0,0,.26) }

.btn-ghost {
  padding:0 28px; border:1px solid rgba(255,255,255,.30);
  background:rgba(255,255,255,.06); color:#fff; font-weight:600;
}
.btn-ghost:hover {
  background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.55);
  transform:translateY(-2px);
}
.btn-ghost:active { transform:translateY(0); background:rgba(255,255,255,.10) }

/* --- Header / nav -------------------------------------------------------- */
.site-header { position:absolute; top:0; left:0; right:0; z-index:40 }
.nav-row {
  max-width:var(--container-xl); margin:0 auto; padding:22px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo img { height:46px; width:auto; display:block }
.nav-pill {
  display:flex; align-items:center; gap:4px; padding:6px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
}
.nav-pill a {
  font-size:var(--text-sm); font-weight:600; color:rgba(255,255,255,.85); text-decoration:none;
  padding:8px 16px; border-radius:var(--radius-pill);
  transition:background-color var(--dur-base) var(--ease-standard),
             color var(--dur-base) var(--ease-standard);
}
.nav-pill a:hover { background:rgba(255,255,255,.14); color:#fff; text-decoration:none }
.nav-end { display:flex; align-items:center; gap:12px }
.lang {
  display:flex; align-items:center; padding:4px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(8px);
}
.lang a {
  height:32px; padding:0 14px; display:inline-flex; align-items:center;
  border-radius:var(--radius-pill); font-size:12px; font-weight:700; letter-spacing:.05em;
  color:rgba(255,255,255,.85); text-decoration:none;
  transition:background-color var(--dur-base) var(--ease-standard),
             color var(--dur-base) var(--ease-standard);
}
.lang a:hover { text-decoration:none; color:#fff }
.lang a[aria-current='true'] { background:#fff; color:var(--navy-900) }
.nav-cta {
  height:42px; padding:0 22px; display:inline-flex; align-items:center;
  border-radius:var(--radius-pill); background:#fff; color:var(--navy-900);
  font-weight:700; font-size:var(--text-sm); text-decoration:none;
  transition:transform var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard),
             background-color var(--dur-base) var(--ease-standard);
}
.nav-cta:hover {
  background:var(--blue-50); text-decoration:none;
  transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.22);
}
.nav-cta:active { transform:translateY(0); box-shadow:none }

/* Brand blue all but disappears against the blue hero, so anything sitting on a
   dark surface gets a white ring instead. */
.hero a:focus-visible,
.site-header a:focus-visible,
.site-header summary:focus-visible,
.cta a:focus-visible {
  outline-color:#fff;
}
.skip:focus-visible { outline-color:var(--color-brand) }

/* Mobile menu. The design simply hid the nav below 1020px with nothing in its
   place; <details> restores it with no JavaScript. */
.menu { display:none; position:relative }
.menu > summary {
  list-style:none; cursor:pointer; height:42px; width:42px; display:flex;
  align-items:center; justify-content:center; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); color:#fff;
}
.menu > summary::-webkit-details-marker { display:none }
.menu-panel {
  position:absolute; right:0; top:52px; min-width:210px; padding:8px;
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column;
}
.menu-panel a {
  padding:11px 14px; border-radius:var(--radius-sm); color:var(--text-strong);
  font-weight:600; font-size:var(--text-sm); text-decoration:none;
}
.menu-panel a:hover { background:var(--slate-100); text-decoration:none }

/* --- Hero ---------------------------------------------------------------- */
.hero { position:relative; overflow:hidden; background:var(--gradient-hero); min-height:min(880px,95vh) }
.hero-photo {
  position:absolute; left:0; right:0; top:-15%; height:130%;
  background-image:url('/img/photo/datacenter.webp'); background-size:cover;
  background-position:center; opacity:.18; will-change:transform;
}
.hero-glow {
  position:absolute; left:0; right:0; top:-12%; height:124%;
  background:radial-gradient(120% 90% at 100% 0%, rgba(120,190,255,.38) 0%, transparent 55%);
  will-change:transform;
}
.hero-grid-lines {
  position:absolute; left:0; right:0; top:-20%; bottom:-20%; pointer-events:none; will-change:transform;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:56px 56px;
}
.hero-sheen {
  position:absolute; top:-20%; right:-5%; width:55%; height:140%; transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05) 40%,rgba(255,255,255,.12) 60%,transparent);
}
.hero-inner {
  position:relative; max-width:var(--container-xl); margin:0 auto; padding:150px 40px 96px;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; align-items:center;
}
.hero-copy { will-change:transform }
.hero-copy h1 {
  color:#fff; font-size:clamp(38px,4.4vw,62px); font-weight:var(--fw-black);
  line-height:1.04; letter-spacing:-.025em;
}
.hero-lede { color:#C6DBEC; font-size:var(--text-lg); line-height:1.6; max-width:540px; margin-top:24px }
.hero-actions { display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; align-items:center }
.hero-contact {
  margin-top:26px; font-family:var(--font-mono); font-size:var(--text-sm);
  color:#AFC8DC; letter-spacing:.02em;
}
/* Underline drawn with a background gradient so it can animate in from the
   left; text-decoration cannot be transitioned. */
.hero-contact a {
  color:inherit; text-decoration:none;
  background-image:linear-gradient(currentColor, currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 1px;
  transition:background-size var(--dur-base) var(--ease-standard),
             color var(--dur-base) var(--ease-standard);
}
.hero-contact a:hover { color:#fff; background-size:100% 1px; text-decoration:none }

/* Platform stack: parallax depth standing in for system depth. */
.stack { position:relative; height:min(64vh,560px); perspective:1200px }
.plane {
  position:absolute; left:6%; right:2%; height:150px; padding:18px 22px;
  border-radius:var(--radius-md); box-shadow:0 24px 48px -24px rgba(2,10,20,.55);
  transform:rotateX(52deg) rotateZ(-32deg); will-change:transform;
}
.plane-glass { background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.20); backdrop-filter:blur(4px) }
.plane-solid { background:#fff; border:1px solid #fff; box-shadow:0 24px 48px -24px rgba(2,10,20,.65) }
/* Stacking runs card / link / card / link / card, front to back:
     5  card 1
     4  link 1-2   (and the dot marking its arrival on card 2)
     3  card 2
     2  link 2-3   (and its arrival dot on card 3)
     1  card 3
   So each link is hidden behind the card it leaves and draws on top of the card
   it arrives at, terminating on that card's centre. */
.plane-1 { top:5%; z-index:5 } .plane-2 { top:36%; z-index:3 } .plane-3 { top:67%; z-index:1 }
.plane-label {
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--amber-300); margin-bottom:7px;
}
.plane-solid .plane-label { color:var(--amber-600) }
.plane-title { font-family:var(--font-display); font-size:var(--text-lg); font-weight:700; color:#fff; margin-bottom:5px }
.plane-solid .plane-title { color:var(--navy-900) }
.plane-desc { font-size:var(--text-sm); color:#B9D0E2; line-height:1.5 }
.plane-solid .plane-desc { color:var(--slate-500) }

/* The percentage top/height below are the no-JS fallback: site.js overrides
   left/top/height in px and rotates each bar onto the centre-to-centre vector.
   Origin is the bar's top, which sits on the upper plane's centre. */
.flow {
  position:absolute; left:50%; width:2px; margin-left:-1px; opacity:.9; pointer-events:none;
  transform-origin:50% 0;
  background:repeating-linear-gradient(to bottom,var(--amber-300) 0 6px,transparent 6px 12px);
}
/* One unbroken bar per link. The percentage top/height are the no-JS fallback;
   site.js sets them in px and rotates the bar onto the centre-to-centre vector. */
.flow-1 { z-index:4; top:20%; height:31% }
.flow-2 { z-index:2; top:51%; height:31% }
.dot {
  position:absolute; left:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%; background:var(--amber-300); box-shadow:0 0 8px rgba(252,211,77,.7); pointer-events:none;
}
/* Each dot shares its link's layer, so it lands on the destination card. */
.dot-1 { z-index:4; top:36% } .dot-2 { z-index:2; top:67% }
/* Purely an animation element: invisible until site.js drives it, so nothing
   stray shows when the script is absent or motion is reduced. */
.travel {
  position:absolute; z-index:6; left:0; top:0; width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%; background:#fff; opacity:0; pointer-events:none;
  will-change:transform, opacity;
  box-shadow:0 0 12px rgba(252,211,77,.95),0 0 5px var(--amber-300);
}

/* --- Clients ------------------------------------------------------------- */
.clients { padding:96px 0 72px }
.split { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; margin-bottom:56px }
.split-copy { display:flex; flex-direction:column; gap:16px; align-items:flex-start }
.split-copy h2 { font-size:var(--text-4xl); font-weight:var(--fw-extra); letter-spacing:-.02em; line-height:1.1 }
.split-copy p { font-size:var(--text-lg); color:var(--text-muted); line-height:1.6; max-width:480px }
.stat-pair { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.stat-card {
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl); padding:26px; box-shadow:var(--shadow-sm);
}
.stat-num {
  font-family:var(--font-display); font-weight:var(--fw-black); font-size:var(--text-5xl);
  line-height:1; letter-spacing:-.02em; color:var(--color-brand);
}
.stat-lbl { font-size:var(--text-sm); color:var(--text-muted); margin-top:10px; line-height:1.5 }

.marquee-mask {
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee { display:flex; width:max-content; will-change:transform; animation:marquee 36s linear infinite }
.marquee:hover { animation-play-state:paused }
@keyframes marquee { from { transform:translateX(0) } to { transform:translateX(-50%) } }
.logo-cell { flex:none; width:150px; height:56px; margin-right:56px; display:flex; align-items:center; justify-content:center }
.logo-cell img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  filter:grayscale(1); opacity:.55;
  transition:filter var(--dur-base) var(--ease-standard),
             opacity var(--dur-base) var(--ease-standard) }
.marquee:hover .logo-cell img { filter:grayscale(0); opacity:1 }

/* --- Banded sections ----------------------------------------------------- */
.band {
  background:var(--surface-card);
  border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle);
}
.sec { padding:96px 0; scroll-margin-top:24px }

/* --- Services ------------------------------------------------------------ */
.g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.svc {
  background:var(--surface-page); border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl); padding:28px; display:flex; flex-direction:column;
  transition:box-shadow var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard);
}
.svc:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); border-color:var(--border-brand) }
.svc-icon {
  width:48px; height:48px; border-radius:var(--radius-md); background:var(--color-brand-soft);
  color:var(--color-brand); display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.svc h3 { font-size:var(--text-xl); font-weight:700; margin-bottom:8px }
.svc p { font-size:var(--text-sm); color:var(--text-muted); line-height:1.6; flex:1; margin-bottom:18px }
.svc-stack {
  padding-top:14px; border-top:1px solid var(--border-subtle); font-family:var(--font-mono);
  font-size:11.5px; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  /* text-subtle (slate-400) is only 2.45:1 here; muted clears AA at 4.55:1. */
  color:var(--text-muted);
}

/* --- Why us -------------------------------------------------------------- */
.g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:22px }
.why {
  background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-xl);
  padding:26px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:16px;
}
.why h3 { font-size:var(--text-lg); font-weight:700 }
.why p { font-size:var(--text-sm); color:var(--text-muted); line-height:1.6 }

/* --- Process ------------------------------------------------------------- */
.steps { display:flex; flex-direction:column; gap:24px }
.step {
  position:sticky; background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-2xl); box-shadow:var(--shadow-md); overflow:hidden;
  transform-origin:center top; will-change:transform;
}
.step-inner { display:grid; grid-template-columns:1.1fr .9fr; min-height:320px }
.step-copy { padding:44px; display:flex; flex-direction:column; gap:16px; justify-content:center; align-items:flex-start }
.step-copy h3 { font-size:var(--text-3xl); font-weight:var(--fw-extra); letter-spacing:-.02em }
.step-copy p { font-size:var(--text-base); color:var(--text-muted); line-height:1.65; max-width:440px }
.step-time { font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--color-brand);
  text-transform:uppercase; padding-top:6px }
.step-media { position:relative; overflow:hidden; min-height:240px }
.step-media > div { position:absolute; inset:0; background-size:cover; background-position:center }

/* --- Selected work ------------------------------------------------------- */
.works { display:flex; flex-direction:column; gap:22px }
.work {
  display:grid; grid-template-columns:1.05fr 1fr; background:var(--surface-card);
  border:1px solid var(--border-subtle); border-radius:var(--radius-2xl); overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.work-media { position:relative; overflow:hidden; min-height:360px }
.work-media > div {
  position:absolute; left:0; right:0; top:-15%; height:130%;
  background-size:cover; background-position:center; will-change:transform;
}
.work-body { padding:44px; display:flex; flex-direction:column; justify-content:center }
.work.img-right .work-media { order:2 } .work.img-right .work-body { order:1 }
.tag {
  align-self:flex-start; margin-bottom:16px; display:inline-flex; align-items:center; gap:8px;
  padding:6px 13px; border-radius:var(--radius-pill); background:var(--color-brand-soft);
  color:var(--color-brand); font-family:var(--font-display); font-size:var(--text-xs);
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.work-body h3 { font-size:var(--text-3xl); font-weight:var(--fw-extra); letter-spacing:-.02em; margin-bottom:20px }
.cr { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:26px }
.cr-lbl {
  display:flex; align-items:center; gap:7px; font-size:var(--text-xs); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px;
}
.cr-lbl::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor }
/* Darker than the design's amber-600/teal-600: at 12px these are body text and
   have to clear 4.5:1 on white. */
.cr-challenge { color:var(--amber-700) } .cr-result { color:var(--teal-700) }
.cr p { font-size:var(--text-sm); color:var(--text-muted); line-height:1.6 }
.work-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding-top:22px; border-top:1px solid var(--border-subtle) }
.work-stat-v { font-family:var(--font-display); font-weight:var(--fw-extra); font-size:var(--text-2xl); color:var(--color-brand); line-height:1 }
.work-stat-l { font-size:var(--text-xs); color:var(--text-muted); margin-top:6px }
/* muted, not subtle: at 12px this has to clear 4.5:1 like any other body text. */
.footnote { margin-top:20px; font-size:var(--text-xs); color:var(--text-muted); line-height:1.5 }

.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:72px;
  padding-top:56px; border-top:1px solid var(--border-subtle) }
.metric { text-align:center }
.metric-v { font-family:var(--font-display); font-weight:var(--fw-black); font-size:var(--text-5xl);
  color:var(--color-brand); line-height:1; letter-spacing:-.02em }
.metric-l { font-size:var(--text-sm); color:var(--text-muted); margin-top:10px }

/* --- Contact CTA --------------------------------------------------------- */
.cta-sec { padding:24px 14px 80px; scroll-margin-top:24px }
.cta {
  max-width:var(--container-xl); margin:0 auto; border-radius:var(--radius-2xl);
  background:var(--gradient-navy); position:relative; overflow:hidden; padding:72px 56px;
}
.cta-glow {
  position:absolute; left:0; right:0; top:-12%; height:124%; will-change:transform;
  background:radial-gradient(90% 80% at 100% 0%, rgba(120,190,255,.25) 0%, transparent 55%);
}
.cta-grid { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center }
.cta-pill {
  display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); margin-bottom:22px;
  font-family:var(--font-display); font-size:var(--text-xs); font-weight:700; letter-spacing:.1em; color:#D6E8F6;
}
.cta-pill::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--teal-300) }
.cta h2 { font-size:var(--text-5xl); font-weight:var(--fw-black); letter-spacing:-.025em; color:#fff;
  margin-bottom:18px; line-height:1.05 }
.cta-lede { font-size:var(--text-lg); color:#C6DBEC; line-height:1.6; margin-bottom:32px; max-width:460px }
.cta-meta { display:flex; gap:20px; margin-top:26px; flex-wrap:wrap; color:#AFC8DC; font-size:var(--text-sm) }
.cta-meta span { display:inline-flex; align-items:center; gap:8px }
.cta-meta a { color:inherit }
.cta-meta .i { color:var(--blue-200) }
.cta-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.cta-card { padding:22px; border-radius:var(--radius-lg); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12) }
.cta-card-icon {
  width:44px; height:44px; border-radius:var(--radius-md); background:rgba(255,255,255,.1);
  color:var(--blue-200); display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.cta-card-t { font-size:var(--text-base); font-weight:700; color:#fff; margin-bottom:4px }
.cta-card-d { font-size:var(--text-xs); color:#AFC8DC; line-height:1.5 }

/* --- Footer -------------------------------------------------------------- */
.site-footer { background:var(--navy-950); color:#9FBBD0 }
.foot-grid {
  max-width:var(--container-xl); margin:0 auto; padding:64px 24px 40px;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px;
}
.foot-grid img { height:64px; width:auto; display:block }
.foot-about { margin-top:18px; font-size:var(--text-sm); max-width:300px; line-height:1.6 }
.foot-col { display:flex; flex-direction:column; gap:12px }
.foot-h { color:#fff; font-weight:700; font-size:var(--text-xs); letter-spacing:.1em }
.foot-col a, .foot-col span { font-size:var(--text-sm); color:#9FBBD0 }
.foot-bar { border-top:1px solid rgba(255,255,255,.08) }
.foot-bar > div {
  max-width:var(--container-xl); margin:0 auto; padding:20px 24px;
  display:flex; justify-content:space-between; font-size:var(--text-xs); flex-wrap:wrap; gap:10px;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:1020px) {
  .nav-pill { display:none }
  .menu { display:block }
  .hero-inner { grid-template-columns:1fr; padding-top:130px }
  .stack { height:440px }
  .g3 { grid-template-columns:repeat(2,1fr) }
  .steps > .step { position:static }
  .step-inner, .work, .split, .cta-grid { grid-template-columns:1fr }
  .work.img-right .work-media { order:0 } .work.img-right .work-body { order:0 }
  .cta { padding:56px 32px }
}
@media (max-width:680px) {
  .nav-row { padding:16px 20px }
  .hero-inner { padding:120px 20px 72px }
  .sec { padding:64px 0 }
  .g3, .g4, .cr, .work-stats { grid-template-columns:1fr }
  .metrics { grid-template-columns:1fr 1fr }
  .stat-pair, .cta-cards { grid-template-columns:1fr }
  .foot-grid { grid-template-columns:1fr 1fr }
  .step-copy, .work-body { padding:28px }
  .sec-head h2, .cta h2 { font-size:var(--text-4xl) }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  .marquee { animation:none }
  [data-para],[data-stack] { transform:none !important }
  [data-depth]:not([data-plane]) { transform:none !important }
  [data-plane] { transform:rotateX(52deg) rotateZ(-32deg) !important }
  * { transition-duration:.01ms !important }
}