/* ============================================================
   TatbeeqSoft — brand palette
   Cool porcelain paper, near-black ink, brand cyan (#00a8e4)
   Type: Sora (display) · Plus Jakarta Sans (body) · IBM Plex Mono (spec)
   ============================================================ */

:root {
  --paper:      #E8E0D0;
  --paper-2:    #DFD6C4;
  --ink:        #211D18;
  --ink-2:      #161310;
  --navy-line:  rgba(233, 224, 208, 0.14);
  --accent:     #C79A4E;
  --accent-2:   #A9741F;
  --accent-ink: #7C531A;
  --muted:      #5E564B;
  --muted-light:rgba(233, 224, 208, 0.62);
  --line:       rgba(33, 29, 24, 0.14);
  --line-soft:  rgba(33, 29, 24, 0.08);
  --card:       #FBF7EF;

  --font-display: "Sora", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* Brand cyan as channels, so every translucent use of it derives from the
     same source. Twenty uses previously repeated the literal 0,168,228. */
  --accent-rgb: 154, 107, 39;
  --paper-rgb:  232, 224, 208;   /* --paper as channels */

  /* Cyan ramp, lightest to base. Each value was a loose hex somewhere in this
     file. The two -alt entries are accidental near-duplicates of the value
     above them (a 2-4 unit difference nobody can see); they are kept
     byte-exact so this refactor changes no pixels. Merging them is a
     separate, visible change. */
  --accent-050:     #FBF3E2;
  --accent-200:     #EBC885;
  --accent-200-alt: #E7C079;
  --accent-400:     #D8A24A;
  --accent-400-alt: #D49E45;
  --accent-600:     #BE8A3C;

  /* Semantic roles that had no name. */
  --on-accent:  #1C1206;              /* text sitting on an accent fill */
  --danger:     #d64545;
  --shadow-rgb: 26, 20, 14;           /* the neutral drop-shadow colour */

  /* Radii. --r was already here and already bypassed twice by a bare 14px. */
  --r-sm:   8px;
  --r-pill: 999px;
  --r-full: 50%;

  /* Durations. --ease was tokenised long ago; these are the other half of
     the motion system. 0.2 / 0.25 / 0.3 already accounted for 65 of the
     file's 80 transition times, so the scale was there, just unnamed. */
  --t-fast: 0.2s;
  --t:      0.25s;
  --t-slow: 0.3s;

  --wrap: 1200px;
  --pad:  clamp(1.25rem, 4vw, 3rem);
  --r:    14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.03; letter-spacing: -0.02em; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

.skip-link {
  position: absolute; inset-inline-start: 1rem; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; border-radius: 0 0 8px 8px;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 0; }

/* A single-colour ring cannot clear 3:1 on both grounds this site uses: the
   cyan reads 7:1 on ink but only 2.4:1 on paper. So the ring is two-tone. The
   inner ink band carries the contrast on light sections, the outer cyan band
   carries it on dark ones, and at least one is always well clear of 3:1. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--accent);
  border-radius: 3px;
}
/* On ink-coloured surfaces the inner band would vanish into the background,
   so the order is reversed and the bright band sits against the dark. */
.hero :focus-visible, .stats :focus-visible, .process :focus-visible,
.proof :focus-visible, .contact :focus-visible, .site-footer :focus-visible {
  outline-color: var(--paper);
  box-shadow: 0 0 0 5px var(--accent);
}

/* ---------- shared bits ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-ink);
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-bottom: 1.4rem;
}
.eyebrow-light { color: var(--accent); }
.eyebrow .dot { width: 7px; height: 7px; border-radius: var(--r-full); background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.2); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.82rem; letter-spacing: 0.03em; font-weight: 500;
  padding: 0.85rem 1.4rem; border-radius: var(--r-pill);
  border: 1.5px solid transparent; transition: transform var(--t) var(--ease), background var(--t), color var(--t), border-color var(--t);
  white-space: nowrap;
}
.btn-solid { background: var(--accent); color: var(--ink); font-weight: 600; }
.btn-solid:hover { background: var(--accent-2); transform: translateY(-2px); }
.btn-ghost { background: transparent; border-color: currentColor; }
.btn-ghost:hover { transform: translateY(-2px); }
.btn-lg { padding: 1rem 1.7rem; font-size: 0.9rem; }
.btn-block { width: 100%; }

.section { padding: clamp(4.5rem, 9vw, 8rem) 0; }
.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-title { font-size: clamp(2rem, 5vw, 3.4rem); text-wrap: balance; }
.section-sub { margin-top: 1.1rem; font-size: 1.12rem; color: var(--muted); max-width: 60ch; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(var(--paper-rgb), 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 72px; }

.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; }
.brand-logo { display: block; height: 42px; width: 160px; background: url(../assets/logo.png) center left / contain no-repeat; }

.nav { display: flex; gap: 2rem; font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.02em; }
.nav a { color: var(--muted); transition: color var(--t-fast); position: relative; padding: 0.3rem 0; }
.nav a:hover { color: var(--ink); }
.nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px; background: var(--accent); transition: width var(--t) var(--ease); }
.nav a:hover::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 0.8rem; }

/* language switcher */
.lang-switch { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; font-weight: 500;
  color: var(--ink); background: transparent; border: 1.5px solid var(--line);
  padding: 0.5rem 0.8rem; border-radius: var(--r-pill); transition: border-color var(--t-fast), background var(--t-fast);
}
.lang-btn:hover { border-color: var(--ink); }
.lang-btn svg:first-child { opacity: 0.7; }
.lang-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 80;
  min-width: 150px; list-style: none; padding: 0.4rem; margin: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 20px 44px -20px rgba(var(--shadow-rgb),0.5);
}
.lang-menu li {
  font-family: var(--font-body); font-size: 0.92rem; color: var(--ink);
  padding: 0.6rem 0.8rem; border-radius: var(--r-sm); cursor: pointer; transition: background 0.15s;
  display: flex; align-items: center; justify-content: space-between;
}
.lang-menu li:hover { background: var(--paper-2); }
.lang-menu li[aria-selected="true"] { color: var(--accent-ink); font-weight: 600; }
.lang-menu li[aria-selected="true"]::after { content: "●"; font-size: 0.6rem; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); transition: transform var(--t-slow) var(--ease), opacity var(--t-fast); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav { display: none; flex-direction: column; gap: 0.4rem; padding: 1rem var(--pad) 1.6rem; border-bottom: 1px solid var(--line-soft); background: var(--paper); }
.mobile-nav a { font-family: var(--font-mono); font-size: 0.95rem; padding: 0.7rem 0; color: var(--ink); border-bottom: 1px solid var(--line-soft); }
.mobile-nav a.btn { border: 1.5px solid transparent; justify-content: center; margin-top: 0.6rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(56% 70% at 84% 62%, rgba(var(--accent-rgb),0.14), transparent 62%),
    radial-gradient(44% 58% at 6% 8%, rgba(var(--accent-rgb),0.11), transparent 60%),
    linear-gradient(180deg, #0b0e13 0%, var(--ink) 52%, #0a0d12 100%);
  color: var(--paper);
  padding: clamp(3.5rem, 6vw, 6rem) 0 clamp(3rem, 5vw, 4.5rem);
}
.hero::before {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.55), transparent);
  opacity: 0.7; pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-grid {
  position: absolute; inset: 0; opacity: 0.55;
  background-image:
    linear-gradient(var(--navy-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--navy-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(110% 90% at 50% 0%, #000 30%, transparent 92%);
  -webkit-mask-image: radial-gradient(110% 90% at 50% 0%, #000 30%, transparent 92%);
  pointer-events: none;
}
.tick { position: absolute; width: 16px; height: 16px; pointer-events: none; opacity: 0.6; }
.tick::before, .tick::after { content: ""; position: absolute; background: var(--accent); }
.tick::before { width: 100%; height: 1.5px; top: 50%; transform: translateY(-50%); }
.tick::after { height: 100%; width: 1.5px; left: 50%; transform: translateX(-50%); }
.tick-tl { top: 24px; left: 24px; } .tick-tr { top: 24px; right: 24px; }
.tick-bl { bottom: 24px; left: 24px; } .tick-br { bottom: 24px; right: 24px; }

.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.14fr 0.86fr;
  gap: clamp(2.5rem, 5vw, 5rem); align-items: center;
  row-gap: clamp(3rem, 6vw, 4.5rem);
}
.hero-copy { max-width: 660px; position: relative; }

.hero .eyebrow {
  border: 1px solid rgba(var(--accent-rgb),0.32);
  background: rgba(var(--accent-rgb),0.08);
  padding: 0.5rem 1rem; border-radius: var(--r-pill);
  color: var(--accent-200-alt); font-size: 0.68rem; letter-spacing: 0.16em;
  backdrop-filter: blur(4px);
}

.hero-title {
  text-wrap: balance;
  font-size: clamp(2.8rem, 4.55vw, 4.3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin: 1.3rem 0 0;
}
.hero-title .hl {
  position: relative; color: var(--accent);
  background: linear-gradient(94deg, var(--accent-400-alt) 0%, var(--accent) 45%, var(--accent-200) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hl-underline {
  position: absolute; left: 0; right: 0; bottom: 0.045em; height: 0.075em; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb),0.15));
  box-shadow: 0 0 18px rgba(var(--accent-rgb),0.7);
  transform: scaleX(0); transform-origin: left;
  animation: underline 0.9s var(--ease) 0.6s forwards;
}
@keyframes underline { to { transform: scaleX(1); } }

.hero-lede { margin-top: 1.7rem; font-size: clamp(1.08rem, 1.8vw, 1.32rem); line-height: 1.7; color: rgba(var(--paper-rgb),0.72); max-width: 56ch; }
.hero-lede em { font-style: normal; color: var(--paper); font-family: var(--font-mono); font-size: 0.92em; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.6rem; }
.hero .btn-lg { padding: 1.05rem 1.8rem; font-size: 0.92rem; border-radius: var(--r); }
.hero .btn-solid {
  background: linear-gradient(135deg, var(--accent-600), var(--accent-2));
  color: var(--on-accent); font-weight: 700;
  box-shadow: 0 14px 36px -12px rgba(var(--accent-rgb),0.6), inset 0 1px 0 rgba(255,255,255,0.28);
}
.hero .btn-solid::after { content: "→"; font-weight: 600; transition: transform var(--t) var(--ease); }
.hero .btn-solid:hover { background: linear-gradient(135deg, var(--accent-400), var(--accent)); }
.hero .btn-solid:hover::after { transform: translateX(3px); }
[dir="rtl"] .hero .btn-solid::after { content: "←"; }
[dir="rtl"] .hero .btn-solid:hover::after { transform: translateX(-3px); }
.hero .btn-ghost {
  color: var(--paper); border-color: rgba(var(--paper-rgb),0.28);
  background: rgba(255,255,255,0.04); backdrop-filter: blur(4px); border-radius: var(--r);
}
.hero .btn-ghost:hover { border-color: rgba(var(--paper-rgb),0.6); background: rgba(255,255,255,0.07); }


/* ---- hero: animated app dashboard ---- */
.hero-app {
  position: relative; z-index: 2;
  border-radius: 20px;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(14,18,24,0.94), rgba(10,14,19,0.97)) padding-box,
    linear-gradient(160deg, rgba(var(--accent-rgb),0.6), rgba(var(--accent-rgb),0.06) 38%, rgba(255,255,255,0.1) 82%) border-box;
  box-shadow:
    0 60px 120px -50px rgba(0,0,0,0.85),
    0 30px 80px -30px rgba(var(--accent-rgb),0.2);
}
.hero-app::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -46px; height: 70px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(var(--accent-rgb),0.28), transparent 75%);
  filter: blur(10px); z-index: -1; pointer-events: none;
}
/* The hero visual is a real product, not a drawing of one: a live frame of
   Quarrow, scaled exactly like the grid thumbnails and openable in a tab.
   The card chrome (.hero-app) is kept; only its contents changed. */
.hero-frame { display: block; padding: 0; color: inherit; text-decoration: none; }
.hero-frame-shot {
  display: block; position: relative; aspect-ratio: 14 / 10; overflow: hidden;
  border-radius: 19px 19px 0 0; background: var(--ink-2);
}
.hero-frame-shot iframe {
  pointer-events: none;
  position: absolute; top: 0; left: 0; width: 1400px; height: 1000px; border: 0;
  transform: scale(var(--shot-scale, 0.4)); transform-origin: top left; pointer-events: none;
}
.hero-frame-cap {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.8rem 1.05rem; border-top: 1px solid rgba(var(--paper-rgb),0.07);
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em; color: var(--muted-light);
}
.hero-frame-cap b { color: var(--paper); font-weight: 600; }
.hero-frame-open { color: var(--accent); white-space: nowrap; transition: color var(--t-fast); }
.hero-frame-open::after { content: " \2197"; }
.hero-frame:hover .hero-frame-open, .hero-frame:focus-visible .hero-frame-open { color: var(--paper); }



.app-chart { position: relative; height: 150px; }
.bars span:nth-child(2) { animation-delay: 0.78s; }
.bars span:nth-child(4) { animation-delay: 0.94s; }
.bars span:nth-child(6) { animation-delay: 1.1s; }
.bars span:nth-child(8) { animation-delay: 1.26s; }

.app-spark { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }





.hero-grid { animation: gridDrift 40s linear infinite; }
@keyframes gridDrift { from { background-position: 0 0, 0 0; } to { background-position: 56px 56px, 56px 56px; } }

/* ---- hero: staggered entrance ---- */
.hero-copy > * { opacity: 0; animation: riseIn 0.8s var(--ease) both; }
.hero-copy > *:nth-child(1) { animation-delay: 0.10s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.22s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.34s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.46s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.58s; }
.hero-app { opacity: 0; animation: riseIn 0.9s var(--ease) 0.55s both; }
@keyframes riseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee { background: var(--ink-2); color: var(--paper); overflow: hidden; padding: 1.1rem 0; border-block: 1px solid rgba(255,255,255,0.06); }
.marquee-track {
  display: flex; align-items: center; gap: 2.5rem; width: max-content;
  font-family: var(--font-mono); font-size: 0.95rem; letter-spacing: 0.04em;
  color: var(--muted-light);
  animation: marquee 32s linear infinite;
}
.marquee-track span { white-space: nowrap; }
.marquee-track .mq-sep { color: var(--accent); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ============================================================
   STATS
   ============================================================ */
.stats { background: var(--ink); color: var(--paper); padding: clamp(3.5rem, 7vw, 6rem) 0; position: relative; overflow: hidden; }
.stats::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--navy-line) 1px, transparent 1px), linear-gradient(90deg, var(--navy-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 90%);
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; position: relative; z-index: 1; }
.stat {
  background: rgba(255,255,255,0.03); border: 1px solid var(--navy-line);
  border-radius: var(--r); padding: 1.8rem 1.6rem 1.7rem; text-align: start; position: relative;
  transition: transform var(--t-slow) var(--ease), border-color var(--t-slow), background var(--t-slow);
}
.stat::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 42px; height: 3px; background: var(--accent); border-radius: 0 0 3px 0; }
.stat:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb),0.5); background: rgba(var(--accent-rgb),0.06); }
.stat-num { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.7rem, 6vw, 4.2rem); letter-spacing: -0.04em; line-height: 1; color: var(--paper); }
.stat-label { display: block; margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }

/* ============================================================
   CAPABILITIES
   ============================================================ */
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cap-card { background: var(--card); padding: clamp(1.8rem, 3vw, 2.6rem); transition: background var(--t-slow), transform var(--t-slow) var(--ease); position: relative; }
.cap-card:hover { background: var(--ink); color: var(--paper); }
.cap-index { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent-ink); letter-spacing: 0.1em; }
.cap-card:hover .cap-index { color: var(--accent); }
.cap-card h3 { font-size: 1.4rem; margin: 1.2rem 0 0.7rem; }
.cap-card p { color: var(--muted); font-size: 0.98rem; }
.cap-card:hover p { color: var(--muted-light); }

/* ============================================================
   WORK
   ============================================================ */
.work-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2rem; }
.filter {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em;
  padding: 0.55rem 1.1rem; border-radius: var(--r-pill);
  background: transparent; border: 1.5px solid var(--line);
  color: var(--muted); transition: all var(--t-fast);
}
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.work-card {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.6rem 1.6rem 1.8rem;
  min-height: 200px; display: flex; flex-direction: column;
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow), border-color var(--t-slow);
  overflow: hidden;
}
.work-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 22px 22px; opacity: 0; transition: opacity var(--t-slow);
}
.work-card:hover { transform: translateY(-4px); border-color: var(--ink); box-shadow: 0 18px 40px -24px rgba(var(--shadow-rgb),0.5); }
.work-card:hover::before { opacity: 1; }
.work-visual { display: block; color: var(--muted); opacity: 0.55; margin-bottom: 1.1rem; position: relative; z-index: 1; transition: color var(--t-slow), opacity var(--t-slow); }
.work-visual svg { width: 52px; height: 34px; }
.work-card:hover .work-visual { color: var(--accent-ink); opacity: 1; }
.work-tag { align-self: flex-start; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.28rem 0.7rem; position: relative; z-index: 1; }
.work-card h3 { font-size: 1.5rem; margin: auto 0 0.5rem; padding-top: 1.2rem; position: relative; z-index: 1; }
.work-card p { color: var(--muted); font-size: 0.95rem; position: relative; z-index: 1; }
.work-card.feature { grid-column: span 2; background: var(--ink); border-color: var(--ink); color: var(--paper); }
.work-card.feature h3 { font-size: 2rem; }
.work-card.feature p { color: var(--muted-light); }
.work-card.feature .work-tag { color: var(--accent); border-color: var(--navy-line); }
.work-card.feature::before { background-image: linear-gradient(var(--navy-line) 1px, transparent 1px), linear-gradient(90deg, var(--navy-line) 1px, transparent 1px); }
.work-card.feature .work-visual { color: var(--muted-light); }
.work-card.feature:hover .work-visual { color: var(--accent); }
.work-card.is-hidden { display: none; }

/* ============================================================
   CASE STUDIES — live previews of shipped projects
   ============================================================ */
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.case-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow), border-color var(--t-slow);
}
.case-card:hover { transform: translateY(-4px); border-color: var(--ink); box-shadow: 0 24px 50px -28px rgba(var(--shadow-rgb),0.55); }

/* 14/10, not 16/10: the page inside is authored at 1400×1000, so a frame of the
   same ratio shows all of it — no dead strip beside it, nothing cropped off the
   bottom. --shot-scale is set per card by js/showcase.js from the card's real
   width, because a fixed scale cannot fit a fluid column at every viewport. */
.case-frame {
  position: relative; display: block; aspect-ratio: 14 / 10; overflow: hidden;
  background: var(--ink); border-bottom: 1px solid var(--line);
}
/* The iframe renders the real site at desktop width, then scales down like a
   screenshot — so the preview can never drift out of date. */
/* Both of these clients open with a full-viewport title card. Correct on the
   real site, but at thumbnail scale it renders as an empty block of colour
   with a small logo floating in it, which left our two REAL projects looking
   weaker than the in-house ones. showcase.js scrolls each preview past that
   opening screen via data-shot-scroll.

   The frame stays exactly 1400x1000. Growing it to reveal lower content does
   not work and is worth recording: the inner hero is sized in vh, so a taller
   iframe simply makes the hero taller and you never leave it. */
.case-frame iframe {
  position: absolute; top: 0; inset-inline-start: 0;
  width: 1400px; height: 1000px; border: 0;
  transform: scale(var(--shot-scale, 0.385)); transform-origin: top left;
  pointer-events: none;
}
[dir="rtl"] .case-frame iframe { inset-inline-start: auto; right: 0; transform-origin: top right; }
.case-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
  background: linear-gradient(180deg, transparent 60%, rgba(10,14,19,0.16));
}
.case-open {
  position: absolute; z-index: 2; inset-block-start: 12px; inset-inline-end: 12px;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: rgba(13,20,26,0.82); color: var(--accent-050); border-radius: var(--r-sm);
  font-size: 14px; backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--t);
}
.case-card:hover .case-open, .case-frame:focus-visible .case-open { opacity: 1; }

.case-meta { padding: 1.4rem 1.5rem 1.6rem; }
.case-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.26rem 0.7rem; margin-bottom: 0.85rem;
}
.case-meta h3 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.case-meta p { color: var(--muted); font-size: 0.96rem; }
.case-stack {
  margin-top: 0.9rem !important; font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.06em; color: var(--accent-ink) !important;
}

.build-heading {
  font-size: 1.05rem; font-family: var(--font-mono); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 1.3rem;
}

@media (max-width: 820px) {
  .case-grid { grid-template-columns: 1fr; }
  .case-frame iframe { transform: scale(0.44); }
}

/* ============================================================
   SHOWCASE GALLERY — products we built ourselves to show capability

   Same live-iframe trick as the case studies above, three across instead of
   two. These are our own products, so the tag says so plainly: passing one
   off as client work is the one thing this section must never do.
   ============================================================ */
.sc-intro {
  color: var(--muted); font-size: 0.97rem; max-width: 68ch;
  margin: -0.5rem 0 1.5rem;
}
/* Two across, matching the case studies above. Three across put a dense
   dashboard at 0.26 scale, where 14px body text lands on ~3.6 physical pixels
   and the whole thumbnail reads as noise. Two across clears 0.4 and the
   numbers in a KPI tile are legible. Length is handled by collapsing to the
   first six rather than by shrinking every card. */
.sc-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem;
  margin-bottom: 1.6rem;
}
.sc-grid.is-collapsed .sc-card:nth-child(n + 7) { display: none; }
.sc-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease),
              box-shadow var(--t-slow), border-color var(--t-slow);
}
.sc-card.is-in { opacity: 1; transform: none; }
.sc-card:hover { border-color: var(--ink); box-shadow: 0 22px 44px -28px rgba(var(--shadow-rgb),0.5); }

.sc-frame {
  position: relative; display: block; aspect-ratio: 14 / 10; overflow: hidden;
  background: var(--ink-2); border-bottom: 1px solid var(--line);
}
/* Renders the real page at desktop width, then scales it down like a
   screenshot — so the thumbnail is always the current build. */
.sc-frame iframe {
  position: absolute; top: 0; inset-inline-start: 0;
  width: 1400px; height: 1000px; border: 0;
  transform: scale(var(--shot-scale, 0.41)); transform-origin: top left;
  pointer-events: none;
}
[dir="rtl"] .sc-frame iframe { inset-inline-start: auto; right: 0; transform-origin: top right; }
.sc-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.07);
  background: linear-gradient(180deg, transparent 62%, rgba(10,14,19,0.2));
}
.sc-open {
  position: absolute; z-index: 2; inset-block-end: 10px; inset-inline-end: 10px;
  background: rgba(13,20,26,0.88); color: var(--accent-050); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em;
  padding: 0.34rem 0.62rem; backdrop-filter: blur(4px);
  opacity: 0; transform: translateY(4px); transition: opacity var(--t), transform var(--t);
}
.sc-card:hover .sc-open,
.sc-frame:focus-visible .sc-open { opacity: 1; transform: none; }

.sc-meta { padding: 1.05rem 1.15rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.sc-tag {
  align-self: flex-start; font-family: var(--font-mono); font-size: 0.58rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 0.22rem 0.6rem; margin-bottom: 0.7rem;
}
.sc-meta h4 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: 1.16rem; line-height: 1.15; margin-bottom: 0.4rem;
}
.sc-meta p { color: var(--muted); font-size: 0.88rem; line-height: 1.55; }
.sc-stack {
  margin-top: auto; padding-top: 0.85rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em;
  color: var(--accent-ink) !important;
}

/* The scale is computed from the card's own width, so the columns are the only
   thing a breakpoint needs to change. */
@media (max-width: 820px) {
  .sc-grid { grid-template-columns: 1fr; }
}

/* "Show all" — the collapsed grid hides 11 of 17, and hidden iframes never
   fetch, so the page loads six previews instead of seventeen. */
.sc-more-wrap { display: flex; justify-content: center; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.sc-more {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 0.8rem 1.6rem; font-family: var(--font-body); font-size: 0.94rem; font-weight: 600;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--ease);
}
.sc-more:hover { border-color: var(--ink); transform: translateY(-2px); }
.sc-more::after {
  content: "↓"; font-size: 0.9rem; transition: transform var(--t-fast);
}
.sc-grid:not(.is-collapsed) + .sc-more-wrap .sc-more::after { transform: rotate(180deg); }

/* ============================================================
   PRICING BAND (homepage summary)

   The number is the point of this section, so the number is the largest thing
   in it. Set like a printed price list — two balanced columns, hairline rows,
   figures right-aligned on tabular numerals — rather than like a pricing page
   full of sales cards. Figures carry data-usd and are rewritten in the
   visitor's currency by js/currency.js.
   ============================================================ */
.price-band { background: var(--paper-2); border-block: 1px solid var(--line-soft); }
.price-band .section-title { text-wrap: balance; }

.pb-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
  margin-bottom: 1.9rem; align-items: stretch;
}
.pb-col {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.4rem 1.6rem 1.3rem; display: flex; flex-direction: column;
}
.pb-h {
  display: flex; align-items: baseline; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted);
  padding-bottom: 0.85rem; border-bottom: 1px solid var(--ink);
}
.pb-h::after {
  content: ""; flex: 1; height: 0; /* keeps the label left, rule full width */
}

.pb-list { list-style: none; padding: 0; margin: 0; }
.pb-list li {
  display: flex; align-items: baseline; gap: 1.2rem;
  padding: 0.82rem 0.15rem; border-bottom: 1px solid var(--line-soft);
  transition: padding-inline 0.18s var(--ease);
}
.pb-list li:last-child { border-bottom: 0; }
.pb-list li:hover { padding-inline-start: 0.45rem; }
.pb-n { font-size: 1rem; font-weight: 500; line-height: 1.3; }
/* The figure is the largest type in the section — that is the whole job. */
.pb-v {
  margin-inline-start: auto; white-space: nowrap;
  font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.pb-v em {
  font-style: normal; font-family: var(--font-body); font-size: 0.74rem;
  font-weight: 400; color: var(--muted); margin-inline-end: 0.25rem;
  letter-spacing: 0;
}
/* margin-top:auto pins both notes to the bottom, so a 4-row column and a
   6-row column still end level instead of one trailing a dead gap. */
.pb-foot {
  margin-top: auto; padding-top: 1.1rem;
  font-size: 0.84rem; line-height: 1.55; color: var(--muted);
}

.pb-assure {
  list-style: none; padding: 1.5rem 0 0; margin: 0 0 1.6rem;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}
.pb-assure li { display: flex; flex-direction: column; gap: 0.35rem; }
.pb-assure b {
  font-size: 1rem; font-weight: 650; display: flex; align-items: center; gap: 0.55rem;
}
.pb-assure b::before {
  content: ""; width: 16px; height: 16px; flex: none; border-radius: var(--r-full);
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}
.pb-assure span { font-size: 0.89rem; line-height: 1.6; color: var(--muted); }

.pb-cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pb-cta .cur-note {
  margin: 0; margin-inline-start: auto; font-size: 0.78rem; color: var(--muted);
}

@media (max-width: 900px) {
  .pb-grid { grid-template-columns: 1fr; }
  .pb-assure { grid-template-columns: 1fr; gap: 1.1rem; padding-top: 1.2rem; }
  .pb-cta .cur-note { margin-inline-start: 0; }
}

/* ============================================================
   PROOF BAND

   The honest stand-in for testimonials: claims a visitor can verify on this
   site rather than quotes they have to believe. Sits outside the numbered
   Fig. NN run on purpose, so adding it did not renumber every section.
   ============================================================ */
.proof { background: var(--ink); color: var(--paper); }
.proof-title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; text-wrap: balance;
  max-width: 22ch; margin-bottom: 0.9rem;
}
.proof-sub {
  color: var(--muted-light); font-size: 1rem; max-width: 56ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.proof-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 2.4rem;
}
.proof-grid li {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding-top: 1.2rem; border-top: 1px solid var(--navy-line);
}
.proof-grid b {
  font-size: 1.06rem; font-weight: 650; line-height: 1.25;
  display: flex; align-items: flex-start; gap: 0.6rem;
}
.proof-grid b::before {
  content: ""; width: 17px; height: 17px; flex: none; margin-top: 0.2rem;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}
.proof-grid span { color: var(--muted-light); font-size: 0.92rem; line-height: 1.6; }
.proof-grid a {
  margin-top: auto; padding-top: 0.35rem;
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em;
  color: var(--accent); border-bottom: 1px solid transparent; align-self: flex-start;
  transition: border-color var(--t-fast);
}
.proof-grid a:hover { border-bottom-color: var(--accent); }

@media (max-width: 980px) { .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 2rem; } }
@media (max-width: 640px) { .proof-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CLIENT FEEDBACK

   Rendered from assets/testimonials.json by js/testimonials.js. The whole
   section carries `hidden` in the markup and is only revealed once there is
   real feedback to show — see that file for why.
   ============================================================ */
.voices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
.voice {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.5rem 1.4rem 1.3rem; margin: 0;
  display: flex; flex-direction: column; position: relative;
}
.voice::before {
  content: "\201C"; position: absolute; inset-block-start: 0.4rem; inset-inline-start: 1.1rem;
  font-family: var(--font-display); font-size: 3.4rem; line-height: 1;
  color: var(--accent); opacity: 0.18;
}
.voice blockquote {
  margin: 0 0 1.2rem; font-size: 1.02rem; line-height: 1.62; position: relative;
}
.voice figcaption { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; }
.voice-av {
  width: 38px; height: 38px; flex: none; border-radius: var(--r-full);
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600;
}
.voice-who b { display: block; font-size: 0.92rem; font-weight: 650; }
.voice-who span { display: block; font-size: 0.79rem; color: var(--muted); }
.voice-project {
  margin-top: 0.9rem; padding-top: 0.85rem; border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em;
  color: var(--accent-ink);
}
@media (max-width: 1080px) { .voices-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .voices-grid { grid-template-columns: 1fr; } }


/* ============================================================
   GLOBAL DELIVERY
   ============================================================ */
.global { background: var(--paper-2); }
.global-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.regions { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.regions li { display: grid; grid-template-columns: 44px 1fr auto; gap: 1rem; align-items: center; padding: 1.05rem 0; border-bottom: 1px solid var(--line); }
.region-code { font-family: var(--font-mono); font-weight: 600; font-size: 0.9rem; color: var(--paper); background: var(--ink); border-radius: 7px; width: 40px; height: 30px; display: grid; place-items: center; letter-spacing: 0.02em; }
.region-name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.region-tz { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.04em; color: var(--muted); }
.region-more .region-code { background: var(--accent); }
.region-more .region-name { color: var(--muted); }

.assurances { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.assurances li { background: var(--card); padding: clamp(1.3rem, 2.4vw, 1.9rem); }
.assurances h3 { font-size: 1.12rem; margin-bottom: 0.5rem; }
.assurances p { color: var(--muted); font-size: 0.94rem; }

/* ============================================================
   PROCESS  (dark)
   ============================================================ */
.process-list { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.process-list li { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 4vw, 3rem); padding: clamp(1.6rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.process-num { font-family: var(--font-mono); font-size: 1rem; color: var(--accent-ink); letter-spacing: 0.1em; }
.process-list h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.process-list p { color: var(--muted); margin-top: 0.6rem; max-width: 62ch; }

/* ============================================================
   STUDIO
   ============================================================ */
.studio-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.studio-copy p { color: var(--muted); margin-top: 1.1rem; font-size: 1.05rem; }
.studio-copy .btn { margin-top: 1.8rem; }
.studio-facts { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.studio-facts li { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.fact-k { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.fact-v { font-family: var(--font-display); font-weight: 600; text-align: end; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { background: var(--paper-2); }
.faq-list { max-width: 880px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.4rem 0.2rem; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem); color: var(--ink); transition: color var(--t-fast);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary:hover { color: var(--accent-ink); }
.faq-mark { position: relative; flex: 0 0 auto; width: 20px; height: 20px; }
.faq-mark::before, .faq-mark::after { content: ""; position: absolute; background: var(--accent); border-radius: 2px; transition: transform var(--t-slow) var(--ease), opacity var(--t-slow); }
.faq-mark::before { top: 9px; left: 0; width: 20px; height: 2px; }
.faq-mark::after { left: 9px; top: 0; width: 2px; height: 20px; }
.faq-item[open] .faq-mark::after { transform: rotate(90deg); opacity: 0; }
.faq-a { overflow: hidden; }
.faq-item[open] .faq-a { animation: faqOpen 0.35s var(--ease); }
@keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq-a p { color: var(--muted); font-size: 1.02rem; max-width: 70ch; padding: 0 0.2rem 1.6rem; margin-top: -0.2rem; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { background: var(--ink); color: var(--paper); }
.contact .section-title { color: var(--paper); }
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.contact-copy > p { color: var(--muted-light); margin-top: 1.1rem; font-size: 1.08rem; max-width: 45ch; }
.contact-links { list-style: none; padding: 0; margin-top: 2.4rem; }
.contact-links li { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--navy-line); align-items: center; }
.contact-links li:last-child { border-bottom: 1px solid var(--navy-line); }
.contact-k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-light); }
.contact-v { display: inline-flex; align-items: center; gap: 0.6rem; }
.contact-links a { color: var(--paper); border-bottom: 1px solid transparent; transition: border-color var(--t-fast), color var(--t-fast); }
.contact-links a:hover { color: var(--accent); border-color: var(--accent); }

.estimate { background: var(--card); color: var(--ink); border-radius: var(--r); padding: clamp(1.8rem, 3vw, 2.6rem); }
.form-eyebrow { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 1.6rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px;
  padding: 0.85rem 1rem; transition: border-color var(--t-fast), box-shadow var(--t-fast); resize: vertical;
}
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235c6270' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.4rem;
}
.field input::placeholder, .field textarea::placeholder { color: #A69E90; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.15); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--danger); }
.estimate .btn { margin-top: 0.4rem; }
.form-note { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); margin-top: 1rem; text-align: center; }
.form-note a { display: inline-block; padding-block: 0.25rem; color: var(--accent-ink); border-bottom: 1px solid currentColor; }
.form-status { font-family: var(--font-mono); font-size: 0.82rem; margin-top: 0.9rem; text-align: center; min-height: 1.2em; }
.form-status.ok { color: var(--accent-ink); }
.form-status.err { color: var(--danger); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--ink-2); color: var(--muted-light); padding-top: clamp(3rem, 6vw, 5rem); }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; }
.footer-brand .brand { color: var(--paper); margin-bottom: 1.1rem; }
.footer-brand .brand-logo { background-image: url(../assets/logo-light.png); }
.footer-brand p { max-width: 34ch; font-size: 0.98rem; }
.footer-nav { display: flex; flex-direction: column; gap: 0.7rem; font-family: var(--font-mono); font-size: 0.85rem; }
.footer-col-title { color: var(--paper); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.4rem; }
/* 22px tall was under the 24x24 minimum target size. Padding makes the hit
   area comfortable without moving anything: the gap absorbs it. */
.footer-nav a { transition: color var(--t-fast); display: inline-block; padding-block: 0.25rem; }
.footer-nav a:hover { color: var(--accent); }
.footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; padding-block: 1.6rem; border-top: 1px solid rgba(255,255,255,0.08); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; }

/* ============================================================
   PRICING PAGE
   ============================================================ */
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; align-items: stretch; }
.price-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.7rem 1.5rem 1.6rem;
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow), border-color var(--t-slow);
}
.price-card:hover { transform: translateY(-4px); border-color: var(--ink); box-shadow: 0 18px 40px -24px rgba(var(--shadow-rgb),0.5); }
.price-card.featured { border-color: var(--accent); box-shadow: 0 18px 44px -26px rgba(var(--accent-rgb),0.55); }
.price-badge {
  position: absolute; top: -11px; inset-inline-start: 1.5rem;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--accent); color: var(--on-accent); font-weight: 600; padding: 0.3rem 0.7rem; border-radius: var(--r-pill);
}
.price-card h3 { font-size: 1.18rem; margin-bottom: 0.6rem; }
.price-amt { font-family: var(--font-display); font-weight: 800; font-size: 2rem; letter-spacing: -0.03em; color: var(--ink); margin-bottom: 0.7rem; }
.price-amt .from { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 0.1rem; }
.price-desc { color: var(--muted); font-size: 0.94rem; margin-bottom: 1.1rem; }
.price-list { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: 0.55rem; }
.price-list li { position: relative; padding-inline-start: 1.4rem; font-size: 0.92rem; color: var(--ink); }
.price-list li::before {
  content: "✓"; position: absolute; inset-inline-start: 0; top: -1px;
  color: var(--accent); font-weight: 700; font-size: 0.85rem;
}
.price-time { margin-top: auto; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.price-time b { color: var(--ink); }

.cur-bar {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  margin-top: 2.2rem; font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.06em; color: var(--muted);
}
.cur-label { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.68rem; }
.cur-pick {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--ink); background: rgba(33,29,24,0.05);
  border: 1px solid rgba(33,29,24,0.22); border-radius: var(--r-sm);
  padding: 0.4rem 0.7rem; cursor: pointer;
}
.cur-pick:hover { border-color: var(--accent-ink); }
.cur-pick option { background: var(--ink); color: var(--paper); }
.cur-note { color: var(--muted); font-size: 0.7rem; letter-spacing: 0.03em; }

.tbl-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.price-table { width: 100%; border-collapse: collapse; font-size: 0.96rem; }
.price-table th {
  text-align: start; padding: 0.95rem 1.2rem; background: var(--paper-2);
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.price-table td { padding: 0.95rem 1.2rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table tbody tr:hover { background: rgba(var(--accent-rgb),0.04); }
.price-table .amt { font-family: var(--font-display); font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-foot { margin-top: 1.1rem; font-size: 0.9rem; color: var(--muted); max-width: 74ch; }

.model-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.model-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1.9rem 1.7rem; }
.model-card h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.model-card > p { color: var(--muted); font-size: 0.97rem; margin-bottom: 1.2rem; }
.model-amt { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.02em; color: var(--accent-ink); margin-bottom: 0.9rem !important; }
.model-amt .from { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: block; }
.model-amt .per { font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; color: var(--muted); }

@media (max-width: 1040px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .price-grid, .model-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CAREERS PAGE
   ============================================================ */
.hero-sub { padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem); }
.hero-title-sm { font-size: clamp(2.4rem, 6.5vw, 4.6rem); }

.roles { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.role { display: grid; grid-template-columns: 1fr auto auto; gap: clamp(1rem, 3vw, 2.5rem); align-items: center; padding: clamp(1.4rem, 3vw, 2rem) 0; border-bottom: 1px solid var(--line); }
.role-main h3 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.role-main p { color: var(--muted); margin-top: 0.4rem; font-size: 0.98rem; max-width: 52ch; }
.role-meta { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.role-apply { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.03em; padding: 0.6rem 1.3rem; border-radius: var(--r-pill); border: 1.5px solid var(--ink); color: var(--ink); transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease); }
.role-apply:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }

/* jobs board */
.jobs-group { margin-bottom: 2.4rem; }
.jobs-cat {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-ink); font-weight: 600;
  padding-bottom: 0.7rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--line);
}
.roles-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.role-pick {
  width: 100%; text-align: start; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.05rem 1.2rem; transition: transform var(--t) var(--ease), border-color var(--t), box-shadow var(--t);
}
.role-pick b { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); }
.role-pick span {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em;
  color: var(--accent-ink); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.3rem 0.75rem;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.role-pick:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 16px 34px -22px rgba(var(--accent-rgb),0.65); }
.role-pick:hover span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
html[lang="ar"] .role-pick span, html[lang="ar"] .jobs-cat { letter-spacing: normal; text-transform: none; }

.field input[type="file"] {
  padding: 0.7rem; cursor: pointer; font-family: var(--font-body); font-size: 0.92rem;
}
.field input[type="file"]::file-selector-button {
  font-family: var(--font-mono); font-size: 0.76rem; cursor: pointer;
  margin-inline-end: 0.8rem; padding: 0.5rem 0.9rem; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--paper-2); color: var(--ink);
}
.field input[type="file"]::file-selector-button:hover { background: var(--paper); border-color: var(--accent); }

.apply-card { background: var(--card); color: var(--ink); border-radius: var(--r); padding: clamp(1.8rem, 3vw, 2.8rem); }
.apply-lead { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.apply-email { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 3vw, 1.7rem); color: var(--accent-ink); margin: 0.7rem 0 1rem; word-break: break-all; }
.apply-hint { color: var(--muted); font-size: 0.95rem; margin-bottom: 1.6rem; }

@media (max-width: 640px) {
  .role { grid-template-columns: 1fr auto; }
  .role-meta { grid-column: 1 / -1; order: 3; }
  .role-apply { order: 2; }
}
@media (max-width: 940px) { .roles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .roles-grid { grid-template-columns: 1fr; } }

/* ============================================================
   WHATSAPP FAB
   ============================================================ */
/* WhatsApp's own green is the loudest colour anywhere on this site and it
   belongs to another company's brand — as a filled disc with a green glow it
   read as an advertisement bolted onto the page. The glyph alone is what
   people recognise, so the disc is now the site's own ink with a hairline to
   hold it against both the light sections and the dark hero. Smaller too: at
   62px with a 6px glow ring it covered the hero mockup on a phone. */
.wa-fab {
  position: fixed; right: clamp(1rem, 3vw, 1.8rem); bottom: clamp(1rem, 3vw, 1.8rem);
  z-index: 70; width: 52px; height: 52px; border-radius: var(--r-full);
  display: grid; place-items: center; color: #fff;
  background: rgba(13, 20, 26, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 22px -10px rgba(10, 16, 22, 0.7);
  transition: transform var(--t) var(--ease), box-shadow var(--t), background var(--t);
}
.wa-fab svg { width: 25px; height: 25px; }
.wa-fab:hover {
  transform: translateY(-2px);
  background: rgba(13, 20, 26, 1);
  box-shadow: 0 14px 30px -12px rgba(10, 16, 22, 0.8);
}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-app { max-width: 560px; width: 100%; justify-self: start; }
  .nav { display: none; }
  .nav-toggle { display: flex; }
  .header-actions .btn-solid { display: none; }
  .mobile-nav.open { display: flex; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .work-card.feature { grid-column: span 2; }
  .studio-inner, .contact-inner { grid-template-columns: 1fr; }
  .global-inner { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .cap-grid { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .work-card.feature { grid-column: span 1; }
  .contact-links li { grid-template-columns: 1fr; gap: 0.3rem; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .assurances { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
}

/* ============================================================
   ARABIC + RTL
   ============================================================ */
html[lang="ar"] {
  --font-display: "IBM Plex Sans Arabic", "Sora", sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Plus Jakarta Sans", sans-serif;
  --font-mono: "IBM Plex Sans Arabic", "IBM Plex Mono", monospace;
}
/* Arabic letters must stay joined: no letter-spacing, no uppercasing */
html[lang="ar"] .eyebrow, html[lang="ar"] .btn, html[lang="ar"] .nav a, html[lang="ar"] .stat-label, html[lang="ar"] .work-tag, html[lang="ar"] .fact-k, html[lang="ar"] .contact-k, html[lang="ar"] .region-tz, html[lang="ar"] .form-eyebrow, html[lang="ar"] .field label, html[lang="ar"] .footer-col-title, html[lang="ar"] .footer-base, html[lang="ar"] .role-meta, html[lang="ar"] .apply-lead, html[lang="ar"] .lang-btn, html[lang="ar"] .filter, html[lang="ar"] .process-num, html[lang="ar"] .section-title, html[lang="ar"] .hero-title, html[lang="ar"] .stat-num {
  letter-spacing: normal;
  text-transform: none;
}
html[lang="ar"] body { font-size: 17px; }

/* directional mirroring */
[dir="rtl"] .stat { text-align: right; }
[dir="rtl"] .fact-v { text-align: left; }
[dir="rtl"] .nav a::after { left: auto; right: 0; }
[dir="rtl"] .hl-underline { transform-origin: right; }
[dir="rtl"] .tick-tl { left: auto; right: 24px; }
[dir="rtl"] .tick-tr { right: auto; left: 24px; }
[dir="rtl"] .tick-bl { left: auto; right: 24px; }
[dir="rtl"] .tick-br { right: auto; left: 24px; }
[dir="rtl"] .field select {
  background-position: left 1rem center;
  padding-right: 1rem; padding-left: 2.4rem;
}

.footer-legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.footer-legal a { display: inline-block; padding-block: 0.2rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.25); }
.footer-legal a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* ============================================================
   CONSENT BANNER
   Sits above the WhatsApp button on mobile so neither is trapped
   under the other while a decision is pending.
   ============================================================ */
.consent {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
  background: var(--ink-2); color: var(--muted-light);
  border-top: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 -18px 40px -22px rgba(0,0,0,0.7);
  transform: translateY(100%);
  transition: transform 0.45s var(--ease);
}
.consent.is-in { transform: translateY(0); }
.consent-inner {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: 1.15rem var(--pad);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap;
}
.consent-copy { flex: 1 1 380px; min-width: 0; }
.consent-title {
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.4rem;
}
.consent-body { font-size: 0.93rem; line-height: 1.55; }
.consent-body a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.consent-body a:hover { color: var(--accent); }
.consent-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
.consent-actions .btn { padding: 0.7rem 1.5rem; }
.consent .btn-ghost { border-color: rgba(255,255,255,0.28); color: var(--paper); }
.consent .btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; }

@media (max-width: 620px) {
  .consent-inner { padding-bottom: 1.15rem; }
  .consent-actions { width: 100%; }
  .consent-actions .btn { flex: 1; }
}
/* Keep the floating WhatsApp button clear of the banner while it is up.
   Shifted via `bottom`, not `transform`, so the button's hover lift still works.
   consent.js measures the banner and publishes its height as --consent-h. */
.wa-fab { transition: transform var(--t) var(--ease), box-shadow var(--t), bottom 0.45s var(--ease); }
body.has-consent .wa-fab { bottom: calc(clamp(1rem, 3vw, 1.8rem) + var(--consent-h, 0px) + 0.9rem); }

/* ============================================================
   LEGAL / POLICY PROSE
   ============================================================ */
.legal { max-width: 78ch; }
.legal h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  margin-top: clamp(2.75rem, 5vw, 3.75rem); margin-bottom: 0.9rem;
  padding-top: 1.75rem; border-top: 1px solid var(--line-soft);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 {
  font-size: 1.02rem; margin-top: 1.9rem; margin-bottom: 0.5rem;
  font-family: var(--font-body); font-weight: 700; letter-spacing: 0;
}
.legal p, .legal li { color: var(--muted); font-size: 1.02rem; }
.legal p + p { margin-top: 0.9rem; }
.legal ul { margin: 0.9rem 0 0; padding-inline-start: 1.2rem; display: grid; gap: 0.55rem; }
.legal li::marker { color: var(--accent); }
.legal a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--accent); }
.legal strong { color: var(--ink); font-weight: 600; }

.legal-meta {
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.06em;
  color: var(--muted); text-transform: uppercase;
  padding-bottom: 1.75rem; border-bottom: 1px solid var(--line);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
}

/* the one thing on the page the owner must replace before launch */
.legal .todo {
  display: inline-block; background: rgba(var(--accent-rgb),0.12);
  border: 1px dashed var(--accent); border-radius: 6px;
  padding: 0.1rem 0.5rem; color: var(--accent-ink);
  font-family: var(--font-mono); font-size: 0.86em;
}

.legal-table { width: 100%; border-collapse: collapse; margin-top: 1.1rem; font-size: 0.95rem; }
.legal-table th, .legal-table td {
  text-align: start; padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--line-soft); color: var(--muted); vertical-align: top;
}
.legal-table th { color: var(--ink); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-scroll { overflow-x: auto; }


/* ============================================================
   MOTION SYSTEM  (js/motion.js — Motion / motion.dev)
   Only the parts a spring cannot express live here: the resting
   state reveals animate FROM, and the two chrome elements motion.js
   drives. Everything else is solved per-frame in JS.
   ============================================================ */

/* Header gains weight once you leave the top, so it separates from the
   page instead of floating over it. Transitioned, not sprung — a
   background colour has no mass to model. */
.site-header {
  transition: background 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
}
.site-header.is-stuck {
  background: rgba(var(--paper-rgb), 0.94);
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 rgba(9, 101, 144, 0.10), 0 8px 28px -18px rgba(16, 32, 44, 0.45);
}

/* Reading progress. Sits on the header's bottom edge, scaled from the
   left (from the right in Arabic — it should run with the text, not
   against it). transform only, so it never triggers layout. */
.scroll-bar {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-ink));
  transform: scaleX(0); transform-origin: left center;
  will-change: transform; pointer-events: none;
}
[dir="rtl"] .scroll-bar {
  transform-origin: right center;
  background: linear-gradient(270deg, var(--accent), var(--accent-ink));
}

html.motion-on .cap-card, html.motion-on .btn { transition-property: background-color, border-color, color, box-shadow; }


/* ============================================================
   SCROLL STORY + HERO DEPTH  (native, zero-dependency)

   The one place this site spends its boldness: the 21 products. Their
   entrance is driven by the scrollbar itself — scrubbed, reversible,
   tied to exactly where the visitor is — rather than fired once by an
   observer. Everything here is progressive enhancement behind @supports:
   a browser without scroll-driven animations keeps the existing one-shot
   reveal in showcase.js untouched, and reduced motion turns it all off.

   Why scroll-driven instead of the JS observer that already exists: an
   IntersectionObserver can miss an element crossed too fast and leave it
   invisible for good (motion.js carries a geometric sweep to catch exactly
   that). A scroll-driven animation cannot get stuck — its state is a pure
   function of scroll position, so anything above the fold is, by
   definition, at 100%.
   ============================================================ */
.sc-progress { display: none; }   /* only exists where the timeline does */

@supports (animation-timeline: view()) {

  /* The header progress bar no longer needs a script: it is the scrollbar. */
  .scroll-bar { animation: scrollBar linear both; animation-timeline: scroll(root); }
  @keyframes scrollBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* ---------- the 21 products: scrubbed entrance ----------
     Handoff from showcase.js: that script still adds .is-in and an inline
     transitionDelay. Both are inert here — an animation owns opacity and
     transform outright (animation declarations outrank normal ones), and
     the transition is narrowed so it can never fight the scrub. */
  .sc-card {
    opacity: 1; transform: none;
    transition: box-shadow var(--t-slow), border-color var(--t-slow);
    animation: scStory linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
  /* The right-hand column lands a beat later, so a row reads as a
     sequence rather than a pair popping in together. */
  .sc-card:nth-child(even) { animation-range: entry 12% entry 72%; }
  @keyframes scStory {
    from { opacity: 0; transform: translateY(44px) scale(0.965); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
  }

  /* ---------- progress through the collection ----------
     A rule that fills as the grid passes through the viewport. It encodes
     something true — how far through the 21 you are — which is the test a
     structural device has to pass to earn its place. The grid publishes a
     named view timeline; the rule sits before it in the DOM, so their
     shared ancestor has to lift that timeline into scope for it. */
  .work > .wrap { timeline-scope: --sc-story; }
  .sc-grid      { view-timeline: --sc-story block; }
  .sc-progress {
    display: block; height: 2px; margin: 0 0 1.4rem;
    background: var(--line); position: relative; overflow: hidden;
  }
  .sc-progress::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--accent), var(--accent-ink));
    transform-origin: left center; transform: scaleX(0);
    animation: scProgress linear both;
    animation-timeline: --sc-story;
    animation-range: entry 0% exit 100%;
  }
  [dir="rtl"] .sc-progress::after {
    transform-origin: right center;
    background: linear-gradient(270deg, var(--accent), var(--accent-ink));
  }
  @keyframes scProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* ---------- hero depth ----------
     As the hero leaves, its layers part: the mockup rises and recedes
     faster than the copy, the copy fades, the nodes drift. Depth on
     departure, scrubbed to the scrollbar. The riseIn entrance already on
     the mockup is kept in the list — a bare `animation:` would drop it. */
  .hero { view-timeline: --hero block; }
  .hero-copy {
    animation: heroCopyOut linear both;
    animation-timeline: --hero;
    animation-range: exit 0% exit 100%;
  }
  .hero-app {
    animation: riseIn 0.9s var(--ease) 0.55s both, heroAppOut linear both;
    animation-timeline: auto, --hero;
    animation-range: normal, exit 0% exit 100%;
  }
  @keyframes heroCopyOut  { to { opacity: 0.15; transform: translateY(-6vh); } }
  @keyframes heroAppOut   { to { opacity: 0.25; transform: translateY(-16vh) scale(0.96); } }
  }

/* ============================================================
   PAGE TRANSITIONS  (cross-document View Transitions, no JavaScript)

   Same-origin navigation crossfades one page into the next, with the
   header and the WhatsApp button pinned so they stay put while the
   content moves beneath them. Both the outgoing and the incoming page
   must opt in, which every page does by sharing this stylesheet. A
   browser without support simply navigates as it always did.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  .wa-fab      { view-transition-name: wa-fab; }
  ::view-transition-old(root) { animation: 140ms ease-in both vtOut; }
  ::view-transition-new(root) { animation: 260ms cubic-bezier(0.22, 1, 0.36, 1) both vtIn; }
  @keyframes vtOut { to   { opacity: 0; } }
  @keyframes vtIn  { from { opacity: 0; transform: translateY(10px); } }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  .hero-copy > *, .hero-app { opacity: 1 !important; animation: none !important; }
  .hero-grid { animation: none !important; }
  /* motion.js stops driving these when the preference flips mid-session,
     but it can also never have started — cover both. */
  .scroll-bar { display: none; }
  .site-header { transition: none; }
  /* scroll story + hero depth: off, and the progress rule gone. */
  .sc-card, .sc-progress::after, .hero-copy { animation: none !important; }
  .sc-card { opacity: 1; transform: none; }
  .sc-progress { display: none; }
}

/* ============================================================
   HERO — "Brass & Bone" warm-premium PROOF (scoped to .hero only)
   A reversible override layer: a warm bone-linen field carrying a single
   brass "seam", with the live Quarrow frame as the one dark instrument.
   Nothing outside .hero is touched — delete this block to revert.
   Contrast: brass #9A6B27 (3.55:1) only on lines/large marks; small brass
   text uses #7C531A (5.15:1); ink #211D18 on bone ≈13:1.
   ============================================================ */
.hero {
  --h-bg:        #E8E0D0;   /* bone-linen ground            */
  --h-bg-2:      #E2D9C6;   /* foot of the ground gradient  */
  --h-pool:      #F1EADB;   /* warm upper-left light pool    */
  --h-ink:       #211D18;   /* warm graphite near-black      */
  --h-ink-soft:  #4A443A;   /* lede / body                   */
  --h-brass:     #9A6B27;   /* lines + large marks ONLY      */
  --h-brass-deep:#7C531A;   /* the only brass for small text */
  --h-brass-lt:  #C79A4E;   /* underline highlight, frame    */
  --h-onbone:    #EDE6D8;   /* label on the graphite button  */
  --h-frame:     #1F1B16;   /* dark product bezel            */
  --h-frame-2:   #1A1712;
  --h-cap:       rgba(237,230,216,0.60);
  --h-cap-b:     #E7DECB;

  background:
    radial-gradient(60% 55% at 12% 4%, var(--h-pool), transparent 60%),
    linear-gradient(180deg, var(--h-bg) 0%, var(--h-bg) 55%, var(--h-bg-2) 100%);
  color: var(--h-ink);
  padding: clamp(4.25rem, 6.5vw, 6.5rem) 0 clamp(3rem, 5vw, 4.5rem);
}
.hero::before {   /* top member of the brass seam */
  background: linear-gradient(90deg, transparent, rgba(154,107,39,0.55), transparent);
  opacity: 0.85;
}
.hero-grid {      /* brushed-material grid, calmer + warm line */
  opacity: 0.40;
  background-image:
    linear-gradient(rgba(124,83,26,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,83,26,0.10) 1px, transparent 1px);
}
/* vertical member of the seam — a ledger margin threading the copy.
   inset-inline-start flips to the right margin under [dir="rtl"]. */
.hero-copy::before {
  content: ""; position: absolute;
  inset-inline-start: -1.4rem; top: 0.3rem; bottom: 0.3rem; width: 1px;
  background: var(--h-brass); opacity: 0.5; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
@media (max-width: 940px) { .hero-copy::before { display: none; } }

.hero .eyebrow {  /* masthead label, not a chip */
  border: 0; border-bottom: 1px solid rgba(154,107,39,0.42);
  background: none; backdrop-filter: none; border-radius: 0;
  padding: 0 0 0.5rem; color: var(--h-ink);
  font-size: 0.68rem; letter-spacing: 0.2em;
}
.hero-title {
  font-weight: 700; color: var(--h-ink);
  letter-spacing: -0.035em; line-height: 1.05;
  font-size: clamp(2.9rem, 4.6vw, 4.5rem); margin: 1.6rem 0 0;
}
.hero-title .hl {  /* the word stays crisp ink; brass lives only in the underline */
  color: var(--h-ink); background: none;
  -webkit-text-fill-color: currentColor;
  -webkit-background-clip: border-box; background-clip: border-box;
}
.hl-underline {    /* inlaid brass, not neon glow (draw mechanic kept) */
  height: 0.06em;
  background: linear-gradient(90deg, var(--h-brass-deep), var(--h-brass-lt));
  box-shadow: 0 1px 0 rgba(33,29,24,0.25);
}
.hero-lede { color: var(--h-ink-soft); }
.hero-lede em { color: var(--h-brass-deep); }   /* etymology "specimen" marks */

.hero .btn-solid {
  background: var(--h-ink); color: var(--h-onbone); font-weight: 700;
  box-shadow: 0 12px 30px -14px rgba(33,29,24,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
}
.hero .btn-solid:hover {   /* accent becomes a colour event on interaction */
  background: #2C271F; transform: translateY(-2px);
  box-shadow: 0 18px 36px -14px rgba(154,107,39,0.42), inset 0 1px 0 rgba(255,255,255,0.10);
}
.hero .btn-ghost {
  color: var(--h-ink); border-color: rgba(154,107,39,0.55);
  background: rgba(154,107,39,0.05); backdrop-filter: none;
}
.hero .btn-ghost:hover {
  border-color: rgba(154,107,39,0.9); background: rgba(154,107,39,0.12);
  transform: translateY(-2px);
}

.hero-app {   /* dark instrument: warm graphite bezel, brass edge, layered warm lift */
  background:
    linear-gradient(var(--h-frame), var(--h-frame-2)) padding-box,
    linear-gradient(160deg, rgba(154,107,39,0.55), rgba(124,83,26,0.10) 40%, rgba(237,230,216,0.14) 85%) border-box;
  box-shadow:
    0 2px 4px rgba(33,29,24,0.10),
    0 24px 48px -24px rgba(33,29,24,0.30),
    0 40px 90px -50px rgba(33,29,24,0.48);
  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.hero-app::after { background: radial-gradient(50% 100% at 50% 0%, rgba(33,29,24,0.22), transparent 75%); }
.hero-app.hero-frame:hover, .hero-app.hero-frame:focus-visible {
  box-shadow:
    0 4px 8px rgba(33,29,24,0.12),
    0 28px 56px -24px rgba(33,29,24,0.34),
    0 48px 100px -50px rgba(154,107,39,0.30);
}
.hero-frame-cap { color: var(--h-cap); border-top: 1px solid rgba(237,230,216,0.08); }
.hero-frame-cap b { color: var(--h-cap-b); }
.hero-frame-open { color: var(--h-brass-lt); }
.hero-frame:hover .hero-frame-open, .hero-frame:focus-visible .hero-frame-open { color: var(--h-onbone); }

/* ============================================================
   THE WARM LEDGER — homepage redesign layer (2026-09-23)
   Layout/type/component overhaul on top of the Brass & Bone palette.
   Native CSS only. Appended last so it wins on cascade; delete this
   whole region (from this banner to EOF) to revert to the recolor.
   Structure: (1) foundation tokens + grid, (2) global type,
   (3) buttons, then per-section rebuilds below.
   ============================================================ */

/* ---- (1) foundation: modular type scale, tracking, leading, motion, grid ---- */
:root {
  /* type scale — one big gap, nothing lands in the 24-40px mush zone */
  --fs-display: clamp(3.25rem, 1.5rem + 6vw, 6rem);      /* 52 -> 96  hero */
  --fs-title-1: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);      /* 40 -> 64  major sections */
  --fs-title-2: clamp(2rem, 1.5rem + 1.8vw, 2.75rem);     /* 32 -> 44  default section */
  --fs-heading: 1.5rem;                                   /* 24        cards / faq */
  --fs-lede:    clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);  /* 20 -> 24  ledes */
  --fs-body:    1.1875rem;                                /* 19        body */
  --fs-small:   0.9375rem;                                /* 15 */
  --fs-label:   0.8125rem;                                /* 13        labels/eyebrows */
  --fs-micro:   0.75rem;                                  /* 12        indices */
  /* tracking per tier (not one blanket value) */
  --tr-display: -0.02em;
  --tr-title:   -0.014em;
  --tr-heading: -0.008em;
  --tr-body:     0;
  --tr-label:    0.1em;
  /* leading inverse to size */
  --lh-display: 0.98;
  --lh-title:   1.04;
  --lh-lede:    1.42;
  --lh-body:    1.6;
  /* motion vocabulary */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-ui:    200ms;
  --dur-enter: 520ms;
  --dur-hero:  720ms;
  /* editorial hairline + wider container */
  --hair: 1px solid rgba(33,29,24,0.14);
  --hair-brass: 1px solid rgba(154,107,39,0.42);
  --wrap-wide: 1320px;
}

/* real 12-column editorial grid + full-bleed helper (RTL-safe) */
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.1rem, 2.2vw, 2.2rem); align-items: start; }
.wrap--wide { max-width: var(--wrap-wide); }
.bleed-end { margin-inline-end: calc(50% - 50vw); }
.bleed-start { margin-inline-start: calc(50% - 50vw); }
@media (max-width: 860px) {
  .grid12 { grid-template-columns: 1fr; gap: 2rem; }
  .grid12 > * { grid-column: 1 / -1 !important; }
  .bleed-end, .bleed-start { margin-inline: 0; }
}

/* ---- (2) global type pass ---- */
body { font-size: var(--fs-body); line-height: var(--lh-body); }

.section { padding: clamp(4.5rem, 8vw, 7.5rem) 0; }
.section-head { max-width: 46ch; margin-bottom: clamp(2.4rem, 4.5vw, 4rem); }
.section-title {
  font-size: var(--fs-title-2);
  letter-spacing: var(--tr-title);
  line-height: var(--lh-title);
  font-weight: 700;
  text-wrap: balance;
}
.section-title--major { font-size: var(--fs-title-1); }
.section-sub {
  margin-top: 1.15rem;
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  color: var(--muted);
  max-width: 46ch;
  text-wrap: pretty;
}

/* eyebrows: pull the dated 0.22em tracking back to 0.1em; keep them rare */
.eyebrow { letter-spacing: var(--tr-label); font-size: var(--fs-label); margin-bottom: 1.1rem; }

/* numerals: align all real data */
.stat-num, .pb-v, .pb-v span, .region-tz, .region-code, .fact-v, .process-num, .proof-grid b {
  font-variant-numeric: tabular-nums lining-nums;
}

/* nav underline: scaleX wipe from the reading edge, not a width grow */
.nav a::after {
  width: 100%; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-ui) var(--ease-in-out);
}
.nav a:hover::after { width: 100%; transform: scaleX(1); }
[dir="rtl"] .nav a::after { transform-origin: right; }

/* ---- (3) buttons: four-state ladder, flat fills, tinted shadows ---- */
.btn {
  transition: transform var(--dur-micro) var(--ease-out-soft),
              background var(--dur-ui) var(--ease-out-soft),
              border-color var(--dur-ui), box-shadow var(--dur-ui);
}
.btn-solid {
  background: var(--accent-2); color: var(--on-accent); font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 1px 2px rgba(var(--shadow-rgb),0.18);
}
.btn-solid:hover {
  background: var(--accent-ink); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 8px 18px -8px rgba(var(--shadow-rgb),0.4);
}
.btn-solid:active { transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255,255,255,0.15); }
.btn-ghost { border-color: rgba(154,107,39,0.5); color: var(--ink); }
.btn-ghost:hover { background: rgba(154,107,39,0.08); transform: translateY(-1px); border-color: rgba(154,107,39,0.85); }
.btn-ghost:active { transform: translateY(0); }

/* ---- (4) per-section compositions ---- */

/* HERO — asymmetric 7/5 split, display at 96px */
.hero-inner { grid-template-columns: repeat(12, 1fr); align-items: center; }
.hero-copy { grid-column: 1 / 8; max-width: none; }
.hero-app  { grid-column: 8 / 13; }
.hero-title { font-size: var(--fs-display); letter-spacing: var(--tr-display); line-height: var(--lh-display); max-width: 16ch; }
.hero-lede  { font-size: var(--fs-lede); line-height: var(--lh-lede); max-width: 46ch; }

/* MARQUEE — full-bleed strip framed by brass hairlines */
.marquee { border-block: 1px solid rgba(154,107,39,0.34); }

/* STATS — one ruled figure row, no card chrome */
.stats-grid { gap: 0; }
.stat { background: none; border: 0; border-radius: 0; padding: 0.4rem clamp(1rem,2.4vw,2rem) 0.4rem; }
.stat + .stat { border-inline-start: 1px solid var(--navy-line); }
.stat::before { display: none; }
.stat:hover { transform: none; background: none; border-color: transparent; }
.stat:nth-child(2), .stat:nth-child(4) { margin-top: 1.4rem; }
.stat-num { font-size: clamp(3.25rem, 8vw, 6.5rem); font-weight: 700; }
.stat-label { position: relative; margin-top: 1rem; padding-top: 1rem; color: var(--accent); }
.stat-label::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 40px; height: 2px; background: var(--accent); }

/* CAPABILITIES — asymmetric bento, hairline cells, mono index, quiet hover */
.cap-grid { grid-template-columns: repeat(12, 1fr); gap: clamp(0.9rem, 1.8vw, 1.5rem); background: none; border: 0; border-radius: 0; overflow: visible; counter-reset: cap; }
.cap-card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r); padding: clamp(1.5rem, 2.4vw, 2.3rem); counter-increment: cap; transition: background 0s; }
.cap-card::before { content: "0" counter(cap); position: absolute; top: 1.3rem; inset-inline-start: 1.5rem; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.12em; color: var(--accent-ink); }
.cap-card::after { content: ""; position: absolute; top: 0; inset-inline: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: inline-start; transition: transform var(--dur-ui) var(--ease-out-soft); border-radius: var(--r) var(--r) 0 0; }
.cap-card h3 { font-size: var(--fs-heading); letter-spacing: var(--tr-heading); margin-top: 2rem; transition: padding-inline-start var(--dur-ui) var(--ease-out-soft); }
.cap-card p { color: var(--muted); margin-top: 0.6rem; font-size: var(--fs-small); line-height: 1.55; }
.cap-card:hover { background: var(--card); color: inherit; }
.cap-card:hover::before { color: var(--accent); }
.cap-card:hover::after { transform: scaleX(1); }
.cap-card:hover h3 { padding-inline-start: 0.4rem; }
.cap-card:nth-child(1) { grid-column: 1 / 7; grid-row: span 2; }
.cap-card:nth-child(2) { grid-column: 7 / 10; }
.cap-card:nth-child(3) { grid-column: 10 / 13; }
.cap-card:nth-child(4) { grid-column: 7 / 10; }
.cap-card:nth-child(5) { grid-column: 10 / 13; }
.cap-card:nth-child(6) { grid-column: 1 / 13; }

/* WORK — chrome-free alternating media rows */
.case-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,3vw,2.5rem); }
.case-card { background: none; border: 0; box-shadow: none; border-radius: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.4rem,3vw,3rem); align-items: center; grid-column: 1 / 13; }
.case-card:hover { transform: none; box-shadow: none; }
.case-card:nth-child(1) .case-meta  { grid-column: 1 / 5; }
.case-card:nth-child(1) .case-frame { grid-column: 5 / 13; }
.case-card:nth-child(2) .case-frame { grid-column: 1 / 9; }
.case-card:nth-child(2) .case-meta  { grid-column: 9 / 13; }
.case-meta { padding: 0; }
.case-meta h3 { font-size: var(--fs-heading); margin-top: 0.5rem; }
.case-tag { color: var(--accent-ink); }
.case-meta > * { position: relative; }
.case-card .case-frame { position: relative; transition: box-shadow var(--dur-ui) var(--ease-out-soft); border-radius: var(--r-sm); overflow: hidden; }
.case-card:hover .case-frame { box-shadow: 0 20px 50px -24px rgba(var(--shadow-rgb),0.4); }

/* PRICING — two-column ledger with dotted leaders */
.pb-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(2rem,4vw,4.5rem); }
.pb-col:nth-child(1) { grid-column: 1 / 6; }
.pb-col:nth-child(2) { grid-column: 6 / 13; }
.pb-list li { display: flex; align-items: baseline; gap: 0.25rem; }
.pb-n { flex: 1 1 auto; display: flex; align-items: baseline; min-width: 0; }
.pb-n::after { content: ""; flex: 1 1 auto; border-bottom: 1px dotted var(--line); margin: 0 0.5rem; transform: translateY(-0.25em); min-width: 1.2rem; }
.pb-v { flex: 0 0 auto; white-space: nowrap; }
.pb-assure { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: var(--hair); }
.pb-assure li { border-inline-start: var(--hair); padding: clamp(1.1rem,2vw,1.6rem) clamp(1rem,2vw,1.5rem); }
.pb-assure li:first-child { border-inline-start: 0; }

/* GLOBAL — real 5/7 split */
.global-inner { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(2rem,4vw,4rem); align-items: start; }
.global-inner .assurances { grid-column: 1 / 6; }
.global-inner .regions { grid-column: 7 / 13; }

/* PROCESS — editorial ledger with an oversized mono index rail */
.process-list li { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem,3vw,2.4rem); align-items: baseline; border-top: var(--hair); padding: clamp(1.4rem,3vw,2.2rem) 0; }
.process-list li:last-child { border-bottom: var(--hair); }
.process-num { font-family: var(--font-mono); font-size: clamp(2.4rem,5.5vw,4.25rem); font-weight: 400; line-height: 0.9; color: var(--accent-ink); }

/* STUDIO — 7/5 split with an editorial large-initial */
.studio-inner { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(2rem,4vw,4rem); align-items: start; }
.studio-copy  { grid-column: 1 / 8; }
.studio-facts { grid-column: 8 / 13; }
.studio-copy > p[data-i18n="studio.p1"]::first-letter { font-size: 3.2em; font-weight: 700; float: inline-start; line-height: 0.78; padding-inline-end: 0.12em; padding-top: 0.05em; color: var(--ink); }
.studio-facts li { display: flex; justify-content: space-between; gap: 1rem; border-top: var(--hair); padding: 0.9rem 0; }
.studio-facts li:last-child { border-bottom: var(--hair); }

/* FAQ — sticky left rail, hairline disclosure rows */
.faq .wrap { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(1.5rem,4vw,4rem); }
.faq .section-head { grid-column: 1 / 4; position: sticky; top: 92px; align-self: start; margin-bottom: 0; }
.faq-list { grid-column: 4 / 13; }

/* PROOF — registration-cell grid on the dark ground */
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(var(--paper-rgb),0.15); border-inline-start: 1px solid rgba(var(--paper-rgb),0.15); }
.proof-grid li { border-inline-end: 1px solid rgba(var(--paper-rgb),0.15); border-bottom: 1px solid rgba(var(--paper-rgb),0.15); padding: clamp(1.4rem,2.4vw,2rem); }
.proof-grid li b { position: relative; padding-inline-start: 1.1rem; display: inline-block; }
.proof-grid li b::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.55em; width: 0.55rem; height: 0.55rem; background: var(--accent); }

/* CONTACT — 5/7 dark split, form on a warm-white panel */
.contact-inner { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(2rem,4vw,4rem); align-items: start; }
.contact-copy { grid-column: 1 / 6; }
.estimate { grid-column: 7 / 13; background: var(--card); border-radius: var(--r); padding: clamp(1.6rem,3vw,2.5rem); }
.estimate .field label { color: var(--ink); }
.estimate .form-eyebrow { color: var(--accent-ink); }
.estimate .field input, .estimate .field textarea, .estimate .field select { background: #F3EEE2; box-shadow: inset 0 1px 2px rgba(var(--shadow-rgb),0.06); border: 1px solid var(--line); color: var(--ink); }
.estimate .field input:focus, .estimate .field textarea:focus, .estimate .field select:focus { border-inline-start: 2px solid var(--accent-ink); box-shadow: inset 0 1px 2px rgba(var(--shadow-rgb),0.06), 0 0 0 3px rgba(var(--accent-rgb),0.14); }
.estimate .form-note { color: var(--muted); }

/* FOOTER — baseline directory grid */
.footer-inner { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(1.5rem,3vw,3rem); }
.footer-brand { grid-column: 1 / 5; }
.footer-nav:nth-of-type(1) { grid-column: 6 / 9; }
.footer-nav:nth-of-type(2) { grid-column: 9 / 12; }

/* ---- mobile: collapse every custom grid to a single column ---- */
@media (max-width: 860px) {
  .hero-copy, .hero-app,
  .cap-card, .case-card, .case-card > *,
  .pb-col, .pb-assure li,
  .global-inner .assurances, .global-inner .regions,
  .studio-copy, .studio-facts,
  .faq .section-head, .faq-list,
  .contact-copy, .estimate,
  .footer-brand, .footer-nav:nth-of-type(1), .footer-nav:nth-of-type(2) {
    grid-column: 1 / -1 !important;
  }
  .cap-card:nth-child(1) { grid-row: auto !important; }
  .cap-grid, .case-card, .pb-grid, .global-inner, .studio-inner, .contact-inner, .faq .wrap, .footer-inner { grid-template-columns: 1fr; }
  .pb-assure { grid-template-columns: 1fr; }
  .pb-assure li { border-inline-start: 0; border-top: var(--hair); }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .faq .section-head { position: static; }
  .stat:nth-child(2), .stat:nth-child(4) { margin-top: 0; }
}
@media (max-width: 560px) {
  .proof-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat + .stat { border-inline-start: 0; }
}

/* ---- (5) detail fixes ---- */
/* capabilities flagship: use the tall cell — index pinned top, title/desc anchored bottom */
.cap-card:nth-child(1) { display: flex; flex-direction: column; }
.cap-card:nth-child(1) h3 { margin-top: auto; }
/* work case rows: top-aligned editorial caption sitting under a rule */
.case-card { align-items: start; }
.case-meta { border-top: 1px solid var(--ink); padding-top: 1.1rem; }
.case-tag { display: block; margin-bottom: 0.35rem; }
.case-stack { margin-top: 0.7rem; }

/* ---- (6) button consistency + contrast: graphite solid CTA site-wide (matches hero) ---- */
.btn-solid {
  background: var(--ink); color: var(--paper); font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 1px 2px rgba(var(--shadow-rgb),0.20);
}
.btn-solid:hover {
  background: #33291F; transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 20px -8px rgba(var(--shadow-rgb),0.45);
}
.btn-solid:active { transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); }

/* ---- (7) capabilities bento revision: wide flagship, no tall empty cell ---- */
.cap-card:nth-child(1) { display: block; grid-column: 1 / 7; grid-row: auto; }
.cap-card:nth-child(1) h3 { margin-top: 2rem; }
.cap-card:nth-child(2) { grid-column: 7 / 10; }
.cap-card:nth-child(3) { grid-column: 10 / 13; }
.cap-card:nth-child(4) { grid-column: 1 / 4; }
.cap-card:nth-child(5) { grid-column: 4 / 7; }
.cap-card:nth-child(6) { grid-column: 7 / 13; }

/* ---- (8) sub-page heroes (.hero-sub): keep them simple, not the homepage 7/5 grid ---- */
.hero-sub .hero-inner { display: block; }
.hero-sub .hero-copy { max-width: 760px; }
.hero-sub .hero-title { font-size: var(--fs-title-1); max-width: 20ch; }

/* ---- (9) remove capabilities bento numbering (non-sequence tell) ---- */
/* drops the CSS counter index on the homepage bento AND hides careers' markup
   .cap-index spans (which were also double-numbering under the CSS counter). */
.cap-card::before { content: none; }
.cap-index { display: none; }
.cap-card h3, .cap-card:nth-child(1) h3 { margin-top: 0; }

/* ---- (10) mobile render-cost trims (recover mobile Lighthouse perf) ---- */
/* On phones/tablets the sticky-header backdrop blur re-blurs every scroll frame,
   and the drifting grid + noise + frame glow are continuous/expensive paints for
   little visual gain at that size. Desktop keeps the full treatment. */
@media (max-width: 860px) {
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(var(--paper-rgb), 0.97); }
  .hero-grid { animation: none; }
  .hero::after { display: none; }
  .hero-app::after { display: none; }
}