/* ==========================================================================
   Kaeden & Co. — V1 launch site
   Direction A ("The House") with navy as primary and brass retained.
   Approved by Dan Foltz 2026-07-28.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,500,0,0;1,9..144,500,0,0&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Headings use Playfair. Fraunces' 'f' carries a curly ball terminal that
     blobs together in "before", "office" and "fit", and no axis, stylistic set
     or ligature setting removes it. Fraunces is kept for the logotype only,
     where the italic ampersand is the signature detail and no 'f' appears. */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-logo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- brand palette --- */
  --navy-deep:  #0F2447;   /* darkest, footer + dark sections */
  --navy:       #17356B;   /* primary */
  --navy-mid:   #1E4585;   /* hover / lifted */
  --navy-tint:  #E4EAF4;   /* pale wash */
  --brass:      #C08A3E;   /* accent, CTAs, the ampersand */
  --brass-hi:   #A97430;
  --ivory:      #F5F1E8;

  --paper:      #FBFAF7;
  --surface:    #F1EEE6;
  --ink:        #0F2447;
  --muted:      #5D6673;  /* 4.6:1 on --surface; #7B8494 failed WCAG AA on labels */
  --muted-strong:#4A5568;
  --hairline:   #E3DFD4;
  --rule:       #DCD7CA;

  --accent-ink: #16211C;
  --accent-on-paper: #96681F;

  /* --- hero colour field --- */
  --hero-base: var(--navy);
  --hero-ink:  var(--ivory);
  --hero-field:
    radial-gradient(58% 62% at 20% 22%, rgba(192,138,62,.34) 0%, rgba(192,138,62,0) 62%),
    radial-gradient(54% 58% at 84% 28%, rgba(90,140,220,.42) 0%, rgba(90,140,220,0) 64%),
    radial-gradient(80% 70% at 50% 108%, rgba(15,36,71,.92) 0%, rgba(15,36,71,0) 62%);

  --btn-radius: 999px;
  --card-radius: 4px;
  --field-radius: 4px;
}

/* --- reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, ul, ol, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.wrap--narrow { max-width: 900px; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; }

/* --- floating pill nav --- */
.nav {
  position: fixed; z-index: 50; left: 50%; bottom: 26px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 6px;
  border-radius: 999px;
  background: rgba(251,250,247,.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(15,36,71,.10);
  box-shadow: 0 10px 40px rgba(15,36,71,.20);
  max-width: calc(100% - 32px);
  transition: transform .26s ease, opacity .26s ease;
}
/* Tucked away while the reader moves down the page, so it never sits on top of
   form labels or body copy. ui.js brings it straight back on any upward scroll. */
.nav--hidden {
  transform: translateX(-50%) translateY(180%);
  opacity: 0; pointer-events: none;
}
.nav a {
  display: inline-block; padding: 12px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap;
  color: var(--navy-deep);
  transition: background .18s ease, color .18s ease;
}
/* Short labels only on the narrowest phones, where the full set overflows the
   pill and clips the Contact CTA. */
.nav .short { display: none; }
.nav a:hover { background: rgba(15,36,71,.07); }
.nav a.is-active { background: var(--navy-deep); color: var(--ivory); }
.nav .nav__cta { background: var(--brass); color: var(--accent-ink); font-weight: 600; }
.nav .nav__cta:hover { background: var(--brass-hi); }

/* --- hero --- */
.hero {
  position: relative; min-height: 100svh;
  display: grid; place-items: center; text-align: center;
  padding: 110px 28px clamp(200px, 26vh, 300px);
  overflow: hidden; background: var(--hero-base);
}
/* Motion graphic. Sits under the colour field so the streaks read as light
   inside the scene rather than stickers on top of it. */
/* Colour field first, streaks on top. Putting the canvas under a soft-light
   layer mutes the highlights into nothing. */
.hero__field {
  position: absolute; inset: -20%; background: var(--hero-field);
  pointer-events: none; z-index: 0;
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
/* Fine grain stops the gradients banding on big screens. */
.hero__grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
/* Keeps the serif crisp no matter where a bright streak passes. */
.hero__vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(66% 52% at 50% 44%, rgba(15,36,71,.42) 0%, rgba(15,36,71,.18) 48%, rgba(15,36,71,0) 78%),
    linear-gradient(to bottom, rgba(15,36,71,.55) 0%, rgba(15,36,71,0) 26%, rgba(15,36,71,0) 62%, rgba(15,36,71,.72) 100%);
}
.hero__inner { position: relative; z-index: 4; width: 100%; max-width: 1180px; }

.wordmark {
  font-family: var(--font-logo); font-weight: 500; font-optical-sizing: auto;
  font-size: clamp(3rem, 12.5vw, 11.5rem);
  line-height: .88; letter-spacing: -.025em;
  color: var(--hero-ink); margin-bottom: 26px;
}
.wordmark .amp { font-style: italic; color: var(--brass); }

.hero__tagline {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.05rem, 2.4vw, 1.6rem);
  color: var(--hero-ink); opacity: .92; margin-bottom: 18px;
}
.hero__sub {
  max-width: 560px; margin: 0 auto 34px;
  font-size: 1.02rem; line-height: 1.65; color: var(--hero-ink); opacity: .85;
}
/* A bright streak passing behind the type briefly tanks contrast. The shadow
   keeps it readable at the worst frame without dimming the animation. */
.hero__tagline, .hero__sub { text-shadow: 0 1px 14px rgba(15, 36, 71, .85); }
.hero__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --- buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 30px; border: 0; border-radius: var(--btn-radius);
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; cursor: pointer;
  transition: transform .16s ease, background .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--brass); color: var(--accent-ink); }
.btn--primary:hover { background: var(--brass-hi); }
.btn--ghost {
  background: transparent; color: var(--hero-ink);
  border: 1px solid color-mix(in srgb, var(--hero-ink) 34%, transparent);
}
.btn--ghost:hover { border-color: var(--hero-ink); }
.btn--onaccent { background: var(--navy-deep); color: var(--ivory); }
.btn--onaccent:hover { background: #08182F; }

/* --- sections --- */
.section { padding: clamp(80px, 11vw, 150px) 0; }
.section--alt { background: var(--surface); }
.section--navy { background: var(--navy-deep); color: var(--ivory); }

.eyebrow {
  display: inline-block; font-family: var(--font-body);
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 26px;
}
.section--navy .eyebrow { color: color-mix(in srgb, var(--ivory) 64%, transparent); }

.statement {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.9rem, 5vw, 3.5rem);
  line-height: 1.06; letter-spacing: -.02em; max-width: 17ch;
}
.statement--wide { max-width: 22ch; }

.lede { margin-top: 26px; max-width: 52ch; font-size: 1.08rem; line-height: 1.7; color: var(--muted-strong); }
.section--navy .lede { color: color-mix(in srgb, var(--ivory) 78%, transparent); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: start; }

/* --- service cards --- */
.cards {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline);
  border-radius: var(--card-radius); overflow: hidden; margin-top: 56px;
}
.card { background: var(--paper); padding: clamp(28px, 3.4vw, 46px); }
.section--alt .card { background: var(--surface); }
.card__no { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--accent-on-paper); margin-bottom: 20px; }
.card h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.15; letter-spacing: -.02em; margin-bottom: 12px; }
.card p { color: var(--muted-strong); font-size: .98rem; line-height: 1.65; }

/* --- section media ---
   One photograph per section rather than a gallery, so they are spread down
   the page instead of stacked in one block. */
.split--media { grid-template-columns: 1.32fr .68fr; align-items: center; }
.media { margin: 0; max-width: 340px; }
.media img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 5px; background: var(--hairline);
  box-shadow: 0 18px 44px rgba(6, 18, 38, .16);
}
.section--navy .media img { box-shadow: 0 18px 50px rgba(0, 0, 0, .34); }

.media figcaption {
  margin-top: 14px; font-size: .88rem; line-height: 1.45; color: var(--muted-strong);
}
.media figcaption b { display: block; font-weight: 600; color: var(--ink); }
/* Visually hidden but still spoken, so the caption reads "Name, Title" rather
   than running the two together. */
.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;
}
.section--navy .media figcaption { color: color-mix(in srgb, var(--ivory) 72%, transparent); }
.section--navy .media figcaption b { color: var(--ivory); }

/* Section 2 has only a heading beside its photo, so the type scales up to fill
   the column rather than leaving a hole. */
.statement--xl { font-size: clamp(2rem, 5.2vw, 3.7rem); max-width: 15ch; }


/* --- reasons --- */
.reasons { margin-top: 56px; border-top: 1px solid color-mix(in srgb, var(--ivory) 20%, transparent); }
.reason {
  display: grid; grid-template-columns: 64px 1fr 1.15fr; gap: 24px; align-items: baseline;
  padding: 30px 0; border-bottom: 1px solid color-mix(in srgb, var(--ivory) 16%, transparent);
}
.reason__no { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: .08em; color: var(--brass); }
.reason h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 2.3vw, 1.85rem); line-height: 1.12; letter-spacing: -.02em; }
.reason p { color: color-mix(in srgb, var(--ivory) 74%, transparent); font-size: 1rem; }

/* --- steps --- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.4vw, 48px); margin-top: 56px; }
.step { padding-top: 22px; border-top: 2px solid var(--brass); }
.step__no { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .18em; color: var(--accent-on-paper); margin-bottom: 14px; }
.step h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 1.9vw, 1.45rem); letter-spacing: -.02em; margin-bottom: 10px; }
.step p { color: var(--muted-strong); font-size: .97rem; }

/* --- cta band --- */
.band { background: var(--brass); color: var(--accent-ink); padding: clamp(70px, 9vw, 120px) 0; text-align: center; }
.band .statement { max-width: none; margin-bottom: 18px; }
.band p { max-width: 46ch; margin: 0 auto 34px; opacity: .86; }

/* --- footer --- */
/* Bottom padding clears the fixed nav pill, which otherwise sits on top of
   the footer text at every viewport. */
.footer { background: var(--navy-deep); color: var(--ivory); padding: 70px 0 110px; }
.footer__top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 44px; border-bottom: 1px solid color-mix(in srgb, var(--ivory) 18%, transparent); }
.footer__mark { font-family: var(--font-logo); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.025em; }
.footer__mark .amp { font-style: italic; color: var(--brass); }
.footer__meta { display: grid; gap: 6px; font-size: .95rem; color: color-mix(in srgb, var(--ivory) 74%, transparent); }
.footer__meta a { display: inline-block; padding: 10px 0; }
.footer__meta a:hover { color: var(--ivory); text-decoration: underline; }
.footer__base { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 24px; font-size: .82rem; color: color-mix(in srgb, var(--ivory) 54%, transparent); }

/* --- interior page head --- */
.page-head { padding: clamp(126px, 15vw, 180px) 0 clamp(56px, 7vw, 84px); background: var(--navy-deep); position: relative; overflow: hidden; }
/* Handshake sits behind the whole header, heavily washed down so it reads as
   depth and texture under the headline rather than a second subject competing
   with the team photograph. */
.page-head__photo {
  position: absolute; inset: 0; z-index: 0;
  /* Mirrored so the hands fall on the left, under the headline, instead of
     behind the team photograph. */
  background: url('handshake.jpg?v=1aa960d97a') no-repeat center center / cover;
  transform: scaleX(-1);
}
.page-head__glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* Reads through on the left so the headline has depth behind it, then
       closes to solid navy under the photograph so the two never compete. */
    linear-gradient(100deg, rgba(15,36,71,.62) 0%, rgba(15,36,71,.74) 34%, rgba(15,36,71,.93) 60%, rgba(15,36,71,.98) 100%),
    linear-gradient(to bottom, rgba(15,36,71,.55) 0%, rgba(15,36,71,0) 24%, rgba(15,36,71,0) 70%, rgba(15,36,71,.78) 100%),
    radial-gradient(52% 62% at 86% 16%, rgba(192,138,62,.16) 0%, rgba(15,36,71,0) 70%);
}
.page-head .wrap { position: relative; z-index: 2; }

/* Text left, photograph right. A real photo behind a heavy scrim wastes the
   photo, so it gets its own panel instead. */
.page-head--split .wrap {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(30px, 5vw, 70px); align-items: center;
}
.page-head__figure { margin: 0; border-radius: 5px; overflow: hidden; box-shadow: 0 22px 60px rgba(6, 18, 38, .5); }
/* Capped so the header does not push the form far down the page. Anchored high
   to keep faces in frame. */
/* height:auto is required, otherwise the width/height attributes on the <img>
   act as presentational hints and aspect-ratio is ignored. */
.page-head__figure img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: center 18%; }
.page-head h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.6rem, 8vw, 5.5rem); line-height: 1; letter-spacing: -.02em; color: var(--hero-ink); }
.page-head__sub {
  margin-top: 22px; max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.65; color: var(--hero-ink); opacity: .88;
}
.page-head + .section { padding-top: clamp(52px, 6.5vw, 88px); }

/* --- form --- */
.contact-grid { display: grid; grid-template-columns: 1.35fr .8fr; gap: clamp(36px, 6vw, 84px); align-items: start; }

.field { margin-bottom: 22px; }
/* Direct child only, so checkbox labels inside .checks keep sentence case. */
.field > label, .fieldset__legend {
  display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 9px;
}
.field .req { color: var(--accent-on-paper); }
.field .hint { display: block; margin-top: -3px; margin-bottom: 9px; font-size: .84rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.input, .select, .textarea {
  width: 100%; padding: 15px 17px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--field-radius);
  font-size: 1rem; transition: border-color .16s ease, box-shadow .16s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 20%, transparent);
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234A5568' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.file {
  width: 100%; padding: 13px 15px;
  background: var(--paper); border: 1px dashed var(--rule); border-radius: var(--field-radius);
  font-size: .95rem; cursor: pointer;
}
.file::file-selector-button {
  margin-right: 14px; padding: 9px 16px; border: 0; border-radius: 999px;
  background: var(--navy); color: #fff; font-size: .88rem; font-weight: 600; cursor: pointer;
}
.file::file-selector-button:hover { background: var(--navy-mid); }
.file:focus { outline: none; border-color: var(--navy); border-style: solid; box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 20%, transparent); }

/* checkbox grid */
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.check {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px; border: 1px solid var(--rule); border-radius: var(--field-radius);
  background: var(--paper); cursor: pointer; line-height: 1.4;
  font-size: .95rem; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--ink); margin: 0;
  transition: border-color .15s ease, background .15s ease;
}
.check:hover { border-color: var(--navy); }
.check input { flex: none; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--navy); cursor: pointer; }
.check:has(input:checked) { border-color: var(--navy); background: var(--navy-tint); }

/* applicant-only block, revealed by the reason select */
.applicant {
  margin: 30px 0; padding: 26px; border: 1px solid var(--rule);
  border-left: 3px solid var(--brass); border-radius: var(--field-radius); background: var(--surface);
}
.applicant > h2 {
  font-family: var(--font-display); font-weight: 500; font-size: 1.2rem;
  letter-spacing: -.02em; margin-bottom: 6px; text-transform: none; color: var(--ink);
}
.applicant > .sub { font-size: .92rem; color: var(--muted-strong); margin-bottom: 22px; }
.applicant[hidden] { display: none; }

/* honeypot: hidden from people, visible to naive bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { margin-top: 16px; font-size: .84rem; color: var(--muted); max-width: 52ch; }
.error-banner {
  margin-bottom: 26px; padding: 15px 18px; border-radius: var(--field-radius);
  background: #FBEDEC; border: 1px solid #E7C3C0; color: #8A2E27; font-size: .94rem;
}

.aside { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--card-radius); padding: clamp(26px, 3vw, 38px); position: sticky; top: 34px; }
.aside h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; letter-spacing: -.02em; margin-bottom: 22px; }
.aside dl { display: grid; gap: 20px; }
.aside dt { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.aside dd { margin: 0; font-size: 1rem; }
.aside dd a { display: inline-block; padding: 10px 0; }
.aside dd a:hover { color: var(--accent-on-paper); }

/* --- thank you --- */
.thanks { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 100px 28px 140px; background: var(--hero-base); position: relative; overflow: hidden; }
.thanks__inner { position: relative; z-index: 1; max-width: 640px; }
.thanks h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 7vw, 4.4rem); line-height: 1.02; letter-spacing: -.025em; color: var(--hero-ink); margin-bottom: 20px; }
.thanks p { color: var(--hero-ink); opacity: .82; margin-bottom: 30px; }

/* --- responsive --- */
/* Visible focus for keyboard users. The UA ring is near-invisible on the navy
   pill and the brass CTA, and box-shadow alone vanishes in High Contrast Mode. */
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; border-radius: 2px; }
.section--navy :focus-visible, .hero :focus-visible,
.page-head :focus-visible, .footer :focus-visible, .band :focus-visible {
  outline-color: var(--ivory);
}

@media (max-width: 900px) {
  .split, .cards, .steps, .contact-grid { grid-template-columns: 1fr; }
  /* Headline first, photo underneath. */
  .page-head--split .wrap { grid-template-columns: 1fr; gap: 32px; }
  .page-head__figure { max-width: 460px; }
  /* Section portraits stack under their copy and stay a sensible size. */
  .split--media { gap: 34px; }
  .media { max-width: 340px; }
  .section--navy .split--media + .reasons { margin-top: 40px; }
  .reason { grid-template-columns: 1fr; gap: 10px; }
  .reason__no { order: -1; }
  .aside { position: static; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .field-row, .checks { grid-template-columns: 1fr; }
  .nav { bottom: 14px; padding: 5px; gap: 3px; }
  .nav a { padding: 12px 15px; font-size: 13px; }
  .applicant { padding: 20px; }
  .footer { padding-bottom: 96px; }
  /* Extra room so the pill never lands on the hero CTAs. */
  .hero { padding-bottom: clamp(240px, 30vh, 300px); }
}
@media (max-width: 380px) {
  .nav .full { display: none; }
  .nav .short { display: inline; }
  .nav a { padding: 12px 13px; }
}
/* On the smallest phones the hero content is taller than the viewport, so
   bottom padding cannot keep the CTAs clear of the floating nav. Tighten the
   type and spacing instead. */
@media (max-width: 360px) {
  .hero { padding-top: 76px; padding-bottom: 200px; }
  .wordmark { margin-bottom: 14px; }
  .hero__tagline { margin-bottom: 10px; }
  .hero__sub { font-size: .94rem; margin-bottom: 22px; }
  .hero__actions { gap: 10px; }
  .hero .btn { padding: 13px 22px; font-size: 14px; }
}
/* Short desktop windows squeeze the hero the same way phones do. */
@media (max-height: 640px) and (min-width: 620.02px) {
  .hero { padding-top: 84px; padding-bottom: 250px; }
}
/* Landscape phones. Width-based rules miss these entirely (a 568x320 screen is
   neither narrow nor tall), and there is not enough room for the sub-line. */
@media (max-height: 430px) {
  .hero { padding-top: 48px; padding-bottom: 140px; }
  .wordmark { font-size: clamp(1.9rem, 7vw, 3rem); margin-bottom: 8px; }
  .hero__tagline { font-size: .9rem; margin-bottom: 10px; }
  .hero__sub { display: none; }
  .hero .btn { padding: 10px 18px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover { transform: none; }
  .nav { transition: none; }
}