/* Page basics. Most layout lives inline in the generated markup. */
html { scroll-behavior: smooth; }
body { margin: 0; background: #17301F; color: #15201A; font-family: 'Hanken Grotesk', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
a { color: #4D6D40; }
a:hover { color: #17301F; }
:focus-visible { outline: 3px solid #B9D46E; outline-offset: 3px; }
[hidden] { display: none !important; }

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: #17301F; color: #FFFFFF; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; color: #FFFFFF; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.gcb { transition: transform .15s ease, box-shadow .15s ease; }
.gcb:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(23, 48, 31, .18); }

/* Header and logo: larger logo on desktop */
.site-header-row { height: 86px; }
.site-logo { height: 56px; width: auto; display: block; }
@media (min-width: 1061px) {
  .site-header-row { height: 104px; }
  .site-logo { height: 80px; }
}

/* Responsive helpers */
.gc-mob { display: none !important; }
@media (max-width: 1060px) { .gc-desk { display: none !important; } .gc-mob { display: flex !important; } }
@media (max-width: 640px) { .gc-hide-sm { display: none !important; } }

/* Phones: two buttons side by side, two-column logo strip */
.lbl-short { display: none; }
@media (max-width: 640px) {
  .btn-row:has(> :nth-child(2)) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; }
  .btn-row > a, .btn-row > button { min-width: 0; padding: 0 12px !important; gap: 8px !important; font-size: 15px !important; white-space: normal !important; text-align: center; line-height: 1.2; }
  .btn-row .lbl-long { display: none; }
  .btn-row .lbl-short { display: inline; }
  .trust-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 24px 16px !important; }
  .trust-row > * { min-width: 0; }
  .trust-row .trust-bbb { width: 100% !important; max-width: 170px; height: auto !important; }
  .proof-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px 12px !important; }
  .proof-row > * { min-width: 0; }
}

/* Four cards: four across, two on tablets, one on phones */
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1060px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* Five cards: three over two on desktop, two across on tablets, one on phones */
.grid-3-2 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.grid-3-2 > * { grid-column: span 2; }
.grid-3-2 > :nth-child(n+4) { grid-column: span 3; }
@media (max-width: 1060px) {
  .grid-3-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3-2 > *, .grid-3-2 > :nth-child(n+4) { grid-column: auto; }
  .grid-3-2 > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .grid-3-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Legal pages (privacy, terms, cookies) */
.legal { max-width: 760px; font-size: 17px; line-height: 1.7; color: #15201A; }
.legal h2 { margin: 40px 0 12px; font-family: 'Jost', 'Futura', 'Century Gothic', sans-serif; font-weight: 500; font-size: 28px; line-height: 1.2; letter-spacing: -0.01em; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal ul { margin: 0 0 14px; color: #4B5A50; }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 6px; }

/* Mobile menu */
.menu-btn[aria-expanded="true"] .icon-open,
.menu-btn[aria-expanded="false"] .icon-close { display: none; }

/* FAQ */
.faq summary { list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq-icon { transition: transform .2s ease; }
.faq[open] .faq-icon { transform: rotate(45deg); }

/* Review filters */
.chip { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; border-radius: 999px; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 15px; background: #FFFFFF; color: #15201A; border: 1.5px solid #DEE3D3; }
.chip[aria-pressed="true"] { background: #17301F; color: #FFFFFF; border-color: #17301F; }
.chip-count { font-size: 13px; opacity: .75; }
.no-js-hide { display: none; }
.js .no-js-hide { display: flex; }

/* Estimate form */
.js .step:not(.is-active) { display: none; }
.step { margin: 0; padding: 0; border: none; min-width: 0; }
.opt-card, .opt-pill, .opt-check { position: relative; cursor: pointer; }
.opt-card input, .opt-pill input { position: absolute; opacity: 0; pointer-events: none; }
.opt-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 124px; padding: 18px; border-radius: 18px; background: #FFFFFF; border: 1.5px solid #DEE3D3; color: #15201A; }
.opt-card svg { stroke: #4D6D40; }
.opt-card:has(input:checked) { background: #17301F; border-color: #17301F; color: #FFFFFF; }
.opt-card:has(input:checked) svg { stroke: #B9D46E; }
.opt-pill { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: 15px; background: #FFFFFF; border: 1.5px solid #DEE3D3; color: #15201A; }
.opt-pill:has(input:checked) { background: #17301F; border-color: #17301F; color: #FFFFFF; }
.opt-card:has(input:focus-visible), .opt-pill:has(input:focus-visible) { outline: 3px solid #B9D46E; outline-offset: 3px; }
.field { width: 100%; min-height: 52px; padding: 0 16px; border-radius: 14px; border: 1.5px solid #DEE3D3; background: #FFFFFF; font-family: inherit; font-size: 16px; color: #15201A; }
.field:focus { border-color: #4D6D40; }
textarea.field { padding: 14px 16px; min-height: 120px; resize: vertical; line-height: 1.5; }
.step-dot { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; font-weight: 700; font-size: 14px; background: #E6ECDA; color: #4D6D40; }
.step-dot.is-on { background: #17301F; color: #FFFFFF; }
.step-name { font-size: 14px; font-weight: 600; color: #4B5A50; }
.step-name.is-on { color: #15201A; }
.progress-fill { height: 100%; border-radius: 999px; background: #4D6D40; transition: width .3s ease; }
.form-error { margin: 0; padding: 14px 16px; border-radius: 12px; background: #FBEDEA; color: #8A2A1B; font-weight: 600; font-size: 15px; }
.btn-plain { min-height: 52px; padding: 0 22px; border-radius: 999px; border: 1.5px solid #DEE3D3; background: #FFFFFF; font-family: inherit; font-weight: 600; font-size: 16px; color: #15201A; cursor: pointer; }
.btn-solid { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px; border: none; background: #17301F; color: #FFFFFF; font-family: inherit; font-weight: 600; font-size: 16px; cursor: pointer; }
.btn-solid[disabled] { opacity: .6; cursor: wait; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gcb, .faq-icon, .progress-fill { transition: none; }
}