/* Roofalo — bundled stylesheet. Generated by tools/build-css.py.
   Do not edit directly; edit css/tokens/* or css/site.css and re-run. */

/* ===== tokens/fonts.css ===== */
/* =====================================================================
   ROOFALO — Webfont kit (SELF-HOSTED for the marketing site).
   Faces: Archivo (display) + Source Serif 4 (body). Both SIL OFL 1.1.
   Mirrored from the Fontsource CDN 2026-07-25 and served from our own
   origin: no third-party request, no CDN outage, better LCP.
   font-display:swap on every face; local() first so an installed copy wins.
   ===================================================================== */

/* ---- DISPLAY — Archivo (700 Bold · 800 ExtraBold · 900 Black) ---- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:local('Archivo'),url('../assets/fonts/archivo-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:local('Archivo'),url('../assets/fonts/archivo-latin-800-normal.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:local('Archivo'),url('../assets/fonts/archivo-latin-900-normal.woff2') format('woff2');}

/* ---- BODY — Source Serif 4 (400 Regular · 600 SemiBold + italic) ---- */
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:local('Source Serif 4'),url('../assets/fonts/source-serif-4-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:local('Source Serif 4'),url('../assets/fonts/source-serif-4-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:local('Source Serif 4'),url('../assets/fonts/source-serif-4-latin-400-italic.woff2') format('woff2');}

:root{
  --font-display:'Archivo','Helvetica Neue',Helvetica,Arial,'Liberation Sans',sans-serif;
  --font-body:'Source Serif 4','Source Serif Pro',Georgia,'Times New Roman',serif;
  --font-legal-fallback:Georgia,'Times New Roman',serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ===== tokens/colors.css ===== */
/* =====================================================================
   ROOFALO — Color. "Bison Black & Buffalo Gold" (adopted 2026-07-24).
   Supersedes "Hide & Snow". The scene is unchanged — a bison in a snowfield
   under a hard sky — but the hide is rendered true: a bison is near-black,
   and gold is the signal that makes the mark carry at distance.

   The color language of serious equipment: black brings the gravity that
   earns trust, gold does the shouting so the black doesn't have to.

   Composition law: Snow ~70% (field) · Black ~20% (presence) · Gold ~10% (signal).
   GOLD IS A SIGNAL, NOT A GROUND — fills, CTAs, and accents only. Never a
   large flooded field, never body text on light (use --gold-text for that).

   Legacy names (--hide, --slate, --timber, --drift, --mist, --overcast,
   --graphite) are kept as ALIASES so existing components keep working.
   Prefer the canonical names in new work.
   ===================================================================== */
:root{
  /* ---- Canonical palette ---- */
  --black:#191614;      /* Bison Black — ground, mark, headlines, type */
  --gold:#E29A21;       /* Buffalo Gold — CTA fills, accents, signal (7.6:1 with --black) */
  --snow:#F6F7F8;       /* Snowfield — the light ground. Cool near-white. */
  --ash:#57534E;        /* Ash — support, secondary UI, borders on dark */
  --ember:#B4721A;      /* Ember — deep gold for large text & accents on light */
  --gold-text:#9A6214;  /* Text-safe gold — the ONLY gold for normal text on Snow (4.7:1) */

  /* ---- Neutral ramp (warm-cool neutrals tuned to black + gold) ---- */
  --frost:#FBFCFD;      /* N0 — cards / raised surface on light */
  --drift:#E8E6E3;      /* N2 — subtle fill · hover · zebra rows */
  --mist:#C9C5BF;       /* N3 — borders on light · muted text on dark */
  --overcast:#6B6660;   /* N4 — muted text on light (5.2:1) */
  --graphite:#2A2724;   /* N5 — body text on light (14.1:1) · cards on dark */

  /* ---- Legacy aliases (do not use in new work) ---- */
  --hide:var(--black);      /* was #4A3728 */
  --slate:var(--ash);       /* was #4C5D6B */
  --timber:var(--black);    /* dark ground is now the brand black */

  /* ---- Semantic families (muted, WNY-natural; UI ONLY — never brand/signage) ---- */
  --pine:#2F5A3C;   --pine-tint:#E6EFE8;   /* success — the evergreen that outlasts winter */
  --bronze:#8A5A18; --bronze-tint:#F4EAD6; /* warning — deliberately deeper than --gold */
  --brick:#93382E;  --brick-tint:#F5E3DF;  /* error — weathered brick; never SALE-red */
  /* No "info" family — Ash carries informational notices. */

  /* ---- Semantic aliases (reference these in product UI) ---- */
  --surface-page:var(--snow);
  --surface-card:var(--frost);
  --surface-sunken:var(--drift);
  --surface-dark:var(--black);

  --text-heading:var(--black);
  --text-body:var(--graphite);
  --text-muted:var(--overcast);
  --text-support:var(--ash);
  --text-inverse:var(--snow);      /* text on dark — ALWAYS Snow, never pure white */
  --text-accent:var(--gold-text);  /* gold-family text on light grounds */

  --border-subtle:var(--drift);
  --border-default:var(--mist);
  --border-strong:var(--overcast);

  /* ---- Action: GOLD is the button color; near-black rides on top ---- */
  --action:var(--gold);
  --action-text:var(--black);
  --action-hover:#C9861A;          /* gold darkened ~8% */
  --action-press:#B4721A;          /* gold darkened ~16% (= --ember) */
  --focus-ring:var(--ash);

  --link:var(--gold-text);
  --link-hover:var(--black);

  --success:var(--pine);   --success-tint:var(--pine-tint);
  --warning:var(--bronze); --warning-tint:var(--bronze-tint);
  --error:var(--brick);    --error-tint:var(--brick-tint);
}

/* ---- Dark ground (Bison Black). class="on-timber" or data-theme="dark".
       Gold stays the CTA here — Snow-on-black plus a gold button is the
       signature pairing, and it's the highest-contrast combination we own. ---- */
.on-timber,[data-theme="dark"]{
  --surface-page:var(--black);
  --surface-card:#211D1A;
  --surface-sunken:#100E0C;
  --text-heading:var(--snow);
  --text-body:var(--snow);
  --text-muted:var(--mist);
  --text-support:var(--mist);
  --text-accent:var(--gold);
  --border-subtle:#332E29;
  --border-default:var(--ash);
  --action:var(--gold);
  --action-text:var(--black);
  --action-hover:#EFAA33;
  --action-press:#C9861A;
  --link:var(--gold);
  --link-hover:var(--snow);
}

/* ===== tokens/typography.css ===== */
/* =====================================================================
   ROOFALO — Typography. "The Established Neighbor":
   Archivo (display, heavy) sets the monument; Source Serif 4 (body) speaks
   plainly and reads honest. Scale in px. Legal has a hard 9pt / 12px floor.
   ===================================================================== */
:root{
  /* Type scale */
  --t-h1:80px; --t-h2:44px; --t-h3:30px; --t-h4:21px; --t-label:12px;
  --t-body-l:20px; --t-body:17px; --t-body-s:15px; --t-caption:13px; --t-legal:12px;
  /* Weights */
  --w-black:900;/* @kind other */
  --w-xbold:800;/* @kind other */
  --w-bold:700;/* @kind other */
  --w-semibold:600;/* @kind other */
  --w-regular:400;/* @kind other */
}

/* ---- Roles ---- */
.t-h1{font-family:var(--font-display);font-weight:900;font-stretch:100%;font-size:var(--t-h1);line-height:.9;letter-spacing:.005em;color:var(--text-heading);}
.t-h1--lockup{font-stretch:125%;}  /* Expanded — monument lockups & signage only */
.t-h2{font-family:var(--font-display);font-weight:800;font-size:var(--t-h2);line-height:1;letter-spacing:.004em;color:var(--text-heading);}
.t-h3{font-family:var(--font-display);font-weight:700;font-size:var(--t-h3);line-height:1.1;letter-spacing:.003em;color:var(--text-body);}
.t-h4{font-family:var(--font-display);font-weight:700;font-size:var(--t-h4);line-height:1.2;letter-spacing:.003em;color:var(--text-body);}
.t-label{font-family:var(--font-display);font-weight:700;font-size:var(--t-label);line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--text-support);}
.t-body-l{font-family:var(--font-body);font-weight:400;font-size:var(--t-body-l);line-height:1.5;color:var(--text-body);}
.t-body{font-family:var(--font-body);font-weight:400;font-size:var(--t-body);line-height:1.55;color:var(--text-body);}
.t-body-s{font-family:var(--font-body);font-weight:400;font-size:var(--t-body-s);line-height:1.5;color:var(--text-body);}
.t-caption{font-family:var(--font-body);font-weight:600;font-size:var(--t-caption);line-height:1.4;letter-spacing:.005em;color:var(--text-muted);}
.t-legal{font-family:var(--font-body);font-weight:400;font-size:var(--t-legal);line-height:1.45;letter-spacing:.005em;color:var(--text-muted);} /* 9pt FLOOR */

/* ---- Numerals — a transparency system, NOT a styling detail. ----
   Every money / quantity column aligns. Apply on estimates, invoices, tables. */
.tabular,[data-money],.estimate th,.estimate td,.invoice th,.invoice td{
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;
}
/* Running prose keeps default proportional figures — do not force tnum there. */

/* ---- No-embed fallback (e-sign / vendor PDF pipelines) ----
   Add class="no-webfonts" to <html> when the pipeline can't embed the webfonts.
   Georgia's larger x-height + hinting hold at legal micro-sizes better than Times. */
.no-webfonts .t-body,.no-webfonts .t-body-l,.no-webfonts .t-body-s,.no-webfonts .t-caption,.no-webfonts .t-legal{font-family:var(--font-legal-fallback);}
.no-webfonts .t-h1,.no-webfonts .t-h2,.no-webfonts .t-h3,.no-webfonts .t-h4,.no-webfonts .t-label{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;}

/* ===== tokens/spacing.css ===== */
/* =====================================================================
   ROOFALO — Spacing & layout. 4px base grid. Sturdy, roomy, never cramped —
   the "wide snowfield" gives content air. Prefer the named steps over raw px.
   ===================================================================== */
:root{
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;

  /* Layout */
  --gutter:24px;         /* base grid gutter */
  --page-max:1200px;     /* marketing content column cap */
  --measure:66ch;        /* ideal reading measure for body copy */
  --section-y:96px;      /* vertical rhythm between marketing sections */
  --field-h:48px;        /* form control height (44px min hit target respected) */
}

/* ===== tokens/elevation.css ===== */
/* =====================================================================
   ROOFALO — Elevation, radius & borders.
   The brand is built, not floaty: hairline borders do most of the work;
   shadows are cool (Timber-tinted), soft, and used sparingly — sticky
   headers, popovers, and the occasional lifted card. No colored glows.
   ===================================================================== */
:root{
  /* Radius — controls are calm (6px); cards a touch softer (10px); pills for chips */
  --radius-control:6px;
  --radius-card:10px;
  --radius-pill:999px;

  /* Borders */
  --border-hair:1px;
  --border-thick:2px;

  /* Shadows — Timber-tinted, low, restrained. Border first; shadow only to lift. */
  --shadow-card:0 1px 2px rgba(32,26,21,.06), 0 2px 8px rgba(32,26,21,.05);
  --shadow-raised:0 4px 16px rgba(32,26,21,.10);
  --shadow-pop:0 12px 32px rgba(32,26,21,.16);

  /* Focus — Slate ring, offset so it reads on both grounds */
  --focus-ring-width:2px;
  --focus-ring-offset:2px;
}

/* ===== site.css ===== */
/* =====================================================================
   ROOFALO — marketing site styles.
   Plain CSS on the locked DS tokens. No framework, no JS dependency for
   layout or content. Composition law: Snow ~70% · Black ~20% · Gold ~10%.
   ===================================================================== */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--surface-page);color:var(--text-body);
  font-family:var(--font-body);font-size:var(--t-body);line-height:1.55;
  -webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset);border-radius:2px}

/* ---------- Skip link (a11y) ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--black);color:var(--snow);
  padding:12px 18px;font-family:var(--font-display);font-weight:700;border-radius:0 0 var(--radius-control) 0}
.skip:focus{left:0}

/* ---------- Layout ---------- */
.container{max-width:var(--page-max);margin:0 auto;padding:0 clamp(16px,4.2vw,24px)}
.section{padding:var(--section-y) 0;background:var(--surface-page);scroll-margin-top:84px}
.section--card{background:var(--surface-card)}
.section--dark{background:var(--black)}
.section--tight{padding:26px 0;border-bottom:1px solid var(--border-subtle)}
.section--close{padding:clamp(48px,8vw,84px) 0}
@media (max-width:820px){.section{padding:clamp(44px,9vw,64px) 0}}

/* Dark ground token flip (mirrors DS .on-timber) */
.on-timber{
  --surface-page:var(--black);--surface-card:#211D1A;--surface-sunken:#100E0C;
  --text-heading:var(--snow);--text-body:var(--snow);--text-muted:var(--mist);
  --text-support:var(--mist);--text-accent:var(--gold);
  --border-subtle:#332E29;--border-default:var(--ash);
  --action:var(--gold);--action-text:var(--black);--action-hover:#EFAA33;--action-press:#C9861A;
  --link:var(--gold);--link-hover:var(--snow);
  color:var(--snow)
}

/* ---------- Type helpers ---------- */
.lede{font-family:var(--font-body);font-size:clamp(17px,4.3vw,20px);line-height:1.5;color:var(--text-body)}
.h2-sec{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,5.4vw,38px);
  line-height:1.04;letter-spacing:.004em;color:var(--text-heading)}
.muted{color:var(--text-muted)}
.rule{display:inline-block;width:36px;height:3px;background:var(--gold);border-radius:2px;flex:0 0 auto}

.section-head{max-width:640px;margin-bottom:40px}
.section-head .t-label{display:block}
.section-head h2{margin:10px 0 12px}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(246,247,248,.9);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-subtle)}
.header-bar{display:flex;align-items:center;gap:18px;height:72px}
.wordmark{font-family:var(--font-display);font-weight:900;font-stretch:125%;
  font-size:22px;letter-spacing:-.01em;color:var(--black);line-height:1;display:inline-block}
.wordmark--sm{font-size:19px}
.wordmark--inverse{color:var(--snow)}
.nav{display:flex;gap:20px;margin-left:10px}
.navlink{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-support);
  padding:4px 0;border-bottom:2px solid transparent;transition:color .12s,border-color .12s}
.navlink:hover{color:var(--black);border-bottom-color:var(--gold)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.header-tel{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);
  font-weight:700;font-size:15px;color:var(--text-support)}
.header-tel:hover{color:var(--black)}
.nav-toggle{display:none}

@media (max-width:900px){
  .header-bar{height:60px;gap:10px}
  .nav,.header-right .btn,.header-tel span{display:none}
  .header-right{gap:8px}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
    border:1px solid var(--border-default);background:transparent;border-radius:var(--radius-control);
    color:var(--text-body);cursor:pointer}
  .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
    border:1px solid var(--border-default);border-radius:var(--radius-control);color:var(--text-support)}
  .header-tel{display:inline-flex;padding:0;width:44px;height:44px;justify-content:center;
    border:1px solid var(--border-default);border-radius:var(--radius-control)}
}
@media (min-width:901px){.icon-btn{display:none}}

/* Mobile nav — CSS-only disclosure via :target-less checkbox hack */
#nav-toggle{position:absolute;opacity:0;pointer-events:none}
.mobile-nav{display:none;background:var(--black);padding:6px 14px 20px}
#nav-toggle:checked ~ .mobile-nav{display:block}
.mobile-nav a{display:flex;align-items:center;justify-content:space-between;min-height:52px;
  border-bottom:1px solid #332E29;font-family:var(--font-display);font-weight:700;
  font-size:18px;color:var(--snow)}
.mobile-nav .btn{margin-top:14px;min-height:54px}
@media (min-width:901px){.mobile-nav,#nav-toggle{display:none!important}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-display);font-weight:700;font-size:16px;line-height:1;
  padding:14px 22px;min-height:48px;border-radius:var(--radius-control);
  border:1px solid transparent;cursor:pointer;text-align:center;
  transition:background .12s,border-color .12s,color .12s}
.btn--primary{background:var(--action);color:var(--action-text);border-color:var(--action)}
.btn--primary:hover{background:var(--action-hover);border-color:var(--action-hover)}
.btn--primary:active{background:var(--action-press);border-color:var(--action-press)}
.btn--secondary{background:transparent;color:var(--text-support);border-color:var(--border-default)}
.btn--secondary:hover{color:var(--text-heading);border-color:var(--text-support)}
.on-timber .btn--secondary{color:var(--snow);border-color:var(--ash)}
.on-timber .btn--secondary:hover{border-color:var(--snow)}
.btn--lg{font-size:17px;padding:16px 26px;min-height:54px}
.btn--sm{font-size:14.5px;padding:11px 16px;min-height:42px}
.btn--block{display:flex;width:100%}

/* ---------- Hero ---------- */
.hero{padding:clamp(36px,5.6vw,70px) 0 clamp(36px,5.6vw,66px)}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:clamp(30px,4vw,56px);align-items:center}
.hero-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.hero h1{font-family:var(--font-display);font-weight:900;color:var(--snow);
  font-size:clamp(38px,7.2vw,78px);line-height:.93;letter-spacing:-.012em;margin:0 0 20px}
.hero .lede{color:var(--snow);max-width:44ch;margin-bottom:22px}
.hero-aside{border-left:3px solid var(--gold);padding-left:18px;max-width:40ch}
.hero-aside p{color:var(--snow);font-size:clamp(16px,4.2vw,18px)}
.hero-aside strong{color:var(--gold)}

/* ---------- Booking card ---------- */
.booking-card{background:var(--frost);border:1px solid var(--mist);border-radius:var(--radius-card);
  box-shadow:var(--shadow-raised);padding:clamp(18px,4vw,24px);color:var(--graphite)}
.booking-card .dot{width:8px;height:8px;border-radius:50%;background:var(--pine);flex:0 0 auto}
.booking-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.booking-title{font-family:var(--font-display);font-weight:800;font-size:clamp(21px,4.6vw,25px);
  color:var(--black);margin:0 0 3px}
.booking-sub{font-size:14.5px;color:var(--overcast);margin-bottom:16px}
.slot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}
.slot{display:flex;flex-direction:column;gap:2px;text-align:left;cursor:pointer;padding:10px 12px;
  min-height:56px;border-radius:var(--radius-control);border:1px solid var(--mist);
  background:var(--frost);transition:border-color .12s,background .12s}
.slot:hover{border-color:var(--ash)}
.slot input{position:absolute;opacity:0;pointer-events:none}
.slot-day{font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--graphite)}
.slot-win{font-size:12.5px;color:var(--overcast)}
.slot:has(input:checked){background:var(--gold);border-color:var(--gold)}
.slot:has(input:checked) .slot-day,.slot:has(input:checked) .slot-win{color:var(--black)}
.or-rule{display:flex;align-items:center;gap:10px;margin:14px 0}
.or-rule span:first-child,.or-rule span:last-child{flex:1;height:1px;background:var(--drift)}
.or-rule em{font-style:normal;font-size:12.5px;color:var(--overcast)}
.tel-btn{display:flex;align-items:center;justify-content:center;gap:9px;min-height:50px;
  border-radius:var(--radius-control);border:1px solid var(--mist);
  font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--black)}
.tel-btn:hover{border-color:var(--ash)}
.booking-note{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:12.5px;color:var(--overcast)}

/* ---------- Trust strip ---------- */
.trust-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 24px;
  list-style:none;margin:0;padding:0}
.trust-strip li{display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--text-body)}
.trust-strip svg{color:var(--text-accent);flex:0 0 auto}

/* ---------- Services — CSS-only explorer (list + detail panel) ----------
   Desktop: selectable rows left, detail panel right (display:contents lifts
   each item's label and panel into the parent grid).
   Mobile: the same rows, expanding in place. No JavaScript. */
.svc-explorer{border-top:1px solid var(--border-subtle)}
.svc-item input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.svc-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;
  padding:15px 16px;min-height:60px;background:transparent;
  border-left:3px solid transparent;border-bottom:1px solid var(--border-subtle);
  transition:background .12s,border-color .12s}
.svc-row:hover{background:var(--surface-card)}
.svc-row .svc-ico{color:var(--text-support);flex:0 0 auto}
.svc-row .svc-name{flex:1;font-family:var(--font-display);font-weight:700;
  font-size:16.5px;color:var(--text-body)}
.svc-row .svc-chev{color:var(--text-muted);flex:0 0 auto}
.svc-item:has(input:checked) .svc-row{border-left-color:var(--gold);background:var(--surface-card)}
.svc-item:has(input:checked) .svc-row .svc-ico,
.svc-item:has(input:checked) .svc-row .svc-name{color:var(--text-heading)}
.svc-item:has(input:checked) .svc-row .svc-chev{color:var(--text-accent)}
.svc-item input:focus-visible + .svc-row{outline:2px solid var(--focus-ring);outline-offset:-2px}

.svc-panel{display:none}
.svc-item:has(input:checked) .svc-panel{display:block}
.svc-panel h3{font-family:var(--font-display);font-weight:700;font-size:var(--t-h3);
  line-height:1.1;color:var(--text-heading);margin-bottom:8px}
.svc-panel p{margin-bottom:16px;max-width:46ch}
.svc-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:9px 22px}
.svc-panel li{display:flex;gap:10px;font-size:var(--t-body-s);line-height:1.5}
.svc-panel li svg{color:var(--text-accent);flex:0 0 auto;margin-top:3px}

/* Mobile: inline expansion inside a single bordered card */
@media (max-width:820px){
  .svc-explorer{border:1px solid var(--border-default);border-radius:var(--radius-card);
    overflow:hidden;background:var(--surface-card)}
  .svc-panel{padding:4px 16px 20px 19px}
  .svc-panel h3{display:none}
  .svc-panel ul{grid-template-columns:1fr}
  .svc-item:has(input:checked) .svc-row .svc-chev{transform:rotate(90deg)}
}
/* Desktop: two columns, panel pinned to the right */
@media (min-width:821px){
  .svc-explorer{display:grid;grid-template-columns:minmax(260px,320px) 1fr;
    gap:34px;align-items:start;border-top:none}
  .svc-item{display:contents}
  .svc-item .svc-row{grid-column:1}
  .svc-item:first-of-type .svc-row{border-top:1px solid var(--border-subtle)}
  .svc-panel{grid-column:2;grid-row:1 / span 12;
    background:var(--surface-card);border:1px solid var(--border-default);
    border-radius:var(--radius-card);padding:30px;min-height:340px}
  .svc-panel ul{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
}

/* ---------- Process ---------- */
.process{position:relative}
.process-line{position:absolute;left:21px;right:21px;top:20px;height:2px;background:var(--border-default)}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative;
  list-style:none;margin:0;padding:0}
.process-num{width:42px;height:42px;border-radius:50%;background:var(--gold);color:var(--black);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:17px;position:relative;z-index:1}
.process h3{font-family:var(--font-display);font-weight:700;font-size:18px;
  color:var(--text-heading);margin:16px 0 6px}
.process p{font-size:15.5px;max-width:30ch;color:var(--snow)}
@media (max-width:820px){
  .process-line{left:20px;right:auto;top:20px;bottom:20px;width:2px;height:auto}
  .process-grid{grid-template-columns:1fr;gap:26px}
  .process-grid li{display:flex;gap:16px}
  .process h3{margin:2px 0 4px}
  .process p{max-width:none}
}

/* ---------- Reviews ---------- */
.reviews-panel{background:var(--surface-page);border:1px solid var(--border-default);
  border-radius:var(--radius-card);padding:clamp(24px,5vw,40px);text-align:center;max-width:720px;margin:0 auto}
.stars{display:flex;gap:4px;justify-content:center;color:var(--bronze);margin-bottom:16px}
.reviews-panel h3{font-family:var(--font-display);font-weight:800;
  font-size:clamp(21px,4.4vw,28px);color:var(--text-heading);margin-bottom:10px}
.reviews-panel p{max-width:52ch;margin:0 auto 22px}

/* ---------- Financing ---------- */
.finance{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(28px,4.5vw,54px);align-items:center}
.finance ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:11px}
.finance li{display:flex;gap:11px;font-size:15px;font-weight:600;color:var(--text-body)}
.finance li svg{color:var(--success);flex:0 0 auto;margin-top:2px}
.finance-card{background:var(--surface-card);border:1px solid var(--border-default);
  border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:clamp(22px,4vw,30px)}
.finance-card h3{font-family:var(--font-display);font-weight:800;font-size:22px;
  color:var(--text-heading);margin-bottom:10px}
.finance-card p{font-size:15.5px;margin-bottom:18px}

/* ---------- Service area ---------- */
.area-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px 24px;
  margin-top:34px;padding-top:26px;border-top:1px solid var(--border-subtle);list-style:none}
.area-grid h3{display:flex;align-items:center;gap:8px;font-family:var(--font-display);
  font-weight:700;font-size:15.5px;color:var(--text-heading);margin-bottom:4px}
.area-grid svg{color:var(--text-accent);flex:0 0 auto}
.area-grid p{font-size:15px;color:var(--text-muted)}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(24px,4vw,52px);align-items:start}
.faq details{border-bottom:1px solid var(--border-subtle)}
.faq summary{display:flex;align-items:center;gap:16px;cursor:pointer;padding:18px 0;
  min-height:44px;list-style:none;
  font-family:var(--font-display);font-weight:700;font-size:var(--t-h4);color:var(--text-body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-size:22px;font-weight:400;
  color:var(--ash);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details[open] summary{color:var(--text-heading)}
.faq .answer{padding-bottom:22px;max-width:64ch}

/* ---------- Close band ---------- */
.close-band{text-align:center;max-width:640px;margin:0 auto}
.close-band h2{font-family:var(--font-display);font-weight:800;
  font-size:clamp(28px,5.6vw,44px);color:var(--snow);margin:0 0 14px}
.close-band p{color:var(--snow);margin-bottom:26px}
.close-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- Footer ---------- */
.site-footer{background:#100E0C;padding:clamp(34px,6vw,48px) 0 34px}
.footer-grid{display:flex;gap:30px 40px;flex-wrap:wrap;justify-content:space-between}
.footer-brand{max-width:280px}
.footer-brand p{color:var(--mist);font-size:15px;margin-top:14px}
.footer-tel{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--snow)}
.footer-tel svg{color:var(--gold)}
.footer-col{display:flex;flex-direction:column;gap:4px;min-width:150px}
.footer-col .t-label{color:var(--mist);margin-bottom:6px}
.footlink{min-height:34px;display:flex;align-items:center;font-size:15px;color:var(--mist)}
.footlink:hover{color:var(--snow)}
.footer-cta{min-width:210px}
.footer-cta .t-label{color:var(--mist);margin-bottom:10px;display:block}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  border-top:1px solid #332E29;margin-top:30px;padding-top:18px}
.footer-bottom span{color:var(--mist)}

/* ---------- Mobile action bar ---------- */
.action-bar{display:none}
@media (max-width:900px){
  .action-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;gap:10px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(246,247,248,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--border-default)}
  .action-bar .btn{min-height:52px}
  .action-bar a:first-child{flex:0 0 38%;display:flex}
  .action-bar a:last-child{flex:1;display:flex}
  body{padding-bottom:76px}
}

/* ---------- Booking page ---------- */
.book-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(28px,5vw,52px);align-items:start}
.book-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.book-list li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.book-list svg{color:var(--pine);flex:0 0 auto;margin-top:3px}
.form-card{background:var(--surface-card);border:1px solid var(--border-default);
  border-radius:var(--radius-card);box-shadow:var(--shadow-raised);padding:clamp(20px,5vw,28px)}
.form-card form{display:flex;flex-direction:column;gap:16px}
.field label{display:block;font-family:var(--font-display);font-weight:700;font-size:13.5px;
  color:var(--text-heading);margin-bottom:6px}
.field input,.field textarea{width:100%;min-height:var(--field-h);padding:12px 14px;
  font-family:var(--font-body);font-size:16px;color:var(--text-body);
  background:var(--snow);border:1px solid var(--border-default);border-radius:var(--radius-control)}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--ash);outline:none;
  box-shadow:0 0 0 3px rgba(87,83,78,.15)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.divider{height:1px;background:var(--border-subtle)}
.back-link{display:inline-flex;align-items:center;gap:6px;margin-bottom:22px;min-height:44px;
  font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-support)}
.back-link:hover{color:var(--text-heading)}

/* ---------- Utility ---------- */
.stack-sm{display:flex;flex-direction:column;gap:8px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.center{text-align:center}
.mt-md{margin-top:24px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}