/* ==========================================================================
   Kapraul Consulting — v13 (Open Spatial Luxury, Full-Bleed Configurator &
   Animated Kapraul Banner Crest)
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --black: #020412;
  --obsidian: #050921;
  --royal: #2547c4;
  --royal-2: #3b63f7;
  --cyan: #38bdf8;
  --navy: #0a1536;
  --navy-2: #102358;
  --navy-3: #020518;
  --blue: #b4c6ff;
  --ink: #040611;
  --paper: #0b1126;
  --mist: #07103a;
  --line: rgb(236 232 226 / .08);
  --stone: #848ca3;
  --stone-2: #c2c9dc;
  --gold: #d4af67;
  --gold-2: #b5904b;
  --gold-soft: #ebd39f;

  --bg: #020412;
  --fg: #f4f1ea;
  --muted: var(--stone-2);
  --surface: rgb(11 19 52 / .56);
  --surface-solid: #0d163d;
  --accent: var(--royal);
  --accent-fg: #ffffff;
  --rule: var(--gold);

  --on-dark: #f4f1ea;
  --on-dark-muted: #b5bccf;
  --dark-line: rgb(255 255 255 / .07);

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --step--2: clamp(0.72rem, 0.7rem + 0.08vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.92rem);
  --step-0: clamp(0.96rem, 0.94rem + 0.15vw, 1.06rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.38rem);
  --step-2: clamp(1.42rem, 1.28rem + 0.75vw, 1.95rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.3vw, 2.55rem);
  --step-4: clamp(2.1rem, 1.75rem + 2.1vw, 3.4rem);
  --step-5: clamp(2.5rem, 1.95rem + 3.4vw, 4.35rem);

  /* Generous Open Spatial Breathing Room */
  --s-1: clamp(0.6rem, 0.5rem + 0.25vw, 0.85rem);
  --s-2: clamp(1.25rem, 1.05rem + 0.65vw, 1.75rem);
  --s-3: clamp(2rem, 1.6rem + 1.4vw, 2.85rem);
  --s-4: clamp(4.25rem, 3.4rem + 4.2vw, 6.75rem);
  --card-gap: clamp(1.5rem, 2.4vw, 2.25rem);
  --layer-gap: clamp(2.5rem, 4vw, 3.75rem);

  --frame-inset: 0px;
  --page-gutter: clamp(1.25rem, 4vw, 3.25rem);
  --wrap: 72rem;
  --narrow: 44rem;
  --r: 20px;
  --r-sm: 14px;
  --header-h: 4.5rem;
  --ease: cubic-bezier(.16, 1, .3, 1);

  color-scheme: dark;
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  font-feature-settings: "tnum" 1;
  color: var(--fg);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  box-sizing: border-box;
}

/* ---------- 2. Base & Full-Viewport Open Spatial Canvas (No Outer Gold Border) ---------- */
*, *::before, *::after { box-sizing: inherit; margin: 0; }
[hidden] { display: none !important; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 2rem);
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.15rem var(--page-gutter) 3.5rem;
  background:
    radial-gradient(90% 65% at 50% 0%, rgb(37 71 196 / .26), transparent 75%),
    radial-gradient(70% 55% at 85% 35%, rgb(56 189 248 / .09), transparent 70%),
    radial-gradient(75% 60% at 15% 75%, rgb(212 175 103 / .07), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  position: relative;
  overflow-x: clip;
}

#spatial-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: 0.85;
}
body > header, main, body > footer {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
}
main { flex: 1; }
img, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--serif); font-weight: 500; line-height: 1.08;
  letter-spacing: -0.015em; text-wrap: balance; color: #fff;
}
h1 em, h2 em, h3 em {
  font-style: italic;
  background: linear-gradient(135deg, #fff 0%, var(--gold-soft) 45%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
p, li { text-wrap: pretty; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: .25em; transition: color .25s var(--ease); }
a:hover { color: var(--gold-soft); }
:focus-visible { outline: 1px solid var(--gold-soft); outline-offset: 4px; }
::selection { background: var(--royal); color: #fff; }

.skip { position: absolute; left: 2rem; top: -4rem; z-index: 60; padding: .6rem 1rem; background: var(--royal); color: #fff; border-radius: var(--r-sm); }
.skip:focus { top: 2rem; }
.sr-only, .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: none; }

/* Open Vertical Buffer Between Sections (No Claustrophobic Divider Lines) */
.view-panel > section, main > section {
  padding-block: var(--s-4);
  position: relative;
}

/* ---------- 3. Shared Centered Editorial & Web3 UI Components ---------- */
.label {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft);
}
.label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 10px var(--gold);
}

.head {
  display: grid; justify-items: center; text-align: center; gap: .85rem;
  max-width: var(--narrow); margin: 0 auto var(--layer-gap);
}
.head h2 { font-size: var(--step-4); order: 2; }
.head::after {
  content: ""; order: 3; width: 4.5rem; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(212 175 103 / .55), transparent);
  margin-block: .15rem;
}
.head .label { order: 1; }
.head p:not(.label) {
  order: 4; color: var(--muted); font-size: var(--step-0);
  max-width: 46ch; line-height: 1.55; text-align: center;
}

/* 3D Futuristic Buttons */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3rem; padding: .75rem 1.65rem;
  font-family: var(--sans); font-size: var(--step--2); font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--royal-2) 0%, var(--royal) 60%, #19329c 100%);
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: 999px;
  box-shadow:
    0 12px 30px -8px rgb(37 71 196 / .7),
    inset 0 1px 0 rgb(255 255 255 / .3);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  border-color: rgb(235 211 159 / .65);
  box-shadow:
    0 16px 36px -8px rgb(59 99 247 / .85),
    0 0 18px rgb(212 175 103 / .28),
    inset 0 1px 0 rgb(255 255 255 / .45);
  color: #fff;
}
.btn.line {
  background: rgb(12 23 60 / .52);
  backdrop-filter: blur(12px);
  color: var(--fg);
  border: 1px solid rgb(255 255 255 / .14);
  box-shadow: none;
}
.btn.line:hover {
  background: rgb(37 71 196 / .28);
  border-color: rgb(235 211 159 / .5);
  color: #fff;
}
.btn.small { min-height: 2.45rem; padding: .5rem 1.2rem; font-size: 0.68rem; letter-spacing: .13em; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.more {
  display: inline-flex; gap: .45rem; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: var(--gold-soft); padding-bottom: .25rem;
  border-bottom: 1px solid rgb(212 175 103 / .35);
  transition: gap .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.more:hover { gap: .75rem; color: #fff; border-color: #fff; }

/* 3D Interactive Tilt & Specular Spotlight Surface */
.tilt-3d {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  position: relative;
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), border-color .35s var(--ease), box-shadow .35s var(--ease);
  will-change: transform;
}
.tilt-3d::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgb(212 175 103 / .13), rgb(56 189 248 / .05) 40%, transparent 70%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.tilt-3d:hover::after { opacity: 1; }

/* ---------- 4. Floating Glass Header (Soft Open Edge) ---------- */
body > header {
  position: sticky; top: 0.85rem; z-index: 40;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .75rem 1.25rem;
  min-height: 4.1rem; padding: .55rem 1.35rem;
  background: rgb(5 10 34 / .74);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgb(255 255 255 / .08);
  border-radius: 999px;
  box-shadow: 0 20px 50px -24px rgb(0 0 0 / .8);
}
body > header > a.logo {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; color: #fff; min-width: 0; flex-shrink: 0;
}
body > header > a.logo img {
  width: 38px; height: 38px; flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgb(212 175 103 / .3));
}
body > header > a.logo .logo-lockup { display: grid; gap: 2px; line-height: 1; }
body > header > a.logo .logo-word {
  font-family: var(--serif); font-size: 1.18rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: #fff;
}
body > header > a.logo .logo-tag {
  font-family: var(--mono); font-size: 0.54rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gold-soft);
}
body > header nav ul {
  display: flex; justify-content: center; align-items: center;
  gap: .25rem 1.15rem; padding: 0; list-style: none;
}
body > header nav a {
  display: inline-block; padding: .35rem .5rem;
  font-size: 0.72rem; font-weight: 500; letter-spacing: .15em;
  text-transform: uppercase; color: var(--on-dark-muted);
  text-decoration: none; border-radius: 6px;
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
body > header nav a:hover, body > header nav a[aria-current="page"] {
  color: #fff; background: rgb(255 255 255 / .08);
}
body > header > p { justify-self: end; margin: 0; flex-shrink: 0; }
body > header .cta-short { display: none; }

@media (max-width: 58rem) {
  :root {
    --page-gutter: 1.25rem;
  }
  body > header {
    grid-template-columns: 1fr auto;
    padding: .5rem .85rem;
    gap: .45rem .75rem;
    border-radius: 18px;
  }
  body > header > a.logo img { width: 32px; height: 32px; }
  body > header > a.logo .logo-word { font-size: 0.98rem; letter-spacing: .15em; }
  body > header > a.logo .logo-tag { display: none; }
  body > header .cta-full { display: none; }
  body > header .cta-short { display: inline; }
  body > header > p .btn.small {
    padding: .38rem .8rem; min-height: 2rem;
    font-size: 0.64rem; letter-spacing: .1em;
  }
  body > header nav {
    grid-column: 1 / -1; grid-row: 2;
    min-width: 0; overflow-x: auto; scrollbar-width: none;
    border-top: 1px solid rgb(255 255 255 / .06);
    padding-top: .35rem;
  }
  body > header nav ul {
    justify-content: space-between; width: 100%; min-width: max-content;
    gap: 0 .4rem;
  }
  body > header nav a { font-size: 0.64rem; letter-spacing: .11em; padding: .22rem .4rem; }
}

/* ---------- 5. Section 1: Centered High-Impact Hero & Animated Kapraul Crest ---------- */
#hero {
  display: grid; justify-items: center; text-align: center;
  gap: 1.5rem;
  padding-block: calc(var(--s-4) * 0.65) var(--s-4);
}

/* Hero Crest: Engraved Gold Rings + Stag + Animated Kapraul Banner & Wordmark */
.hero-crest {
  position: relative;
  width: clamp(175px, 17vw, 230px);
  aspect-ratio: 1;
  max-width: 100%;
  border-radius: 50%;
  margin-bottom: -.25rem;
}
.hero-crest::before {
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(212 175 103 / .24), rgb(37 71 196 / .15) 62%, transparent);
}
.hero-crest .crest-rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-crest .ring { stroke-width: .85; stroke-opacity: .88; }
.hero-crest img {
  position: absolute; left: 50%; top: 50%; width: 58%; height: auto;
  translate: -50% -50%;
  pointer-events: none;
}
.hero-crest .crest-head {
  filter: drop-shadow(0 0 14px rgb(212 175 103 / .38));
}
.hero-crest .crest-shine {
  opacity: 0;
  filter: sepia(1) saturate(2.3) brightness(1.02) hue-rotate(-12deg) drop-shadow(0 0 6px rgb(212 175 103 / .75));
  -webkit-mask-image: linear-gradient(105deg, transparent 36%, #000 50%, transparent 64%);
  mask-image: linear-gradient(105deg, transparent 36%, #000 50%, transparent 64%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: 110% 0;
  mask-position: 110% 0;
}
.hero-crest .crest-ribbon {
  filter: drop-shadow(0 6px 14px rgb(0 0 0 / .65));
}
.hero-crest .crest-word {
  filter: drop-shadow(0 1px 2px rgb(255 255 255 / .25));
}

@media (prefers-reduced-motion: no-preference) {
  .hero-crest .ring {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: crest-draw 1.2s cubic-bezier(.2, .7, .1, 1) forwards;
  }
  .hero-crest .ring-2 { animation-delay: .08s; }
  .hero-crest .ring-3 { animation-delay: .16s; }
  .hero-crest .crest-rings { animation: crest-spin 150s linear infinite; }
  .hero-crest .crest-shine {
    animation: crest-shine .95s cubic-bezier(.45, 0, .25, 1) .15s both;
  }
  .hero-crest .crest-ribbon {
    clip-path: inset(0 100% 0 0);
    animation: crest-sweep .5s cubic-bezier(.65, 0, .35, 1) .32s forwards;
  }
  .hero-crest .crest-word {
    clip-path: inset(0 100% 0 0);
    opacity: .2;
    animation: crest-write .52s cubic-bezier(.3, .6, .3, 1) .58s forwards;
  }
}
@keyframes crest-draw { to { stroke-dashoffset: 0; } }
@keyframes crest-spin { to { rotate: 360deg; } }
@keyframes crest-head-in {
  0% { opacity: 0; scale: .88; filter: blur(6px); }
  100% { opacity: 1; scale: 1; filter: drop-shadow(0 0 14px rgb(212 175 103 / .38)); }
}
@keyframes crest-shine {
  0% { opacity: 0; -webkit-mask-position: 110% 0; mask-position: 110% 0; }
  20% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; -webkit-mask-position: -10% 0; mask-position: -10% 0; }
}
@keyframes crest-sweep {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes crest-write {
  from { clip-path: inset(0 100% 0 0); opacity: .2; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}

.hero-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .42rem 1.1rem; border-radius: 999px;
  background: rgb(14 23 64 / .55);
  box-shadow: 0 0 28px rgb(37 71 196 / .28);
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gold-soft);
}
.hero-badge .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #38bdf8; box-shadow: 0 0 12px #38bdf8;
  animation: pulse-dot 2s infinite ease-in-out;
}
@keyframes pulse-dot { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 1.35; opacity: .55; } }

#hero h1 {
  font-size: var(--step-5); font-weight: 500; line-height: 1.06;
  max-width: 18ch; color: #fff;
  text-shadow: 0 18px 40px rgb(0 0 0 / .65);
}
#hero > p.hero-sub {
  font-size: var(--step-1); color: var(--on-dark-muted);
  max-width: 42ch; line-height: 1.5; font-weight: 400;
  text-align: center;
}
#hero .actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.1rem; margin-top: .5rem;
}

/* Open Borderless 4-Stat Telemetry Strip Under Hero */
.telemetry-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--card-gap);
  margin-top: 2rem; width: 100%;
  padding-top: 1.5rem;
}
.telemetry-strip div {
  display: grid; justify-items: center; align-content: center; gap: .3rem;
  text-align: center; padding: .75rem .5rem;
}
.telemetry-strip b { font-family: var(--mono); font-size: 1.2rem; color: var(--gold-soft); }
.telemetry-strip span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 52rem) {
  .telemetry-strip { grid-template-columns: 1fr 1fr; }
}

/* ---------- 6. Section 2: Open Interactive 4-Discipline & 3-Tier Matrix (#services) ---------- */
#services { position: relative; }
#picker {
  width: 100%;
  display: grid; justify-items: center; text-align: center;
  gap: var(--s-3);
  color: var(--fg);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#picker fieldset {
  border: 0; padding: 0; min-width: 0; width: 100%;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .85rem;
}
@media (max-width: 52rem) {
  #picker fieldset { grid-template-columns: 1fr 1fr; }
}
#picker fieldset > label {
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: .9rem 1rem;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted); background: rgb(9 16 46 / .58);
  border: 1px solid rgb(255 255 255 / .07); border-radius: 999px;
  transition: all .25s var(--ease);
}
#picker fieldset > label:hover { color: #fff; background: rgb(18 33 88 / .65); transform: translateY(-2px); }
#picker fieldset > label:has(input:checked) {
  background: linear-gradient(135deg, var(--royal-2), var(--royal));
  border-color: rgb(235 211 159 / .55); color: #fff;
  box-shadow: 0 12px 28px -8px rgb(37 71 196 / .8);
}
#picker input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

#picker article.disc-panel {
  display: none; width: 100%;
  justify-items: center; text-align: center;
  gap: var(--s-3);
  padding-top: var(--s-2);
}
#picker:has(#p-web:checked) article[data-for="web"],
#picker:has(#p-care:checked) article[data-for="care"],
#picker:has(#p-numbers:checked) article[data-for="numbers"],
#picker:has(#p-team:checked) article[data-for="team"] {
  display: grid; animation: settle .4s var(--ease);
}
@keyframes settle { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

/* Centered Discipline Header Bar */
.disc-bar {
  display: grid; justify-items: center; text-align: center;
  gap: .75rem; max-width: 42rem; margin-inline: auto;
}
.disc-bar div { display: grid; justify-items: center; gap: .35rem; }
.disc-bar h3 { font-size: var(--step-2); }
.disc-bar p { color: var(--muted); font-size: var(--step--1); text-align: center; }

/* Centered 3-Tier Cards With Soft Glass Surface */
.tier-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--card-gap);
  width: 100%; list-style: none; padding: 0; margin: 0;
}
@media (max-width: 56rem) {
  .tier-grid { grid-template-columns: 1fr; }
}
.tier-box {
  display: grid; justify-items: center; align-content: start;
  text-align: center; gap: .85rem;
  padding: 2rem 1.5rem;
  border-radius: var(--r);
  background: linear-gradient(160deg, rgb(12 22 60 / .62), rgb(4 8 26 / .78));
  backdrop-filter: blur(16px);
  border: 1px solid rgb(255 255 255 / .06);
  box-shadow: 0 24px 50px -28px rgb(0 0 0 / .85);
}
.tier-box.featured {
  background: linear-gradient(160deg, rgb(25 46 128 / .58), rgb(6 12 38 / .88));
  border-color: rgb(212 175 103 / .35);
  box-shadow: 0 28px 60px -24px rgb(37 71 196 / .5);
}
.tier-top {
  display: grid; justify-items: center; gap: .35rem; width: 100%;
}
.tier-top span {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-soft);
}
.tier-top b {
  font-family: var(--mono); font-size: 0.95rem; color: #38bdf8;
  padding: .15rem 0;
}
.tier-box h4 { font-family: var(--serif); font-size: var(--step-1); color: #fff; font-weight: 500; }
.tier-specs {
  list-style: none; padding: .5rem 0 0; margin: .15rem 0 0; width: 100%;
  display: grid; justify-items: center; gap: .55rem;
}
.tier-specs li {
  font-family: var(--mono); font-size: 0.72rem; color: var(--stone-2);
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  text-align: center;
}
.tier-specs li::before {
  content: "•"; color: var(--gold-soft); font-weight: 700;
}

/* ---------- 7. Section 3: Centered ROI Simulator & Spec Bento (#authority) ---------- */
#authority { position: relative; }
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--card-gap);
}
.bento-card {
  grid-column: span 4;
  display: grid; justify-items: center; align-content: start;
  text-align: center; gap: 1.1rem;
  padding: clamp(1.85rem, 3vw, 2.5rem);
  background: linear-gradient(155deg, rgb(14 25 68 / .6) 0%, rgb(5 10 30 / .8) 100%);
  backdrop-filter: blur(18px);
  border: 1px solid rgb(255 255 255 / .06);
  border-radius: var(--r);
  box-shadow: 0 28px 56px -28px rgb(0 0 0 / .82);
}
.bento-card.span-12 {
  grid-column: span 12;
  gap: 1.5rem;
}
.bento-card.span-12 > div:first-child {
  display: grid; justify-items: center; text-align: center; gap: .45rem; max-width: 42rem;
}
@media (max-width: 56rem) {
  .bento-card { grid-column: span 12; }
}
.bento-card h3 { font-size: var(--step-1); }
.bento-card p:not(.label) { color: var(--muted); font-size: var(--step--1); line-height: 1.5; text-align: center; }

/* Live Interactive Growth Simulator inside Bento (No Nested Border Box) */
.sim-box {
  width: 100%;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--card-gap);
  padding: 1.5rem; border-radius: var(--r-sm);
  background: rgb(2 5 20 / .52); border: 0;
  align-items: center;
}
@media (max-width: 48rem) { .sim-box { grid-template-columns: 1fr; } }
.sim-controls { display: grid; gap: 1.15rem; text-align: center; }
.sim-controls label {
  display: grid; justify-items: center; gap: .45rem; font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--stone-2);
}
.sim-controls label span {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .6rem;
}
.sim-controls label strong { color: var(--gold-soft); font-size: 0.88rem; }
.sim-controls input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; background: rgb(255 255 255 / .15);
  border-radius: 999px; border: 0; min-height: 0; padding: 0; cursor: pointer;
}
.sim-controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold-soft); border: 2px solid var(--royal);
  box-shadow: 0 0 12px var(--gold); cursor: pointer;
}
.sim-readout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-left: 1.25rem;
  text-align: center;
}
@media (max-width: 48rem) { .sim-readout { padding-left: 0; padding-top: 1.15rem; } }
.sim-stat { display: grid; justify-items: center; gap: .25rem; }
.sim-stat span { display: block; font-family: var(--mono); font-size: 0.64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sim-stat output { font-family: var(--serif); font-size: var(--step-2); font-weight: 500; color: #38bdf8; }
.sim-stat.gold output { color: var(--gold-soft); }

/* Open Spec Rows Inside Bento Cards (No Nested Cell Borders) */
.arch-metrics {
  list-style: none; padding: .75rem 0 0; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: .85rem .65rem;
  margin-top: auto;
}
.arch-metrics li {
  display: grid; justify-items: center; gap: .2rem;
  padding: .35rem .25rem;
  background: transparent; border: 0;
  font-family: var(--mono); font-size: 0.66rem; color: var(--muted); text-align: center;
}
.arch-metrics li b {
  color: var(--gold-soft); font-size: 0.78rem;
  background: transparent; border: 0;
  padding: 0;
}

/* ---------- 8. Section 4: Centered Case Studies (#work) ---------- */
#work > .case-list {
  display: grid;
  gap: var(--layer-gap);
}
#work article.case-row {
  display: grid; gap: var(--s-3); align-items: center;
  justify-items: center; text-align: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--r);
  background: linear-gradient(155deg, rgb(12 22 62 / .52), rgb(4 8 25 / .76));
  border: 1px solid rgb(255 255 255 / .06);
  box-shadow: 0 28px 60px -30px rgb(0 0 0 / .82);
}
@media (min-width: 54rem) {
  #work article.case-row { grid-template-columns: 1.08fr 1fr; }
}
#work figure { position: relative; padding: 0; width: 100%; }
#work figure .desk, .art-case svg {
  width: 100%; border-radius: var(--r-sm);
  border: 0;
  box-shadow: 0 22px 48px -22px rgb(0 0 0 / .88);
}
#work article section {
  display: grid; gap: .85rem;
  justify-items: center; text-align: center;
  max-width: 34rem; margin-inline: auto;
}
#work h3 { font-size: var(--step-2); }
#work article section > p:not(.label) { color: var(--muted); font-size: var(--step--1); line-height: 1.55; text-align: center; }

.chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem; list-style: none; padding: 0; margin: .25rem 0 .45rem;
}
#work ul.chips li {
  padding: .32rem .8rem;
  background: rgb(37 71 196 / .22);
  border: 0; border-radius: 999px;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: .04em;
  color: var(--fg); line-height: 1.3; white-space: nowrap;
}

/* ---------- 9. Section 5: Centered Direct Dispatch & Open Guarantee Strip (#contact) ---------- */
.terms-bar {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--card-gap);
  max-width: 50rem; margin: 0 auto var(--s-3); list-style: none; padding: 0;
}
@media (max-width: 48rem) { .terms-bar { grid-template-columns: 1fr; } }
.terms-bar li {
  display: grid; justify-items: center; text-align: center; gap: .25rem;
  padding: .75rem 1rem;
  background: transparent; border: 0;
  font-family: var(--mono); font-size: 0.7rem; color: var(--stone-2);
}
.terms-bar li b { color: var(--gold-soft); font-size: 1.25rem; font-family: var(--serif); }

form { display: grid; gap: 1.35rem; }
fieldset { border: 0; padding: 0; min-width: 0; }
label {
  display: grid; justify-items: center; text-align: center; gap: .45rem;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
  width: 100%; min-height: 3rem; padding: .75rem 1rem; border-radius: var(--r-sm);
  font-family: var(--sans); font-size: var(--step--1); font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--fg); text-align: center;
  background: rgb(3 6 22 / .72); border: 1px solid rgb(255 255 255 / .1);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
select option { background: var(--navy); color: var(--fg); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--gold-soft);
  box-shadow: 0 0 0 3px rgb(212 175 103 / .18);
}
textarea { min-height: 6rem; resize: vertical; }
#contact form {
  max-width: 52rem; margin-inline: auto;
  padding: clamp(2rem, 3.5vw, 3rem);
  background: linear-gradient(160deg, rgb(12 22 62 / .58), rgb(4 8 26 / .82));
  border: 1px solid rgb(255 255 255 / .07);
  border-radius: var(--r); backdrop-filter: blur(18px);
  box-shadow: 0 32px 75px -30px rgb(0 0 0 / .85);
}
#contact form fieldset { display: grid; gap: 1.35rem; }
@media (min-width: 42rem) { #contact form fieldset { grid-template-columns: 1fr 1fr; } }
#contact form > .btn { justify-self: center; margin-top: .45rem; }

/* ---------- 10. Open Architectural Footer ---------- */
body > footer {
  margin-top: var(--s-3);
  display: grid; gap: 1rem; padding: var(--s-3) 1rem;
  background: transparent; border: 0;
  color: var(--on-dark-muted); font-size: var(--step--1); text-align: center; justify-items: center;
}
body > footer > a.logo img { width: 92px; height: 92px; }
body > footer > p { font-family: var(--serif); font-style: italic; font-size: var(--step-1); color: var(--on-dark); max-width: 38ch; }
body > footer nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem 1.5rem; padding: 0; list-style: none; }
body > footer a { color: inherit; text-decoration: none; font-family: var(--mono); letter-spacing: .13em; text-transform: uppercase; font-size: 0.68rem; }
body > footer a:hover { color: var(--gold-soft); }
body > footer small { padding-top: 1rem; width: 100%; font-family: var(--mono); font-size: 0.66rem; letter-spacing: .12em; opacity: .75; }

/* ---------- 11. Reveal Choreography ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js [data-reveal="left"] { transform: translateX(-24px); }
.js [data-reveal="right"] { transform: translateX(24px); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ==========================================================================
   Pricing Page: Full-Coverage Open 3D Interactive Architecture Builder
   ========================================================================== */
#pricing-hero {
  position: relative;
  display: grid; justify-items: center; text-align: center; gap: 1.15rem;
  padding-block: calc(var(--s-4) * 0.65) var(--s-2);
}
#pricing-hero::before {
  content: "";
  position: absolute;
  inset: -4rem -50vw -8rem;
  background: radial-gradient(60% 70% at 50% 35%, rgb(37 71 196 / .24), rgb(56 189 248 / .06) 45%, transparent 75%);
  pointer-events: none;
  z-index: -1;
}
#pricing-hero h1 { font-size: var(--step-4); max-width: 16ch; color: #fff; }
#pricing-hero p:not(.label) { color: var(--on-dark-muted); font-size: var(--step-0); max-width: 46ch; text-align: center; }

#builder {
  position: relative;
  width: 100%;
  padding-top: var(--s-2);
  padding-bottom: var(--s-3);
}
#builder::before {
  content: "";
  position: absolute;
  inset: 0 -50vw;
  background:
    radial-gradient(80% 50% at 50% 20%, rgb(16 32 88 / .45), transparent 75%),
    radial-gradient(80% 50% at 50% 80%, rgb(16 32 88 / .45), transparent 75%);
  pointer-events: none;
  z-index: -1;
}
#builder > form { gap: var(--s-3); width: 100%; }
#builder > form > fieldset {
  display: grid;
  gap: var(--s-3);
  justify-items: center;
  width: 100%;
  padding: clamp(2.25rem, 4vw, 3.25rem);
  background: linear-gradient(165deg, rgb(10 19 54 / .66) 0%, rgb(4 8 26 / .82) 100%);
  backdrop-filter: blur(20px);
  border: 0;
  border-radius: 26px;
  box-shadow: 0 32px 70px -32px rgb(0 0 0 / .85);
}
#builder .cat-head {
  display: grid; justify-items: center; text-align: center;
  gap: .55rem; width: 100%; padding: 0; margin-bottom: .25rem;
}
#builder .cat-head h2 { font-size: var(--step-2); }
#builder .cat-head .note { color: var(--muted); font-size: var(--step--1); max-width: 50ch; text-align: center; }

.cards {
  list-style: none; padding: 0; display: grid;
  gap: var(--card-gap); width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 58rem) { .cards { grid-template-columns: 1fr; } }
.cards > li { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
.card {
  position: relative; display: grid; grid-row: 1 / -1; grid-template-rows: subgrid;
  row-gap: .85rem;
  cursor: pointer; padding: 2rem 1.45rem;
  text-align: center; justify-items: center;
  background: linear-gradient(155deg, rgb(16 28 76 / .58) 0%, rgb(6 11 32 / .82) 100%);
  backdrop-filter: blur(16px);
  border: 1px solid rgb(255 255 255 / .07); border-radius: var(--r);
  font-size: var(--step-0); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fg);
  box-shadow: 0 22px 48px -28px rgb(0 0 0 / .85);
}
.card:hover { border-color: rgb(235 211 159 / .4); background: linear-gradient(155deg, rgb(20 36 96 / .68) 0%, rgb(8 14 40 / .88) 100%); }
.card > input { position: absolute; opacity: 0; pointer-events: none; }
.card:has(input:checked) {
  border-color: rgb(212 175 103 / .75);
  background: linear-gradient(155deg, rgb(28 50 138 / .75) 0%, rgb(9 17 48 / .92) 100%);
  box-shadow: 0 28px 60px -20px rgb(37 71 196 / .65);
}
.card::before {
  content: ""; position: absolute; top: 1rem; right: 1rem;
  width: 1rem; height: 1rem; border: 1px solid rgb(255 255 255 / .22); border-radius: 50%;
  transition: all .25s var(--ease);
}
.card:has(input:checked)::before {
  border-color: var(--gold-soft);
  background: radial-gradient(circle, var(--gold-soft) 0 42%, transparent 48%);
  box-shadow: 0 0 12px var(--gold);
}
.card .tier { font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); }
.card .meter { display: flex; justify-content: center; gap: 4px; }
.card .meter i { width: 20px; height: 3px; border-radius: 99px; background: rgb(236 232 226 / .18); }
.card .meter i.on { background: linear-gradient(90deg, var(--gold), #38bdf8); }
.card .name { font-family: var(--serif); font-size: var(--step-1); font-weight: 500; line-height: 1.15; color: #fff; }
.card .price { font-family: var(--serif); font-size: var(--step-2); color: #fff; margin-top: 0; align-self: center; }
.card .price i { font-size: var(--step--1); color: var(--muted); margin-right: .2rem; }
.card .price small { display: block; font-family: var(--mono); font-size: 0.64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-soft); margin-top: .25rem; }

/* Open, Airy Deliverable Specs Inside Each Configurator Card (No Claustrophobic Pill Borders) */
.card .inc {
  padding-top: .5rem; width: 100%;
  display: grid; grid-template-columns: 1fr;
  justify-items: center; align-content: start; gap: .55rem;
}
.card .inc span {
  font-family: var(--mono); font-size: 0.72rem; color: var(--stone-2);
  background: transparent; border: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  line-height: 1.35; text-align: center;
}
.card .inc span::before {
  content: "•"; color: var(--gold-soft); font-weight: 700;
}

.card .salary { display: none; width: 100%; margin-top: .65rem; gap: .35rem; text-align: center; justify-items: center; align-self: start; }
.card .salary input { text-align: center; }
.card:has(input:checked) .salary { display: grid; }
.skipcat {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); cursor: pointer;
  display: inline-flex; gap: .45rem; align-items: center; margin-top: .25rem;
}
.skipcat input { accent-color: var(--gold); }
.skipcat:has(input:checked) { color: #fff; }

#summary { display: grid; justify-items: center; text-align: center; gap: var(--s-3); }
#summary .head { margin-bottom: 0; }
#picked { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; padding: 0; list-style: none; }
#picked li {
  padding: .45rem 1rem; border-radius: 999px;
  font-family: var(--mono); font-size: 0.72rem; background: rgb(37 71 196 / .32); color: #fff;
}
#picked:empty::before { content: "Select Any Tier Above To Initialize Your Estimate."; font-family: var(--serif); font-style: italic; color: var(--muted); font-size: var(--step-1); }
#totals {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--card-gap); width: 100%;
}
@media (max-width: 48rem) { #totals { grid-template-columns: 1fr; } }
#totals section {
  display: grid; justify-items: center; text-align: center; gap: .35rem; padding: 1.65rem 1.25rem;
  background: var(--surface); border: 1px solid rgb(255 255 255 / .06); border-radius: var(--r);
}
#totals h3 { font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); }
#totals output { font-family: var(--serif); font-size: var(--step-2); line-height: 1.1; color: #fff; }
#totals p { color: var(--muted); font-family: var(--mono); font-size: 0.7rem; }
#send {
  width: 100%; max-width: 52rem; padding: clamp(2rem, 3.5vw, 3rem); text-align: center;
  background: linear-gradient(160deg, rgb(12 22 62 / .58), rgb(4 8 26 / .82));
  border: 1px solid rgb(255 255 255 / .07); border-radius: var(--r);
}
#send fieldset { display: grid; gap: 1.25rem; }
@media (min-width: 42rem) { #send fieldset { grid-template-columns: 1fr 1fr; } }
#send .btn { justify-self: center; margin-top: .45rem; }

#bar {
  position: fixed; z-index: 35; left: 50%; bottom: 1rem; translate: -50% 0;
  width: min(100% - 2.5rem, 48rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .65rem .9rem .65rem 1.25rem; background: rgb(5 10 34 / .92); backdrop-filter: blur(18px);
  color: var(--on-dark); text-decoration: none; border-radius: 999px;
  border: 1px solid rgb(212 175 103 / .35); box-shadow: 0 24px 48px -15px rgb(0 0 0 / .85);
  transition: opacity .35s var(--ease), translate .35s var(--ease);
}
#bar p { display: grid; gap: .08rem; min-width: 0; text-align: left; }
#bar small { font-family: var(--mono); font-size: 0.62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); }
#bar strong { font-family: var(--serif); font-weight: 500; font-size: var(--step-0); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bar.away { opacity: 0; translate: -50% 130%; pointer-events: none; }

#faq ul {
  display: grid; gap: var(--card-gap);
  grid-template-columns: repeat(2, 1fr); padding: 0; list-style: none;
}
@media (max-width: 48rem) { #faq ul { grid-template-columns: 1fr; } }
#faq li {
  display: grid; justify-items: center; text-align: center; align-content: start;
  gap: .65rem; padding: 1.75rem 1.5rem;
  background: var(--surface); border: 1px solid rgb(255 255 255 / .06); border-radius: var(--r);
}
#faq h3 { margin: 0; font-size: var(--step-0); font-family: var(--sans); font-weight: 600; color: var(--gold-soft); text-align: center; }
#faq li p { color: var(--muted); font-size: var(--step--1); line-height: 1.5; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .tilt-3d { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation: none !important; }
}

.view-panel[hidden] { display: none !important; }


/* ---------- 12. Responsive Single-Line & Uniform Card Alignment ---------- */

/* Prevent any grid child from forcing horizontal overflow */
body > header,
main,
body > footer,
.view-panel > section,
#picker,
#picker article.disc-panel,
.tier-grid,
.tier-box,
.bento-grid,
.bento-card,
.sim-box,
.cards,
.cards > li,
.card,
#totals,
#totals section,
#contact form,
#send {
  min-width: 0;
  max-width: 100%;
}

/* Single-Line Locks for Badges, Metrics & Prices */
body > header nav a,
body > header > a.logo,
.tier-top span,
.tier-top b,
.telemetry-strip b,
.telemetry-strip span,
.arch-metrics li span,
.arch-metrics li b,
.sim-stat span,
.sim-stat output,
.terms-bar li b,
.terms-bar li span,
.card .tier,
.card .price,
.card .price small,
#totals h3,
#totals output,
#totals p {
  white-space: nowrap;
}

@media (min-width: 64rem) {
  .hero-badge,
  .label,
  .tier-box h4,
  .tier-specs li,
  .card .name,
  .card .inc span {
    white-space: nowrap;
  }
  body > header nav ul {
    flex-wrap: nowrap;
  }
}

/* 4-Discipline Picker Tabs */
#picker fieldset > label {
  white-space: nowrap;
  padding: .85rem .75rem;
  font-size: clamp(0.64rem, 0.58rem + 0.22vw, 0.72rem);
}

/* 3-Tier Cards (#services): Identical Row Heights */
.tier-grid {
  align-items: stretch;
}
.tier-box {
  display: grid;
  grid-template-rows: auto auto 1fr;
  justify-items: center;
  align-items: center;
}
.tier-box h4 {
  font-size: clamp(1.04rem, 0.98rem + 0.25vw, 1.24rem);
  line-height: 1.2;
}
.tier-specs {
  align-self: start;
}

/* Pricing Configurator Cards (#builder) */
.card .name {
  font-size: clamp(1.02rem, 0.96rem + 0.26vw, 1.24rem);
}
.card .price {
  font-size: clamp(1.32rem, 1.18rem + 0.55vw, 1.78rem);
}
.card .price small {
  font-size: 0.62rem;
  letter-spacing: .08em;
}

.sim-note { grid-column: 1 / -1; font-size: 0.72rem; line-height: 1.5; color: var(--muted); text-align: center; }

/* ---------- 13. Mobile & Smartphone Viewport Optimization (<= 48rem) ---------- */
@media (max-width: 48rem) {
  :root {
    --page-gutter: 1rem;
    --s-3: 1.35rem;
    --s-4: 2.85rem;
    --card-gap: 1rem;
    --layer-gap: 1.65rem;
  }

  body {
    gap: 0.85rem;
    padding: 0.75rem var(--page-gutter) 2.5rem;
  }

  /* Mobile Header & Navigation Bar */
  body > header {
    padding: .48rem .75rem;
    gap: .4rem .5rem;
  }
  body > header nav {
    overflow-x: visible;
    padding-top: .32rem;
  }
  body > header nav ul {
    min-width: 0;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: .2rem .35rem;
  }
  body > header nav a {
    font-size: 0.6rem;
    letter-spacing: .08em;
    padding: .22rem .35rem;
  }

  /* Hero Crest, Badge, Labels & Buttons on Phones */
  .hero-crest {
    width: 160px;
  }
  .hero-badge {
    white-space: normal;
    max-width: 100%;
    padding: .42rem .85rem;
    border-radius: 16px;
    font-size: 0.6rem;
    letter-spacing: .1em;
    line-height: 1.4;
    text-align: center;
  }
  .label {
    white-space: normal;
    font-size: 0.62rem;
    letter-spacing: .11em;
    line-height: 1.35;
    text-align: center;
  }
  #hero h1,
  #pricing-hero h1 {
    font-size: clamp(1.85rem, 7.5vw, 2.5rem);
  }
  .head h2 {
    font-size: clamp(1.6rem, 6.5vw, 2.2rem);
  }
  #hero .actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
  }
  #hero .actions .btn,
  #contact form > .btn,
  #send .btn {
    width: 100%;
    white-space: normal;
    text-align: center;
    padding: .75rem 1rem;
    font-size: 0.66rem;
    letter-spacing: .11em;
  }

  /* Telemetry Strip (2x2 on mobile) */
  .telemetry-strip {
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }
  .telemetry-strip div {
    padding: .65rem .4rem;
  }
  .telemetry-strip b {
    font-size: 1rem;
  }
  .telemetry-strip span {
    font-size: 0.56rem;
    letter-spacing: .07em;
  }

  /* 4-Discipline Picker Tabs (2x2 on mobile) */
  #picker fieldset {
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
  }
  #picker fieldset > label {
    padding: .68rem .4rem;
    font-size: 0.58rem;
    letter-spacing: .06em;
  }

  /* 3-Tier Cards & Pricing Cards on Mobile */
  .tier-box,
  .card,
  .bento-card,
  #work article.case-row,
  #builder > form > fieldset,
  #contact form,
  #send {
    padding: 1.45rem 1.05rem;
  }
  .sim-box {
    padding: 1.1rem .85rem;
  }
  .sim-readout {
    grid-template-columns: 1fr;
    gap: .85rem;
  }
  .arch-metrics {
    gap: .5rem;
  }
  .arch-metrics li {
    padding: .35rem .25rem;
    font-size: 0.58rem;
  }
  .arch-metrics li b {
    font-size: 0.68rem;
  }
  #work ul.chips li {
    font-size: 0.6rem;
    padding: .25rem .58rem;
  }
  .skipcat {
    white-space: normal;
    text-align: center;
    font-size: 0.6rem;
    letter-spacing: .1em;
  }

  /* Floating Bottom Ledger Bar on Mobile */
  #bar {
    width: calc(100% - 1.5rem);
    padding: .55rem .75rem .55rem 1rem;
    gap: .65rem;
  }
  #bar small {
    font-size: 0.54rem;
    letter-spacing: .1em;
  }
  #bar strong {
    font-size: 0.82rem;
  }
}

/* ---------- 14. Strict CSP Zero-Inline-Style Stagger Choreography ---------- */
.js [data-reveal]:nth-child(2) { transition-delay: 80ms; }
.js [data-reveal]:nth-child(3) { transition-delay: 160ms; }
.js [data-reveal]:nth-child(4) { transition-delay: 240ms; }
.js [data-reveal]:nth-child(5) { transition-delay: 320ms; }

/* Thank-You Dispatch Confirmation Page */
#thank-you-hero {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1.35rem;
  padding-block: calc(var(--s-4) * 0.85) var(--s-4);
  max-width: 44rem;
  margin-inline: auto;
}
#thank-you-hero h1 {
  font-size: var(--step-4);
  max-width: 18ch;
  color: #fff;
}
#thank-you-hero p:not(.label):not(.hero-badge):not(.actions) {
  color: var(--on-dark-muted);
  font-size: var(--step-0);
  max-width: 42ch;
  line-height: 1.6;
}


/* ---------- Thank-you page: next steps and call prep ---------- */
#next-steps .bento-card { justify-items: center; }
#prep { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--layer-gap); }
#next-steps .label, #prep .label { white-space: normal; text-align: center; }
#next-steps .bento-card, #prep .bento-card { min-width: 0; }
#prep .prep-list { grid-template-columns: repeat(4, 1fr); max-width: 56rem; }
@media (max-width: 56rem) { #prep .prep-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 30rem) { #prep .prep-list { grid-template-columns: 1fr; } }
#prep .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
#prep .ty-terms { margin: 0 auto; width: 100%; }
.ty-direct { color: var(--on-dark-muted); font-size: var(--step--1); text-align: center; }
.ty-direct a { color: var(--gold-soft); }

.contact-phone { display: flex; justify-content: center; }