/* ==========================================================================
   BAP Marketing — bapmarketing.com
   Brand: navy #0A1F44 / gold #C9A84C (sampled from existing brand assets)
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Brand */
  --navy:        #0A1F44;
  --navy-deep:   #061530;
  --navy-lift:   #123059;
  --gold:        #C9A84C;
  --gold-light:  #E0C878;
  /* Gold fails contrast as text on white (2.3:1). Use this for gold-toned
     text on light surfaces instead — 6.1:1 against #FFF. */
  --gold-ink:    #7A5C12;

  /* Neutrals */
  --ink:         #14181F;
  --ink-soft:    #4C5563;
  --ink-faint:   #6B7484;
  --line:        #E4E8ED;
  --line-strong: #CBD2DB;
  --surface:     #F7F9FB;
  --surface-alt: #EFF3F7;
  --white:       #FFFFFF;

  /* Type */
  --font-sans:  "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Type scale — 1.25 major third, fluid */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   clamp(1.0625rem, 0.4vw + 0.98rem, 1.1875rem);
  --t-lg:   clamp(1.25rem, 0.7vw + 1.1rem, 1.5rem);
  --t-xl:   clamp(1.5rem, 1.2vw + 1.25rem, 2rem);
  --t-2xl:  clamp(1.875rem, 2vw + 1.4rem, 2.75rem);
  --t-3xl:  clamp(2rem, 2.6vw + 1.35rem, 3.25rem);
  /* Lower bound is set so "More Customers." holds one line on a 320px phone */
  --t-4xl:  clamp(2.25rem, 4.4vw + 1.2rem, 4.5rem);

  /* Space — 4px rhythm */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;    --s-11: 6.5rem;  --s-12: 8rem;

  --section-y: clamp(4rem, 8vw, 7.5rem);
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --maxw:      74rem;

  --header-h:  5.5rem;

  --radius:    4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(10, 31, 68, 0.06);
  --shadow-md: 0 4px 16px -4px rgba(10, 31, 68, 0.10), 0 1px 3px rgba(10, 31, 68, 0.05);
  --shadow-lg: 0 20px 48px -16px rgba(10, 31, 68, 0.20), 0 2px 8px rgba(10, 31, 68, 0.06);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  /* Keeps form controls and scrollbars light even if the OS is set dark —
     this site has no dark theme, so let's not half-render one. */
  color-scheme: light;
}

body {
  font-family: var(--font-sans);
  font-size: var(--t-md);
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

/* Author display rules (e.g. .btn { display: inline-flex }) otherwise beat
   the UA's [hidden] rule, leaving "hidden" elements on screen. */
[hidden] { display: none !important; }

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }

:where(h1, h2, h3, h4) {
  font-weight: 700;
  line-height: 1.08;
  text-wrap: balance;
}
:where(p) { text-wrap: pretty; }

/* Optical tracking scale.
   Type needs progressively tighter tracking as it grows and slightly looser
   as it shrinks — a single value across the whole scale is the giveaway that
   nobody looked at it. These are hand-tuned for Archivo. */
h1 { letter-spacing: -0.038em; }
h2 { letter-spacing: -0.032em; }
h3 { letter-spacing: -0.026em; }
h4 { letter-spacing: -0.018em; }
.lede { letter-spacing: -0.012em; }
small, .t-sm { letter-spacing: 0.004em; }

/* Proper figures and ligatures throughout */
body {
  font-variant-numeric: proportional-nums;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

::selection { background: var(--gold); color: var(--navy); }
.on-dark ::selection { background: var(--gold); color: var(--navy-deep); }

/* Form controls inherit the brand rather than the OS blue */
:root { accent-color: var(--navy); }
input, textarea { caret-color: var(--navy); }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible { outline-color: var(--gold-light); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Layout primitives -------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 52rem; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }
.section--line { border-top: 1px solid var(--line); }
.section--surface { background: var(--surface); }

/* Optical spacing corrections. A single section rhythm applied everywhere
   reads mechanical: the block right after a hero already has the hero's
   air above it, and the last block before the footer needs a little more
   room so the page doesn't end abruptly. */
.hero + .section { padding-top: clamp(2.75rem, 5vw, 4.25rem); }
.page-head + .section { padding-top: clamp(2.5rem, 4.5vw, 4rem); }
main > .section:last-child { padding-bottom: clamp(4.5rem, 9vw, 8.5rem); }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100%;
  z-index: 1000;
  padding: var(--s-3) var(--s-5);
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  border-radius: var(--radius);
  transition: top 180ms var(--ease);
}
.skip-link:focus { top: var(--s-4); }

/* --- Shared type helpers ------------------------------------------------ */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--gold);
  flex: none;
}
/* Centred variant gets a matching rule on the right so it reads as
   deliberate rather than lopsided. */
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--gold);
  flex: none;
}
.on-dark .eyebrow { color: rgba(255, 255, 255, 0.62); }

/* On a narrow phone the flanking rules push longer eyebrow text onto a
   second line — drop them and give the words the full measure. */
@media (max-width: 26rem) {
  .eyebrow--center::before,
  .eyebrow--center::after,
  .section-head--center .eyebrow::before,
  .section-head--center .eyebrow::after { display: none; }
}

.section-head { max-width: 44rem; margin-bottom: var(--s-8); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .eyebrow::after {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--gold);
  flex: none;
}
.section-head h2 { font-size: var(--t-3xl); margin-top: var(--s-4); }
.section-head .lede { margin-top: var(--s-4); }

.lede {
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--ink-soft);
  letter-spacing: -0.011em;
  max-width: 40ch;
}
.section-head--center .lede { margin-inline: auto; }
.on-dark .lede { color: rgba(255, 255, 255, 0.74); }

/* Tabular numerals for anything numeric */
.num { font-variant-numeric: tabular-nums lining-nums; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--navy);
  --btn-fg: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.006em;
  text-decoration: none;
  border-radius: var(--radius);
  white-space: nowrap;
  touch-action: manipulation;
  transition: background-color 180ms var(--ease), transform 180ms var(--ease),
              box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}
.btn:hover { background: var(--navy-lift); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn .arrow { transition: transform 220ms var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.btn--gold { --btn-bg: var(--gold); --btn-fg: var(--navy); }
.btn--gold:hover { background: var(--gold-light); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy);
  border: 1px solid var(--line-strong);
}
.btn--ghost:hover { background: var(--surface); border-color: var(--navy); box-shadow: none; }

.on-dark .btn--ghost {
  --btn-fg: var(--white);
  border-color: rgba(255, 255, 255, 0.28);
}
.on-dark .btn--ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.55); }

.btn--lg { min-height: 3.5rem; padding-inline: 2rem; font-size: var(--t-md); }
.btn--block { width: 100%; }

/* Text link with animated gold underline */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  font-size: var(--t-base);
  color: var(--navy);
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size 260ms var(--ease);
}
.link:hover { background-size: 100% 2px; }
.link .arrow { transition: transform 220ms var(--ease); }
.link:hover .arrow { transform: translateX(3px); }
.on-dark .link { color: var(--white); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.site-header[data-stuck="true"] {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 12px rgba(10, 31, 68, 0.05);
}

/* Slides out of the way when reading down the page, back in the moment
   the visitor scrolls up. Transform-only so it never triggers layout. */
.site-header {
  will-change: transform;
  transition: transform 320ms var(--ease),
              border-color 220ms var(--ease),
              box-shadow 220ms var(--ease);
}
.site-header[data-hidden="true"] { transform: translateY(-100%); }

/* Never hide it while the mobile menu is open, or the menu goes with it */
.site-header:has(#primaryNav[data-open="true"]) { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: border-color 220ms, box-shadow 220ms; }
  .site-header[data-hidden="true"] { transform: none; }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  min-height: var(--header-h);
}

.brand { flex: none; display: block; line-height: 0; }
/* Logo art is cropped flush to its ink, so these heights are the real
   mark height — no invisible padding inflating the number. */
.brand img { width: auto; height: 3.5rem; }
@media (max-width: 30rem) { .brand img { height: 2.75rem; } }

/* Primary nav */
.nav { margin-left: auto; }
.nav-list {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  list-style: none;
  padding: 0;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.85rem;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color 160ms var(--ease), background-color 160ms var(--ease);
}
.nav-link:hover { color: var(--navy); background: var(--surface); }
.nav-link[aria-current="page"] { color: var(--navy); font-weight: 600; }

/* Current-page gold tick */
.nav-item { position: relative; }
.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.15rem;
  height: 2px;
  background: var(--gold);
}

.caret { transition: transform 200ms var(--ease); }
.nav-item[data-open="true"] .caret { transform: rotate(180deg); }

/* Dropdown */
.submenu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 15rem;
  padding: var(--s-2);
  margin: 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms;
}
.nav-item[data-open="true"] .submenu { opacity: 1; visibility: visible; transform: translateY(0); }

.submenu a {
  display: block;
  padding: 0.6rem 0.75rem;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}
.submenu a:hover { color: var(--navy); background: var(--surface); }

.header-cta { flex: none; }

/* The nav carries its own CTA for the mobile drawer; on desktop the
   header-level one is used instead, so hide the duplicate. */
.nav > .btn { display: none; }

/* Mobile toggle */
/* Flex column with an explicit gap: the bars sit exactly 7px apart
   (2px bar + 5px gap), which is what the close-state transform below
   relies on to land both strokes dead centre. */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  border-radius: var(--radius);
  color: var(--navy);
}
.nav-toggle:hover { background: var(--surface); }
.nav-toggle .bar {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform 240ms var(--ease), opacity 160ms var(--ease);
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 62rem) {
  .nav-toggle { display: flex; }
  .header-cta { display: none; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    margin: 0;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: var(--s-4) var(--gutter) var(--s-8);
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms;
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--line); }
  .nav-link {
    justify-content: space-between;
    padding: 1rem 0.25rem;
    font-size: var(--t-md);
    border-radius: 0;
  }
  .nav-link[aria-current="page"]::after { display: none; }
  .nav-link[aria-current="page"] { color: var(--gold-ink); }

  .submenu {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 var(--s-3) var(--s-4);
    border: 0;
    border-left: 2px solid var(--gold);
    margin-left: 0.25rem;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-item[data-open="true"] .submenu { display: block; }
  .submenu a { padding: 0.6rem 0.75rem; }

  .nav > .btn { display: inline-flex; margin-top: var(--s-5); width: 100%; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
/* Very subtle brand wash — no stock gradient blobs */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60rem 30rem at 50% -18%, rgba(201, 168, 76, 0.10), transparent 62%),
    radial-gradient(48rem 26rem at 12% 105%, rgba(10, 31, 68, 0.05), transparent 60%);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero-inner { text-align: center; }

.hero h1 {
  font-size: var(--t-4xl);
  font-weight: 800;
  letter-spacing: -0.038em;
  margin-top: var(--s-5);
  color: var(--navy);
}
/* Keeps the three-sentence headline breaking sensibly at every width */
.hero h1 .line { display: block; }
.hero h1 .line:last-child { color: var(--ink); }

.hero .lede {
  margin: var(--s-5) auto 0;
  max-width: 34ch;
  font-size: clamp(1.125rem, 1vw + 0.95rem, 1.375rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-7);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin: var(--s-8) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-faint);
}
.hero-meta li { display: flex; align-items: center; gap: var(--s-3); }
.hero-meta li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

@media (max-width: 40rem) {
  .hero-actions .btn { width: 100%; }
}

/* Stack the meta line on phones. Left as a wrapping row, the dot separator
   ends up orphaned at the start of the second line. */
@media (max-width: 32rem) {
  .hero-meta { flex-direction: column; gap: var(--s-2); }
  .hero-meta li + li::before { display: none; }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--s-5);
}

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease), transform 220ms var(--ease);
}
.quote:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.stars { display: flex; gap: 2px; color: var(--gold); }
.stars svg { width: 1.0625rem; height: 1.0625rem; }

.quote blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink);
  letter-spacing: -0.003em;
}
/* Hanging opening quote — small typographic nicety */
.quote blockquote p { text-indent: -0.42em; }

.quote figcaption {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  line-height: 1.45;
}
.quote figcaption b { display: block; font-weight: 600; color: var(--navy); }
.quote figcaption span { color: var(--ink-faint); }

/* ==========================================================================
   Services
   ========================================================================== */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--s-5);
}

.service {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-7) var(--s-6) var(--s-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease), transform 240ms var(--ease);
}
/* Gold rule that draws across on hover */
.service::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 3px;
  width: 3.5rem;
  background: var(--gold);
  transition: width 380ms var(--ease);
}
.service:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.service:hover::before { width: 100%; }

.service-num {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold-ink);
}
.service h3 {
  font-size: var(--t-xl);
  margin-top: var(--s-2);
  color: var(--navy);
}
.service > p {
  margin-top: var(--s-3);
  font-size: var(--t-base);
  color: var(--ink-soft);
  line-height: 1.6;
}

.service h4 {
  margin-top: var(--s-5);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.tick-list {
  margin: var(--s-4) 0 var(--s-6);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-3);
}
.tick-list li {
  position: relative;
  padding-left: 1.65rem;
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--ink);
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.95rem;
  height: 0.55rem;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}
.on-dark .tick-list li { color: rgba(255, 255, 255, 0.86); }

.service .link { margin-top: auto; align-self: flex-start; }

.services-footer { margin-top: var(--s-7); text-align: center; }

/* ==========================================================================
   Work
   ========================================================================== */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--s-6);
}

.work-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease), transform 240ms var(--ease);
}
.work-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lg); transform: translateY(-3px); }

.work-shot {
  position: relative;
  aspect-ratio: 1146 / 660;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.work-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 700ms var(--ease);
}
.work-card:hover .work-shot img { transform: scale(1.03); }

.work-tag {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  padding: 0.3rem 0.6rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.94);
  border-radius: 3px;
  box-shadow: var(--shadow-sm);
}

.work-body { padding: var(--s-6); }
.work-body h3 { font-size: var(--t-lg); color: var(--navy); }
.work-body p { margin-top: var(--s-3); font-size: var(--t-base); color: var(--ink-soft); }

/* ==========================================================================
   Process
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none; /* the big gold numerals are the marker */
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.step {
  position: relative;
  padding: var(--s-7) var(--s-5) var(--s-6) 0;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  padding-left: var(--s-5);
}
.step:first-child { padding-left: 0; }
.step:last-child { border-right: 0; padding-right: 0; }

.step-num {
  display: block;
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.step h3 {
  margin-top: var(--s-4);
  font-size: var(--t-lg);
  color: var(--white);
}
.step p {
  margin-top: var(--s-3);
  font-size: var(--t-base);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

/* Tablet: 2x2. Four steps auto-fitting to three columns strands the last
   one under a full-width rule, which reads as a layout break.
   Bounded at both ends — an unbounded max-width here also matched the
   single-column phone layout and killed the rule under step 3. */
@media (min-width: 40.0625rem) and (max-width: 60rem) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
  .step {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding-left: 0;
    padding-right: 0;
  }
  /* Bottom row carries no rule */
  .step:nth-last-child(-n + 2) { border-bottom: 0; padding-bottom: 0; }
}

@media (max-width: 40rem) {
  .steps { grid-template-columns: 1fr; }
  .step {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding-left: 0;
    padding-right: 0;
    padding-bottom: var(--s-6);
  }
  .step:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* --- Dark section shell -------------------------------------------------- */
.on-dark {
  position: relative;
  background: var(--navy-deep);
  color: var(--white);
  isolation: isolate;
}
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--white); }

/* A whisper of film grain. Large flat fields of dark navy band badly on
   cheap panels and read as flat vector; this breaks it up just enough to
   feel like a printed surface. Inline SVG so there's no extra request. */
.on-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.055;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-6) var(--s-8);
  padding: clamp(2.5rem, 5vw, 4rem);
  background: var(--navy);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 22%, transparent 22%);
}
.cta-band h2 { font-size: var(--t-2xl); color: var(--white); }
.cta-band p { margin-top: var(--s-3); color: rgba(255, 255, 255, 0.74); max-width: 42ch; }

@media (max-width: 52rem) {
  .cta-band { grid-template-columns: 1fr; }
  .cta-band .btn { width: 100%; }
}

/* ==========================================================================
   About / two-column split
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 56rem) { .split { grid-template-columns: 1fr; } }

.split h2 { font-size: var(--t-3xl); margin-top: var(--s-4); }
.split .body-copy { margin-top: var(--s-5); }

.body-copy p { color: var(--ink-soft); }
.body-copy p + p { margin-top: var(--s-4); }
.on-dark .body-copy p { color: rgba(255, 255, 255, 0.74); }

/* Bordered claim list */
.claims { margin: 0; padding: 0; list-style: none; }
.claims li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-base);
  line-height: 1.55;
}
.claims li:first-child { border-top: 1px solid var(--line); }
.claims .idx {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 56rem) { .contact-grid { grid-template-columns: 1fr; } }

.contact-cards { display: grid; gap: var(--s-4); }

.contact-card {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
.contact-card:hover { border-color: var(--navy); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.contact-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
}
.contact-icon svg { width: 1.25rem; height: 1.25rem; }

.contact-card .label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.contact-card .value {
  display: block;
  margin-top: 2px;
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--navy);
  word-break: break-word;
}

.contact-note {
  padding: var(--s-5);
  background: var(--surface);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* --- Form --------------------------------------------------------------- */
.form {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
@media (max-width: 34rem) { .form-row { grid-template-columns: 1fr; } }

.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }

.field label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}
.field .req { color: var(--gold-ink); }
.field .hint { font-size: var(--t-xs); font-weight: 400; color: var(--ink-faint); }

.field input,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.875rem;
  font-size: 1rem; /* 16px — prevents iOS zoom on focus */
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }

.field input::placeholder,
.field textarea::placeholder { color: #9AA3B0; }

.field input:hover,
.field textarea:hover { border-color: #AEB7C2; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(10, 31, 68, 0.12);
}

.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea { border-color: #B4231F; }
.field[data-invalid="true"] input:focus,
.field[data-invalid="true"] textarea:focus { box-shadow: 0 0 0 3px rgba(180, 35, 31, 0.15); }

.error {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-sm);
  font-weight: 500;
  color: #B4231F;
}
.error::before { content: "!"; display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; background: #B4231F; color: #fff; font-size: 0.7rem; font-weight: 700; flex: none; }
.field[data-invalid="true"] .error { display: flex; }

/* Honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-foot { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.form-foot .fine { font-size: var(--t-xs); color: var(--ink-faint); line-height: 1.5; }

.btn[data-busy="true"] { pointer-events: none; opacity: 0.72; }
.spinner {
  width: 1rem; height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-status {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--radius);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.form-status:empty { display: none; }
.form-status[data-tone="ok"]   { background: #EAF4EE; border-left: 3px solid #1E7A46; color: #14532D; }
.form-status[data-tone="bad"]  { background: #FBEDEC; border-left: 3px solid #B4231F; color: #7F1D1D; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  padding-block: var(--s-9) var(--s-6);
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--t-sm);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--s-8) var(--s-6);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
/* Tablet: brand runs full width, then the two link columns pair up beneath.
   Left as a plain 3-to-2 reflow it strands "Company" beside a large void. */
@media (max-width: 56rem) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 34rem) { .footer-top { grid-template-columns: 1fr; } }

/* Uses logo-white.svg — a real reversed lockup with white ink and the gold
   word intact. Replaces the old brightness/invert filter, which flattened
   the gold to white along with everything else. */
.footer-brand img {
  height: 3.75rem;
  width: auto;
}
.footer-brand p { margin-top: var(--s-4); max-width: 34ch; line-height: 1.6; }

.footer-contact { margin-top: var(--s-5); display: grid; gap: var(--s-2); }
.footer-contact a {
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 168, 76, 0.5);
  justify-self: start;
  transition: border-color 160ms var(--ease);
}
.footer-contact a:hover { border-bottom-color: var(--gold); }

.footer-col h3 {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
}
.footer-col ul { margin: var(--s-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.footer-col a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 160ms var(--ease);
}
.footer-col a:hover { color: var(--gold); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-5);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.55);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: var(--gold); }

/* ==========================================================================
   Free audit — offer cards
   ========================================================================== */
.audit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr));
  gap: var(--s-5);
  align-items: start;
}

.audit-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--s-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease), transform 240ms var(--ease);
}
.audit-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lg); transform: translateY(-3px); }

.audit-card h3 { font-size: var(--t-lg); color: var(--navy); }

/* Price: struck-through original beside the free badge */
.audit-price {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.audit-price .was {
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  font-variant-numeric: tabular-nums;
}
.audit-price .now {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--navy);
  background: var(--gold);
  padding: 0.25rem 0.55rem;
  border-radius: 3px;
}

.audit-card .tick-list { margin-block: var(--s-5) var(--s-6); }
.audit-card .btn { margin-top: auto; }

/* ==========================================================================
   Step-by-step form ("one question at a time")
   ========================================================================== */
.quiz {
  max-width: 40rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.quiz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.quiz-head .count { font-variant-numeric: tabular-nums; }

.progress {
  height: 4px;
  margin-bottom: var(--s-7);
  background: var(--surface-alt);
  border-radius: 2px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0;
  background: var(--gold);
  border-radius: 2px;
  transition: width 420ms var(--ease);
}

/* Each question is a fieldset. Without JS they all show as a normal form. */
.qstep {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0; /* stops fieldset forcing min-content width */
}
.qstep + .qstep { margin-top: var(--s-8); }

/* JS takes over: only the active step is shown */
.quiz[data-enhanced="true"] .qstep { display: none; }
.quiz[data-enhanced="true"] .qstep[data-active="true"] {
  display: block;
  margin-top: 0;
  animation: qstep-in 340ms var(--ease) both;
}
@keyframes qstep-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .quiz[data-enhanced="true"] .qstep[data-active="true"] { animation: none; }
}

.qstep legend {
  padding: 0;
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.028em;
  color: var(--navy);
  text-wrap: balance;
}
.qstep .help {
  margin-top: var(--s-3);
  font-size: var(--t-base);
  color: var(--ink-soft);
  line-height: 1.55;
}
.qstep .field { margin-top: var(--s-6); margin-bottom: 0; }
.qstep .field + .field { margin-top: var(--s-4); }

/* Fields paired side by side must share a baseline — the stacking rule
   above otherwise pushes the second one 16px down. Spacing is handled by
   the row instead. */
.qstep .form-row { margin-top: var(--s-5); }
.qstep .form-row .field,
.qstep .form-row .field + .field { margin-top: 0; }
.qstep .social-fields .form-row { margin-top: 0; }

/* Larger inputs — this form has one question on screen at a time */
.qstep .field input { min-height: 3.5rem; font-size: var(--t-md); }

/* Social handles, revealed only for the social audit */
.social-fields {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px dashed var(--line-strong);
}
.social-fields .field { margin-bottom: 0; }

/* Without JS nothing can reveal these, so show them alongside everything
   else and let the labels explain when they apply. */
.quiz:not([data-enhanced="true"]) [data-social-fields] { display: block !important; }

/* The website label duplicates the legend when it's the only field on the
   step, so it starts hidden and becomes visible once the social handles
   appear next to it and it needs to be told apart. */
.q-website-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.qstep[data-mode="social"] .q-website-label {
  position: static;
  width: auto; height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* --- Choice cards (radio group) ----------------------------------------- */
.choice-list {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding: 0;
  border: 0;
  list-style: none;
}

.choice { position: relative; display: block; }
.choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choice .box {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.choice:hover .box { border-color: var(--navy); background: var(--surface); }

/* Radio dot */
.choice .dot {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.choice .label { font-weight: 600; color: var(--navy); line-height: 1.3; }
.choice .label small {
  display: block;
  margin-top: 2px;
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--ink-faint);
}
.choice .worth {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Three columns squeeze the label badly on a phone — drop the value
   underneath instead of beside it. */
@media (max-width: 34rem) {
  .choice .box {
    grid-template-columns: auto 1fr;
    row-gap: var(--s-2);
  }
  .choice .worth { grid-column: 2; }
}

.choice input:checked + .box {
  border-color: var(--navy);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--navy);
}
.choice input:checked + .box .dot {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 4px var(--navy);
}
.choice input:focus-visible + .box {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

/* --- Review step --------------------------------------------------------- */
.review-list {
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.review-list div {
  display: grid;
  grid-template-columns: 8.5rem 1fr auto;
  gap: var(--s-3) var(--s-4);
  align-items: baseline;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-base);
}
.review-list dt {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.review-list dd { margin: 0; color: var(--ink); word-break: break-word; }
.review-list .edit {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}
.review-list .edit:hover { color: var(--gold-ink); }

@media (max-width: 34rem) {
  .review-list div { grid-template-columns: 1fr auto; }
  .review-list dt { grid-column: 1 / -1; }
}

/* --- Step navigation ----------------------------------------------------- */
.qnav {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.qnav .spacer { margin-left: auto; }
.qnav [data-back] { visibility: hidden; }
.quiz[data-step="1"] [data-back],
.quiz:not([data-enhanced="true"]) [data-back] { visibility: hidden; }
.quiz[data-enhanced="true"]:not([data-step="1"]) [data-back] { visibility: visible; }

/* Without JS every question is shown at once as an ordinary form, so the
   stepper chrome is meaningless — hide it and leave just the submit button. */
.quiz:not([data-enhanced="true"]) [data-next],
.quiz:not([data-enhanced="true"]) .quiz-head,
.quiz:not([data-enhanced="true"]) .progress,
.quiz:not([data-enhanced="true"]) .qhint { display: none; }

/* Phones: stack full-width, primary action first. Back is display:none
   rather than hidden on step 1 — visibility keeps desktop's layout stable
   but here it would leave a dead 87px gap beside a floating Continue. */
@media (max-width: 34rem) {
  .qnav { display: grid; gap: var(--s-3); }
  .qnav .spacer { display: none; }
  .qnav .btn { width: 100%; }
  .qnav [data-next],
  .qnav [data-submit] { order: 1; }
  .qnav [data-back] { order: 2; }
  .quiz[data-step="1"] [data-back] { display: none; }
}

.qhint {
  margin-top: var(--s-4);
  font-size: var(--t-xs);
  color: var(--ink-faint);
}

/* No physical keyboard, no point promising one */
@media (hover: none) and (pointer: coarse) {
  .qhint { display: none; }
}
.qhint kbd {
  font: inherit;
  font-weight: 600;
  padding: 1px 5px;
  background: var(--surface-alt);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 3px;
}

/* --- Success panel ------------------------------------------------------- */
.quiz-done { display: none; text-align: center; padding-block: var(--s-5); }
.quiz[data-done="true"] .quiz-done { display: block; }
/* Needs [data-enhanced] too, otherwise the active-step rule above wins
   on specificity and the last question stays on screen. */
.quiz[data-enhanced="true"][data-done="true"] .qstep,
.quiz[data-done="true"] .qnav,
.quiz[data-done="true"] .progress,
.quiz[data-done="true"] .quiz-head,
.quiz[data-done="true"] .qhint { display: none; }

.quiz-done .mark {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--s-5);
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
}
.quiz-done .mark svg { width: 1.75rem; height: 1.75rem; }
.quiz-done h2 { font-size: var(--t-xl); color: var(--navy); }
.quiz-done p { margin-top: var(--s-4); color: var(--ink-soft); }

/* ==========================================================================
   Interior page header
   ========================================================================== */
.page-head {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 4vw, 3.5rem);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.page-head h1 {
  font-size: var(--t-3xl);
  margin-top: var(--s-4);
  color: var(--navy);
  max-width: 20ch;
}
.page-head .lede { margin-top: var(--s-5); max-width: 52ch; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--s-5);
  padding: 0;
  list-style: none;
  font-size: var(--t-xs);
  color: var(--ink-faint);
}
.crumbs a { text-decoration: none; color: var(--ink-faint); transition: color 150ms var(--ease); }
.crumbs a:hover { color: var(--navy); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--line-strong); }
.crumbs [aria-current="page"] { color: var(--navy); font-weight: 600; }

/* Long-form prose for interior pages */
.prose { max-width: 40rem; }
.prose > * + * { margin-top: var(--s-5); }
.prose h2 { font-size: var(--t-xl); color: var(--navy); margin-top: var(--s-8); }
/* Opening heading of a prose column, sitting under an eyebrow rather than
   after body copy — so it wants display size and no big top gap. */
.prose .prose-lead-h { font-size: var(--t-2xl); margin-top: var(--s-4); }
.prose h3 { font-size: var(--t-lg); color: var(--navy); margin-top: var(--s-7); }
.prose p { color: var(--ink-soft); }
.prose ul, .prose ol { padding-left: 1.25rem; color: var(--ink-soft); display: grid; gap: var(--s-3); }
.prose li::marker { color: var(--gold-ink); }
/* Underlines set below the baseline, thinned, and broken around descenders
   — the default sits too tight and slices through g/y/p.
   :not(.btn) matters: otherwise this navy wins over the button's white
   label and any button inside prose renders as a blank navy slab. */
/* Effective / last-updated line at the head of the legal pages */
.legal-dates {
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--ink-faint);
}
.legal-dates strong { color: var(--ink); font-weight: 600; }

.prose a:not(.btn) {
  color: var(--navy);
  font-weight: 600;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: auto;
  transition: text-decoration-color 160ms var(--ease), color 160ms var(--ease);
}
.prose a:not(.btn):hover { color: var(--gold-ink); text-decoration-color: var(--gold-ink); }

/* ==========================================================================
   Scroll reveal (progressive enhancement — JS adds .reveal)
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Founder bio
   ========================================================================== */
.bio {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-top: var(--s-5);
}
@media (max-width: 54rem) {
  .bio { grid-template-columns: 1fr; gap: var(--s-7); }
}

.bio-portrait {
  position: relative;
  margin: 0;
  max-width: 22rem;
}
/* Offset gold frame — gives the photo some weight without a drop shadow */
.bio-portrait::before {
  content: "";
  position: absolute;
  inset: 0.9rem -0.9rem -0.9rem 0.9rem;
  border: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  z-index: 0;
}
.bio-portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 44% 45%;
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
}
@media (max-width: 54rem) {
  .bio-portrait { max-width: 18rem; }
  .bio-portrait::before { inset: 0.7rem -0.7rem -0.7rem 0.7rem; }
}

.bio-intro h1 {
  font-size: var(--t-3xl);
  margin-top: var(--s-4);
  color: var(--navy);
}
.bio-intro .lede { margin-top: var(--s-4); max-width: 44ch; }

.bio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
@media (max-width: 34rem) { .bio-actions .btn { width: 100%; } }

/* Capped so the rules don't run wider than the lede sitting above them */
.bio-facts {
  margin: var(--s-7) 0 0;
  padding: 0;
  max-width: 34rem;
  border-top: 1px solid var(--line);
}
.bio-facts div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
.bio-facts dt {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.bio-facts dd { margin: 0; font-size: var(--t-base); color: var(--ink); word-break: break-word; }
.bio-facts a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  transition: color 160ms var(--ease);
}
.bio-facts a:hover { color: var(--gold-ink); }

@media (max-width: 30rem) {
  .bio-facts div { grid-template-columns: 1fr; gap: var(--s-1); }
}

/* Trait blocks in the bio sidebar */
.trait {
  padding: var(--s-5) 0 var(--s-5) var(--s-5);
  border-left: 2px solid var(--gold);
}
.trait + .trait { margin-top: var(--s-5); }
.trait h3 { font-size: var(--t-lg); color: var(--navy); }
.trait p { margin-top: var(--s-3); font-size: var(--t-base); color: var(--ink-soft); line-height: 1.6; }

/* ==========================================================================
   Callout — an editorial aside, deliberately not another rounded card
   ========================================================================== */
.callout {
  max-width: 52rem;
  padding: var(--s-6) 0;
  border-top: 2px solid var(--navy);
  border-bottom: 1px solid var(--line);
}
.callout h2 {
  font-size: var(--t-xl);
  color: var(--navy);
}
/* Scoped to the text column — a bare `.callout p` also catches the § mark
   and overrides its gold. */
.callout > div p {
  margin-top: var(--s-3);
  color: var(--ink-soft);
  max-width: 62ch;
}


/* ==========================================================================
   Cookie banner
   Non-modal by design: it doesn't trap focus or block the page, because a
   consent notice shouldn't hold the content hostage.
   ========================================================================== */
.cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.82);
  border-top: 2px solid var(--gold);
  box-shadow: 0 -8px 32px rgba(6, 21, 48, 0.28);
  padding-block: var(--s-5);
  /* Clear of the iOS home indicator */
  padding-bottom: max(var(--s-5), env(safe-area-inset-bottom));
}
.cookie[hidden] { display: none !important; }

.cookie.is-in {
  animation: cookie-up 340ms var(--ease) both;
}
@keyframes cookie-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie.is-in { animation: none; }
}

.cookie-inner {
  display: flex;
  align-items: center;
  gap: var(--s-5) var(--s-7);
}
.cookie-copy {
  font-size: var(--t-sm);
  line-height: 1.6;
  max-width: 62ch;
}
.cookie-copy strong { color: var(--white); font-weight: 600; }
.cookie-copy a {
  color: var(--white);
  font-weight: 600;
  text-decoration-color: var(--gold);
  text-underline-offset: 0.18em;
}
.cookie-copy a:hover { color: var(--gold); }

.cookie-actions {
  display: flex;
  gap: var(--s-3);
  margin-left: auto;
  flex: none;
}
.cookie-actions .btn { min-height: 2.75rem; padding-inline: 1.25rem; font-size: var(--t-sm); }
.cookie-actions .btn--ghost {
  --btn-fg: var(--white);
  border-color: rgba(255, 255, 255, 0.3);
}
.cookie-actions .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
}

/* A bottom banner covers content, so on phones it has to stay short. Keeping
   the buttons on one row and trimming the label holds it near 20% of a small
   screen instead of 38%, which was burying the hero's primary CTA. */
@media (max-width: 60rem) {
  .cookie-inner { flex-direction: column; align-items: stretch; gap: var(--s-4); }
  .cookie-actions { margin-left: 0; }
  .cookie-actions .btn { flex: 1; }
}
@media (max-width: 60rem) {
  .cookie { padding-block: var(--s-4); padding-bottom: max(var(--s-4), env(safe-area-inset-bottom)); }
  .cookie-copy { font-size: var(--t-xs); line-height: 1.55; }
}
@media (max-width: 30rem) {
  .cookie-more { display: none; }
}

/* Button styled as a footer link, for reopening cookie choices */
.linklike {
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.linklike:hover { color: var(--gold); }

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  :root { --navy: #000; --ink: #000; --ink-soft: #333; }

  .cookie,
  .site-header, .site-footer, .nav, .nav-toggle, .skip-link,
  .hero-actions, .cta-band, .qnav, .progress, .quiz-head, .qhint,
  .services-footer, .form, .quiz { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.45; }
  .section { padding-block: 1.25rem; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .on-dark { background: #fff !important; color: #000 !important; }
  .on-dark::before { display: none; }
  .on-dark h2, .on-dark h3, .on-dark p, .on-dark .lede { color: #000 !important; }

  .quote, .service, .work-card, .audit-card, .contact-card {
    border: 1px solid #999;
    box-shadow: none;
    break-inside: avoid;
  }
  h1, h2, h3 { break-after: avoid; }

  /* Spell out link targets, since a printed page can't be clicked */
  .prose a[href^="http"]::after,
  .prose a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
}

/* ==========================================================================
   404
   ========================================================================== */
.notfound { text-align: center; }
.notfound h1 { font-size: var(--t-3xl); margin-top: var(--s-4); color: var(--navy); }
.notfound .lede { margin: var(--s-5) auto 0; }

/* Centred row of buttons; stacks rather than wrapping into an orphan */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-7);
}
@media (max-width: 34rem) {
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
}

/* Utilities */
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-10 { margin-top: var(--s-10); }

/* Small uppercase heading used above sidebars and claim lists */
.mini-head {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-4);
}

/* Sidebar column on interior pages sticks alongside long prose */
.split > aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
@media (max-width: 56rem) { .split > aside { position: static; } }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.center { text-align: center; }