/* Castro Insurance lead pages - single stylesheet, no external assets.
   System: DESIGN.md. Committed moss-green brand; slab-serif display voice;
   the castle-shield is the only artwork. Marketing/analytics tags were
   approved 2026-07-31 (Rehan + Robert); keep any tag snippets async and
   out of the critical render path. */

:root {
  --green-900: #142518;
  --green-800: #1d3420;
  --green-700: #2a4a2f;
  --tan: #c79c72;
  --tan-deep: #a87d52;
  --tan-ink: #7c6844; /* AA-safe tan for small text on mist/white (5.36:1 white, 4.50:1 mist) */
  --ink: #101b13;
  --ink-soft: #3f5145;
  --bg: #f3f6f2;
  --surface: #ffffff;
  --line: #d8e0d6;
  --line-on-green: rgba(255, 255, 255, 0.18);
  --mist: #e7ede5;
  --error: #a4271e;
  --error-bg: #fbeeec;
  --focus: #1a73e8;

  --font-display: 'Rockwell', 'Roboto Slab', Georgia, 'Times New Roman', serif;
  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --radius: 14px;
  --wrap: 1080px;
  --shadow-float: 0 30px 60px -30px rgba(8, 15, 10, 0.55);
}

::selection { background: var(--tan); color: var(--green-900); }

/* Cross-page crossfade on same-origin navigation (progressive enhancement) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
}
body.on-green { background: var(--green-800); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

a { color: var(--green-800); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green-900); }
a, button { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Entrance choreography (visible by default; @starting-style only) */
.rise {
  transition: opacity 420ms var(--ease-out), translate 420ms var(--ease-out);
  transition-delay: calc(var(--d, 0) * 60ms);
}
@starting-style {
  .rise { opacity: 0; translate: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .rise { transition: opacity 200ms ease; }
  @starting-style { .rise { opacity: 0; translate: none; } }
}

/* ---------- Header */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); padding: 14px 20px; }
.on-green .site-header { border-bottom: none; }
.site-header .wrap {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
}
.site-header .logo { display: block; line-height: 0; border-radius: 4px; }
.site-header .logo img { display: block; height: 34px; width: auto; }
@media (min-width: 700px) { .site-header .logo img { height: 40px; } }
.site-header .license { font-size: 0.85rem; color: var(--ink-soft); margin-left: auto; }

/* ---------- Quote hero: the whole page is the green fold */
.quote-hero { position: relative; overflow: clip; padding: clamp(2.2rem, 5vw, 4.5rem) 20px clamp(2.6rem, 6vw, 5rem); }
/* Shield watermark: the identical treatment used on castrosagency.com
   (styles.css section "page-emblem"), replacing the quote funnel's smaller,
   higher hero-shield so the portal reads as the same site (W9d, Robert
   2026-09-17). Same body-level container, same 96px drop, same -90px right
   overhang, same 620px width at 0.1 opacity. */
.page-emblem {
  position: absolute; inset: 0 0 auto 0; height: 1100px;
  overflow: clip; z-index: -1; pointer-events: none; user-select: none;
}
.page-emblem img {
  position: absolute; top: 96px; right: -90px;
  width: min(62vw, 620px); height: auto; opacity: 0.1;
}
.quote-hero-inner {
  position: relative;
  max-width: var(--wrap); margin: 0 auto;
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 980px) {
  .quote-hero-inner { grid-template-columns: minmax(0, 1fr) 470px; }
  .quote-hero-copy { align-self: center; padding-bottom: 2rem; }
}
.quote-hero-copy h1 {
  color: #fff;
  font-size: clamp(2.1rem, 4.6vw + 1rem, 3.35rem);
  line-height: 1.12;
}
.quote-hero-copy .lede {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1.02rem, 0.4vw + 0.95rem, 1.15rem);
  max-width: 46ch;
  margin: 1.1rem 0 0;
}
.promises { list-style: none; margin: 1.9rem 0 0; padding: 0; max-width: 46ch; }
.promises li {
  position: relative; padding-left: 26px;
  color: rgba(255, 255, 255, 0.88);
  margin: 0.7rem 0;
}
.promises li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 11px; height: 11px; background: var(--tan);
}
.hero-office {
  margin: 2.1rem 0 0; font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.76);
  border-top: 1px solid var(--line-on-green);
  padding-top: 1rem; max-width: 46ch;
}

/* ---------- Form card */
.form-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  box-shadow: 0 24px 60px -24px rgba(10, 18, 12, 0.55);
}
.form-title {
  font-size: 1.3rem; margin: 0 0 0.2rem;
  color: var(--green-800);
}
.form-sub { margin: 0 0 1.3rem; color: var(--ink-soft); font-size: 0.92rem; }

.field { margin-bottom: 15px; }
.row { display: grid; gap: 0 14px; }
@media (min-width: 540px) {
  .row.cols-2 { grid-template-columns: 1fr 1fr; }
  .row.cols-3 { grid-template-columns: 2fr 1fr 1fr; }
  .row.cols-street { grid-template-columns: 2.4fr 1fr; }
}
label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 0.92rem; }
.hint { font-weight: 400; color: var(--ink-soft); font-size: 0.84rem; }
input[type="text"], input[type="tel"], input[type="email"], input[type="date"], select {
  width: 100%; padding: 11px 12px; font-size: 1rem; color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
  min-height: 48px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
/* Date inputs: iOS Safari draws its own control chrome, which renders taller
   and blank-faced. Strip the platform skin and pin to the same 48px as every
   other field so the form reads as one family on iPhones. */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  height: 48px;
  display: block;
  text-align: left;
}
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }

/* Side-by-side fields: label / input / error live on SHARED rows across the
   columns (subgrid), so a wrapped label or an inline error under one field
   can never knock the neighboring input out of line. */
@media (min-width: 540px) {
  .row.cols-2 > .field, .row.cols-3 > .field, .row.cols-street > .field {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    align-content: start;
  }
  .row.cols-2 > .field > label, .row.cols-3 > .field > label, .row.cols-street > .field > label { align-self: end; }
}

input:hover, select:hover { border-color: #b9c6b6; }
input:focus, select:focus { border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(42, 74, 47, 0.14); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--error); }
.err-msg { color: var(--error); font-size: 0.87rem; margin-top: 4px; display: none; }
.field.invalid .err-msg { display: block; }

fieldset { border: 0; padding: 0; margin: 0.4rem 0 15px; }
legend {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.02rem;
  padding: 0; margin-bottom: 10px; color: var(--green-800);
}
legend .hint { font-family: var(--font-ui); font-weight: 400; }

.consent {
  background: var(--mist);
  border-radius: 10px;
  padding: 12px 13px 11px;
  margin: 1.05rem 0 0.85rem;
  font-size: 0.86rem; color: var(--ink-soft); line-height: 1.5;
}
.consent p { margin: 0 0 11px; }
.consent .sms { display: flex; gap: 11px; align-items: flex-start; margin: 0; cursor: pointer; font-weight: 400; }
.consent .sms input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--green-800); cursor: pointer; }
.consent .sms span { display: block; }

.cf-turnstile { margin: 0 0 1rem; }

/* Two-step form furniture */
.form-note {
  margin: 10px 0 0; text-align: center;
  font-size: 0.84rem; color: var(--ink-soft);
}
.details-wrap {
  max-width: 680px; margin: clamp(2.2rem, 6vw, 4rem) auto clamp(2.6rem, 7vw, 4.5rem);
  padding: 0 20px;
}
.btn-row { display: grid; gap: 10px; }
@media (min-width: 540px) { .btn-row { grid-template-columns: 2fr 1fr; } }
.btn.btn-secondary {
  background: var(--mist); color: var(--green-800);
}
@media (hover: hover) and (pointer: fine) {
  .btn.btn-secondary:hover { background: #dde5da; color: var(--green-900); }
}

/* ---------- Producer card (the Assigned Experience)
   Injected server-side from Mosslite's assigned block: headshot (or initials,
   or the shield when no assignment is known), name, and a tap-to-call line.
   Inner rules are namespaced under .producer-card so the thank-you page's
   .ty p color and the global tel-link tap-target rule cannot override them. */
.producer-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--mist);
  border-radius: 12px;
  padding: 13px 15px;
  margin: 0.9rem 0 1.1rem;
  text-align: left;
}
.producer-card .pc-photo {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; flex: none;
  box-shadow: 0 0 0 2px #fff, 0 5px 12px -6px rgba(10, 18, 12, 0.45);
}
.producer-card .pc-shield { object-fit: contain; background: #fff; padding: 10px; }
.producer-card .pc-initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--green-700); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: 0.02em;
}
.producer-card .pc-body { min-width: 0; flex: 1 1 0; }
.producer-card .pc-eyebrow {
  margin: 0; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--tan-ink); /* was --tan-deep: 3.08:1 on mist, failed AA at this size */
}
.producer-card .pc-name {
  margin: 1px 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: 1.12rem; color: var(--green-800); line-height: 1.25;
}
.producer-card .pc-note { margin: 2px 0 0; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.35; }
.producer-card .pc-call {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--green-800); color: #fff;
  font-weight: 700; font-size: 0.95rem;
  padding: 10px 14px; border-radius: 9px;
  text-decoration: none; white-space: nowrap;
  transition: background-color 150ms ease;
}
.producer-card .pc-call svg { flex: none; }
@media (hover: hover) and (pointer: fine) {
  .producer-card .pc-call:hover { background: var(--green-900); }
}
@media (max-width: 539px) {
  .producer-card { flex-wrap: wrap; }
  .producer-card .pc-call { margin: 2px 0 0; width: 100%; justify-content: center; }
}

.btn {
  display: inline-block; width: 100%; padding: 15px 18px;
  background: var(--green-800); color: #fff;
  font-family: var(--font-ui); font-size: 1.06rem; font-weight: 700;
  border: 0; border-radius: 10px; cursor: pointer;
  transition: background-color 150ms ease, transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--green-900); }
}
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.65; cursor: wait; }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

.form-error {
  display: none; background: var(--error-bg); border: 1px solid #eccdc9;
  color: var(--error); border-radius: 9px; padding: 12px 14px; margin-bottom: 15px;
}
.form-error.show { display: block; }

/* Honeypot: visually removed, still in the DOM for bots */
.hp-wrap { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }

/* ---------- Index page: one continuous green world */
.page-emblem {
  position: absolute; inset: 0 0 auto 0; height: 1100px;
  overflow: clip; z-index: -1; pointer-events: none; user-select: none;
}
.page-emblem img {
  position: absolute; top: 96px; right: -90px;
  width: min(62vw, 620px); height: auto; opacity: 0.1;
}
.index-hero { padding: clamp(3.2rem, 7vw, 5.5rem) 20px 0; }
.index-hero-inner { max-width: var(--wrap); margin: 0 auto; }
.index-hero h1 {
  color: #fff; max-width: 21ch;
  font-size: clamp(2.2rem, 4.5vw + 1rem, 3.8rem);
  line-height: 1.08;
}
.index-hero .lede {
  color: rgba(255, 255, 255, 0.88);
  max-width: 58ch; font-size: clamp(1.02rem, 0.4vw + 0.95rem, 1.18rem);
  margin: 1.2rem 0 0;
  text-wrap: pretty;
}
.panels {
  margin: clamp(2.4rem, 5.5vw, 4rem) 0 0;
  padding: 0 20px;
}
.panels-inner { max-width: var(--wrap); margin: 0 auto; display: grid; gap: 20px; }
@media (min-width: 720px) { .panels-inner { grid-template-columns: 1fr 1fr; } }
.panel {
  display: block; background: var(--surface);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-float);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .panel:hover {
    transform: translateY(-3px);
    box-shadow: 0 38px 70px -32px rgba(8, 15, 10, 0.65);
  }
  .panel:hover .panel-cta { color: var(--green-900); }
  .panel:hover .panel-cta::after { translate: 3px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .panel, .panel-cta::after { transition: none; }
  .panel:hover { transform: none; }
}
.panel h2 { color: var(--green-800); font-size: 1.45rem; margin-bottom: 0.4rem; }
.panel p { color: var(--ink-soft); margin: 0 0 1.1rem; }
.panel-cta { font-weight: 700; color: var(--green-800); }
.panel-cta::after {
  content: "\2192";
  display: inline-block;
  margin-left: 6px;
  transition: translate 220ms var(--ease-out);
}

/* ---------- Thank-you page */
.ty { max-width: 680px; margin: clamp(2.6rem, 7vw, 4.5rem) auto clamp(3rem, 8vw, 5rem); padding: 0 20px; text-align: center; }
.ty-shield { height: 74px; width: auto; margin: 0 auto 1.6rem; display: block; }
.ty-card {
  background: var(--surface); border-radius: var(--radius);
  padding: clamp(1.7rem, 4vw, 2.8rem);
  box-shadow: var(--shadow-float);
}
.ty h1 { color: var(--green-800); font-size: clamp(1.9rem, 3.5vw + 1rem, 2.6rem); }
.ty p { color: var(--ink-soft); }
.ty .big { font-size: 1.08rem; color: var(--ink); margin-top: 1rem; }

/* ---------- Document pages (privacy) */
.doc { max-width: 70ch; margin: 0 auto; padding: clamp(2rem, 5vw, 3.2rem) 20px 3.5rem; }
.doc h1 { font-size: 2rem; color: var(--green-800); }
.doc h2 { font-size: 1.2rem; margin-top: 2rem; color: var(--green-800); }
.doc p, .doc li { color: var(--ink-soft); text-wrap: pretty; }

/* ---------- Footer */
.site-footer { background: var(--green-800); color: rgba(255, 255, 255, 0.86); padding: clamp(2rem, 5vw, 3rem) 20px 2.4rem; }
.on-green .site-footer { border-top: 1px solid var(--line-on-green); }
.site-footer .wrap {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
}
.footer-shield { height: 46px; width: auto; flex: none; margin-top: 3px; }
.site-footer p { margin: 3px 0; font-size: 0.88rem; }
.site-footer .f-name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: #fff; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--tan); }

/* Ins. Code 1726 internet-advertising disclosure. All four statutory items
   live in ONE element at ONE size (the same-size-type requirement), scoped
   under .site-footer so the ".site-footer p" rule can never outweigh it
   again (audit A1: the unscoped version lost the cascade and its sizing and
   spacing were dead rules). 0.95rem sits a notch above the 0.88rem phone
   line, so Ins. Code 1725.5 holds with margin. Never style any child of
   this paragraph differently. */
.site-footer .legal-1726 {
  font-size: 0.95rem; /* 1725.5 belt: license line a notch ABOVE the 0.88rem phone line */
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  text-transform: none;
  margin-top: 1rem;
  max-width: 62ch;
}
.site-footer .legal-1726 * { font-size: inherit; font-weight: inherit; }

/* Phone links: never break the number across lines, and give thumbs a
   real tap target (~39px tall) without shifting the visual layout. */
a[href^="tel:"] {
  white-space: nowrap;
  display: inline-block;
  padding: 10px 6px;
  margin: -10px -6px;
}

/* ---------- Thank-you SMS opt-in catch */
.ty-sms {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 3vw, 1.8rem);
  margin-top: 2.6rem;
  box-shadow: 0 14px 34px -22px rgba(16, 27, 19, 0.4);
}
.ty-sms h2 { color: var(--green-800); font-size: 1.25rem; margin-bottom: 0.4rem; }
.ty-sms-lede { color: var(--ink-soft); margin: 0 0 1rem; font-size: 0.95rem; }
.ty-sms .sms {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 0.86rem; color: var(--ink-soft); font-weight: 400;
  line-height: 1.55; cursor: pointer;
  background: var(--mist); border-radius: 10px; padding: 14px;
}
.ty-sms .sms input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--green-800); cursor: pointer; }
.ty-sms .err-msg { margin: 10px 0 0; }
.ty-sms .btn { margin-top: 14px; }
.ty-sms-done { color: var(--green-800); font-weight: 600; margin: 0.6rem 0 0; }

/* ---------- Coverage: the whole-picture ledger, on the page ground */
.coverage {
  margin-top: clamp(3.4rem, 8vw, 5.5rem);
  padding: 0 20px;
}
.coverage-inner { max-width: var(--wrap); margin: 0 auto; }
.coverage h2 {
  color: #fff;
  font-size: clamp(1.7rem, 2.2vw + 1rem, 2.5rem);
  line-height: 1.15;
}
.coverage-lede {
  color: rgba(255, 255, 255, 0.88);
  max-width: 62ch;
  margin: 1rem 0 0;
  font-size: clamp(1rem, 0.35vw + 0.94rem, 1.12rem);
  text-wrap: pretty;
}
.coverage-list {
  margin: clamp(1.6rem, 3.5vw, 2.4rem) 0 0;
  display: grid; gap: 0 clamp(28px, 5vw, 56px);
}
@media (min-width: 720px) { .coverage-list { grid-template-columns: 1fr 1fr; } }
.coverage-item {
  border-top: 1px solid var(--line-on-green);
  padding: 15px 0 17px;
  margin: 0;
}
.coverage-item dt {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: -0.015em;
  color: #fff; font-size: 1.13rem;
  position: relative; padding-left: 24px;
}
.coverage-item dt::before {
  content: ""; position: absolute; left: 0; top: 0.44em;
  width: 10px; height: 10px; background: var(--tan);
}
.coverage-item dd {
  margin: 3px 0 0 24px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem; line-height: 1.55;
  text-wrap: pretty;
}
.coverage-close {
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
  color: rgba(255, 255, 255, 0.88);
  max-width: 66ch;
}
.coverage a { color: #fff; }
.coverage a:hover { color: var(--tan); }

/* ---------- About: the letter on the desk */
.about {
  margin: clamp(3.4rem, 8vw, 5.5rem) 0 clamp(3.2rem, 7vw, 4.5rem);
  padding: 0 20px;
}
.about-card {
  background: var(--surface); border-radius: var(--radius);
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(1.7rem, 4vw, 2.9rem) clamp(1.5rem, 4vw, 3.1rem);
  box-shadow: var(--shadow-float);
}
.about h2 { color: var(--green-800); font-size: 1.65rem; margin-bottom: 0.7rem; }
.about p { color: var(--ink-soft); max-width: 70ch; margin: 0 0 0.9rem; text-wrap: pretty; }
.about p:last-child { margin-bottom: 0; }


/* ---------- Letterhead navigation (ported verbatim from the agency site
   sheet, 2026-08-04, so the two headers render identically). Same tokens,
   same 1100px breakpoint, no JavaScript: hover + focus-within dropdowns,
   top-level row only on phones. ---------- */

.site-header .wrap { row-gap: 8px; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 20px;
  order: 3;
  width: 100%;
  border-top: 1px solid var(--line);
  padding-top: 6px;
}
.site-nav > * { position: relative; }
.site-nav a {
  display: inline-block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 0;
}

/* current-page underline: owned by the item */
.site-nav > .nav-item::after,
.site-nav > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  background: var(--tan);
  scale: 0 1;
  transform-origin: left;
  transition: scale 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover { color: var(--green-800); }
  .site-nav > .nav-item:hover::after,
  .site-nav > a:hover::after { scale: 1 1; }
}
.site-nav a[aria-current="page"],
.site-nav .nav-item[data-current] > a { color: var(--green-800); }
.site-nav .nav-item[data-current]::after,
.site-nav > a[aria-current="page"]::after { scale: 1 1; }
@media (prefers-reduced-motion: reduce) {
  .site-nav > .nav-item::after, .site-nav > a::after { transition: none; }
}

/* dropdown caret: owned by the link, and it follows the word */
.site-nav > .nav-item > a::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin: 0 0 2px 7px;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  vertical-align: middle;
  opacity: 0.65;
  position: static;
  background: none;
  scale: none;
  transition: none;
}

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu a {
  display: block;
  padding: 7px 0;
  font-weight: 500;
  font-size: 0.9rem;
}

/* PHONE: top-level row only. */
@media (max-width: 1099px) {
  .site-header { padding: 12px 20px; }
  .site-header .license { font-size: 0.78rem; }
  .site-nav {
    gap: 0 clamp(14px, 4vw, 22px);
    row-gap: 0;
    align-items: flex-start;
  }
  .site-nav > * { width: auto; }
  .site-nav > a,
  .site-nav .nav-item > a { padding: 9px 0; }
  .site-nav > .nav-item::after,
  .site-nav > .nav-item > a::after { display: none; }
  .nav-menu { display: none; }
}

/* DESKTOP: real dropdowns. */
@media (min-width: 1100px) {
  .site-nav {
    order: 2;
    width: auto;
    border-top: 0;
    padding-top: 0;
    margin-left: clamp(20px, 3vw, 40px);
    gap: 4px clamp(16px, 2vw, 26px);
    flex-wrap: nowrap;
  }
  .site-nav > * { width: auto; }
  .site-nav a { font-size: 0.94rem; padding: 10px 0; white-space: nowrap; }
  .site-header .license { margin-left: auto; }

  .nav-menu {
    position: absolute;
    top: 100%;
    left: -16px;
    min-width: 232px;
    background: var(--surface);
    border-radius: 12px;
    padding: 8px 0;
    box-shadow: 0 22px 44px -18px rgba(8, 15, 10, 0.5), 0 0 0 1px var(--line);
    opacity: 0;
    translate: 0 -6px;
    visibility: hidden;
    /* visibility:hidden already blocks hits, but the 160ms transition leaves
       a window where it does not. */
    pointer-events: none;
    transition: opacity 160ms var(--ease-out), translate 160ms var(--ease-out), visibility 160ms;
    z-index: 40;
  }
  .nav-item:hover > .nav-menu,
  .nav-item:focus-within > .nav-menu {
    opacity: 1;
    translate: 0 0;
    visibility: visible;
    pointer-events: auto;
  }
  /* if focus is held on one menu while the pointer opens the other, the one
     under the pointer wins rather than the two overlapping illegibly */
  .nav-item:hover > .nav-menu { z-index: 50; }
  .nav-menu a {
    padding: 8px 18px;
    color: var(--ink-soft);
    white-space: nowrap;
  }
  .nav-menu a:hover,
  .nav-menu a:focus-visible {
    color: var(--green-800);
    background: var(--mist);
  }
  .nav-menu a[aria-current="page"] { color: var(--green-800); font-weight: 700; }
  @media (prefers-reduced-motion: reduce) {
    .nav-menu { transition: opacity 120ms ease, visibility 120ms; translate: none; }
  }
}

/* The quote action reads as the destination it is. */
.site-nav .nav-quote { color: var(--green-800); }
.site-nav > a.nav-quote::after { background: var(--green-800); }

.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 100;
  padding: 11px 16px;
  background: var(--surface);
  color: var(--green-800);
  font-weight: 700;
  font-size: 0.94rem;
  border-radius: 10px;
  box-shadow: var(--shadow-float);
  text-decoration: none;
  translate: 0 -160%;
  transition: translate 160ms var(--ease-out);
}
.skip-link:focus-visible { translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* One-line letterhead fix, ported with the nav (agency sheet rule "j"):
   at 1280 the untightened nav measured 1085+ against the 1080px wrap and
   dropped the header to two rows. Tightened gap + margin + 0.92rem gives
   real slack (~1037) instead of a five-pixel cliff. */
@media (min-width: 1100px) {
  .site-nav { gap: 4px clamp(13px, 1.5vw, 20px); margin-left: clamp(16px, 2vw, 28px); }
  .site-nav a { font-size: 0.92rem; }
}


/* Footer tap targets on phones, ported from the agency sheet (audit A6):
   the bare "Privacy Policy" link measured 96x16px. Padded inline-block
   lifts every footer link to a real target without shifting the layout. */
@media (max-width: 1099px) {
  .site-footer p a { display: inline-block; padding: 7px 0; }
  .site-footer p { line-height: 1.9; }
}

/* ---------- The letterhead logo, split lockup (Robert, 2026-08-08) --------
   Ported from the agency site's styles section 19 the same day: shield 62px
   almost filling the same 68px desktop bar, wordmark at the original lockup
   proportions (16px), license line out of the header (it lives in the hero
   office line, the consent paragraph, and the footer on every funnel page).
   The nav takes the right side of the bar. Assets are the same two brand
   files: logo-mark.svg (ink-tight gold shield) + logo-word.svg (ink-tight
   wordmark, 18.9:1). Phone/tablet geometry unchanged apart from the removed
   license row. */
.site-header .logo { display: flex; align-items: center; gap: 8px; }
.site-header .logo img.logo-mark { height: 40px; width: auto; }
.site-header .logo img.logo-word { height: 9.5px; width: auto; }
@media (min-width: 1100px) {
  .site-header { padding: 3px 20px; }
  .site-header .logo { gap: 13px; }
  .site-header .logo img.logo-mark { height: 62px; }
  .site-header .logo img.logo-word { height: 16px; }
  .site-nav { margin-left: auto; }
}

/* ---------- Commercial funnel page 2: the Notes field (2026-08-13) --------
   The one control the commercial form adds that this sheet had no rule for.
   Same border, radius, padding, hover and focus treatment as every other
   field, sized for a few sentences, and resizable on the vertical axis only
   so a wide drag can never break the card. .field-note is the guidance line
   between a label and its control (the .hint span stays inline in labels). */
.field textarea {
  width: 100%; padding: 11px 12px; font-size: 1rem; color: var(--ink);
  font-family: inherit; line-height: 1.5;
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
  min-height: 112px; display: block; resize: vertical;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field textarea:hover { border-color: #b9c6b6; }
.field textarea:focus { border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(42, 74, 47, 0.14); }
.field textarea[aria-invalid="true"] { border-color: var(--error); }
.field-note {
  margin: -1px 0 7px; font-size: 0.87rem; line-height: 1.45; color: var(--ink-soft);
}

/* ---------- Secure upload page (W9, 2026-09-17) --------------------------
   The only additions this property makes to the funnel sheet it inherits:
   the file drop zone, the picked-file list, and the in-card success state.
   Everything else on the page uses the shared classes above unchanged. */
.up-drop {
  border: 2px dashed var(--line);
  border-radius: 10px;
  padding: 16px 16px 14px;
  text-align: center;
  background: #fff;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.up-drop.drag { border-color: var(--green-700); background: var(--mist); }
.up-drop p { margin: 0 0 10px; color: var(--ink-soft); font-size: 0.9rem; }
.up-drop input[type="file"] {
  width: 100%;
  font-size: 0.92rem;
  color: var(--ink-soft);
  border: 0;
  min-height: 0;
  padding: 0;
}
.up-drop input[type="file"]::file-selector-button {
  background: var(--mist);
  color: var(--green-800);
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  margin-right: 10px;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.up-drop input[type="file"]::file-selector-button:hover { background: #dde5da; }
.up-list { list-style: none; margin: 12px 0 0; padding: 0; }
.up-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 9px;
  margin-bottom: 8px;
  font-size: 0.92rem;
  background: #fff;
}
.up-list .up-name { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.up-list .up-size { flex: none; color: var(--ink-soft); font-size: 0.85rem; }
.up-list .up-x {
  flex: none;
  border: 0; border-radius: 7px;
  background: var(--mist); color: var(--green-800);
  padding: 7px 11px;
  font-weight: 700; font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .up-list .up-x:hover { background: #dde5da; color: var(--green-900); }
}
.up-total { margin: 2px 0 0; font-size: 0.85rem; color: var(--ink-soft); }
.up-done h2 { color: var(--green-800); font-size: 1.45rem; margin: 0 0 0.6rem; }
.up-done p { color: var(--ink-soft); margin: 0 0 0.8rem; }
.up-done .big { color: var(--ink); font-size: 1.05rem; }
.up-done h2:focus { outline: none; }

/* Secure upload page W9c (2026-09-17, Rehan + Robert): the uploader card is
   the whole page. The hero grid loses its copy column, so the .up-solo
   modifier centers the one card at a readable width at every viewport; the
   two-column 980px rule above is beaten by specificity, not by another
   media query. .up-secure is the short security note under the drop area
   (it replaced the old promises list). */
.quote-hero-inner.up-solo { grid-template-columns: none; justify-items: center; }
.quote-hero-inner.up-solo .form-card { width: min(100%, 520px); }
.up-secure { margin: 0.55rem 0 0; color: var(--ink-soft); font-size: 0.85rem; }