/* ============================================================
   King of Dublin Builders - KingOfDublinBuilders.com
   Static site stylesheet, built from the KDB design system.
   Families: Cinzel (display) + Archivo (body / tracked labels).
   Palette: stone neutrals, emerald brand, brass accent.
   ============================================================ */

/* ---- Color tokens (sampled from the brand logo) ---- */
:root {
  /* Stone - cool paper neutrals (from logo background #F6F7F2) */
  --stone-0: #FFFFFF;
  --stone-50: #F6F7F2;
  --stone-100: #EDEFE7;
  --stone-200: #E0E3D8;
  --stone-300: #C9CDBF;
  --stone-400: #A3A797;
  --stone-500: #797D6F;
  --stone-600: #585B50;
  --stone-700: #3C3E36;
  --stone-800: #282A24;
  --stone-900: #191B16;

  /* Emerald - the brand green (600 = logo mark, 700 = logo text) */
  --emerald-100: #DCEAE1;
  --emerald-200: #AFD0BD;
  --emerald-300: #6BA888;
  --emerald-400: #2F7E55;
  --emerald-500: #1A6440;
  --emerald-600: #135233;
  --emerald-700: #0E4327;
  --emerald-800: #0B3320;
  --emerald-900: #082619;

  /* Brass - crown accent; ticks, rules, markers, key numerals only */
  --brass-100: #F6ECD2;
  --brass-200: #EEDCA8;
  --brass-300: #E5C77A;
  --brass-400: #D9B254;
  --brass-500: #C79F3A;
  --brass-600: #A98430;
  --brass-700: #7D5F24;

  /* Semantic status (muted, never neon) */
  --color-info: #3A6B8C;
  --color-success: #2E7D4F;
  --color-warning: #B97A18;
  --color-danger: #A8402F;
  --color-info-bg: #E7EEF3;
  --color-success-bg: #E4F0E8;
  --color-warning-bg: #F6ECD9;
  --color-danger-bg: #F5E4E0;

  /* Semantic aliases */
  --bg-page: var(--stone-50);
  --bg-inset: var(--stone-100);
  --surface-card: var(--stone-0);
  --surface-raised: var(--stone-0);
  --surface-inverse: var(--stone-900);
  --surface-brand: var(--emerald-800);

  --text-primary: var(--stone-900);
  --text-secondary: var(--stone-600);
  --text-muted: var(--stone-500);
  --text-inverse: var(--stone-50);
  --text-inverse-secondary: var(--stone-300);
  --text-on-primary: #F2F6F1;
  --text-brand: var(--emerald-600);
  --text-accent: var(--brass-500);

  --accent-primary: var(--emerald-600);
  --accent-primary-hover: var(--emerald-700);
  --accent-primary-active: var(--emerald-800);
  --accent-brass: var(--brass-500);

  --border-default: var(--stone-200);
  --border-strong: var(--stone-300);
  --border-inverse: rgba(246, 247, 242, 0.18);
  --focus-ring: var(--emerald-400);

  /* Typography */
  --font-display: "Cinzel", "Times New Roman", serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-label: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 25px;
  --text-2xl: 31px;
  --text-3xl: 39px;
  --text-4xl: 49px;
  --text-5xl: 61px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.55;

  --tracking-display: 0.02em;
  --tracking-body: 0;
  --tracking-eyebrow: 0.14em;

  --type-display: var(--weight-bold) var(--text-4xl) / var(--leading-tight) var(--font-display);
  --type-h1: var(--weight-bold) var(--text-3xl) / var(--leading-tight) var(--font-display);
  --type-h2: var(--weight-semibold) var(--text-2xl) / var(--leading-snug) var(--font-display);
  --type-h3: var(--weight-semibold) var(--text-xl) / var(--leading-snug) var(--font-body);
  --type-body: var(--weight-regular) var(--text-base) / var(--leading-normal) var(--font-body);
  --type-body-strong: var(--weight-semibold) var(--text-base) / var(--leading-normal) var(--font-body);
  --type-small: var(--weight-regular) var(--text-sm) / var(--leading-normal) var(--font-body);
  --type-eyebrow: var(--weight-semibold) var(--text-xs) / 1.2 var(--font-label);

  /* Spacing - 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radii - engineered, never bubbly */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* Borders */
  --border-hairline: 1px solid var(--border-default);
  --border-rule: 1px solid var(--border-strong);

  /* Shadows - warm-tinted, restrained */
  --shadow-xs: 0 1px 2px rgba(27, 26, 22, 0.06);
  --shadow-sm: 0 1px 3px rgba(27, 26, 22, 0.08), 0 1px 2px rgba(27, 26, 22, 0.04);
  --shadow-md: 0 4px 12px rgba(27, 26, 22, 0.08), 0 1px 3px rgba(27, 26, 22, 0.06);
  --shadow-lg: 0 12px 32px rgba(27, 26, 22, 0.12), 0 2px 6px rgba(27, 26, 22, 0.06);

  /* Motion - quiet, decisive */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;

  /* Layout */
  --container-max: 1200px;
  --content-max: 720px;
}

/* ---- Base ---- */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* full-viewport sheets w/ snap; sections land like sheets in a drawing set */
html { scroll-snap-type: y mandatory; scroll-padding-top: 66px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; scroll-snap-type: none; } }
@media (max-width: 880px) { html { scroll-snap-type: none; } }

body {
  font: var(--type-body);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-primary);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
h1 { font: var(--type-h1); }
h2 { font: var(--type-h2); }
h3 { font: var(--type-h3); letter-spacing: 0; }

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--text-brand);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--accent-primary-hover); text-decoration: underline; text-underline-offset: 3px; }

code, pre { font-family: var(--font-label); font-size: 0.92em; }

::selection { background: var(--emerald-200); color: var(--emerald-900); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

img { border: 0; }

svg.lucide { width: 24px; height: 24px; stroke-width: 1.5; }

/* touch + press feel: decisive, no glow */
button, a { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }

/* ---- Brand utilities ---- */

/* Spec-sheet eyebrow: tracked caps with brass dimension mark */
.kdb-eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.kdb-eyebrow::before {
  content: "";
  width: 18px;
  height: 7px;
  border-left: 2px solid var(--accent-brass);
  border-right: 2px solid var(--accent-brass);
  background: linear-gradient(var(--accent-brass), var(--accent-brass)) center / 100% 1.5px no-repeat;
  flex: none;
}

/* Hairline rule with measurement ticks at each end */
.kdb-rule { border: none; border-top: var(--border-hairline); position: relative; margin: 0; }
.kdb-rule::before, .kdb-rule::after {
  content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--border-strong);
}
.kdb-rule::before { left: 0; }
.kdb-rule::after { right: 0; }

/* ---- Components: Button ---- */
.kdb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: var(--weight-semibold); letter-spacing: 0;
  border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  border: 1px solid transparent; text-decoration: none; }
.kdb-btn:hover { text-decoration: none; }
.kdb-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.kdb-btn:active { transform: translateY(1.5px); }
.kdb-btn--sm { font-size: 13px; padding: 7px 14px; }
.kdb-btn--md { font-size: 15px; padding: 10px 20px; }
.kdb-btn--lg { font-size: 16px; padding: 13px 26px; }
.kdb-btn--primary { background: var(--accent-primary); color: var(--text-on-primary); }
.kdb-btn--primary:hover:not(:disabled) { background: var(--accent-primary-hover); color: var(--text-on-primary); }
.kdb-btn--primary:active:not(:disabled) { background: var(--accent-primary-active); }
.kdb-btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.kdb-btn--secondary:hover:not(:disabled) { border-color: var(--stone-500); background: var(--bg-inset); color: var(--text-primary); }
.kdb-btn--secondary:active:not(:disabled) { background: var(--stone-200); }
.kdb-btn--ghost { background: transparent; color: var(--text-brand); }
.kdb-btn--ghost:hover:not(:disabled) { background: var(--emerald-100); color: var(--text-brand); }
.kdb-btn--ghost:active:not(:disabled) { background: var(--emerald-200); }
.kdb-btn--inverse { background: var(--stone-50); color: var(--emerald-700); }
.kdb-btn--inverse:hover:not(:disabled) { background: var(--stone-200); color: var(--emerald-700); }
.kdb-btn--inverse:active:not(:disabled) { background: var(--stone-300); }
.kdb-btn--full { width: 100%; }

/* ---- Components: Badge ---- */
.kdb-badge { display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-label); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid transparent; }
.kdb-badge--neutral { background: var(--bg-inset); color: var(--text-secondary); border-color: var(--border-default); }
.kdb-badge--brand { background: var(--emerald-100); color: var(--emerald-700); }
.kdb-badge--brass { background: var(--brass-100); color: var(--brass-700); }

/* ---- Components: Stat ---- */
.kdb-stat { display: flex; flex-direction: column; gap: 6px; }
.kdb-stat__value { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; color: var(--text-primary); }
.kdb-stat__value em { font-style: normal; color: var(--accent-brass); }
.kdb-stat__label { font: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-secondary); }
.kdb-stat--inverse .kdb-stat__value { color: var(--text-inverse); }
.kdb-stat--inverse .kdb-stat__label { color: var(--text-inverse-secondary); }
.kdb-stat--lg .kdb-stat__value { font-size: 40px; }

/* ---- Components: SectionHeader ---- */
.kdb-sh { display: flex; flex-direction: column; gap: 14px; }
.kdb-sh--center { align-items: center; text-align: center; }
.kdb-sh__eyebrow { font: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 8px; }
.kdb-sh__eyebrow::before { content: ""; width: 18px; height: 7px; border-left: 2px solid var(--accent-brass); border-right: 2px solid var(--accent-brass); background: linear-gradient(var(--accent-brass), var(--accent-brass)) center / 100% 1.5px no-repeat; flex: none; }
.kdb-sh__title { font: var(--type-h1); font-family: var(--font-display); letter-spacing: var(--tracking-display); color: var(--text-primary); margin: 0; max-width: 640px; text-wrap: balance; }
.kdb-sh__lede { font: var(--type-body); color: var(--text-secondary); max-width: 560px; margin: 0; text-wrap: pretty; }
.kdb-sh--inverse .kdb-sh__title { color: var(--text-inverse); }
.kdb-sh--inverse .kdb-sh__eyebrow { color: var(--text-inverse-secondary); }
.kdb-sh--inverse .kdb-sh__lede { color: var(--text-inverse-secondary); }

/* ---- Components: Wordmark ---- */
.kdb-wm { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; text-decoration: none; }
.kdb-wm__top { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.kdb-wm__main { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.kdb-wm__sub { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.kdb-wm__rule { width: 100%; height: 1px; background: currentColor; opacity: 0.5; }
.kdb-wm__tag { font-family: var(--font-label); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }

/* ============================================================
   Site chrome
   ============================================================ */

/* ---- drafting crosshair (follows cursor on blueprint sheets) ---- */
.kdb-xhair { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0;
  transition: opacity 0.45s var(--ease-out); z-index: 1; }
.kdb-xhair--on { opacity: 1; }
.kdb-xhair__v { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: rgba(217, 178, 84, 0.3); }
.kdb-xhair__h { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(217, 178, 84, 0.3); }
.kdb-xhair__dot { position: absolute; top: 0; left: 0; width: 7px; height: 7px; border: 1px solid var(--brass-400); border-radius: 50%; }
.kdb-xhair__tag { position: absolute; top: 0; left: 0; font-family: var(--font-label); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.16em; color: rgba(217, 178, 84, 0.8); white-space: nowrap; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) { .kdb-xhair { display: none; } }

/* ---- header ---- */
.site-headwrap { position: sticky; top: 0; z-index: 50; }
.site-header { background: rgba(246, 247, 242, 0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-default);
  transition: box-shadow var(--duration-base) var(--ease-out); }
.site-header--scrolled { box-shadow: var(--shadow-sm); }
.site-header__inner { max-width: var(--container-max); margin: 0 auto; padding: 13px clamp(20px, 5vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-brand { display: flex; align-items: center; gap: 13px; cursor: pointer; text-decoration: none; }
.site-brand:hover { text-decoration: none; }
.site-brand img { height: 44px; display: block; }
.site-brand .kdb-wm { color: var(--emerald-700); gap: 3.6px; }
.site-brand .kdb-wm__top { font-size: 7.2px; }
.site-brand .kdb-wm__main { font-size: 20px; }
.site-brand .kdb-wm__sub { font-size: 10px; }
/* brass scroll measure - reads as a tape measure: brass blade w/ ruler notches */
.site-progress { height: 3px; background: transparent; }
.site-progress i { display: block; height: 3px; width: 0; background: var(--brass-500);
  background-image: repeating-linear-gradient(90deg, transparent 0 15px, rgba(25, 27, 22, 0.4) 15px 16px);
  box-shadow: 1px 0 0 var(--stone-900); }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 32px); }
.site-nav__link { font-family: var(--font-body); font-size: 12.5px; font-weight: var(--weight-semibold);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-secondary);
  background: none; border: none; cursor: pointer; padding: 6px 0; text-decoration: none;
  border-bottom: 2px solid transparent; transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.site-nav__link:hover { color: var(--text-primary); text-decoration: none; }
.site-nav__link--active { color: var(--emerald-700); border-bottom-color: var(--brass-400); }
.site-nav__link:active { opacity: 0.7; }

/* mobile menu: emerald drafting gate that drops in behind the header bar */
.site-burger { display: none; background: none; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  width: 44px; height: 44px; cursor: pointer; padding: 0;
  flex-direction: column; gap: 5px; align-items: center; justify-content: center;
  transition: background var(--duration-fast) var(--ease-out); }
.site-burger span { display: block; width: 18px; height: 2px; background: var(--stone-900);
  transition: transform 0.32s cubic-bezier(0.3, 0.9, 0.3, 1); }
.site-burger--open span:first-child { transform: translateY(3.5px) rotate(45deg); }
.site-burger--open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.site-menu { display: none; }
@media (max-width: 880px) {
  .site-nav, .site-header__cta { display: none; }
  .site-burger { display: inline-flex; }
  .site-menu { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: -1;
    background: var(--emerald-900);
    background-image: linear-gradient(rgba(246,247,242,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(246,247,242,0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    transform: translateY(-102%);
    transition: transform 0.5s cubic-bezier(0.3, 0.9, 0.3, 1);
    padding: 96px clamp(20px, 6vw, 32px) calc(24px + env(safe-area-inset-bottom));
    overflow: auto; overscroll-behavior: contain; }
  .site-menu--open { transform: translateY(0); }
  .site-menu__inner { display: flex; flex-direction: column; gap: 0; flex: 1; min-height: 0; }
  .site-menu__link { font-family: var(--font-display); font-size: clamp(28px, 7.5vw, 34px); font-weight: 700;
    letter-spacing: 0.02em; color: var(--stone-50); text-align: left; text-decoration: none;
    background: none; border: none; border-bottom: 1px solid rgba(246,247,242,0.14);
    padding: 20px 2px; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline;
    opacity: 0; transform: translateX(-18px);
    transition: opacity 0.35s var(--ease-out), transform 0.35s cubic-bezier(0.3, 0.9, 0.3, 1); }
  .site-menu__link:hover { color: var(--stone-50); text-decoration: none; }
  .site-menu__link:active { opacity: 0.7; }
  .site-menu--open .site-menu__link { opacity: 1; transform: none; }
  .site-menu--open .site-menu__link:nth-child(1) { transition-delay: 0.12s; }
  .site-menu--open .site-menu__link:nth-child(2) { transition-delay: 0.18s; }
  .site-menu--open .site-menu__link:nth-child(3) { transition-delay: 0.24s; }
  .site-menu--open .site-menu__link:nth-child(4) { transition-delay: 0.3s; }
  .site-menu__link--active { color: var(--brass-300); }
  .site-menu__link--active:hover { color: var(--brass-300); }
  .site-menu__link code { font: var(--type-eyebrow); letter-spacing: 0.14em; color: var(--brass-400); }
  .site-menu__cta { margin-top: auto; padding-top: 28px; opacity: 0; transform: translateY(10px);
    transition: opacity 0.35s var(--ease-out), transform 0.35s cubic-bezier(0.3, 0.9, 0.3, 1); }
  .site-menu--open .site-menu__cta { opacity: 1; transform: none; transition-delay: 0.36s; }
  .site-menu__foot { padding-top: 18px; font-family: var(--font-label); font-size: 10px; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--emerald-200); opacity: 0;
    transition: opacity 0.35s var(--ease-out) 0.42s; display: flex; justify-content: space-between; gap: 12px; }
  .site-menu--open .site-menu__foot { opacity: 0.75; }
}

/* mobile: drop forced full-viewport heights; content sets the rhythm */
@media (max-width: 880px) {
  .sv-section, .ap-lineage-sec, .ap-process-sec, .ct-section { min-height: 0; }
  .page-intro { min-height: min(62svh, 560px); }
}

/* ---- page intro: dark monument, consistent with home hero ---- */
.page-intro { background: var(--emerald-900); padding: clamp(12px, 1.8vw, 22px);
  min-height: calc(100svh - 66px); display: flex; scroll-snap-align: start; }
.page-intro__sheet { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center;
  border: 1px solid rgba(246,247,242,0.22);
  background-image: linear-gradient(rgba(246,247,242,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,247,242,0.05) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top; }
.page-intro__inner { width: 100%; max-width: var(--container-max); margin: 0 auto;
  padding: clamp(40px, 7vw, 80px) clamp(20px, 5vw, 48px);
  display: flex; flex-direction: column; gap: 20px; align-items: flex-start; position: relative; }
.page-intro .kdb-eyebrow { color: var(--emerald-200); }
.page-intro__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 5.2vw, 72px); line-height: 1.08;
  letter-spacing: var(--tracking-display); color: var(--stone-50); margin: 0; max-width: 900px; text-wrap: balance; }
.page-intro__lede { font-size: clamp(15px, 1.7vw, 17.5px); line-height: 1.65; color: var(--emerald-200); max-width: 600px; }

/* inner pages: full-viewport snap sections */
.sv-section, .ap-lineage-sec, .ap-process-sec, .ct-section { min-height: calc(100svh - 66px);
  display: flex; flex-direction: column; justify-content: center; scroll-snap-align: start; }

/* ---- shared band helpers ---- */
.bp-grid-dark { background-image:
  linear-gradient(rgba(246,247,242,0.045) 1px, transparent 1px),
  linear-gradient(90deg, rgba(246,247,242,0.045) 1px, transparent 1px);
  background-size: 64px 64px; }

/* ---- scroll reveal + page transitions ---- */
@media (prefers-reduced-motion: no-preference) {
  /* "set in place": fast, decisive, hard stop - like a plate being laid, not a feather falling */
  .io-pending { opacity: 0; transform: translateY(10px);
    transition: opacity 0.4s cubic-bezier(0.3, 0.9, 0.3, 1), transform 0.4s cubic-bezier(0.3, 0.9, 0.3, 1); }
  .io-pending.io-in { opacity: 1; transform: none; }
  /* die-stamp for big numerals: drops in heavy, settles hard */
  .screen-anim { animation: kdbScreenIn 0.5s var(--ease-out) both; }
  .kdb-eyebrow::before, .kdb-sh__eyebrow::before { transition: transform 0.5s var(--ease-out) 0.2s; transform-origin: left center; }
  .io-pending:not(.io-in) .kdb-sh__eyebrow::before,
  .io-pending:not(.io-in) .kdb-eyebrow::before,
  .kdb-eyebrow.io-pending:not(.io-in)::before { transform: scaleX(0); }
}
@keyframes kdbStamp { 0% { opacity: 0; transform: scale(1.5); } 62% { opacity: 1; transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } }
@keyframes kdbScreenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- footer ---- */
.site-footer { background: var(--stone-900); color: var(--text-inverse); border-top: 2px solid var(--brass-500); scroll-snap-align: end; }
.site-footer__inner { max-width: var(--container-max); margin: 0 auto;
  padding: clamp(48px, 8vw, 72px) clamp(20px, 5vw, 40px) 36px;
  display: flex; flex-direction: column; gap: 48px; }
.site-footer__top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; align-items: flex-start; }
.site-footer__brand { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; max-width: 340px; }
.site-footer__brand img { width: 180px; margin: 0; padding: 0; }
.site-footer__brand p { font: var(--type-small); color: var(--stone-400); }
.site-footer__cols { display: flex; gap: clamp(40px, 8vw, 80px); flex-wrap: wrap; }
.site-footer__col { display: flex; flex-direction: column; gap: 12px; }
.site-footer__col h4 { font: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--brass-300); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.site-footer__col h4::before { content: ""; width: 12px; height: 6px; border-left: 1.5px solid var(--brass-400); border-right: 1.5px solid var(--brass-400);
  background: linear-gradient(var(--brass-400), var(--brass-400)) center / 100% 1px no-repeat; }
.site-footer__col a, .site-footer__col span { font-family: var(--font-body); font-size: 14px; color: var(--stone-200);
  background: none; border: none; padding: 0; cursor: pointer; text-align: left; text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out); }
.site-footer__col span { cursor: default; }
.site-footer__col a:hover { color: var(--stone-50); text-decoration: none; }
.site-footer__base { border-top: 1px solid var(--border-inverse); padding-top: 22px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center;
  font-family: var(--font-label); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone-500); }
.site-footer__legal { background: none; border: none; cursor: pointer; padding: 0; text-decoration: none;
  font-family: var(--font-label); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone-400);
  transition: color var(--duration-fast) var(--ease-out); }
.site-footer__legal:hover { color: var(--stone-50); text-decoration: none; }

@media (max-width: 560px) {
  .site-footer__top { flex-direction: column; }
}

/* ============================================================
   Home
   ============================================================ */
.hm-wrap { max-width: var(--container-max); width: 100%; margin: 0 auto; padding-left: clamp(20px, 5vw, 40px); padding-right: clamp(20px, 5vw, 40px); }
.hm-hero, .hm-band, .hm-services-sec, .hm-intel, .hm-par, .faq-sec, .hm-cta { scroll-snap-align: start; }
.hm-band, .hm-services-sec, .hm-intel, .hm-par, .faq-sec, .hm-cta { min-height: calc(100svh - 66px);
  display: flex; flex-direction: column; justify-content: center; }

/* ---- hero: the drawing sheet ---- */
.hm-hero { min-height: calc(100svh - 74px); display: flex; padding: clamp(12px, 1.8vw, 22px); background: var(--emerald-900); }
.hm-hero__sheet { position: relative; flex: 1; display: flex; flex-direction: column; border: 1px solid rgba(246,247,242,0.22);
  background-image: linear-gradient(rgba(246,247,242,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,247,242,0.05) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top; }
.hm-tick { position: absolute; width: 16px; height: 16px; border-color: var(--brass-500); border-style: solid; z-index: 2; }
.hm-tick--tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.hm-tick--tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.hm-tick--bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.hm-tick--br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.hm-trace { position: absolute; top: -2px; left: 0; width: 64px; height: 3px; background: var(--brass-500); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  /* the castle builds itself: a stepped, course-by-course reveal like masonry being laid */
  .hm-hero__mark { animation: kdbBuild 1.3s steps(14, end) 0.15s both; }
  .hm-tick { animation: kdbTickIn 0.6s var(--ease-out) 1.2s both; }
  .hm-hero__title .line { overflow: hidden; }
  .hm-hero__title .line > span { display: inline-block; transform: translateY(112%); animation: kdbRise 0.85s var(--ease-out) forwards; }
  .hm-hero__title .line--1 > span { animation-delay: 0.25s; }
  .hm-hero__title .line--2 > span { animation-delay: 0.4s; }
  .hm-trace { animation: kdbTrace 2s var(--ease-in-out) 1.4s both; }
}
@keyframes kdbBuild { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes kdbTickIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes kdbRise { to { transform: translateY(0); } }
@keyframes kdbTrace { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 64px); opacity: 0; } }
.hm-hero__center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: clamp(16px, 2.2vh, 26px); padding: clamp(40px, 6vh, 64px) clamp(20px, 5vw, 48px); }
.hm-hero__mark { width: clamp(92px, 13vh, 148px); }
.hm-hero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 5.8vw, 88px); line-height: 1.06;
  letter-spacing: 0.015em; color: var(--stone-50); margin: 0; text-wrap: balance; }
.hm-hero__title .line { display: block; }
.hm-hero__title em { font-style: normal; color: var(--brass-300); }
.hm-hero__title .dot { color: var(--brass-500); font-style: normal; }
.hm-hero__lede { font-size: clamp(15.5px, 1.7vw, 18px); line-height: 1.65; color: var(--emerald-200); max-width: 560px; }
.hm-hero__actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.hm-hero__link { background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: 15px;
  font-weight: var(--weight-semibold); color: var(--stone-50); display: inline-flex; align-items: center; gap: 8px; padding: 12px 2px; white-space: nowrap; text-decoration: none; }
.hm-hero__link span { transition: transform var(--duration-fast) var(--ease-out); }
.hm-hero__link:hover span { transform: translateX(4px); }
.hm-hero__link:hover { color: var(--stone-50); text-decoration: underline; text-underline-offset: 4px; }

/* ---- stat band ---- */
.hm-band { background: var(--stone-900); border-top: 2px solid var(--brass-500); position: relative; overflow: hidden; }
.hm-wm { position: absolute; pointer-events: none; user-select: none; opacity: 0.055; will-change: transform; }
.hm-motes { position: absolute; inset: 0; pointer-events: none; }
.hm-band .hm-wm { right: -50px; top: -30px; width: 380px; }
.hm-band .hm-wrap, .hm-intel .hm-wrap, .hm-cta .hm-wrap { position: relative; }
.hm-band__head { display: flex; justify-content: space-between; gap: 16px; padding: 24px 0 6px;
  font-family: var(--font-label); font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--stone-500); }
.hm-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.hm-band__cell { position: relative; padding: clamp(26px, 3.4vw, 40px) clamp(20px, 3vw, 36px) clamp(36px, 4.6vw, 52px);
  border-left: 1px solid var(--border-inverse); display: flex; flex-direction: column; gap: 18px; }
.hm-band__cell:first-child { border-left: none; padding-left: 0; }
.hm-band__cell + .hm-band__cell::before { content: "+"; position: absolute; top: -8px; left: -5px;
  font-family: var(--font-label); font-size: 13px; line-height: 1; color: var(--brass-400);
  opacity: 0; transform: scale(0.4); transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); }
.hm-band--play .hm-band__cell:nth-child(2)::before { opacity: 1; transform: none; transition-delay: 0.35s; }
.hm-band--play .hm-band__cell:nth-child(3)::before { opacity: 1; transform: none; transition-delay: 0.7s; }
.hm-band--play .hm-band__cell:nth-child(4)::before { opacity: 1; transform: none; transition-delay: 1.05s; }
/* the result cell: 50 + 20 + 3 = 1 */
.hm-band__cell--sum { background: rgba(217, 178, 84, 0.055); padding-left: clamp(20px, 3vw, 36px); }
.hm-band__cell--sum::before { content: "=" !important; font-size: 15px; }
.hm-band__cell--sum .kdb-stat__label { color: var(--brass-300); }
.hm-band--play .hm-band__cell--sum { animation: kdbSumIn 0.7s var(--ease-out) 1.5s both; }
@keyframes kdbSumIn { 0% { box-shadow: inset 0 0 0 0 rgba(217,178,84,0); } 40% { box-shadow: inset 0 -3px 0 0 rgba(217,178,84,0.9); } 100% { box-shadow: inset 0 -2px 0 0 rgba(217,178,84,0.55); } }
/* value-prop detail lines, fade in after each figure lands */
.hm-band__detail { font-size: 13.5px; line-height: 1.6; color: var(--stone-500); max-width: 240px; text-wrap: pretty;
  opacity: 0; transform: translateY(8px); transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out); }
.hm-band--play .hm-band__detail { opacity: 1; transform: none; }
.hm-band--play .hm-band__cell:nth-child(1) .hm-band__detail { transition-delay: 0.6s; }
.hm-band--play .hm-band__cell:nth-child(2) .hm-band__detail { transition-delay: 0.95s; }
.hm-band--play .hm-band__cell:nth-child(3) .hm-band__detail { transition-delay: 1.3s; }
.hm-band--play .hm-band__cell:nth-child(4) .hm-band__detail { transition-delay: 1.75s; color: var(--stone-300); }
@media (prefers-reduced-motion: reduce) {
  .hm-band__detail, .hm-band__cell + .hm-band__cell::before { opacity: 1; transform: none; transition: none; }
  .hm-band--play .hm-band__cell--sum { animation: none; box-shadow: inset 0 -2px 0 0 rgba(217,178,84,0.55); }
}
.hm-band__idx { font-family: var(--font-label); font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em;
  color: var(--brass-400); display: flex; align-items: center; gap: 10px; }
.hm-band__idx::after { content: ""; width: 26px; border-top: 1px solid rgba(217, 178, 84, 0.45); }
.hm-band__cell .kdb-stat__value { font-size: clamp(30px, 3.4vw, 40px) !important; }
.hm-band__cell .kdb-stat__label { color: var(--stone-400); }

/* ---- services ---- */
.hm-services-sec { background: var(--stone-0); border-top: 1px solid var(--border-default); padding: clamp(64px, 9vw, 96px) 0; }
.hm-services-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.hm-services { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1px; margin-top: clamp(32px, 4.5vw, 48px);
  border: 1px solid var(--border-default); background: var(--border-default); }
.hm-svc { position: relative; background: var(--stone-0); padding: clamp(28px, 3.4vw, 36px) clamp(24px, 3vw, 32px) clamp(24px, 3vw, 32px);
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start; cursor: pointer;
  color: inherit; text-decoration: none;
  transition: background var(--duration-base) var(--ease-out); }
.hm-svc:hover { color: inherit; text-decoration: none; }
.hm-svc::after { content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 0;
  background: var(--brass-500); transition: width 0.5s var(--ease-out); }
.hm-svc:hover { background: var(--stone-50); }
.hm-svc:hover::after { width: 100%; }
.hm-svc__top { width: 100%; display: flex; justify-content: flex-start; align-items: center; min-height: 28px; }
.hm-svc__num { font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--brass-600); }
.hm-svc__ghost { position: absolute; top: -6px; right: 10px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(72px, 8vw, 110px); line-height: 1; color: var(--stone-900); opacity: 0.05; pointer-events: none; user-select: none;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.hm-svc:hover .hm-svc__ghost { opacity: 0.09; transform: translateY(-4px); }
.hm-svc__top svg { color: var(--stone-400); transition: color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.hm-svc:hover .hm-svc__top svg { color: var(--emerald-600); transform: translateY(-2px); }
.hm-svc h3 { font-size: 21px; letter-spacing: 0; }
.hm-svc p { font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.hm-svc__link { margin-top: auto; font-family: var(--font-body); font-size: 13.5px; font-weight: var(--weight-semibold);
  color: var(--emerald-600); display: inline-flex; align-items: center; gap: 6px;
  transition: gap var(--duration-fast) var(--ease-out); }
.hm-svc:hover .hm-svc__link { gap: 11px; }

/* ---- construction AI ---- */
.hm-intel { background: var(--emerald-800); padding: clamp(72px, 10vw, 104px) 0; position: relative; overflow: hidden; }
.hm-intel .hm-wm { right: -80px; bottom: -120px; width: 520px; }
.hm-intel .hm-wrap { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.hm-intel__left { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
.hm-intel-item { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 24px 0;
  border-bottom: 1px solid rgba(246,247,242,0.14); transition: padding-left var(--duration-base) var(--ease-out); }
.hm-intel-item:hover { padding-left: 6px; }
.hm-intel-item:first-child { padding-top: 4px; }
.hm-intel-item code { font-family: var(--font-display); font-weight: 600; font-size: 25px; color: var(--brass-300); line-height: 1.2; }
.hm-intel-item h4 { margin: 0 0 6px; font-family: var(--font-body); font-size: 17px; font-weight: var(--weight-semibold); color: var(--text-on-primary); }
.hm-intel-item p { font-size: 14px; line-height: 1.6; color: var(--emerald-200); }

/* ---- the parallel: build = system ledger ---- */
.hm-par { background: var(--bg-page); border-top: 1px solid var(--border-default); padding: clamp(64px, 9vw, 96px) 0;
  position: relative; overflow: hidden;
  background-image: linear-gradient(var(--stone-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--stone-100) 1px, transparent 1px);
  background-size: 56px 56px; }
.hm-par .hm-wrap { position: relative; display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(36px, 6vw, 72px); align-items: center; }
.hm-par__left { display: flex; flex-direction: column; gap: 20px; }
.hm-par__note { font-size: 14.5px; line-height: 1.7; color: var(--text-secondary); max-width: 480px; }
.hm-ledger { border: 1px solid var(--border-strong); background: var(--stone-0); box-shadow: var(--shadow-sm); }
.hm-ledger__head { display: grid; grid-template-columns: 1fr 48px 1fr; padding: 14px 22px;
  border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-label); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.hm-ledger__head span:last-child { text-align: right; }
.hm-ledger__row { display: grid; grid-template-columns: 1fr 48px 1fr; align-items: baseline; padding: 17px 22px;
  border-top: 1px solid var(--border-default); transition: background var(--duration-fast) var(--ease-out); }
.hm-ledger__row:first-of-type { border-top: none; }
.hm-ledger__row:hover { background: var(--stone-50); }
.hm-ledger__row b { font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: 15.5px; color: var(--text-primary); }
.hm-ledger__row .eq { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1; color: var(--brass-500); text-align: center; align-self: center; }
.hm-ledger__row i { font-style: normal; font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: 15px; color: var(--emerald-700); text-align: right; }
.hm-ledger__tail { padding: 15px 22px 17px; border-top: 1px solid var(--border-strong);
  font-family: var(--font-label); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-secondary); display: flex; align-items: center; gap: 10px; }
.hm-ledger__tail::before { content: ""; width: 18px; height: 7px; border-left: 2px solid var(--brass-500); border-right: 2px solid var(--brass-500);
  background: linear-gradient(var(--brass-500), var(--brass-500)) center / 100% 1.5px no-repeat; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .hm-ledger__row.io-pending .eq { opacity: 0; }
  .hm-ledger__row.io-pending.io-in .eq { animation: kdbStamp 0.5s cubic-bezier(0.3, 0.9, 0.3, 1) 0.12s both; }
}

/* ---- cta ---- */
.hm-cta { padding: clamp(80px, 12vw, 132px) 0; background: var(--emerald-800); position: relative; overflow: hidden; }
.hm-cta .hm-wm { left: calc(50% - 280px); top: -60px; width: 560px; opacity: 0.05; }
.hm-cta .hm-wrap { display: flex; flex-direction: column; gap: 26px; align-items: center; text-align: center; }
.hm-cta__rule { width: 64px; height: 2px; background: var(--brass-500); }
.hm-cta__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4.4vw, 54px); letter-spacing: 0.015em;
  color: var(--text-on-primary); margin: 0; max-width: 760px; line-height: 1.16; }
.hm-cta__lede { color: var(--emerald-200); max-width: 480px; font-size: clamp(15px, 1.6vw, 16px); line-height: 1.6; }

/* ---- home responsive ---- */
@media (max-width: 980px) {
  .hm-intel .hm-wrap { grid-template-columns: 1fr; }
  .hm-par .hm-wrap { grid-template-columns: 1fr; }
  .hm-services { grid-template-columns: 1fr; }
  .hm-band__grid { grid-template-columns: 1fr 1fr; }
  .hm-band__cell { border-left: none; border-top: 1px solid var(--border-inverse); padding-left: 0; }
  .hm-band__cell:nth-child(-n+2) { border-top: none; }
  .hm-band__cell:nth-child(even) { padding-left: clamp(20px, 3vw, 36px); border-left: 1px solid var(--border-inverse); }
  .hm-band__cell + .hm-band__cell::before { display: none; }
}
@media (max-width: 560px) {
  .hm-hero__actions { width: 100%; flex-direction: column; }
  .hm-hero__actions .kdb-btn { width: 100%; }
  .hm-band__head span:last-child { display: none; }
}
@media (max-width: 380px) {
  .hm-hero__title { font-size: 29px; }
  .hm-hero__mark { width: 84px; }
  .hm-band__cell .kdb-stat__value { font-size: 28px !important; }
}

/* ---- scroll rail (drafting ruler) ---- */
.hm-rail { position: fixed; right: clamp(10px, 1.4vw, 20px); top: 50%; transform: translateY(-50%); z-index: 40;
  display: flex; flex-direction: column; align-items: flex-end; gap: 13px; }
.hm-rail__item { display: flex; align-items: center; gap: 10px; background: none; border: none; cursor: pointer; padding: 2px 0; }
.hm-rail__label { font-family: var(--font-label); font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--stone-500); opacity: 0; transform: translateX(5px);
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.hm-rail__tick { width: 16px; height: 1.5px; background: var(--stone-300);
  transition: background var(--duration-base) var(--ease-out), width var(--duration-base) var(--ease-out); }
.hm-rail__item:hover .hm-rail__label { opacity: 1; transform: none; }
.hm-rail__item--active .hm-rail__tick { background: var(--brass-500); width: 26px; }
.hm-rail__item--active .hm-rail__label { opacity: 1; transform: none; color: var(--stone-600); }
@media (max-width: 1200px) { .hm-rail { display: none; } }

/* ---- mobile: content sets the rhythm, snap off, generous touch ---- */
@media (max-width: 880px) {
  .hm-band, .hm-services-sec, .hm-intel, .hm-par, .hm-cta { min-height: 0; }
  .hm-hero { min-height: calc(100svh - 66px); }
  .hm-band { padding: 8px 0 12px; }
  .hm-svc { padding: 26px 22px; }
  .hm-intel { padding: 64px 0 72px; }
  .hm-intel .hm-wm { right: -120px; bottom: -60px; width: 360px; }
}
@media (max-width: 560px) {
  .hm-band__grid { grid-template-columns: 1fr; }
  .hm-band__cell { border-left: none !important; border-top: 1px solid var(--border-inverse);
    padding: 22px 0 26px !important; }
  .hm-band__cell:first-child { border-top: none; }
  .hm-band__cell--sum { padding-left: 16px !important; padding-right: 16px !important; }
  .hm-band__detail { max-width: none; }
  .hm-intel-item { grid-template-columns: 40px 1fr; gap: 14px; }
  .hm-hero__title { font-size: clamp(34px, 10.5vw, 44px); }
  .hm-hero__lede { font-size: 15px; }
  .hm-tick { width: 12px; height: 12px; }
  .hm-ledger__head, .hm-ledger__row { grid-template-columns: 1fr 34px 1fr; padding-left: 16px; padding-right: 16px; }
  .hm-ledger__row b, .hm-ledger__row i { font-size: 14px; }
  .hm-ledger__tail { padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-sec { background: var(--stone-0); border-top: 1px solid var(--border-default); padding: clamp(64px, 9vw, 96px) 0;
  min-height: calc(100svh - 66px); display: flex; flex-direction: column; justify-content: center; }
.faq-wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px);
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.faq-list { border-top: 1px solid var(--border-default); }
.faq-item { border-bottom: 1px solid var(--border-default); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  background: none; border: none; cursor: pointer; text-align: left; padding: 22px 2px;
  font-family: var(--font-body); font-size: clamp(15.5px, 1.7vw, 17px); font-weight: var(--weight-semibold);
  color: var(--text-primary); transition: color var(--duration-fast) var(--ease-out); }
.faq-q:hover { color: var(--emerald-700); }
.faq-q:active { opacity: 0.7; }
.faq-q__marker { flex: none; width: 28px; height: 28px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); }
.faq-q__marker::before, .faq-q__marker::after { content: ""; position: absolute; background: var(--stone-600);
  transition: transform var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out); }
.faq-q__marker::before { width: 12px; height: 1.5px; }
.faq-q__marker::after { width: 1.5px; height: 12px; }
.faq-item--open .faq-q__marker { background: var(--emerald-600); border-color: var(--emerald-600); }
.faq-item--open .faq-q__marker::before { background: var(--stone-50); }
.faq-item--open .faq-q__marker::after { transform: scaleY(0); background: var(--stone-50); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease-out); }
.faq-a__in { overflow: hidden; min-height: 0; }
.faq-item--open .faq-a { grid-template-rows: 1fr; }
.faq-a p { padding: 0 44px 24px 2px; font-size: 14.5px; line-height: 1.7; color: var(--text-secondary); max-width: 600px; }
.faq-aside { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 120px; }
.faq-aside p { font-size: 14.5px; line-height: 1.65; color: var(--text-secondary); max-width: 360px; }
@media (max-width: 980px) {
  .faq-wrap { grid-template-columns: 1fr; }
  .faq-aside { position: static; }
}
@media (max-width: 880px) {
  .faq-sec { min-height: 0; }
  .faq-q { padding: 20px 2px; }
  .faq-a p { padding-right: 8px; }
}

/* ============================================================
   Services
   ============================================================ */
.sv-section { background: var(--stone-0); padding: 80px 0 104px; position: relative; overflow: hidden; }
.sv-wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 40px; display: flex; flex-direction: column; gap: 48px; position: relative; width: 100%; }
.sv-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1px; border: 1px solid var(--border-default); background: var(--border-default); }
.sv-card { position: relative; background: var(--stone-0); padding: 40px 36px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
  transition: background var(--duration-base) var(--ease-out), opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.sv-card::after { content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 0;
  background: var(--brass-500); transition: width 0.5s var(--ease-out); }
.sv-card:hover::after { width: 100%; }
.sv-card__top svg { transition: transform var(--duration-base) var(--ease-out); color: var(--emerald-600); }
.sv-card:hover .sv-card__top svg { transform: translateY(-2px); }
.sv-card__ghost { position: absolute; top: -4px; right: 12px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(64px, 7vw, 96px); line-height: 1; color: var(--stone-900); opacity: 0.05; pointer-events: none; user-select: none;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.sv-card:hover .sv-card__ghost { opacity: 0.09; transform: translateY(-4px); }
.sv-card:hover { background: var(--stone-50); }
.sv-card__top { width: 100%; display: flex; justify-content: flex-start; align-items: center; min-height: 26px; }
.sv-card__num { font-family: var(--font-label); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; color: var(--brass-600); }
.sv-card h3 { font-size: 22px; letter-spacing: 0; }
.sv-card p { font-size: 14.5px; line-height: 1.65; color: var(--text-secondary); max-width: 440px; }
.sv-card .sv-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sv-foot { display: flex; justify-content: center; }
@media (max-width: 900px) { .sv-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .sv-wrap { padding: 0 20px; } .sv-card { padding: 30px 22px; } }

/* ============================================================
   Approach
   ============================================================ */
.ap-lineage-sec { background: var(--stone-900); padding: 88px 0; position: relative; overflow: hidden; border-top: 2px solid var(--brass-500); }
.ap-lineage-sec .hm-wm { right: -60px; top: -40px; width: 420px; }
.ap-wrap { position: relative; max-width: var(--container-max); margin: 0 auto; padding: 0 40px; width: 100%; }
.ap-lineages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.ap-lin { padding: 8px 40px; border-left: 1px solid var(--border-inverse); display: flex; flex-direction: column; gap: 16px; }
.ap-lin:first-child { border-left: none; padding-left: 0; }
.ap-lin p { font-size: 14px; line-height: 1.65; color: var(--stone-400); }

.ap-process-sec { background: var(--stone-0); padding: 96px 0 110px; position: relative; overflow: hidden; }
/* engagement schedule - reads like the project gantt a contractor actually lives in */
.ap-sched { margin-top: 48px; border: 1px solid var(--border-default); background: var(--stone-0); }
.ap-sched__ruler { display: grid; grid-template-columns: minmax(230px, 0.34fr) 1fr; border-bottom: 1px solid var(--border-strong); }
.ap-sched__corner { padding: 12px 20px; font-family: var(--font-label); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.ap-sched__weeks { display: grid; grid-template-columns: repeat(8, 1fr); }
.ap-sched__wk { padding: 12px 0 12px 10px; border-left: 1px solid var(--border-default);
  font-family: var(--font-label); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; color: var(--text-muted); }
.ap-ph { display: grid; grid-template-columns: minmax(230px, 0.34fr) 1fr; border-bottom: 1px solid var(--border-default);
  transition: background var(--duration-base) var(--ease-out), opacity 0.4s cubic-bezier(0.3,0.9,0.3,1), transform 0.4s cubic-bezier(0.3,0.9,0.3,1); }
.ap-ph:last-child { border-bottom: none; }
.ap-ph:hover { background: var(--stone-50); }
.ap-ph__info { padding: 24px 20px 26px; display: flex; flex-direction: column; gap: 7px; }
.ap-ph__name { display: flex; align-items: baseline; gap: 0; }
.ap-ph__num { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--brass-600);
  min-width: 42px; display: inline-block; }
.ap-ph__name h4 { margin: 0; font-family: var(--font-body); font-size: 16.5px; font-weight: var(--weight-semibold); }
.ap-ph__info p { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); margin: 0; padding-left: 42px; max-width: 420px; }
.ap-ph__track { position: relative; border-left: 1px solid var(--border-default); min-height: 104px;
  background-image: repeating-linear-gradient(90deg, var(--border-default) 0 1px, transparent 1px calc(100% / 8)); }
.ap-bar { position: absolute; top: 50%; height: 30px; transform: translateY(-50%); }
.ap-bar i { position: absolute; inset: 0; display: block; background: var(--emerald-600);
  box-shadow: inset 0 -4px 0 rgba(8, 38, 25, 0.32); }
.ap-bar i::before { content: ""; position: absolute; left: 0; top: -5px; bottom: -5px; width: 3px; background: var(--brass-500); }
.ap-ph:hover .ap-bar i { background: var(--emerald-700); }
.ap-bar__tail { position: absolute; top: 50%; height: 30px; transform: translateY(-50%);
  background: repeating-linear-gradient(135deg, rgba(169, 132, 48, 0.45) 0 5px, transparent 5px 11px);
  border: 1px solid rgba(169, 132, 48, 0.45); border-left: none; }
.ap-bar__tag { position: absolute; top: calc(50% - 36px); font-family: var(--font-label); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out); }
.ap-ph:hover .ap-bar__tag { color: var(--emerald-700); }
@media (prefers-reduced-motion: no-preference) {
  /* gantt bars draw in like a plotter laying down the schedule */
  .ap-ph .ap-bar i { transform: scaleX(0); transform-origin: left center; }
  .ap-ph.io-in .ap-bar i { transform: scaleX(1); transition: transform 0.8s cubic-bezier(0.3, 0.9, 0.3, 1) 0.1s; }
  .ap-ph .ap-bar__tail { opacity: 0; }
  .ap-ph.io-in .ap-bar__tail { opacity: 1; transition: opacity 0.45s var(--ease-out) 0.9s; }
  .ap-ph .ap-bar__tag { opacity: 0; }
  .ap-ph.io-in .ap-bar__tag { opacity: 1; transition: opacity 0.45s var(--ease-out) 0.7s; }
  .ap-ph.io-in .ap-ph__num { animation: kdbStamp 0.5s cubic-bezier(0.3, 0.9, 0.3, 1) 0.1s both; }
}
.ap-foot { margin-top: 56px; display: flex; justify-content: center; }
@media (max-width: 900px) {
  .ap-lineages { grid-template-columns: 1fr; }
  .ap-lin { border-left: none; padding: 24px 0; border-top: 1px solid var(--border-inverse); }
  .ap-lin:first-child { border-top: none; }
  .ap-sched__ruler { grid-template-columns: 1fr; }
  .ap-sched__corner { display: none; }
  .ap-ph { grid-template-columns: 1fr; }
  .ap-ph__track { border-left: none; border-top: 1px dashed var(--border-default); min-height: 88px; }
}
@media (max-width: 560px) { .ap-wrap { padding: 0 20px; } }

/* ============================================================
   Contact
   ============================================================ */
.ct-section { padding: clamp(72px, 11vw, 128px) 0; display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
  background-image: linear-gradient(var(--stone-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--stone-100) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top; }
.ct-stack { width: 100%; max-width: 880px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; position: relative; }
.ct-kicker { font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 10px; }
.ct-kicker::before, .ct-kicker::after { content: ""; width: 18px; height: 7px;
  border-left: 2px solid var(--brass-500); border-right: 2px solid var(--brass-500);
  background: linear-gradient(var(--brass-500), var(--brass-500)) center / 100% 1.5px no-repeat; }
.ct-addr { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em;
  font-size: clamp(21px, 4.6vw, 54px); line-height: 1.15; color: var(--emerald-700);
  text-decoration: none; position: relative; padding-bottom: 10px; max-width: 100%; overflow-wrap: anywhere; }
.ct-addr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--brass-500);
  transform-origin: left center; transition: transform 0.45s cubic-bezier(0.3, 0.9, 0.3, 1); }
.ct-addr:hover { color: var(--emerald-800); text-decoration: none; }
.ct-addr:hover::after { transform: scaleY(1.8); }
.ct-addr:active { transform: translateY(1.5px); }
@media (prefers-reduced-motion: no-preference) {
  /* the brass rule draws itself in under the address */
  .ct-addr.io-pending::after { transform: scaleX(0); }
  .ct-addr.io-pending.io-in::after { transform: scaleX(1); transition: transform 0.7s cubic-bezier(0.3, 0.9, 0.3, 1) 0.25s; }
}
.ct-note { font-size: clamp(15px, 1.7vw, 16.5px); line-height: 1.7; color: var(--text-secondary); max-width: 560px; text-wrap: pretty; }
.ct-note b { font-weight: var(--weight-semibold); color: var(--text-primary); }
.ct-actions { margin-top: 4px; }
.ct-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin-top: clamp(20px, 4vw, 36px); padding-top: 22px; border-top: 1px solid var(--border-default);
  font-family: var(--font-label); font-size: 10.5px; font-weight: 500; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--text-muted); width: 100%; max-width: 560px; }
.ct-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--brass-500); flex: none; }
@media (max-width: 880px) { .ct-section { min-height: 0; } }

/* ============================================================
   Privacy
   ============================================================ */
.pv-section { padding: clamp(64px, 9vw, 104px) 0; position: relative; overflow: hidden;
  background-image: linear-gradient(var(--stone-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--stone-100) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top; }
.pv-wrap { max-width: 880px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); position: relative;
  display: flex; flex-direction: column; gap: 0; }
.pv-clause { display: grid; grid-template-columns: 84px 1fr; gap: clamp(16px, 3vw, 32px);
  padding: clamp(26px, 4vw, 36px) 0; border-bottom: 1px solid var(--border-default); }
.pv-clause:first-child { border-top: 1px solid var(--border-strong); }
.pv-clause code { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--brass-600); line-height: 1.3; }
.pv-clause h3 { margin: 0 0 8px; font-family: var(--font-body); font-size: 17.5px; font-weight: var(--weight-semibold); color: var(--text-primary); }
.pv-clause p { font-size: 15px; line-height: 1.7; color: var(--text-secondary); max-width: 620px; margin: 0; text-wrap: pretty; }
.pv-clause p + p { margin-top: 10px; }
.pv-clause a { color: var(--emerald-700); font-weight: var(--weight-semibold); text-decoration: none; border-bottom: 1.5px solid var(--brass-500); }
.pv-foot { padding-top: 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-label); font-size: 10.5px; font-weight: 500; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 640px) {
  .pv-clause { grid-template-columns: 1fr; gap: 8px; }
}

/* ============================================================
   Resilience: extreme viewports
   ============================================================ */

/* very narrow devices (fold cover screens): buttons wrap instead of overflowing */
@media (max-width: 340px) {
  .kdb-btn { white-space: normal; text-align: center; }
  .nf-sheet { padding-left: 16px; padding-right: 16px; }
}

/* landscape phones / very short windows: snap off, content sets the rhythm */
@media (max-height: 500px) {
  html { scroll-snap-type: none; }
  .hm-band, .hm-services-sec, .hm-intel, .hm-par, .faq-sec, .hm-cta,
  .sv-section, .ap-lineage-sec, .ap-process-sec, .ct-section { min-height: 0; }
  .page-intro { min-height: 0; }
  .hm-hero { min-height: calc(100svh - 66px); }
  .faq-aside { position: static; }
}

/* ============================================================
   404
   ============================================================ */
.nf-section { background: var(--emerald-900); padding: clamp(12px, 1.8vw, 22px);
  min-height: calc(100svh - 66px); display: flex; scroll-snap-align: start; }
.nf-sheet { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 22px; border: 1px solid rgba(246,247,242,0.22);
  background-image: linear-gradient(rgba(246,247,242,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,247,242,0.05) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  padding: clamp(40px, 7vw, 80px) clamp(20px, 5vw, 48px); }
.nf-code { font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 12vw, 132px); line-height: 1; color: var(--stone-50); }
.nf-code em { font-style: normal; color: var(--brass-300); }
.nf-title { font-family: var(--font-body); font-size: clamp(16px, 2vw, 19px); font-weight: var(--weight-semibold); color: var(--emerald-200); }