/* ==========================================================================
   Clear Path Sites: styles.css
   Converted from the Claude Design export. Design is the source of truth.

   To rebrand a client site, edit the palette block below. Nothing outside
   :root should contain a raw hex value.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts (self-hosted, latin + latin-ext subsets)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/source-sans-3-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Palette and tokens
   -------------------------------------------------------------------------- */

:root {
  /* Core palette. Swap these to rebrand */
  --navy: #1a456d;
  --navy-deep: #10304d;   /* same hue, lightness x0.69, as the original pair */
  --blue: #1b5fd9;
  --blue-dark: #174fb6;
  --paper: #f4f6f8;
  --amber: #e6a63c;
  --ink: #1d2d3e;
  --slate: #47586a;
  --muted: #6a7887;
  --rule: #dfe5ea;

  /* Supporting shades derived from the palette */
  --white: #ffffff;
  --surface: #f8fafb;          /* card fill inside white bands */
  --rule-soft: #e4e9ee;        /* band hairlines */
  --link-hover: #143f97;
  --amber-dark: #d99a2b;       /* amber button hover */
  --amber-deep: #b07f1e;       /* eyebrow text, readable on white */
  --amber-ink: #24180a;        /* text on amber buttons */
  --amber-ink-soft: #3a2a08;   /* text on amber badges */
  --ink-soft: #33445a;         /* form labels, plan items */
  --nav-link: #3d4d5e;
  --field-border: #c8d2db;
  --danger: #b3261e;

  /* On dark backgrounds */
  /* Re-checked against the current navy. Only --on-navy-faint needed a lift. */
  --on-navy: #b9c8d6;          /* 5.81:1 on navy, 7.92:1 on navy-deep */
  --on-navy-dim: #8fa3b6;      /* navy-deep only, 5.21:1 */
  --on-navy-faint: #8799aa;    /* was #6f8499, which reads 3.50:1 on navy-deep */
  --on-navy-price: #a9bccf;    /* 5.10:1 on navy */

  --nav-bg: rgba(244, 246, 248, 0.96);
  /* Built on navy-deep rather than navy. Shadows read as depth, and the new
     navy is light enough that using it would visibly weaken them. */
  --shadow-btn: 0 2px 6px rgba(16, 48, 77, 0.18);
  --shadow-card: 0 6px 24px rgba(16, 48, 77, 0.08);
  --footer-rule: rgba(255, 255, 255, 0.12);

  /* Type */
  --display: 'Bricolage Grotesque', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --body: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;

  /* Layout */
  --wrap: 1080px;
  --wrap-narrow: 760px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(48px, 6vw, 68px);
  --tap: 44px;                 /* minimum tap target */
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--link-hover); }

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

input, select, textarea, button { font-family: inherit; }

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  color: var(--navy);
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

h1 {
  font-weight: 800;
  font-size: clamp(36px, 6.5vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h2 { font-weight: 800; font-size: clamp(28px, 4.5vw, 42px); }

h3 { font-weight: 700; font-size: 21px; letter-spacing: normal; }

.eyebrow {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--amber-deep);
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
  color: var(--white);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Blue on navy is too low-contrast to read as a focus ring */
.cta a:focus-visible,
.footer a:focus-visible,
.plan__head a:focus-visible {
  outline-color: var(--amber);
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

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

.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

/* White band with hairlines, used for alternating sections */
.band {
  background: var(--white);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}

/* Separates two consecutive paper sections without filling one of them. */
.rule-top { border-top: 1px solid var(--rule-soft); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  font-weight: 700;
  text-align: center;
  border: none;
  cursor: pointer;
}

.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover { background: var(--blue-dark); color: var(--white); }

.btn--amber { background: var(--amber); color: var(--amber-ink); }
.btn--amber:hover { background: var(--amber-dark); color: var(--amber-ink); }

.btn--nav { font-size: 15px; padding: 10px 18px; border-radius: 8px; }
.btn--lg { font-size: 18px; padding: 16px 28px; border-radius: 10px; box-shadow: var(--shadow-btn); }
.btn--md { font-size: 16px; padding: 12px 22px; border-radius: 9px; white-space: nowrap; }
.btn--cta { font-size: 18px; padding: 16px 30px; border-radius: 10px; }
.btn--send { align-self: flex-start; font-size: 17px; padding: 14px 30px; border-radius: 10px; }

.btn--block {
  display: flex;
  width: 100%;
  font-size: 17px;
  padding: 15px 20px;
  border-radius: 10px;
}

.btn[disabled] { opacity: 0.65; cursor: progress; }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--rule);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* The stones mark sits beside the wordmark, which stays real text in
   Bricolage Grotesque. The SVG wordmark files are not used anywhere: their
   <text> elements declare no font-family, so they render in whatever fallback
   the viewer happens to have. */
.logo-mark {
  flex: none;
  width: 30px;
  height: 30px;
}

.logo-mark--reversed {
  width: 28px;
  height: 28px;
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  margin-right: auto;
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.nav__logo:hover { color: var(--navy-deep); }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.5vw, 26px);
  font-weight: 600;
  font-size: 15px;
}

.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--nav-link);
}

.nav__links a:hover { color: var(--navy); }

/* Logo + 4 links + CTA wraps to three rows on a narrow phone, and the bar is
   sticky, so it would eat the viewport. Drop to logo + CTA. Every one of those
   sections is still reachable by scrolling and from the footer. */
@media (max-width: 640px) {
  .nav__links { display: none; }
  .nav__inner { gap: 12px; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-top: clamp(56px, 10vw, 120px);
  padding-bottom: clamp(48px, 8vw, 96px);
}

/* Centred while the right-hand side is empty, so the whitespace reads as
   deliberate rather than as a missing column.

   When the phone mockup is ready, make .hero a two-column grid and drop the
   centring:
     .hero { display: grid; grid-template-columns: minmax(0, 1fr) auto;
             gap: clamp(32px, 5vw, 64px); align-items: center; }
     .hero__inner { margin-inline: 0; text-align: left; }
     .hero__sub { margin-inline: 0; }
     .hero__actions { justify-content: flex-start; }
   The mockup goes in a sibling of .hero__inner. Below ~860px it should drop
   to one column with the mockup underneath. */
.hero__inner {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.hero h1 { margin: 0 0 20px; }

/* Each sentence owns its own line, in the headline and the subhead. Block
   spans rather than a <br>, so a sentence too long for the screen still wraps
   within itself instead of breaking at a fixed point. */
.hero .line { display: block; }

/* Hero emphasis, linking "website" and "business" without relying on their
   vertical alignment, which breaks once either sentence wraps.
   Swap the modifier class on the <h1> to compare:

     .hero__title--weight   accent words at 800 against a 700 base
     .hero__title--color    accent words in --amber-deep

   Bricolage is loaded at 500-800 and the heading already sat at the 800
   ceiling, so the weight version works by dropping the base to 700 rather
   than pushing the accent words higher.

   The colour version uses --amber-deep, not --amber. Raw amber on paper is
   1.96:1, which fails even the 3:1 large-text threshold. --amber-deep is
   3.29:1, which passes for this heading at every size in its clamp. */
.hero__title--weight { font-weight: 700; }
.hero__title--weight .accent { font-weight: 800; }

.hero__title--color .accent { color: var(--amber-deep); }

.hero__sub {
  margin: 0 auto 32px;
  max-width: 560px;
  font-size: clamp(18px, 2.4vw, 21px);
  line-height: 1.55;
  color: var(--slate);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hero__trust {
  margin: 18px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

/* On phones the 36px floor is too big for the headline to keep one sentence
   per line: "You run the business." measures 355px against 343px of content
   at 375px wide, so it wraps to two. This scales it down just far enough,
   from 27px at 320 to the same 36px by the time the screen is wide enough to
   carry it, so nothing changes above 430px. */
@media (max-width: 430px) {
  .hero h1 { font-size: clamp(27px, 8.6vw, 36px); }
}

/* --------------------------------------------------------------------------
   Work / demo builds
   -------------------------------------------------------------------------- */

.work h2 { margin: 0 0 12px; }

.work__lede {
  margin: 0 0 36px;
  max-width: 620px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--slate);
  text-wrap: pretty;
}

/* Explicitly two columns, so four cards make a 2x2 block. auto-fit gave three
   across at this width and left the fourth card stranded on its own row. The
   section keeps the 1080px wrap, so cards top out around 486px wide. */
.work__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  overflow: hidden;
}

/* A demo card only becomes interactive once it has a live URL, which is
   expressed by the presence of .demo__link. Without one the card stays an
   inert block. The link stretches over the whole card so the entire thing is
   clickable, while its accessible name stays "View live site" rather than the
   card's full contents. */
.demo:has(.demo__link) {
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.demo:has(.demo__link):hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: var(--shadow-card);
}

.demo:has(.demo__link):hover .demo__link { color: var(--blue-dark); }

/* The ring belongs on the card, not on the stretched anchor, so keyboard users
   see the whole target they are about to activate. */
.demo:has(.demo__link):focus-within {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-color: var(--blue);
}

.demo__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  margin-right: auto;          /* pushes the badge to the far edge */
  font-size: 15px;
  font-weight: 700;
  color: var(--blue);
}

.demo__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.demo__link:focus-visible { outline: none; }

.demo__shot {
  position: relative;
  aspect-ratio: 16 / 10;
}

.demo__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The badge used to sit over the top-right of the screenshot, where it landed
   on the demo site's own header. It now shares the card's footer row with the
   "View live site" link, so the screenshot is never covered. */
.demo__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* keeps the badge right when it is alone */
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.demo__badge {
  flex: none;
  background: var(--amber);
  color: var(--amber-ink-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  pointer-events: none;
}

/* Padding and type step up with the wider two-column cards, so they read as
   bigger cards rather than the old ones stretched. */
.demo__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px 24px;
}

.demo__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.demo__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  color: var(--navy);
}

.demo__type {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

.demo__note {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--slate);
}

.work__foot {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* Focusable because it scrolls below 640px, so keyboard users can reach it
   without relying on the browser auto-focusing scroll containers. */
.work__grid:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (max-width: 640px) {
  /* Stacked vertically, four cards run about 1.9 screens even with the preview
     capped at 170px, and shrinking it enough to fit would leave the screenshot
     too small to read. So the cards become a horizontal scroll-snap carousel
     instead, which keeps the section to roughly two thirds of a screen. */
  .work__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* Pull out to the viewport edges so cards can scroll past them, then pad
       back in so the first card lines up with the text above. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 6px;
    scroll-padding-inline-start: var(--gutter);
  }

  .demo {
    scroll-snap-align: start;
  }

  .demo__body {
    gap: 6px;
    padding: 16px 18px 18px;
  }

  .demo__name { font-size: 19px; }
  .demo__type { font-size: 14px; }
  .demo__note { font-size: 15px; line-height: 1.5; }
}

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */

.steps h2 { margin: 0 0 40px; }

.steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(24px, 4vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step { counter-increment: step; }

.step::before {
  content: counter(step);
  display: block;
  margin-bottom: 14px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  color: var(--amber);
}

.step h3 { margin: 0 0 10px; }

.step p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate);
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.pricing h2 { margin: 0 0 36px; text-align: center; }

.plan {
  max-width: 460px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.plan__head {
  background: var(--navy);
  padding: 28px 28px 24px;
  text-align: center;
}

.plan__price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 46px;
  line-height: 1;
  color: var(--white);
}

.plan__per {
  font-size: 20px;
  font-weight: 600;
  color: var(--on-navy-price);
}

.plan__note {
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--amber);
}

.plan__body { padding: 26px 28px 28px; }

.plan__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.plan__list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.plan__list li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 7px;
  background: var(--amber);
  border-radius: 2px;
}

.pricing__foot {
  max-width: 460px;
  margin: 20px auto 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

/* The one section that breaks the layout rhythm. Everything else is a centred,
   max-width column; this one is full-bleed and split down the middle, with the
   photo running to the viewport edge. It stays light so navy is reserved for
   the closing CTA, which should be the page's only moment of contrast. */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  background: var(--white);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}

/* The photo used to run off the left edge of the viewport. A framed photo with
   a caption cannot do that, since the rounded corners and the caption would
   fall off-screen, so its left edge now lines up with the 1080px content
   column instead. Same mirrored calc the text column uses on its right. The
   section is still the only asymmetric, photo-led one, so it still breaks the
   page's rhythm. */
.about__figure {
  margin: 0;
  padding-block: clamp(48px, 6vw, 72px);
  padding-inline-start: max(
    var(--gutter),
    calc(100% - var(--wrap) / 2 + var(--gutter))
  );
}

/* A definite height, so the img's height: 100% resolves and object-fit has
   something to cover. */
.about__media {
  display: block;
  height: clamp(420px, 46vw, 640px);
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 12px;
}

/* Anchored to the top of the frame. The container's aspect changes a lot
   across breakpoints, and the photo is cropped waist-up with the hair starting
   6.5% down, so topping it out keeps the head intact however the frame is
   proportioned. */
.about__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.about__caption {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.about__text {
  align-self: center;
  padding-block: clamp(48px, 6vw, 72px);
  padding-inline-start: clamp(24px, 4vw, 56px);
  /* Right edge tracks the 1080px column the rest of the page sits in, so the
     section reads as deliberately offset rather than accidentally misaligned.
     100% here is the grid area, i.e. half the page, which keeps this exact
     regardless of scrollbar width. */
  padding-inline-end: max(
    clamp(24px, 4vw, 56px),
    calc(100% - var(--wrap) / 2 + var(--gutter))
  );
}

.about h2 {
  margin: 0 0 18px;
  color: var(--navy);
}

.about p {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate);
  text-wrap: pretty;
}

.about p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .about { grid-template-columns: 1fr; }

  .about__figure {
    padding-block: clamp(40px, 8vw, 56px) 0;
    padding-inline: var(--gutter);
  }

  /* Taller ceiling than the old 320px. Near the 760px end of this range the
     frame would otherwise be so letterboxed that it cropped to just the face. */
  .about__media {
    height: clamp(260px, 52vw, 400px);
  }

  .about__text {
    padding-block: clamp(28px, 5vw, 40px) clamp(40px, 8vw, 56px);
    padding-inline: var(--gutter);
  }
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq h2 { margin: 0 0 28px; }

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

.faq details { border-bottom: 1px solid var(--rule); }

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: var(--tap);
  padding: 18px 4px;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq__sign {
  flex: none;
  color: var(--amber);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  transition: transform 0.15s ease;
}

.faq details[open] .faq__sign { transform: rotate(45deg); }

.faq p {
  margin: 0;
  padding: 0 4px 20px;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--slate);
}

/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */

.cta { background: var(--navy); }

.cta__inner {
  padding-top: clamp(64px, 9vw, 110px);
  padding-bottom: clamp(64px, 9vw, 110px);
  text-align: center;
}

.cta h2 {
  margin: 0 0 16px;
  font-size: clamp(30px, 5vw, 48px);
  color: var(--white);
}

.cta__body {
  margin: 0 auto 30px;
  max-width: 520px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--on-navy);
  text-wrap: pretty;
}

.cta__foot {
  margin: 18px 0 0;
  font-size: 15px;
  color: var(--on-navy);
}

/* Hover brightens to white rather than --amber-dark, which reads only 4.07:1
   on navy. */
.cta__foot a { color: var(--amber); font-weight: 600; }
.cta__foot a:hover { color: var(--white); }

/* Phone and email links sitting inside a sentence. The negative margin keeps
   the line box where the design put it while the padding gives a thumb
   something to hit. */
.cta__foot a,
.notice a {
  display: inline-block;
  padding: 12px 4px;
  margin: -12px 0;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact h2 { margin: 0 0 32px; }

/* One column, centred in the section, everything inside left-aligned. The old
   two-column grid put a tall form beside a short details column, so the two
   never shared a baseline and the right-hand side always had a gap under it.
   A single column also avoids the awkward middle widths, roughly 700-900px,
   where two columns are each too narrow for the form's paired fields. */
.contact__inner {
  max-width: 560px;
  margin-inline: auto;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
}

.field input,
.field select,
.field textarea {
  padding: 13px 14px;
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--field-border);
  border-radius: 8px;
}

.field textarea { resize: vertical; }

/* Grey the select while its placeholder is showing, so it reads as unanswered
   rather than as a real choice. The select is required and the placeholder is
   valueless, so :invalid matches exactly that state and nothing else. The
   options themselves stay dark, otherwise the open list inherits the grey. */
.field select:invalid { color: var(--muted); }
.field select option { color: var(--ink); }
.field select option[value=""] { color: var(--muted); }

/* Available to screen readers, not shown on screen */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Honeypot. Hidden from people, reachable by bots that fill every field */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.notice {
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--amber);
  border-radius: 10px;
  padding: 26px 28px;
}

.notice--error { border-left-color: var(--danger); }

.notice__title {
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  color: var(--navy);
}

.notice p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate);
}

/* Sits under the form now, so it needs a divider rather than a column gap. */
.contact__aside {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  font-size: 17px;
}

.contact__aside a {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: var(--tap);
  font-weight: 600;
}

.contact__aside p {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

.is-hidden { display: none; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer { background: var(--navy-deep); }

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 44px;
  padding-bottom: 36px;
}

.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 4px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  color: var(--white);
}

.footer__tag {
  margin: 0;
  font-size: 15px;
  color: var(--on-navy-dim);
}

.footer__links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 600;
}

.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--on-navy);
}

.footer__links a:hover { color: var(--white); }

.footer__links .is-legal { color: var(--on-navy-dim); }
.footer__links .is-legal:hover { color: var(--white); }

.footer__legal {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--footer-rule);
  font-size: 14px;
  color: var(--on-navy-faint);
}

/* --------------------------------------------------------------------------
   Terms / Privacy
   -------------------------------------------------------------------------- */

.legal h1 {
  margin: 0 0 10px;
  font-size: clamp(30px, 5vw, 44px);
}

.legal__updated {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

.legal__lede {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--slate);
  text-wrap: pretty;
}

.legal h2 {
  margin: 36px 0 12px;
  font-size: clamp(21px, 3vw, 26px);
}

.legal p {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate);
}

.legal ul {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legal li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate);
}

.legal li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 9px;
  background: var(--amber);
  border-radius: 2px;
}

.legal strong { color: var(--navy); font-weight: 700; }