@font-face {
  font-family:Inter;
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../assets/fonts/inter-latin-var.woff2') format('woff2')
}

/* ---------- Tokens ---------- */

:root {
  /* Reign: warm paper, dark ink and forest green and antique gold. */
  --color-sage:#e8efe8;
  --color-sand:#f1e7d8;
  --color-sky:#e4edf1;
  --color-charcoal:#202b29;
  --color-gold:#936a27;
  --color-gold-hover:#74501a;
  --color-gold-light:#d8b66c;
  --color-ink:#123e35;
  --color-footer-accent:#d8b66c;
  --color-footer-muted:#d9e5dd;
  --color-bg:#fcfaf7;
  --color-surface:#f0f2e9;
  --color-text:#123e35;
  --color-text-muted:#52645b;
  --color-border:#d3dfd5;
  --color-primary:#23634f;
  --color-primary-hover:#164b3a;
  --color-on-primary:#ffffff;
  --color-focus:#23634f;
  --color-error:#b42318;
  --color-error-bg:#fef3f2;
  --color-success:#166534;
  --color-success-bg:#f0fdf4;

  /* Type. */
  --font-sans:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-heading:Georgia,'Times New Roman',serif;
  --text-sm:.875rem;
  --text-base:1rem;
  --text-lg:1.125rem;
  --text-xl:1.375rem;
  --text-2xl:clamp(2rem,3.6vw,3.2rem);
  --text-3xl:clamp(2.5rem,5vw,4.5rem);
  --leading-tight:1.2;
  --leading-normal:1.6;

  /* Space, shape, layout. */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-12:3rem;
  --space-16:4rem;
  --radius:10px;
  --container:1200px;
  --header-height:90px;
  --shadow:0 2px 12px rgba(0,0,0,.08);
  --transition:.2s ease
}

/* ---------- Reset & base ---------- */

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

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

body {
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  color:var(--color-text);
  background:var(--color-bg)
}

body.menu-open {
  overflow:hidden
}

h1,h2,h3,h4 {
  font-family:var(--font-heading);
  letter-spacing:-.035em;
  font-weight:700;
  line-height:var(--leading-tight);
  margin:0 0 var(--space-4)
}

h1 {
  font-size:var(--text-3xl)
}

h2 {
  font-size:var(--text-2xl)
}

h3 {
  font-size:var(--text-xl)
}

p,ul,ol {
  margin:0 0 var(--space-4)
}

img,svg,video {
  display:block;
  max-width:100%;
  height:auto
}

a {
  color:inherit;
  text-underline-offset:.15em
}

:focus-visible {
  outline:3px solid var(--color-focus);
  outline-offset:2px
}

[hidden] {
  display:none!important
}

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

.container {
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--space-6)
}

.section {
  padding-block:88px
}

.section--alt {
  background:var(--color-surface)
}

.section__header {
  max-width:760px;
  margin:0 auto var(--space-8);
  text-align:center;
  margin-bottom:var(--space-12)
}

.section__lede {
  color:var(--color-text-muted);
  font-size:var(--text-lg)
}

.grid {
  display:grid;
  gap:var(--space-6);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))
}

.page-hero {
  padding-block:64px 48px;
  background:var(--color-bg);
  text-align:center
}

.page-hero__lede {
  max-width:640px;
  margin-inline:auto;
  color:var(--color-text-muted);
  font-size:var(--text-lg)
}

/* Visible marker for copy the owner has not supplied yet. Remove each one as
   real content lands; `grep -rn placeholder-note *.html` lists what is left. */
.placeholder-note {
  display:inline-block;
  padding:var(--space-1) var(--space-2);
  border:1px dashed var(--color-text-muted);
  border-radius:var(--radius);
  color:var(--color-text-muted);
  font-size:.75rem;
  border-style:solid;
  border-color:var(--color-border)
}

/* ---------- Skip link ---------- */

.skip-link {
  position:absolute;
  top:-100px;
  left:var(--space-4);
  z-index:1000;
  padding:var(--space-2) var(--space-4);
  background:var(--color-primary);
  color:var(--color-on-primary);
  border-radius:var(--radius);
  text-decoration:none
}

.skip-link:focus {
  top:var(--space-4)
}

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

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  min-height:52px;
  padding:var(--space-3) var(--space-8);
  border:2px solid var(--color-primary);
  border-radius:var(--radius);
  font:inherit;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:background-color var(--transition),color var(--transition),border-color var(--transition)
}

.btn--primary {
  background:var(--color-primary);
  color:var(--color-on-primary)
}

.btn--primary:hover {
  background:var(--color-primary-hover);
  border-color:var(--color-primary-hover)
}

.btn--secondary {
  background:transparent;
  color:var(--color-primary)
}

.btn--secondary:hover {
  background:var(--color-surface)
}

.btn:disabled {
  opacity:.6;
  cursor:not-allowed
}

.btn-group {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-4);
  justify-content:center
}

/* ---------- Header & nav ---------- */

.site-header {
  position:sticky;
  top:0;
  z-index:100;
  background:var(--color-bg);
  border-bottom:1px solid var(--color-border);
  transition:box-shadow var(--transition)
}

.site-header.is-scrolled {
  box-shadow:var(--shadow)
}

.nav {
  display:flex;
  align-items:center;
  gap:var(--space-6);
  max-width:var(--container);
  min-height:var(--header-height);
  margin-inline:auto;
  padding-inline:var(--space-6)
}

.nav__logo {
  display:inline-flex;
  align-items:center;
  flex-shrink:0
}

.nav__logo-img {
  width:auto;
  height:52px
}

.nav__links {
  display:flex;
  align-items:center;
  gap:28px;
  margin:0 0 0 auto;
  padding:0;
  list-style:none;
  font-size:.8rem
}

.nav__links a:not(.btn) {
  text-decoration:none;
  font-weight:500
}

.nav__links a:not(.btn):hover,.nav__links a[aria-current="page"] {
  text-decoration:underline
}

.nav__mobile-only {
  display:none
}

.nav__actions {
  display:flex;
  align-items:center;
  gap:var(--space-4);
  margin-left:16px;
  font-size:.8rem
}

.nav__phone {
  font-weight:600;
  text-decoration:none
}

.nav__hamburger {
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  margin-left:auto;
  padding:10px;
  border:0;
  background:none;
  cursor:pointer
}

.nav__hamburger-line {
  display:block;
  width:100%;
  height:2px;
  background:var(--color-text);
  transition:transform var(--transition),opacity var(--transition)
}

.nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(1) {
  transform:translateY(7px) rotate(45deg)
}

.nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(2) {
  opacity:0
}

.nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(3) {
  transform:translateY(-7px) rotate(-45deg)
}

@media(max-width:900px) {
  .nav__actions {
    display:none
  }

  .nav {
    flex-wrap:wrap
  }

  .nav__links {
    flex-wrap:wrap;
    justify-content:center;
    gap:var(--space-2) var(--space-6);
    width:100%;
    margin:0;
    padding:0 0 var(--space-3)
  }

  .nav--enhanced .nav__hamburger {
    display:flex
  }

  .nav--enhanced .nav__links {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:auto;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    max-height:calc(100vh - var(--header-height));
    overflow-y:auto;
    margin:0;
    padding:var(--space-4) var(--space-6) var(--space-6);
    background:var(--color-bg);
    border-bottom:1px solid var(--color-border);
    box-shadow:var(--shadow)
  }

  .nav--enhanced .nav__links--open {
    display:flex
  }

  .nav__links li a:not(.btn) {
    display:block;
    padding:var(--space-3) 0
  }

  .nav__mobile-only {
    display:block;
    margin-top:var(--space-3)
  }

  .nav__mobile-only .btn {
    width:100%
  }
}

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

.site-footer {
  padding-block:var(--space-12) var(--space-6);
  background:var(--color-charcoal);
  color:var(--color-on-primary);
  padding-top:64px
}

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

.footer__brand-name {
  font-size:58px;
  font-weight:700;
  font-family:Georgia,serif;
  line-height:1;
  text-decoration:none;
  letter-spacing:-4px
}

.footer__tagline {
  margin-top:20px;
  opacity:.9;
  font-size:.85rem
}

.footer__col-title {
  margin-bottom:24px;
  font-weight:600;
  font-size:.75rem
}

.footer__links {
  margin:0;
  padding:0;
  list-style:none
}

.footer__links li {
  margin-bottom:12px
}

.footer__links a,.footer__legal a {
  text-decoration:none
}

.footer__links a:hover,.footer__legal a:hover {
  text-decoration:underline
}

.footer__bottom {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:var(--space-4);
  margin-top:var(--space-8);
  padding-top:var(--space-6);
  border-top:1px solid rgba(255,255,255,.25);
  font-size:.7rem;
  color:var(--color-footer-muted)
}

.footer__legal {
  display:flex;
  gap:var(--space-6)
}

/* ---------- Cards ---------- */

.card {
  padding:var(--space-6);
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius)
}

.card__title {
  font-size:var(--text-lg)
}

.card__text {
  color:var(--color-text-muted)
}

/* ---------- CTA band ---------- */

.cta-band {
  padding-block:80px;
  background:var(--color-sage);
  text-align:center
}

/* ---------- FAQ (js/faq.js) ---------- */

.faq__list {
  max-width:780px;
  margin-inline:auto
}

.faq__item {
  border-bottom:1px solid var(--color-border)
}

.faq__question {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-4);
  width:100%;
  min-height:78px;
  padding:var(--space-4) 0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  letter-spacing:-.025em
}

.faq__question::after {
  content:'+';
  flex-shrink:0;
  font-size:var(--text-xl);
  line-height:1
}

.faq__question[aria-expanded="true"]::after {
  content:'\2212'
}

.faq__answer {
  padding-bottom:var(--space-4);
  color:var(--color-text-muted)
}

/* ---------- Forms (js/contact-form.js) ---------- */

.form {
  display:grid;
  gap:var(--space-4)
}

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

.form__group {
  display:grid;
  gap:var(--space-1)
}

.form__label {
  font-weight:600
}

.form__optional {
  color:var(--color-text-muted);
  font-weight:400
}

.form__input,.form__select,.form__textarea {
  width:100%;
  min-height:44px;
  padding:var(--space-3);
  border:1px solid var(--color-text-muted);
  border-radius:var(--radius);
  background:var(--color-bg);
  color:var(--color-text);
  font:inherit
}

.form__textarea {
  min-height:140px;
  resize:vertical
}

/* FormSubmit honeypot: off-screen, unfocusable, hidden from assistive tech. */
.form__honeypot {
  display:none
}

.form__status {
  padding:var(--space-4);
  border-radius:var(--radius)
}

.form__status--error {
  background:var(--color-error-bg);
  color:var(--color-error)
}

.form__status--success {
  background:var(--color-success-bg);
  color:var(--color-success)
}

/* ---------- Scroll motion (js/main.js) ----------
   Content remains readable throughout the entrance, with or without JS. */

.reveal,.reveal-pro {
  opacity:1;
  transform:none
}

.reveal-ready .reveal:not(.is-visible) {
  transform:translateY(12px)
}

.reveal-ready .reveal {
  transition:transform .5s ease
}

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

  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }

  .reveal-ready .reveal:not(.is-visible) {
    opacity:1;
    transform:none
  }
}

/* Reign shared presentation components. */
.eyebrow {
  color:var(--color-primary);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.16em;
  margin-bottom:var(--space-6)
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:var(--space-6);
  padding-block:12px;
  color:var(--color-primary);
  font-weight:600;
  text-decoration:none;
  border-bottom:0
}
.text-link:hover {
  color:var(--color-primary-hover)
}
.section--lavender {
  background:var(--color-sage)
}

.section__note {

  text-align:center;

  margin:var(--space-8) 0 0

}

.coverage-grid {

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:var(--space-4)

}
.coverage-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:28px 18px;
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  text-align:center;
  text-decoration:none;
  background:var(--color-bg);
  transition:border-color var(--transition),transform var(--transition)
}
.coverage-card:hover {
  border-color:var(--color-primary);
  transform:translateY(-5px)
}
.coverage-card img {
  width:112px;
  margin-bottom:var(--space-6)
}
.coverage-card h3 {
  font-size:1.1rem;
  letter-spacing:-.03em
}
.coverage-card p {
  color:var(--color-text-muted);
  font-size:.85rem
}
.coverage-card__link {
  display:flex;
  gap:18px;
  align-items:center;
  color:var(--color-primary);
  font-size:.75rem;
  font-weight:600;
  margin-top:auto;
  padding-top:16px
}

.page-hero h1 {

  max-width:900px;

  margin-inline:auto

}

.cta-band h2 {

  margin-bottom:24px

}
.cta-band p:not(.eyebrow) {
  color:var(--color-text-muted);
  margin-bottom:28px
}

.brand-dot {

  color:var(--color-footer-accent)

}

.footer__small,.footer__links,.footer__grid p {

  font-size:.85rem

}

.footer__contact {

  display:inline-flex;

  gap:30px;

  font-size:1.15rem;

  text-decoration:none;

  border-bottom:0;

  padding-bottom:10px

}
.footer__preview {
  margin-top:40px;
  margin-bottom:0
}
.footer__preview .placeholder-note {
  color:var(--color-footer-muted);
  border-color:#73897b;
  font-size:.7rem
}

.nav__links a[aria-current="page"] {

  color:var(--color-primary);

  text-underline-offset:8px

}

.nav__actions .btn {

  min-height:44px;

  padding:10px 24px

}

@media(max-width:900px) {
  .coverage-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .section {
    padding-block:64px
  }
  .nav__links {
    font-size:1rem
  }
}
@media(max-width:540px) {
  .container {
    padding-inline:22px
  }
  .nav {
    min-height:78px;
    padding-inline:22px
  }
  .nav__logo-img {
    height:46px
  }
  .coverage-grid {
    gap:12px
  }
  .coverage-card {
    padding:20px 12px
  }
  .coverage-card img {
    width:86px;
    margin-bottom:16px
  }
  .coverage-card h3 {
    font-size:.94rem
  }
  .coverage-card p {
    font-size:.76rem
  }
  .coverage-card__link {
    font-size:.68rem;
    gap:8px
  }
  .footer__grid {
    grid-template-columns:1fr;
    gap:32px
  }
  .page-hero {
    padding-block:64px 48px
  }
}

/* Inner-page elements: spacious introductions and compact next steps. */
.page-hero h1 span { color:var(--color-primary) }
.page-hero__lede { margin-top:24px; font-size:1rem }
.topic-nav { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:28px }
.topic-nav a { display:flex; align-items:center; gap:28px; padding:12px 20px; border:1px solid var(--color-border); border-radius:var(--radius); font-size:.8rem; text-decoration:none }
.topic-nav a:hover { border-color:var(--color-primary); color:var(--color-primary); background:var(--color-sage) }
.next-step { padding-block:56px; background:var(--color-sage); border-radius:50% 44% 0 0 / 30px 38px 0 0 }
.next-step__inner { display:flex; align-items:center; justify-content:space-between; gap:32px }
.next-step h2 { font-size:clamp(1.6rem,2.6vw,2.2rem); margin-bottom:10px }
.next-step p { margin:0; color:var(--color-text-muted); font-size:.9rem }
.next-step .btn { flex-shrink:0; gap:32px }
@media(max-width:600px) {
  .topic-nav { gap:8px }
  .topic-nav a { gap:14px; padding:12px 14px; font-size:.75rem }
  .next-step__inner { flex-direction:column; text-align:center; gap:24px }
}

/* Shared illustrated product pages. */
/* Homepage and Auto share one aligned copy/art grid. */
.split-hero { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); align-items:center; gap:40px; text-align:left }
.split-hero > * { min-width:0 }
.hero-demo-note { max-width:340px; margin:18px 0 0; font-size:.72rem; color:var(--color-text-muted) }
@media(max-width:900px) { .split-hero { grid-template-columns:1fr; gap:28px } }
.product-hero { text-align:center; padding:64px 0 0; overflow:hidden }
.product-hero h1 { font-family:Georgia,serif; font-size:clamp(2.8rem,5.2vw,4.7rem); font-weight:500; letter-spacing:-.055em; line-height:1.12; margin:0 auto 24px }
.product-hero h1 span { color:var(--color-primary) }
.product-hero__lede { max-width:580px; margin:0 auto 28px; font-size:1.05rem; color:var(--color-text-muted); line-height:1.7 }
.product-hero .btn { min-width:220px; gap:32px; padding:17px 28px; border-radius:999px }
.product-hero__explore { display:block; width:fit-content; margin:18px auto 0; font-size:.8rem; color:var(--color-text-muted); text-decoration:none }
.product-hero__explore span { margin-left:12px }
.product-hero__scene { display:block; width:100%; height:auto; margin:22px auto 0 }
.product-notice { text-align:center; padding:22px 24px; font-size:.75rem; color:var(--color-text-muted) }
.product-start { scroll-margin-top:110px; background:var(--color-sage); border-radius:48% 52% 46% 54% / 40px 32px 38px 28px; margin-block:24px; padding-block:72px }
.product-topics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px }
.product-topics article { padding-top:8px }
.product-topic-number { display:block; color:var(--color-primary); font-size:.75rem; letter-spacing:.1em; margin-bottom:18px }
.product-topics h3 { font-size:1.35rem }
.product-topics p,.product-conversation p { color:var(--color-text-muted); line-height:1.8 }
.product-conversation { display:grid; grid-template-columns:1fr 1.4fr; gap:80px; align-items:center }
.product-conversation > img { width:min(100%,300px); height:auto; justify-self:center }
.product-conversation h2 { font-size:clamp(1.8rem,3vw,2.6rem) }
.product-questions { max-width:800px }
.product-questions details { border-bottom:1px solid var(--color-border); padding:0 4px }
.product-questions summary { cursor:pointer; padding:23px 0; font-size:1rem; font-weight:600; line-height:1.6 }
.product-questions details p { color:var(--color-text-muted); margin:0 0 24px; line-height:1.8 }
.product-related { padding:32px 0 64px; text-align:center }
.product-related h2 { font-size:1.5rem }
.product-related .container > div { display:flex; justify-content:center; gap:24px }
.product-related a { display:flex; align-items:center; gap:20px; padding:14px 24px; border:1px solid var(--color-border); border-radius:var(--radius); text-decoration:none; font-size:.9rem }
.product-related a:hover { border-color:var(--color-primary); background:var(--color-sage) }
.product-related img { width:55px; height:55px }
@media(max-width:900px) { .product-conversation { gap:30px } .product-topics { gap:24px } }
@media(max-width:600px) {
  .product-hero { padding-top:40px }
  .product-hero .eyebrow { font-size:.6rem; letter-spacing:.12em }
  .product-hero h1 { font-size:clamp(2.5rem,10vw,3.5rem) }
  .product-hero__lede { font-size:.94rem }
  .product-hero__scene { width:120%; max-width:none!important; margin-left:-10%; margin-top:32px }
  .product-topics,.product-conversation { grid-template-columns:1fr; gap:30px }
  .product-conversation > img { width:200px }
  .product-related .container > div { flex-direction:column; gap:14px }
  .product-related a { justify-content:space-between }
}

/* Product-first navigation, with a truly centered wordmark. */
.nav { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); max-width:1440px; padding-inline:36px; gap:24px }
.nav__logo { grid-column:2; grid-row:1; justify-self:center }
.nav__logo-img { width:190px; height:auto }
.nav__links { grid-column:1; grid-row:1; justify-self:start; margin:0; gap:26px; font-size:.9rem }
.nav__links a:not(.btn) { display:inline-flex; align-items:center; min-height:44px }
.nav__quote { grid-column:3; grid-row:1; justify-self:end; min-height:44px; padding:12px 22px; white-space:nowrap; font-size:.85rem }
@media(max-width:900px) {
 .nav { padding-inline:20px; grid-template-columns:1fr auto 1fr; gap:12px }
 .nav__logo-img { width:164px }
 .nav__hamburger { grid-column:1; grid-row:1; justify-self:start; margin:0 }
 .nav__links { grid-column:1 / -1; grid-row:2; justify-self:stretch; gap:0 }
 .nav__links li a:not(.btn) { display:flex; min-height:48px }
}
@media(max-width:600px) {
 .nav { grid-template-columns:32px minmax(0,1fr) auto; gap:10px; padding-inline:16px }
 .nav__logo { justify-self:start }
 .nav__logo-img { width:120px; max-width:100% }
 .nav__quote { font-size:.75rem; padding:10px 12px }
}
.footer__intro { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:52px }
.footer__grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:36px }
.footer__col-title { font-family:var(--font-sans); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--color-on-primary); margin-bottom:20px }
.footer__links a { display:inline-block; padding-block:7px; line-height:1.5 }
.footer__links li { margin-bottom:4px }
.footer__demo-note { color:var(--color-footer-muted); font-size:.75rem; margin-top:36px; max-width:560px }
@media(max-width:700px) {
 .footer__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 24px }
 .footer__intro { align-items:flex-start; flex-direction:column; margin-bottom:36px }
 .footer__col-title { font-size:.7rem }
 .footer__links a { font-size:.85rem; min-height:44px }
}
/* Motion is confined to the drawing, with a CSS-only pause control. */
.product-scene-wrap { position:relative; max-width:1100px; margin:12px auto 0; padding-bottom:38px }
.product-scene-wrap .product-hero__scene { margin-top:0 }
.product-motion-toggle,.product-motion-label { position:absolute; bottom:0; right:0; width:148px; height:40px; border-radius:22px }
.product-motion-toggle { opacity:0; z-index:2; cursor:pointer; margin:0 }
.product-motion-label { display:grid; place-items:center; border:1px solid var(--color-border); color:var(--color-text-muted); background:var(--color-bg); font-size:.72rem }
.product-motion-toggle:focus-visible + .product-motion-label { outline:3px solid var(--color-focus); outline-offset:3px }
.motion-play { display:none }
.product-motion-toggle:checked + .product-motion-label .motion-pause { display:none }
.product-motion-toggle:checked + .product-motion-label .motion-play { display:inline }
.detail-car { animation:detail-roll 8s ease-in-out infinite }
.detail-sway { transform-box:fill-box; transform-origin:50% 100%; animation:detail-sway 7s ease-in-out infinite }
.detail-umbrella { transform-box:fill-box; transform-origin:50% 85%; animation:detail-float 6s ease-in-out infinite }
.detail-cloud,.detail-birds { animation:detail-drift 12s ease-in-out infinite }
.product-motion-toggle:checked ~ svg * { animation-play-state:paused!important }
@keyframes detail-roll { 0%,100% { transform:translateX(-4px) } 50% { transform:translateX(5px) } }
@keyframes detail-sway { 0%,100% { transform:rotate(-1deg) } 50% { transform:rotate(1deg) } }
@keyframes detail-float { 0%,100% { transform:translateY(0) rotate(-2deg) } 50% { transform:translateY(-4px) rotate(2deg) } }
@keyframes detail-drift { 0%,100% { transform:translateX(0) } 50% { transform:translateX(9px) } }
@media(prefers-reduced-motion:reduce) { .product-scene-wrap svg * { animation:none!important } .product-motion-toggle,.product-motion-label { display:none } .product-scene-wrap { padding-bottom:0 } }

/* Links stay simple; underline only on interaction. */
.text-link:hover,.footer__contact:hover { text-decoration:underline; text-underline-offset:4px }

.motion-suspended * { animation-play-state:paused!important }

/* Shared quote demo components. */
.quote-shell { max-width:720px; margin:auto; padding:40px 24px 72px }
.quote-intro { text-align:center; margin-bottom:28px }
.quote-intro img { width:64px; height:64px; margin:0 auto 12px }
.quote-intro h1 { font-family:Georgia,serif; font-size:clamp(2rem,6vw,3rem); font-weight:500; letter-spacing:-.04em; margin-bottom:12px }
.quote-intro p { color:var(--color-text-muted); font-size:.9rem; max-width:500px; margin:0 auto }
.quote-badge { display:inline-block; color:var(--color-primary); background:var(--color-sage); padding:5px 12px; border-radius:20px; font-size:.75rem; font-weight:700; margin-bottom:12px }
.quote-card { background:var(--color-bg); border:1px solid var(--color-border); border-radius:16px; padding:32px; scroll-margin-top:110px }
.quote-progress { display:flex; align-items:center; gap:20px; font-size:.8rem; color:var(--color-text-muted); margin-bottom:28px }
.quote-progress progress { flex:1; min-width:0; height:6px; border:0; border-radius:4px; accent-color:var(--color-primary) }
.quote-progress progress::-webkit-progress-bar { background:var(--color-sage); border-radius:4px }
.quote-progress progress::-webkit-progress-value { background:var(--color-primary); border-radius:4px }
.quote-card h2 { font-size:clamp(1.4rem,4vw,1.8rem); margin:0 0 8px; line-height:1.3 }
.quote-help { color:var(--color-text-muted); font-size:.9rem; margin-bottom:24px }
.quote-options { border:0; padding:0; margin:24px 0; display:grid; gap:12px; min-width:0 }
.quote-choice { display:flex; align-items:center; gap:14px; min-height:60px; padding:15px 18px; border:1px solid var(--color-border); border-radius:10px; cursor:pointer; font-size:.95rem }
.quote-choice:has(input:checked) { border-color:var(--color-primary); background:var(--color-sage) }
.quote-choice:has(input:focus-visible) { outline:3px solid var(--color-focus); outline-offset:3px }
.quote-choice input { accent-color:var(--color-primary); width:20px; height:20px; flex:none; margin:0 }
.quote-field { display:grid; gap:8px; font-size:.9rem; font-weight:600 }
.quote-field select { width:100%; min-width:0; min-height:54px; padding:12px; border:1px solid var(--color-border); border-radius:8px; background:var(--color-bg); color:var(--color-text); font:inherit; font-size:1rem; font-weight:400 }
.quote-field select:disabled { background:var(--color-sage); color:var(--color-text-muted); cursor:not-allowed }
.quote-field select[aria-invalid="true"] { border-color:#a22537 }
.quote-actions { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:28px }
.quote-actions .btn { min-height:48px; border-radius:8px }
.quote-back,.quote-edit { background:none; border:0; color:var(--color-primary); font:inherit; cursor:pointer; min-height:48px; padding:10px 4px }
.quote-error { color:#a22537; font-size:.9rem; margin:12px 0 }
.quote-review { margin:24px 0 0 }
.quote-review > div { display:grid; grid-template-columns:1fr auto; gap:0 16px; padding:12px 0; border-bottom:1px solid var(--color-border) }
.quote-review dt { font-size:.8rem; color:var(--color-text-muted) }
.quote-review dd { margin:4px 0; grid-column:1; overflow-wrap:anywhere }
.quote-review dd.quote-review-edit { grid-column:2; grid-row:1 / 3; margin:0 }
.quote-edit { font-size:.85rem }
.quote-footnote { font-size:.8rem; color:var(--color-text-muted); text-align:center; margin:20px 0 0 }
.quote-card [hidden] { display:none }
.quote-person { min-width:0; margin:24px 0; padding:20px; border:1px solid var(--color-border); border-radius:12px; display:grid; gap:18px }
.quote-person legend { padding:0 8px; font-weight:600; font-size:.95rem }
.quote-inline-note { font-size:.8rem; line-height:1.6; color:var(--color-text-muted); margin:0 }
.quote-add { display:block; width:100%; min-height:48px; padding:12px; border:1px solid var(--color-primary); border-radius:8px; background:transparent; color:var(--color-primary); font:inherit; cursor:pointer }
.quote-review dd { white-space:pre-line; line-height:1.7 }
.quote-review-edit .quote-edit { max-width:100px; text-align:right }
.quote-shell--results { max-width:1160px }
.quote-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:24px 0 }
.quote-offer { min-width:0; display:flex; flex-direction:column; padding:24px 20px; border:1px solid var(--color-border); border-radius:12px }
.quote-offer .quote-badge { align-self:flex-start; font-size:.65rem; letter-spacing:.04em }
.quote-offer h3 { font-family:Georgia,serif; font-weight:500; font-size:1.7rem; margin:0 0 12px }
.quote-price { font-size:2.6rem; font-weight:600; letter-spacing:-.05em; margin:0; line-height:1.2; color:var(--color-primary) }
.quote-benefits { flex:1; margin:24px 0 }
.quote-benefits > div { padding:12px 0; border-top:1px solid var(--color-border) }
.quote-benefits dt { font-size:.8rem; color:var(--color-text-muted) }
.quote-benefits dd { margin:4px 0 0; font-size:.9rem; overflow-wrap:anywhere }
.quote-result-summary { background:var(--color-sage); color:var(--color-text); padding:12px 16px; border-radius:8px; font-size:.85rem }
.quote-offer .btn { min-height:48px; border-radius:8px; width:100% }
.quote-ending { background:var(--color-sage); padding:24px; border-radius:12px }
.quote-ending h3 { font-size:1.5rem }
.quote-price-small { color:var(--color-primary); font-size:1.2rem; font-weight:600 }
@media(max-width:850px) { .quote-results { grid-template-columns:1fr } }
@media(max-width:540px) {
  .quote-shell { padding:28px 16px 48px }
  .quote-card { padding:24px 18px }
  .quote-actions .btn { flex:1 }
  .quote-progress { gap:12px }
  .quote-person { padding:16px 12px }
}

/* Warm gold identifies primary actions; green remains the navigation and form accent. */
.btn--primary { background:var(--color-gold); border-color:var(--color-gold); border-radius:999px }
.btn--primary:hover { background:var(--color-gold-hover); border-color:var(--color-gold-hover) }
.quote-panel h2,.quote-panel h3 { font-family:var(--font-sans); letter-spacing:-.025em }

/* Shared product hero composition. */
.product-page .product-hero { padding:64px 0 56px }
.product-page .product-hero h1 { font-size:clamp(2.7rem,4.3vw,4rem); margin:0 0 24px }
.product-page .product-hero__lede { max-width:360px; margin:0 0 28px }
.product-page .product-scene-wrap { width:100%; margin:0; padding-bottom:40px }
.product-page .product-hero__scene { width:100%; max-width:100%; margin:0 }
.product-page .product-motion-label,.product-page .product-motion-toggle { right:20px }
.product-page .product-start { margin-top:0 }
@media(max-width:900px) {
  .product-page .product-hero { padding:36px 0 24px }
  .product-page .product-hero h1 { font-size:clamp(2.7rem,7vw,4rem) }
  .product-page .product-scene-wrap { max-width:560px; justify-self:center }
}