/* Arida — site styles (design plan in brand.md §6) */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-stretch:62% 125%;font-display:optional;src:url(https://fonts.gstatic.com/s/archivo/v25/k3kQo8UDI-1M0wlSfdnoLg.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--container:1200px;--header-h:72px}
body{font-stretch:100%}
h1,h2,h3{font-stretch:80%;letter-spacing:-.01em}
:focus-visible{outline-color:var(--ink)}
a{color:var(--ink)}

/* ---- Header (ink band, white logo) ---------------------------------------- */
.site-header{background:var(--brand);border-bottom:0;backdrop-filter:none}
.site-header .brand img{height:30px;width:auto}
.site-header .nav a{color:#e9ecef;font-size:var(--fs-sm)}
.site-header .nav a:hover{color:#fff;text-decoration:underline}
.site-header :focus-visible{outline-color:var(--accent)}
.nav-toggle{color:#fff;min-width:44px;min-height:44px}
.nav .btn-accent{color:var(--accent-ink)}
.site-header .nav a.btn-accent:hover{color:var(--accent-ink);text-decoration:none}
@media(max-width:860px){
  .site-header .nav{background:var(--brand);border-bottom:0}
  .site-header .nav a{border-bottom-color:rgba(255,255,255,.14);min-height:44px}
}

/* ---- Hero: the headline and the two doors are one first screen ----------- */
.intro{padding-block:clamp(2rem,5vw,4rem) clamp(1.5rem,3vw,2.5rem)}
.intro-grid{display:grid;gap:var(--s-5);grid-template-columns:minmax(0,1fr)}
@media(min-width:960px){.intro-grid{grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:var(--s-8)}.callus{margin-top:1.2rem}}
.intro h1{font-size:clamp(2.4rem,1.2rem + 5vw,5.4rem);line-height:.98;font-stretch:75%;font-weight:800;margin:0 0 var(--s-4);max-width:16ch}
.intro .lede{color:var(--slate);margin:0}
.callus{border-left:3px solid var(--accent);padding-left:var(--s-4);font-size:var(--fs-sm);color:var(--slate)}
.callus p{margin:0 0 .3em}
.callus a{font-weight:700;font-size:var(--fs-lg);text-decoration:none;color:var(--ink);display:inline-block;padding-block:.2em}
.callus a:hover{text-decoration:underline}

.chooser{padding-bottom:var(--section)}
.chooser>h2{font-size:var(--fs-xl);margin-bottom:var(--s-4)}
.doors{display:grid;gap:var(--s-4);grid-template-columns:minmax(0,1fr);align-items:start}
a[href^="tel:"]{white-space:nowrap}
@media(min-width:860px){.doors{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
.door{border-radius:var(--radius);padding:clamp(1.25rem,3vw,2.25rem);display:flex;flex-direction:column;gap:var(--s-4)}
.door--cold{background:var(--frost)}
.door--warm{background:var(--sand)}
.door-answer{font-weight:700;font-size:var(--fs-sm);color:var(--slate);margin:0}
.door h3{font-size:var(--fs-2xl);font-stretch:78%;margin:0;line-height:1.02}
.door p{margin:0}
.door figure{margin:0}
.door figure img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius)}
.door figcaption{font-size:var(--fs-xs);color:var(--slate);margin-top:.4em}
@media(min-width:1100px){
  .door--cold{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-5);align-items:start}
  .door--cold figure{grid-row:1 / span 5;grid-column:2}
  .door--cold figure img{aspect-ratio:4/5}
}
.rooms{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2)}
.rooms a{display:inline-flex;align-items:center;min-height:44px;padding:.35em .9em;border:1px solid color-mix(in srgb,var(--ink) 28%,transparent);border-radius:999px;text-decoration:none;font-weight:600;font-size:var(--fs-sm);background:rgba(255,255,255,.55)}
.rooms a:hover{background:#fff;border-color:var(--ink)}
.door .btn{align-self:flex-start;white-space:normal;text-align:left}
.door-foot{margin-top:auto}
.chooser-note{margin-top:var(--s-5);color:var(--slate);font-size:var(--fs-sm)}

/* ---- Models: list + garage photo ---------------------------------------- */
.models{background:var(--mist)}
.models-grid{display:grid;gap:var(--s-7);grid-template-columns:minmax(0,1fr)}
@media(min-width:960px){.models-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}}
.models .list-rows{border-top-color:#d5dbd8}
.models .list-rows li{grid-template-columns:72px minmax(0,1fr) auto;align-items:center;border-bottom-color:#d5dbd8}
.models .list-rows img{width:72px;height:72px;object-fit:contain;background:#fff;border-radius:var(--radius)}
.models .list-rows h3{font-size:var(--fs-lg);font-stretch:90%}
.models .list-rows a.more{font-weight:600;font-size:var(--fs-sm);white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
@media(max-width:520px){.models .list-rows li{grid-template-columns:64px minmax(0,1fr)}.models .list-rows a.more{grid-column:2}}
.garage{margin:0;position:sticky;top:calc(var(--header-h) + 1rem)}
.garage img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius)}
.garage figcaption{font-size:var(--fs-sm);color:var(--slate);margin-top:.5em}

/* ---- Team ---------------------------------------------------------------- */
.team-grid{display:grid;gap:var(--s-7);grid-template-columns:minmax(0,1fr)}
@media(min-width:960px){.team-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}}
.team-photo{margin:0}
.team-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}
.people{list-style:none;margin:var(--s-5) 0;padding:0;display:grid;gap:.6em}
.people li{display:grid;gap:0}
.people b{font-weight:700}
.people span{color:var(--slate);font-size:var(--fs-sm)}

/* ---- Range + facts ---------------------------------------------------------- */
.range{border-top:1px solid var(--line)}
.range-links{list-style:none;margin:0 0 var(--s-7);padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5)}
.range-links a{font-family:var(--font-display);font-stretch:80%;font-weight:700;font-size:var(--fs-xl);text-decoration-thickness:2px;text-underline-offset:.2em;display:inline-block;padding-block:.15em}
.range-links a:hover{text-decoration-color:var(--accent)}
.facts{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));margin:0}
.facts div{border-top:3px solid var(--accent);padding-top:var(--s-3)}
.facts dt{font-weight:700;margin-bottom:.2em}
.facts dd{margin:0;color:var(--slate);font-size:var(--fs-sm)}

/* ---- Footer ----------------------------------------------------------------- */
.site-footer{background:var(--brand)}
.site-footer .brand img{height:28px;width:auto}
.site-footer p{margin:0 0 .4em}