/* ==========================================================================
   DETERMINED VISION LLC: Components
   Depends on styles.css tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. BRAND WORDMARK
   Swap note: to use the client's raster logo, replace the <img> + .brand-word
   pair with a single <img src="assets/img/logo.png" alt="Determined Vision">.
   -------------------------------------------------------------------------- */
.brand-word {
  display: inline-flex; align-items: baseline; gap: .1em;
  margin-left: .5rem;
  font-size: .8125rem; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase;
  white-space: nowrap;
}
.brand-word b { font-weight: 800; color: var(--navy-900); }
.brand-word i { font-style: normal; font-weight: 800; color: var(--brand-600); }
.brand-word--inv b { color: #fff; }
.brand-word--inv i { color: var(--brand-400); }
@media (max-width: 380px) { .nav__brand .brand-word { display: none; } }

/* --------------------------------------------------------------------------
   1. HERO: Editorial Split
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(3rem, 7vw, 6rem));
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(58% 46% at 82% 8%, rgba(32,96,220,.16) 0%, transparent 62%),
    radial-gradient(42% 40% at 6% 92%, rgba(200,162,74,.13) 0%, transparent 60%),
    linear-gradient(180deg, var(--white) 0%, var(--paper) 62%, var(--paper-deep) 100%);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.hero__copy { max-width: 40rem; }
.hero__copy h1 { margin-top: 1.5rem; }
.hero__copy .lede { margin-top: 1.5rem; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); }
.hero__copy .btn-row { margin-top: 2.25rem; }

/* Trust strip beneath hero copy */
.trust-strip {
  margin-top: 2.5rem; padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem;
}
.trust-strip__item .num { font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
.trust-strip__item p { margin-top: .375rem; font-size: .8125rem; line-height: 1.45; color: var(--slate-500); }

/* Hero visual: Z-axis cascade of glass plates */
.hero__visual { position: relative; }
.plate { position: relative; }
.plate__badge {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: .625rem;
  padding: .625rem .9375rem .625rem .625rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--inner-hi), 0 0 0 1px var(--hairline), var(--lift-lg);
  font-size: .8125rem; font-weight: 700; color: var(--navy-900);
  white-space: nowrap;
}
.plate__badge i {
  display: grid; place-items: center; flex: none;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--brand-050); color: var(--brand-600);
}
.plate__badge i svg { width: 14px; height: 14px; }
.plate__badge span { display: block; font-size: .625rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-400); }
.plate__badge--tl { top: -1rem; left: -1.25rem; }
.plate__badge--br { bottom: -1.25rem; right: -1rem; }
.plate__badge--gold i { background: var(--gold-050); color: var(--gold-600); }

/* The quote-preview card inside the hero */
.quote-card__head {
  padding: 1.5rem 1.625rem 1.25rem;
  background: linear-gradient(150deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: #fff;
}
.quote-card__head p { font-size: .8125rem; color: rgba(255,255,255,.6); }
.quote-card__head strong { display: block; font-size: 1.0625rem; font-weight: 700; margin-top: .25rem; letter-spacing: -0.015em; }
.quote-card__body { padding: 1.5rem 1.625rem 1.625rem; }
.quote-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .875rem 0;
  border-bottom: 1px solid var(--hairline);
}
.quote-row:last-of-type { border-bottom: 0; }
.quote-row__label { display: flex; align-items: center; gap: .75rem; font-size: .875rem; font-weight: 600; color: var(--navy-900); }
.quote-row__label i {
  display: grid; place-items: center; flex: none;
  width: 2rem; height: 2rem; border-radius: .625rem;
  background: var(--brand-050); color: var(--brand-600);
}
.quote-row__label i svg { width: 15px; height: 15px; }
.quote-row__val { font-size: .8125rem; font-weight: 700; color: var(--slate-500); text-align: right; }
.quote-row__val em { display: block; font-style: normal; font-size: .6875rem; font-weight: 600; color: var(--slate-400); }

/* --------------------------------------------------------------------------
   2. PAGE HEADER (interior pages)
   -------------------------------------------------------------------------- */
.page-head {
  position: relative; overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(3rem, 6vw, 5rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.page-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 60% at 88% 0%, rgba(32,96,220,.14) 0%, transparent 60%),
    radial-gradient(45% 55% at 2% 100%, rgba(200,162,74,.10) 0%, transparent 58%),
    linear-gradient(180deg, var(--white) 0%, var(--paper) 100%);
}
.page-head__inner { max-width: 68ch; }
.page-head h1 { margin-top: 1.375rem; }
.page-head .lede { margin-top: 1.25rem; }
.page-head .btn-row { margin-top: 2rem; }
.crumbs { display: flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 600; color: var(--slate-400); }
.crumbs a:hover { color: var(--brand-600); }
.crumbs span { opacity: .5; }

/* --------------------------------------------------------------------------
   3. BENTO GRID: asymmetrical
   -------------------------------------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.bento > .col-4  { grid-column: span 4; }
.bento > .col-5  { grid-column: span 5; }
.bento > .col-6  { grid-column: span 6; }
.bento > .col-7  { grid-column: span 7; }
.bento > .col-8  { grid-column: span 8; }
.bento > .col-12 { grid-column: span 12; }
.bento > .row-2  { grid-row: span 2; }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
.gap-lg { gap: 1.5rem; }

/* --------------------------------------------------------------------------
   4. ICON TILES + FEATURE CARDS
   -------------------------------------------------------------------------- */
.icon-tile {
  display: grid; place-items: center; flex: none;
  width: 3rem; height: 3rem; border-radius: .9375rem;
  background: linear-gradient(150deg, var(--brand-050) 0%, #DCE8FD 100%);
  color: var(--brand-600);
  box-shadow: var(--inner-hi), 0 0 0 1px rgba(18,73,184,.09);
  transition: transform .6s var(--ease);
}
.icon-tile svg { width: 20px; height: 20px; }
.icon-tile--gold {
  background: linear-gradient(150deg, var(--gold-050) 0%, #F6EAC9 100%);
  color: var(--gold-600); box-shadow: var(--inner-hi), 0 0 0 1px rgba(168,132,47,.16);
}
.icon-tile--inv {
  background: linear-gradient(150deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 100%);
  color: var(--brand-200); box-shadow: var(--inner-hi-inv), 0 0 0 1px var(--hairline-inv);
}
.bezel--hover:hover .icon-tile { transform: scale(1.06) rotate(-3deg); }

.feature { display: flex; flex-direction: column; height: 100%; }
.feature h3, .feature h4 { margin-top: 1.25rem; }
.feature p { margin-top: .625rem; font-size: .9375rem; line-height: 1.62; }
.feature .link-arrow { margin-top: auto; padding-top: 1.375rem; }

/* Numbered process steps */
.step__n {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 0,"WONK" 0,"opsz" 144;
  font-size: 2.75rem; font-weight: 600; line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--brand-200);
}
.band-navy .step__n { -webkit-text-stroke: 1px rgba(169,198,248,.45); }
.step h4 { margin-top: 1rem; }
.step p { margin-top: .5rem; font-size: .9375rem; line-height: 1.62; }

/* Checklist */
.checks { display: grid; gap: .875rem; }
.checks li { display: flex; gap: .75rem; align-items: flex-start; font-size: .9375rem; line-height: 1.55; }
.checks li::before {
  content: ""; flex: none; margin-top: .1875rem;
  width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: var(--brand-050) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231249B8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 11px no-repeat;
  box-shadow: 0 0 0 1px rgba(18,73,184,.12);
}
.checks--gold li::before {
  background: var(--gold-050) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8842F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 11px no-repeat;
  box-shadow: 0 0 0 1px rgba(168,132,47,.2);
}
.band-navy .checks li::before {
  background: rgba(76,134,238,.18) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9C6F8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 11px no-repeat;
  box-shadow: 0 0 0 1px rgba(169,198,248,.22);
}

/* --------------------------------------------------------------------------
   5. PRODUCT / COVERAGE CARDS
   -------------------------------------------------------------------------- */
.product__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.tag {
  display: inline-flex; align-items: center;
  padding: .3125rem .625rem; border-radius: var(--r-pill);
  background: var(--brand-050); color: var(--brand-600);
  font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.tag--gold { background: var(--gold-050); color: var(--gold-600); }
.tag--inv { background: rgba(255,255,255,.09); color: var(--brand-200); }
.product h3 { margin-top: 1.375rem; }
.product .lede { margin-top: .75rem; font-size: .9375rem; }
.product .rule { margin-block: 1.375rem; }
.product__meta { display: grid; gap: .625rem; }
.product__meta div { display: flex; justify-content: space-between; gap: 1rem; font-size: .8125rem; }
.product__meta dt { color: var(--slate-400); font-weight: 600; }
.product__meta dd { color: var(--navy-900); font-weight: 700; text-align: right; }

/* Split feature row (alternating) */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.split--flip .split__media { order: -1; }
.split__copy h2 + .lede, .split__copy h3 + .lede { margin-top: 1.125rem; }
.split__copy .checks { margin-top: 1.75rem; }
.split__copy .btn-row { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   6. STAT BANDS
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
.stat { text-align: left; }
.stat p { margin-top: .625rem; font-size: .875rem; line-height: 1.5; }
.stat .fine { margin-top: .5rem; }

/* --------------------------------------------------------------------------
   7. TESTIMONIALS
   -------------------------------------------------------------------------- */
.quote blockquote {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 0,"WONK" 0,"opsz" 144;
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  font-weight: 500; line-height: 1.42; letter-spacing: -0.018em;
  color: var(--navy-900);
  text-wrap: pretty;
}
.band-navy .quote blockquote { color: #fff; }
.quote__who { display: flex; align-items: center; gap: .875rem; margin-top: 1.5rem; }
.avatar {
  display: grid; place-items: center; flex: none;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: linear-gradient(150deg, var(--brand-500), var(--navy-800));
  color: #fff; font-size: .875rem; font-weight: 700; letter-spacing: -0.02em;
  box-shadow: var(--inner-hi-inv), var(--lift-sm);
}
.avatar--gold { background: linear-gradient(150deg, var(--gold-500), var(--gold-600)); color: #2A1F07; }
.quote__who strong { display: block; font-size: .875rem; font-weight: 700; color: var(--navy-900); letter-spacing: -0.01em; }
.band-navy .quote__who strong { color: #fff; }
.quote__who span { display: block; font-size: .75rem; color: var(--slate-400); }
.stars { display: flex; gap: .1875rem; color: var(--gold-500); margin-bottom: 1rem; }
.stars svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   8. FAQ ACCORDION
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: .625rem; }
.faq details {
  border-radius: 1.25rem;
  background: var(--white);
  box-shadow: var(--inner-hi), 0 0 0 1px var(--hairline), var(--lift-sm);
  transition: box-shadow .6s var(--ease);
  overflow: hidden;
}
.faq details[open] { box-shadow: var(--inner-hi), 0 0 0 1px rgba(18,73,184,.16), var(--lift-md); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.125rem 1.375rem;
  font-size: .9375rem; font-weight: 700; color: var(--navy-900);
  letter-spacing: -0.012em; cursor: pointer; list-style: none;
  transition: color .5s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand-600); }
.faq summary i {
  display: grid; place-items: center; flex: none;
  width: 1.625rem; height: 1.625rem; border-radius: 50%;
  background: rgba(7,27,61,.05); color: var(--navy-900);
  transition: transform .6s var(--ease), background .5s var(--ease);
}
.faq summary i svg { width: 12px; height: 12px; }
.faq details[open] summary i { transform: rotate(45deg); background: var(--brand-050); color: var(--brand-600); }
.faq__body { padding: 0 1.375rem 1.375rem; font-size: .9375rem; line-height: 1.66; color: var(--slate-500); max-width: 68ch; }
.faq__body p + p { margin-top: .75rem; }

/* --------------------------------------------------------------------------
   9. FORMS
   -------------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem 1rem; }
.field { display: flex; flex-direction: column; gap: .4375rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--navy-900); text-transform: uppercase; }
.field label .req { color: var(--brand-500); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .8125rem 1rem;
  border: 0; border-radius: .875rem;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hairline-str), inset 0 2px 4px rgba(7,27,61,.03);
  font-size: .9375rem; color: var(--navy-900);
  transition: box-shadow .5s var(--ease), background .5s var(--ease);
  appearance: none;
}
.field textarea { min-height: 7.5rem; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--slate-400); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--brand-500), 0 0 0 4px rgba(32,96,220,.13);
}
.field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 15px;
  padding-right: 2.75rem; cursor: pointer;
}
.field__hint { font-size: .75rem; color: var(--slate-400); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1.5px #C4333A, 0 0 0 4px rgba(196,51,58,.10);
}
.field__err { font-size: .75rem; font-weight: 600; color: #C4333A; display: none; }
.field__err.is-on { display: block; }

/* Segmented radio group */
.seg { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  display: flex; align-items: center; gap: .625rem;
  padding: .875rem 1rem; border-radius: .875rem;
  background: var(--paper); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--hairline-str);
  font-size: .875rem; font-weight: 600; color: var(--slate-700);
  text-transform: none; letter-spacing: normal;
  transition: box-shadow .5s var(--ease), background .5s var(--ease), color .5s var(--ease);
}
.seg label::before {
  content: ""; flex: none; width: 1.0625rem; height: 1.0625rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--slate-400);
  transition: box-shadow .4s var(--ease);
}
.seg label:hover { background: var(--white); }
.seg input:checked + label {
  background: var(--white); color: var(--navy-900);
  box-shadow: inset 0 0 0 1.5px var(--brand-500), var(--lift-sm);
}
.seg input:checked + label::before { box-shadow: inset 0 0 0 5px var(--brand-500); }
.seg input:focus-visible + label { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* Consent checkbox */
.consent { display: flex; gap: .75rem; align-items: flex-start; }
.consent input { flex: none; margin-top: .1875rem; width: 1.0625rem; height: 1.0625rem; accent-color: var(--brand-600); cursor: pointer; }
.consent label { font-size: .75rem; line-height: 1.55; color: var(--slate-500); text-transform: none; letter-spacing: normal; font-weight: 500; }
.consent a { color: var(--brand-600); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.form-note {
  display: flex; gap: .625rem; align-items: flex-start;
  padding: .875rem 1rem; border-radius: .875rem;
  background: var(--brand-050);
  box-shadow: inset 0 0 0 1px rgba(18,73,184,.10);
  font-size: .75rem; line-height: 1.55; color: var(--navy-800);
}
.form-note svg { flex: none; width: 15px; height: 15px; margin-top: .125rem; color: var(--brand-600); }

/* Form success state */
.form-success { display: none; text-align: center; padding: 1.5rem .5rem; }
.form-success.is-on { display: block; }
.form-success__icon {
  display: grid; place-items: center; margin-inline: auto;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: linear-gradient(150deg, var(--brand-050), #DCE8FD); color: var(--brand-600);
  box-shadow: var(--inner-hi), 0 0 0 1px rgba(18,73,184,.12);
}
.form-success__icon svg { width: 24px; height: 24px; }
.form-success h3 { margin-top: 1.25rem; }
.form-success p { margin-top: .625rem; font-size: .9375rem; color: var(--slate-500); }
form.is-sent { display: none; }
.btn[data-loading="true"] { pointer-events: none; opacity: .65; }

/* --------------------------------------------------------------------------
   9b2. EMBEDDED FORM (Allied Spot)
   -------------------------------------------------------------------------- */
.embed-frame {
  position: relative;
  border-radius: 1.125rem;
  overflow: hidden;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
/* Height is deliberately generous: the embedded form must never scroll inside
   its own frame. If the form posts its real height (see main.js) the iframe
   snaps to it exactly; otherwise this fallback governs. Trim these two numbers
   if you see dead space under the submit button. */
.embed-frame iframe {
  display: block;
  width: 100%;
  height: 1100px;
  border: 0;
  transition: height .45s var(--ease);
}
@media (max-width: 768px) { .embed-frame iframe { height: 1250px; } }

/* Shown only while the embed is still loading */
.embed-fallback {
  padding: 1rem 1.125rem;
  font-size: .8125rem; line-height: 1.6; color: var(--slate-500);
  text-align: center;
}
.embed-fallback a { color: var(--brand-600); font-weight: 700; }

/* --------------------------------------------------------------------------
   9c. CONTACT PAGE LAYOUT
   -------------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}
@media (max-width: 1000px) { .contact-layout { grid-template-columns: 1fr; } }

.contact-rail { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
@media (max-width: 1000px) { .contact-rail { position: static; } }

.intent-switch { border: 0; padding: 0; margin: 0; }
.intent-switch legend { padding: 0; margin-bottom: .75rem; }

/* Navy rail card sitting on a light section */
.rail-navy { background: rgba(7,27,61,.06); box-shadow: inset 0 0 0 1px var(--hairline); }
.rail-navy .bezel__core {
  background:
    radial-gradient(110% 70% at 15% 0%, rgba(32,96,220,.30) 0%, transparent 58%),
    linear-gradient(168deg, var(--navy-900) 0%, var(--navy-950) 100%);
  box-shadow: var(--inner-hi-inv), 0 0 0 1px rgba(7,27,61,.18), var(--lift-lg);
  color: rgba(255,255,255,.72);
}
.rail-navy h3, .rail-navy h4 { color: #fff; }
.rail-navy .fine { color: rgba(255,255,255,.44); }
.rail-navy .rule { background: var(--hairline-inv); }
.rail-navy .mini-head { color: rgba(255,255,255,.42); }

/* Numbered mini steps */
.mini-steps { display: grid; gap: .875rem; counter-reset: none; }
.mini-steps li { display: flex; gap: .75rem; align-items: flex-start; }
.mini-steps b {
  display: grid; place-items: center; flex: none;
  width: 1.375rem; height: 1.375rem; margin-top: .0625rem;
  border-radius: 50%;
  background: rgba(76,134,238,.20);
  box-shadow: inset 0 0 0 1px rgba(169,198,248,.25);
  font-size: .6875rem; font-weight: 700; color: var(--brand-200);
}
.mini-steps span { font-size: .875rem; line-height: 1.55; color: rgba(255,255,255,.66); }

/* --------------------------------------------------------------------------
   10. CTA BAND
   -------------------------------------------------------------------------- */
.cta-split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.cta-panel { display: flex; flex-direction: column; height: 100%; }
.cta-panel h3 { margin-top: 1.25rem; }
.cta-panel p { margin-top: .75rem; font-size: .9375rem; line-height: 1.6; }
.cta-panel .btn-row { margin-top: auto; padding-top: 1.75rem; }

/* Contact detail rows */
.contact-rows { display: grid; gap: .5rem; }
.contact-row {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.125rem; border-radius: 1.125rem;
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px var(--hairline-inv);
  transition: background .6s var(--ease), transform .6s var(--ease);
}
.contact-row:hover { background: rgba(255,255,255,.09); transform: translateX(3px); }
.contact-row__txt span { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.contact-row__txt strong { display: block; font-size: .9375rem; font-weight: 700; color: #fff; margin-top: .1875rem; letter-spacing: -0.01em; }

/* Marquee-free logo/carrier strip */
.carriers {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem 2.25rem;
}
.carriers li {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 0,"WONK" 0,"opsz" 144;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--slate-400);
  transition: color .6s var(--ease);
}
.carriers li:hover { color: var(--navy-900); }

/* --------------------------------------------------------------------------
   9b. PORTRAIT PLACEHOLDER + LETTER
   Replace .portrait with <img src="assets/img/founder.jpg" alt="…"> at launch.
   -------------------------------------------------------------------------- */
.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid; place-items: center; gap: 1rem;
  text-align: center; padding: 2rem;
  background:
    radial-gradient(70% 55% at 50% 22%, rgba(32,96,220,.16) 0%, transparent 62%),
    linear-gradient(160deg, var(--paper) 0%, var(--paper-deep) 100%);
}
.portrait__initials {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 0,"WONK" 0,"opsz" 144;
  font-size: clamp(3.5rem, 8vw, 5.5rem); font-weight: 600;
  letter-spacing: -0.05em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--brand-200);
}
.portrait__note {
  font-size: .75rem; line-height: 1.6; color: var(--slate-400);
}
.portrait__note code {
  display: inline-block; margin-top: .375rem;
  padding: .1875rem .5rem; border-radius: .375rem;
  background: rgba(7,27,61,.06); font-size: .6875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--slate-500);
}
.letter p {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 0,"WONK" 0,"opsz" 144;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 400; line-height: 1.55; letter-spacing: -0.012em;
  color: var(--slate-700); text-wrap: pretty;
}
.letter p + p { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   10a. TWO-COLUMN LIST + MINI HEADINGS + NEGATIVE CHECKS
   -------------------------------------------------------------------------- */
.two-col-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.75rem; }
@media (max-width: 620px) { .two-col-list { grid-template-columns: 1fr; } }
.mini-head {
  font-size: .625rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--slate-400); margin-bottom: .875rem;
}
.band-navy .mini-head { color: rgba(255,255,255,.42); }
.checks--no li::before {
  background: rgba(100,116,139,.10) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='3.2' stroke-linecap='round'><path d='M18 6 6 18M6 6l12 12'/></svg>") center / 10px no-repeat;
  box-shadow: 0 0 0 1px rgba(100,116,139,.18);
}

/* --------------------------------------------------------------------------
   10b. ANCHOR CHIPS
   -------------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips a {
  display: inline-flex; align-items: center;
  padding: .5rem 1rem; border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: var(--inner-hi), 0 0 0 1px var(--hairline), var(--lift-sm);
  font-size: .8125rem; font-weight: 600; color: var(--slate-700);
  transition: color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.chips a:hover {
  color: var(--brand-600); transform: translateY(-2px);
  box-shadow: var(--inner-hi), 0 0 0 1px rgba(18,73,184,.24), var(--lift-md);
}

/* --------------------------------------------------------------------------
   10c. COMPARISON TABLE
   -------------------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  padding: var(--shell-pad);
  border-radius: var(--r-shell);
  background: rgba(7,27,61,.035);
  box-shadow: inset 0 0 0 1px var(--hairline);
  -webkit-overflow-scrolling: touch;
}
.ctable {
  width: 100%; min-width: 720px;
  border-collapse: separate; border-spacing: 0;
  border-radius: var(--r-core);
  background: var(--white);
  box-shadow: var(--inner-hi), 0 0 0 1px rgba(7,27,61,.05), var(--lift-md);
  overflow: hidden;
  font-size: .875rem;
}
.ctable th, .ctable td {
  padding: 1rem 1.125rem;
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--hairline);
}
.ctable thead th {
  background: linear-gradient(150deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: #fff; font-size: .8125rem; font-weight: 700; letter-spacing: -0.01em;
  border-bottom: 0; white-space: nowrap;
}
.ctable thead th:first-child { background: var(--navy-900); }
.ctable tbody th {
  font-weight: 700; color: var(--navy-900); white-space: nowrap;
  background: var(--paper);
  font-size: .8125rem;
}
.ctable tbody tr:last-child th, .ctable tbody tr:last-child td { border-bottom: 0; }
.ctable tbody tr:hover td, .ctable tbody tr:hover th { background: var(--brand-050); }
.ctable td { color: var(--slate-700); transition: background .4s var(--ease); }
.ctable .yes { color: var(--brand-600); font-weight: 700; }
.ctable .no { color: var(--slate-400); font-weight: 700; }

/* --------------------------------------------------------------------------
   10d. LEGAL PROSE
   -------------------------------------------------------------------------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); margin-top: 3rem; scroll-margin-top: calc(var(--nav-h) + 2rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.125rem; margin-top: 1.75rem; }
.prose p, .prose li { font-size: .9375rem; line-height: 1.72; color: var(--slate-700); }
.prose p { margin-top: .875rem; }
.prose ul { margin-top: .875rem; display: grid; gap: .5rem; }
.prose ul li { position: relative; padding-left: 1.125rem; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .625rem;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand-400);
}
.prose a { color: var(--brand-600); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--navy-900); font-weight: 700; }
.prose hr { margin-block: 2.5rem; }

.notice {
  display: flex; gap: .875rem; align-items: flex-start;
  padding: 1.125rem 1.25rem; border-radius: 1.125rem;
  background: var(--gold-050);
  box-shadow: inset 0 0 0 1px rgba(168,132,47,.22);
  font-size: .875rem; line-height: 1.62; color: #5E4712;
}
.notice svg { flex: none; width: 18px; height: 18px; margin-top: .125rem; color: var(--gold-600); }
.notice strong { color: #3F2F09; }
.notice--info {
  background: var(--brand-050);
  box-shadow: inset 0 0 0 1px rgba(18,73,184,.14);
  color: var(--navy-800);
}
.notice--info svg { color: var(--brand-600); }
.notice--info strong { color: var(--navy-900); }

/* --------------------------------------------------------------------------
   11. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--navy-950); color: rgba(255,255,255,.6); position: relative; }
.footer__top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3.5rem, 6vw, 5rem);
}
.footer__brand img { height: 42px; width: auto; }
.footer__brand p { margin-top: 1.25rem; font-size: .875rem; line-height: 1.65; color: rgba(255,255,255,.55); max-width: 34ch; }
.footer__social { display: flex; gap: .5rem; margin-top: 1.5rem; }
.footer__social a {
  display: grid; place-items: center;
  width: 2.375rem; height: 2.375rem; border-radius: 50%;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.7);
  box-shadow: inset 0 0 0 1px var(--hairline-inv);
  transition: background .5s var(--ease), color .5s var(--ease), transform .5s var(--ease);
}
.footer__social a svg { width: 15px; height: 15px; }
.footer__social a:hover { background: var(--brand-600); color: #fff; transform: translateY(-2px); }
.footer__col h5 {
  font-size: .625rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.4); margin-bottom: 1.125rem;
}
.footer__col li + li { margin-top: .625rem; }
.footer__col a {
  font-size: .875rem; color: rgba(255,255,255,.62);
  transition: color .4s var(--ease), padding-left .5s var(--ease);
}
.footer__col a:hover { color: #fff; padding-left: .25rem; }
.footer__legal {
  padding-block: 2rem 2.5rem;
  border-top: 1px solid var(--hairline-inv);
  display: grid; gap: 1.5rem;
}
.footer__legal p { font-size: .75rem; line-height: 1.65; color: rgba(255,255,255,.38); max-width: 100ch; }
.footer__legal strong { color: rgba(255,255,255,.6); font-weight: 600; }
.footer__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline-inv);
}
.footer__bar p { font-size: .75rem; color: rgba(255,255,255,.4); }
.footer__bar ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__bar a { font-size: .75rem; color: rgba(255,255,255,.5); transition: color .4s var(--ease); }
.footer__bar a:hover { color: #fff; }

/* Sticky mobile action bar */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 38;
  display: none; gap: .5rem; padding: .625rem .75rem calc(.625rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 -1px 0 var(--hairline), 0 -12px 32px -12px rgba(7,27,61,.16);
  transform: translateY(110%);
  transition: transform .7s var(--ease);
}
.mobile-cta.is-on { transform: translateY(0); }
.mobile-cta .btn { flex: 1; justify-content: center; padding-inline: 1rem; }
.mobile-cta .btn__nest { display: none; }

/* --------------------------------------------------------------------------
   12. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .footer__top { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .bento > .col-4, .bento > .col-5, .bento > .col-7, .bento > .col-8 { grid-column: span 6; }
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 940px) {
  .nav__links, .nav__tel { display: none; }
  .burger { display: block; }
  .nav__actions .btn { display: none; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { max-width: 30rem; margin-inline: auto; width: 100%; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 768px) {
  :root { --r-shell: 1.625rem; --r-core: 1.25rem; }
  .section { padding-block: 4rem; }
  .section--tight { padding-block: 3rem; }
  .bento, .grid-2, .grid-3, .grid-4, .cta-split, .stats, .form-grid, .seg {
    grid-template-columns: 1fr;
  }
  .bento > [class*="col-"] { grid-column: span 1 !important; }
  .bento > .row-2 { grid-row: span 1; }
  .split { grid-template-columns: 1fr; gap: 2.25rem; }
  .split--flip .split__media { order: 0; }
  .trust-strip { grid-template-columns: 1fr; gap: 1rem; text-align: left; }
  .trust-strip__item { display: flex; align-items: baseline; gap: .875rem; }
  .trust-strip__item .num { font-size: 1.75rem; flex: none; }
  .trust-strip__item p { margin-top: 0; }
  .plate__badge--tl { top: -.75rem; left: -.5rem; }
  .plate__badge--br { bottom: -.875rem; right: -.5rem; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .mobile-cta { display: flex; }
  body { padding-bottom: 4.5rem; }
  .head-row { align-items: flex-start; }
  .btn-row .btn { width: 100%; justify-content: space-between; }
}

@media (max-width: 420px) {
  .footer__top { grid-template-columns: 1fr; }
  .carriers { gap: .5rem 1.25rem; }
  .carriers li { font-size: .9375rem; }
}

/* Print */
@media print {
  .nav-wrap, .menu, .mobile-cta, .grain, .btn { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .band-navy { background: #fff !important; color: #000 !important; }
  .band-navy h1, .band-navy h2, .band-navy h3, .band-navy h4 { color: #000 !important; }
}