/* ============================================================
   AVAIA — Design System
   Digital growth. Intelligent systems.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,500;1,9..144,600&family=Inter:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* --- color: ink / paper (light) — neutral white/grey/black, not warm/beige --- */
  --ink:        #121212;
  --ink-soft:   #2A2A2A;
  --paper:      #FAFAFA;
  --paper-dim:  #F0F0F0;
  --paper-line: #E0E0E0;
  --muted:      #6B6B6B;

  /* --- color: dark surfaces --- */
  --night:       #0D0D0D;
  --night-soft:  #1A1A1A;
  --night-line:  #333333;
  --muted-dark:  #9E9E9E;
  --paper-on-dark: #F5F5F5;

  /* --- accent (AI / tech signal, used sparingly) --- */
  --accent:     #4F46E0;
  --accent-2:   #E14F8A;
  --accent-ink: #FFFFFF;
  --accent-soft: #EDECFB;

  /* --- semantic --- */
  --success: #1C7C54;
  --gold: #C2A06E;

  /* --- type --- */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  /* --- spacing scale --- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* --- radii / shadow / motion --- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --shadow-card: 0 1px 2px rgba(20,18,15,.04), 0 12px 32px -16px rgba(20,18,15,.16);
  --shadow-card-dark: 0 1px 2px rgba(0,0,0,.3), 0 20px 40px -20px rgba(0,0,0,.6);
  --ease: cubic-bezier(.16,.84,.44,1);
  --dur-sm: 220ms;
  --dur-md: 420ms;

  --container: 1220px;
}

/* ============================================================ reset */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
html.js-smooth-scroll{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
section[id], .service-row[id]{ scroll-margin-top: 96px; }
html{ overflow-x: hidden; }
body{
  margin: 0;
  /* clip, not hidden: overflow-x:hidden forces overflow-y to compute as auto
     (per the CSS Overflow spec's "hidden implies scroll container" rule),
     which turns body into its own scrolling context and silently breaks every
     position:sticky descendant (the 3-portfolio stack, the homepage work
     cards). overflow:clip clips the same horizontal jitter without creating
     a scroll container, so sticky positioning still resolves against the
     real viewport. */
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, video{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p{ margin: 0; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select{ font: inherit; color: inherit; }
::selection{ background: var(--accent); color: var(--accent-ink); }

.wrap{ max-width: var(--container); margin: 0 auto; padding-left: var(--sp-6); padding-right: var(--sp-6); }
@media (max-width: 640px){ .wrap{ padding-left: var(--sp-5); padding-right: var(--sp-5); } }

.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper); padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus{ left: 0; }

:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ============================================================ type */
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
em{ font-style: italic; font-family: var(--font-display); color: var(--accent); }

.eyebrow{
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); margin: 0 0 var(--sp-4);
}
.eyebrow .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.section-dark .eyebrow{ color: var(--muted-dark); }

h1, .h1{ font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.03; letter-spacing: -.02em; }
h2, .h2{ font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.08; letter-spacing: -.015em; }
h3, .h3{ font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.2; }
.lede{ font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--muted); max-width: 46ch; }
.section-dark .lede{ color: var(--muted-dark); }

p{ color: var(--ink-soft); }
.section-dark p{ color: var(--paper-on-dark); }

.section-head{ max-width: 720px; margin-bottom: var(--sp-8); }
.section-head h2{ margin-top: var(--sp-2); }

/* ============================================================ buttons */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .95em 1.7em; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  transition: transform var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease);
  cursor: pointer; white-space: nowrap; min-height: 44px;
}
.btn-primary{ background: var(--ink); color: var(--paper); }
.btn-primary:hover{ background: var(--accent); transform: translateY(-2px); }
.section-dark .btn-primary{ background: var(--paper); color: var(--ink); }
.section-dark .btn-primary:hover{ background: var(--accent); color: #fff; }

.btn-ghost{ background: transparent; color: var(--ink); border: 1.5px solid var(--paper-line); }
.btn-ghost:hover{ border-color: var(--ink); transform: translateY(-2px); }
.section-dark .btn-ghost{ color: var(--paper-on-dark); border-color: var(--night-line); }
.section-dark .btn-ghost:hover{ border-color: var(--paper-on-dark); }

.btn-accent{ background: var(--accent); color: #fff; }
.btn-accent:hover{ background: var(--ink); transform: translateY(-2px); }

.btn-small{ padding: .7em 1.35em; font-size: .88rem; }
.btn-block{ width: 100%; }

/* ============================================================ header / nav */
.site-header{
  position: fixed; top: 1rem; left: 50%; transform: translateX(-50%);
  z-index: 500; padding: 0;
  width: calc(100% - var(--sp-6) * 2); max-width: 960px;
}
.header-inner{
  display: flex; align-items: center; justify-content: space-between;
  height: auto; gap: var(--sp-6); position: relative;
  max-width: 960px; margin: 0 auto;
  padding: .6em .6em .6em 1.7em;
  background: color-mix(in srgb, var(--paper) 55%, transparent);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid color-mix(in srgb, var(--paper-line) 70%, transparent);
  border-radius: 999px;
  box-shadow: 0 10px 40px -10px rgba(14,13,11,.18), 0 2px 8px rgba(14,13,11,.05);
}
.logo{ display: flex; align-items: center; flex: none; }
.logo img{ height: 34px; width: auto; }

.main-nav{ display: flex; align-items: center; gap: var(--sp-7); }
.main-nav a{
  font-size: .95rem; font-weight: 500; color: var(--muted);
  position: relative; padding: .3em 0; transition: color var(--dur-sm) var(--ease);
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ color: var(--ink); }
.main-nav a[aria-current="page"]::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--accent); border-radius: 2px;
}

.header-actions{ display: flex; align-items: center; gap: var(--sp-4); flex: none; }
.header-cta{ flex: none; }
.cart-link{
  flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; color: var(--ink); cursor: pointer;
  transition: background var(--dur-sm) var(--ease); border: 0; background: none; font: inherit;
}
.cart-link:hover{ background: var(--paper-dim); }
.cart-link svg{ width: 20px; height: 20px; }
.cart-badge{
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 999px; background: var(--accent-2); color: #fff;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
  display: none; align-items: center; justify-content: center;
}

/* ============================================================ CART DRAWER */
.cart-drawer-backdrop{
  position: fixed; inset: 0; background: rgba(14,13,11,.5); z-index: 300;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-md) var(--ease);
}
.cart-drawer-backdrop.is-open{ opacity: 1; pointer-events: auto; }
.cart-drawer{
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 301;
  background: var(--paper); box-shadow: -20px 0 60px rgba(14,13,11,.25);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--dur-md) var(--ease);
}
.cart-drawer.is-open{ transform: translateX(0); }
.cart-drawer-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--paper-line); flex: none;
}
.cart-drawer-head h3{ font-size: 1.2rem; }
.cart-drawer-close{ width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cart-drawer-close:hover{ background: var(--paper-dim); }
.cart-drawer-body{ flex: 1; overflow-y: auto; padding: var(--sp-5) var(--sp-6); }
.cart-drawer-empty{ color: var(--muted); font-size: .92rem; padding: var(--sp-7) 0; text-align: center; }
.cart-item{ display: flex; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--paper-line); }
.cart-item img{ width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); flex: none; background: var(--paper-dim); }
.cart-item-info{ flex: 1; min-width: 0; }
.cart-item-name{ font-weight: 600; font-size: .92rem; }
.cart-item-price{ font-family: var(--font-mono); font-size: .82rem; color: var(--muted); margin-top: .3em; }
.cart-item-remove{ font-size: .78rem; color: var(--muted); text-decoration: underline; margin-top: .5em; cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; }
.cart-item-remove:hover{ color: var(--ink); }
.cart-drawer-foot{ flex: none; padding: var(--sp-5) var(--sp-6); border-top: 1px solid var(--paper-line); }
.cart-subtotal{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-4); }
.cart-subtotal-label{ font-size: .88rem; color: var(--muted); }
.cart-subtotal-value{ font-family: var(--font-display); font-size: 1.3rem; }

.menu-toggle{
  display: none; flex: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  flex-direction: column; gap: 5px; border-radius: 50%;
}
.menu-toggle span{ width: 20px; height: 1.5px; background: var(--ink); transition: background var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease), opacity var(--dur-sm) var(--ease); }
/* same white-over-dark-hero inversion already used for the logo/nav/cart —
   no opaque circle needed, the icon itself just matches them */
body.has-dark-hero .menu-toggle span{ background: var(--paper-on-dark); }
body.has-dark-hero .header-inner.is-scrolled .menu-toggle span{ background: var(--ink); }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav{
  display: none; flex-direction: column; gap: var(--sp-7);
  position: fixed; inset: 0; z-index: 400; overflow-y: auto;
  padding: calc(var(--sp-8) + 56px) var(--sp-5) var(--sp-8);
  background: var(--paper);
}
.mobile-nav[data-open="true"]{ display: flex; }
body.menu-is-open{ overflow: hidden; }

.mobile-nav-feature{
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--paper-dim); border-radius: var(--radius-lg); padding: var(--sp-6);
}
.mobile-nav-feature-icon{
  width: 56px; height: 56px; border-radius: var(--radius-md); background: #fff; color: var(--ink);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(14,13,11,.08);
}
.mobile-nav-feature h3{ font-family: var(--font-body); font-size: 1.15rem; font-weight: 700; margin: 0; }
.mobile-nav-feature p{ font-family: var(--font-body); font-size: .92rem; color: var(--muted); margin: 0; }
.mobile-nav-feature-btn{
  margin-top: var(--sp-3); background: var(--ink); color: #fff; text-align: center;
  padding: 1em 1.5em; border-radius: 999px; font-weight: 700; font-size: 1rem; font-family: var(--font-body);
}

.mobile-nav-links{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.mobile-nav-links a{
  display: flex; align-items: center; gap: var(--sp-4);
  font-family: var(--font-body); font-weight: 700; font-size: 1.15rem; color: var(--ink);
}
.mobile-nav-icon{
  flex: none; width: 48px; height: 48px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 14%, var(--paper)); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}

@media (max-width: 900px){
  .main-nav, .header-cta{ display: none; }
  .menu-toggle{ display: flex; order: -1; }
}

/* ============================================================ sections */
section{ padding: var(--sp-10) 0; }
.section-tight{ padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.section-dark{ background: var(--night); color: var(--paper-on-dark); }
.section-dim{ background: var(--paper-dim); }

.page-hero{ position: relative; padding-top: calc(var(--sp-7) + 64px); padding-bottom: var(--sp-7); }
.page-hero .eyebrow{ margin-bottom: var(--sp-4); position: relative; z-index: 1; }
.page-hero h1{ max-width: 16ch; position: relative; z-index: 1; }
.page-hero .lede{ margin-top: var(--sp-4); max-width: 54ch; position: relative; z-index: 1; }
/* same formula as .services-glow just below — one continuous atmosphere
   carrying from the page-hero into the services section, not two treatments */
.atmosphere-glow{
  position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(620px 420px at 20% 25%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%),
    radial-gradient(560px 400px at 82% 70%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%);
  filter: blur(60px);
  animation: atmosphere-drift 22s ease-in-out infinite alternate;
}
@keyframes atmosphere-drift{ from{ transform: translate(0,0) scale(1); } to{ transform: translate(5%, -4%) scale(1.1); } }
@media (prefers-reduced-motion: reduce){ .atmosphere-glow{ animation: none; } }

/* ============================================================ grain overlay */
.grain{
  position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================ reveal-on-scroll */
[data-reveal]{ opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-split-reveal]{ opacity: 1 !important; transform: none !important; transition: none !important; }
.reveal-word-mask{ display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .22em; margin-bottom: -.22em; }
.reveal-word{ display: inline-block; opacity: 0; transform: translateY(115%) rotate(2deg); transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-split-reveal].is-visible .reveal-word{ opacity: 1; transform: none; }
[data-reveal].is-visible{ opacity: 1; transform: none; }
[data-reveal-stagger] > *{ opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal-stagger].is-visible > *{ opacity: 1; transform: none; }
[data-reveal-stagger].is-visible > *:nth-child(1){ transition-delay: 0ms; }
[data-reveal-stagger].is-visible > *:nth-child(2){ transition-delay: 70ms; }
[data-reveal-stagger].is-visible > *:nth-child(3){ transition-delay: 140ms; }
[data-reveal-stagger].is-visible > *:nth-child(4){ transition-delay: 210ms; }
[data-reveal-stagger].is-visible > *:nth-child(5){ transition-delay: 280ms; }
[data-reveal-stagger].is-visible > *:nth-child(6){ transition-delay: 350ms; }
@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-reveal-stagger] > *, [data-reveal-stagger] > .phone-mock, .reveal-word{ opacity: 1; transform: none; transition: none; }
}

/* ============================================================ chips / tags */
.chip-list{ display: flex; flex-wrap: wrap; gap: .5em; margin: var(--sp-4) 0; }
.chip-list li{
  font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  padding: .5em .9em; border-radius: 999px; border: 1px solid var(--paper-line); color: var(--muted);
}
.section-dark .chip-list li{ border-color: var(--night-line); color: var(--muted-dark); }
.chip-list li:has(a){ padding: 0; border-color: transparent; }
.chip-list li a{ display: block; padding: .5em .9em; border-radius: 999px; border: 1px solid var(--paper-line); transition: border-color var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease); }
.chip-list li a:hover{ border-color: var(--gold); color: var(--gold); }
.pill{
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  padding: .45em 1em; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
}
.pill-outline{ background: transparent; border: 1px solid var(--paper-line); color: var(--muted); }
.section-dark .pill-outline{ border-color: var(--night-line); color: var(--muted-dark); }

/* ============================================================ cards */
.card{
  background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius-md);
  padding: var(--sp-6); box-shadow: var(--shadow-card);
}
.section-dark .card{ background: var(--night-soft); border-color: var(--night-line); box-shadow: var(--shadow-card-dark); }

/* ============================================================ footer */
.site-footer{ background: var(--night); color: var(--muted-dark); padding: var(--sp-8) 0 var(--sp-6); }
.footer-top{ display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--sp-7); padding-bottom: var(--sp-8); border-bottom: 1px solid var(--night-line); }
.footer-brand p{ color: var(--muted-dark); max-width: 32ch; font-size: .92rem; }
.footer-col h4{ font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--paper-on-dark); font-weight: 400; margin-bottom: var(--sp-4); }
.footer-col a{ display: block; padding: .4em 0; color: var(--muted-dark); font-size: .92rem; transition: color var(--dur-sm); }
.footer-col a:hover{ color: var(--paper-on-dark); }
.footer-signature{
  display: block; text-align: center; padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--night-line);
}
.footer-signature-mark{
  display: inline-block; width: min(460px, 52%); aspect-ratio: 1669 / 581;
  background: linear-gradient(135deg, #6f6f6f 0%, #d9d9d9 28%, #ffffff 48%, #cccccc 68%, #666666 100%);
  -webkit-mask-image: url('images/logo-white-crop.png'); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
  mask-image: url('images/logo-white-crop.png'); mask-size: contain; mask-repeat: no-repeat; mask-position: center;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.4));
  transition: transform var(--dur-md) var(--ease);
}
.footer-signature:hover .footer-signature-mark{ transform: translateY(-2px); }
@media (max-width: 640px){
  .footer-signature{ padding: var(--sp-7) 0; }
  .footer-signature-mark{ width: min(300px, 68%); }
}
.footer-bottom{ display: flex; justify-content: space-between; align-items: center; padding-top: var(--sp-6); font-size: .82rem; flex-wrap: wrap; gap: var(--sp-3); }
.back-to-top{ display: inline-flex; align-items: center; gap: .4em; color: var(--muted-dark); }
.back-to-top:hover{ color: var(--paper-on-dark); }

@media (max-width: 900px){
  .footer-top{ grid-template-columns: 1fr 1fr; row-gap: var(--sp-7); }
}
@media (max-width: 560px){
  .footer-top{ grid-template-columns: 1fr; }
}

/* ============================================================ misc */
.divider{ height: 1px; background: var(--paper-line); border: 0; margin: 0; }
.section-dark .divider{ background: var(--night-line); }
.text-mono{ font-family: var(--font-mono); }
.visually-hidden{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* stat / number display */
.stat-num{ font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem,4vw,3.4rem); letter-spacing: -.02em; color: var(--ink); }
.section-dark .stat-num{ color: var(--paper-on-dark); }
.stat-unit{ font-size: .55em; margin-left: .1em; color: var(--accent); }
.stat-label{ display: block; margin-top: var(--sp-2); color: var(--muted); font-size: .92rem; max-width: 26ch; }
.section-dark .stat-label{ color: var(--muted-dark); }

/* gradient text for AI moments — used sparingly */
.grad-text{
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

@media (max-width: 640px){
  section{ padding: var(--sp-8) 0; }
  .page-hero{ padding-top: calc(var(--sp-7) + 56px); padding-bottom: var(--sp-7); }
}

/* ============================================================ HOME HERO */
.hero-title{ margin-top: var(--sp-3); }
.hero-sub{ font-size: 1.08rem; max-width: 48ch; line-height: 1.5; }
.hero-ctas{ display: flex; gap: var(--sp-4); margin-top: var(--sp-5); flex-wrap: wrap; }
.hero-proof{ display: flex; gap: var(--sp-6); margin-top: var(--sp-6); flex-wrap: wrap; }
.hero-proof span{ display: block; font-size: .82rem; color: var(--muted-dark); }
.hero-proof strong{ display: block; font-family: var(--font-display); font-size: 1.3rem; color: var(--paper-on-dark); }

.hero-dark{ position: relative; overflow: hidden; padding-top: calc(var(--sp-8) + 48px); padding-bottom: var(--sp-7); }
.hero-dark-inner{ position: relative; text-align: center; max-width: 780px; }
.hero-dark-inner .eyebrow{ justify-content: center; }
.hero-dark-inner .hero-sub{ margin-left: auto; margin-right: auto; }
.hero-dark-inner .hero-ctas{ justify-content: center; }
.hero-dark-inner .hero-proof{ justify-content: center; }

.hero-sphere-stage{
  position: relative; width: 100%; max-width: 460px; aspect-ratio: 1/1; margin: var(--sp-6) auto;
}
.hero-ring{
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.1);
}
.hero-ring-1{ inset: -14%; }
.hero-ring-2{ inset: -28%; border-color: rgba(255,255,255,.06); }
.hero-sphere{
  --hl-x: 34%; --hl-y: 30%; --hl2-x: 32%; --hl2-y: 28%; --glow-a: .35;
  position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle at var(--hl-x) var(--hl-y), color-mix(in srgb, var(--accent) 85%, white 10%) 0%, var(--accent) 32%, var(--accent-2) 62%, var(--night) 92%);
  box-shadow: 0 0 100px 10px color-mix(in srgb, var(--accent) calc(var(--glow-a) * 100%), transparent);
  transition: box-shadow 280ms var(--ease);
}
.hero-sphere::after{
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at var(--hl2-x) var(--hl2-y), rgba(255,255,255,.35), transparent 45%);
  pointer-events: none;
}
.hero-sphere-canvas{
  position: absolute; inset: 8%; border-radius: 50%; width: 84%; height: 84%;
  cursor: grab; touch-action: none;
}
.hero-sphere-canvas:active{ cursor: grabbing; }

@media (max-width: 640px){
  .hero-sphere-stage{ max-width: 300px; margin: var(--sp-5) auto; }
}


/* ============================================================ MARQUEE (verticals / trust strip) */
.marquee{ overflow: hidden; border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); }
.marquee-track{ display: flex; gap: var(--sp-9); padding: var(--sp-5) 0; width: max-content; animation: marquee 34s linear infinite; }
.marquee-track span{ font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; color: var(--muted); white-space: nowrap; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation: none; overflow-x: auto; } }

/* ============================================================ homepage: media marquee (mixed photo/video, auto-scrolling) */
.media-marquee-section{ padding: var(--sp-8) 0; }
.media-marquee{ overflow: hidden; }
.media-marquee-track{ display: flex; gap: var(--sp-5); width: max-content; animation: media-marquee-scroll 85s linear infinite; }
.media-marquee-item{ margin: 0; flex: none; height: 460px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.media-marquee-item img, .media-marquee-item video{ height: 100%; width: auto; display: block; object-fit: cover; }
.media-marquee-item.is-photo{ aspect-ratio: 2/3; }
.media-marquee-item.is-video{ aspect-ratio: 9/16; }
@keyframes media-marquee-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (max-width: 900px){ .media-marquee-item{ height: 340px; } }
@media (max-width: 700px){ .media-marquee-item{ height: 260px; } }
@media (prefers-reduced-motion: reduce){ .media-marquee-track{ animation: none; overflow-x: auto; } }

/* ============================================================ SERVICES (light animated grid) */
/* one shared glow (.atmosphere-glow, moved up into this wrapper) covers the
   hero and the services grid together — two independent per-section glows
   never lined up, which is what kept reading as a seam between them */
.hero-services-atmosphere{ position: relative; }
/* this wrapper is much taller than a normal page-hero (hero + the whole
   services grid), so .atmosphere-glow's usual two fixed-position blobs land
   somewhere arbitrary along that height — which is exactly what was showing
   up as a warm horizontal band right at the hero/services seam. One large,
   softly-centered glow near the top instead avoids that band entirely. */
.hero-services-atmosphere > .atmosphere-glow{
  inset: 0; height: 70%;
  background: radial-gradient(70% 65% at 50% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 75%);
}
.services-stage{
  position: relative;
  background: var(--paper); color: var(--ink);
  /* no top padding, and no overflow:hidden — overflow:hidden was clipping
     the glow with a hard rectangular edge exactly at the section boundary,
     which is what read as "a line" between the hero and this section. body
     already clips horizontal bleed (overflow-x:clip), so this section
     doesn't need its own clip — the glow can now fade past the boundary
     the same way the hero's does, instead of being cut off by it. */
  padding-top: 0;
}

.service-list{
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-7) var(--sp-6);
  perspective: 1600px;
}
/* mobile: same sticky-stack scroll effect as the 3-portfolio index —
   each pill sticks near the top and the next one piles on top of it */
@media (max-width: 780px){
  .service-list{ display: flex; flex-direction: column; gap: var(--sp-6); perspective: none; }
  /* [data-reveal] bump: beats the later, unconditional .service-row{position:relative}
     rule below, which otherwise wins this specificity tie by source order */
  .service-row[data-reveal]{ position: sticky; }
  .service-row:nth-child(1){ top: 90px; z-index: 1; }
  .service-row:nth-child(2){ top: 100px; z-index: 2; }
  .service-row:nth-child(3){ top: 110px; z-index: 3; }
  .service-row:nth-child(4){ top: 120px; z-index: 4; }
  .service-row:nth-child(5){ top: 130px; z-index: 5; }
  .service-row:nth-child(6){ top: 140px; z-index: 6; }
}

/* aligned grid, cards lift uniformly on hover (via --y) rather than resting
   at staggered heights. Specificity note: the site-wide
   [data-reveal].is-visible{transform:none} rule (2 simple selectors) would
   otherwise win the cascade tie against a plain .service-row rule and erase
   this offset the moment it reveals, so the resting/hover transform is
   (re)declared below at 3-selector strength via
   .service-row[data-reveal].is-visible to beat it outright. */
.service-row{ --y: 0px; position: relative; opacity: 0; transform: translateY(calc(var(--y) + 18px)); transition: transform .6s var(--ease), opacity .8s var(--ease); }
.service-row:hover, .service-row.is-active{ --y: -8px; }
.service-row[data-reveal].is-visible{ opacity: 1; transform: translateY(var(--y)); }

.service-row-inner{
  position: relative; isolation: isolate; overflow: hidden;
  display: block; height: 100%; color: inherit; text-decoration: none;
  padding: var(--sp-6); border-radius: var(--radius-md);
  background: #fff; border: 1px solid var(--paper-line);
  box-shadow: var(--shadow-card);
  transform-style: preserve-3d; will-change: transform;
  transition: box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.service-row:hover .service-row-inner,
.service-row.is-active .service-row-inner{
  box-shadow: 0 34px 64px -22px rgba(14,13,11,.22);
  border-color: color-mix(in srgb, var(--gold) 45%, var(--paper-line));
}
/* the whole card is a link — override the site-wide purple :focus-visible ring
   (var(--accent), meant for form fields) with a neutral ink one, no accent color */
.service-row-inner:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }

/* small arrow affordance — signals the whole card is a link through to the detail page */
.service-arrow{
  position: absolute; top: var(--sp-6); right: var(--sp-6); z-index: 1;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--paper-line); color: var(--muted);
  transition: transform .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease);
}
.service-arrow svg{ width: 14px; height: 14px; }
.service-row:hover .service-arrow,
.service-row.is-active .service-arrow{ transform: translate(3px, -3px); border-color: var(--ink); color: var(--ink); }

.service-main{ position: relative; z-index: 1; max-width: none; }
.service-cat{
  font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  display: inline-block; transition: letter-spacing .45s var(--ease);
}
.service-row:hover .service-cat,
.service-row.is-active .service-cat{ letter-spacing: .16em; color: var(--gold); }
.service-main h3{
  font-size: clamp(1.1rem, 1.6vw, 1.35rem); margin-top: var(--sp-2); margin-bottom: var(--sp-3); color: var(--ink);
  transition: transform .45s var(--ease);
}
.service-row:hover .service-main h3,
.service-row.is-active .service-main h3{ transform: translateX(6px); }
.service-main p{ max-width: none; color: var(--muted); font-size: .92rem; position: relative; z-index: 1; }
.service-row .chip-list{ position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce){
  .service-row, .service-row-inner, .service-arrow, .service-cat, .service-main h3{ transition: none; }
}

/* ============================================================ service detail pages: feature breakdown */
.service-detail-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.service-detail-grid .card{
  transition: transform var(--dur-md) var(--ease), box-shadow var(--dur-md) var(--ease), border-color var(--dur-md) var(--ease);
}
/* desktop hover, and the same look on mobile via .is-active — added in
   script.js when a card is scrolled through the middle of the screen,
   since touch devices have no hover */
.service-detail-grid .card:hover,
.service-detail-grid .card.is-active{
  transform: translateY(-6px);
  box-shadow: 0 24px 46px -18px rgba(14,13,11,.18);
  border-color: color-mix(in srgb, var(--gold) 45%, var(--paper-line));
}
.service-detail-grid .card h3{ font-size: 1.05rem; margin-bottom: var(--sp-2); color: var(--ink); }
.service-detail-grid .card p{ color: var(--muted); font-size: .9rem; }
@media (max-width: 780px){ .service-detail-grid{ grid-template-columns: 1fr; } }

/* ============================================================ HOMEPAGE SERVICES OVERVIEW */
.home-services-grid .card{
  transition: transform var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease);
}
.home-services-grid .card:hover{ transform: translateY(-5px); box-shadow: 0 24px 46px -18px rgba(14,13,11,.16); }

/* ============================================================ WHY AVAIA (value grid) */
.value-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.value-grid > div{ padding-top: var(--sp-5); border-top: 1px solid var(--paper-line); }
.value-grid h3{ font-size: 1.05rem; margin-bottom: var(--sp-2); }
.value-grid p{ font-size: .9rem; color: var(--muted); }
@media (max-width: 900px){ .value-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .value-grid{ grid-template-columns: 1fr; } }

/* ============================================================ AI SECTION mockups */
.ai-split{ display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--sp-9); align-items: center; }
.split-11-9{ display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-8); align-items: center; }
@media (max-width: 900px){ .split-11-9{ grid-template-columns: 1fr; } }
.ai-copy .pill{ margin-bottom: var(--sp-5); }
.ai-copy ul{ margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.ai-copy ul li{ display: flex; gap: var(--sp-3); align-items: flex-start; font-size: .96rem; color: var(--paper-on-dark); }
.ai-copy ul li svg{ flex: none; margin-top: 3px; color: var(--accent-2); }
@media (max-width: 980px){ .ai-split{ grid-template-columns: 1fr; } }

/* ---- chat mockup ---- */
.mock-window{
  background: var(--night-soft); border: 1px solid var(--night-line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-card-dark);
}
.mock-titlebar{ display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--night-line); }
.mock-dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--night-line); }
.mock-titlebar span.label{ margin-left: var(--sp-3); font-family: var(--font-mono); font-size: .74rem; color: var(--muted-dark); text-transform: uppercase; letter-spacing: .08em; }
.mock-body{ padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }

/* ---- spatial stage: the two mockups as floating panels in a subtle 3D environment ---- */
.ai-spatial-stage{
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: var(--sp-7);
  padding-top: var(--sp-7);
  perspective: 1800px;
}
.ai-spatial-label{
  position: absolute; top: 0; left: 0; z-index: 2;
  display: flex; align-items: center; gap: .6em;
  font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--gold);
}
.ai-spatial-label::before{ content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px 2px color-mix(in srgb, var(--gold) 70%, transparent); }
.ai-spatial-watermark{
  position: absolute; z-index: 0; right: 0; top: 14%;
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 3rem); line-height: 1.15;
  color: var(--night-line); opacity: .6;
  pointer-events: none; text-align: right; max-width: 58%;
}
.ai-float{ position: relative; z-index: 1; animation: ai-float-bob 7s ease-in-out infinite; }
.ai-float-1{ --tilt: -1.6deg; margin-right: 10%; }
.ai-float-2{ --tilt: 1.2deg; margin-left: 14%; animation-delay: -3.4s; }
.ai-float .mock-window{
  transform-style: preserve-3d; will-change: transform;
  box-shadow: 0 45px 90px -30px rgba(0,0,0,.6);
}
@keyframes ai-float-bob{
  0%, 100%{ transform: translateY(0) rotate(var(--tilt, 0deg)); }
  50%{ transform: translateY(-10px) rotate(var(--tilt, 0deg)); }
}
@media (max-width: 980px){
  .ai-spatial-watermark{ display: none; }
  .ai-float-1, .ai-float-2{ margin: 0; }
}
@media (prefers-reduced-motion: reduce){ .ai-float{ animation: none; } }

.chat-row{ display: flex; gap: var(--sp-3); max-width: 82%; }
.chat-row.from-user{ margin-left: auto; flex-direction: row-reverse; }
.chat-avatar{ width: 28px; height: 28px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: .68rem; }
.chat-avatar.ai{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.chat-avatar.user{ background: var(--night-line); color: var(--muted-dark); }
.chat-bubble{ background: var(--night-line); border-radius: var(--radius-md); padding: var(--sp-4); font-size: .88rem; line-height: 1.5; color: var(--paper-on-dark); }
.chat-row.from-user .chat-bubble{ background: var(--accent); color: #fff; }
.chat-bubble .typing{ display: inline-flex; gap: 4px; align-items: center; }
.chat-bubble .typing span{ width: 5px; height: 5px; border-radius: 50%; background: var(--muted-dark); animation: bounce 1.2s infinite ease-in-out; }
.chat-bubble .typing span:nth-child(2){ animation-delay: .15s; }
.chat-bubble .typing span:nth-child(3){ animation-delay: .3s; }
@keyframes bounce{ 0%,60%,100%{ transform: translateY(0); opacity:.5; } 30%{ transform: translateY(-3px); opacity: 1; } }

/* ---- dashboard mockup ---- */
.mock-dash-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.mock-kpi{ background: var(--night); border: 1px solid var(--night-line); border-radius: var(--radius-sm); padding: var(--sp-4); }
.mock-kpi .k-label{ font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-dark); }
.mock-kpi .k-num{ font-family: var(--font-display); font-size: 1.5rem; margin-top: .3em; color: var(--paper-on-dark); }
.mock-kpi .k-delta{ font-size: .76rem; margin-top: .3em; color: var(--success); }
.mock-kpi .k-delta.down{ color: var(--accent-2); }
.mock-bars{ display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-top: var(--sp-3); }
.mock-bars span{ flex: 1; background: linear-gradient(180deg, var(--accent), var(--accent-2)); border-radius: 3px 3px 0 0; opacity: .85; }

/* ---- workflow diagram ---- */
.mock-flow{ display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.flow-node{
  font-family: var(--font-mono); font-size: .74rem; color: var(--paper-on-dark);
  background: var(--night); border: 1px solid var(--night-line); border-radius: 999px; padding: .6em 1.1em;
  display: flex; align-items: center; gap: .5em;
}
.flow-node .flow-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }
.flow-arrow{ color: var(--muted-dark); flex: none; }

/* ============================================================ WORK grid */
.work-filter{ display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-7); }
.work-filter button{
  font-family: var(--font-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em;
  padding: .6em 1.1em; border-radius: 999px; border: 1px solid var(--paper-line); color: var(--muted);
  transition: all var(--dur-sm) var(--ease);
}
.work-filter button[aria-pressed="true"]{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.work-filter button:hover{ border-color: var(--ink); }

.work-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.work-card{ display: block; border-radius: var(--radius-md); overflow: hidden; position: relative; aspect-ratio: 4/5; }
.work-card img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.work-card:hover img{ transform: scale(1.05); }
.work-card figcaption{
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-5);
  background: linear-gradient(0deg, rgba(14,13,11,.85), transparent 70%);
  color: #fff;
}
.work-card .wc-industry{ font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; opacity: .8; }
.work-card .wc-title{ font-family: var(--font-display); font-size: 1.15rem; margin-top: .2em; }
.work-card[data-hide="true"]{ display: none; }

@media (max-width: 980px){ .work-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .work-grid{ grid-template-columns: 1fr; } }

.case-block{
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center;
  padding: var(--sp-9) 0; border-top: 1px solid var(--paper-line); overflow: hidden;
}
.case-block:nth-child(even) .case-media{ order: 2; }
.case-numeral{
  position: absolute; top: -.15em; right: 0; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(6rem, 16vw, 13rem);
  color: var(--ink); opacity: .045; line-height: 1; letter-spacing: -.04em;
}
.case-tag{
  font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); margin-bottom: var(--sp-3);
}
.case-block .case-copy{ position: relative; z-index: 1; }
.case-block h3.h2 .gold{ font-family: var(--font-display); font-style: italic; color: var(--gold); }
.case-desc{ margin-top: var(--sp-3); color: var(--muted); font-size: 1rem; max-width: 48ch; }
.case-media{ position: relative; z-index: 1; border-radius: var(--radius-lg); overflow: hidden; }
.case-media img{ width: 100%; }
.case-meta{ display: flex; gap: var(--sp-5); margin: var(--sp-6) 0 var(--sp-6); flex-wrap: wrap; }
.case-meta div{ font-size: .84rem; }
.case-meta span{ display: block; font-family: var(--font-mono); text-transform: uppercase; font-size: .68rem; letter-spacing: .08em; color: var(--muted); margin-bottom: .3em; }
.case-results{ display: flex; gap: var(--sp-7); margin-top: var(--sp-6); flex-wrap: wrap; }
.case-results .stat-label{ text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-family: var(--font-mono); }
.case-block{ --case-accent: var(--gold); }
.case-block .case-results .stat-num{ color: var(--case-accent); transition: color var(--dur-md) var(--ease); }
.case-block .case-numeral{ transition: color var(--dur-md) var(--ease); }
.case-block:hover .case-numeral{ color: var(--case-accent); opacity: .09; }

/* case 02 — featured: bigger, elevated image instead of the flat side-by-side split.
   (the preceding .section-head sibling shifts this block to an ODD position, so
   the alternating-side rule does not flip its .case-media — it stays in column 1) */
.case-block--featured{ grid-template-columns: 1.2fr .8fr; }
.case-block--featured .case-media{
  box-shadow: 0 40px 90px -30px rgba(20,18,15,.4);
  aspect-ratio: 4/5;
}
.case-block--featured .case-media img{ height: 100%; object-fit: cover; }

/* case 03 — stacked: full-width banner image above copy, meta as a row of columns.
   !important is needed here: this block also lands on an even sibling position,
   so the alternating-side rule (order:2, one selector-level more specific than a
   single modifier class) would otherwise win and push the image below the copy */
.case-block--stacked{ grid-template-columns: 1fr; }
.case-block--stacked .case-media{ order: -1 !important; aspect-ratio: 21/9; }
.case-block--stacked .case-media img{ height: 100%; object-fit: cover; }
.case-block--stacked .case-copy{ max-width: 780px; }
.case-meta--grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.case-meta--grid div{ padding-top: var(--sp-4); border-top: 1px solid var(--paper-line); }

@media (max-width: 900px){
  .case-block, .case-block:nth-child(even) .case-media, .case-block--featured, .case-block--stacked{ grid-template-columns: 1fr; order: 0; }
  .case-block{ grid-template-columns: 1fr; padding: var(--sp-8) 0; }
  .case-block--stacked .case-media{ order: 0; aspect-ratio: 4/3; }
  /* case 02 (featured) was being force-cropped to 4/3 on mobile — show it
     full size and uncropped instead, matching case 01's plain treatment */
  .case-block--featured .case-media{ order: 0; aspect-ratio: auto; }
  .case-block--featured .case-media img{ height: auto; object-fit: initial; }
  .case-meta--grid{ grid-template-columns: 1fr; }
  .case-numeral{ font-size: clamp(4.5rem, 22vw, 7rem); }
}

/* compare (before/after) — reused from prior build */
.compare{ position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; user-select: none; margin-bottom: var(--sp-7); }
.compare-side{ position: absolute; inset: 0; }
.compare-grid{ display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(2,1fr); height: 100%; }
.compare-grid img{ width: 100%; height: 100%; object-fit: cover; }
.compare-photo{ width: 100%; height: 100%; object-fit: cover; display: block; }
.compare + .compare{ margin-top: var(--sp-7); }
.compare-vertical-label{ font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: var(--sp-3); }
.compare-before{ clip-path: inset(0 50% 0 0); }
.compare-label{ position: absolute; bottom: var(--sp-4); font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; background: rgba(14,13,11,.7); color: #fff; padding: .4em .8em; border-radius: 999px; }
.compare-label-after{ right: var(--sp-4); }
.compare-label-before{ left: var(--sp-4); }
.compare-handle{ position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; cursor: ew-resize; display: flex; align-items: center; justify-content: center; touch-action: none; }
.compare-handle-grip{ width: 40px; height: 40px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); font-size: .9rem; }

/* ============================================================ PORTFOLIO PROJECTS (Work page) */
.gold{ font-family: var(--font-display); font-style: italic; color: var(--gold); }

.portfolio-nav{
  display: flex; gap: var(--sp-8); flex-wrap: wrap;
  padding-top: var(--sp-6); padding-bottom: var(--sp-6); margin-top: var(--sp-2);
  border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line);
}
.portfolio-nav a{
  display: flex; align-items: baseline; gap: .6em; color: var(--muted);
  font-family: var(--font-mono); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em;
  transition: color var(--dur-sm) var(--ease);
}
.portfolio-nav a:hover{ color: var(--ink); }
.portfolio-nav .pn-num{ color: var(--accent); }
.portfolio-nav .pn-name{ font-family: var(--font-display); font-size: 1rem; text-transform: none; letter-spacing: -.01em; color: var(--ink); font-style: italic; }

/* overflow-x:clip, not hidden — this section wraps the sticky-stacking reel
   showcase; overflow:hidden (any axis) turns a container into a scroll
   container that breaks position:sticky for everything inside it. clip
   still contains decorative bleed (e.g. the hero glow) without that side effect. */
.project{ padding: var(--sp-9) 0; border-top: 1px solid var(--paper-line); overflow-x: clip; }
.project-intro{ display: flex; align-items: flex-start; gap: var(--sp-6); margin-bottom: var(--sp-7); }
.project-numeral{
  flex: none; font-family: var(--font-mono); font-size: 1rem; color: var(--muted);
  padding-top: .5em;
}
.project-intro-copy{ max-width: 640px; min-width: 0; }
.project-intro-copy .h2{ margin-top: var(--sp-2); }
.project-intro-copy .case-desc{ max-width: 56ch; font-size: 1.02rem; }

.project-hero{
  margin: 0 auto var(--sp-8); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-card); max-width: 1200px;
}
.project-hero img{ width: 100%; display: block; }
.project-hero-split{ display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-5); max-width: var(--container); padding: 0 var(--sp-6); box-shadow: none; align-items: start; }
.project-hero-split img{ border-radius: var(--radius-lg); box-shadow: var(--shadow-card); width: 100%; height: auto; display: block; }
.project-hero-portrait{
  display: grid; grid-template-columns: .85fr 1fr; gap: var(--sp-6);
  max-width: var(--container); padding: 0 var(--sp-6); box-shadow: none; align-items: start;
}
.project-hero-portrait > img{ border-radius: var(--radius-lg); box-shadow: var(--shadow-card); width: 100%; }
.project-hero-side{ display: flex; flex-direction: column; gap: var(--sp-5); }
.before-after{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.before-after figure{ margin: 0; }
.before-after img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-card); display: block; }
.before-after figcaption{
  margin-top: var(--sp-2); font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); text-align: center;
}

/* true masonry (CSS columns) — a row-based grid leaves empty space below any
   image shorter than its row's tallest neighbor; columns flow continuously instead */
.project-grid{ column-gap: var(--sp-5); margin-bottom: var(--sp-7); }
.grid-shot{ position: relative; margin: 0 0 var(--sp-5); break-inside: avoid; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.grid-shot img{ width: 100%; height: auto; display: block; transition: transform .6s var(--ease); }
.grid-shot:hover img{ transform: scale(1.05); }
.grid-shot figcaption{
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-4) var(--sp-4) var(--sp-3);
  background: linear-gradient(to top, rgba(14,13,11,.75), transparent);
  color: #fff; font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.grid-shot:hover figcaption{ opacity: 1; transform: translateY(0); }
.project-grid-6{ column-count: 3; }
.project-grid-4{ column-count: 4; max-width: var(--container); margin-left: auto; margin-right: auto; padding: 0 var(--sp-6); }

/* project-grid-3 (construction "Mid-build" gallery) is a justified gallery:
   portrait shots stay tall, landscape shots stay wide (each keeps its real
   aspect ratio), but every image within a row is scaled to the same row
   height so each row finishes as one flush, gapless line — the row's own
   height is solved from its `--row-ratio` (sum of its images' ratios) so it
   stays exact at any viewport width. Each figure's `--ar` custom property
   (its own image's aspect ratio) drives its share of that row's width. */
.project-grid-3{ display: flex; flex-direction: column; gap: var(--sp-5); }
.project-grid-3 .grid-row{ display: flex; gap: var(--sp-5); aspect-ratio: var(--row-ratio) / 1; }
.project-grid-3 .grid-shot{ margin: 0; border-radius: 0; flex: var(--ar) 1 0; min-width: 0; }
.project-grid-3 .grid-shot img{ width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 620px){
  .project-grid-3 .grid-row{ flex-direction: column; aspect-ratio: auto; }
  .project-grid-3 .grid-shot{ flex: none; }
  .project-grid-3 .grid-shot img{ height: auto; }
  /* beauty's 3-image "detail work" gallery: keep them in one row, flush
     edge to edge, instead of falling back to the single-column stack above —
     at the natural, uncropped ratio (--row-ratio), not a shorter forced one */
  #p-beauty .project-grid-3{ gap: 0; }
  #p-beauty .project-grid-3 .grid-row{ flex-direction: row; aspect-ratio: var(--row-ratio) / 1; gap: 0; }
  #p-beauty .project-grid-3 .grid-shot{ flex: var(--ar) 1 0; }
  #p-beauty .project-grid-3 .grid-shot img{ height: 100%; }
}

.project-reels{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-bottom: var(--sp-7); max-width: 760px; align-items: start; }
.reel{
  width: 100%; aspect-ratio: 9/16; object-fit: contain; border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); background: var(--paper-dim); display: block;
}
/* landscape source footage (native 16:9) — full-bleed at its own ratio, no letterboxing */
video.reel.reel-landscape{ aspect-ratio: 16/9; object-fit: cover; background: none; }

/* one source clip has black pillarbox bars baked into the footage itself
   (not a CSS letterbox, so object-fit can't remove it) — scale the video up
   inside a clipping frame to crop the bars out of view */
.reel-zoom-frame{
  aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-card);
}
.reel-zoom-frame .reel{ border-radius: 0; box-shadow: none; transform: scale(1.32); }

/* construction now has 2 reels, not 3 — match the track count so there's
   no empty third column left over. Desktop only: an ID selector would
   otherwise outrank the mobile single-column override below regardless of
   its own media query. */
@media (min-width: 621px){
  #p-construction .project-reels{ grid-template-columns: repeat(2, 1fr); }
}

/* ---- iPhone-frame video showcase ---- */
/* Rows are the sticky unit (same pattern as .portfolio-entry / .stack-card):
   each row of phones pins near the top as you scroll, and the next row
   arrives with a higher z-index and slightly larger `top`, stacking over it. */
.phone-mock-grid{ margin-bottom: var(--sp-8); }
.phone-mock-row{
  position: sticky;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-6);
  align-items: end;
  background: var(--paper);
  padding: var(--sp-5) 0;
  margin-bottom: var(--sp-7);
}
.phone-mock-row:nth-child(1){ top: 96px; z-index: 1; }
.phone-mock-row:nth-child(2){ top: 132px; z-index: 2; }
.phone-mock{ perspective: 1400px; }
/* no iPhone chrome, on any viewport — just the reel itself, sticky-stacked */
.phone-mock-frame{
  position: relative; aspect-ratio: 9/16; width: 100%; margin: 0 auto;
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.phone-mock:hover .phone-mock-frame{
  transform: scale(1.045);
  box-shadow: 0 34px 64px -22px rgba(14,13,11,.28);
}
.phone-mock-frame video{ width: 100%; height: 100%; object-fit: cover; display: block; }
.phone-mock-island{ display: none; }
/* "rise into place" reveal for the phone showcase — now per row */
[data-reveal-stagger] > .phone-mock-row{
  opacity: 0; transform: translateY(64px) scale(.96);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal-stagger].is-visible > .phone-mock-row{ opacity: 1; transform: none; }
[data-reveal-stagger].is-visible > .phone-mock-row:nth-child(1){ transition-delay: 0ms; }
[data-reveal-stagger].is-visible > .phone-mock-row:nth-child(2){ transition-delay: 120ms; }
@media (max-width: 980px){ .phone-mock-row{ grid-template-columns: repeat(3, 1fr); } }
/* mobile: same sticky-stack scroll effect as the 3-portfolio index (.portfolio-entry) —
   each phone sticks near the top and the next one piles on top of it while scrolling.
   Rows stop being the sticky unit here (a row is just a normal block of stacked
   phones); each row's 5 phones restart their own top/z-index sequence, which is
   safe because the rows are sequential in the scroll timeline, never concurrent. */
@media (max-width: 640px){
  .phone-mock-row{
    position: static; display: flex; flex-direction: column; gap: var(--sp-7);
    background: none; padding: 0; top: auto; z-index: auto;
  }
  .phone-mock{ max-width: 240px; margin: 0 auto; position: sticky; }
  /* steps used to be 10px apart — with a ~427px-tall 9:16 phone, that buried
     the first phone under the other 4 almost immediately, making it look
     broken/missing rather than just stacked. Wider steps keep a real sliver
     of each phone visible as the next ones pile on. */
  .phone-mock:nth-child(1){ top: 90px; z-index: 1; }
  .phone-mock:nth-child(2){ top: 140px; z-index: 2; }
  .phone-mock:nth-child(3){ top: 190px; z-index: 3; }
  .phone-mock:nth-child(4){ top: 240px; z-index: 4; }
  .phone-mock:nth-child(5){ top: 290px; z-index: 5; }
}

.project-split{ display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-8); align-items: center; margin-bottom: var(--sp-7); }
.project-split-media img{ width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); display: block; }
.project-meta-val{ font-family: var(--font-display); font-size: 1.15rem; margin-top: .3em; max-width: 46ch; }
.project-meta-row{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); margin-bottom: var(--sp-7); }
@media (max-width: 640px){ .project-meta-row{ grid-template-columns: 1fr; gap: var(--sp-5); } }

.project-next{
  display: inline-flex; align-items: center; gap: .5em; margin-top: var(--sp-4);
  font-family: var(--font-mono); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  transition: color var(--dur-sm) var(--ease), gap var(--dur-sm) var(--ease);
}
.project-next:hover{ color: var(--ink); gap: .8em; }
.case-breadcrumb{ padding: var(--sp-6) var(--sp-6) 0; }
.case-breadcrumb a{
  font-family: var(--font-mono); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); transition: color var(--dur-sm) var(--ease);
}
.case-breadcrumb a:hover{ color: var(--ink); }

/* ============================================================ PORTFOLIO INDEX (Work landing) */
.portfolio-list{ display: flex; flex-direction: column; gap: var(--sp-6); padding-bottom: var(--sp-8); }
.portfolio-entry{
  position: sticky; display: block; overflow: hidden;
  border-radius: var(--radius-lg); box-shadow: 0 20px 50px -12px rgba(14,13,11,.28);
  border: 1px solid var(--paper-line);
}
.portfolio-entry:nth-child(1){ top: 112px; z-index: 1; }
.portfolio-entry:nth-child(2){ top: 132px; z-index: 2; }
.portfolio-entry:nth-child(3){ top: 152px; z-index: 3; }
.portfolio-entry:nth-child(4){ top: 172px; z-index: 4; }
.portfolio-entry-media{ position: relative; aspect-ratio: 21/9; overflow: hidden; }
.portfolio-entry-media img{
  width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease);
}
.portfolio-entry:hover .portfolio-entry-media img{ transform: scale(1.045); }
.portfolio-entry-media::after{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,13,11,0) 40%, rgba(14,13,11,.55) 100%);
}
.portfolio-entry-overlay{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5);
  padding: var(--sp-7);
}
.portfolio-entry-title{ display: flex; align-items: baseline; gap: var(--sp-4); }
.portfolio-entry-num{ font-family: var(--font-mono); font-size: .9rem; color: rgba(245,243,237,.7); }
.portfolio-entry-name{
  font-family: var(--font-display); font-weight: 600; color: var(--paper-on-dark);
  font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1;
}
.portfolio-entry-tag{
  font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(245,243,237,.75);
}
.portfolio-entry-arrow{
  flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--paper);
  display: flex; align-items: center; justify-content: center; color: var(--ink);
  transition: transform var(--dur-sm) var(--ease);
}
.portfolio-entry:hover .portfolio-entry-arrow{ transform: rotate(45deg); }
@media (max-width: 640px){
  .portfolio-entry-media{ aspect-ratio: 4/5; }
  .portfolio-entry-overlay{ padding: var(--sp-5); flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .portfolio-entry-arrow{ width: 40px; height: 40px; }
}

.site-case{
  display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--sp-8); align-items: center;
  padding: var(--sp-7); border-radius: var(--radius-lg); background: var(--paper-dim); margin-bottom: var(--sp-7);
}
.site-case-logo{ height: 32px; width: auto; margin-bottom: var(--sp-5); }
.site-case-copy .btn{ margin-top: var(--sp-5); }
.browser-mockup{ border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); background: #fff; border: 1px solid var(--paper-line); }
.browser-chrome{ display: flex; align-items: center; gap: .4em; padding: .6em .8em; background: var(--paper-dim); border-bottom: 1px solid var(--paper-line); }
.browser-chrome span{ width: 9px; height: 9px; border-radius: 50%; background: var(--paper-line); display: inline-block; }
.browser-url{
  margin-left: var(--sp-3); font-family: var(--font-mono); font-size: .72rem; color: var(--muted);
  background: #fff; border: 1px solid var(--paper-line); border-radius: 999px; padding: .3em .9em; flex: 1;
}
/* the live client site has its own responsive bugs below ~400px (text
   overflows its own container on their end, not something our CSS can
   reach into a cross-origin iframe to fix) — so instead of ever rendering
   the iframe narrower than that, it always renders at a fixed native size
   where the site behaves, and script.js scales the whole rendered iframe
   down (transform: scale) to fit however wide the mockup box actually is */
.browser-mockup-viewport{ position: relative; overflow: hidden; width: 100%; aspect-ratio: 5/6; background: var(--paper-dim); }
.browser-mockup-viewport iframe{ position: absolute; top: 0; left: 0; border: 0; display: block; transform-origin: top left; }

@media (max-width: 900px){
  .project-hero-split, .project-hero-portrait{ grid-template-columns: 1fr; }
  .project-grid-6, .project-grid-4{ column-count: 2; }
  .project-split{ grid-template-columns: 1fr; }
  .site-case{ grid-template-columns: 1fr; padding: var(--sp-6); }
}
@media (max-width: 620px){
  .project-grid-6, .project-grid-4{ column-count: 1; }
  .project-reels{ grid-template-columns: 1fr; gap: var(--sp-4); }
  /* beauty has 3 reels — keep them in one row even on mobile, just narrower */
  #p-beauty .project-reels{ grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
  .project-intro{ gap: var(--sp-4); }
  /* the hero photo is full-bleed by design on desktop, but on a narrow phone
     screen that puts its rounded corners flush against the screen edge —
     inset it like the rest of the page instead */
  .project-hero{ margin-left: var(--sp-5); margin-right: var(--sp-5); width: auto; }
}

/* ============================================================ PRICING */
.pricing-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-6); }
.price-card{
  position: relative; border-radius: var(--radius-lg); border: 1px solid var(--paper-line); padding: var(--sp-7); background: #fff;
  transition: transform var(--dur-md) var(--ease), box-shadow var(--dur-md) var(--ease), border-color var(--dur-md) var(--ease);
}
.price-card:hover, .price-card.is-active{ transform: translateY(-8px); box-shadow: var(--shadow-card); border-color: color-mix(in srgb, var(--gold) 45%, var(--paper-line)); }
.price-card ul{ margin: var(--sp-6) 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.price-card ul li{ font-size: .92rem; padding-left: 1.5em; position: relative; color: var(--ink-soft); }
.price-card ul li::before{ content: '✓'; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
.price-card .price-num{ font-family: var(--font-display); font-size: 2.6rem; margin: var(--sp-3) 0; }
.price-card .price-num small{ font-size: .4em; color: var(--muted); font-family: var(--font-body); font-weight: 500; }
.price-desc{ color: var(--muted); font-size: .92rem; min-height: 2.6em; }
.price-card-featured{ border-color: var(--ink); box-shadow: var(--shadow-card); transform: translateY(-8px); }
.price-card-featured:hover, .price-card-featured.is-active{ transform: translateY(-12px); box-shadow: 0 30px 60px -20px rgba(14,13,11,.35); border-color: var(--ink); }
.price-badge{ position: absolute; top: -14px; left: var(--sp-7); background: var(--gold); color: var(--ink); font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; padding: .4em .9em; border-radius: 999px; }
@media (max-width: 900px){
  .pricing-grid{ grid-template-columns: 1fr; }
  .price-card-featured{ transform: none; }
  .price-card-featured:hover, .price-card-featured.is-active{ transform: translateY(-8px); }
}

/* ============================================================ PRODUCTS */
.products-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-6); }
.product-card{ border-radius: var(--radius-md); border: 1px solid var(--paper-line); overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.product-thumb{ aspect-ratio: 4/3; background: var(--paper-dim); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.product-thumb svg{ width: 55%; opacity: .9; }
.product-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.product-badge{ position: absolute; top: var(--sp-3); left: var(--sp-3); }
.product-body{ padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.product-body h3{ font-size: 1.15rem; }
.product-body p{ font-size: .88rem; color: var(--muted); flex: 1; }
.product-price{ font-family: var(--font-mono); font-size: .95rem; }
.product-card.is-coming .product-thumb{ opacity: .7; }
@media (max-width: 900px){ .products-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .products-grid{ grid-template-columns: 1fr; } }
.products-grid-narrow{ grid-template-columns: repeat(2,1fr); max-width: 820px; }
@media (max-width: 620px){ .products-grid-narrow{ grid-template-columns: 1fr; } }

/* ============================================================ ABOUT */
.about-hero-video{ position: relative; overflow: hidden; min-height: 85vh; display: flex; align-items: flex-end; }
.about-hero-video-bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.about-hero-video-scrim{
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(13,13,13,.1) 0%, rgba(13,13,13,.2) 45%, rgba(13,13,13,.8) 100%);
}
.about-hero-video-content{ position: relative; z-index: 1; padding-top: calc(var(--sp-9) + 56px); padding-bottom: var(--sp-9); }
.about-hero-video-content .eyebrow{ color: var(--muted-dark); }
.about-hero-video-content h1{ color: var(--paper-on-dark); max-width: 16ch; }
.about-hero-video-content .lede{ color: var(--paper-on-dark); opacity: .85; margin-top: var(--sp-4); max-width: 54ch; }
@media (max-width: 640px){
  .about-hero-video{ min-height: 70vh; }
  .about-hero-video-content{ padding-top: calc(var(--sp-8) + 56px); padding-bottom: var(--sp-7); }
}
.about-secondary-figure{ margin: var(--sp-8) 0 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 21/9; }
.about-secondary-figure img{ width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px){ .about-secondary-figure{ aspect-ratio: 4/3; } }
.about-principles{ display: flex; gap: var(--sp-7); margin-top: var(--sp-6); flex-wrap: wrap; }
.about-principles div{ font-weight: 600; display: flex; align-items: center; gap: .6em; }
.about-principles .num{ font-family: var(--font-mono); color: var(--accent); font-weight: 400; font-size: .85rem; }
.about-copy-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-9); align-items: start; }
.about-copy-grid p + p{ margin-top: var(--sp-4); }
@media (max-width: 900px){ .about-copy-grid{ grid-template-columns: 1fr; gap: var(--sp-5); } }

.timeline{ display: flex; flex-direction: column; }
.timeline-row{ display: grid; grid-template-columns: 140px 1fr; gap: var(--sp-6); padding: var(--sp-6) 0; border-top: 1px solid var(--paper-line); }
.timeline-row:last-child{ border-bottom: 1px solid var(--paper-line); }
.timeline-row .t-stage{ font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.timeline-row.is-now .t-stage{ color: var(--accent); }
.timeline-row h3{ font-size: 1.2rem; margin-bottom: var(--sp-2); }
@media (max-width: 640px){ .timeline-row{ grid-template-columns: 1fr; gap: var(--sp-2); } }

/* ============================================================ FORM */
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-9); align-items: start; }
.field{ margin-bottom: var(--sp-5); }
.field label{ display: block; font-size: .86rem; font-weight: 600; margin-bottom: var(--sp-2); }
.field .optional{ font-weight: 400; color: var(--muted); font-family: var(--font-body); font-size: .85em; }
.field input[type="text"], .field input[type="email"], .field textarea, .field select{
  width: 100%; padding: .9em 1em; border-radius: var(--radius-sm); border: 1.5px solid var(--paper-line);
  background: #fff; font-size: .96rem; transition: border-color var(--dur-sm) var(--ease);
  min-height: 48px;
}
.field textarea{ min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--accent); outline: none; }
.field-hint{ font-size: .8rem; color: var(--muted); margin-top: var(--sp-2); }
.field-error{ font-size: .8rem; color: #B3261E; margin-top: var(--sp-2); display: none; }
.field.has-error input, .field.has-error textarea, .field.has-error select{ border-color: #B3261E; }
.field.has-error .field-error{ display: block; }

.check-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.check-item{
  display: flex; align-items: center; gap: .6em; padding: .8em 1em; border: 1.5px solid var(--paper-line);
  border-radius: var(--radius-sm); font-size: .9rem; cursor: pointer; transition: border-color var(--dur-sm), background var(--dur-sm);
}
.check-item:has(input:checked){ border-color: var(--accent); background: var(--accent-soft); }
.check-item input{ accent-color: var(--accent); width: 17px; height: 17px; flex: none; }
@media (max-width: 560px){ .check-grid{ grid-template-columns: 1fr; } }

.budget-grid{ display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-3); }
.radio-item{
  display: flex; align-items: center; gap: .6em; padding: .8em 1em; border: 1.5px solid var(--paper-line);
  border-radius: var(--radius-sm); font-size: .9rem; cursor: pointer; transition: border-color var(--dur-sm), background var(--dur-sm);
}
.radio-item:has(input:checked){ border-color: var(--accent); background: var(--accent-soft); }
.radio-item input{ accent-color: var(--accent); width: 17px; height: 17px; flex: none; }
@media (max-width: 560px){ .budget-grid{ grid-template-columns: 1fr; } }

.form-status{ margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-sm); font-size: .92rem; display: none; }
.form-status[data-state="success"]{ display: block; background: #E8F3EC; color: var(--success); }
.form-status[data-state="error"]{ display: block; background: #FBEAE9; color: #B3261E; }
.form-status[data-state="loading"]{ display: block; background: var(--paper-dim); color: var(--muted); }

.form-side .card{ position: sticky; top: 100px; }
.form-side ul{ margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.form-side ul li{ display: flex; gap: var(--sp-3); font-size: .9rem; }
.form-side ul li strong{ display: block; }
.form-side ul li span{ color: var(--muted); font-size: .85rem; }

@media (max-width: 900px){ .form-grid{ grid-template-columns: 1fr; } .form-side .card{ position: static; } .form-side{ order: -1; } }

/* ============================================================ CHECKOUT */
.checkout-layout{ display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-9); align-items: start; }
.checkout-summary{ position: sticky; top: 100px; }
.checkout-summary .cart-item{ padding: var(--sp-4) 0; }
.checkout-summary .cart-item img{ width: 56px; height: 56px; }
.checkout-line{ display: flex; justify-content: space-between; padding: var(--sp-3) 0; font-size: .92rem; }
.checkout-line.total{ border-top: 1px solid var(--paper-line); margin-top: var(--sp-3); padding-top: var(--sp-4); font-family: var(--font-display); font-size: 1.15rem; }
.checkout-line .muted{ color: var(--muted); }
#payment-element{ margin: var(--sp-4) 0 var(--sp-6); min-height: 44px; }
.checkout-lock{ display: flex; align-items: center; gap: .5em; font-size: .8rem; color: var(--muted); margin-top: var(--sp-4); }
.checkout-lock svg{ width: 14px; height: 14px; flex: none; }
.checkout-empty{ text-align: center; padding: var(--sp-9) 0; }
@media (max-width: 900px){ .checkout-layout{ grid-template-columns: 1fr; } .checkout-summary{ position: static; order: -1; } }

/* ============================================================ CONTACT CTA (footer band) — a full-width "portal" you scroll into */
.cta-band{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--sp-10) 0;
  text-align: center;
}
.cta-band::after{
  content: '';
  position: absolute; z-index: 0; pointer-events: none;
  top: 50%; left: 50%; width: 500px; height: 500px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle,
      transparent 0 46px,
      color-mix(in srgb, var(--gold) 20%, transparent) 47px 49px,
      transparent 50px 100px,
      color-mix(in srgb, var(--gold) 13%, transparent) 101px 103px,
      transparent 104px 171px,
      color-mix(in srgb, var(--gold) 7%, transparent) 172px 174px,
      transparent 175px 250px);
  animation: portal-breathe 9s ease-in-out infinite;
}
/* breathing scale + a slow drifting rotation, so the rings feel like they're
   turning in place rather than just pulsing */
@keyframes portal-breathe{
  0%{ transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: .6; }
  50%{ transform: translate(-50%, -50%) scale(1.08) rotate(8deg); opacity: 1; }
  100%{ transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: .6; }
}
.cta-band .eyebrow,
.cta-band h2,
.cta-band .lede,
.cta-band .hero-ctas{ position: relative; z-index: 1; }

.cta-band h2{ max-width: 18ch; margin: var(--sp-5) auto 0; font-size: clamp(1.9rem, 4.4vw, 3.1rem); }
.cta-band .lede{ margin: var(--sp-5) auto 0; max-width: 50ch; text-align: center; }
.cta-band .hero-ctas{ justify-content: center; margin-top: var(--sp-8); }

.cta-band .btn-primary{ position: relative; }
.cta-band .btn-primary::before{
  content: ''; position: absolute; inset: -6px; z-index: -1; border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 55%, transparent), transparent 72%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.cta-band .btn-primary:hover::before{ opacity: 1; }

/* focus-pull entrance — rides the site-wide [data-reveal] -> .is-visible
   toggle (IntersectionObserver + 2.5s safety-net in script.js), so this
   can never get stuck hidden even if the blur/scale effect itself never fires. */
.cta-band .eyebrow,
.cta-band h2,
.cta-band .lede,
.cta-band .hero-ctas{
  opacity: 0;
  filter: blur(10px);
  transform: scale(.92) translateY(10px);
  transition: opacity 1s var(--ease), filter 1.1s var(--ease), transform 1.1s var(--ease);
}
.cta-band.is-visible .eyebrow{ transition-delay: 0ms; }
.cta-band.is-visible h2{ transition-delay: 100ms; }
.cta-band.is-visible .lede{ transition-delay: 180ms; }
.cta-band.is-visible .hero-ctas{ transition-delay: 260ms; }
.cta-band.is-visible .eyebrow,
.cta-band.is-visible h2,
.cta-band.is-visible .lede,
.cta-band.is-visible .hero-ctas{
  opacity: 1; filter: blur(0); transform: scale(1) translateY(0);
}
@media (max-width: 640px){
  .cta-band{ padding: var(--sp-8) 0; }
  /* the ~372px section here can't fit the desktop ring even at rest —
     a proportionally smaller ring, same relative ring spacing */
  .cta-band::after{
    width: 330px; height: 330px;
    background:
      radial-gradient(circle,
        transparent 0 31px,
        color-mix(in srgb, var(--gold) 20%, transparent) 32px 34px,
        transparent 35px 70px,
        color-mix(in srgb, var(--gold) 13%, transparent) 71px 74px,
        transparent 75px 123px,
        color-mix(in srgb, var(--gold) 7%, transparent) 124px 127px,
        transparent 128px 165px);
  }
}
@media (prefers-reduced-motion: reduce){
  .cta-band::after{ animation: none; }
  .cta-band .eyebrow, .cta-band h2, .cta-band .lede, .cta-band .hero-ctas{ transition: none; }
}

/* ============================================================ FAQ (JS-controlled accordion) */
.faq-list{ max-width: 760px; }
.faq-item{ padding: var(--sp-2) 0; border-top: 1px solid var(--paper-line); }
.faq-list .faq-item:last-child{ border-bottom: 1px solid var(--paper-line); }
.faq-q{
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  width: 100%; background: none; border: 0; text-align: left; color: var(--ink);
  font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; cursor: pointer;
  padding: var(--sp-4) 0; -webkit-tap-highlight-color: transparent;
}
.faq-q .faq-icon{ flex: none; width: 22px; height: 22px; position: relative; }
.faq-q .faq-icon::before, .faq-q .faq-icon::after{
  content: ''; position: absolute; top: 50%; left: 50%; background: var(--ink);
  transition: transform var(--dur-sm) var(--ease), opacity var(--dur-sm) var(--ease);
}
.faq-q .faq-icon::before{ width: 14px; height: 1.5px; transform: translate(-50%,-50%); }
.faq-q .faq-icon::after{ width: 1.5px; height: 14px; transform: translate(-50%,-50%); }
.faq-item.is-open .faq-q .faq-icon::after{ opacity: 0; transform: translate(-50%,-50%) rotate(90deg); }
.faq-a{
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows var(--dur-md) var(--ease), opacity var(--dur-sm) var(--ease);
}
.faq-item.is-open .faq-a{ grid-template-rows: 1fr; opacity: 1; }
.faq-a > p{ overflow: hidden; margin: 0; padding-bottom: var(--sp-4); color: var(--muted); font-size: .96rem; max-width: 62ch; }

/* ============================================================ PROCESS LIST (JS-controlled accordion, same mechanism as FAQ) */
.process-list{ max-width: 760px; list-style: none; padding: 0; margin: 0; }
.step-item{ border-top: 1px solid var(--paper-line); }
.process-list .step-item:last-child{ border-bottom: 1px solid var(--paper-line); }
.step-q{
  display: flex; align-items: center; gap: var(--sp-4);
  width: 100%; background: none; border: 0; text-align: left; color: var(--ink);
  font-family: var(--font-body); cursor: pointer;
  padding: var(--sp-4) 0; -webkit-tap-highlight-color: transparent;
}
.step-num{ flex: none; font-family: var(--font-mono); font-size: .85rem; color: var(--muted); }
.step-title{ flex: 1; font-weight: 700; font-size: 1.05rem; }
.step-chevron{ flex: none; display: flex; color: var(--muted); transition: transform var(--dur-sm) var(--ease); }
.step-item.is-open .step-chevron{ transform: rotate(180deg); color: var(--ink); }
.step-a{
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows var(--dur-md) var(--ease), opacity var(--dur-sm) var(--ease);
}
.step-item.is-open .step-a{ grid-template-rows: 1fr; opacity: 1; }
.step-a > p{ overflow: hidden; margin: 0; padding: 0 0 var(--sp-4) 2.4em; color: var(--muted); font-size: .96rem; max-width: 56ch; }

/* ============================================================ GSAP upgrade: custom cursor */
#cursor, #cursor-ring{
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
  border-radius: 50%; transform: translate(-50%,-50%);
  will-change: transform;
}
#cursor{ width: 8px; height: 8px; background: var(--gold); transition: width .2s var(--ease), height .2s var(--ease); }
#cursor-ring{
  width: 36px; height: 36px; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  transition: width .25s var(--ease), height .25s var(--ease), border-color .25s var(--ease);
}
#cursor.is-active{ width: 5px; height: 5px; }
#cursor-ring.is-active{ width: 54px; height: 54px; border-color: var(--gold); }
body.has-custom-cursor{ cursor: none; }
body.has-custom-cursor a, body.has-custom-cursor button{ cursor: none; }
body.has-custom-cursor input, body.has-custom-cursor textarea, body.has-custom-cursor select{ cursor: auto; }
@media (hover: none), (pointer: coarse){ #cursor, #cursor-ring{ display: none !important; } }

/* ============================================================ GSAP upgrade: nav scroll state */
.header-inner.is-scrolled{
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  box-shadow: 0 16px 40px -14px rgba(14,13,11,.28), 0 2px 8px rgba(14,13,11,.08);
}

/* ============================================================ GSAP upgrade: card polish */
.card:hover{ border-color: color-mix(in srgb, var(--gold) 45%, var(--paper-line)); }
@media (prefers-reduced-motion: reduce){
  #cursor, #cursor-ring{ display: none !important; }
  body.has-custom-cursor{ cursor: auto; }
}

/* ============================================================ daynight-style redesign: nav over dark hero */
body.has-dark-hero .header-inner{
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 0.5px solid rgba(255,255,255,0.12);
  box-shadow: none;
}
body.has-dark-hero .header-inner .main-nav a{ color: var(--paper-on-dark); }
body.has-dark-hero .header-inner .main-nav a:hover, body.has-dark-hero .header-inner .main-nav a[aria-current="page"]{ color: var(--paper-on-dark); }
body.has-dark-hero .header-inner .cart-link{ color: var(--paper-on-dark); }
body.has-dark-hero .header-inner .btn-ghost.header-cta{ background: transparent; color: var(--paper-on-dark); border-color: rgba(245,245,245,0.35); }
body.has-dark-hero .header-inner .logo img{ filter: brightness(0) invert(1); transition: filter var(--dur-md) var(--ease); }

/* ============================================================ daynight-style redesign: hero title accent + label */
.hero-title em{ color: var(--gold); }
.hero-dark-inner .eyebrow .dot{ display: none; }
.hero-dark-inner .eyebrow{ color: rgba(245,245,245,0.5); font-size: .62rem; letter-spacing: .28em; }
body.has-dark-hero .header-inner.is-scrolled{
  background: color-mix(in srgb, var(--paper) 65%, transparent);
  border-color: var(--paper-line);
  backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
}
body.has-dark-hero .header-inner.is-scrolled .main-nav a{ color: var(--muted); }
body.has-dark-hero .header-inner.is-scrolled .main-nav a:hover, body.has-dark-hero .header-inner.is-scrolled .main-nav a[aria-current="page"]{ color: var(--ink); }
body.has-dark-hero .header-inner.is-scrolled .cart-link{ color: var(--ink); }
body.has-dark-hero .header-inner.is-scrolled .btn-ghost.header-cta{ color: var(--ink); border-color: var(--paper-line); }
body.has-dark-hero .header-inner.is-scrolled .logo img{ filter: none; }

/* ============================================================ daynight-style redesign: star canvas (dark sections) */
.dark-section{ position: relative; }
.star-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.dark-section > .wrap, .dark-section > .hero-dark-inner{ position: relative; z-index: 1; }

/* ============================================================ daynight-style redesign: text density */
@media (max-width: 768px){ .hide-mobile{ display: none !important; } }

/* ============================================================ daynight-style redesign: services rows */
.services-rows{ border-top: 1px solid var(--paper-line); }
.services-row{
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-6) 0; border-bottom: 1px solid var(--paper-line);
  transition: padding-left var(--dur-md) var(--ease);
}
.services-row:hover{ padding-left: var(--sp-4); }
.services-row-num{ font-family: var(--font-mono); font-size: .78rem; color: var(--muted); width: 2.4em; flex: none; }
.services-row-name{ font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 3vw, 2rem); flex: 1; transition: color var(--dur-md) var(--ease); }
.services-row:hover .services-row-name{ color: var(--gold); }
.services-row-arrow{ flex: none; transition: transform var(--dur-md) var(--ease); color: var(--muted); }
.services-row:hover .services-row-arrow{ transform: translateX(10px); color: var(--gold); }

/* ============================================================ daynight-style redesign: metrics (dark, counters) */
.metrics-grid{ display: grid; grid-template-columns: repeat(2, 1fr); max-width: 640px; margin: 0 auto; }
.metric{ padding: var(--sp-6); text-align: center; border-left: 1px solid var(--night-line); }
.metric:first-child{ border-left: none; }
.metric-num{ font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 5vw, 3.8rem); color: var(--gold); letter-spacing: -.02em; display: block; }
.metric-label{ display: block; margin-top: var(--sp-3); font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-dark); }
@media (max-width: 768px){
  .metrics-grid{ grid-template-columns: 1fr; }
  .metric{ border-left: none; border-top: 1px solid var(--night-line); padding: var(--sp-5) var(--sp-3); }
  .metric:first-child{ border-top: none; }
}

/* ============================================================ process: a visual sequence, not a standard grid */
.process-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6);
  position: relative; padding-top: var(--sp-7);
}
.process-grid::before{
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--paper-line);
}
.process-grid::after{
  content: ''; position: absolute; top: 0; left: 0; height: 2px;
  width: calc(var(--fill, 0) * 100%);
  background: var(--gold);
  transition: width .1s linear;
}
.process-step{ position: relative; transition: transform .7s var(--ease); }
@media (min-width: 901px){
  .process-step:nth-child(1){ transform: translateY(0); }
  .process-step:nth-child(2){ transform: translateY(34px); }
  .process-step:nth-child(3){ transform: translateY(-8px); }
  .process-step:nth-child(4){ transform: translateY(44px); }
}
.process-step-num{
  display: block; font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(2.6rem, 4.6vw, 3.8rem); line-height: 1;
  color: var(--paper-dim);
  transition: color .5s var(--ease), transform .45s var(--ease);
}
.process-step:hover .process-step-num{ color: var(--gold); transform: translateY(-4px); }
.process-step h3{ margin-top: var(--sp-4); font-size: 1.1rem; transition: transform .45s var(--ease); }
.process-step:hover h3{ transform: translateX(4px); }
/* mobile: the same "active" look as hover, triggered by scroll position
   (via .is-active, added in script.js) instead of a touch/tap */
.process-step.is-active .process-step-num{ color: var(--gold); transform: translateY(-4px); }
.process-step.is-active h3{ transform: translateX(4px); }
.process-step p{ margin-top: var(--sp-2); font-size: .9rem; color: var(--muted); max-width: 24ch; }
@media (max-width: 900px){
  /* the line turns vertical here and runs down the left edge, filling
     top-to-bottom with scroll instead of left-to-right */
  .process-grid{
    grid-template-columns: 1fr; gap: var(--sp-7);
    padding-top: 0; padding-left: var(--sp-6);
  }
  .process-grid::before{ top: 0; bottom: 0; left: 0; right: auto; width: 1px; height: auto; }
  .process-grid::after{
    top: 0; left: 0; width: 2px; height: calc(var(--fill, 0) * 100%);
    transition: height .1s linear;
  }
  .process-step{ transform: none !important; }
}
@media (prefers-reduced-motion: reduce){
  .process-step, .process-step-num, .process-step h3{ transition: none; }
}

/* ============================================================ daynight-style redesign: portfolio gold-border hover */
.work-card{ border: 1px solid transparent; transition: border-color var(--dur-md) var(--ease); }
.work-card:hover{ border-color: var(--gold); }

/* ============================================================ daynight-style redesign: mobile density */
@media (max-width: 768px){
  section{ padding: var(--sp-8) 0; }
  body{ font-size: .94rem; }
}

/* ============================================================ developios-style numbered section label */
.eyebrow-numbered{
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); margin: 0 0 var(--sp-4);
}
.eyebrow-numbered .eyebrow-num{ color: var(--gold); font-weight: 600; }
.section-dark .eyebrow-numbered{ color: var(--muted-dark); }

/* ============================================================ social proof strip */
.proof-strip{ padding-top: var(--sp-7); padding-bottom: var(--sp-7); text-align: center; }
.proof-strip-label{ font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin-bottom: var(--sp-4); }
.proof-strip-list{ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3) var(--sp-7); list-style: none; margin: 0; padding: 0; }
.proof-strip-list li{ font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); position: relative; }
.proof-strip-list li:not(:last-child)::after{
  content: '·'; position: absolute; right: calc(var(--sp-7) / -2); top: 0; transform: translateX(50%);
  color: var(--gold);
}
@media (max-width: 640px){
  .proof-strip-list li:not(:last-child)::after{ display: none; }
  .proof-strip-list{ gap: var(--sp-2) var(--sp-5); }
  .proof-strip-list li{ font-size: 1rem; }
}

/* ============================================================ floating contact button */
.floating-contact{
  position: fixed; right: var(--sp-6); bottom: var(--sp-6); z-index: 400;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--ink);
  box-shadow: 0 16px 32px -10px rgba(20,18,15,.4);
  transition: transform var(--dur-sm) var(--ease);
}
.floating-contact:hover{ transform: scale(1.08); }
@media (max-width: 640px){ .floating-contact{ right: var(--sp-5); bottom: var(--sp-5); width: 50px; height: 50px; } }

/* ============================================================ homepage: why AVAIA (conversion-focused) */
.why-grid{ display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-8); align-items: end; margin-top: var(--sp-4); }
.why-headline{ font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; }
.why-lede{ font-size: 1.05rem; color: var(--muted); }
.why-claim{
  margin-top: var(--sp-8); padding-top: var(--sp-7); border-top: 1px solid var(--paper-line);
}
.why-claim p{
  font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.4;
  color: var(--ink); max-width: 46ch;
}
@media (max-width: 900px){
  .why-grid{ grid-template-columns: 1fr; }
}

/* ============================================================ homepage: stacked scroll gallery */
.stack-gallery{ position: relative; }
.stack-card{
  position: sticky; display: block; border-radius: var(--radius-lg); overflow: hidden;
  height: 62vh; margin-bottom: var(--sp-7);
  box-shadow: 0 30px 70px -24px rgba(14,13,11,.4);
  border: 1px solid transparent; transition: border-color var(--dur-md) var(--ease);
}
.stack-card:hover{ border-color: var(--gold); }
.stack-card:nth-child(1){ top: 96px; z-index: 1; }
.stack-card:nth-child(2){ top: 124px; z-index: 2; }
.stack-card:nth-child(3){ top: 152px; z-index: 3; margin-bottom: 0; }
.stack-card img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.stack-card:hover img{ transform: scale(1.05); }
.stack-card-info{
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-6);
  background: linear-gradient(to top, rgba(14,13,11,.8), transparent);
  color: #fff; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4);
}
.stack-card-metric{ display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 2.2vw, 1.6rem); color: var(--gold); margin-bottom: .3em; }
.stack-card-tag{ font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; opacity: .85; }
.stack-card-title{ font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.2rem); margin-top: .2em; }
.stack-card-arrow{
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--gold); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-sm) var(--ease);
}
.stack-card:hover .stack-card-arrow{ transform: translate(4px, -4px); }
@media (max-width: 768px){
  .stack-card{ height: 46vh; }
  .stack-card:nth-child(1){ top: 76px; }
  .stack-card:nth-child(2){ top: 94px; }
  .stack-card:nth-child(3){ top: 112px; }
}

/* ============================================================ work page: gallery — true masonry (CSS columns), not a row grid */
.work-gallery{ margin-top: var(--sp-6); column-count: 3; column-gap: var(--sp-5); }
.work-gallery figure{
  position: relative; margin: 0 0 var(--sp-5); break-inside: avoid;
  overflow: hidden;
  border: 1px solid transparent; box-shadow: var(--shadow-card);
  transition: border-color var(--dur-md) var(--ease), box-shadow var(--dur-md) var(--ease);
}
.work-gallery figure:hover{ border-color: var(--gold); }
.work-gallery img{ width: 100%; height: auto; display: block; transition: transform .5s var(--ease); }
.work-gallery figure:hover img{ transform: scale(1.05); }
.work-gallery figcaption{ display: none; }
@media (max-width: 900px){ .work-gallery{ column-count: 2; } }
@media (max-width: 560px){ .work-gallery{ column-count: 1; } }

/* ============================================================ homepage: AI waitlist capture */
.waitlist-form{ display: flex; gap: var(--sp-3); max-width: 420px; }
.waitlist-form input{
  flex: 1; min-width: 0; padding: .9em 1.2em; border-radius: 999px;
  border: 1px solid var(--night-line); background: var(--night-soft); color: var(--paper-on-dark);
  font-size: .95rem;
}
.waitlist-form input::placeholder{ color: var(--muted-dark); }
.waitlist-form .btn{ flex: none; }
@media (max-width: 560px){ .waitlist-form{ flex-direction: column; max-width: none; } }

/* ============================================================ case study chapters (Scooperz-style narrative) */
.case-chapter{ padding: var(--sp-9) 0; border-top: 1px solid var(--paper-line); }
.case-chapter-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.case-chapter-head .eyebrow{ margin-bottom: var(--sp-3); }
.case-chapter-title{
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.08; letter-spacing: -.01em;
  color: var(--ink);
}
.case-chapter-body p{ color: var(--muted); font-size: 1rem; line-height: 1.7; margin-bottom: var(--sp-4); }
.case-chapter-body p:last-child{ margin-bottom: 0; }
.case-chapter-body .chip-list{ margin-top: var(--sp-5); }
.case-chapter--impact{ background: var(--ink); color: var(--paper-on-dark); }
.case-chapter--impact .eyebrow{ color: var(--muted-dark); }
.case-chapter--impact .case-chapter-title{ color: var(--paper-on-dark); }
.case-chapter--impact .case-chapter-body p{ color: var(--muted-dark); }
.case-chapter-stats{ display: flex; gap: var(--sp-7); flex-wrap: wrap; margin-top: var(--sp-6); }
.case-chapter-stats .stat-num{ color: var(--gold); }
@media (max-width: 900px){ .case-chapter-grid{ grid-template-columns: 1fr; gap: var(--sp-4); } }