/* ============================================================
   The Warranty Chick: core stylesheet
   Dark luxe: black grounds, gold hairlines, cream type.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Grounds */
  --ink:        #08080A;
  --ink-2:      #101014;
  --ink-3:      #17171C;
  --ink-4:      #1F1F26;

  /* Brand */
  --gold:       #C9A227;
  --gold-lift:  #E8C766;
  --gold-deep:  #8C6F14;
  --gold-wash:  rgba(201, 162, 39, 0.10);
  --gold-line:  rgba(201, 162, 39, 0.26);

  /* Magenta: the second brand accent. Used for eyebrows, the script
     flourishes, the hero underline and the content-universe icons. */
  --rose:       #E8467C;
  --rose-lift:  #F589B0;
  --rose-wash:  rgba(232, 70, 124, 0.10);
  --rose-line:  rgba(232, 70, 124, 0.30);
  /* Deeper magenta for filled controls: white text on --rose is only
     3.75:1, which fails AA at button sizes. This clears it at 5.9:1. */
  --rose-deep:  #C2185B;

  /* Light band (media logos) */
  --paper:      #F5F0E6;
  --paper-ink:  #14120F;

  /* Type */
  --cream:      #F4EEE4;
  --cream-dim:  #B4ACA0;
  --cream-mute: #837C72;

  /* Utility */
  --danger:     #E86B6B;
  --success:    #7FBF8A;
  --radius:     14px;
  --radius-sm:  9px;
  --shadow:     0 24px 60px -24px rgba(0, 0, 0, 0.9);
  --shadow-gold:0 20px 50px -22px rgba(201, 162, 39, 0.45);

  /* Rhythm */
  --pad:        clamp(1.25rem, 5vw, 2rem);
  --section-y:  clamp(4.5rem, 10vw, 8rem);
  --maxw:       1180px;

  /* Fonts
     Sans display, not serif. A serif display here would be the default
     "creative brief = serif" reach, and the brand reads as a modern
     grotesque. Script is reserved for the logo-echo flourishes only. */
  --display: "Outfit", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sans:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --script:  "Parisienne", "Brush Script MT", cursive;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-lift); text-decoration: none; }
a:hover { color: var(--gold); }
button { font: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.12; margin: 0 0 .6em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.35rem, 6vw, 4.15rem); }
h2 { font-size: clamp(1.85rem, 4.2vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
p  { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .45em; }
hr { border: 0; border-top: 1px solid var(--gold-line); margin: 2.5rem 0; }

::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold-lift); outline-offset: 3px; border-radius: 4px; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.wrap--narrow { max-width: 780px; }
.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--ink-2); }
.section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }
.center { text-align: center; }
.stack > * + * { margin-top: 1.15rem; }

.grid { display: grid; gap: clamp(1.1rem, 2.5vw, 1.85rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

/* ---------- Eyebrow / rule ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--sans);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 1.15rem;
}
.eyebrow::before {
  content: ""; width: 32px; height: 1px; background: var(--gold); opacity: .8;
}
.center .eyebrow::after {
  content: ""; width: 32px; height: 1px; background: var(--gold); opacity: .8;
}
.lede { font-size: clamp(1.05rem, 1.7vw, 1.2rem); color: var(--cream-dim); max-width: 62ch; }
.center .lede { margin-inline: auto; }
.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); border: 0; margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.7rem;
  font-family: var(--sans); font-weight: 700; font-size: .95rem;
  letter-spacing: .04em; text-transform: uppercase;
  border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:active { transform: translateY(1px); }
/* Gradient stops stay light enough that the dark label clears WCAG AA
   across the whole button face, not just its centre. */
.btn--gold {
  background: linear-gradient(140deg, var(--gold-lift), var(--gold) 70%, #B08D1E);
  color: #16120A; box-shadow: var(--shadow-gold);
}
.btn--gold:hover { color: #16120A; transform: translateY(-2px); box-shadow: 0 26px 55px -20px rgba(201,162,39,.6); }
.btn--ghost { border-color: var(--gold-line); color: var(--cream); background: transparent; }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-lift); background: var(--gold-wash); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; }
.center .btn-row { justify-content: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(8, 8, 10, 0.72);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease;
}
.site-header.is-stuck { background: rgba(8,8,10,.95); border-bottom-color: var(--gold-line); }
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 80px;
}
/* The real logo is a stacked lockup (badge + wordmark + tagline), not a bare
   mark, so it needs more height than a simple icon to stay legible. 66px is
   the most that fits inside the 80px nav cap. */
.nav__logo { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.nav__logo img { height: 66px; width: auto; }
@media (max-width: 640px) { .nav__logo img { height: 54px; } }
/* Eight items have to fit inside .wrap's content box, which caps at
   1180px - (2 x 2rem padding) = 1116px and never grows past it. Minus the logo
   (67px), the CTA (204px) and the nav's own 1.5rem flex gaps, the link row gets
   roughly 797px. At the old 1.85rem gap and .92rem type the eight labels needed
   about 860px, so the row overflowed at every viewport width. These two values
   bring it to roughly 765px, which leaves real slack instead of a hairline. */
.nav__links { display: flex; align-items: center; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  color: var(--cream); font-size: .88rem; font-weight: 500; letter-spacing: .01em;
  position: relative; padding-block: .35rem;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--gold); transition: right .25s ease;
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--gold-lift); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { right: 0; }
.nav__cta { display: flex; align-items: center; gap: .9rem; flex-shrink: 0; }
.nav__phone { color: var(--cream); font-weight: 600; font-size: .92rem; white-space: nowrap; }
.nav__phone:hover { color: var(--gold-lift); }
.nav__links > li { margin: 0; }
.nav__links a { white-space: nowrap; }
.nav__mobile-cta { display: none; }   /* shown only inside the mobile drawer */

.nav__toggle {
  display: none; background: none; border: 1px solid var(--gold-line);
  border-radius: 8px; padding: .55rem .6rem; cursor: pointer;
}
.nav__toggle span { display: block; width: 20px; height: 2px; background: var(--cream); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav__toggle span + span { margin-top: 5px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Collapse to the drawer below 1180px, which is exactly --maxw. Above it the
   wrap is capped at its full width so the link row always has the same 1116px
   to work with and a consistent ~32px of slack. Below it the wrap tracks the
   viewport and the row would overflow, so the drawer takes over there. */
@media (max-width: 1180px) {
  .nav__toggle { display: block; }
  .nav__phone { display: none; }
  .nav__cta > .btn { display: none; }
  .nav__mobile-cta { display: block; }
  .nav__links {
    position: fixed; inset: 76px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink-2); border-bottom: 1px solid var(--gold-line);
    padding: .5rem var(--pad) 1.75rem;
    transform: translateY(-140%); transition: transform .3s cubic-bezier(.4,0,.2,1);
    max-height: calc(100dvh - 76px); overflow-y: auto;
  }
  .nav__links.is-open { transform: translateY(0); }
  .nav__links li { border-bottom: 1px solid rgba(201,162,39,.12); }
  .nav__links a { display: block; padding: 1rem 0; font-size: 1.05rem; }
  .nav__links a::after { display: none; }
  .nav__links .nav__mobile-cta { border-bottom: 0; padding-top: 1.35rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(4rem, 11vw, 8.5rem) clamp(4rem, 9vw, 7rem);
  background:
    radial-gradient(120% 85% at 82% 12%, rgba(201,162,39,.20), transparent 58%),
    radial-gradient(90% 70% at 8% 92%, rgba(201,162,39,.09), transparent 60%),
    linear-gradient(180deg, #0B0B0E, #08080A 70%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(201,162,39,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,39,.05) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 78%);
}
.hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }
.hero h1 { margin-bottom: .5em; }
.hero h1 em { font-style: normal; color: var(--gold-lift); }
.hero__sub { font-size: clamp(1.06rem, 1.9vw, 1.25rem); color: var(--cream-dim); max-width: 54ch; }
.hero__trust {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; list-style: none; margin: 2.25rem 0 0; padding: 0;
  font-size: .88rem; color: var(--cream-dim);
}
.hero__trust li { display: flex; align-items: center; gap: .55rem; margin: 0; }
.hero__trust svg { flex-shrink: 0; color: var(--gold); }

/* Hero image / logo panel */
.hero__panel {
  position: relative; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--gold-line);
  background: linear-gradient(160deg, rgba(201,162,39,.14), rgba(8,8,10,.4) 45%), var(--ink-2);
  box-shadow: var(--shadow);
  padding: clamp(2rem, 4vw, 3rem);
  display: grid; place-items: center; gap: 1.5rem; text-align: center;
  min-height: 340px;
}
.hero__panel img.hero__logo { width: min(340px, 82%); }
.hero__panel-tag {
  font-family: var(--sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 5vw, 3.75rem);
  background:
    radial-gradient(100% 90% at 78% 0%, rgba(201,162,39,.16), transparent 60%),
    linear-gradient(180deg, #0B0B0E, var(--ink));
  border-bottom: 1px solid rgba(201,162,39,.14);
}
.page-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); max-width: 18ch; }
.page-hero .lede { margin-top: -.3rem; }
.page-hero.center h1, .page-hero.center .lede { margin-inline: auto; }

/* Breadcrumb */
.crumbs { font-size: .82rem; color: var(--cream-mute); margin-bottom: 1.35rem; letter-spacing: .03em; }
.crumbs a { color: var(--cream-dim); }
.crumbs a:hover { color: var(--gold-lift); }
.crumbs span { opacity: .5; margin-inline: .5rem; }

/* ---------- Trust strip ---------- */
.strip { background: var(--ink-2); border-block: 1px solid rgba(201,162,39,.16); }
.strip__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: rgba(201,162,39,.16); }
.strip__item { background: var(--ink-2); padding: clamp(1.6rem, 3vw, 2.35rem) 1.5rem; text-align: center; }
.strip__num { font-family: var(--display); font-size: clamp(1.7rem, 3.4vw, 2.35rem); color: var(--gold-lift); line-height: 1; margin-bottom: .45rem; }
.strip__label { font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; color: var(--cream-dim); }

/* ---------- Cards ---------- */
.card {
  background: var(--ink-3); border: 1px solid rgba(201,162,39,.16);
  border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.1rem);
  position: relative; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); border-color: var(--gold-line); box-shadow: var(--shadow); }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--cream-dim); }
.card > :last-child { margin-bottom: 0; }
.card__icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--gold-wash); border: 1px solid var(--gold-line); color: var(--gold-lift);
  margin-bottom: 1.15rem;
}
.card__step {
  font-family: var(--display); font-size: 2.4rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--gold); margin-bottom: .85rem;
}

/* Plan cards */
.plan { padding-top: clamp(1.9rem, 3.4vw, 2.4rem); }
.plan--featured { border-color: var(--gold); background: linear-gradient(170deg, rgba(201,162,39,.10), var(--ink-3) 42%); }
.plan__flag {
  position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%);
  background: linear-gradient(140deg, var(--gold-lift), var(--gold));
  color: #16120A; font-size: .68rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; padding: .35rem 1rem; border-radius: 999px; white-space: nowrap;
}
.plan__name { font-family: var(--display); font-size: 1.55rem; margin-bottom: .25rem; }
.plan__for { font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.3rem; }
.plan__list { list-style: none; padding: 0; margin: 0 0 1.75rem; font-size: .96rem; }
.plan__list li { display: flex; gap: .7rem; align-items: flex-start; color: var(--cream-dim); margin-bottom: .7rem; }
.plan__list svg { flex-shrink: 0; margin-top: .28rem; color: var(--gold); }
.plan__list li.is-off { color: var(--cream-mute); }
.plan__list li.is-off svg { color: var(--cream-mute); opacity: .55; }
.plan .btn { margin-top: auto; }

/* Feature list w/ checks */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.checks li { display: flex; gap: .8rem; align-items: flex-start; color: var(--cream-dim); margin: 0; }
.checks svg { flex-shrink: 0; margin-top: .3rem; color: var(--gold); }
.checks strong { color: var(--cream); font-weight: 600; }
.checks--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .85rem 2rem; }

/* ---------- Split feature ---------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--flip .split__media { order: 2; } }
.split__media {
  border-radius: 18px; border: 1px solid var(--gold-line); overflow: hidden;
  background: linear-gradient(155deg, rgba(201,162,39,.13), var(--ink-3));
  min-height: 300px; display: grid; place-items: center; padding: 2rem; text-align: center;
  box-shadow: var(--shadow);
}
.split__media img { border-radius: 12px; }
.split__media .placeholder-note { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }

/* ---------- Quote / testimonials ---------- */
.quote {
  background: var(--ink-3); border: 1px solid rgba(201,162,39,.16);
  border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.1rem);
  display: flex; flex-direction: column;
}
.quote__stars { color: var(--gold); letter-spacing: .18em; font-size: .95rem; margin-bottom: 1rem; }
.quote blockquote { margin: 0 0 1.35rem; font-family: var(--display); font-size: 1.12rem; line-height: 1.5; color: var(--cream); }
.quote figcaption { margin-top: auto; font-size: .85rem; color: var(--cream-mute); letter-spacing: .04em; }

/* ---------- Accordion (FAQ) ---------- */
.faq { border-top: 1px solid rgba(201,162,39,.18); }
.faq__item { border-bottom: 1px solid rgba(201,162,39,.18); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.4rem 0; text-align: left;
  color: var(--cream); font-family: var(--display); font-size: clamp(1.05rem, 1.9vw, 1.22rem); font-weight: 700;
  transition: color .2s ease;
}
.faq__q:hover { color: var(--gold-lift); }
.faq__icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--gold-line); display: grid; place-items: center; color: var(--gold); margin-top: .2rem; transition: transform .3s ease, background .2s ease; }
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(45deg); background: var(--gold-wash); }
/* Height is driven by JS so the transition works with content of any length.
   Starts collapsed; main.js measures the inner wrapper and animates to it. */
.faq__a { height: 0; overflow: hidden; transition: height .32s cubic-bezier(.4,0,.2,1); }
.faq__a p { color: var(--cream-dim); padding-bottom: 1.4rem; margin: 0; max-width: 72ch; }
.faq__a p + p { padding-top: .9rem; }

/* ---------- Comparison table ---------- */
.table-scroll { overflow-x: auto; border: 1px solid rgba(201,162,39,.18); border-radius: var(--radius); background: var(--ink-3); }
table.compare { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .95rem; }
table.compare th, table.compare td { padding: 1rem 1.15rem; text-align: left; border-bottom: 1px solid rgba(201,162,39,.13); }
table.compare thead th {
  font-family: var(--sans); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); background: rgba(201,162,39,.07); white-space: nowrap;
}
table.compare tbody th { font-weight: 600; color: var(--cream); }
table.compare td { color: var(--cream-dim); text-align: center; }
table.compare td:first-child { text-align: left; }
table.compare tbody tr:last-child th, table.compare tbody tr:last-child td { border-bottom: 0; }
table.compare .yes { color: var(--gold-lift); font-weight: 700; }
table.compare .no  { color: var(--cream-mute); }

/* ---------- Lead form ---------- */
.lead-form {
  background: var(--ink-3); border: 1px solid var(--gold-line);
  border-radius: 18px; padding: clamp(1.6rem, 3.5vw, 2.5rem);
  box-shadow: var(--shadow);
}
.lead-form h3 { margin-bottom: .35rem; }
.lead-form__note { font-size: .9rem; color: var(--cream-dim); margin-bottom: 1.6rem; }
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-dim); margin-bottom: .5rem; }
.field label .req { color: var(--gold); }
.field input, .field select, .field textarea {
  width: 100%; padding: .9rem 1rem;
  background: var(--ink); color: var(--cream);
  border: 1px solid rgba(201,162,39,.22); border-radius: var(--radius-sm);
  font: inherit; font-size: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field textarea { min-height: 120px; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23C9A227' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.75rem;
}
.field input::placeholder, .field textarea::placeholder { color: var(--cream-mute); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,39,.16);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--danger); }
.field__error { display: none; font-size: .82rem; color: var(--danger); margin-top: .45rem; }
.field.has-error .field__error { display: block; }
.field-row { display: grid; gap: 0 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.consent { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1.4rem; }
.consent input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: .28rem; flex-shrink: 0;
  accent-color: var(--gold); cursor: pointer;
}
.consent label { font-size: .8rem; line-height: 1.55; color: var(--cream-mute); text-transform: none; letter-spacing: 0; font-weight: 400; margin: 0; }
.consent a { color: var(--cream-dim); text-decoration: underline; }

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

.form-status { display: none; margin-top: 1.15rem; padding: .9rem 1.1rem; border-radius: var(--radius-sm); font-size: .92rem; }
.form-status.is-visible { display: block; }
.form-status.is-error { background: rgba(232,107,107,.1); border: 1px solid rgba(232,107,107,.35); color: #F3B3B3; }
.form-status.is-success { background: rgba(127,191,138,.1); border: 1px solid rgba(127,191,138,.35); color: #B6DCBD; }
.btn[data-loading="true"] { opacity: .65; pointer-events: none; }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    radial-gradient(85% 130% at 50% 0%, rgba(201,162,39,.20), transparent 62%),
    var(--ink-2);
  border-block: 1px solid var(--gold-line);
}
.cta-band .split { align-items: start; }

/* ---------- Blog ---------- */
.post-card { overflow: hidden; padding: 0; }
.post-card__thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(150deg, rgba(201,162,39,.24), rgba(8,8,10,.55) 60%), var(--ink-4);
  display: grid; place-items: center; padding: 1.5rem; text-align: center;
  border-bottom: 1px solid rgba(201,162,39,.16);
}
.post-card__thumb span { font-family: var(--display); font-size: 1.05rem; color: rgba(244,238,228,.55); }
.post-card__body { padding: clamp(1.35rem, 2.6vw, 1.85rem); display: flex; flex-direction: column; flex: 1; }
.post-card__meta { font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); margin-bottom: .8rem; }
.post-card h3 { font-size: 1.28rem; margin-bottom: .55rem; }
.post-card h3 a { color: var(--cream); }
.post-card h3 a:hover { color: var(--gold-lift); }
.post-card p { font-size: .95rem; }
.post-card__more { margin-top: auto; font-size: .84rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); }

/* Article body */
.article { max-width: 720px; margin-inline: auto; }
.article__meta { font-size: .8rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.25rem; }
.article h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 2.6rem; }
.article h3 { font-size: 1.22rem; margin-top: 2rem; }
.article p, .article li { color: var(--cream-dim); font-size: 1.06rem; }
.article strong { color: var(--cream); }
.article blockquote {
  margin: 2rem 0; padding: 1.25rem 1.6rem;
  border-left: 2px solid var(--gold); background: var(--ink-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--display); font-size: 1.15rem; color: var(--cream);
}
.article blockquote p:last-child { margin-bottom: 0; }
.article__cta {
  margin-top: 3rem; padding: 1.75rem; border: 1px solid var(--gold-line);
  border-radius: var(--radius); background: linear-gradient(160deg, rgba(201,162,39,.10), var(--ink-3));
}
.article__cta h3 { margin-top: 0; }

/* ---------- Footer ---------- */
.site-footer { background: #060608; border-top: 1px solid var(--gold-line); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footer__brand img { height: 74px; margin-bottom: 1.15rem; }
.footer__brand p { font-size: .92rem; color: var(--cream-mute); max-width: 34ch; }
.footer h4 { font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; }
.footer__list { list-style: none; padding: 0; margin: 0; }
.footer__list li { margin-bottom: .65rem; }
.footer__list a { color: var(--cream-dim); font-size: .93rem; }
.footer__list a:hover { color: var(--gold-lift); }
.socials { display: flex; gap: .7rem; margin-top: 1.2rem; }
.socials a {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--gold-line); color: var(--cream-dim); transition: all .2s ease;
}
.socials a:hover { border-color: var(--gold); color: var(--gold-lift); background: var(--gold-wash); }
.footer__bottom {
  margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid rgba(201,162,39,.14);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center;
  font-size: .82rem; color: var(--cream-mute);
}
.footer__legal { max-width: 100%; font-size: .78rem; line-height: 1.6; color: #6C665E; margin-top: 1.5rem; }

/* ---------- Notice banner (legal / review-required callouts) ---------- */
.notice {
  border: 1px solid rgba(232,107,107,.4); background: rgba(232,107,107,.07);
  border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 2.5rem;
}
.notice p { color: #F0C3C3; margin: 0; font-size: .93rem; }
.notice strong { color: #F8DADA; }

/* ---------- Legal document body ---------- */
.legal h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-top: 2.75rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { color: var(--cream-dim); font-size: 1rem; }
.legal strong { color: var(--cream); }

/* ---------- Reveal on scroll ----------
   Scoped to .js (set by an inline script in <head>) so that if JavaScript
   fails to load, the content is simply visible instead of stuck at
   opacity: 0 forever. Never unscope these selectors. */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } }

/* ---------- Utility ---------- */
.skip-link {
  position: absolute; left: 50%; transform: translate(-50%, -140%);
  background: var(--gold); color: #16120A; padding: .7rem 1.25rem; border-radius: 0 0 10px 10px;
  font-weight: 700; z-index: 100; transition: transform .2s ease;
}
.skip-link:focus { transform: translate(-50%, 0); color: #16120A; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.muted { color: var(--cream-mute); }
.small { font-size: .88rem; }

/* ============================================================
   PERSONAL-BRAND HOME PAGE
   Components for the brand landing: hero, content universe,
   about row, companies, numbers, media band, build section.
   ============================================================ */

/* ---------- Shared accents ---------- */
.script { font-family: var(--script); font-weight: 400; letter-spacing: 0; }
.eyebrow--rose { color: var(--rose); }
.eyebrow--rose::before, .center .eyebrow--rose::after { background: var(--rose); }
.txt-gold { color: var(--gold-lift); }
.txt-rose { color: var(--rose); }

/* Small centered section label. Marked up as a heading, not an eyebrow:
   these bands carry no separate headline, so the label IS the heading. */
.band-label {
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--rose);
  text-align: center; margin: 0 0 2.5rem;
}
.band-label--gold { color: var(--gold); }

/* Photo slot: shown until a real asset is dropped in. */
.photo-slot {
  position: relative; overflow: hidden; border-radius: 16px;
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(232,70,124,.14), transparent 60%),
    linear-gradient(155deg, rgba(201,162,39,.12), var(--ink-3));
  border: 1px dashed var(--rose-line);
  display: grid; place-items: center; text-align: center;
  padding: 2rem; min-height: 260px;
}
.photo-slot__label {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--rose-lift); max-width: 26ch; line-height: 1.7;
}
.photo-slot__label code {
  display: block; margin-top: .6rem; font-size: .74rem;
  letter-spacing: .02em; text-transform: none; color: var(--cream-dim);
}

/* Once the real file exists the slot drops its dashed frame and the photo
   takes over. main.js removes this class again if the file is missing, so
   the labelled placeholder comes back rather than a broken-image icon. */
.photo-slot--filled { border: 0; padding: 0; background: none; }
.photo-slot--filled .photo-slot__label { display: none; }
.photo-slot--filled img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
}

/* ---------- Extra button variants ---------- */
.btn--rose { border: 1px solid var(--rose); color: var(--rose-lift); background: transparent; }
.btn--rose:hover { background: var(--rose-wash); color: #fff; border-color: var(--rose-lift); }
.btn--line { border: 1px solid rgba(244,238,228,.34); color: var(--cream); background: transparent; }
.btn--line:hover { border-color: var(--cream); color: #fff; background: rgba(244,238,228,.07); }

/* ============================================================
   HERO
   ============================================================ */
.brand-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(90% 70% at 20% 20%, rgba(232,70,124,.10), transparent 60%),
    linear-gradient(180deg, #0B0B0E, var(--ink) 75%);
}
/* Height drives the crop. A taller row scales the landscape photo up more
   and cuts more off its sides, so the height tracks viewport WIDTH rather
   than height: as the column narrows the row shortens to match, and the
   subject stays inside the frame at every breakpoint. */
.brand-hero__grid {
  display: grid; grid-template-columns: 1fr; align-items: end;
  min-height: clamp(430px, 46vw, 700px);
}
@media (min-width: 900px) {
  .brand-hero__grid { grid-template-columns: 1.15fr .85fr; align-items: center; }
}
/* The copy column's height sets the row height, which in turn sets how much
   of the landscape photo gets cropped. Keeping this tight keeps her in frame
   and keeps the hero inside the viewport. */
.brand-hero__copy { padding-block: clamp(2.5rem, 4.5vw, 4.5rem); position: relative; z-index: 2; }

/* Scale is capped so "you covered." holds one line inside the copy column.
   Going larger pushes it to a third line, which is a font-size error. */
.brand-hero h1 {
  font-size: clamp(2.7rem, 7.4vw, 5.2rem);
  font-weight: 800; line-height: .95; letter-spacing: -0.025em;
  text-transform: uppercase; margin-bottom: .3em;
}
.brand-hero h1 .line-2 { display: block; }

/* Hand-drawn underline beneath the headline. */
.hero-rule { display: block; width: min(340px, 78%); margin: -.2em 0 1.6rem; color: var(--rose); }
.hero-rule svg { width: 100%; height: auto; overflow: visible; }

.brand-hero__sub { font-size: clamp(1rem, 1.5vw, 1.1rem); color: var(--cream-dim); max-width: 46ch; }
.brand-hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.1rem; }

/* Portrait column bleeds to the bottom of the section on desktop. */
.brand-hero__portrait { position: relative; align-self: end; min-height: 340px; }
/* Measured from the source: she occupies 1.4% to 70.1% of the image width,
   with the car filling the rest. The column is portrait and the photo is
   landscape, so cover always crops horizontally. Anchoring at 0% means the
   crop eats into the car on the right and never into her arm on the left. */
.brand-hero__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 0% center; }

/* Dissolve the photo into the page instead of ending it on a hard vertical
   seam. Measured luminance down the left edge runs [2,26,144,104,39,4,27,
   104,4,2] against a background of ~8, so the dark bands already blend and
   only the hair, shoulder and blazer bands clash. A mask is used rather than
   a coloured scrim because the hero background carries a rose glow here, and
   only real transparency picks that up. Most of the falloff happens in the
   first 5% so very little of her is lost. */
.brand-hero__portrait img {
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, rgba(0,0,0,.30) 2.5%, rgba(0,0,0,.75) 6%, #000 12%);
          mask-image: linear-gradient(to right,
    transparent 0%, rgba(0,0,0,.30) 2.5%, rgba(0,0,0,.75) 6%, #000 12%);
}
/* Soften the bottom edge into the section below it. */
.brand-hero__portrait::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 12%;
  background: linear-gradient(to bottom, transparent, var(--ink));
  pointer-events: none;
}
@media (max-width: 899px) {
  /* Stacked layout: the seam is horizontal, so fade the top instead. */
  .brand-hero__portrait img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 14%);
  }
}
.brand-hero__portrait .photo-slot { min-height: 420px; height: 100%; border-radius: 18px; }
@media (min-width: 900px) {
  /* Stretch rather than sit at the baseline, so the photo fills the hero
     column edge to edge instead of floating at its intrinsic height. */
  .brand-hero__portrait { min-height: clamp(430px, 46vw, 700px); align-self: stretch; height: 100%; }

  /* Bleed the photo to the viewport's right edge. The source is landscape
     inside a portrait column, so every extra pixel of width is one less
     pixel cropped off her. Uses max() rather than a percentage margin,
     which resolves inconsistently on grid items. */
  .brand-hero > .wrap { padding-right: 0; }
  .brand-hero__portrait { margin-right: calc(-1 * max(0px, (100vw - var(--maxw)) / 2)); }
}

/* ============================================================
   CONTENT UNIVERSE
   ============================================================ */
.universe__head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.universe__head h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.5rem); font-weight: 600;
  text-transform: uppercase; letter-spacing: .01em; margin-bottom: .3rem;
}
.universe__head p { color: var(--cream-dim); font-size: .98rem; margin: 0; }

.universe {
  display: grid; gap: 0;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid rgba(232,70,124,.18);
  border-left: 1px solid rgba(232,70,124,.18);
}
@media (min-width: 620px)  { .universe { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .universe { grid-template-columns: repeat(8, 1fr); } }

.universe__cell {
  border-right: 1px solid rgba(232,70,124,.18);
  border-bottom: 1px solid rgba(232,70,124,.18);
  padding: clamp(1.4rem, 2.4vw, 1.9rem) clamp(.9rem, 1.4vw, 1.15rem);
  text-align: center; display: flex; flex-direction: column; align-items: center;
  transition: background .25s ease;
}
.universe__cell:hover { background: rgba(232,70,124,.05); }
.universe__icon { color: var(--rose); margin-bottom: 1rem; }
.universe__cell h3 {
  font-family: var(--sans); font-size: .74rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.4;
  color: var(--cream); margin-bottom: .6rem;
}
.universe__cell p { font-size: .78rem; line-height: 1.6; color: var(--cream-mute); margin: 0; }

/* ============================================================
   ABOUT + FEATURED VIDEO
   ============================================================ */
.about-row { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 760px)  { .about-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .about-row { grid-template-columns: .82fr 1fr 1.15fr; } }

.about-row__media { border-radius: 16px; overflow: hidden; min-height: 300px; }
.about-row__media img { width: 100%; height: 100%; object-fit: cover; }

/* Cutout variant: no frame, and `contain` so the whole figure shows instead
   of being cropped. Anchored bottom so she stands on the section baseline.
   The source is cut off mid-thigh at the frame edge, so the bottom fades out
   rather than ending on a hard horizontal line. No drop shadow: a dark
   shadow under a figure that dissolves into a dark background earns nothing
   and fights the fade. */
.about-row__media--cutout { border-radius: 0; overflow: visible; }
.about-row__media--cutout .photo-slot { border: 0; padding: 0; background: none; }
.about-row__media--cutout img {
  object-fit: contain;
  object-position: center bottom;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 68%, rgba(0,0,0,.55) 86%, transparent 100%);
          mask-image: linear-gradient(to bottom,
    #000 68%, rgba(0,0,0,.55) 86%, transparent 100%);
}

.about-copy h2 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); font-weight: 600; margin-bottom: 1.1rem; }
.about-copy h2 .script { font-size: 1.15em; color: var(--gold-lift); }
.about-copy p { font-size: .94rem; color: var(--cream-dim); }

/* Video card */
.video-card {
  border: 1px solid var(--gold-line); border-radius: 16px; overflow: hidden;
  background: var(--ink-3); display: flex; flex-direction: column;
}
.video-card__frame {
  position: relative; aspect-ratio: 16 / 9;
  background:
    radial-gradient(80% 80% at 25% 50%, rgba(232,70,124,.18), transparent 60%),
    linear-gradient(120deg, var(--ink-4), #000);
  display: grid; place-items: center; overflow: hidden;
}
.video-card__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-card__title {
  position: relative; z-index: 2; text-align: center; padding: 1rem;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.2rem, 2.4vw, 1.9rem); line-height: 1.05; color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.85);
}
.video-card__kicker {
  display: inline-block; margin-top: .75rem; padding: .3rem .8rem;
  background: var(--rose-deep); color: #fff; border-radius: 4px;
  font-family: var(--sans); font-size: .62rem; font-weight: 800; letter-spacing: .12em;
}
.video-card__play {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255,255,255,.94); color: #111; display: grid; place-items: center;
  box-shadow: 0 12px 40px rgba(0,0,0,.5); transition: transform .2s ease, background .2s ease;
}
.video-card__play:hover { transform: translate(-50%,-50%) scale(1.07); background: #fff; color: #111; }
.video-card__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; padding: 1rem 1.25rem; font-size: .84rem; color: var(--cream-dim);
}
.video-card__foot a { display: inline-flex; align-items: center; gap: .45rem; color: var(--rose-lift); font-weight: 600; }
.video-card__foot a:hover { color: #fff; }

/* ============================================================
   COMPANIES BUILT
   ============================================================ */
.companies { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); grid-template-columns: 1fr; }
.companies__divider { display: none; }
@media (min-width: 840px) {
  .companies { grid-template-columns: 1fr 1px 1fr; }
  .companies__divider { display: block; background: linear-gradient(180deg, transparent, var(--gold-line), transparent); }
}
.company__mark { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.15rem; min-height: 54px; }
.company__mark img { max-height: 54px; width: auto; }
.company p { font-size: .92rem; color: var(--cream-dim); max-width: 48ch; }

/* Text wordmark fallback, used until real logo files are supplied. */
.wordmark { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.wordmark__badge { font-family: var(--display); font-weight: 800; font-size: 1.45rem; letter-spacing: .02em; color: var(--gold-lift); }
.wordmark__name { font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cream); }
.wordmark__sub { font-family: var(--sans); font-size: .66rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--cream-mute); }

/* ============================================================
   THE NUMBERS
   ============================================================ */
.numbers {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: rgba(201,162,39,.20);
}
@media (min-width: 720px)  { .numbers { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1020px) { .numbers { grid-template-columns: repeat(5, 1fr); } }
.numbers__cell {
  background: var(--ink); padding: clamp(1.4rem, 3vw, 2rem) 1rem;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem;
}
.numbers__icon { color: var(--gold); }
.numbers__value { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1; color: var(--cream); }
.numbers__label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-mute); line-height: 1.6; max-width: 18ch; }

/* ============================================================
   MEDIA BAND (light)
   ============================================================ */
.media-band { background: var(--paper); color: var(--paper-ink); position: relative; overflow: hidden; }
.media-band .band-label { color: #7A5F14; margin-bottom: 1.75rem; }
.media-band__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
}
.media-band__line {
  margin: 0; max-width: 52ch; text-align: center;
  font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.6; color: #3A3630;
}
/* For real, licensed outlet logos once you have them. Prefer <img> marks;
   this text style is only a fallback. */
.media-band__logo {
  font-family: var(--display); font-weight: 800; font-size: clamp(1rem, 2vw, 1.35rem);
  letter-spacing: .02em; color: #1B1815; opacity: .82; transition: opacity .2s ease;
}
.media-band__logo:hover { opacity: 1; color: #1B1815; }
.media-band__inner img { max-height: 34px; width: auto; opacity: .85; }
.media-band .btn { border-color: rgba(20,18,15,.4); color: var(--paper-ink); }
.media-band .btn:hover { background: rgba(20,18,15,.07); border-color: var(--paper-ink); color: var(--paper-ink); }
.media-band__portrait { position: absolute; right: 0; bottom: 0; height: 100%; width: clamp(160px, 20vw, 280px); display: none; }
@media (min-width: 1100px) {
  .media-band__portrait { display: block; }
  /* The portrait is absolutely positioned over the right edge, so reserve
     that width or the copy and CTA run underneath it. */
  .media-band .wrap { padding-right: clamp(190px, 22vw, 320px); }
  .media-band__inner { min-height: 190px; }
}
.media-band__portrait[hidden] { display: none; }
.media-band__portrait .photo-slot { height: 100%; border-radius: 0; }
/* Crop to the head and shoulders: the band is short, so a centred crop
   would cut the face. Mirrored so the pointing hand aims back into the
   copy instead of off the edge of the page. Delete the transform to
   restore the original orientation. */
.media-band__portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%;
  transform: scaleX(-1);
}

/* ============================================================
   LET'S BUILD WHAT'S NEXT
   ============================================================ */
.build { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .build { grid-template-columns: 1fr 1fr 1.05fr; } }
.build h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 600; line-height: 1.1; margin: 0; }
.build h2 .script { display: block; color: var(--gold-lift); font-size: 1.25em; line-height: 1.2; padding-bottom: .12em; }
.build__lede { color: var(--cream-dim); font-size: .92rem; margin-top: 1rem; max-width: 34ch; }

.build__services { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.15rem; }
.build__services li { display: flex; align-items: center; gap: .85rem; margin: 0; font-size: .92rem; color: var(--cream); }
.build__services svg { flex-shrink: 0; color: var(--gold); }

.signup h3 {
  font-family: var(--sans); font-size: .72rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem;
}
.signup__row { display: flex; gap: 0; border: 1px solid var(--gold-line); border-radius: 8px; overflow: hidden; }
.signup__row input {
  flex: 1; min-width: 0; padding: .85rem 1rem; border: 0; background: var(--ink-2);
  color: var(--cream); font: inherit; font-size: .92rem;
}
.signup__row input::placeholder { color: var(--cream-mute); }
.signup__row input:focus { outline: none; background: var(--ink-3); }
.signup__row button {
  border: 0; padding: .85rem 1.3rem; cursor: pointer;
  background: var(--rose-deep); color: #fff;
  font-family: var(--sans); font-size: .72rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; transition: background .2s ease;
}
.signup__row button:hover { background: #A9134E; }
.signup__note { font-size: .76rem; color: var(--cream-mute); margin: .7rem 0 0; }

/* ============================================================
   BRAND FOOTER (multi-column link lists)
   ============================================================ */
.footer-brand-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .footer-brand-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .footer-brand-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr auto; } }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .6rem; }
.footer-links a { color: var(--cream-dim); font-size: .88rem; }
.footer-links a:hover { color: var(--rose-lift); }
.footer-col-title {
  font-family: var(--sans); font-size: .66rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem;
}

/* Nav needs more room for seven items on this site. */
@media (max-width: 1180px) {
  .nav__toggle { display: block; }
  .nav__phone { display: none; }
  .nav__cta > .btn { display: none; }
  .nav__mobile-cta { display: block; }
  .nav__links {
    position: fixed; inset: 76px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink-2); border-bottom: 1px solid var(--gold-line);
    padding: .5rem var(--pad) 1.75rem;
    transform: translateY(-140%); transition: transform .3s cubic-bezier(.4,0,.2,1);
    max-height: calc(100dvh - 76px); overflow-y: auto;
  }
  .nav__links.is-open { transform: translateY(0); }
  .nav__links li { border-bottom: 1px solid rgba(201,162,39,.12); }
  .nav__links a { display: block; padding: 1rem 0; font-size: 1.05rem; }
  .nav__links a::after { display: none; }
  .nav__links .nav__mobile-cta { border-bottom: 0; padding-top: 1.35rem; }
}
.nav__links a { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }