/* ═══════════════════════════════════════════
   OWLDID — MAIN STYLESHEET
   Two colours · Three fonts · Surface stacking
   See DESIGN.md for the full system reference
═══════════════════════════════════════════ */

:root {
  /* ── PALETTE ─ two colours, plus computed surfaces ─── */
  --sage:       #c0d0c0;
  --sage-2:     #b3c5b3;   /* pressed sage */
  --sage-3:     #d2dfd2;   /* raised sage (cards on sage) */
  --navy:       #030B11;
  --navy-2:     #061524;   /* raised navy (cards on navy) */
  --navy-3:     #0d2035;   /* deepest navy */

  /* ── TEXT ROLES ─────────────────────────── */
  --on-sage:    var(--navy);
  --on-sage-2:  rgba(3,11,17,0.62);
  --on-sage-3:  rgba(3,11,17,0.38);
  --on-sage-4:  rgba(3,11,17,0.18);
  --on-navy:    var(--sage);
  --on-navy-2:  rgba(192,208,192,0.62);
  --on-navy-3:  rgba(192,208,192,0.38);
  --on-navy-4:  rgba(192,208,192,0.16);

  /* ── BORDERS ─────────────────────────────── */
  --line-sage:  rgba(3,11,17,0.10);
  --line-sage-2:rgba(3,11,17,0.18);
  --line-navy:  rgba(192,208,192,0.10);
  --line-navy-2:rgba(192,208,192,0.20);

  /* ── FONTS ─ three roles, no overlap ──────── */
  --f-ui:      'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --f-mono:    'Fragment Mono', 'JetBrains Mono', ui-monospace, monospace;
  --f-brand:   'Romanesco', cursive;

  /* ── RADII ───────────────────────────────── */
  --r-sm:      10px;
  --r-md:      16px;
  --r-lg:      24px;
  --r-xl:      32px;
  --r-pill:    999px;

  --nav-h:     68px;

  /* ── LEGACY ALIASES — keep markup that uses old names working,
        all remapped to the two-colour system. NO red, NO third colour. */
  --sage-dark:        var(--sage-2);
  --sage-light:       var(--sage-3);
  --navy2:            var(--navy-2);
  --navy3:            var(--navy-3);
  --red:              var(--navy);     /* "red" = inverted emphasis (navy) */
  --red2:             var(--navy-2);
  --red-dim:          rgba(3,11,17,0.06);
  --amber:            var(--navy);
  --text-on-sage:     var(--on-sage);
  --text2-on-sage:    var(--on-sage-2);
  --text3-on-sage:    var(--on-sage-3);
  --text-on-navy:     var(--on-navy);
  --text2-on-navy:    var(--on-navy-2);
  --text3-on-navy:    var(--on-navy-3);
  --b-sage:           var(--line-sage);
  --b-sage2:          var(--line-sage-2);
  --b-navy:           var(--line-navy);
  --b-navy2:          var(--line-navy-2);
  --b-red:            var(--line-sage-2);
  --f-num:            var(--f-ui);
  --f-body:           var(--f-ui);
  --grain:            none;
}

/* ═══════════════════════════════════════════ RESET ═════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--navy); color: var(--sage); }

html { scroll-behavior: smooth; }
body {
  background: var(--sage);
  color: var(--on-sage);
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; border: none; background: none; color: inherit; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
em { font-style: normal; }

/* ═══════════════════════════════════════════ LAYOUT ═══════════════════════════ */
.page-wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.section { padding: 96px 0; position: relative; }
.section-sm { padding: 48px 0; position: relative; }
.section-lg { padding: 140px 0; position: relative; }

.bg-sage { background: var(--sage); color: var(--on-sage); }
.bg-navy {
  background: var(--navy);
  color: var(--on-navy);
}

/* ── SECTION PANELS ─────────────────────────
   Every section is a self-contained rounded panel that nests over
   the one before it. The curved seam reveals the previous surface,
   so no two sections ever blend into one another. Pair with strict
   sage/navy alternation — see DESIGN.md §1 "Section rhythm". */
section + section,
section + .footer {
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  margin-top: calc(var(--r-xl) * -1);
  position: relative;
}

.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 920px) { .g3, .g4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════ TYPOGRAPHY ═══════════════════════ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--on-sage-3);
  margin-bottom: 18px;
  letter-spacing: 0;
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.bg-navy .eyebrow { color: var(--on-navy-3); }
.eyebrow-navy { color: var(--on-navy-3); }
.eyebrow-red { color: var(--on-sage-3); }
.bg-navy .eyebrow-red { color: var(--on-navy-3); }

.h-display {
  font-family: var(--f-ui);
  font-weight: 800;
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--on-sage);
}
.h-display em { font-family: var(--f-brand); font-weight: 400; letter-spacing: -0.005em; }
.bg-navy .h-display { color: var(--on-navy); }

/* Brand wordmark — every "OwlDid" mention in body copy renders in Romanesco */
.brand-script {
  font-family: var(--f-brand);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  font-size: 1.15em;
  line-height: 1;
}

.h-1 {
  font-family: var(--f-ui);
  font-weight: 800;
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--on-sage);
}
.h-1 em { font-family: var(--f-brand); font-weight: 400; letter-spacing: -0.005em; }
.bg-navy .h-1 { color: var(--on-navy); }

.h-2 {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--on-sage);
}
.h-2 em { font-family: var(--f-brand); font-weight: 400; letter-spacing: -0.005em; }
.bg-navy .h-2 { color: var(--on-navy); }

.h-3 {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--on-sage);
}
.h-3 em { font-family: var(--f-brand); font-weight: 400; }
.bg-navy .h-3 { color: var(--on-navy); }

.lead {
  font-family: var(--f-ui);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--on-sage-2);
  max-width: 640px;
}
.bg-navy .lead { color: var(--on-navy-2); }

.body-copy {
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--on-sage-2);
}
.bg-navy .body-copy { color: var(--on-navy-2); }

.num { font-family: var(--f-ui); font-weight: 800; letter-spacing: -0.02em; }

/* ═══════════════════════════════════════════ NAV — floating pill ═════════════ */
.nav-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: var(--navy);
  color: var(--on-navy-2);
  font-family: var(--f-mono);
  font-size: 12px;
  text-align: center;
  padding: 6px 16px;
  letter-spacing: 0;
}

.nav {
  position: fixed; top: 16px; left: 16px; right: 16px;
  max-width: 1280px; margin: 0 auto;
  z-index: 100;
  background: rgba(3,11,17,0.86);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-radius: var(--r-pill);
  border: 0.5px solid var(--line-navy);
  transition: top 0.3s ease, max-width 0.3s ease, padding 0.3s ease;
}
.nav-banner + .nav { top: 38px; }
.nav.scrolled { top: 12px; max-width: 980px; }
.nav-banner + .nav.scrolled { top: 34px; }

/* Mobile menu open — drop the nav's backdrop-filter so the fixed
   overlay escapes the nav's containing block and fills the whole
   viewport instead of being trapped inside the floating pill. */
.nav.menu-open {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  border-color: transparent;
}
.nav.menu-open .nav-burger { background: rgba(192,208,192,0.14); }

.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 10px 22px;
  height: var(--nav-h);
  gap: 18px;
}
.nav-logo {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--sage); line-height: 1;
  position: relative; z-index: 100;
}
.nav-logo img { width: 26px; height: 26px; object-fit: contain; }
.nav-logo-text {
  font-family: var(--f-brand);
  font-size: 28px;
  color: var(--sage);
  line-height: 1;
}
.nav-logo-text span { color: var(--sage); }

.nav-links {
  display: flex; gap: 4px;
  background: rgba(192,208,192,0.04);
  border: 0.5px solid var(--line-navy);
  border-radius: var(--r-pill);
  padding: 4px;
}
.nav-link {
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--on-navy-2);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  transition: color 0.2s, background 0.2s;
}
.nav-link:hover { color: var(--sage); background: rgba(192,208,192,0.08); }
.nav-link.active { color: var(--navy); background: var(--sage); }

.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 600;
  background: var(--sage);
  color: var(--navy);
  border-radius: var(--r-pill);
  padding: 10px 20px;
  transition: background 0.2s, transform 0.15s;
  letter-spacing: -0.005em;
}
.nav-cta:hover { background: var(--sage-3); transform: translateY(-1px); }
.nav-cta .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--navy);
  display: inline-block;
}

.nav-burger {
  display: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(192,208,192,0.08);
  border: 0.5px solid var(--line-navy);
  position: relative;
  z-index: 101;
  cursor: pointer;
}
.nav-burger span {
  position: absolute; left: 11px; right: 11px; height: 1.5px;
  background: var(--sage);
  transition: transform 0.3s, opacity 0.3s, top 0.3s;
}
.nav-burger span:nth-child(1) { top: 14px; }
.nav-burger span:nth-child(2) { top: 19px; }
.nav-burger span:nth-child(3) { top: 24px; }
.nav-burger.open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

@media (max-width: 920px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: block; }
  .nav-links.mobile-open {
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--navy);
    padding: 110px 32px 40px;
    gap: 12px;
    z-index: 95;
    align-items: stretch;
    overflow-y: auto;
    border-radius: 0;
    border: none;
  }
  .nav-links.mobile-open .nav-link {
    font-family: var(--f-brand);
    font-size: 48px;
    color: var(--sage);
    padding: 6px 0;
    background: transparent;
  }
}

.nav-spacer { height: var(--nav-h); }
.nav-spacer.with-banner { height: calc(var(--nav-h) + 28px); }

/* ═══════════════════════════════════════════ BUTTONS — pill shaped ═══════════ */
.pill-navy, .btn-primary, .btn-navy, .btn-red, .pill-red {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  background: var(--navy);
  color: var(--sage);
  border-radius: var(--r-pill);
  padding: 13px 24px;
  transition: background 0.2s, transform 0.15s, color 0.2s;
  cursor: pointer;
  white-space: nowrap;
}
.pill-navy:hover, .btn-primary:hover, .btn-navy:hover, .btn-red:hover, .pill-red:hover {
  background: var(--navy-2); transform: translateY(-1px);
}
.bg-navy .pill-navy, .bg-navy .btn-primary, .bg-navy .btn-red, .bg-navy .pill-red {
  background: var(--sage); color: var(--navy);
}
.bg-navy .pill-navy:hover, .bg-navy .btn-primary:hover,
.bg-navy .btn-red:hover, .bg-navy .pill-red:hover { background: var(--sage-3); }

.btn-outline-sage {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  color: var(--sage);
  border: 1px solid var(--line-navy-2);
  border-radius: var(--r-pill);
  padding: 12px 22px;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.btn-outline-sage:hover {
  border-color: var(--sage); background: rgba(192,208,192,0.06); transform: translateY(-1px);
}
.btn-outline-navy {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--line-sage-2);
  border-radius: var(--r-pill);
  padding: 12px 22px;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.btn-outline-navy:hover {
  border-color: var(--navy); background: rgba(3,11,17,0.04); transform: translateY(-1px);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 600;
  background: var(--navy);
  color: var(--sage);
  border-radius: var(--r-pill);
  padding: 13px 24px;
  transition: background 0.2s, transform 0.15s;
}
.btn:hover { background: var(--navy-2); transform: translateY(-1px); }

/* ═══════════════════════════════════════════ HERO ════════════════════════════ */
.hero {
  position: relative; overflow: hidden;
  background: var(--navy);
  color: var(--on-navy);
  padding: 120px 0 96px;
  border-radius: 0;
}
.hero-blob, .hero-blob2 { display: none; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding: 96px 0 72px; }
}

.hero-pre {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--on-navy-2);
  background: rgba(192,208,192,0.06);
  border: 0.5px solid var(--line-navy-2);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  margin-bottom: 28px;
}
.hero-pre::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage);
}

.hero-title, .hero-h1 {
  font-family: var(--f-ui);
  font-weight: 800;
  font-size: clamp(56px, 8.4vw, 124px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--sage);
  margin-bottom: 28px;
  max-width: 12ch;
}
.hero-title em, .hero-h1 em {
  font-family: var(--f-brand);
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--sage);
}

.hero-sub {
  font-family: var(--f-ui);
  font-size: 19px;
  line-height: 1.55;
  color: var(--on-navy-2);
  max-width: 540px;
  margin-bottom: 36px;
}

.hero-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 48px;
}

.hero-trust {
  display: flex; gap: 28px; flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--on-navy-2);
  padding-top: 32px;
  border-top: 0.5px solid var(--line-navy-2);
}
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust strong {
  font-weight: 400;
  color: var(--sage);
}

.hero-stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 48px;
  padding-top: 36px;
  border-top: 0.5px solid var(--line-navy-2);
}
.hero-stat { padding: 0 24px; border-right: 0.5px solid var(--line-navy-2); }
.hero-stat:first-child { padding-left: 0; }
.hero-stat:last-child { padding-right: 0; border-right: none; }
.hero-stat-n {
  font-family: var(--f-ui); font-weight: 800;
  font-size: 44px; letter-spacing: -0.03em; line-height: 1;
  color: var(--sage);
  margin-bottom: 6px;
}
.hero-stat-l { font-family: var(--f-mono); font-size: 12px; color: var(--on-navy-3); }

/* hero media card — 4/5 portrait with grayscale image and bottom card */
.hero-media {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy-2);
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.4) contrast(0.95) brightness(0.85);
  transition: filter 0.6s ease, transform 0.8s ease;
}
.hero-media:hover img { filter: grayscale(0) contrast(1) brightness(1); transform: scale(1.03); }
.hero-media-tint {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(3,11,17,0.85) 0%, transparent 60%);
  pointer-events: none;
}
.hero-media-card {
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.hero-media-meta { display: flex; flex-direction: column; gap: 2px; }
.hero-media-meta strong {
  font-family: var(--f-ui); font-size: 17px; font-weight: 700;
  color: var(--sage); letter-spacing: -0.01em;
}
.hero-media-meta span {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--on-navy-2);
}
.hero-media-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-ui); font-size: 12px; font-weight: 600;
  background: var(--sage); color: var(--navy);
  border-radius: var(--r-pill);
  padding: 9px 14px;
  transition: background 0.2s;
}
.hero-media-btn:hover { background: var(--sage-3); }

/* Founder cover — branded card art, not a photo: keep the sage
   surface flat (no grayscale, no dark tint) and invert the caption
   to navy so it reads on the light artwork. */
.hero-media.is-brand { background: var(--sage); }
.hero-media.is-brand img,
.hero-media.is-brand:hover img { filter: none; transform: none; }
.hero-media.is-brand .hero-media-meta span { color: var(--on-sage-2); }
.hero-media.is-brand .hero-media-btn { background: var(--navy); color: var(--sage); }
.hero-media.is-brand .hero-media-btn:hover { background: var(--navy-2); }

/* ═══════════════════════════════════════════ MARQUEE ═════════════════════════ */
.marquee {
  overflow: hidden;
  padding: 24px 0;
  position: relative;
  border-top: 0.5px solid var(--line-sage);
  border-bottom: 0.5px solid var(--line-sage);
}
.bg-navy .marquee {
  border-top-color: var(--line-navy);
  border-bottom-color: var(--line-navy);
}
.marquee-track {
  display: flex; gap: 36px; align-items: center;
  animation: marquee 60s linear infinite;
  width: max-content;
}
.marquee-item {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.025em;
  color: var(--on-sage);
  white-space: nowrap;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.bg-navy .marquee-item { color: var(--sage); }
.marquee-item.stat {
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--on-sage-2);
}
.bg-navy .marquee-item.stat { color: var(--on-navy-2); }
.marquee-item:hover { opacity: 1; }
.marquee-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--on-sage);
  opacity: 0.4;
  flex-shrink: 0;
}
.bg-navy .marquee-dot { background: var(--sage); }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════ CLIENT STRIP ════════════════════ */
.client-strip {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 28px;
}
@media (max-width: 920px) { .client-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .client-strip { grid-template-columns: repeat(2, 1fr); } }
.client-tile {
  background: var(--sage-3);
  border-radius: var(--r-md);
  padding: 22px 14px;
  text-align: center;
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--on-sage);
  transition: background 0.2s, color 0.2s;
}
.client-tile:hover { background: var(--navy); color: var(--sage); }

/* ═══════════════════════════════════════════ CARDS ═══════════════════════════ */
.card {
  background: var(--sage-3);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: transform 0.3s, background 0.2s;
}
.bg-navy .card { background: var(--navy-2); color: var(--on-navy); }
.card:hover { transform: translateY(-4px); }

.card-warn {
  background: var(--sage-3);
  border: 1px solid var(--line-sage-2);
  border-radius: var(--r-lg);
  padding: 28px;
}

/* ═══════════════════════════════════════════ SECTION HEAD ════════════════════ */
.section-head {
  margin-bottom: 64px;
  max-width: 760px;
}
.section-head .lead { margin-top: 18px; }
.section-head .h-display, .section-head .h-1, .section-head .h-2 { letter-spacing: -0.045em; }

/* ═══════════════════════════════════════════ WORK / BENTO ════════════════════ */
.work-grid, .bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 980px) {
  .work-grid, .bento { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .work-grid, .bento { grid-template-columns: 1fr; }
}

.work-card, .bc {
  background: var(--sage-3);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
  transition: transform 0.3s ease;
  cursor: pointer;
  color: var(--on-sage);
}
.bg-navy .work-card, .bg-navy .bc { background: var(--navy-2); color: var(--on-navy); }
.work-card:hover, .bc:hover { transform: translateY(-4px); }
.work-card.wide, .bc.wide { grid-column: span 2; }
@media (max-width: 600px) { .work-card.wide, .bc.wide { grid-column: span 1; } }

.work-img, .bc-img {
  width: 100%; height: 280px;
  position: relative;
  overflow: hidden;
  background: var(--navy-2);
}
.work-img img, .bc-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.4) contrast(0.95) brightness(0.85);
  transition: filter 0.5s ease, transform 0.6s ease;
}
.work-card:hover .work-img img, .bc:hover .bc-img img {
  filter: grayscale(0) contrast(1) brightness(1);
  transform: scale(1.04);
}

.work-stat, .bc-overlay, .case-stat-badge {
  position: absolute; top: 14px; right: 14px;
  font-family: var(--f-mono); font-size: 13px;
  background: var(--sage); color: var(--navy);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  z-index: 2;
}

.work-body, .bc-body { padding: 22px 24px 26px; }
.work-tags, .bc-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.work-tag, .bc-tag, .case-tag {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--on-sage-2);
  background: rgba(3,11,17,0.06);
  border-radius: var(--r-pill);
  padding: 4px 10px;
}
.bg-navy .work-tag, .bg-navy .bc-tag, .bg-navy .case-tag {
  color: var(--on-navy-2);
  background: rgba(192,208,192,0.06);
}
.work-title, .bc-name {
  font-family: var(--f-ui); font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--on-sage);
  margin-bottom: 8px;
}
.bg-navy .work-title, .bg-navy .bc-name { color: var(--on-navy); }
.work-desc, .bc-body p {
  font-family: var(--f-ui); font-size: 14px;
  color: var(--on-sage-2);
  line-height: 1.55;
}
.bg-navy .work-desc, .bg-navy .bc-body p { color: var(--on-navy-2); }
.bc-year { font-family: var(--f-mono); font-size: 12px; color: var(--on-sage-3); margin-top: 8px; }
.bg-navy .bc-year { color: var(--on-navy-3); }

.work-arrow, .bc-arrow {
  position: absolute; bottom: 18px; right: 18px;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(3,11,17,0.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--on-sage);
  transition: background 0.3s, transform 0.3s, color 0.3s;
}
.bg-navy .work-arrow, .bg-navy .bc-arrow {
  background: rgba(192,208,192,0.08); color: var(--sage);
}
.work-card:hover .work-arrow, .bc:hover .bc-arrow {
  background: var(--sage); color: var(--navy);
  transform: rotate(-45deg);
}
.bg-navy .work-card:hover .work-arrow, .bg-navy .bc:hover .bc-arrow {
  background: var(--sage); color: var(--navy);
}

.bc-placeholder {
  font-family: var(--f-ui);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.03em;
  color: var(--sage); opacity: 0.18;
  text-align: center;
  padding: 0 24px;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}

/* ═══════════════════════════════════════════ WHY US ══════════════════════════ */
.why-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 800px) { .why-grid { grid-template-columns: 1fr; } }

.why-stat, .why-rating {
  background: var(--navy-2);
  border-radius: var(--r-lg);
  padding: 40px;
}
.bg-sage .why-stat, .bg-sage .why-rating { background: var(--sage-3); }

.why-stat-n {
  font-family: var(--f-ui); font-weight: 800;
  font-size: clamp(96px, 12vw, 152px);
  letter-spacing: -0.05em;
  line-height: 0.92;
  color: var(--sage);
  margin-bottom: 18px;
}
.bg-sage .why-stat-n { color: var(--navy); }
.why-stat-n span {
  font-family: var(--f-brand); font-weight: 400;
  font-size: 0.65em;
  color: inherit;
  letter-spacing: -0.005em;
}

.why-stat-label {
  font-family: var(--f-mono); font-size: 13px;
  color: var(--on-navy-3);
  margin-bottom: 18px;
}
.bg-sage .why-stat-label { color: var(--on-sage-3); }

.why-stat-text {
  font-family: var(--f-ui); font-size: 15px;
  color: var(--on-navy-2); line-height: 1.6;
  max-width: 420px;
}
.bg-sage .why-stat-text { color: var(--on-sage-2); }

.why-rating-stars {
  font-size: 22px;
  color: var(--sage);
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.bg-sage .why-rating-stars { color: var(--navy); }
.why-rating-n {
  font-family: var(--f-ui); font-weight: 800;
  font-size: 56px; letter-spacing: -0.04em;
  color: var(--sage);
  line-height: 1;
  margin-bottom: 8px;
}
.bg-sage .why-rating-n { color: var(--navy); }
.why-rating-n span {
  font-family: var(--f-mono); font-weight: 400;
  font-size: 14px; color: var(--on-navy-3);
  margin-left: 8px;
}
.bg-sage .why-rating-n span { color: var(--on-sage-3); }
.why-rating-label {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--on-navy-2);
}
.bg-sage .why-rating-label { color: var(--on-sage-2); }

.why-bullets {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 800px) { .why-bullets { grid-template-columns: 1fr; } }
.why-bullet {
  background: var(--navy-2);
  border-radius: var(--r-lg);
  padding: 28px;
  font-family: var(--f-ui); font-size: 15px;
  color: var(--on-navy-2);
  line-height: 1.6;
}
.bg-sage .why-bullet { background: var(--sage-3); color: var(--on-sage-2); }
.why-bullet::before {
  content: '→'; display: block;
  font-family: var(--f-ui); font-size: 22px; font-weight: 600;
  color: var(--sage);
  margin-bottom: 14px;
}
.bg-sage .why-bullet::before { color: var(--navy); }

/* ═══════════════════════════════════════════ SERVICES — 4-col, hover-flip ════ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1080px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .svc-grid { grid-template-columns: 1fr; } }

.svc-card {
  background: var(--sage-3);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex; flex-direction: column;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
  color: var(--on-sage);
  cursor: pointer;
  min-height: 320px;
}
.svc-card:hover {
  background: var(--navy);
  color: var(--on-navy);
  transform: translateY(-4px);
}
.svc-n {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--on-sage-3);
  margin-bottom: 18px;
  transition: color 0.3s ease;
}
.svc-card:hover .svc-n { color: var(--on-navy-3); }

.svc-title {
  font-family: var(--f-ui); font-weight: 700;
  font-size: 28px; letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--on-sage);
  margin-bottom: 14px;
  transition: color 0.3s ease;
}
.svc-card:hover .svc-title { color: var(--sage); }

.svc-desc {
  font-family: var(--f-ui); font-size: 14px;
  color: var(--on-sage-2);
  line-height: 1.6;
  margin-bottom: 18px;
  flex: 1;
  transition: color 0.3s ease;
}
.svc-card:hover .svc-desc { color: var(--on-navy-2); }

.svc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.svc-tag {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--on-sage-2);
  background: rgba(3,11,17,0.06);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  transition: background 0.3s ease, color 0.3s ease;
}
.svc-card:hover .svc-tag { color: var(--on-navy-2); background: rgba(192,208,192,0.10); }

.svc-cta {
  align-self: flex-start;
  font-family: var(--f-ui); font-size: 13px; font-weight: 600;
  background: var(--navy);
  color: var(--sage);
  border-radius: var(--r-pill);
  padding: 10px 18px;
  transition: background 0.3s ease, color 0.3s ease;
}
.svc-card:hover .svc-cta {
  background: var(--sage); color: var(--navy);
}

/* ═══════════════════════════════════════════ TABS ════════════════════════════ */
.tabs {
  display: flex; gap: 28px;
  margin-bottom: 36px;
  border-bottom: 0.5px solid var(--line-sage);
  overflow-x: auto;
}
.bg-navy .tabs { border-bottom-color: var(--line-navy); }
.tab, .cat-tab {
  font-family: var(--f-mono); font-size: 13px;
  color: var(--on-sage-3);
  padding: 16px 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.bg-navy .tab, .bg-navy .cat-tab { color: var(--on-navy-3); }
.tab:hover, .cat-tab:hover { color: var(--on-sage); }
.bg-navy .tab:hover, .bg-navy .cat-tab:hover { color: var(--sage); }
.tab.active, .cat-tab.active { color: var(--on-sage); border-bottom-color: var(--on-sage); }
.bg-navy .tab.active, .bg-navy .cat-tab.active { color: var(--sage); border-bottom-color: var(--sage); }

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.tab-content-block {
  font-family: var(--f-ui); font-size: 19px;
  color: var(--on-sage-2); line-height: 1.7;
  max-width: 760px;
}
.bg-navy .tab-content-block { color: var(--on-navy-2); }

.cat-tabs {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 36px;
}

/* ═══════════════════════════════════════════ STATS BLOCK ═════════════════════ */
.stats-block {
  background: var(--navy);
  color: var(--on-navy);
  border-radius: var(--r-lg);
  padding: 64px 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.bg-navy .stats-block { background: var(--navy-2); }
@media (max-width: 800px) {
  .stats-block { grid-template-columns: 1fr 1fr; gap: 40px 0; padding: 40px 28px; }
}
.stat-i {
  border-right: 0.5px solid var(--line-navy-2);
  padding: 0 36px;
}
.stat-i:first-child { padding-left: 0; }
.stat-i:nth-child(4n) { border-right: none; padding-right: 0; }
@media (max-width: 800px) {
  .stat-i:nth-child(2n) { border-right: none; padding-right: 0; }
  .stat-i:nth-child(odd) { padding-left: 0; border-right: 0.5px solid var(--line-navy-2); padding-right: 16px; }
  .stat-i:nth-child(even) { padding-left: 16px; }
}
.stat-v, .stat {
  font-family: var(--f-ui); font-weight: 800;
  font-size: clamp(56px, 7vw, 88px);
  letter-spacing: -0.04em;
  color: var(--sage);
  line-height: 1;
  margin-bottom: 12px;
}
.stat-v span, .stat span {
  font-family: var(--f-brand); font-weight: 400;
  font-size: 0.65em;
  color: var(--sage);
  letter-spacing: -0.005em;
}
.stat-l {
  font-family: var(--f-mono); font-size: 13px;
  color: var(--on-navy-3);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════ TEAM ════════════════════════════ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 980px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .team-grid { grid-template-columns: 1fr; } }

.team-card {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy-2);
  cursor: pointer;
}
.team-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02) brightness(0.92);
  transition: filter 0.6s ease, transform 0.8s ease;
}
.team-card:hover img { filter: grayscale(0) contrast(1.02) brightness(1); transform: scale(1.05); }
.team-card::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(3,11,17,0.85) 0%, transparent 100%);
  pointer-events: none;
}
.team-info {
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  display: flex; align-items: flex-end; justify-content: space-between;
  z-index: 2;
  gap: 12px;
}
.team-name {
  font-family: var(--f-ui); font-weight: 700;
  font-size: 18px; letter-spacing: -0.02em;
  color: var(--sage);
  line-height: 1.1;
  margin-bottom: 4px;
}
.team-role {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--on-navy-2);
}
.team-action {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--sage); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.team-card:hover .team-action { transform: rotate(-45deg); }

.team-cta {
  background: var(--sage-3);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 4/5;
  color: var(--on-sage);
}
.bg-navy .team-cta { background: var(--navy-2); color: var(--on-navy); }
.team-cta-h {
  font-family: var(--f-ui); font-weight: 700;
  font-size: 28px; letter-spacing: -0.025em; line-height: 1.05;
  color: var(--on-sage);
  margin: 14px 0 12px;
}
.team-cta-h em { font-family: var(--f-brand); font-weight: 400; }
.bg-navy .team-cta-h { color: var(--sage); }
.team-cta-t {
  font-family: var(--f-ui); font-size: 14px;
  color: var(--on-sage-2);
  line-height: 1.55;
  margin-bottom: auto;
}
.bg-navy .team-cta-t { color: var(--on-navy-2); }

/* ═══════════════════════════════════════════ TESTIMONIALS ════════════════════ */
.testi-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
@media (max-width: 720px) { .testi-grid { grid-template-columns: 1fr; } }

.testi {
  background: var(--sage-3);
  border-radius: var(--r-lg);
  padding: 32px;
  position: relative;
}
.bg-navy .testi { background: var(--navy-2); color: var(--on-navy); }
.testi::before {
  content: '"';
  display: block;
  font-family: var(--f-brand);
  font-size: 96px; line-height: 0.6;
  color: var(--on-sage);
  opacity: 0.3;
  margin-bottom: 4px;
  height: 36px;
  overflow: hidden;
}
.bg-navy .testi::before { color: var(--sage); opacity: 0.5; }

.testi-q {
  font-family: var(--f-ui); font-size: 19px;
  color: var(--on-sage); line-height: 1.55;
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.bg-navy .testi-q { color: var(--sage); }

.testi-auth { display: flex; align-items: center; gap: 14px; }
.testi-av {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-ui); font-size: 13px; font-weight: 700;
  color: var(--sage);
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.testi-name {
  font-family: var(--f-ui); font-size: 14px; font-weight: 600;
  color: var(--on-sage);
  letter-spacing: -0.01em;
}
.bg-navy .testi-name { color: var(--sage); }
.testi-role {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--on-sage-3);
}
.bg-navy .testi-role { color: var(--on-navy-3); }

.testi-badges {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 32px;
}
.testi-badge {
  background: var(--sage-3);
  border-radius: var(--r-pill);
  padding: 10px 18px;
  font-family: var(--f-mono); font-size: 12px;
  color: var(--on-sage-2);
}
.bg-navy .testi-badge { background: var(--navy-2); color: var(--on-navy-2); }

.testi-grid-big {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
  margin-top: 28px;
}
@media (max-width: 760px) { .testi-grid-big { grid-template-columns: 1fr; } }
.testi-big {
  background: var(--navy);
  color: var(--on-navy);
  border-radius: var(--r-lg);
  padding: 36px;
}
.bg-navy .testi-big { background: var(--sage-3); color: var(--on-sage); }
.testi-big-q {
  font-family: var(--f-ui); font-size: 22px;
  line-height: 1.5; letter-spacing: -0.015em;
  color: var(--sage);
  margin-bottom: 18px;
}
.bg-navy .testi-big-q { color: var(--navy); }
.testi-big-result {
  font-family: var(--f-ui); font-weight: 800;
  font-size: 36px; letter-spacing: -0.03em; line-height: 1;
  color: var(--sage);
  margin-bottom: 22px;
}
.testi-big-result span { font-family: var(--f-brand); font-weight: 400; font-size: 0.65em; }
.bg-navy .testi-big-result { color: var(--navy); }

.ts {
  background: var(--sage-3);
  border-radius: var(--r-lg);
  padding: 32px;
}
.ts-meta {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--on-sage-3);
  margin-top: 12px;
}

/* ═══════════════════════════════════════════ FAQ ═════════════════════════════ */
.faq-list { max-width: 880px; margin: 0 auto; }
.faq-item {
  border-top: 1px solid var(--line-sage);
  padding: 22px 0;
  cursor: pointer;
}
.bg-navy .faq-item { border-top-color: var(--line-navy); }
.faq-item:last-child { border-bottom: 1px solid var(--line-sage); }
.bg-navy .faq-item:last-child { border-bottom-color: var(--line-navy); }
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  font-family: var(--f-ui); font-size: 24px; font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--on-sage);
  transition: color 0.2s;
}
.bg-navy .faq-q { color: var(--sage); }
.faq-toggle {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(3,11,17,0.06);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-ui); font-size: 18px; font-weight: 400;
  color: var(--on-sage);
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.bg-navy .faq-toggle {
  background: rgba(192,208,192,0.08);
  color: var(--sage);
}
.faq-item.open .faq-toggle {
  background: var(--navy); color: var(--sage);
  transform: rotate(45deg);
}
.bg-navy .faq-item.open .faq-toggle {
  background: var(--sage); color: var(--navy);
}
.faq-a {
  max-height: 0; overflow: hidden;
  font-family: var(--f-ui); font-size: 16px;
  color: var(--on-sage-2); line-height: 1.6;
  transition: max-height 0.4s ease, padding 0.4s ease;
}
.bg-navy .faq-a { color: var(--on-navy-2); }
.faq-item.open .faq-a {
  max-height: 600px;
  padding-top: 16px;
}

/* ═══════════════════════════════════════════ CONTACT ═════════════════════════ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
}
@media (max-width: 920px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }

.contact-promise {
  margin-bottom: 18px;
  padding-left: 20px;
  border-left: 1px solid var(--line-navy-2);
}
.contact-promise-h {
  font-family: var(--f-ui); font-weight: 700; font-size: 17px;
  letter-spacing: -0.015em;
  color: var(--sage);
  margin-bottom: 6px;
}
.contact-promise-t {
  font-family: var(--f-ui); font-size: 14px;
  color: var(--on-navy-2);
  line-height: 1.6;
}

.contact-info {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 0.5px solid var(--line-navy-2);
}
.contact-info-item {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-ui); font-size: 14px;
  color: var(--on-navy-2);
}
.contact-info-item .icon { width: 18px; text-align: center; color: var(--sage); }
.contact-info-item strong { color: var(--sage); font-weight: 500; }

.contact-wa-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-ui); font-size: 14px; font-weight: 600;
  background: var(--sage); color: var(--navy);
  padding: 13px 22px;
  border-radius: var(--r-pill);
  margin-top: 22px;
  transition: background 0.2s, transform 0.15s;
}
.contact-wa-btn:hover { background: var(--sage-3); transform: translateY(-1px); }

/* ═══════════════════════════════════════════ FORM ════════════════════════════ */
.form-card {
  background: var(--navy-2);
  border-radius: var(--r-lg);
  padding: 40px;
}
.bg-sage .form-card { background: var(--sage-3); color: var(--on-sage); }
@media (max-width: 600px) { .form-card { padding: 28px 22px; } }

.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 560px) { .f-row { grid-template-columns: 1fr; } }
.f-field { margin-bottom: 16px; }
.f-label {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--on-navy-3);
  display: block; margin-bottom: 8px;
}
.bg-sage .f-label, .form-card.on-sage .f-label { color: var(--on-sage-3); }

.f-input, .f-select, .f-textarea {
  width: 100%;
  background: rgba(192,208,192,0.06);
  border: 1px solid var(--line-navy);
  border-radius: var(--r-md);
  padding: 14px 16px;
  color: var(--sage);
  font-family: var(--f-ui); font-size: 15px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.f-textarea { resize: vertical; min-height: 120px; }
.f-input:focus, .f-select:focus, .f-textarea:focus {
  border-color: var(--sage); background: rgba(192,208,192,0.10);
}
.f-input::placeholder, .f-textarea::placeholder { color: var(--on-navy-4); }

.bg-sage .f-input, .bg-sage .f-select, .bg-sage .f-textarea {
  background: rgba(3,11,17,0.04);
  border-color: var(--line-sage);
  color: var(--on-sage);
}
.bg-sage .f-input:focus, .bg-sage .f-select:focus, .bg-sage .f-textarea:focus {
  border-color: var(--navy); background: rgba(3,11,17,0.06);
}
.bg-sage .f-input::placeholder, .bg-sage .f-textarea::placeholder { color: var(--on-sage-4); }

.f-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23c0d0c0' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.bg-sage .f-select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23030B11' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
}

.f-submit {
  width: 100%;
  background: var(--sage); color: var(--navy);
  border-radius: var(--r-pill);
  padding: 16px;
  font-family: var(--f-ui); font-size: 15px; font-weight: 600;
  letter-spacing: -0.01em;
  transition: background 0.2s, transform 0.15s;
  cursor: pointer;
}
.f-submit:hover { background: var(--sage-3); transform: translateY(-1px); }
.bg-sage .f-submit { background: var(--navy); color: var(--sage); }
.bg-sage .f-submit:hover { background: var(--navy-2); }

.f-note {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--on-navy-3);
  text-align: center;
  margin-top: 14px;
}
.bg-sage .f-note { color: var(--on-sage-3); }

/* ═══════════════════════════════════════════ FOOTER ══════════════════════════ */
.footer {
  background: var(--navy);
  color: var(--on-navy);
  padding: 96px 0 32px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.footer .page-wrap { position: relative; }

.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 64px;
  border-bottom: 0.5px solid var(--line-navy-2);
}
@media (max-width: 880px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } }

.footer-brand .nav-logo { color: var(--sage); }
.footer-brand .nav-logo-text { font-size: 32px; }
.footer-tagline {
  font-family: var(--f-ui); font-weight: 700;
  font-size: 22px; letter-spacing: -0.02em;
  color: var(--sage);
  margin: 22px 0 14px;
  line-height: 1.25;
}
.footer-tagline em { font-family: var(--f-brand); font-weight: 400; }
.footer-meta {
  font-family: var(--f-ui); font-size: 13px;
  color: var(--on-navy-2);
  line-height: 1.6;
  max-width: 360px;
}

.footer-col-h {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--on-navy-3);
  margin-bottom: 18px;
}
.footer-link {
  display: block;
  font-family: var(--f-ui); font-size: 14px;
  color: var(--on-navy-2);
  padding: 6px 0;
  transition: color 0.2s;
}
.footer-link:hover { color: var(--sage); }

.footer-social {
  display: flex; gap: 8px;
  margin-top: 16px;
}
.footer-social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(192,208,192,0.06);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 11px;
  color: var(--on-navy-2);
  transition: background 0.2s, color 0.2s;
}
.footer-social a:hover { background: var(--sage); color: var(--navy); }

.footer-big {
  font-family: var(--f-brand); font-weight: 400;
  font-size: clamp(96px, 22vw, 340px);
  letter-spacing: normal;
  line-height: 1;
  color: var(--sage);
  text-align: center;
  margin: 64px 0 40px;
  user-select: none;
}
.footer-big em {
  font-family: var(--f-brand); font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--sage);
}

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 28px;
  flex-wrap: wrap; gap: 14px;
  border-top: 0.5px solid var(--line-navy-2);
}
.footer-copy, .footer-foot {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--on-navy-3);
}
.newsletter {
  background: var(--navy);
  color: var(--on-navy);
  border-radius: var(--r-lg);
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}
@media (max-width: 800px) { .newsletter { grid-template-columns: 1fr; padding: 32px; } }
.newsletter .h-2 { color: var(--sage); }
.newsletter .body-copy { color: var(--on-navy-2); }
.newsletter .eyebrow { color: var(--on-navy-3); }
.newsletter form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter .f-input {
  flex: 1; min-width: 200px;
  background: rgba(192,208,192,0.06);
  border-color: var(--line-navy);
  color: var(--sage);
}
.newsletter .f-input::placeholder { color: var(--on-navy-4); }
.newsletter button {
  background: var(--sage); color: var(--navy);
  border-radius: var(--r-pill);
  padding: 13px 22px;
  font-family: var(--f-ui); font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.newsletter button:hover { background: var(--sage-3); transform: translateY(-1px); }
.bg-navy .newsletter { background: var(--navy-2); }

/* ═══════════════════════════════════════════ PRICING ═════════════════════════ */
.price-toggle {
  display: inline-flex;
  background: var(--sage-3);
  border-radius: var(--r-pill);
  padding: 5px;
  margin: 0 auto 48px;
}
.bg-navy .price-toggle { background: var(--navy-2); }
.price-toggle-btn {
  font-family: var(--f-ui); font-size: 13px; font-weight: 500;
  color: var(--on-sage-2);
  padding: 10px 22px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.bg-navy .price-toggle-btn { color: var(--on-navy-2); }
.price-toggle-btn.active {
  background: var(--navy); color: var(--sage);
}
.bg-navy .price-toggle-btn.active { background: var(--sage); color: var(--navy); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1080px) { .pricing-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pricing-grid { grid-template-columns: 1fr; } }

.price-card {
  background: var(--sage-3);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform 0.3s;
  color: var(--on-sage);
}
.bg-navy .price-card { background: var(--navy-2); color: var(--on-navy); }
.price-card:hover { transform: translateY(-4px); }

.price-card.featured {
  background: var(--navy);
  color: var(--on-navy);
  transform: translateY(-12px);
}
.price-card.featured:hover { transform: translateY(-16px); }
.bg-navy .price-card.featured { background: var(--sage); color: var(--on-sage); }

.price-badge {
  position: absolute; top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--sage); color: var(--navy);
  font-family: var(--f-mono); font-size: 11px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.price-card.featured .price-badge { background: var(--sage); color: var(--navy); }

.price-tier {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--on-sage-3);
  margin-bottom: 8px;
}
.price-card.featured .price-tier { color: var(--on-navy-3); }

.price-name {
  font-family: var(--f-ui); font-weight: 700;
  font-size: 24px; letter-spacing: -0.025em;
  color: var(--on-sage);
  margin-bottom: 8px;
}
.price-card.featured .price-name { color: var(--sage); }

.price-tag {
  font-family: var(--f-ui); font-size: 14px;
  color: var(--on-sage-2);
  line-height: 1.55;
  margin-bottom: 22px;
}
.price-card.featured .price-tag { color: var(--on-navy-2); }

.price-amount {
  font-family: var(--f-ui); font-weight: 800;
  font-size: 48px; letter-spacing: -0.04em;
  color: var(--on-sage); line-height: 1;
  margin-bottom: 4px;
}
.price-card.featured .price-amount { color: var(--sage); }
.price-amount .currency {
  font-family: var(--f-mono); font-weight: 400;
  font-size: 14px;
  color: var(--on-sage-3);
  margin-right: 6px;
  letter-spacing: 0;
}
.price-card.featured .price-amount .currency { color: var(--on-navy-3); }

.price-period {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--on-sage-3);
  margin-bottom: 22px;
}
.price-card.featured .price-period { color: var(--on-navy-3); }

.price-features {
  font-family: var(--f-ui); font-size: 14px;
  color: var(--on-sage-2);
  margin-bottom: 24px;
  flex: 1;
}
.price-card.featured .price-features { color: var(--on-navy-2); }
.price-features li {
  padding: 8px 0 8px 20px;
  position: relative;
  border-bottom: 0.5px solid var(--line-sage);
  line-height: 1.55;
}
.price-card.featured .price-features li { border-bottom-color: var(--line-navy); }
.price-features li::before {
  content: '+';
  position: absolute; left: 0;
  color: var(--on-sage);
  font-weight: 600;
}
.price-card.featured .price-features li::before { color: var(--sage); }
.price-features li:last-child { border-bottom: none; }

.price-cta {
  display: block; text-align: center;
  font-family: var(--f-ui); font-size: 14px; font-weight: 600;
  padding: 14px;
  border-radius: var(--r-pill);
  background: var(--navy); color: var(--sage);
  transition: background 0.2s, transform 0.15s;
}
.price-cta:hover { background: var(--navy-2); transform: translateY(-1px); }
.price-card.featured .price-cta {
  background: var(--sage); color: var(--navy);
}
.price-card.featured .price-cta:hover { background: var(--sage-3); }

.price-urgency {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--on-sage-2);
  margin-top: 14px;
  text-align: center;
}
.price-card.featured .price-urgency { color: var(--on-navy-2); }

.price-anchor {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--on-sage-3);
  margin-bottom: 8px;
}
.price-card.featured .price-anchor { color: var(--on-navy-3); }

/* ── Bundle ───────────────────────────── */
.bundle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 960px) { .bundle-grid { grid-template-columns: 1fr; } }
.bundle-card {
  background: var(--navy-2);
  border-radius: var(--r-lg);
  padding: 36px;
  position: relative;
  color: var(--on-navy);
}
.bg-sage .bundle-card { background: var(--sage-3); color: var(--on-sage); }
.bundle-card.gold { background: var(--sage); color: var(--on-sage); }
.bundle-emoji {
  font-family: var(--f-mono); font-size: 13px;
  color: var(--on-navy-3);
  margin-bottom: 16px;
}
.bg-sage .bundle-card .bundle-emoji, .bundle-card.gold .bundle-emoji { color: var(--on-sage-3); }
.bundle-name {
  font-family: var(--f-ui); font-weight: 700;
  font-size: 28px; letter-spacing: -0.025em;
  color: var(--sage);
  margin-bottom: 10px;
}
.bg-sage .bundle-card .bundle-name, .bundle-card.gold .bundle-name { color: var(--navy); }
.bundle-price {
  font-family: var(--f-ui); font-weight: 800;
  font-size: 44px; letter-spacing: -0.04em;
  color: var(--sage);
  margin-bottom: 6px;
  line-height: 1;
}
.bundle-card.gold .bundle-price, .bg-sage .bundle-card .bundle-price { color: var(--navy); }
.bundle-strike {
  font-family: var(--f-mono); font-size: 13px;
  color: var(--on-navy-3);
  text-decoration: line-through;
  margin-bottom: 18px;
}
.bg-sage .bundle-card .bundle-strike, .bundle-card.gold .bundle-strike { color: var(--on-sage-3); }
.bundle-save {
  display: inline-block;
  font-family: var(--f-mono); font-size: 11px;
  background: var(--sage); color: var(--navy);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 18px;
}
.bundle-card.gold .bundle-save, .bg-sage .bundle-card .bundle-save { background: var(--navy); color: var(--sage); }
.bundle-includes {
  font-family: var(--f-ui); font-size: 14px;
  color: var(--on-navy-2);
  line-height: 1.65;
  margin-bottom: 22px;
}
.bg-sage .bundle-card .bundle-includes, .bundle-card.gold .bundle-includes { color: var(--on-sage-2); }
.bundle-includes li {
  padding: 6px 0 6px 20px;
  position: relative;
}
.bundle-includes li::before {
  content: '+'; position: absolute; left: 0;
  color: var(--sage); font-weight: 600;
}
.bg-sage .bundle-card .bundle-includes li::before, .bundle-card.gold .bundle-includes li::before { color: var(--navy); }

/* ── Guarantee ─────────────────────────── */
.guarantee-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 800px) { .guarantee-grid { grid-template-columns: 1fr; } }
.guarantee {
  background: var(--sage-3);
  border-radius: var(--r-lg);
  padding: 32px;
}
.bg-navy .guarantee { background: var(--navy-2); color: var(--on-navy); }
.guarantee-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--sage);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-ui); font-weight: 700;
  font-size: 18px;
  margin-bottom: 18px;
}
.bg-navy .guarantee-icon { background: var(--sage); color: var(--navy); }
.guarantee-h {
  font-family: var(--f-ui); font-weight: 700;
  font-size: 22px; letter-spacing: -0.02em;
  color: var(--on-sage);
  margin-bottom: 10px;
}
.bg-navy .guarantee-h { color: var(--sage); }
.guarantee-t {
  font-family: var(--f-ui); font-size: 14px;
  color: var(--on-sage-2);
  line-height: 1.6;
}
.bg-navy .guarantee-t { color: var(--on-navy-2); }

/* ── ROI calculator ────────────────────── */
.roi-card {
  background: var(--navy-2);
  border-radius: var(--r-lg);
  padding: 40px;
  color: var(--on-navy);
}
.bg-sage .roi-card { background: var(--sage-3); color: var(--on-sage); }
.roi-slider-row { margin-bottom: 28px; }
.roi-slider-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.roi-slider-l {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--on-navy-2);
}
.bg-sage .roi-slider-l { color: var(--on-sage-2); }
.roi-slider-v {
  font-family: var(--f-ui); font-weight: 700;
  font-size: 24px; letter-spacing: -0.02em;
  color: var(--sage);
}
.bg-sage .roi-slider-v { color: var(--navy); }
input[type="range"].roi-slider {
  width: 100%;
  appearance: none;
  background: transparent;
  height: 24px;
  cursor: pointer;
}
input[type="range"].roi-slider::-webkit-slider-runnable-track {
  height: 4px; background: rgba(192,208,192,0.12); border-radius: 4px;
}
input[type="range"].roi-slider::-moz-range-track {
  height: 4px; background: rgba(192,208,192,0.12); border-radius: 4px;
}
.bg-sage input[type="range"].roi-slider::-webkit-slider-runnable-track,
.bg-sage input[type="range"].roi-slider::-moz-range-track {
  background: rgba(3,11,17,0.10);
}
input[type="range"].roi-slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px;
  background: var(--sage); border-radius: 50%;
  margin-top: -8px;
  cursor: pointer;
}
input[type="range"].roi-slider::-moz-range-thumb {
  width: 20px; height: 20px;
  background: var(--sage); border-radius: 50%;
  border: none;
  cursor: pointer;
}
.bg-sage input[type="range"].roi-slider::-webkit-slider-thumb,
.bg-sage input[type="range"].roi-slider::-moz-range-thumb { background: var(--navy); }

.roi-output {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 0.5px solid var(--line-navy-2);
}
.bg-sage .roi-output { border-top-color: var(--line-sage); }
.roi-output-l {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--on-navy-3);
  margin-bottom: 12px;
}
.bg-sage .roi-output-l { color: var(--on-sage-3); }
.roi-output-v {
  font-family: var(--f-ui); font-weight: 800;
  font-size: clamp(48px, 7vw, 76px);
  letter-spacing: -0.04em;
  color: var(--sage);
  line-height: 1;
}
.bg-sage .roi-output-v { color: var(--navy); }
.roi-output-note {
  font-family: var(--f-ui); font-size: 14px;
  color: var(--on-navy-2);
  margin-top: 14px;
  line-height: 1.6;
}
.bg-sage .roi-output-note { color: var(--on-sage-2); }

/* ── Not-for / discount table ───────────── */
.notfor {
  background: var(--sage-3);
  border-radius: var(--r-lg);
  padding: 36px;
  margin: 56px 0;
}
.bg-navy .notfor { background: var(--navy-2); color: var(--on-navy); }
.notfor-h {
  font-family: var(--f-ui); font-weight: 700;
  font-size: 28px; letter-spacing: -0.025em;
  color: var(--on-sage);
  margin-bottom: 14px;
}
.notfor-h em { font-family: var(--f-brand); font-weight: 400; }
.bg-navy .notfor-h { color: var(--sage); }
.notfor-list {
  font-family: var(--f-ui); font-size: 15px;
  color: var(--on-sage-2);
  line-height: 1.85;
}
.bg-navy .notfor-list { color: var(--on-navy-2); }
.notfor-list li {
  padding: 6px 0 6px 26px;
  position: relative;
}
.notfor-list li::before {
  content: '×'; position: absolute; left: 0;
  color: var(--on-sage);
  font-weight: 700;
  font-size: 18px;
}
.bg-navy .notfor-list li::before { color: var(--sage); }
.notfor-fit {
  font-family: var(--f-ui); font-size: 16px; font-weight: 600;
  color: var(--on-sage);
  margin-top: 22px;
  letter-spacing: -0.015em;
}
.bg-navy .notfor-fit { color: var(--sage); }

.discount-table {
  background: var(--navy);
  color: var(--on-navy);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.bg-navy .discount-table { background: var(--navy-2); }
.discount-table table {
  width: 100%;
  border-collapse: collapse;
}
.discount-table th {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--on-navy-3);
  padding: 18px 22px;
  text-align: left;
  border-bottom: 0.5px solid var(--line-navy-2);
  background: var(--navy-2);
}
.discount-table td {
  padding: 16px 22px;
  color: var(--on-navy-2);
  border-bottom: 0.5px solid var(--line-navy);
  font-family: var(--f-ui); font-size: 14px;
  vertical-align: top;
}
.discount-table td:first-child { color: var(--sage); font-weight: 600; }
.discount-table td .save {
  color: var(--sage); font-weight: 600;
  font-family: var(--f-mono);
}
.discount-table tr:last-child td { border-bottom: none; }

/* ═══════════════════════════════════════════ ABOUT ═══════════════════════════ */
.about-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 56px;
}
@media (max-width: 800px) { .about-values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .about-values { grid-template-columns: 1fr; } }
.value-card {
  background: var(--navy-2);
  border-radius: var(--r-lg);
  padding: 28px;
}
.bg-sage .value-card { background: var(--sage-3); color: var(--on-sage); }
.value-card .num {
  display: block;
  font-family: var(--f-mono); font-weight: 400;
  font-size: 13px;
  color: var(--on-navy-3);
  margin-bottom: 16px;
  letter-spacing: 0;
}
.bg-sage .value-card .num { color: var(--on-sage-3); }
.value-card h3 {
  font-family: var(--f-ui); font-weight: 700;
  font-size: 22px; letter-spacing: -0.02em;
  color: var(--sage);
  margin-bottom: 10px;
  line-height: 1.15;
}
.bg-sage .value-card h3 { color: var(--navy); }
.value-card p {
  font-family: var(--f-ui); font-size: 14px;
  color: var(--on-navy-2);
  line-height: 1.6;
}
.bg-sage .value-card p { color: var(--on-sage-2); }

.studio-grid {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px;
  align-items: center;
}
@media (max-width: 880px) { .studio-grid { grid-template-columns: 1fr; gap: 40px; } }

.story-block {
  font-family: var(--f-ui); font-size: 17px;
  line-height: 1.7;
  color: var(--on-sage-2);
  max-width: 640px;
}
.bg-navy .story-block { color: var(--on-navy-2); }
.story-block p { margin-bottom: 18px; }
.story-block strong { color: var(--on-sage); font-weight: 600; }
.bg-navy .story-block strong { color: var(--sage); }

.mission {
  background: var(--sage-3);
  border-radius: var(--r-lg);
  padding: 32px;
}
.bg-navy .mission { background: var(--navy-2); }
.mission-h {
  font-family: var(--f-mono); font-size: 13px;
  color: var(--on-sage-3);
  margin-bottom: 14px;
}
.bg-navy .mission-h { color: var(--on-navy-3); }
.mission-t {
  font-family: var(--f-brand);
  font-size: clamp(28px, 3vw, 38px);
  color: var(--on-sage);
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.bg-navy .mission-t { color: var(--sage); }

.diff-list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 880px) { .diff-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .diff-list { grid-template-columns: 1fr; } }
.diff {
  background: var(--sage-3);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex; flex-direction: column;
}
.bg-navy .diff { background: var(--navy-2); color: var(--on-navy); }
.diff-n {
  font-family: var(--f-mono); font-size: 13px;
  color: var(--on-sage-3);
  margin-bottom: 16px;
}
.bg-navy .diff-n { color: var(--on-navy-3); }
.diff-h {
  font-family: var(--f-ui); font-weight: 700;
  font-size: 20px; letter-spacing: -0.02em;
  color: var(--on-sage);
  margin-bottom: 12px;
  line-height: 1.2;
}
.bg-navy .diff-h { color: var(--sage); }
.diff-t {
  font-family: var(--f-ui); font-size: 14px;
  color: var(--on-sage-2);
  line-height: 1.6;
}
.bg-navy .diff-t { color: var(--on-navy-2); }

/* ═══════════════════════════════════════════ BLOG ═══════════════════════════ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 920px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card {
  background: var(--sage-3);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.3s;
  color: var(--on-sage);
}
.bg-navy .blog-card { background: var(--navy-2); color: var(--on-navy); }
.blog-card:hover { transform: translateY(-4px); }
.blog-img {
  height: 200px;
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
.blog-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.4) contrast(0.95) brightness(0.85);
  transition: filter 0.5s ease, transform 0.6s ease;
}
.blog-card:hover .blog-img img { filter: grayscale(0) contrast(1) brightness(1); transform: scale(1.04); }
.blog-img-text {
  font-family: var(--f-ui);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--sage);
  opacity: 0.36;
  padding: 24px;
  text-align: center;
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  line-height: 1.1;
}
.blog-cat {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--f-mono); font-size: 11px;
  background: var(--sage); color: var(--navy);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  z-index: 2;
}
.blog-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.blog-meta {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--on-sage-3);
  margin-bottom: 12px;
}
.bg-navy .blog-meta { color: var(--on-navy-3); }
.blog-title {
  font-family: var(--f-ui); font-weight: 700;
  font-size: 22px; letter-spacing: -0.02em;
  color: var(--on-sage);
  line-height: 1.2;
  margin-bottom: 14px;
  flex: 1;
}
.bg-navy .blog-title { color: var(--sage); }
.blog-excerpt {
  font-family: var(--f-ui); font-size: 14px;
  color: var(--on-sage-2);
  line-height: 1.6;
  margin-bottom: 18px;
}
.bg-navy .blog-excerpt { color: var(--on-navy-2); }
.blog-read {
  font-family: var(--f-ui); font-size: 13px; font-weight: 600;
  color: var(--on-sage);
}
.bg-navy .blog-read { color: var(--sage); }

/* ═══════════════════════════════════════════ CASE / WORK DETAIL ══════════════ */
.case {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}
@media (max-width: 880px) { .case { grid-template-columns: 1fr; } }
.case-img {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy-2);
  aspect-ratio: 4/3;
}
.case-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.4) contrast(0.95) brightness(0.85);
  transition: filter 0.5s ease, transform 0.6s ease;
}
.case-img:hover img { filter: grayscale(0) contrast(1) brightness(1); transform: scale(1.04); }
.case-img-text {
  font-family: var(--f-ui);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.04em;
  color: var(--sage);
  opacity: 0.22;
  padding: 24px;
  text-align: center;
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  line-height: 1;
}
.case-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.case-title {
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--on-sage);
  margin-bottom: 16px;
}
.bg-navy .case-title { color: var(--sage); }
.case-block { margin-bottom: 22px; }
.case-block-h {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--on-sage-3);
  margin-bottom: 8px;
}
.bg-navy .case-block-h { color: var(--on-navy-3); }
.case-block-t {
  font-family: var(--f-ui); font-size: 15px;
  color: var(--on-sage-2);
  line-height: 1.6;
}
.bg-navy .case-block-t { color: var(--on-navy-2); }
.case-cta { margin-top: 14px; }

/* ═══════════════════════════════════════════ FORM (multi-step / survey) ═════ */
.steps-bar {
  display: flex; gap: 8px;
  margin-bottom: 40px;
}
.step-pip {
  flex: 1; height: 3px;
  background: var(--line-navy);
  border-radius: 3px;
  transition: background 0.3s;
}
.bg-sage .step-pip { background: var(--line-sage); }
.step-pip.active { background: var(--sage); }
.bg-sage .step-pip.active { background: var(--navy); }
.step-pip.done { background: rgba(192,208,192,0.40); }
.bg-sage .step-pip.done { background: rgba(3,11,17,0.30); }

.step-panel { display: none; }
.step-panel.active { display: block; animation: fadeIn 0.4s ease; }

.step-h {
  font-family: var(--f-ui); font-weight: 700;
  font-size: 36px; letter-spacing: -0.03em;
  color: var(--sage);
  margin-bottom: 14px;
  line-height: 1.05;
}
.step-h em { font-family: var(--f-brand); font-weight: 400; }
.bg-sage .step-h { color: var(--navy); }
.step-sub {
  font-family: var(--f-ui); font-size: 16px;
  color: var(--on-navy-2);
  margin-bottom: 32px;
  line-height: 1.6;
}
.bg-sage .step-sub { color: var(--on-sage-2); }

.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 32px;
}
@media (max-width: 560px) { .choice-grid { grid-template-columns: 1fr; } }
.choice {
  background: rgba(192,208,192,0.04);
  border: 1px solid var(--line-navy-2);
  border-radius: var(--r-md);
  padding: 22px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.bg-sage .choice { background: rgba(3,11,17,0.04); border-color: var(--line-sage-2); }
.choice:hover { border-color: var(--sage); }
.bg-sage .choice:hover { border-color: var(--navy); }
.choice.selected {
  border-color: var(--sage);
  background: rgba(192,208,192,0.10);
}
.bg-sage .choice.selected { border-color: var(--navy); background: rgba(3,11,17,0.06); }
.choice-h {
  font-family: var(--f-ui); font-weight: 700;
  font-size: 18px; letter-spacing: -0.015em;
  color: var(--sage);
  margin-bottom: 6px;
}
.bg-sage .choice-h { color: var(--navy); }
.choice-t {
  font-family: var(--f-ui); font-size: 13px;
  color: var(--on-navy-2);
  line-height: 1.55;
}
.bg-sage .choice-t { color: var(--on-sage-2); }

.step-nav {
  display: flex; justify-content: space-between; gap: 14px;
  margin-top: 28px;
}
.step-back {
  font-family: var(--f-ui); font-size: 13px; font-weight: 500;
  background: transparent; color: var(--on-navy-2);
  padding: 12px 22px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-navy-2);
}
.bg-sage .step-back { color: var(--on-sage-2); border-color: var(--line-sage-2); }
.step-next {
  font-family: var(--f-ui); font-size: 14px; font-weight: 600;
  background: var(--sage); color: var(--navy);
  padding: 13px 28px;
  border-radius: var(--r-pill);
  transition: background 0.2s, transform 0.15s;
}
.step-next:hover { background: var(--sage-3); transform: translateY(-1px); }
.bg-sage .step-next { background: var(--navy); color: var(--sage); }
.bg-sage .step-next:hover { background: var(--navy-2); }
.step-next:disabled {
  background: rgba(192,208,192,0.10); color: var(--on-navy-3);
  cursor: not-allowed; transform: none;
}
.bg-sage .step-next:disabled { background: rgba(3,11,17,0.06); color: var(--on-sage-3); }

.result-card {
  background: var(--sage);
  color: var(--on-sage);
  border-radius: var(--r-lg);
  padding: 36px;
  margin-top: 28px;
}
.result-card .price-amount { color: var(--navy); }
.result-h {
  font-family: var(--f-ui); font-weight: 700;
  font-size: 32px; letter-spacing: -0.03em;
  color: var(--navy); margin-bottom: 10px;
}
.result-h em { font-family: var(--f-brand); font-weight: 400; }

/* Phase / chapter (about / blog detail / form sections) */
.phase {
  background: var(--sage-3);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
}
.bg-navy .phase { background: var(--navy-2); color: var(--on-navy); }
.phase-badge {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--on-sage-3);
}
.bg-navy .phase-badge { color: var(--on-navy-3); }
.phase-title {
  font-family: var(--f-ui); font-weight: 700;
  font-size: 22px; letter-spacing: -0.02em;
  color: var(--on-sage);
  margin-bottom: 8px;
}
.bg-navy .phase-title { color: var(--sage); }
.phase-desc {
  font-family: var(--f-ui); font-size: 14px;
  color: var(--on-sage-2); line-height: 1.6;
}
.bg-navy .phase-desc { color: var(--on-navy-2); }
.phase-files {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--on-sage-3);
  margin-top: 8px;
}
.bg-navy .phase-files { color: var(--on-navy-3); }

.chapter { margin-top: 56px; }
.ch-n {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--on-sage-3);
  margin-bottom: 12px;
}
.bg-navy .ch-n { color: var(--on-navy-3); }
.ch-t {
  font-family: var(--f-ui); font-weight: 700;
  font-size: 32px; letter-spacing: -0.03em;
  color: var(--on-sage);
  margin-bottom: 14px;
  line-height: 1.05;
}
.bg-navy .ch-t { color: var(--sage); }
.ch-s {
  font-family: var(--f-ui); font-size: 17px;
  color: var(--on-sage-2);
  line-height: 1.65;
  max-width: 720px;
}
.bg-navy .ch-s { color: var(--on-navy-2); }

/* Doc-style header (form / survey) */
.doc-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 32px;
  padding-bottom: 22px;
  border-bottom: 0.5px solid var(--line-navy-2);
  gap: 18px;
}
.bg-sage .doc-header { border-bottom-color: var(--line-sage-2); }
.doc-meta {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--on-navy-3);
}
.bg-sage .doc-meta { color: var(--on-sage-3); }
.doc-wordmark {
  font-family: var(--f-brand);
  font-size: 36px;
  color: var(--sage);
  line-height: 1;
}
.bg-sage .doc-wordmark { color: var(--navy); }
.doc-wordmark::after { content: '.'; }
.doc-foot {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 0.5px solid var(--line-navy-2);
  font-family: var(--f-mono); font-size: 12px;
  color: var(--on-navy-3);
  text-align: center;
}
.bg-sage .doc-foot { border-top-color: var(--line-sage-2); color: var(--on-sage-3); }

/* Footer brand left-side compound (df-brand / df-meta) */
.df-brand {
  font-family: var(--f-brand);
  font-size: 32px;
  color: var(--sage);
  margin-bottom: 12px;
}
.df-meta {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--on-navy-3);
}

/* Preview / pn-* (any nav/hero preview strips on design system page) */
.preview-nav, .preview-hero, .pn-cta, .pn-link, .pn-links, .pn-logo {
  display: none;
}

/* Swatches (only used on design system reference page) */
.sw, .sw-c, .sw-hex, .sw-i, .sw-name, .sw-row { font-family: var(--f-mono); }

/* ═══════════════════════════════════════════ MISC ═══════════════════════════ */
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.icon { display: inline-block; }
.cl, .pf { font-family: var(--f-ui); }
.tw, .hl { color: inherit; }
.gold { color: var(--navy); }
.save { color: var(--on-navy); font-weight: 600; }
.currency { font-family: var(--f-mono); font-weight: 400; font-size: 0.5em; }
.h130, .h150 { font-family: var(--f-ui); font-weight: 800; letter-spacing: -0.04em; line-height: 0.9; }
.h130 { font-size: clamp(80px, 12vw, 130px); }
.h150 { font-size: clamp(96px, 14vw, 150px); }

/* ═══════════════════════════════════════════ SCROLL REVEAL ══════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════════ UTILITIES ══════════════════════ */
.text-center { text-align: center; }
.flex-center { display: flex; justify-content: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 12px; }
.mt-2 { margin-top: 24px; }
.mt-3 { margin-top: 36px; }
.mt-4 { margin-top: 48px; }
.mt-5 { margin-top: 60px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 12px; }
.mb-2 { margin-bottom: 24px; }
.mb-3 { margin-bottom: 36px; }
.mb-4 { margin-bottom: 48px; }
.mb-5 { margin-bottom: 60px; }

/* ═══════════════════════════════════════════ RESPONSIVE TUNING ══════════════ */
@media (max-width: 720px) {
  .section { padding: 72px 0; }
  .section-lg { padding: 96px 0; }
  .page-wrap { padding: 0 20px; }
  .nav { left: 12px; right: 12px; top: 12px; }
  .nav-banner + .nav { top: 32px; }
  .nav-inner { padding: 8px 12px 8px 18px; }
  .stats-block { padding: 36px 24px; }
  .footer-big { font-size: clamp(64px, 22vw, 140px); margin: 40px 0 28px; }
}