/* West Coast Fencing Academy, Austin — free trial landing page.
   Built from docs/design/2026-09-11-hero-form-directions-r3/design_handoff_free_trial_page/README.md
   Every value in the handoff's token tables has a custom property below. */

/* ---------------------------------------------------------------- fonts */
/* Self-hosted. Archivo is the variable face (wdth axis); Barlow ships as
   three static weights. Subsets and file names follow the Google Fonts
   latin / latin-ext split the files were downloaded from. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-var-latin.woff2") format("woff2");
  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";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-var-latin-ext.woff2") format("woff2");
  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;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/barlow-300-latin.woff2") format("woff2");
  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: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/barlow-300-latin-ext.woff2") format("woff2");
  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;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-400-latin.woff2") format("woff2");
  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: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-400-latin-ext.woff2") format("woff2");
  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;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/barlow-500-latin.woff2") format("woff2");
  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: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/barlow-500-latin-ext.woff2") format("woff2");
  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;
}

/* --------------------------------------------------------------- tokens */

:root {
  /* Colour. Contrast figures are the handoff's measured pairs. */
  --navy: #141e32;
  --near-white: #f8fdfd;
  --slate: #4d5665;
  --pale-blue: #c6dae0;
  --gray: #8f8f8f;
  --gold: #e2c07d;
  --input-fill: #1b2740;

  --hero-scrim: linear-gradient(
    180deg,
    rgba(20, 30, 50, 0.86) 0%,
    rgba(20, 30, 50, 0.8) 40%,
    rgba(20, 30, 50, 0.95) 100%
  );
  --selected-fill: rgba(248, 253, 253, 0.1);
  --full-fill: rgba(143, 143, 143, 0.16);
  --banner-fill: rgba(248, 253, 253, 0.08);

  /* Type */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, sans-serif;
  --wdth-wide: "wdth" 118;
  --wdth-lockup: "wdth" 115;

  --type-h1: 46px;
  --type-h1-lh: 1.02;
  --type-h2: 32px;
  --type-h2-lh: 1.05;
  --type-h2-closing: 40px;
  --type-h2-coach: 30px;
  --type-h3-sm: 18px;
  --type-h3: 19px;
  --type-h3-lg: 20px;
  --type-h3-lh: 1.3;
  --type-lead: 19px;
  --type-lead-lh: 1.5;
  --type-body: 17px;
  --type-body-lh: 1.55;
  --type-body-sm: 16px;
  --type-body-sm-lh: 1.5;
  --type-label: 15px;
  --type-label-sm: 14px; /* the floor anywhere on the page */
  --type-stat: 34px;
  --type-stat-md: 30px;
  --type-stat-sm: 26px;

  /* Spacing, radius, focus */
  --pad-x: 22px;
  --section-y: 64px;
  --gap-card: 20px;
  --gap-card-lg: 28px;
  --content-max: 1180px;
  --content-max-narrow: 860px;
  --radius-pill: 50px;
  --radius-input: 8px;
  --radius-tag: 4px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --focus-offset-input: 2px;
  --target-min: 44px;
  --control-h: 52px;
  --control-h-lg: 56px;
  --button-h: 60px;

  /* Rules and borders. No shadows anywhere on this page. */
  --rule-navy: 2px;
  --rule-navy-strong: 3px;
  --rule-hair: 1.5px;
  --diagonal-h: 64px;
  --diagonal-h-lg: 70px;

  /* The narrow-screen call bar: its padding, the button and the bar's own
     top rule. The footer reserves exactly this much so the bar never covers
     its last line. */
  --call-bar-pad: 10px;
  --call-bar-h: calc(
    var(--call-bar-pad) * 2 + var(--control-h) + var(--rule-hair) +
      env(safe-area-inset-bottom, 0px)
  );
}

/* ---------------------------------------------------------------- reset */

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

/* Several blocks below set an explicit display, which would otherwise beat the
   browser's default styling for the hidden attribute. The form toggles whole
   blocks with it, so make it win everywhere. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--near-white);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  overflow-wrap: break-word;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p,
figure,
blockquote,
fieldset,
legend {
  margin: 0;
}

fieldset {
  border: 0;
  padding: 0;
  min-width: 0;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

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

/* ----------------------------------------------------------- focus ring */

:focus-visible {
  outline: var(--focus-width) solid var(--navy);
  outline-offset: var(--focus-offset);
}

.on-navy :focus-visible {
  outline-color: var(--gold);
}

/* ------------------------------------------------------------ skip link */

.skip-link {
  position: absolute;
  left: var(--pad-x);
  top: -100px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 0 18px;
  background: var(--near-white);
  color: var(--navy);
  border: var(--rule-navy) solid var(--navy);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-body-sm);
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

/* ----------------------------------------------------------- structure */

.section {
  padding: var(--section-y) var(--pad-x);
}

.section--tight-top {
  padding-top: 0;
}

.section--navy {
  background: var(--navy);
  color: var(--near-white);
}

.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
}

.wrap--narrow {
  max-width: var(--content-max-narrow);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.stack--wide {
  gap: 34px;
}

.stack--tight {
  gap: 16px;
}

/* Every multi-column block is one auto-fit grid, so 320px collapses to one
   column with no media query. min() keeps the track from exceeding the
   container at 320px, which is what would otherwise force a sideways scroll. */
.grid {
  display: grid;
  gap: var(--gap-card);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--col), 100%), 1fr));
}

.rule-top {
  border-top: var(--rule-navy) solid var(--navy);
  padding-top: 40px;
}

/* One 1.5px gold hairline per navy section, never as text. */
.hair-gold {
  border-top: var(--rule-hair) solid var(--gold);
  padding-top: 18px;
}

/* The blade diagonal: a band of near-white cut across the top of a navy
   section. The only use of the motif, and it never crosses text. */
.diagonal {
  height: var(--diagonal-h);
  background: var(--near-white);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
}

.diagonal--lg {
  height: var(--diagonal-h-lg);
}

/* -------------------------------------------------------------- type */

.h1 {
  font-family: var(--font-display);
  font-variation-settings: var(--wdth-wide);
  font-weight: 700;
  font-size: var(--type-h1);
  line-height: var(--type-h1-lh);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.h2 {
  font-family: var(--font-display);
  font-variation-settings: var(--wdth-wide);
  font-weight: 700;
  font-size: var(--type-h2);
  line-height: var(--type-h2-lh);
  text-transform: uppercase;
  text-wrap: balance;
}

.h2--closing {
  font-size: var(--type-h2-closing);
  line-height: var(--type-h1-lh);
}

.h2--coach {
  font-size: var(--type-h2-coach);
  line-height: 1.08;
}

.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-h3);
  line-height: var(--type-h3-lh);
}

.h3--sm {
  font-size: var(--type-h3-sm);
}

.h3--lg {
  font-size: var(--type-h3-lg);
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pale-blue);
}

.lead {
  font-size: var(--type-lead);
  line-height: var(--type-lead-lh);
  text-wrap: pretty;
}

.body {
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
}

.body-sm {
  font-size: var(--type-body-sm);
  line-height: var(--type-body-sm-lh);
}

.stat {
  font-family: var(--font-display);
  font-variation-settings: var(--wdth-wide);
  font-weight: 700;
  font-size: var(--type-stat);
  line-height: 1.1;
}

.stat--md {
  font-size: var(--type-stat-md);
}

.stat--sm {
  font-size: var(--type-stat-sm);
}

.muted {
  color: var(--slate);
}

.on-navy .muted {
  color: var(--pale-blue);
}

.measure {
  max-width: 520px;
}

.measure--sm {
  max-width: 440px;
}

/* --------------------------------------------------------- components */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: 12px;
  min-height: var(--button-h);
  padding: 0 26px;
  border: 4px solid var(--near-white);
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: var(--near-white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-h3-sm);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--slate);
}

.btn[disabled],
.btn[aria-busy="true"] {
  background: var(--pale-blue);
  border-color: var(--pale-blue);
  color: var(--slate);
  cursor: not-allowed;
}

.btn__arrow {
  flex: none;
}

.btn__spinner {
  flex: none;
  animation: spin 900ms linear infinite;
}

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

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: 12px;
  min-height: var(--control-h);
  padding: 0 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-body);
  text-decoration: none;
  background: transparent;
  cursor: pointer;
}

.pill--on-navy {
  border: var(--rule-hair) solid var(--pale-blue);
  color: var(--near-white);
}

.pill--on-navy:hover {
  background: var(--slate);
}

.pill--on-light {
  border: var(--rule-navy) solid var(--navy);
  color: var(--navy);
}

.pill--on-light:hover {
  background: var(--navy);
  color: var(--near-white);
}

.link {
  color: var(--navy);
}

.link:hover {
  color: var(--slate);
}

.on-navy .link {
  color: var(--near-white);
}

.on-navy .link:hover {
  color: var(--pale-blue);
}

/* A link that has to stay a 44px target even though its text is one line. */
.target {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: var(--target-min);
}

/* ------------------------------------------------------------- rating */

.rating {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 12px;
  min-height: var(--target-min);
  padding: 8px 0;
  text-decoration: none;
}

.rating__score {
  font-family: var(--font-display);
  font-variation-settings: var(--wdth-wide);
  font-weight: 700;
  font-size: var(--type-stat-sm);
  color: var(--near-white);
}

.rating__lines {
  display: flex;
  flex-direction: column;
}

.rating__count {
  font-size: var(--type-body);
  color: var(--near-white);
  text-decoration: underline;
}

.rating__date {
  font-size: var(--type-label);
  color: var(--pale-blue);
}


/* --------------------------------------------------------------- hero */

.hero {
  position: relative;
  background: var(--navy);
  color: var(--near-white);
  overflow: hidden;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
}

.hero__inner {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  min-height: 620px;
  padding: 20px var(--pad-x) 44px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

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

/* The supplied logo is #0043BC artwork inside its own white ring on a
   transparent field (measured 2026-09-11: 34.9% of pixels transparent), so it
   reads on navy unaided and needs no near-white disc behind it. */
.brand__mark {
  flex: none;
  width: 52px;
  height: 52px;
}

.brand__lines {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand__name {
  font-family: var(--font-display);
  font-variation-settings: var(--wdth-lockup);
  font-weight: 700;
  font-size: var(--type-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--near-white);
}

.brand__place {
  font-family: var(--font-display);
  font-size: var(--type-label-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pale-blue);
}

.hero__content {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 660px;
}

/* The call button and, beside it or under it on a narrow screen, the lighter
   "Or leave your number" link to the form. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}

.hero__actions > * {
  align-self: center;
}

/* ------------------------------------------------------------- cards */

.step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: var(--rule-navy) solid var(--navy);
  padding-top: 16px;
}

.pitch {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card {
  border: var(--rule-navy) solid var(--navy);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card--slate {
  border: var(--rule-hair) solid var(--slate);
  max-width: 640px;
}

.day {
  border: var(--rule-hair) solid var(--gray);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.day--trial {
  border: var(--rule-navy-strong) solid var(--navy);
}

.day__name {
  font-family: var(--font-display);
  font-size: var(--type-label-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

.day--trial .day__name {
  color: var(--navy);
}

.day__time {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-h3-sm);
  color: var(--navy);
}

/* One class on a day card: optional age line, time, level. A day with two
   classes stacks two groups with a pale rule between them. */
.day__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.day__group + .day__group {
  border-top: var(--rule-hair) solid var(--pale-blue);
  padding-top: 12px;
}

.day__age {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-h3-lg);
  color: var(--navy);
}

/* Under an age line the time steps down, so the age reads first. */
.day__age + .day__time {
  font-weight: 500;
  font-size: var(--type-body);
}

.price-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--type-body);
  color: var(--slate);
}

.price-list b {
  color: var(--navy);
  font-weight: 500;
}

.quote {
  margin: 0;
  border-top: var(--rule-navy) solid var(--navy);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.quote blockquote {
  font-size: var(--type-lead);
  line-height: var(--type-lead-lh);
  color: var(--navy);
}

.quote figcaption {
  font-size: var(--type-body-sm);
  color: var(--slate);
}

.faq {
  display: flex;
  flex-direction: column;
}

.faq__item {
  border-top: var(--rule-hair) solid var(--gray);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq__item:last-child {
  border-bottom: var(--rule-hair) solid var(--gray);
}

.photo {
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.photo--coach {
  object-position: 50% 22%;
}

.photo--lesson {
  object-position: 50% 40%;
}

/* -------------------------------------------------------- booking form */

.book__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 8px var(--pad-x) var(--section-y);
  display: grid;
  gap: 36px;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: start;
}

/* Closing copy and its call button first, the call-back form after it: one
   column stacks them in that order, two columns put the copy left and the
   form right, as in the mockup. Both follow the DOM order, so the call button
   in the pitch keeps the tab order and the visual order the same. The grid
   flips to two columns at a 720px viewport: two 320px tracks plus a 36px gap
   need 676px of container once the 22px gutters are taken off. */
.book__pitch {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 14px;
}

.book__box {
  border: var(--rule-hair) solid var(--pale-blue);
  scroll-margin-top: 16px;
}

.form {
  background: var(--navy);
  padding: 26px var(--pad-x) 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form__title {
  font-family: var(--font-display);
  font-variation-settings: var(--wdth-wide);
  font-weight: 700;
  font-size: 28px;
  line-height: var(--type-h2-lh);
  text-transform: uppercase;
  color: var(--near-white);
}

.form__fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

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

.field__label {
  font-family: var(--font-display);
  font-size: var(--type-body-sm);
  font-weight: 500;
  color: var(--near-white);
}

.field__optional {
  font-weight: 400;
  color: var(--pale-blue);
}

.field__help {
  font-size: var(--type-label);
  color: var(--pale-blue);
}

.input {
  width: 100%;
  height: var(--control-h);
  padding: 0 14px;
  border: var(--rule-hair) solid var(--pale-blue);
  border-radius: var(--radius-input);
  background: var(--input-fill);
  color: var(--near-white);
  font-family: var(--font-body);
  font-size: var(--type-body);
}

textarea.input {
  height: auto;
  padding: 12px 14px;
  resize: vertical;
  min-height: var(--control-h-lg);
}

.input::placeholder {
  color: var(--pale-blue);
}

.field__error {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: var(--type-body-sm);
  line-height: 1.4;
  color: var(--near-white);
}

.field__error svg {
  flex: none;
  margin-top: 2px;
}


/* Bottom-aligned, so the two inputs line up even when one label wraps to a
   second line and the other does not. */
.field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}

.field-row > .field {
  justify-content: flex-end;
}

.field-row > .field:first-child {
  flex: 3 1 180px;
  min-width: 0;
}

.field-row > .field:last-child {
  flex: 1 1 90px;
  min-width: 0;
}

/* Slot picker. A full class stays visible and disabled — never hidden, and
   never struck through. */
.slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--control-h-lg);
  padding: 10px 14px;
  border: var(--rule-hair) solid var(--pale-blue);
  border-radius: var(--radius-input);
  cursor: pointer;
}

.slot__lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.slot__when {
  font-size: var(--type-body);
  color: var(--near-white);
}

.slot__group {
  font-size: var(--type-label);
  color: var(--pale-blue);
}

.slot__tag {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--type-label-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pale-blue);
}

.slot.is-selected {
  border-width: var(--rule-navy-strong);
  border-color: var(--near-white);
  background: var(--selected-fill);
}

.slot.is-selected .slot__tag {
  color: var(--near-white);
}

.slot.is-full {
  border-color: var(--gray);
  background: var(--full-fill);
  opacity: 0.75;
  cursor: not-allowed;
}

.slot.is-focus {
  outline: var(--focus-width) solid var(--gold);
  outline-offset: var(--focus-offset-input);
}

/* Bot check box */
.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--target-min);
  cursor: pointer;
  font-size: var(--type-body);
  line-height: 1.4;
  color: var(--near-white);
}

.choice__box {
  flex: none;
  width: 26px;
  height: 26px;
  border: var(--rule-hair) solid var(--pale-blue);
  border-radius: var(--radius-tag);
  display: flex;
  align-items: center;
  justify-content: center;
}

.choice input:checked + .choice__box {
  background: var(--near-white);
}

.choice__tick {
  display: none;
}

.choice input:checked + .choice__box .choice__tick {
  display: block;
}

/* The ring goes round the whole 44px row, not just the 26px box, so the
   focused target and the indicated target are the same thing. */
.choice.is-focus {
  outline: var(--focus-width) solid var(--gold);
  outline-offset: var(--focus-offset-input);
}

.form__submit {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form__submit .btn {
  align-self: stretch;
  min-height: var(--control-h-lg);
  padding: 0 24px;
}

.form__footnote {
  font-size: var(--type-body-sm);
  line-height: 1.45;
  color: var(--pale-blue);
  text-align: center;
}

/* The phone number in the footnote is a real call button, so it carries a
   thumb-sized target of its own rather than the 19px of its line box. */
.form__footnote a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
}

/* Banner: 1.5px near-white border, 5px gold left edge. */
.banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: var(--rule-hair) solid var(--near-white);
  border-left: 5px solid var(--gold);
  padding: 14px 16px;
  background: var(--banner-fill);
}


.banner svg {
  flex: none;
  margin-top: 2px;
}

.banner__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.banner__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-body-sm);
  color: var(--near-white);
}

.banner__text {
  font-size: var(--type-body-sm);
  line-height: 1.45;
  color: var(--near-white);
}

.banner .pill {
  min-height: var(--target-min);
  padding: 0 20px;
  font-size: var(--type-body-sm);
}

/* Success panel */
.done {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: var(--rule-hair) solid var(--pale-blue);
  padding: 22px 20px;
}


.done__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.done__title {
  font-family: var(--font-display);
  font-variation-settings: var(--wdth-wide);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--near-white);
}

.done__lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--type-body);
  line-height: var(--type-body-sm-lh);
  color: var(--near-white);
}

.done__when {
  font-family: var(--font-display);
  font-weight: 600;
}


/* ----------------------------------------------------------- call bar */

/* Fixed to the bottom on narrow screens only, the same 720px line the closing
   section's grid flips at. It does not animate in or out. */
.call-bar {
  display: none;
}

@media (max-width: 719.98px) {
  .call-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: block;
    padding: var(--call-bar-pad) var(--pad-x);
    padding-bottom: calc(var(--call-bar-pad) + env(safe-area-inset-bottom, 0px));
    background: var(--navy);
    border-top: var(--rule-hair) solid var(--slate);
  }

  /* app.js sets this class while a form field has focus. */
  .is-form-focus .call-bar {
    display: none;
  }

}

/* One line from a 360px viewport up; on narrower phones the label may wrap
   and the button grows, which min-height allows. */
.call-bar__btn {
  width: 100%;
  min-height: var(--control-h);
  padding: 4px 14px;
  font-size: var(--type-body-sm);
  letter-spacing: 0;
  text-align: center;
}

/* ------------------------------------------------------------- footer */

.site-footer {
  background: var(--navy);
  color: var(--pale-blue);
  border-top: var(--rule-hair) solid var(--slate);
  padding: 36px var(--pad-x) 48px;
}

.site-footer .wrap {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  font-size: var(--type-body-sm);
  line-height: 1.6;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Under 720px the fixed call bar sits over the bottom of the page, so the
   footer grows by the bar's height and its last line scrolls clear of it.
   This follows the base footer rule on purpose: its padding shorthand would
   otherwise override the bottom padding. */
@media (max-width: 719.98px) {
  .site-footer {
    padding-bottom: calc(48px + var(--call-bar-h));
  }
}

/* ---------------------------------------------------- reduced motion */

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

  .btn__spinner {
    animation-duration: 2.4s;
  }
}