/* Site type and section scale. Tokens are defined in style.css. */
:root {
  --type-h1: 64px;
  --type-h1-lh: 1.05;
  --type-h2: 40px;
  --type-h2-lh: 1.15;
  --type-h3: 22px;
  --type-h3-lh: 1.3;
  --type-body: 18px;
  --type-body-lh: 1.6;
  --type-lead: 21px;
  --type-lead-lh: 1.5;
  --type-eyebrow: 13px;
  --type-small: 14px;
  --section-pad: 120px;
  --bg-tint: #1c1c1c;
  --rule-faint: rgba(240, 237, 232, 0.12);
}

@media (max-width: 600px) {
  :root {
    --type-h1: 36px;
    --type-h1-lh: 1.1;
    --type-h2: 28px;
    --type-h3: 20px;
    --type-body: 17px;
    --type-lead: 18px;
    --section-pad: 72px;
  }
}

h1, h2, h3, h4 {
  font-family: var(--font-serif), "Lora", Georgia, serif !important;
  font-weight: 600 !important;
}
h1 {
  font-size: var(--type-h1) !important;
  line-height: var(--type-h1-lh) !important;
  font-weight: 600 !important;
}
h2 {
  font-size: var(--type-h2) !important;
  line-height: var(--type-h2-lh) !important;
  max-width: 20ch !important;
  font-weight: 600 !important;
}
h3, .door-title {
  font-size: var(--type-h3) !important;
  line-height: var(--type-h3-lh) !important;
  font-weight: 600 !important;
}
p, main li {
  font-size: var(--type-body) !important;
  line-height: var(--type-body-lh) !important;
  font-weight: 400 !important;
}
p { max-width: 65ch; }
.lede, .hero-main .lede, .section-head .lede {
  font-size: var(--type-lead) !important;
  line-height: var(--type-lead-lh) !important;
  font-weight: 400 !important;
  max-width: 65ch;
}
.eyebrow,
.b2b-kicker,
.about-kicker {
  display: block;
  font-family: var(--font-serif), "Lora", Georgia, serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: #F0EDE8 !important;
  opacity: 1 !important;
  margin: 72px 0 12px !important;
  max-width: none;
  border-top: 1px solid rgba(240, 237, 232, 0.12);
  padding-top: 0;
}
.section-head > .eyebrow,
.concept-hero .eyebrow,
.b2b-kicker,
.about-kicker,
.about-contact .eyebrow {
  margin-top: 0 !important;
  border-top: 0 !important;
}
.eyebrow + h2,
.section-head h2 {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}
.proof-desc, .proof-more, .callout-note, .form-label, .craft-hint, .cred-note, figcaption, .caption {
  font-size: var(--type-small) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  opacity: 0.7;
}
.btn-primary, .btn-outline, button, .nav-links a, a.nav-cta, a.nav-cta-mobile, a.sticky-cta {
  font-weight: 600 !important;
}

section {
  padding-top: var(--section-pad) !important;
  padding-bottom: var(--section-pad) !important;
}
section:has(> .container > .section-head > .eyebrow:first-child),
section:has(> .container > .eyebrow:first-child) {
  padding-top: 72px !important;
}
@media (max-width: 600px) {
  section:has(> .container > .section-head > .eyebrow:first-child),
  section:has(> .container > .eyebrow:first-child) {
    padding-top: 48px !important;
  }
}
.section-head { margin-bottom: 16px !important; }
h2 + .lede, .eyebrow + h2 + p, .eyebrow + h2 + ul { margin-top: 0 !important; }
.doors, .cases-three, .notes-grid, .grid-2, .grid-3, .grid-4 { gap: 24px !important; }

main > section:nth-child(odd) { background-color: var(--black, #111111) !important; }
main > section:nth-child(even) { background-color: var(--bg-tint) !important; }
.guarantee-section,
.guarantee-section.section-tone {
  background-color: var(--cream, #F0EDE8) !important;
}
.guarantee-section + section,
section.section-tone + section { border-top: 0; }

@media (max-width: 600px) {
  .eyebrow,
  .b2b-kicker,
  .about-kicker { margin-top: 48px !important; }
  .section-head > .eyebrow,
  .concept-hero .eyebrow,
  .b2b-kicker,
  .about-kicker,
  .about-contact .eyebrow { margin-top: 0 !important; }
}

/* Desktop hero: keep the H1 largest, and sit it near the header. */
@media (min-width: 601px) {
  .hero.hero--v4 {
    padding-top: 56px !important;
    padding-bottom: 0 !important;
  }
  .hero-grid--split { align-items: start !important; }
  h2.hero-cta-title {
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    max-width: none !important;
  }
  a.sticky-cta,
  a.sticky-cta.is-on,
  a.sticky-cta.is-hidden {
    right: 24px !important;
    left: auto !important;
    bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }
  a.sticky-cta.is-on { transform: none !important; }
  a.sticky-cta.is-hidden,
  a.sticky-cta:not(.is-on) { transform: translateY(calc(100% + 24px)) !important; }
}
body:has(.about-footer) a.sticky-cta,
body:has(.about-footer) a.sticky-cta.is-on,
body:has(.about-footer) a.sticky-cta.is-hidden {
  display: none !important;
}

.about-contact {
  margin-top: 48px !important;
  padding: 48px !important;
  max-width: none;
  border-top: 1px solid rgba(240, 237, 232, 0.12);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.about-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-height: 0;
}
.about-footer-line { margin: 0; }
.about-footer-links { margin: 0; }
.footer-tag-break { display: none; }
@media (min-width: 601px) {
  .footer-tagline { white-space: nowrap; }
}
@media (max-width: 600px) {
  .footer-tag-sep { display: none; }
  .footer-tag-break { display: block; }
}

.hero-free { display: none; }

/* Phase 1 mobile hero stays exact, plus the free line. */
@media (max-width: 600px) {
  .hero.hero--v4 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
  }
  .hero-main .h1-lines,
  .hero-main h1 {
    font-size: 36px !important;
    line-height: 1.1 !important;
    max-width: none !important;
  }
  .hero-main .lede {
    font-size: 17px !important;
    line-height: 1.5 !important;
    margin: 16px 0 0 !important;
    max-width: none !important;
  }
  .hero-cta-box { margin-top: 24px !important; }
  .hero-cta-box .btn-primary {
    height: 52px !important;
    min-height: 52px !important;
    font-size: 17px !important;
  }
  .hero-cta-actions { gap: 0 !important; }
  .hero-free {
    display: block !important;
    margin: 12px 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-align: center;
    opacity: 0.7 !important;
    max-width: none !important;
    color: #F0EDE8 !important;
  }
  .hero-art-wrap img,
  .hero-art .parallax-target {
    object-fit: cover !important;
    object-position: 50% 70% !important;
  }
}

.hero-cta-note {
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  opacity: 1 !important;
  max-width: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.proof-stat, .proof-count, .case-stat-v {
  font-weight: 400 !important;
  opacity: 1 !important;
  max-width: none !important;
}
.hero-caps, .hero-caps li {
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  opacity: 1 !important;
  max-width: none !important;
}
.deck-name, .deck-def, .deck-stop, .nav-links a, .footer-nav a, .footer-copy, .proof-stat, .proof-desc {
  max-width: none !important;
}
.deck-name, .deck-def {
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
}