/* ================================================================
   Homepage only. Tokens, reset, header, footer, section grammar
   and utilities are in the theme's style.css. Every card and block
   that also appears on another page type is in components.css.
   Both load before this file as declared dependencies.

   What is left here is the hero, which is homepage only by
   decision, and the two-column arrangement of the FAQ section. The
   FAQ list and the contact card inside it are components; the grid
   that puts one beside the other is this page's own layout.
   ================================================================ */


/* ============================= hero ============================= */
.hero{background:var(--teal-deep);color:#fff;padding:56px 0 52px;overflow-x:clip}
.hero h1{color:#fff;font-size:clamp(30px,4.4vw,46px);max-width:15ch;margin-bottom:12px}
.hero .lead{color:#A9CBCD;font-size:var(--fs-lead);max-width:46ch;margin-bottom:26px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.hero-grid>*{min-width:0}
.hero-cta{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--teal-deep);padding:13px 24px;border-radius:var(--r-md);font-weight:800;font-size:var(--fs-md);text-decoration:none;margin-bottom:26px}
@media (hover:hover) and (pointer:fine){.hero-cta:hover{background:#DCECED}}
.chiplabel{font-size:var(--fs-xs);letter-spacing:.07em;text-transform:uppercase;color:#7FAEB1;margin-bottom:10px;font-weight:700}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.chip{font-size:var(--fs-sm);padding:8px 14px;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-pill);color:#DCECED;text-decoration:none;font-weight:500}
@media (hover:hover) and (pointer:fine){.chip:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}}
.hero + section{border-top:none}
.hero-img{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.2)}


/* ==================== faq section layout ==================== */
.faqwrap{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:start}
.faqwrap>*{min-width:0}
.faqrail .callback{margin-top:22px}


/* ============ responsive overrides, kept last ============ */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .hero-img{display:none}
  .faqwrap{display:flex;flex-direction:column;gap:0}
  .faqrail{display:contents}
  .faqrail .eyebrow{order:1}
  .faqrail h2{order:2}
  .faqlist{order:3;margin-top:26px}
  .faqrail .callback{order:4;margin-top:26px}
  .hero{padding:36px 0 40px}
  .chiprow{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .chip{padding:11px 16px;flex:none}
}
@media(max-width:600px){
  .hero .lead{font-size:var(--fs-md)}
}