/* Ernest Hill Insurance — "Layers of Protection"
   Home, Auto, Business and Life are drawn as four glass layers stacked
   on one axis: separate things a client owns, held together by one
   advisor. Depth, light and material carry that idea through the page. */

:root {
  /* Color */
  --navy-950: #060f1c;
  --navy-900: #0a1829;
  --navy-800: #11243b;
  --navy-700: #1a3552;
  --ivory: #f4eee4;
  --ivory-2: #e8dfd0;
  --paper: #fffcf7;
  --ink: #14202f;
  --ink-2: #4a5668;
  --ink-3: #596373;
  --brass: #c8964f;
  --brass-light: #ebc68f;
  --brass-deep: #855a22;
  --on-dark: #e9e3d8;
  --on-dark-2: #a9b4c3;
  --hairline-dark: rgba(233, 227, 216, 0.14);
  --hairline-light: rgba(20, 32, 47, 0.12);
  /* Two-tone so it shows on both ivory and navy (WCAG 1.4.11). */
  --focus-ring: 0 0 0 2px var(--navy-950), 0 0 0 4px var(--brass-light);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Space */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 14px;
  --sp-4: 22px;
  --sp-5: 34px;
  --sp-6: 52px;
  --sp-7: 80px;
  --sp-8: 128px;

  /* Golden ratio (φ = 1.618): type steps are φ^(n/4), used by the inner pages
     (pages.css) and the dashboard (operator.css). The homepage keeps its own scale. */
  --fs-xs: 0.786rem;
  --fs-sm: 0.886rem;
  --fs-base: 1rem;
  --fs-md: 1.128rem;
  --fs-lg: 1.272rem;
  --fs-xl: 1.618rem;
  --fs-2xl: 2.058rem;
  --fs-3xl: 2.618rem;
  --fs-4xl: 3.33rem;
  --lh-body: 1.618;
  --lh-tight: 1.128;
  --measure: 62ch;
  --golden-major: 1.618fr;

  --max-width: 1220px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  /* Depth: light comes from the upper right; shadows fall down-left and
     are always stacked (contact + ambient), never a single flat blur. */
  --shadow-1: 0 1px 2px rgba(6, 15, 28, 0.06), 0 4px 14px rgba(6, 15, 28, 0.07);
  --shadow-2: 0 2px 4px rgba(6, 15, 28, 0.06), 0 14px 30px rgba(6, 15, 28, 0.12), 0 34px 70px rgba(6, 15, 28, 0.1);
  --shadow-3: 0 2px 6px rgba(6, 15, 28, 0.08), 0 24px 48px rgba(6, 15, 28, 0.18), 0 60px 120px rgba(6, 15, 28, 0.2);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;
  --dur-fast: 0.25s;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.02rem;
  color: var(--ink-2);
  background: var(--ivory);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 0.45em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.7rem, 5.4vw, 4.6rem); font-weight: 400; }
h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 400; }
h3 { font-size: 1.7rem; }

h1 em, h2 em {
  font-style: italic;
  color: var(--brass-deep);
}

p { margin: 0 0 1em; }

a { color: inherit; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--brass-light);
  color: var(--ink);
  padding: 10px 16px;
  z-index: 100;
}

.skip-link:focus { left: 0; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: var(--sp-4);
}

.kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}

.on-dark .kicker,
.kicker.on-dark { color: var(--brass-light); }

/* Reveal */

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
    background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.btn svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn-primary {
  color: #2a1a06;
  background: linear-gradient(180deg, #f1d39f 0%, var(--brass) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(0, 0, 0, 0.2),
    0 10px 24px rgba(200, 150, 79, 0.28);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 4px rgba(0, 0, 0, 0.2),
    0 18px 36px rgba(200, 150, 79, 0.38);
}

.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  color: var(--on-dark);
  border-color: rgba(233, 227, 216, 0.28);
  background: rgba(255, 255, 255, 0.03);
}

.btn-ghost:hover {
  border-color: rgba(233, 227, 216, 0.6);
  background: rgba(255, 255, 255, 0.07);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--brass-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(148, 101, 42, 0.35);
  padding-bottom: 2px;
  transition: border-color var(--dur-fast) ease;
}

.text-link:hover { border-bottom-color: var(--brass-deep); }

/* Header */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  color: var(--on-dark);
  transition: background-color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: rgba(8, 19, 34, 0.94);
  border-bottom-color: var(--hairline-dark);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }

.brand-name {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 500;
  color: #fff;
}

.brand-tagline {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-light);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.primary-nav a:not(.nav-cta) {
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--on-dark-2);
  transition: color var(--dur-fast) ease;
}

.primary-nav a:not(.nav-cta):hover { color: #fff; }

.nav-cta {
  padding: 10px 20px;
  font-size: 0.9rem;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(233, 227, 216, 0.3);
  background: rgba(255, 255, 255, 0.04);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: "";
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--on-dark);
  position: relative;
}

.nav-toggle-bar::before { top: -6px; }
.nav-toggle-bar::after { top: 4.5px; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow-x: clip;
  color: var(--on-dark);
  padding-top: 150px;
  background:
    radial-gradient(900px 620px at 76% 34%, rgba(200, 150, 79, 0.2), transparent 62%),
    radial-gradient(760px 520px at 8% 92%, rgba(52, 104, 168, 0.22), transparent 62%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
}

/* A receding floor grid gives the stack a ground plane to stand on. */
.hero-floor {
  position: absolute;
  z-index: -1;
  left: -25%;
  right: -25%;
  bottom: 0;
  height: 62%;
  background-image:
    linear-gradient(rgba(235, 198, 143, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(235, 198, 143, 0.2) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(700px) rotateX(64deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--sp-5);
  align-items: center;
}

.hero .kicker { color: var(--brass-light); }

.hero h1 { color: #fff; }

.hero h1 em { color: var(--brass-light); }

.hero-lede {
  font-size: 1.16rem;
  color: var(--on-dark-2);
  max-width: 44ch;
  margin-bottom: var(--sp-5);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-note {
  margin-top: var(--sp-4);
  font-size: 0.88rem;
  color: var(--on-dark-2);
}

/* The stage */

.hero-stage {
  position: relative;
  z-index: 2; /* keeps the stack above the hero's bottom fade */
  height: 640px;
  display: grid;
  place-items: center;
  perspective: 1700px;
  perspective-origin: 50% 30%;
}

.stack-float {
  transform-style: preserve-3d;
  translate: 0 var(--py, 0px);
  animation: stackFloat 9s ease-in-out infinite;
}

@keyframes stackFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.stack {
  --size: 326px;
  --gap: 96px;
  --tx: 0deg;
  --tz: 0deg;
  position: relative;
  width: var(--size);
  height: var(--size);
  margin-top: 250px;
  transform-style: preserve-3d;
  transform: rotateX(calc(58deg + var(--tx))) rotateZ(calc(-40deg + var(--tz)));
  transition: transform 0.9s var(--ease);
}

.stack-shadow {
  position: absolute;
  inset: -8%;
  border-radius: 28px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 100%);
  transform: translateZ(-40px);
  filter: blur(14px);
}

.stack-ring {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  border: 1px dashed rgba(235, 198, 143, 0.4);
  transform: translateZ(-2px);
  animation: ringSpin 80s linear infinite;
}

.stack-ring::after {
  content: "";
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  border: 1px solid rgba(235, 198, 143, 0.12);
}

@keyframes ringSpin {
  to { transform: translateZ(-2px) rotate(360deg); }
}

/* The single axis that runs through all four layers: the advisor. */
.stack-axis {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: calc(var(--gap) * 3 + 60px);
  margin-left: -1px;
  transform-origin: 50% 0;
  transform: rotateX(90deg);
  background: linear-gradient(to bottom, rgba(235, 198, 143, 0.95), rgba(235, 198, 143, 0.55) 70%, rgba(235, 198, 143, 0));
  box-shadow: 0 0 14px rgba(235, 198, 143, 0.6);
}

.layer {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--i) * var(--gap)));
  transition: transform 0.55s var(--ease), opacity 0.6s var(--ease);
}

.layer:focus-visible { box-shadow: none; }

.layer-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 26px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0.02) 60%, rgba(235, 198, 143, 0.12) 100%),
    rgba(17, 36, 59, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 40px rgba(235, 198, 143, 0.05),
    0 0 0 1px rgba(0, 0, 0, 0.15);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* Center node where the axis pierces each layer */
.layer-face::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--brass-light);
  box-shadow: 0 0 0 5px rgba(235, 198, 143, 0.16), 0 0 18px rgba(235, 198, 143, 0.8);
}

.layer-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-light);
}

.layer-num { color: rgba(233, 227, 216, 0.5); }

.layer-name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 2.3rem;
  line-height: 1;
  color: #fff;
}

.layer-name svg {
  width: 34px;
  height: 34px;
  color: var(--brass-light);
}

.stack:not(.stack--mini) .layer:hover,
.stack:not(.stack--mini) .layer:focus-visible,
.layer.is-active {
  transform: translateZ(calc(var(--i) * var(--gap) + 30px));
}

.stack:not(.stack--mini) .layer:hover .layer-face,
.stack:not(.stack--mini) .layer:focus-visible .layer-face,
.layer.is-active .layer-face {
  background-color: rgba(38, 64, 96, 0.78);
  border-color: rgba(235, 198, 143, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 0 60px rgba(235, 198, 143, 0.14),
    0 0 0 1px rgba(235, 198, 143, 0.4),
    0 0 50px rgba(235, 198, 143, 0.25);
}

/* Load sequence: layers settle down onto the axis one at a time. */
.stack.is-building .layer {
  opacity: 0;
  transform: translateZ(calc(var(--i) * var(--gap) + 260px));
  transition: none;
}

.stack.is-assembling .layer {
  transition: transform 1.2s var(--ease), opacity 0.9s var(--ease);
  transition-delay: calc(var(--i) * 140ms);
}

.stage-caption {
  position: absolute;
  right: 0;
  top: 34px;
  max-width: 220px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--on-dark-2);
  border-left: 1px solid rgba(235, 198, 143, 0.5);
  padding-left: 14px;
}

.stage-caption strong {
  display: block;
  color: var(--on-dark);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  margin-bottom: 2px;
}

/* Trust bar sits on the hero's lower edge. The hero fades into the ivory
   section below it, and the bar is a translucent card that melts into that fade, so
   neither the stack nor the transition ends in a hard edge. */

.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  /* Overshoot by 2px so a fractional hero height never leaves a dark seam. */
  bottom: -2px;
  height: 300px;
  /* The hero overlaps the top 76px of the coverage section, so repeat that
     section's brass corner tint here to keep the join seamless. The fade
     eases in and out (smoothstep) so there is no visible start or end. */
  background:
    radial-gradient(900px 500px at 100% 222px, rgba(200, 150, 79, 0.1), transparent 60%),
    linear-gradient(
      180deg,
      rgba(244, 238, 228, 0) 0%,
      rgba(244, 238, 228, 0.01) 6%,
      rgba(244, 238, 228, 0.043) 12.5%,
      rgba(244, 238, 228, 0.1) 19%,
      rgba(244, 238, 228, 0.156) 25%,
      rgba(244, 238, 228, 0.316) 37.5%,
      rgba(244, 238, 228, 0.5) 50%,
      rgba(244, 238, 228, 0.684) 62.5%,
      rgba(244, 238, 228, 0.844) 75%,
      rgba(244, 238, 228, 0.957) 87.5%,
      rgba(244, 238, 228, 0.99) 94%,
      var(--ivory) 100%
    );
  pointer-events: none;
}

.trust-bar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 48px;
  margin-bottom: -76px;
  color: var(--ink-2);
}

.trust-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius);
  background: linear-gradient(
    180deg,
    rgba(255, 252, 247, 0.88) 0%,
    rgba(255, 252, 247, 0.93) 55%,
    rgba(244, 238, 228, 0.94) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 18px 40px -18px rgba(6, 15, 28, 0.25);
  pointer-events: none;
}

.trust-item {
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trust-item + .trust-item { border-left: 1px solid var(--hairline-light); }

.trust-item strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.28rem;
  color: var(--ink);
}

.trust-item span { font-size: 0.9rem; }

/* ---------- Coverage ---------- */

.coverage {
  position: relative;
  padding: calc(var(--sp-8) + 60px) 0 var(--sp-8);
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(200, 150, 79, 0.1), transparent 60%),
    var(--ivory);
}

.coverage-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--sp-7);
  align-items: start;
}

.coverage-intro {
  position: sticky;
  top: 120px;
}

.coverage-intro p { max-width: 38ch; }

.layer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/* The same axis from the hero, now running down through the list */
.layer-list::before {
  content: "";
  position: absolute;
  left: 60px;
  top: 40px;
  bottom: 40px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(148, 101, 42, 0.5) 12%, rgba(148, 101, 42, 0.5) 88%, transparent);
}

.layer-row {
  position: relative;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-4) var(--sp-5) 0;
  border-radius: var(--radius);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.layer-row + .layer-row::before {
  content: "";
  position: absolute;
  left: 120px;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--hairline-light);
}

.layer-row:nth-child(even) { margin-left: 34px; }

.layer-row:hover,
.layer-row:focus-within {
  background: var(--paper);
  box-shadow: var(--shadow-2);
  transform: translateX(8px);
}

.layer-row:hover + .layer-row::before,
.layer-row:focus-within + .layer-row::before { opacity: 0; }

.row-tile {
  perspective: 600px;
  display: grid;
  place-items: center;
  height: 110px;
}

.tile {
  position: relative;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--brass-deep);
  background: linear-gradient(140deg, #ffffff 0%, #f3ebdd 55%, #e6d7bf 100%);
  border: 1px solid rgba(148, 101, 42, 0.25);
  transform-style: preserve-3d;
  transform: rotateX(56deg) rotateZ(-40deg);
  box-shadow: inset 0 1px 0 #fff, -12px 14px 20px rgba(6, 15, 28, 0.16);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

/* A second plate under each tile makes it read as a thick, raised object */
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(140deg, #d9c4a2, #b88c52);
  transform: translateZ(-10px);
}

.tile svg {
  width: 38px;
  height: 38px;
  transform: translateZ(1px);
}

.layer-row:hover .tile,
.layer-row:focus-within .tile {
  transform: rotateX(56deg) rotateZ(-28deg) translateZ(18px);
  box-shadow: inset 0 1px 0 #fff, -22px 26px 30px rgba(6, 15, 28, 0.2);
}

.row-meta {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 6px;
}

.layer-row h3 {
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  font-weight: 400;
  margin-bottom: 0.3em;
}

.layer-row p { max-width: 52ch; margin-bottom: var(--sp-3); }

.row-asks {
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.row-types {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 0.9rem;
  color: var(--ink-3);
  margin-bottom: var(--sp-4);
}

.row-types span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.row-types span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brass);
}

.row-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--hairline-light);
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.row-cta svg { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease); }

.row-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}

.row-more {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brass-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(148, 101, 42, 0.35);
}

.row-more:hover { border-bottom-color: var(--brass-deep); }

.coverage-bundle { margin-top: var(--sp-4); font-size: 0.95rem; }
.coverage-bundle a { color: var(--brass-deep); font-weight: 600; }

.row-cta:hover,
.layer-row:hover .row-cta,
.layer-row:focus-within .row-cta {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
}

.row-cta:hover svg { transform: translateX(3px); }

/* ---------- Approach ---------- */

.approach {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--on-dark);
  padding: var(--sp-8) 0;
  background:
    radial-gradient(700px 520px at 22% 50%, rgba(200, 150, 79, 0.2), transparent 65%),
    linear-gradient(180deg, var(--navy-800), var(--navy-950));
}

.approach-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--sp-7);
  align-items: center;
}

.seal-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 460px;
  perspective: 1200px;
}

.seal-stage::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 18px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent);
  filter: blur(6px);
  z-index: -1;
}

.seal {
  --sx: 10deg;
  --sy: -16deg;
  position: relative;
  width: 360px;
  height: 360px;
  transform-style: preserve-3d;
  transform: rotateX(var(--sx)) rotateY(var(--sy));
  transition: transform 0.9s var(--ease);
}

.seal-plate {
  position: absolute;
  border-radius: 50%;
}

.seal-plate--rim {
  inset: 0;
  background: conic-gradient(from 200deg, #6f4b1c, #ebc68f, #94652a, #f6dfb4, #7d5522, #d9ae6c, #6f4b1c);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.seal-plate--band {
  inset: 16px;
  background: radial-gradient(circle at 30% 25%, #1c3a5d, var(--navy-950) 75%);
  transform: translateZ(18px);
  box-shadow: inset 0 0 0 1px rgba(235, 198, 143, 0.4), inset 0 18px 40px rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.45);
}

.seal-ring-text {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: sealSpin 70s linear infinite;
}

.seal-ring-text text {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 4.2px;
  fill: var(--brass-light);
}

@keyframes sealSpin { to { transform: rotate(360deg); } }

.seal-plate--core {
  inset: 78px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 32% 28%, #24466e, #0c1c31 80%);
  border: 1px solid rgba(235, 198, 143, 0.55);
  transform: translateZ(46px);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.seal-mono {
  font-family: var(--font-display);
  font-size: 5.4rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.04em;
  /* background-clip:text only paints inside the box; the italic H leans past it */
  padding: 0.06em 0.16em 0.06em 0.08em;
  background: linear-gradient(170deg, #fbe7c4 10%, var(--brass) 55%, #8a5d25 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: translateZ(1px);
}

.approach h2 { color: #fff; }

.pull-quote {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.9vw, 2.45rem);
  line-height: 1.22;
  color: #fff;
}

.approach-byline {
  margin: calc(var(--sp-4) * -1) 0 var(--sp-5);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-light);
}

.principles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  border-top: 1px solid var(--hairline-dark);
  padding-top: var(--sp-4);
}

.principles strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  color: #fff;
  margin-bottom: 4px;
}

.principles span { font-size: 0.92rem; color: var(--on-dark-2); }

/* ---------- Quote ---------- */

.quote {
  position: relative;
  padding: var(--sp-8) 0;
  background:
    radial-gradient(800px 520px at 88% 30%, rgba(200, 150, 79, 0.12), transparent 60%),
    var(--ivory);
}

.quote-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--sp-7);
  align-items: start;
}

.quote-side p { max-width: 42ch; }

.mini-stage {
  height: 200px;
  display: grid;
  place-items: center;
  perspective: 1100px;
  margin: var(--sp-4) 0 var(--sp-4);
  justify-items: start;
  padding-left: 60px;
}

.stack--mini {
  --size: 118px;
  --gap: 30px;
  margin-top: 70px;
  pointer-events: none;
}

.stack--mini .layer-face {
  padding: 0;
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.9), rgba(243, 235, 221, 0.75));
  border: 1px solid rgba(148, 101, 42, 0.25);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(6, 15, 28, 0.03);
}

.stack--mini .layer-face::after {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--brass);
  box-shadow: 0 0 0 3px rgba(200, 150, 79, 0.18);
}

.stack--mini .stack-axis {
  background: linear-gradient(to bottom, var(--brass-deep), rgba(148, 101, 42, 0));
  box-shadow: none;
}

.stack--mini .stack-shadow {
  background: radial-gradient(closest-side, rgba(6, 15, 28, 0.28), transparent);
}

.stack--mini .layer.is-active {
  transform: translateZ(calc(var(--i) * var(--gap) + 18px));
}

.stack--mini .layer.is-active .layer-face {
  background: linear-gradient(140deg, #f7deb3, var(--brass));
  border-color: var(--brass-deep);
  box-shadow: 0 0 30px rgba(200, 150, 79, 0.45);
}

.mini-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 0.86rem;
  color: var(--ink-3);
  margin-bottom: var(--sp-5);
}

.mini-legend span[data-legend].is-active {
  color: var(--brass-deep);
  font-weight: 600;
}

.next-steps {
  list-style: none;
  counter-reset: step;
  margin: 0 0 var(--sp-5);
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.next-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: baseline;
  color: var(--ink-2);
}

.next-steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--brass-deep);
}

.next-steps strong { color: var(--ink); font-weight: 600; }

.quote-disclaimer {
  font-size: 0.86rem;
  color: var(--ink-3);
  border-top: 1px solid var(--hairline-light);
  padding-top: var(--sp-3);
}

/* The form is a raised sheet on a small stack of paper */

.sheet-stage {
  position: relative;
  perspective: 1800px;
}

.sheet-stage::before,
.sheet-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-1);
}

.sheet-stage::before { transform: translate(18px, 18px) rotate(1.4deg); opacity: 0.55; }
.sheet-stage::after { transform: translate(9px, 9px) rotate(0.6deg); opacity: 0.8; }

.sheet {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fffefb, var(--paper));
  box-shadow: var(--shadow-3), inset 0 1px 0 #fff;
  transform: rotateY(-7deg) rotateX(2deg);
  transform-origin: 30% 50%;
  transition: transform 0.9s var(--ease);
}

.sheet-stage:hover .sheet,
.sheet:focus-within {
  transform: none;
}

.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--hairline-light);
}

.sheet-head strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.45rem;
  color: var(--ink);
}

.sheet-head span {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-row-half {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-3);
}

.form-row-half > div { display: flex; flex-direction: column; gap: 7px; }

label,
legend {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
  padding: 0;
}

input,
select,
textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(20, 32, 47, 0.14);
  background: #f8f3ea;
  box-shadow: inset 0 1px 2px rgba(6, 15, 28, 0.05);
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brass);
  background: #fff;
  box-shadow: var(--focus-ring);
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%2394652a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

textarea { resize: vertical; min-height: 110px; }

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.radio-group { display: flex; flex-wrap: wrap; gap: 10px; }

.radio-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(20, 32, 47, 0.14);
  background: #f8f3ea;
  font-weight: 500;
  font-size: 0.94rem;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.radio-option:has(input:checked) {
  border-color: var(--brass);
  background: #fbefd9;
  color: var(--ink);
}

input[type="radio"] {
  accent-color: var(--brass-deep);
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  box-shadow: none;
}

/* ---------- Quote wizard ---------- */

.sheet { scroll-margin-top: 90px; }

.path-picker { gap: 12px; }

.path-picker[hidden],
.path-empty[hidden],
.wizard[hidden],
.confirm[hidden] { display: none; }

.path-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  perspective: 700px;
}

.path-tile {
  position: relative;
  display: block;
  cursor: pointer;
}

.path-tile input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.path-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 6px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(20, 32, 47, 0.14);
  background: linear-gradient(160deg, #fffefb, #f3ebdd);
  color: var(--ink-2);
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(6, 15, 28, 0.06);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.25s ease, background 0.25s ease;
}

.path-face svg { width: 28px; height: 28px; color: var(--brass-deep); }

.path-tile:hover .path-face {
  transform: translateY(-2px);
  border-color: rgba(148, 101, 42, 0.5);
  box-shadow: inset 0 1px 0 #fff, 0 10px 18px rgba(6, 15, 28, 0.12);
}

.path-tile input:checked + .path-face {
  color: var(--ink);
  border-color: var(--brass-deep);
  background: linear-gradient(160deg, #fbe7c4, #ebc68f);
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 14px 24px rgba(148, 101, 42, 0.28);
}

.path-tile input:checked + .path-face svg { color: var(--ink); }

.path-tile input:focus-visible + .path-face { box-shadow: var(--focus-ring); }

.path-empty {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  background: rgba(200, 150, 79, 0.1);
  color: var(--ink-2);
  font-size: 0.94rem;
}

.wizard { display: flex; flex-direction: column; gap: var(--sp-4); }

.progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }

.progress span {
  height: 4px;
  border-radius: 4px;
  background: rgba(20, 32, 47, 0.12);
  transition: background-color 0.4s ease;
}

.progress span.is-done { background: var(--brass-deep); }
.progress span.is-current { background: var(--brass); box-shadow: 0 0 10px rgba(200, 150, 79, 0.6); }

.path-panel {
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.path-panel[hidden] { display: none; }

.step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  animation: stepIn 0.45s var(--ease);
}

.step[hidden] { display: none; }

@keyframes stepIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.step-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.55rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.step-title:focus { outline: none; }

.opt {
  margin-left: 6px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.form-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.form-row-half { min-width: 0; }
.field, .form-row-3 > *, .form-row-half > * { min-width: 0; }
.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea { width: 100%; min-width: 0; }

.field[hidden] { display: none; }

.field-error {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: #a4271f;
}

.field.has-error input:not([type="radio"]):not([type="checkbox"]),
.field.has-error select,
.field.has-error textarea {
  border-color: #c0392b;
  background: #fdf3f1;
}

input[type="checkbox"] {
  accent-color: var(--brass-deep);
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  box-shadow: none;
}

.radio-option:has(input:focus-visible) { box-shadow: var(--focus-ring); }

.privacy-note,
.submit-notes {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--brass);
  background: rgba(200, 150, 79, 0.09);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.privacy-note[hidden],
.submit-notes[hidden] { display: none; }

.submit-notes p { margin: 0 0 0.6em; max-width: none; }
.submit-notes p:last-child { margin-bottom: 0; }
.submit-notes a { color: var(--brass-deep); font-weight: 600; }

.step-alert {
  margin: 0;
  min-height: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #a4271f;
}

.step-alert:empty { display: none; }

.wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.wizard-nav .btn { margin-left: auto; }

.back-btn {
  font: inherit;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  padding: 10px 4px;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}

.back-btn:hover { color: var(--ink); border-bottom-color: currentColor; }
.back-btn[hidden] { display: none; }

.confirm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
}

.confirm:focus { outline: none; }

.confirm h3 { margin: 0; font-size: 1.9rem; font-weight: 400; }
.confirm p { margin: 0 0 var(--sp-2); color: var(--ink-2); }

.confirm-badge {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: var(--ink);
  background: linear-gradient(160deg, #fbe7c4, #ebc68f);
  box-shadow: inset 0 1px 0 #fff, 0 12px 22px rgba(148, 101, 42, 0.3);
}

.confirm-badge svg { width: 26px; height: 26px; }

/* ---------- Contact ---------- */

.contact {
  color: var(--on-dark);
  padding: var(--sp-7) 0;
  background: linear-gradient(180deg, var(--navy-900), var(--navy-950));
  border-top: 1px solid var(--hairline-dark);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-6);
  align-items: end;
}

.contact h2 { color: #fff; margin-bottom: 0.2em; }
.contact p { color: var(--on-dark-2); margin: 0; }

.contact-list {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: var(--sp-5) var(--sp-6);
  margin: 0;
}

.dd-sub {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--on-dark-2);
}

.contact-list dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin-bottom: 6px;
}

.contact-list dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: #fff;
}

.contact-list a { text-decoration: none; border-bottom: 1px solid rgba(235, 198, 143, 0.4); }
.contact-list a:hover { border-bottom-color: var(--brass-light); }

/* ---------- Legal ---------- */

.legal {
  color: var(--on-dark);
  padding: var(--sp-7) 0;
  background: var(--navy-950);
  border-top: 1px solid var(--hairline-dark);
}

.legal-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: var(--sp-6);
  align-items: start;
}

.legal h2 { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.legal-intro p { color: var(--on-dark-2); max-width: 34ch; }

.legal-list { border-top: 1px solid var(--hairline-dark); }

.legal-list details { border-bottom: 1px solid var(--hairline-dark); }

.legal-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: #fff;
}

.legal-list summary::-webkit-details-marker { display: none; }

.legal-list summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--brass-light);
  border-bottom: 1.5px solid var(--brass-light);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.3s var(--ease);
}

.legal-list details[open] summary::after { transform: rotate(-135deg); }
.legal-list summary:focus-visible { box-shadow: var(--focus-ring); }

.legal-list details p {
  margin: 0 0 20px;
  max-width: 68ch;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--on-dark-2);
}

.site-footer a { color: var(--on-dark-2); }
.site-footer a:hover { color: #fff; }

.site-footer {
  background: var(--navy-950);
  color: #7f8ea3;
  font-size: 0.82rem;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--hairline-dark);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-inner p { margin: 0; }

.footer-links { width: 100%; margin-bottom: 6px; line-height: 1.9; }
.footer-links a { text-decoration: none; }

/* Homepage quote button: the first thing to land on. Sized one φ step above
   the standard button (type φ^1, padding ×φ), 377px wide (a Fibonacci width,
   ≈ 61.8% of the hero copy column), with the call option a quiet link below. */
.hero-actions { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.btn-hero {
  width: min(100%, 377px);
  justify-content: space-between;
  gap: 21px;
  padding: 21px 34px 21px 44px;
  font-size: var(--fs-xl);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(235, 198, 143, 0.5),
    0 0 0 8px rgba(235, 198, 143, 0.12), 0 21px 55px rgba(200, 150, 79, 0.42);
}
.btn-hero-text { display: flex; flex-direction: column; gap: 5px; }
.btn-hero-text small { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.72; }
.btn-hero svg { width: 26px; height: 26px; flex: 0 0 auto; }
.btn-hero:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(235, 198, 143, 0.7),
    0 0 0 13px rgba(235, 198, 143, 0.14), 0 26px 64px rgba(200, 150, 79, 0.5); }
.btn-hero:focus-visible { outline: none; box-shadow: var(--focus-ring), 0 21px 55px rgba(200, 150, 79, 0.42); }
.hero-call { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(235, 198, 143, 0.45); text-underline-offset: 0.3em; }
.hero-call:hover { color: #fff; text-decoration-color: var(--brass-light); }
.hero-lede { margin-bottom: var(--sp-5); }
/* Keep the button's centre near the golden line (61.8% down) of the first
   screen on short laptop screens too: header space and headline scale with
   the viewport height as well as its width. */
.hero { padding-top: clamp(104px, 76px + 4vh, 150px); }
.hero h1 { font-size: clamp(2.6rem, min(5.4vw, 7.4vh), 4.6rem); margin-bottom: var(--sp-4); }
.hero .kicker { margin-bottom: var(--sp-3); }
@media (prefers-reduced-motion: no-preference) {
  .btn-hero { animation: hero-cta-glow 3.4s ease-in-out 1.2s 2; }
}
@keyframes hero-cta-glow {
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(235, 198, 143, 0.7),
    0 0 0 13px rgba(235, 198, 143, 0.18), 0 26px 64px rgba(200, 150, 79, 0.5); }
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-top: 130px; }
  .hero-stage { height: 520px; }
  .trust-bar { margin-top: 100px; }
  .stage-caption { right: 4%; }
  .coverage-grid,
  .approach-grid,
  .quote-grid,
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .coverage-intro { position: static; }
  .seal-stage { min-height: 400px; }
  .contact-list { grid-template-columns: repeat(2, auto); justify-content: start; }
  .legal-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
}

@media (max-width: 760px) {
  .wrap { padding: 0 20px; }

  .nav-toggle { display: flex; }

  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 18px 20px 24px;
    background: rgba(8, 19, 34, 0.98);
    border-bottom: 1px solid var(--hairline-dark);
    display: none;
  }

  .primary-nav.is-open { display: flex; }
  .nav-cta { justify-content: center; }
  .site-header:has(.primary-nav.is-open) { background: rgba(8, 19, 34, 0.98); }

  .hero { padding-top: 76px; }
  .hero-grid { gap: 0; }
  .hero-lede { font-size: 1.06rem; }
  .hero-actions { align-items: stretch; }
  .btn-hero { width: 100%; padding: 21px 26px 21px 34px; }
  .hero-call { justify-content: center; }

  /* On phones the quote button leads; the stack follows it. */
  .hero-stage {
    height: 330px;
  }

  .hero .stack {
    --size: 178px;
    --gap: 54px;
    margin-top: 120px;
  }

  .layer-face { padding: 16px 18px; border-radius: 18px; }
  .layer-name { font-size: 1.55rem; gap: 8px; }
  .layer-name svg { width: 24px; height: 24px; }
  .layer-top { font-size: 0.6rem; letter-spacing: 0.14em; }

  .stage-caption { display: none; }

  /* On phones the bar keeps the same translucent card and fade, laid out two by two. */
  .trust-bar {
    grid-template-columns: 1fr 1fr;
    margin-top: var(--sp-5);
  }
  .trust-item { padding: 18px 14px; }
  .trust-item + .trust-item { border-left: 0; }
  .trust-item:nth-child(even) { border-left: 1px solid var(--hairline-light); }
  .trust-item:nth-child(n + 3) { border-top: 1px solid var(--hairline-light); }
  .trust-item strong { font-size: 1rem; }
  .trust-item span { font-size: 0.82rem; }

  .coverage { padding-top: calc(var(--sp-7) + 36px); padding-bottom: var(--sp-7); }
  .coverage-grid { gap: var(--sp-5); }
  .layer-list::before { left: 32px; }
  .layer-row { grid-template-columns: 64px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-4) var(--sp-3) var(--sp-4) 0; }
  .layer-row + .layer-row::before { left: 64px; }
  .row-cta { white-space: nowrap; font-size: 0.88rem; padding: 9px 14px; }
  .layer-row:nth-child(even) { margin-left: 0; }
  .layer-row:hover, .layer-row:focus-within { transform: none; }
  .row-tile { height: 72px; perspective: 400px; }
  .tile { width: 48px; height: 48px; border-radius: 10px; }
  .tile svg { width: 24px; height: 24px; }
  .layer-row h3 { font-size: 1.7rem; }

  .approach { padding: var(--sp-7) 0; }
  .seal-stage { min-height: 320px; }
  .seal { width: 270px; height: 270px; }
  .seal-plate--band { inset: 12px; }
  .seal-plate--core { inset: 58px; }
  .seal-mono { font-size: 4rem; }
  .principles { grid-template-columns: 1fr; }

  .quote { padding: var(--sp-7) 0; }
  .mini-stage { padding-left: 40px; height: 170px; }
  .form-row-half { grid-template-columns: minmax(0, 1fr); }
  .form-row-half.keep2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .form-row-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .form-row-3 > :first-child { grid-column: 1 / -1; }
  .path-tiles { gap: 6px; }
  .path-face { padding: 12px 2px 10px; font-size: 0.82rem; }
  .path-face svg { width: 24px; height: 24px; }
  .step-title { font-size: 1.35rem; }
  .legal { padding: var(--sp-6) 0; }
  .sheet { padding: var(--sp-5) var(--sp-4); transform: none; }
  .sheet-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .sheet-stage::before { transform: translate(8px, 10px) rotate(1deg); }
  .sheet-stage::after { transform: translate(4px, 5px) rotate(0.4deg); }

  .contact-list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
}

@media (pointer: coarse) {
  .sheet { transform: none; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .js .reveal { opacity: 1; transform: none; }
  .stack-float { translate: none; }
}

/* Touch screens keep :hover after a tap; don't leave a tapped row enlarged. */
@media (hover: none) {
  .layer-row:hover {
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  .layer-row:hover + .layer-row::before { opacity: 1; }
  .layer-row:hover .tile {
    transform: rotateX(56deg) rotateZ(-40deg);
    box-shadow: inset 0 1px 0 #fff, -12px 14px 20px rgba(6, 15, 28, 0.16);
  }
  .layer-row:hover .row-cta {
    background: transparent;
    border-color: var(--hairline-light);
    color: var(--ink);
  }
}