/* ============================================================
   AARONS INSURANCE — "PLATE GLASS"
   Hand-written. No framework, no build step.

   The idea: a Gorham Street storefront window. Cut vinyl on
   plate glass, the phone number bigger than the shop's name,
   and the languages of the block stacked beside it.

   Two rules govern this file:
     1. RED MEANS TAP THIS. Nothing else is ever red.
     2. The gilt (gold offset shadow) appears on exactly one
        object: the phone number. If two things wear it,
        neither one is the important one.
   ============================================================ */

:root {

  /* ---------- INK & GROUND ---------- */
  --plate:        #E4E8E2;   /* page ground — plate glass edge-on. NOT cream. */
  --plate-deep:   #D5DBD4;   /* form slip, counter panel */
  --awning:       #123D33;   /* awning canvas. A colour, not a black. */
  --awning-deep:  #0C2C25;   /* footer door */
  --vinyl:        #FAFBF8;   /* cut-vinyl lettering. 11.65:1 on awning */
  --ink:          #1A2420;   /* body on light. 13.9:1 on plate */
  --ink-soft:     #4A5750;   /* secondary on light. 6.8:1 on plate */

  /* ---------- CONVERSION ----------
     The only conversion colour. Buttons, call bar, the pen, focus.
     White on this red = 4.77:1 (AA).
     NEVER used as body text on plate (3.85:1 — fails). Fills and
     strokes only. Grep `color: var(--red)` — must return zero. */
  --red:          #D8321F;
  --red-press:    #B22617;

  /* ---------- THE GILT ----------
     Two uses, and no others: the offset shadow behind the phone
     number, and micro-type on the awning. Never a fill. */
  --gold:         #E9B23F;   /* 6.25:1 on awning */

  /* ---------- SECOND INK (the language system) ----------
     Every non-English string on this site is this blue. It appears
     nowhere else: never a button, never a link, never chrome.
     It is a language, not a look. */
  --second-dark:  #A8D8F2;   /* on awning — 8.9:1 */
  --second-light: #12457A;   /* on plate  — 8.1:1 */

  /* ---------- STRUCTURE ---------- */
  --hair:         rgba(26,36,32,.16);
  --hair-dark:    rgba(250,251,248,.18);
  --shadow-slip:  0 1px 0 rgba(26,36,32,.10), 0 8px 20px -12px rgba(26,36,32,.28);

  /* ---------- TYPE ----------
     Fluid where it must be, fixed where it must not move.
     Nothing on this page is set below 13px. */
  --t-phone:  clamp(2.9rem, min(13vw, 11.5vh), 6.4rem);   /* the LCP element */
  --t-h1:     clamp(2.1rem, 7.4vw, 4.1rem);
  --t-h2:     clamp(1.6rem, 5.2vw, 2.5rem);
  --t-h3:     clamp(1.15rem, 3.2vw, 1.35rem);
  --t-lead:   clamp(1.0625rem, 2.6vw, 1.25rem);
  --t-body:   1.0625rem;    /* 17px. Never 16 — cheap Android LCD. */
  --t-small:  0.9375rem;    /* 15px */
  --t-micro:  0.8125rem;    /* 13px — the floor */

  --lh-display: 0.92;
  --lh-head:    1.04;
  --lh-body:    1.55;

  --tr-display: -0.015em;
  --tr-eyebrow:  0.16em;
  --tr-button:   0.05em;

  /* Width axis. The whole concept: one set of vinyl letters, and every
     sign on the block cut from it. */
  --w-cond:  62%;
  --w-head:  76%;
  --w-sect:  82%;
  --w-norm: 100%;

  /* ---------- SPACING (4px base) ---------- */
  --s-2:  8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px;  --s-7: 48px; --s-8: 64px; --s-9: 88px; --s-10: 120px;

  --gut:     clamp(20px, 5.5vw, 40px);
  --measure: 62ch;
  --shell:   1120px;

  /* ---------- RADII ----------
     The radius of a die-cut vinyl sticker, and nothing else.
     Sign panels are 0. Always. */
  --r-decal: 3px;

  --tap:      52px;
  --bar-top:  56px;
  --bar-call: 64px;

  /* ---------- MOTION ---------- */
  --ease-pen: cubic-bezier(.65,.05,.30,1);
  --ease-ui:  cubic-bezier(.2,.7,.3,1);
  --dur-pen:  900ms;
  --dur-ui:   180ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-pen: 0.01ms; --dur-ui: 0.01ms; }
}


/* ============================================================
   FONT — Archivo variable, self-hosted.
   One family. wght 400–900, wdth 62–125.
   We use font-weight + font-stretch, NEVER font-variation-settings:
   the latter bypasses the cascade, so during the swap the fallback
   would render the LCP phone number at regular weight and then snap.
   ============================================================ */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metric-matched fallback. This is what stops the phone number — the
   largest element on the page — from jumping when the real font swaps in.
   Tune these four numbers in-browser if it still moves. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Narrow"), local("Helvetica Neue Condensed"),
       local("Liberation Sans Narrow"), local("Arial");
  size-adjust: 96.5%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}


/* ============================================================
   RESET
   ============================================================ */

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

/* A `display` rule silently beats the `hidden` attribute. Anything given a
   display value below (.f-err is flex, .callbar is flex) would otherwise
   ignore `hidden` and render empty. Do not remove this. */
[hidden] { display: none !important; }

body, h1, h2, h3, p, ul, ol, figure, fieldset, legend { margin: 0; padding: 0; }
ul { list-style: none; }
fieldset { border: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

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

body {
  font-family: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--plate);
  -webkit-font-smoothing: antialiased;
}

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

.skip {
  position: absolute; left: -9999px;
  background: var(--red); color: var(--vinyl);
  padding: var(--s-3) var(--s-5); font-weight: 700; text-decoration: none; z-index: 100;
}
.skip:focus { left: 0; top: 0; }

/* One focus style, everywhere, instant. Red = interactive, and focus is
   interaction, so focus is red. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}
/* On the awning, red-on-green is muddy — the ring goes gold there. */
.window :where(a, button):focus-visible,
.plaques :where(a, button, input, label):focus-visible,
.doorf :where(a, button):focus-visible,
.bar :where(a, button):focus-visible {
  outline-color: var(--gold);
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap);
  padding: 0 var(--s-6);
  border: 0; border-radius: var(--r-decal);
  font-weight: 800; font-stretch: var(--w-sect);
  font-size: var(--t-body);
  letter-spacing: var(--tr-button);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease-ui),
              transform var(--dur-ui) var(--ease-ui);
}
.btn-red { background: var(--red); color: var(--vinyl); }
.btn-red:hover { background: var(--red-press); }
.btn-red:active { transform: translateY(1px); }


/* ============================================================
   THE PEN — the signature.
   Three ellipses on the entire page. Never a fourth.
   ============================================================ */

.circled { position: relative; display: inline-block; }

/* <svg> is a REPLACED element: with width:auto it falls back to its intrinsic
   300×150, ignoring `inset` entirely — so the ellipse renders 300px wide no
   matter how long the number is, and wraps only part of it. The width/height
   MUST be explicit, and must agree with the offsets:
     width  = 100% + (2 × 9%)  = 118%
     height = 100% + (2 × 26%) = 152%
   The pen must look like it CHOSE the number, not struck it out. */
.pen {
  position: absolute;
  top: -26%; left: -9%;
  width: 118%; height: 152%;
  /* The reset's `svg { max-width: 100% }` clamps this back to the width of the
     thing it is circling, so the loop can never reach past the last digit.
     The pen is the one SVG that must overflow its subject. */
  max-width: none;
  overflow: visible;
  pointer-events: none;      /* the pen never eats a tap */
  z-index: 2;
  color: var(--red);
}
/* <use> clones the path into a SHADOW TREE, so `.pen path` selects nothing.
   stroke-dasharray/-dashoffset are INHERITED SVG properties, so we set them
   on the <svg> and they reach the cloned path. Same for `color`, which the
   path's stroke="currentColor" resolves against. */
/* 1300 > the path's ~1160 length, so dashoffset:1300 hides it completely. */
.pen { stroke-dasharray: 1300; stroke-dashoffset: 1300; }
.is-drawn .pen {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur-pen) var(--ease-pen);
}
/* On the red submit button the pen must be vinyl — red on red is nothing. */
.btn .pen { color: var(--vinyl); }


/* ============================================================
   STICKY TOP BAR
   ============================================================ */

.bar {
  position: sticky; top: 0; z-index: 40;
  background: var(--awning);
  border-bottom: 1px solid var(--hair-dark);
}
.bar-in {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding-inline: var(--gut);
  min-height: var(--bar-top);
}
.bar-name {
  color: var(--vinyl);
  font-size: var(--t-small); font-weight: 700; font-stretch: var(--w-sect);
  letter-spacing: .06em; text-transform: uppercase;
}
.bar-call {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: var(--s-5);
  background: var(--red); color: var(--vinyl);
  border-radius: var(--r-decal);
  font-size: var(--t-small); font-weight: 800; font-stretch: var(--w-sect);
  letter-spacing: var(--tr-button); text-transform: uppercase; text-decoration: none;
  transition: background-color var(--dur-ui) var(--ease-ui);
}
.bar-call:hover { background: var(--red-press); }


/* ============================================================
   THE WINDOW (hero) — the storefront pane
   ============================================================ */

.window {
  background: var(--awning);
  padding-block: var(--s-8) var(--s-9);
  color: var(--vinyl);
}

.eyebrow {
  color: var(--gold);
  font-size: var(--t-micro); font-weight: 700; font-stretch: var(--w-norm);
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  margin-bottom: var(--s-5);
}

.window h1 {
  font-size: var(--t-h1);
  font-weight: 800; font-stretch: var(--w-head);
  line-height: var(--lh-head);
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
  color: var(--vinyl);
  /* No gilt here. The gilt belongs to the phone number alone. */
}

/* The second ink, on the awning. */
.second {
  color: var(--second-dark);
  font-size: var(--t-lead);
  font-weight: 500;
  line-height: 1.35;
  max-width: var(--measure);
}
.second:first-of-type { margin-top: var(--s-5); }

/* ---- THE PHONE NUMBER. The largest object on the page. ---- */
.phone {
  display: inline-block;
  margin-top: var(--s-8);
  text-decoration: none;
}
.phone-n {
  display: block;
  font-size: var(--t-phone);
  font-weight: 900;
  font-stretch: var(--w-cond);     /* 62% — cut to fit the glass */
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--vinyl);
  /* THE ONLY GILT ON THE PAGE. Hard offset, no blur — a sign painter's
     drop shadow, not a 2011 bootstrap glow. */
  text-shadow: 2px 2px 0 var(--gold);
  white-space: nowrap;
}

.status {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-6);
  color: var(--gold);
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.status .dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--gold);
  background: transparent;              /* hollow = closed (the honest default) */
  flex: none;
}
.status.is-open .dot { background: var(--gold); }
.status:not(.is-open) { opacity: .78; }

.hours {
  margin-top: var(--s-2);
  color: var(--gold);
  font-size: var(--t-micro);
  letter-spacing: .04em; text-transform: uppercase;
  opacity: .85;
}

.window-cta { margin-top: var(--s-7); }


/* ============================================================
   THE DECAL STRIP — carriers, as stickers on the door
   ============================================================ */

.decals { background: var(--plate); padding-block: var(--s-9); }

.decals h2, .street h2 {
  color: var(--awning);
  font-size: var(--t-h2); font-weight: 800; font-stretch: var(--w-sect);
  line-height: var(--lh-head); letter-spacing: var(--tr-display);
  text-transform: uppercase;
}

/* The second ink, on plate. */
.second-l {
  color: var(--second-light);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.4;
  max-width: var(--measure);
}
.decals .second-l:first-of-type { margin-top: var(--s-4); }

.chips {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-7);
}
.chips li {
  padding: var(--s-3) var(--s-5);
  border: 2px solid var(--awning);
  border-radius: var(--r-decal);
  background: var(--plate);
  color: var(--awning);
  font-size: var(--t-small); font-weight: 700; font-stretch: var(--w-sect);
  letter-spacing: .04em; text-transform: uppercase;
  transform: rotate(var(--r, 0deg));   /* hand-set in the HTML, never random */
}

.decals-close {
  margin-top: var(--s-7);
  max-width: var(--measure);
  font-size: var(--t-lead); font-weight: 600;
  color: var(--ink);
}


/* ============================================================
   THE PLAQUES — the coverage list IS the form's first field
   ============================================================ */

.plaques { background: var(--awning); padding-block: var(--s-9); color: var(--vinyl); }

.plaques h2 {
  color: var(--vinyl);
  font-size: var(--t-h2); font-weight: 800; font-stretch: var(--w-sect);
  line-height: var(--lh-head); letter-spacing: var(--tr-display);
  text-transform: uppercase;
}
.plaques-lede { margin-top: var(--s-4); font-size: var(--t-lead); font-weight: 600; }
.plaques .second { font-size: var(--t-small); }
.plaques .second:first-of-type { margin-top: var(--s-3); }

.plaque-grid {
  display: grid; gap: var(--s-4);
  margin-top: var(--s-7);
}
@media (min-width: 900px) { .plaque-grid { grid-template-columns: 1fr 1fr; } }

.plaque { position: relative; }

/* The real checkbox. Visually replaced, never hidden from the keyboard. */
.plaque > input {
  position: absolute; top: var(--s-5); left: var(--s-5);
  width: 26px; height: 26px; margin: 0;
  accent-color: var(--red);
  cursor: pointer;
  z-index: 1;
}
.plaque > label {
  display: grid; gap: var(--s-2);
  padding: var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + 26px + var(--s-4));
  background: var(--plate-deep);
  border: 2px solid transparent;
  border-radius: var(--r-decal);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur-ui) var(--ease-ui),
              background-color var(--dur-ui) var(--ease-ui);
  height: 100%;
}
.plaque > label:hover { background: #E1E6E0; }
.plaque > input:checked + label { border-color: var(--red); background: #E7EBE6; }

.plaque-h {
  font-size: var(--t-h3); font-weight: 800; font-stretch: var(--w-sect);
  letter-spacing: var(--tr-display); text-transform: uppercase;
  color: var(--awning);
}
.plaque-b { font-weight: 600; }
.plaque-s { font-size: var(--t-small); color: var(--ink-soft); }
.plaque-2 {
  font-size: var(--t-small); font-weight: 500;
  color: var(--second-light);
  line-height: 1.35;
}
.plaque-2:first-of-type { margin-top: var(--s-2); }

.plaques-close {
  margin-top: var(--s-7);
  max-width: var(--measure);
  font-size: var(--t-lead); font-weight: 600;
  color: var(--vinyl);
}


/* ============================================================
   GORHAM STREET — plain proof + the language legend
   ============================================================ */

.street { background: var(--plate); padding-block: var(--s-9); }

.proof { display: grid; gap: var(--s-4); margin-top: var(--s-6); max-width: var(--measure); }
.proof p { font-size: var(--t-lead); }

.legend {
  margin-top: var(--s-8);
  padding: var(--s-5);
  border: 1px solid var(--hair);
  border-left: 4px solid var(--second-light);
  border-radius: var(--r-decal);
  max-width: var(--measure);
  background: rgba(255,255,255,.4);
}
.legend p { font-size: var(--t-small); color: var(--ink); }
.swatch { color: var(--second-light); font-weight: 700; }
.legend-langs { margin-top: var(--s-3); display: flex; gap: var(--s-5); }
.legend-langs .second-l { font-weight: 700; font-size: var(--t-body); }


/* ============================================================
   THE COUNTER — the trust slot.
   The things a lead-gen scam site cannot cheaply counterfeit:
   a real door, a named human, a license number.
   ============================================================ */

.counter { background: var(--plate-deep); padding-block: var(--s-9); }

.counter-grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 720px) { .counter-grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--s-8); } }

.door figcaption {
  margin-top: var(--s-3);
  font-size: var(--t-small); color: var(--ink-soft);
}
.door-photo { width: 100%; height: auto; border-radius: var(--r-decal); border: 1px solid var(--hair); }

/* The placeholder. Deliberately reads as a placeholder — it is not
   pretending to be a photograph. Delete it when the real one arrives. */
.door-ph {
  display: grid; place-content: center; justify-items: center; gap: var(--s-2);
  aspect-ratio: 4 / 3;
  background: var(--awning);
  border-radius: var(--r-decal);
  outline: 2px dashed var(--gold); outline-offset: -10px;
  padding: var(--s-5);
  text-align: center;
}
.door-ph-n {
  font-size: clamp(3rem, 9vw, 4.5rem); font-weight: 900; font-stretch: var(--w-cond);
  line-height: 1; color: var(--vinyl); text-shadow: 2px 2px 0 var(--gold);
}
.door-ph-s {
  font-size: var(--t-small); font-weight: 700; letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; color: var(--gold);
}
.door-ph-note {
  margin-top: var(--s-4);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--vinyl); opacity: .55;
}

.counter-copy h2 {
  color: var(--awning);
  font-size: var(--t-h2); font-weight: 800; font-stretch: var(--w-sect);
  line-height: var(--lh-head); letter-spacing: var(--tr-display);
  text-transform: uppercase;
}
.counter-copy p { margin-top: var(--s-5); max-width: var(--measure); }
.walkin { font-size: var(--t-lead); font-weight: 700; }

/* The phone number sits in a wide panel and can afford a 9% overhang. This one
   is a line of body text that fills its container, so the same overhang pushes
   the loop off the right edge of a phone screen. Tighter, and padded so the
   ink still clears the type. */
.circled-ink { padding-inline: var(--s-3); }
.circled-ink .pen {
  top: -22%; left: -2%;
  width: 104%; height: 144%;
}
.nolead { font-weight: 600; }
.counter .second-l { margin-top: var(--s-4); }


/* ============================================================
   THE SLIP — the form
   ============================================================ */

.slip { background: var(--plate-deep); padding-block: var(--s-9) var(--s-10); border-top: 1px solid var(--hair); }

.slip h2 {
  color: var(--awning);
  font-size: var(--t-h2); font-weight: 800; font-stretch: var(--w-sect);
  line-height: var(--lh-head); letter-spacing: var(--tr-display);
  text-transform: uppercase;
  max-width: 20ch;
}
.slip .second-l:first-of-type { margin-top: var(--s-4); }
.slip-lede { margin-top: var(--s-5); font-size: var(--t-lead); }
.slip-lede a { color: var(--awning); font-weight: 800; text-underline-offset: 3px; }

.form {
  margin-top: var(--s-7);
  max-width: 34rem;
  display: grid; gap: var(--s-6);
  padding: var(--s-6);
  background: var(--plate);
  border: 1px solid var(--hair);
  border-radius: var(--r-decal);
  box-shadow: var(--shadow-slip);
}

/* Honeypot. Off-screen, not display:none — bots read the CSS too. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-alert {
  padding: var(--s-4);
  border: 1px solid var(--red);
  border-left: 4px solid var(--red);
  border-radius: var(--r-decal);
  background: #FBE9E6;
  color: var(--ink);            /* never red text — red is fills and strokes */
  font-size: var(--t-small);
}
.form-alert strong { display: block; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.form-alert p { margin-top: var(--s-2); }
.form-alert.is-ok { border-color: var(--awning); border-left-color: var(--awning); background: #DEE7E1; }

.f-set { display: grid; gap: var(--s-3); }
.f-set legend, .f-lab {
  font-size: var(--t-small); font-weight: 800; font-stretch: var(--w-sect);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--awning);
}
.f-note { font-size: var(--t-micro); color: var(--ink-soft); }
.f-opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-soft); }

.f-checks { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
@media (min-width: 480px) { .f-checks { grid-template-columns: 1fr 1fr; } }
.f-check {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 44px; padding: 0 var(--s-3);
  border: 1px solid var(--hair); border-radius: var(--r-decal);
  background: #fff;
  cursor: pointer;
  font-size: var(--t-small);
}
.f-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--red); flex: none; }
.f-check:has(input:checked) { border-color: var(--red); }

.f-row { display: grid; gap: var(--s-2); }
.f-in {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-3) var(--s-4);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--r-decal);
  color: var(--ink);
  transition: border-color var(--dur-ui) var(--ease-ui);
}
textarea.f-in { min-height: 96px; resize: vertical; line-height: 1.5; }
.f-in:hover { border-color: var(--ink-soft); }
.f-in[aria-invalid="true"] { border-left: 3px solid var(--red); }

.f-sel { position: relative; }
.f-sel select { appearance: none; padding-right: 44px; cursor: pointer; }
.f-chev {
  position: absolute; right: 18px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.f-help { font-size: var(--t-micro); color: var(--ink-soft); }
.f-err {
  font-size: var(--t-small); font-weight: 600; color: var(--ink);
  display: flex; gap: var(--s-2); align-items: flex-start;
}
/* The glyph is awning, not red (red on plate is 3.85:1 — fails AA, and red on
   this page means "tap this"). The error's red signal is the field's left
   border — a stroke, which is what red is allowed to be. */
.f-err::before { content: "⚠"; color: var(--awning); font-weight: 800; flex: none; }

.btn-send { width: 100%; margin-top: var(--s-2); }
.btn-send[disabled] { opacity: .6; cursor: progress; }

.slip-under { text-align: center; font-size: var(--t-small); color: var(--ink-soft); }
.slip-under a { color: var(--awning); font-weight: 800; }

.slip-decs {
  margin-top: var(--s-7);
  max-width: var(--measure);
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.slip-decs a { color: var(--awning); font-weight: 700; }


/* ============================================================
   THE DOOR (footer)
   ============================================================ */

.doorf { background: var(--awning-deep); color: var(--vinyl); padding-block: var(--s-8) var(--s-6); }
.doorf-grid { display: grid; gap: var(--s-7); }
@media (min-width: 720px) { .doorf-grid { grid-template-columns: repeat(3, 1fr); } }

.ft-name { font-weight: 800; font-stretch: var(--w-sect); text-transform: uppercase; letter-spacing: .04em; }
.ft-h {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; color: var(--gold);
}
.ft-t { margin-top: var(--s-3); font-size: var(--t-small); line-height: 1.6; opacity: .9; }
.ft-link { color: var(--vinyl); font-weight: 700; text-underline-offset: 3px; }
.ft-link:hover { color: var(--gold); }
/* Second ink, on the dark door. */
.second-d { color: var(--second-dark); font-weight: 600; opacity: 1; }

.ft-legal {
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid var(--hair-dark);
  font-size: var(--t-micro); opacity: .65;
}


/* ============================================================
   STICKY CALL BAR (mobile)
   Shown once the hero leaves. Hidden again when the form is in
   view, so it never sits on top of SEND IT.
   ============================================================ */

.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; align-items: center; justify-content: center;
  min-height: var(--bar-call);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--red); color: var(--vinyl);
  font-weight: 800; font-stretch: var(--w-sect);
  letter-spacing: var(--tr-button); text-transform: uppercase;
  text-decoration: none;
  transform: translateY(100%);
  transition: transform var(--dur-ui) var(--ease-ui);
}
.callbar.is-up { transform: translateY(0); }
/* `hidden` must beat `display:flex`, or the bar shows on desktop. */
.callbar[hidden] { display: none; }
@media (min-width: 721px) { .callbar { display: none; } }

body.has-callbar { padding-bottom: calc(var(--bar-call) + env(safe-area-inset-bottom)); }


/* ============================================================
   REDUCED MOTION — the backstop.
   The pen is simply ALREADY DRAWN. Not hidden, not weakened.
   If the static state is sufficient, the motion was never the idea.
   ============================================================ */

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