/* ==========================================================================
   Castro's Registration Services
   Design system + components. Mobile-first, no dependencies.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  /* Navy — headings and the footer. 13.6:1 on cream. */
  --ink:        #17255A;
  --ink-700:    #1E2E6B;
  --ink-600:    #2A3C82;
  --ink-400:    #5566A8;
  --slate:      #5A6280;
  --slate-300:  #9AA0BC;

  /* Pink. Three deliberate steps, because one pink cannot do all three jobs:
       --gold      bright, 3.50:1 on cream — DECORATION and large display text only
       --gold-600  button fill; white on it is 4.95:1
       --gold-text small text on light; 5.50:1 on cream
     Names kept from the old palette so every existing rule inherits the new theme. */
  --gold:       #E8467F;
  --gold-600:   #D81B60;
  --gold-200:   #FBD0E0;
  --gold-50:    #FDE8EF;

  /* Text-safe amber. --gold-600 fails WCAG AA badly on light backgrounds (2.32:1 on
     paper, 2.44:1 on white). This is the same hue family taken dark enough to clear
     4.5:1 on both (5.09:1 on paper, 5.36:1 on white) and 3:1 on navy (3.21:1), so it
     also works as the focus ring on every background the site uses. */
  --gold-text:  #C2185B;

  --paper:      #FDF6F4;
  --paper-2:    #FBEDEA;
  --white:      #FFFFFF;

  --line:       rgba(23, 37, 90, .14);
  /* --line is a decorative hairline and stays as it is. Form controls need a real
     boundary though: WCAG 1.4.11 wants 3:1 against the field fill, and --line is
     1.32:1 on white. This is 3.25:1. */
  --line-strong: rgba(23, 37, 90, .52);
  --line-soft:  rgba(23, 37, 90, .07);
  --line-light: rgba(255, 255, 255, .16);

  --ok:         #147A54;

  /* Type */
  --font-display: 'Baloo 2', 'Trebuchet MS', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-script: 'Caveat', 'Segoe Script', 'Brush Script MT', cursive;

  /* Space — a 4px scale */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 5.5rem;  --s10: 7rem;

  --radius:    20px;
  --radius-sm: 12px;
  --radius-lg: 30px;

  --shadow-sm: 0 1px 2px rgba(216,27,96,.05), 0 3px 10px rgba(23,37,90,.06);
  --shadow:    0 2px 4px rgba(23,37,90,.05), 0 14px 30px -12px rgba(216,27,96,.20);
  --shadow-lg: 0 4px 8px rgba(23,37,90,.06), 0 30px 64px -20px rgba(216,27,96,.28);

  --wrap: 1180px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 72px;
}

/* ------------------------------------------------------------- baseline */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }

/* The `hidden` attribute is implemented only by the UA stylesheet, so any author
   `display` declaration silently beats it. Without this, [hidden] elements that set
   their own display (e.g. .open-state) render anyway. */
[hidden] { display: none !important; }

a { color: var(--ink-600); text-decoration-color: rgba(27,58,99,.35); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4, h5 { font-family: var(--font-display); margin: 0 0 var(--s3); line-height: 1.12; letter-spacing: -.02em; color: var(--ink); font-weight: 700; }

.h1 { font-size: clamp(2.15rem, 6.4vw, 3.9rem); font-weight: 800; letter-spacing: -.033em; }
.h2 { font-size: clamp(1.65rem, 3.9vw, 2.6rem); font-weight: 700; letter-spacing: -.028em; }
.h3 { font-size: clamp(1.3rem, 2.6vw, 1.65rem); }
.h4 { font-size: 1.2rem; }
.h5 { font-size: .95rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--ink-600); }

.light, .light * { color: var(--white); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s5); }

.section { padding-block: clamp(var(--s7), 8vw, var(--s9)); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s4); top: -60px; z-index: 200;
  background: var(--gold-600); color: var(--white); font-weight: 700;
  padding: var(--s2) var(--s4); border-radius: var(--radius-sm);
  transition: top .18s var(--ease);
}
.skip-link:focus { top: var(--s3); }

:focus-visible { outline: 3px solid var(--gold-text); outline-offset: 2px; border-radius: 4px; }

.ico { width: 22px; height: 22px; flex: none; }
.ico.sm { width: 16px; height: 16px; }

.eyebrow {
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-text);
  margin: 0 0 var(--s3);
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before { content: ''; width: 26px; height: 3px; border-radius: 2px; background: var(--gold); flex: none; }
.eyebrow.light::before { background: var(--white); }
.eyebrow.light { color: var(--white); }
.center .eyebrow { justify-content: center; }

.section-head { max-width: 62ch; margin-bottom: clamp(var(--s5), 4vw, var(--s7)); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-lede { font-size: 1.12rem; color: var(--slate); margin-top: var(--s4); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.fine { font-size: .85rem; color: var(--slate); }
.mt { margin-top: var(--s5); }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 700; font-size: .97rem;
  letter-spacing: -.005em;
  padding: .82rem 1.35rem;
  border-radius: 999px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .2s var(--ease), background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 1rem 1.7rem; font-size: 1.03rem; }
.btn-block { display: flex; width: 100%; }
.btn-block + .btn-block { margin-top: var(--s2); }

.btn-gold { background: var(--gold-600); color: var(--white); box-shadow: 0 10px 22px -10px rgba(216,27,96,.75); }
.btn-gold:hover { background: #C2185B; color: var(--white); box-shadow: 0 16px 30px -12px rgba(216,27,96,.85); }

.btn-navy { background: var(--ink); color: var(--white); }
.btn-navy:hover { background: var(--ink-700); color: var(--white); box-shadow: var(--shadow); }

.btn-outline { background: var(--white); color: var(--ink); border-color: var(--gold-200); }
.btn-outline:hover { border-color: var(--gold); background: var(--white); color: var(--gold-text); }

.btn-ghost-light { background: rgba(255,255,255,.08); color: var(--white); border-color: var(--line-light); backdrop-filter: blur(6px); }
.btn-ghost-light:hover { background: rgba(255,255,255,.16); color: var(--white); border-color: rgba(255,255,255,.4); }

/* ---------------------------------------------------------------- topbar */
.topbar {
  background: var(--ink);
  color: rgba(255,255,255,.85);
  font-size: .82rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar-in { display: flex; align-items: center; gap: var(--s4); min-height: 40px; flex-wrap: wrap; }
.topbar-item { display: inline-flex; align-items: center; gap: .45rem; }
.topbar .ico { color: var(--gold); opacity: .9; }
.topbar-sep { color: rgba(255,255,255,.3); }
.topbar-phone {
  margin-left: auto; display: inline-flex; align-items: center; gap: .45rem;
  color: var(--gold-200); font-weight: 600; text-decoration: none;
}
.topbar-phone:hover { color: #FFFFFF; }
@media (max-width: 900px) {
  .topbar { display: none; }
}

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,249,246,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 1px 0 var(--line), 0 10px 30px -18px rgba(11,27,51,.5); background: rgba(250,249,246,.96); }

.header-in { display: flex; align-items: center; gap: var(--s5); min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.logo-mark { display: block; width: 58px; height: 58px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--font-script); font-weight: 700; font-size: 1.72rem; line-height: .95; letter-spacing: 0; color: var(--ink); }
.brand-sub { font-family: var(--font-display); font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); margin-top: 1px; }
/* --gold is 3.87:1 on --ink, which fails AA. --gold-200 is 10.49:1. The old comment
   here claimed 9.8:1 - true of the previous navy/gold palette, not of this one. */
.site-footer .brand-sub { color: var(--gold-200); }

/* nav */
.nav { margin-left: auto; display: flex; align-items: center; gap: var(--s5); }
.nav-list { display: flex; align-items: center; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.nav-list > li > a,
.nav-sub-toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-display); font-weight: 600; font-size: .93rem;
  color: var(--ink-700); text-decoration: none;
  padding: .55rem .7rem; border-radius: var(--radius-sm);
  background: none; border: 0; cursor: pointer; font-family: var(--font-display);
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.nav-list > li > a:hover, .nav-sub-toggle:hover { background: rgba(11,27,51,.06); color: var(--ink); }
.caret { width: 10px; height: 7px; transition: transform .2s var(--ease); }
.has-sub { position: relative; }
.has-sub[data-open="true"] .caret { transform: rotate(180deg); }

.sub {
  list-style: none; margin: 0; padding: var(--s2);
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-6px);
  width: 290px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.has-sub[data-open="true"] .sub { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.sub a {
  display: flex; align-items: center; gap: .6rem;
  padding: .58rem .7rem; border-radius: var(--radius-sm);
  font-size: .92rem; font-weight: 500; color: var(--ink-700); text-decoration: none;
}
.sub a:hover { background: var(--gold-50); color: var(--ink); }
.sub .ico { color: var(--gold-600); }

.nav-cta { padding: .62rem 1.05rem; font-size: .9rem; }

/* hamburger */
.hamburger {
  display: none; margin-left: auto;
  width: 46px; height: 46px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--white);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer;
}
.hamburger span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .22s var(--ease), opacity .18s var(--ease); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  .hamburger { display: flex; }
  .nav {
    position: fixed; inset: calc(var(--header-h)) 0 auto 0;
    margin: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: var(--s4) var(--s5) var(--s6);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid var(--line-soft); }
  .nav-list > li > a, .nav-sub-toggle { width: 100%; justify-content: space-between; padding: .95rem .2rem; font-size: 1.05rem; border-radius: 0; }
  .sub {
    position: static; transform: none; width: auto; opacity: 1; visibility: visible; pointer-events: auto;
    border: 0; box-shadow: none; padding: 0 0 var(--s3) var(--s3);
    display: none; background: transparent;
  }
  .has-sub[data-open="true"] .sub { display: block; transform: none; }
  .nav-cta { margin-top: var(--s5); justify-content: center; padding: .9rem 1.2rem; font-size: 1rem; }
}

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative; isolation: isolate;
  background: var(--paper);
  color: var(--slate);
  padding-block: clamp(var(--s7), 8vw, var(--s10)) clamp(var(--s8), 9vw, var(--s10));
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-bg::before {
  /* soft blush wash, brightest behind the artwork */
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(70% 80% at 78% 18%, rgba(232,70,127,.13), transparent 62%),
    radial-gradient(90% 90% at 10% 100%, rgba(251,208,224,.55), transparent 65%),
    linear-gradient(165deg, #FFFBFA 0%, #FDF1EE 55%, #FCE9E6 100%);
}
.hero-bg::after {
  /* faint plate-embossing grid */
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(216,27,96,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,27,96,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 78%);
}

.hero-in { display: grid; gap: clamp(var(--s6), 6vw, var(--s8)); align-items: center; }
@media (min-width: 1000px) {
  .hero-in { grid-template-columns: 1.08fr .92fr; }
}

.hero-copy .h1 {
  color: var(--ink); margin-bottom: var(--s5);
  font-size: clamp(2.1rem, 4.9vw, 3.3rem);
  text-wrap: balance;
}
/* Break the headline onto its own lines once there is room for it. */
.hero-copy .h1 span { display: inline; }
@media (min-width: 640px) { .hero-copy .h1 span { display: block; } }
.hero-lede { font-size: clamp(1.06rem, 1.6vw, 1.2rem); color: var(--slate); max-width: 54ch; }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

.hero-chips {
  list-style: none; margin: var(--s6) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  font-size: .9rem; color: var(--ink-600); font-weight: 700;
}
.hero-chips li { display: inline-flex; align-items: center; gap: .45rem; }
.hero-chips .ico { color: var(--gold-600); }

/* hero artwork */
.hero-art {
  position: relative; display: flex; justify-content: center; align-items: center;
  /* the entrance lives here, not on the car: the car owns transform for the scroll
     animation, and two animations writing the same property do not compose. */
  animation: art-in .9s var(--ease) both;
}
@keyframes art-in {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
}

/* One number drives the whole scene. Registered so it interpolates, and inherited so
   every layer inside .hero-art can read it. */
@property --p      { syntax: '<number>';     inherits: true;  initial-value: 0; }
@property --bounce { syntax: '<length>';     inherits: false; initial-value: 0px; }

.hero-art { --p: 0; }

.hero-car {
  display: block; width: min(540px, 100%); height: auto;
  position: relative; z-index: 1;

  /* Continuous functions of --p rather than keyframes. A keyframe is a corner you can
     feel; a sine has none. Two slow cycles of float across the whole travel,
     which at this amplitude reads as a well-damped suspension rather than a bump. */
  --bounce: calc(sin(var(--p) * 12.566rad) * -5px);

  /* The lean is the derivative of the float (cosine), ramped in by --p so the car sits
     dead level at rest instead of starting at a tilt. That phase relationship is what
     makes a body look sprung rather than merely rotated. */
  transform:
    translate3d(calc(var(--p) * 8.5%), var(--bounce), 0)
    rotate(calc(cos(var(--p) * 12.566rad) * var(--p) * 0.55deg))
    scale(calc(1 + var(--p) * 0.03));
  transform-origin: 62% 88%;

  /* Her drawing carries a soft shadow of its own; this is the contact shadow that
     answers the float. Lift the car (negative --bounce) and it falls further away and
     blurs; settle it and it draws back in. */
  filter: drop-shadow(
    0
    calc(20px - var(--bounce) * 1.6)
    calc(24px - var(--bounce) * 1.2)
    rgba(216,27,96,.17)
  );
}

/* Her palm trees, lifted out of the mockup and tiled. Furthest layer, so it drifts
   only a little - if it moved at the same rate as the road there would be no depth
   and the whole thing would read as a flat sliding picture. */
.scenery {
  position: absolute;
  /* Starts at the art column, not left of it: the palms are the biggest visual mass
     here and at -30% they drifted behind the hero copy. They tile with repeat-x, so
     there is nothing to gain by reaching under the text. */
  left: 0; right: -32%; top: 2%; height: 62%;
  z-index: 0; pointer-events: none;
  background-image: url(/assets/palms.png);
  background-repeat: repeat-x;
  background-size: auto 100%;
  /* Furthest layer, so it drifts least. The RATIO between the three travels is what
     the eye reads as depth and therefore as speed. */
  background-position: calc(var(--p) * -300px) bottom;
  opacity: .72;
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent),
              linear-gradient(#000 62%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent),
                      linear-gradient(#000 62%, transparent);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

/* The road the wheels sit on. Faint at rest so the hero still reads as her artwork,
   and it tears past once you start scrolling. */
.hero-ground {
  position: absolute;
  left: -34%; right: -14%; bottom: 6%; height: 54px;
  z-index: 0; pointer-events: none;
  opacity: calc(.2 + var(--p) * .34);
  background-image:
    repeating-linear-gradient(90deg, var(--gold) 0 54px, transparent 54px 116px),
    linear-gradient(var(--gold-200), var(--gold-200));
  background-size: 100% 4px, 100% 1px;
  background-position: calc(var(--p) * -1250px) 62%, 0 20%;
  background-repeat: no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 88%, transparent);
}

/* Speed lines. Three repeating bands at different pitches, slid at different rates so
   they read as rushing past rather than as one block moving. Masked at both ends so
   they never just stop mid-air. */
.hero-road {
  /* Sat squarely behind the car at first, which meant the car covered every line. They
     belong in the space it is driving AWAY from, so the band runs low and reaches well
     to the left, into the column gap: the lines emerge from behind the car and trail
     off. Strongest where they leave the bodywork, faded out at the far end. */
  position: absolute;
  left: -38%; right: 6%; bottom: 12%; height: 76px;
  z-index: 0;
  opacity: calc(var(--p) * .5); pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, var(--gold) 0 38px, transparent 38px 132px),
    repeating-linear-gradient(90deg, var(--gold) 0 24px, transparent 24px 104px),
    repeating-linear-gradient(90deg, var(--gold) 0 46px, transparent 46px 158px);
  background-size: 100% 3px, 100% 2px, 100% 3px;
  background-position:
    calc(var(--p) * -980px) 20%,
    calc(var(--p) * -1420px) 56%,
    calc(var(--p) * -700px) 88%;
  background-repeat: no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 62%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 62%, #000 100%);
}

/* ------------------------------------------- she drives when you scroll */
/* scroll(root block) drives the animation from the page scrollbar, so the car is at
   rest on load and moves only as the visitor scrolls the first screenful. No
   listener, no main-thread work. @supports keeps every other browser on the static
   artwork rather than a half-applied version of this. */


/* ------------------------------------------- she drives when you scroll */
/* scroll(root block) drives everything from the page scrollbar, so the car is at rest
   on load and moves only as the visitor scrolls. No listener, no main-thread work.
   @supports keeps every other browser on the static artwork rather than a
   half-applied version of this.

   The range has to end while the car is still on screen or its tail plays to nobody,
   and where the car sits depends on the layout - hence the two ranges below. */


/* Reads as "driving toward you", not "leaving". Nine bumps of uneven height so the
   rhythm never turns metronomic, and the car grows a couple of percent because in her
   drawing it faces the viewer. Drift is capped near 7%: the hero clips at
   overflow:hidden and the car already sits close to the right edge.

   Each keyframe sets the easing for the interval that FOLLOWS it, so a fall is
   ease-in (gravity takes it) and a rise is ease-out (the spring gives up). Linear
   throughout is what made the first version feel like a sawtooth. */




/* ----------------------------------------------------------------- trust */
.trust { background: var(--gold-50); border-block: 1px solid var(--gold-200); }
.trust-grid {
  display: grid; gap: var(--s5);
  padding-block: clamp(var(--s5), 4vw, var(--s6));
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.trust-item { display: flex; gap: var(--s3); align-items: flex-start; }
.trust-item .ico { color: var(--gold-600); margin-top: 2px; width: 26px; height: 26px; }
.trust-title { font-size: 1rem; font-weight: 700; margin: 0 0 2px; font-family: var(--font-display); }
.trust-item p { font-size: .9rem; color: var(--slate); margin: 0; line-height: 1.5; }

/* -------------------------------------------------------------- services */
.services { background: var(--paper); }
.svc-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.svc-card {
  position: relative; display: flex; flex-direction: column;
  padding: var(--s5) var(--s5) var(--s5);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: inherit;
  overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.svc-card::before {
  content: ''; position: absolute; inset: auto 0 0 0; height: 4px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(11,27,51,.2); }
.svc-card:hover::before { transform: scaleX(1); }

.svc-icon {
  display: inline-grid; place-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--gold-50); color: var(--gold-600);
  border: 0;
  margin-bottom: var(--s4);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.svc-card:hover .svc-icon { background: var(--gold-600); color: var(--white); }

.svc-title { font-size: 1.16rem; margin: 0 0 var(--s2); font-family: var(--font-display); font-weight: 700; }
.svc-text { font-size: .94rem; color: var(--slate); margin: 0 0 var(--s5); line-height: 1.55; }
.svc-more {
  margin-top: auto; display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-weight: 700; font-size: .85rem;
  letter-spacing: .02em; color: var(--ink);
}
.svc-more svg { width: 15px; height: 11px; transition: transform .22s var(--ease); }
.svc-card:hover .svc-more svg { transform: translateX(4px); }

/* ----------------------------------------------------------------- steps */
.how { background: var(--white); border-block: 1px solid var(--line-soft); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); counter-reset: step; }
.step { position: relative; padding-top: var(--s5); border-top: 2px solid var(--line); }
.step-n {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 2.4rem; line-height: 1; color: var(--gold);
  margin-bottom: var(--s3); letter-spacing: -.04em;
}
.step p { color: var(--slate); font-size: .96rem; margin: 0; }

/* ------------------------------------------------------------------- why */
.why {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(160deg, #D81B60, #AD1457);
  color: rgba(255,255,255,.94);
}
.why-in { display: grid; gap: clamp(var(--s6), 5vw, var(--s8)); align-items: center; }
@media (min-width: 900px) { .why-in { grid-template-columns: 1.25fr .75fr; } }
.why-copy p { color: rgba(255,255,255,.94); max-width: 60ch; }
.why-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.why-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.why-stats li {
  display: flex; align-items: baseline; gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
}
.why-stats strong { font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; color: var(--white); line-height: 1; letter-spacing: -.04em; }
.why-stats span { font-size: .9rem; color: rgba(255,255,255,.92); line-height: 1.4; }

/* ------------------------------------------------------------------- faq */
.faq-section { background: var(--paper); }
.faq { max-width: 800px; margin-inline: auto; }
.faq-item {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: var(--s3);
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq-item[open] { border-color: rgba(11,27,51,.22); box-shadow: var(--shadow-sm); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) var(--s5); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1.03rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--gold-50); }
.faq-plus { position: relative; width: 16px; height: 16px; flex: none; }
.faq-plus::before, .faq-plus::after {
  content: ''; position: absolute; inset: 50% 0 auto 0; height: 2px; background: var(--gold-text);
  border-radius: 2px; transform: translateY(-50%); transition: transform .25s var(--ease), opacity .2s;
}
.faq-plus::after { transform: translateY(-50%) rotate(90deg); }
.faq-item[open] .faq-plus::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq-a { padding: 0 var(--s5) var(--s5); color: var(--slate); font-size: .98rem; }
.faq-a p { max-width: 68ch; }

/* ----------------------------------------------------------------- visit */
.visit { background: var(--white); border-top: 1px solid var(--line-soft); }
.visit-grid { display: grid; gap: var(--s5); align-items: stretch; }
@media (min-width: 900px) { .visit-grid { grid-template-columns: .95fr 1.05fr; } }

.visit-card { padding: clamp(var(--s5), 3vw, var(--s6)); }
.addr { font-style: normal; font-size: 1.05rem; color: var(--slate); margin-bottom: var(--s4); line-height: 1.55; }

.open-state {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; font-size: .85rem;
  padding: .34rem .8rem; border-radius: 999px; margin: 0 0 var(--s4);
  background: rgba(20,122,84,.1); color: var(--ok);
}
.open-state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(20,122,84,.18); }
.open-state[data-open="false"] { background: rgba(11,27,51,.07); color: var(--slate); }
.open-state[data-open="false"]::before { box-shadow: 0 0 0 3px rgba(11,27,51,.08); }

.visit-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

.hours { width: 100%; border-collapse: collapse; margin-top: var(--s3); font-size: .95rem; }
.hours th, .hours td { text-align: left; padding: .55rem 0; border-bottom: 1px solid var(--line-soft); font-weight: 500; }
.hours th { color: var(--ink-700); font-family: var(--font-body); }
.hours td { text-align: right; color: var(--slate); font-variant-numeric: tabular-nums; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--ink); font-weight: 700; }
.hours tr.is-today th::after { content: 'Today'; margin-left: .5rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); }
.closed { color: var(--slate); } /* --slate-300 is 3.03:1 on white; this is real content */

.visit-map { overflow: hidden; min-height: 340px; padding: 0; }
.visit-map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; filter: saturate(.9) contrast(1.02); }

/* --------------------------------------------------------------- contact */
.contact {
  margin-top: var(--s5); padding: clamp(var(--s5), 4vw, var(--s7));
  display: grid; gap: clamp(var(--s5), 4vw, var(--s7));
  background: linear-gradient(150deg, var(--paper) 0%, var(--white) 60%);
}
@media (min-width: 860px) { .contact { grid-template-columns: 1fr 1fr; align-items: start; } }
.contact-copy p { color: var(--slate); max-width: 46ch; }
.contact-direct { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s5); }
.contact-direct a {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; color: var(--ink); text-decoration: none;
}
.contact-direct .ico { color: var(--gold-600); }
.contact-direct a:hover { color: var(--gold-600); }

.field { margin-bottom: var(--s4); }
.field label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink-700); margin-bottom: .35rem; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  padding: .78rem .95rem; background: var(--white);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
/* Deliberately NOT `outline: none` — that removed the keyboard focus ring from every
   field, because this rule outranks the global :focus-visible. The ring stays; the
   border and glow are additive. */
.field input:focus, .field textarea:focus {
  border-color: var(--gold-text); box-shadow: 0 0 0 4px rgba(242,184,36,.28);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #B3261E; }
.field textarea { resize: vertical; min-height: 110px; }
.hp { position: absolute; left: -9999px; }

/* The submit handler (and the whole "hand it to SMS instead" fallback) is JavaScript.
   With JS off, a native POST would go to the unconfigured endpoint and the message
   would be lost, so show the phone number instead of a form that cannot deliver. */
/* Gated on js-form-ready, which ONLY assets/script.js sets, and only after the submit
   handler is attached. The .js class is set by an inline script that always succeeds, so
   gating on it would show a live form even when the handler failed to load. */
html:not(.js-form-ready) .contact-form { display: none; }
.js-form-ready .form-fallback { display: none; }
.form-fallback {
  padding: var(--s5); border: 1.5px dashed var(--line);
  border-radius: var(--radius); background: var(--white);
}
.form-fallback p { color: var(--slate); }
.form-fallback a { font-weight: 700; color: var(--gold-text); }
.form-note { font-size: .85rem; color: var(--slate); margin: var(--s3) 0 0; text-align: center; }
.form-note.is-error { color: #B3261E; }
.form-note.is-ok { color: var(--ok); font-weight: 600; }

/* ------------------------------------------------------------ crumbs/svc */
.crumbs { background: var(--white); border-bottom: 1px solid var(--line-soft); font-size: .84rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: var(--s3) 0; color: var(--slate); }
.crumbs li + li::before { content: '/'; margin-right: .5rem; color: var(--slate-300); }
.crumbs a { color: var(--slate); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

.svc-hero {
  position: relative; isolation: isolate;
  background:
    radial-gradient(80% 120% at 88% 0%, rgba(232,70,127,.16), transparent 55%),
    linear-gradient(165deg, #FFFBFA, #FCE9E6);
  color: var(--slate);
  padding-block: clamp(var(--s6), 6vw, var(--s8));
}
/* Constrain the measure without centring the block — the hero must line up
   with the article text below it. */
.svc-hero-in > * { max-width: 780px; }
.svc-hero-icon {
  display: inline-grid; place-content: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--white); color: var(--gold-600);
  border: 0; box-shadow: var(--shadow-sm);
  margin-bottom: var(--s4);
}
.svc-h1 { color: var(--ink); font-size: clamp(1.95rem, 5.2vw, 3.1rem); }
.svc-lede { font-size: clamp(1.03rem, 1.6vw, 1.18rem); color: var(--slate); margin-top: var(--s4); }
.svc-hero .btn-outline { color: var(--ink); border-color: var(--gold-200); background: var(--white); }
.svc-hero .btn-outline:hover { background: var(--white); color: var(--gold-text); border-color: var(--gold); }

.svc-body { background: var(--paper); }
.svc-layout { display: grid; gap: clamp(var(--s5), 4vw, var(--s7)); }
@media (min-width: 940px) { .svc-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.svc-main > p { font-size: 1.08rem; color: var(--slate); max-width: 68ch; }

.bring { padding: clamp(var(--s5), 3vw, var(--s6)); margin-top: var(--s6); }
.checks { list-style: none; margin: 0 0 var(--s5); padding: 0; }
.checks li { position: relative; padding: .5rem 0 .5rem 2.1rem; border-bottom: 1px solid var(--line-soft); font-size: .99rem; }
.checks li:last-child { border-bottom: 0; }
.checks li::before {
  content: ''; position: absolute; left: 0; top: .78rem;
  width: 19px; height: 19px; border-radius: 6px;
  background: var(--gold-50); border: 1.5px solid var(--gold);
}
.checks li::after {
  content: ''; position: absolute; left: 5px; top: 1.12rem;
  width: 9px; height: 5px; border-left: 2px solid var(--gold-600); border-bottom: 2px solid var(--gold-600);
  transform: rotate(-45deg);
}

.forms { padding-top: var(--s4); border-top: 1px solid var(--line); }
.form-links { list-style: none; margin: var(--s3) 0; padding: 0; display: grid; gap: var(--s2); }
.form-links a {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .93rem; color: var(--ink-600); text-decoration: none;
  padding: .6rem .85rem; background: var(--gold-50); border: 1px solid var(--gold-200);
  border-radius: var(--radius-sm);
}
.form-links a:hover { background: var(--gold-200); color: var(--ink); }
.form-links svg { width: 13px; height: 13px; flex: none; opacity: .65; }

.bring-note { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); font-size: .93rem; color: var(--slate); }
.bring-note a { font-weight: 600; color: var(--gold-text); }

.svc-faq { margin-top: var(--s7); }
.svc-faq .faq { margin-inline: 0; max-width: none; }

.svc-aside { display: grid; gap: var(--s4); position: sticky; top: calc(var(--header-h) + var(--s4)); }
@media (max-width: 939px) { .svc-aside { position: static; } }
.aside-card { padding: var(--s5); }
.aside-card .h5 { margin-bottom: var(--s3); }
.aside-links { list-style: none; margin: 0; padding: 0; }
.aside-links a {
  display: flex; align-items: center; gap: .6rem;
  padding: .58rem 0; font-size: .93rem; color: var(--ink-700); text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
}
.aside-links li:last-child a { border-bottom: 0; }
.aside-links .ico { color: var(--gold-600); }
.aside-links a:hover { color: var(--gold-600); }

.svc-pager { background: var(--white); border-top: 1px solid var(--line-soft); }
.svc-pager-in { display: flex; justify-content: space-between; gap: var(--s4); padding-block: var(--s5); }
.pager { display: flex; flex-direction: column; gap: 2px; text-decoration: none; max-width: 46%; }
.pager.next { text-align: right; align-items: flex-end; }
.pager-label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); font-weight: 700; }
.pager-title { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.pager:hover .pager-title { color: var(--gold-600); }

.notfound-links { margin-top: var(--s6); columns: 2; column-gap: var(--s6); }
.notfound-links a { color: var(--ink); border-bottom-color: var(--gold-200); }
.notfound-links a:hover { color: var(--gold-text); }
.page-404 .eyebrow { color: var(--gold-text); }

/* -------------------------------------------------------------- cta band */
.cta-band { background: var(--gold-50); color: var(--ink); border-block: 1px solid var(--gold-200); }
/* This band is the pale --gold-50, so the navy ring reads strongly on it (13.3:1).
   The numbers in the old comment here were from the navy/gold theme. */
.cta-band :focus-visible { outline-color: var(--ink); }

/* The default ring (--gold-text) is 2.47:1 on the navy surfaces and 1.19:1 on the
   pink "why" band - well under the 3:1 that WCAG 1.4.11 asks of a focus indicator,
   and on the pink band it is effectively invisible. White clears it everywhere it
   is applied here: 14.5:1 on navy, 4.95:1 on the band. */
.topbar :focus-visible,
.site-footer :focus-visible,
.cookie-notice :focus-visible,
.mobile-bar :focus-visible,
.why :focus-visible { outline-color: #FFFFFF; }
.cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5); padding-block: clamp(var(--s6), 5vw, var(--s7)); }
.cta-band .h2 { color: var(--ink); margin-bottom: var(--s2); }
.cta-band p { color: var(--slate); max-width: 48ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.cta-band .btn-gold { background: var(--gold-600); color: var(--white); box-shadow: 0 12px 24px -12px rgba(216,27,96,.8); }
.cta-band .btn-gold:hover { background: #C2185B; color: var(--white); }
.cta-band .btn-ghost-light { background: var(--white); color: var(--ink); border-color: var(--gold-200); }
.cta-band .btn-ghost-light:hover { background: var(--white); color: var(--gold-text); border-color: var(--gold); }

/* ------------------------------------------------------------ disclaimer */
.disclaimer { background: var(--paper-2); border-top: 1px solid var(--line-soft); }
.disclaimer-in { display: flex; gap: var(--s3); align-items: flex-start; padding-block: var(--s5); }
.disclaimer .ico { color: var(--gold-600); margin-top: 2px; }
.disclaimer p { font-size: .88rem; color: var(--slate); margin: 0; max-width: 90ch; }
.disclaimer strong { color: var(--ink-700); }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--ink); color: rgba(255,255,255,.66); font-size: .93rem; }
.footer-grid {
  display: grid; gap: var(--s6);
  padding-block: clamp(var(--s6), 6vw, var(--s8)) var(--s6);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

.site-footer .brand-name { color: var(--white); }
.footer-blurb { margin: var(--s4) 0 var(--s5); max-width: 40ch; color: rgba(255,255,255,.6); font-size: .92rem; }
.footer-cta { display: flex; flex-wrap: wrap; gap: var(--s2); }

.footer-h { font-family: var(--font-display); font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gold-200); margin: 0 0 var(--s4); font-weight: 700; }
.footer-h.mt { margin-top: var(--s5); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer-col a { color: rgba(255,255,255,.68); text-decoration: none; }
.footer-col a:hover { color: var(--gold-200); }
.footer-col address { font-style: normal; color: rgba(255,255,255,.68); margin-bottom: var(--s3); line-height: 1.6; }
.hours-mini li { display: flex; justify-content: space-between; gap: var(--s4); }
.svc-aside .hours-mini { margin: 0 0 var(--s4); font-size: .9rem; color: var(--slate); }
.svc-aside .hours-mini li { padding: .35rem 0; border-bottom: 1px solid var(--line-soft); }
.svc-aside .hours-mini li:last-child { border-bottom: 0; }
.areas { color: rgba(255,255,255,.6); font-size: .88rem; line-height: 1.7; }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  justify-content: space-between; align-items: baseline;
  padding-block: var(--s5); border-top: 1px solid rgba(255,255,255,.1);
  font-size: .82rem; color: rgba(255,255,255,.5);
}
.footer-bottom p { margin: 0; }
.footer-bottom .fine { color: rgba(255,255,255,.5); max-width: 62ch; } /* .42 was 4.01:1 */

/* ------------------------------------------------------------ mobile bar */
.mobile-bar { display: none; }
.mobile-bar-spacer { display: none; }
@media (max-width: 760px) {
  .mobile-bar {
    display: grid; grid-template-columns: repeat(3, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: rgba(11,27,51,.97);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,.12);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-bar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
    padding: .7rem .3rem;
    font-family: var(--font-display); font-weight: 700; font-size: .74rem; letter-spacing: .04em;
    color: rgba(255,255,255,.9); text-decoration: none;
  }
  .mobile-bar a + a { border-left: 1px solid rgba(255,255,255,.1); }
  .mobile-bar a:active { background: rgba(255,255,255,.08); }
  .mobile-bar .ico { color: var(--gold); width: 19px; height: 19px; }
  .mobile-bar-spacer { display: block; height: calc(60px + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------- reveals */
/* Scoped to .js so a blocked/failed script can never hide the content. */
.js .reveal > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-in > * { opacity: 1; transform: none; }
.reveal.is-in > *:nth-child(2)  { transition-delay: .05s; }
.reveal.is-in > *:nth-child(3)  { transition-delay: .1s; }
.reveal.is-in > *:nth-child(4)  { transition-delay: .15s; }
.reveal.is-in > *:nth-child(5)  { transition-delay: .2s; }
.reveal.is-in > *:nth-child(6)  { transition-delay: .25s; }
.reveal.is-in > *:nth-child(7)  { transition-delay: .3s; }
.reveal.is-in > *:nth-child(8)  { transition-delay: .35s; }
.reveal.is-in > *:nth-child(n+9) { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  /* Must match the .js .reveal > * specificity (0,2,0) or it never applies. */
  .js .reveal > *, .reveal > * { opacity: 1; transform: none; }
  .btn:hover, .svc-card:hover { transform: none; }
}

/* ----------------------------------------------------------------- print */
@media print {
  .topbar, .site-header, .mobile-bar, .visit-map, .contact-form, .svc-pager, .cta-band, .hero-art { display: none !important; }
  /* Anything not scrolled past is still at opacity 0 — it would print as blank space. */
  .js .reveal > *, .reveal > * { opacity: 1 !important; transform: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero, .why, .svc-hero, .site-footer { background: #fff !important; color: #000 !important; }
  .hero *, .why *, .svc-hero *, .site-footer * { color: #000 !important; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
  .section { padding-block: 1rem; }
}

/* ----------------------------------------------------------- legal pages */
.legal { background: var(--paper); }
.legal-wrap { max-width: 72ch; }
.legal-wrap .h2 { margin-bottom: var(--s2); }
.legal-updated { font-size: .88rem; color: var(--slate); margin-bottom: var(--s6); }
.legal-wrap h2 { margin-top: var(--s6); }
.legal-wrap p { color: var(--slate); }
.legal-wrap a { color: var(--gold-text); font-weight: 600; }
.legal-wrap ul { color: var(--slate); padding-left: 1.2rem; }
.legal-wrap li { margin-bottom: .4rem; }

.footer-legal {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  width: 100%; margin-top: var(--s3);
}
.footer-legal a { color: rgba(255,255,255,.6); text-decoration: none; font-size: .82rem; }
.footer-legal a:hover { color: var(--gold-200); text-decoration: underline; }

/* ------------------------------------------------------- playful accents */
.hero-art::before, .hero-art::after {
  content: '\2665'; position: absolute; color: var(--gold); opacity: .30;
  pointer-events: none; line-height: 1;
}
.hero-art::before { font-size: 2.1rem; top: 4%; left: 1%; transform: rotate(-14deg); }
.hero-art::after  { font-size: 1.4rem; top: 12%; right: 2%; transform: rotate(12deg); }

/* Handwritten asides, like the mockup’s "Skip the DMV line!" */
.script {
  font-family: var(--font-script); font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem); color: var(--gold-text);
  line-height: 1.15;
}

/* Section headings get a soft pink underline sweep. */
.section-head .h2 { position: relative; display: inline-block; }
.section-head .h2::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.18em; height: .28em;
  background: var(--gold-200); border-radius: 999px; z-index: -1;
}
.why .section-head .h2::after, .light .h2::after { background: rgba(255,255,255,.28); }

/* Cards lift a little more warmly than the old navy theme. */
.svc-card:hover { border-color: var(--gold-200); }
.faq-item summary:hover { background: var(--gold-50); }

/* Trust bar icons get the mockup’s circular pink chip. */
.trust-item .ico {
  background: var(--white); border-radius: 50%; padding: 7px;
  box-shadow: 0 2px 8px -2px rgba(216,27,96,.28);
  width: 34px; height: 34px; box-sizing: border-box;
}

/* --------------------------------------------------- circular badge logo */
/* The badge is her drawing, and the lettering inside it only resolves at the size she
   drew it. At header scale it reads as a mark, not as words, so the wordmark sits
   beside it and does the naming. */
.logo-mark { display: block; width: 62px; height: 62px; flex: none; }
.brand { gap: .55rem; }
.brand-name { font-family: var(--font-script); font-weight: 700; font-size: 1.6rem; }
@media (min-width: 981px) {
  .logo-mark { width: 72px; height: 72px; }
}
.site-footer .logo-mark { width: 84px; height: 84px; }
.site-footer .brand-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }


/* ------------------------------------------------- owner-controlled pieces */
/* Injected at the edge by functions/_middleware.js when she sets a banner or turns
   tracking on. Public markup, so it belongs in the public stylesheet. */

.site-banner {
  padding: var(--s3) 0; font-size: .95rem; font-weight: 600;
  font-family: var(--font-display); text-align: center;
}
/* --gold is 3.87:1 against --ink, which fails AA at this text size, so the notice
   uses the button fill with white on it (4.95:1) like every other filled surface. */
.site-banner--notice { background: var(--gold-600); color: #fff; }
.site-banner--closed { background: #B3261E; color: #fff; }
.site-banner--good  { background: #147A54; color: #fff; }

.cookie-notice {
  position: fixed; left: var(--s4); right: var(--s4); bottom: var(--s4); z-index: 120;
  max-width: 560px; margin-inline: auto;
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  background: var(--ink); color: #fff;
  padding: var(--s4); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.cookie-notice p { margin: 0; font-size: .9rem; flex: 1 1 260px; color: rgba(255,255,255,.85); }
/* likewise 3.87:1 on navy; the pale tint reads at 10.49:1 */
.cookie-notice a { color: var(--gold-200); }
@media (max-width: 760px) { .cookie-notice { bottom: calc(60px + var(--s3)); } }

/* ------------------------------------------------------------ her slogans */
/* Lines lifted from her mockup, in her voice. .script is the handwriting face. */

.services-aside {
  margin-top: var(--s6); text-align: center;
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; flex-wrap: wrap;
}
.services-aside a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }
.services-aside a:hover { color: var(--gold-600); }
.script-arrow { width: 52px; height: 22px; flex: none; opacity: .7; }
.script-heart { color: var(--gold); margin-left: .3rem; }

.slogan-band {
  background: var(--gold-50);
  border-block: 1px solid var(--gold-200);
  padding-block: clamp(var(--s5), 4vw, var(--s6));
}
.slogan-in {
  display: grid; gap: var(--s5); align-items: center; justify-items: center;
  text-align: center;
}
@media (min-width: 860px) {
  .slogan-in { grid-template-columns: 1fr auto 1fr; }
  .slogan-in .slogan-item:first-child { justify-self: start; text-align: left; }
  .slogan-in .slogan-item:last-child { justify-self: end; text-align: right; }
}
.slogan-item {
  display: inline-flex; align-items: center; gap: var(--s3);
  margin: 0; color: var(--ink);
}
.slogan-item strong {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: .95rem; letter-spacing: .01em;
}
.slogan-item span span { display: block; font-size: .88rem; color: var(--slate); }
.slogan-ico {
  display: grid; place-content: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--white); color: var(--gold-600);
  box-shadow: 0 2px 8px -2px rgba(216,27,96,.28);
}
.slogan-script { margin: 0; }

.footer-thanks { display: block; margin-top: .35rem; color: var(--gold-200); }



/* --------------------------------------------- she drives when you scroll */
/* Only --p is animated; every layer above is a pure function of it. Without JS the
   scroll timeline drives it directly - no listener, nothing on the main thread. With
   JS, script.js switches this off and eases --p toward the scroll position instead,
   so the car carries a little past where you stopped rather than halting on the same
   frame you do.

   The range must end while the car is still on screen, and where it sits depends on
   the layout: side by side it is gone by ~73vh, stacked it is still visible at ~101vh. */
@keyframes drive-progress {
  from { --p: 0; }
  to   { --p: 1; }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-art {
      /* Longhands, not the shorthand: `animation` resets every animation-* longhand it
         does not name, animation-timeline and animation-range included. */
      animation-name: drive-progress;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
      animation-range: 0 95vh;
    }
    @media (min-width: 1000px) {
      .hero-art { animation-range: 0 50vh; }
    }
  }
}

/* script.js sets this once it is driving --p itself. */
.js-drive .hero-art { animation-name: none; }

/* The hearts drift with everything else, straight off --p. */
.hero-art::before, .hero-art::after {
  opacity: calc(.3 - var(--p) * .18);
  translate: calc(var(--p) * -14%) calc(var(--p) * -26%);
}

/* =============================================================== the fun */

/* ---- four-point sparkles, the marks she drew around the car ---- */
.sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.sparkles i { position: absolute; display: block; color: var(--gold); line-height: 1; }
.sparkles i::before { content: '\2726'; display: block; }
.sparkles i:nth-child(1) { top: 6%;  left: 2%;   font-size: 1.15rem; opacity: .55; }
.sparkles i:nth-child(2) { top: 20%; right: 4%;  font-size: .8rem;   opacity: .45; }
.sparkles i:nth-child(3) { top: 46%; left: -1%;  font-size: .95rem;  opacity: .4;  }
.sparkles i:nth-child(4) { top: 4%;  right: 22%; font-size: .7rem;   opacity: .5;  }

/* ---- hearts drifting up through the walk-ins band ---- */
.slogan-band { position: relative; overflow: hidden; }
.slogan-band > .wrap { position: relative; z-index: 1; }
.floaters { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.floaters i { position: absolute; bottom: -10%; display: block; color: var(--gold); opacity: 0; line-height: 1; }
.floaters i::before { content: '\2665'; display: block; }
.floaters i:nth-child(1) { left: 8%;  font-size: 1rem;   }
.floaters i:nth-child(2) { left: 26%; font-size: .72rem; }
.floaters i:nth-child(3) { left: 52%; font-size: 1.2rem; }
.floaters i:nth-child(4) { left: 71%; font-size: .8rem;  }
.floaters i:nth-child(5) { left: 89%; font-size: .95rem; }

@media (prefers-reduced-motion: no-preference) {
  .sparkles i { animation: twinkle 3.6s var(--ease) infinite; }
  .sparkles i:nth-child(2) { animation-delay: .9s;  animation-duration: 4.4s; }
  .sparkles i:nth-child(3) { animation-delay: 1.8s; animation-duration: 3.1s; }
  .sparkles i:nth-child(4) { animation-delay: 2.6s; animation-duration: 5s;   }

  .floaters i { animation: float-up 11s linear infinite; }
  .floaters i:nth-child(2) { animation-delay: 2.4s;  animation-duration: 13s; }
  .floaters i:nth-child(3) { animation-delay: 5.1s;  animation-duration: 9.5s; }
  .floaters i:nth-child(4) { animation-delay: 7.6s;  animation-duration: 14s; }
  .floaters i:nth-child(5) { animation-delay: 9.8s;  animation-duration: 10.5s; }
}

@keyframes twinkle {
  0%, 100% { transform: scale(.7) rotate(0deg);    opacity: .18; }
  50%      { transform: scale(1.15) rotate(45deg); opacity: .7;  }
}

/* translate + opacity only, so this never touches layout */
@keyframes float-up {
  0%   { opacity: 0;   translate: 0 0; }
  12%  { opacity: .45; }
  80%  { opacity: .3;  }
  100% { opacity: 0;   translate: 14px -260px; }
}

/* ---- the heading underline draws itself in as it arrives ---- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-head .h2::after {
      transform-origin: left center;
      animation: underline-draw linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 32%;
    }
  }
}
@keyframes underline-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---- her badge gives a little wave when you point at it ---- */
@media (prefers-reduced-motion: no-preference) {
  .logo-mark { transition: transform .35s var(--ease); }
  .brand:hover .logo-mark, .brand:focus-visible .logo-mark { animation: badge-wave .7s var(--ease); }
}
@keyframes badge-wave {
  0%   { transform: rotate(0deg)   scale(1);    }
  30%  { transform: rotate(-7deg)  scale(1.06); }
  60%  { transform: rotate(5deg)   scale(1.06); }
  100% { transform: rotate(0deg)   scale(1);    }
}

/* ---- service cards lean in, and their arrow runs ahead ---- */
@media (prefers-reduced-motion: no-preference) {
  .svc-card .svc-icon { transition: transform .3s var(--ease); }
  .svc-card:hover .svc-icon { transform: scale(1.1) rotate(-6deg); }
  .svc-card .svc-more svg { transition: transform .3s var(--ease); }
  .svc-card:hover .svc-more svg { transform: translateX(5px); }
}

/* ---- the handwritten heart beats, quietly ---- */
@media (prefers-reduced-motion: no-preference) {
  .script-heart { display: inline-block; animation: beat 2.6s var(--ease) infinite; }
}
@keyframes beat {
  0%, 70%, 100% { transform: scale(1); }
  35%           { transform: scale(1.22); }
}

/* Parallax. The distances are what matter, not the values themselves: the palms cover
   180px while the road covers 820px over the same scroll, and that ratio is what the
   eye reads as "the car is moving fast". */




/* --------------------------------------------------- text hand-off panel */
/* Shown after a valid submit. It is the safety net: even if the messaging app never
   opens, the composed message is on screen and one click from the clipboard. */
/* No card, no border, no fill. It is a row of actions belonging to the form above it,
   not a second panel competing with it. */
.form-handoff { margin-top: var(--s4); }
/* Only ever on screen when copying failed outright. */
.form-handoff-text {
  width: 100%; margin-top: var(--s3); font: inherit; font-size: .95rem; color: var(--ink);
  padding: .7rem .85rem; background: var(--white);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  resize: vertical;
}
.form-handoff-actions {
  display: flex; flex-wrap: wrap; gap: var(--s3);
}
.form-handoff-actions .btn { flex: 1 1 auto; justify-content: center; }
.form-handoff-note {
  margin: var(--s3) 0 0; font-size: .88rem; color: var(--slate);
}
.form-handoff-note a { color: var(--gold-text); }

/* A phone number split across two lines is unreadable and untappable. The email is long
   enough that it still needs to be allowed to wrap. */
.form-handoff-note a[href^="tel:"] { white-space: nowrap; }