/* ==========================================================================
   Pearl Construction Company, Inc. — main.css  (FROZEN design system)
   Genre: Heritage serif  ·  Archetype: Asymmetric overlap
   Display: Playfair Display (self-hosted)  ·  Body: system humanist stack
   One accent: brick red. Gold is a dark-ground metallic trim only.
   Motion character: stately (this file defines tokens + component states only;
   reveal/scroll motion lives in css/motion.css, authored by the craft-lead).
   ========================================================================== */

/* ---- Self-hosted display face ------------------------------------------- */
@font-face{
  font-family:"Playfair Display";
  font-style:normal;font-weight:600;font-display:block;
  src:url("../fonts/playfair-display-600.woff2") format("woff2");
}
@font-face{
  font-family:"Playfair Display";
  font-style:normal;font-weight:700;font-display:block;
  src:url("../fonts/playfair-display-700.woff2") format("woff2");
}
@font-face{
  font-family:"Playfair Display";
  font-style:normal;font-weight:800;font-display:block;
  src:url("../fonts/playfair-display-800.woff2") format("woff2");
}

/* ---- Design tokens (role-based house contract) -------------------------- */
:root{
  /* Anchors / darks */
  --anchor-900:#171514;   /* footer, dark sections, hero overlay */
  --anchor-800:#232120;   /* lifted dark panels */

  /* Primary interactive + single accent (brick red) */
  --brand-700:#B4232A;    /* buttons, links, active icons on light */
  --brand-600:#971A20;    /* its hover */
  --accent-500:#C8202A;   /* the single accent — badges, key CTA */
  --accent-600:#A81A22;   /* its hover */
  --brand-300:#E0525A;    /* red readable on dark grounds (text/links) */

  /* Grounds / paper */
  --ground-50:#F4EEE4;    /* warm light section background */
  --paper:#FCFAF4;        /* cards, header (warm near-white) */

  /* Ink / text */
  --ink-900:#211E1B;      /* headings on light */
  --body-700:#4A4642;     /* body on light */
  --muted-300:#C9C3BA;    /* body on dark */
  --muted-500:#8C857B;    /* secondary text on DARK grounds (AA on anchor) */
  --muted-600:#6A645D;    /* secondary text on LIGHT grounds (AA on paper/tint) */

  /* Trim / tint / lines */
  --gold:#C6982F;         /* metallic trim — DARK grounds only */
  --gold-bright:#E7B725;  /* gold for small marks on dark */
  --tint:#EEE6D9;         /* faint stone tint for icon tiles */
  --line:#E4DCCC;         /* hairline on light */
  --line-strong:#CFC5B2;  /* stronger hairline / outline on light */
  --line-dark:rgba(255,255,255,.12);

  /* Motion tokens (consumed by css/motion.css) */
  --motion-duration-fast:160ms;   /* micro interactions */
  --motion-duration-base:320ms;   /* hovers, small transitions */
  --motion-duration-slow:720ms;   /* stately crossfade reveals */
  --motion-ease:cubic-bezier(0.20,0.65,0.30,1);
  --motion-distance:10px;         /* reveal translate — heritage keeps it small */

  /* Fonts */
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* Shape (one radius scale — near-square, sturdy) */
  --radius:4px;
  --radius-lg:6px;

  /* Layout */
  --wrap:1200px;
  --gutter:clamp(1.15rem,4vw,2.5rem);
  --shadow-sm:0 1px 2px rgba(23,21,20,.06),0 2px 8px rgba(23,21,20,.05);
  --shadow-md:0 6px 18px rgba(23,21,20,.10),0 2px 6px rgba(23,21,20,.06);
  --shadow-lg:0 20px 48px rgba(23,21,20,.18);
}

/* ---- Reset / base ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:1rem;line-height:1.62;
  color:var(--body-700);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:var(--brand-700);text-decoration:none}
a:hover{color:var(--brand-600)}
/* Inline prose links carry an underline so they never rely on color alone (WCAG 1.4.1). */
main p a:not(.btn){text-decoration:underline;text-underline-offset:2px}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink-900);margin:0;line-height:1.12;font-weight:700;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font-family:inherit}
strong{color:var(--ink-900);font-weight:600}

/* ---- Accessibility helpers --------------------------------------------- */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:.5rem;left:.5rem;z-index:200;
  background:var(--anchor-900);color:#fff;padding:.7rem 1.1rem;border-radius:var(--radius);
  transform:translateY(-160%);transition:transform var(--motion-duration-base) var(--motion-ease);
}
.skip-link:focus{transform:translateY(0);color:#fff}

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--brand-300);
  outline-offset:2px;border-radius:2px;
}
.section--dark :where(a,button,input,textarea,select):focus-visible{
  outline-color:var(--gold-bright);
}

/* ---- Layout primitives -------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:820px}
.section{padding-block:clamp(3.25rem,7vw,6rem)}
.section--tight{padding-block:clamp(2rem,4vw,3rem)}
.section--ground{background:var(--ground-50)}
.section--dark{background:var(--anchor-900);color:var(--muted-300)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--dark strong{color:#fff}
.section--dark a{color:var(--brand-300)}
.section--dark a:hover{color:#fff}

/* ---- Eyebrow + signature "struck line" heading treatment ---------------- */
.eyebrow{
  display:inline-block;font-family:var(--sans);font-weight:600;
  font-size:.78rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--brand-700);margin:0 0 .85rem;
}
.section--dark .eyebrow{color:var(--gold-bright)}

/* the signature: a short struck rule directly under a heading
   (red on light grounds, gold on dark grounds) */
.struck::after{
  content:"";display:block;width:58px;height:3px;margin-top:.7rem;border-radius:2px;
  background:var(--brand-700);
}
.struck--center{text-align:center}
.struck--center::after{margin-inline:auto}
.section--dark .struck::after{background:var(--gold)}

/* ---- Type scale --------------------------------------------------------- */
.display{font-weight:800;font-size:clamp(2.35rem,5.2vw,4rem);line-height:1.06;letter-spacing:-.02em}
.h2{font-weight:700;font-size:clamp(1.75rem,3.2vw,2.7rem)}
.h3{font-weight:700;font-size:clamp(1.25rem,1.6vw,1.55rem)}
.lead{font-size:clamp(1.06rem,.55vw+.92rem,1.28rem);line-height:1.6;color:var(--body-700)}
.section--dark .lead{color:var(--muted-300)}
.measure{max-width:62ch}

/* ---- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1;
  padding:.9rem 1.5rem;min-height:48px;border-radius:var(--radius);
  border:1.5px solid transparent;cursor:pointer;text-align:center;white-space:nowrap;
  transition:background-color var(--motion-duration-fast) var(--motion-ease),
             border-color var(--motion-duration-fast) var(--motion-ease),
             color var(--motion-duration-fast) var(--motion-ease),
             transform var(--motion-duration-fast) var(--motion-ease);
}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--brand-700);color:#fff}
.btn--primary:hover{background:var(--brand-600);color:#fff}
.btn--accent{background:var(--accent-500);color:#fff}
.btn--accent:hover{background:var(--accent-600);color:#fff}
.btn--outline{background:transparent;color:var(--ink-900);border-color:var(--line-strong)}
.btn--outline:hover{border-color:var(--ink-900);color:var(--ink-900)}
.section--dark .btn--outline,.hero .btn--outline,.page-hero .btn--outline{color:#fff;border-color:rgba(255,255,255,.42)}
.section--dark .btn--outline:hover,.hero .btn--outline:hover,.page-hero .btn--outline:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.btn--block{width:100%}
.btn .ico{width:18px;height:18px;stroke-width:2}

/* ---- Icons (Lucide/Feather line register) ------------------------------- */
.ico{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-tile{
  width:52px;height:52px;border-radius:var(--radius);flex:none;
  display:grid;place-items:center;background:var(--tint);color:var(--brand-700);
}
.icon-tile .ico{width:26px;height:26px}
.section--dark .icon-tile{background:rgba(255,255,255,.06);color:var(--gold-bright)}

/* ---- Header ------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:100;background:var(--paper);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:1.25rem;min-height:74px;padding-block:.55rem}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--ink-900)}
.brand:hover{color:var(--ink-900)}
.brand__mark{width:50px;height:50px;flex:none}
/* nowrap is load-bearing: set in caps, the name is wider than the space the
   header row leaves it, so without this it silently wraps to two lines and the
   lockup falls apart. 1.12rem is the largest size that still clears the nav at
   1201px, the tightest width where the full nav is present. */
.brand__name{font-family:var(--serif);font-weight:800;font-size:1.12rem;line-height:1;
  text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
/* Two-line lockup: the caps name, a rule, then COMPANY INCORPORATED tracked out
   to the same width. Justify can't do this — it only stretches at word gaps, so
   a two-word line would open one hole rather than spread evenly. The tracking
   is solved instead: measured at these sizes, PEARL CONSTRUCTION is 167.7px and
   the suffix sets 145.7px bare, so 22px spread over its 19 inter-letter gaps is
   .1167em. The negative right margin cancels the gap CSS adds after the final
   glyph, so the two lines end on the same pixel rather than one tracking unit
   apart. Both numbers are in em, so they hold if the type scale moves.
   Measured: PEARL CONSTRUCTION sets 216.0px at 1.12rem; COMPANY INCORPORATED
   sets 169.4px bare at .72rem; the solved .2129em measured 2.5px long, so the
   value is trimmed to .2em, which lands the two lines within a pixel.
   If either string or size changes, re-solve: (nameWidth - bareWidth) / gaps. */
/* Centred, not stretched. Tracking it to match line one exactly only holds if
   the display face is the one it was solved against; any fallback sets the name
   a different width and the join visibly breaks. Centring is width-agnostic —
   it stays correct whatever renders. The negative right margin cancels the gap
   CSS adds after the final glyph, which would otherwise push the centring off
   by half a tracking unit. */
.brand__sub{display:block;font-family:var(--sans);font-weight:600;font-size:.72rem;
  letter-spacing:.2em;margin-right:-.1em;white-space:nowrap;text-align:center;
  text-transform:uppercase;color:var(--muted-600);
  margin-top:.34rem;padding-top:.34rem;border-top:1px solid var(--line-strong)}
.site-footer .brand__sub{border-top-color:var(--line-dark);color:var(--muted-300)}
/* The badge's ring is near-black, so on the near-black footer it measures
   1.12:1 and the circle disappears. A paper chip restores it to the same
   15.6:1 it has in the header, without altering the client's mark. */
.site-footer .brand__mark{background:var(--paper);border-radius:50%;padding:5px}

/* primary nav */
.nav{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:.35rem}
.nav__link{
  display:inline-flex;align-items:center;gap:.3rem;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:.98rem;font-weight:600;color:var(--ink-900);
  padding:.6rem .8rem;border-radius:var(--radius);text-decoration:none;white-space:nowrap;
  transition:color var(--motion-duration-fast) var(--motion-ease),
             background-color var(--motion-duration-fast) var(--motion-ease);
}
.nav__link:hover{color:var(--brand-700);background:var(--tint)}
.nav__link[aria-current="page"]{color:var(--brand-700)}
.nav__chev{width:15px;height:15px;transition:transform var(--motion-duration-fast) var(--motion-ease)}

/* services dropdown */
.nav__item--has-menu{position:relative}
.nav__menu{
  position:absolute;top:calc(100% + .4rem);left:0;min-width:250px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:.5rem;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity var(--motion-duration-base) var(--motion-ease),
             transform var(--motion-duration-base) var(--motion-ease),
             visibility var(--motion-duration-base);
}
.nav__item--has-menu:hover .nav__menu,
.nav__link[aria-expanded="true"]+.nav__menu,
.nav__menu:focus-within{opacity:1;visibility:visible;transform:translateY(0)}
.nav__link[aria-expanded="true"] .nav__chev{transform:rotate(180deg)}
.nav__menu a{
  display:block;padding:.6rem .75rem;border-radius:var(--radius);
  font-size:.94rem;font-weight:500;color:var(--body-700);text-decoration:none;
}
.nav__menu a:hover{background:var(--tint);color:var(--brand-700)}

/* header right cluster */
.header-cta{display:flex;align-items:center;gap:.85rem}
.header-phone{
  display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:1rem;
  color:var(--ink-900);white-space:nowrap;
}
.header-phone:hover{color:var(--brand-700)}
.header-phone .ico{width:18px;height:18px;color:var(--brand-700)}

/* mobile toggle */
.nav-toggle{display:none;align-items:center;justify-content:center;width:46px;height:46px;
  background:none;border:1px solid var(--line-strong);border-radius:var(--radius);cursor:pointer;color:var(--ink-900)}
.nav-toggle .ico{width:24px;height:24px}
.nav-toggle .ico-close{display:none}
.nav-toggle[aria-expanded="true"] .ico-open{display:none}
.nav-toggle[aria-expanded="true"] .ico-close{display:block}

/* ---- Hero (full-bleed video stage) ------------------------------------- */
.hero{position:relative;isolation:isolate;background:var(--anchor-900);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-1}
/* object-fit:cover crops rather than letterboxes, so any aspect ratio fills the
   stage. The poster paints in the same box, so swapping the file cannot shift
   layout. */
.hero__video{width:100%;height:100%;object-fit:cover;display:block}
/* Flat solid scrim at opacity — house rule bans gradients. Sized so white text
   clears AA over the brightest frame of a daylight jobsite clip. */
.hero__bg::after{content:"";position:absolute;inset:0;background:var(--anchor-900);opacity:.68}
.hero__inner{position:relative;display:flex;align-items:center;
  min-height:clamp(460px,64vh,720px);padding-block:clamp(2.5rem,6vw,4.5rem)}
.hero__card{max-width:34rem}
/* Lightened from --gold-bright: measured 3.82:1 against the video's held
   final frame, which is brighter than the poster. 5.05:1 here. */
.hero__card .eyebrow{color:#F5D67E}
.hero__title{color:#fff;font-weight:800;font-size:clamp(2.3rem,4.6vw,3.7rem);line-height:1.05;letter-spacing:-.02em;margin-bottom:1rem}
.hero__lead{color:#f1ede7;font-size:clamp(1.05rem,.5vw+.92rem,1.24rem);max-width:44ch;margin-bottom:1.6rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem}

/* Playback is started by js/motion.js, never by an autoplay attribute, so
   reduced-motion users and no-JS users both hold the poster frame — which is
   the same image either way, so nothing looks broken or empty. */
/* Phone header fits one row: the estimate CTA is carried by the sticky call bar
   and the in-menu Contact link, so drop the header button below 520px to stop
   the header from forcing horizontal overflow. */
@media(max-width:520px){
  .header-cta .btn--primary{display:none}
}

/* ---- Trust strip -------------------------------------------------------- */
.trust{display:grid;gap:1rem 1.5rem;grid-template-columns:repeat(2,1fr)}
.trust__item{display:flex;align-items:flex-start;gap:.7rem}
.trust__item .ico{color:var(--gold-bright);margin-top:2px}
.trust__item h2{font-family:var(--sans);font-size:.98rem;font-weight:700;color:#fff;margin-bottom:.15rem;letter-spacing:normal}
.trust__item p{font-size:.86rem;color:var(--muted-300)}
@media(min-width:760px){.trust{grid-template-columns:repeat(4,1fr)}}

/* ---- Section heading block --------------------------------------------- */
.sec-head{max-width:64ch;margin-bottom:clamp(1.75rem,3vw,2.75rem)}
.sec-head .lead{margin-top:1rem}
.sec-head--split{display:grid;gap:1rem}
@media(min-width:860px){
  .sec-head--split{grid-template-columns:1.1fr .9fr;align-items:end;gap:2.5rem;max-width:none}
  .sec-head--split .sec-head__aside{padding-bottom:.4rem}
}

/* ---- Services grid ------------------------------------------------------ */
.svc-grid{display:grid;gap:1.15rem;grid-template-columns:1fr}
@media(min-width:640px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.svc-grid{grid-template-columns:repeat(3,1fr)}}

.svc-card{
  display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-sm);
  transition:transform var(--motion-duration-base) var(--motion-ease),
             box-shadow var(--motion-duration-base) var(--motion-ease),
             border-color var(--motion-duration-base) var(--motion-ease);
}
a.svc-card{color:inherit}
a.svc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.svc-card h3{font-size:1.22rem;margin:1rem 0 .5rem}
.svc-card p{font-size:.94rem;color:var(--body-700);flex:1}
.svc-card__more{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;
  font-weight:600;font-size:.92rem;color:var(--brand-700)}
.svc-card__more .ico{width:16px;height:16px;transition:transform var(--motion-duration-fast) var(--motion-ease)}
a.svc-card:hover .svc-card__more .ico{transform:translateX(3px)}

/* feature service card with photo (spans wider on large screens) */
.svc-card--feature{padding:0;overflow:hidden}
.svc-card--feature .svc-card__media{aspect-ratio:16/10;overflow:hidden}
.svc-card--feature .svc-card__media img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--motion-duration-slow) var(--motion-ease)}
a.svc-card--feature:hover .svc-card__media img{transform:scale(1.03)}
.svc-card--feature .svc-card__body{padding:1.5rem}
@media(min-width:1000px){
  .svc-card--feature{grid-column:span 2;flex-direction:row}
  .svc-card--feature .svc-card__media{aspect-ratio:auto;flex:1 1 46%;min-height:100%}
  .svc-card--feature .svc-card__body{flex:1 1 54%;display:flex;flex-direction:column;justify-content:center}
}

/* ---- Split media / about ----------------------------------------------- */
.split{display:grid;gap:2rem;align-items:center}
.split__media{position:relative}
.split__media img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.split__stat{
  position:absolute;right:.75rem;bottom:-1rem;background:var(--anchor-900);color:#fff;
  border-radius:var(--radius-lg);padding:1rem 1.25rem;box-shadow:var(--shadow-lg);max-width:56%;
}
.split__stat .num{font-family:var(--serif);font-weight:800;font-size:2rem;color:var(--gold-bright);line-height:1}
.split__stat .lab{font-size:.82rem;color:var(--muted-300);margin-top:.2rem}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.75rem)}
  .split--flip .split__media{order:2}
  /* Overhang the stat past the media corner only at 2-col widths, where the
     column gap / wrap gutter absorbs it; at stacked widths it stays inset so
     it never pushes past the viewport. */
  .split__stat{right:-.75rem}
}

/* feature list (differentiators) */
.flist{display:grid;gap:1rem;margin-top:1.5rem}
.flist li{display:flex;gap:.75rem;align-items:flex-start}
.flist .ico{color:var(--brand-700);margin-top:2px;width:20px;height:20px}
.section--dark .flist .ico{color:var(--gold-bright)}
.flist strong{display:block;margin-bottom:.1rem}
.flist p{font-size:.92rem}

/* ---- Gallery (mosaic) --------------------------------------------------- */
.gallery{display:grid;gap:.85rem;grid-template-columns:repeat(2,1fr)}
.gallery figure{margin:0;position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--anchor-800)}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform var(--motion-duration-slow) var(--motion-ease)}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.4rem .9rem .8rem;
  background:var(--anchor-900);color:var(--muted-300);font-size:.82rem;
  opacity:0;transform:translateY(8px);
  transition:opacity var(--motion-duration-base) var(--motion-ease),
             transform var(--motion-duration-base) var(--motion-ease);
}
.gallery figure:hover figcaption,.gallery figure:focus-within figcaption{opacity:.96;transform:translateY(0)}
@media(min-width:760px){
  .gallery{grid-template-columns:repeat(4,1fr)}
  .gallery__tall{grid-row:span 2}
  .gallery__tall img{aspect-ratio:3/4;height:100%}
  .gallery__wide{grid-column:span 2}
  .gallery__wide img{aspect-ratio:16/9}
}

/* ---- Service area ------------------------------------------------------- */
.area-grid{display:grid;gap:2rem;align-items:start}
@media(min-width:900px){.area-grid{grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem)}}
.area-list{display:grid;gap:.9rem}
.area-list a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.05rem 1.25rem;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);color:var(--ink-900);font-weight:600;
  transition:border-color var(--motion-duration-base) var(--motion-ease),
             transform var(--motion-duration-base) var(--motion-ease);
}
.area-list a:hover{border-color:var(--brand-700);transform:translateX(3px);color:var(--ink-900)}
.area-list a span{display:block;font-weight:400;font-size:.85rem;color:var(--muted-600);margin-top:.15rem}
.area-list a .ico{color:var(--brand-700);width:20px;height:20px}
.map-ph{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:280px;height:100%;
  background:var(--tint);border:1px solid var(--line);display:grid;place-items:center;text-align:center;padding:2rem;
}
.map-ph .ico{width:38px;height:38px;color:var(--brand-700);margin:0 auto .6rem}
.map-ph p{font-weight:600;color:var(--ink-900)}
.map-ph span{font-size:.88rem;color:var(--muted-600)}

/* ---- Process steps ------------------------------------------------------ */
.steps{display:grid;gap:1.15rem;counter-reset:step}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;padding:1.6rem 1.5rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg)}
.step__num{font-family:var(--serif);font-weight:800;font-size:1.15rem;color:#fff;
  width:44px;height:44px;border-radius:50%;background:var(--brand-700);display:grid;place-items:center;margin-bottom:1rem}
.step h3{font-size:1.15rem;margin-bottom:.5rem}
.step p{font-size:.93rem}

/* ---- CTA band ----------------------------------------------------------- */
.cta-band{text-align:center}
.cta-band .h2{color:#fff;max-width:20ch;margin-inline:auto}
.cta-band .lead{max-width:52ch;margin:1rem auto 1.9rem}
.cta-actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
.cta-phone{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--serif);
  font-weight:800;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--gold-bright)}
.cta-phone:hover{color:#fff}

/* ---- Forms -------------------------------------------------------------- */
.form{display:grid;gap:1.15rem}
.field{display:grid;gap:.4rem}
.field label{font-weight:600;font-size:.92rem;color:var(--ink-900)}
.field .req{color:var(--brand-700)}
.field input,.field textarea,.field select{
  width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink-900);
  padding:.8rem .9rem;background:var(--paper);border:1.5px solid var(--line-strong);
  border-radius:var(--radius);min-height:48px;
  transition:border-color var(--motion-duration-fast) var(--motion-ease),
             box-shadow var(--motion-duration-fast) var(--motion-ease);
}
.field textarea{min-height:130px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-500)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--brand-700);box-shadow:0 0 0 3px rgba(180,35,42,.16)}
.field--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__status{font-size:.95rem;font-weight:600;border-radius:var(--radius);padding:0}
.form__status:not(:empty){padding:.85rem 1rem;margin-top:.25rem}
.form__status.is-ok{background:#EAF3EC;color:#1f5130;border:1px solid #bcd9c4}
.form__status.is-err{background:#FBEBEA;color:#8E1A1F;border:1px solid #e6bdbb}
.form__hint{font-size:.85rem;color:var(--muted-600)}

/* ---- Footer ------------------------------------------------------------- */
.site-footer{background:var(--anchor-900);color:var(--muted-300)}
.footer-top{display:grid;gap:2rem;padding-block:clamp(2.75rem,5vw,4rem)}
.footer-brand .brand__name{color:#fff}
.footer-brand .brand__sub{color:var(--muted-500)}
.footer-brand p{margin-top:1rem;font-size:.92rem;max-width:34ch}
.footer-col h3{font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-bright);margin-bottom:1rem;font-weight:700}
.footer-col ul{display:grid;gap:.6rem}
.footer-col a{color:var(--muted-300);font-size:.94rem}
.footer-col a:hover{color:#fff}
.footer-nap{font-style:normal;display:grid;gap:.6rem;font-size:.94rem}
.footer-nap a{color:var(--muted-300);overflow-wrap:anywhere}
.footer-nap .row>span{min-width:0}
.footer-nap a:hover{color:#fff}
.footer-nap .row{display:flex;gap:.6rem;align-items:flex-start}
.footer-nap .ico{width:18px;height:18px;color:var(--gold-bright);margin-top:2px}
.footer-legal{
  border-top:1px solid var(--line-dark);padding-block:1.35rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.25rem;align-items:center;justify-content:space-between;
  font-size:.85rem;color:var(--muted-500);
}
.footer-legal nav{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem}
.footer-legal a{color:var(--muted-300)}
.footer-legal a:hover{color:#fff}
.footer-license{font-size:.82rem;color:var(--muted-500)}
@media(min-width:720px){.footer-top{grid-template-columns:1.6fr 1fr 1fr 1.3fr}}

/* ---- Cookie banner ------------------------------------------------------ */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:var(--anchor-800);color:var(--muted-300);border-top:1px solid var(--line-dark);
  padding:.9rem var(--gutter);
  display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center;justify-content:center;
  transform:translateY(110%);transition:transform var(--motion-duration-slow) var(--motion-ease);
}
.cookie.is-visible{transform:translateY(0)}
.cookie p{font-size:.88rem;max-width:62ch}
.cookie a{color:var(--gold-bright);text-decoration:underline;text-underline-offset:2px}
.cookie a:hover{color:#fff}
.cookie .btn{padding:.6rem 1.2rem;min-height:44px}

/* ---- Sticky mobile call bar -------------------------------------------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:140;display:none;
  background:var(--brand-700);
}
.callbar a{
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem;color:#fff;font-weight:700;font-size:1.05rem;min-height:54px;
}
.callbar .ico{width:20px;height:20px;color:#fff}

/* ---- Article (legal / long-form) --------------------------------------- */
.article{max-width:72ch;margin-inline:auto}
.article h2{font-size:clamp(1.4rem,2vw,1.8rem);margin:2.25rem 0 .85rem}
.article h3{font-size:1.2rem;margin:1.6rem 0 .6rem}
.article p,.article li{font-size:1rem;line-height:1.7;margin-bottom:1rem}
.article ul{list-style:disc;padding-left:1.3rem;margin-bottom:1rem}
.article li{margin-bottom:.5rem}
.article a{text-decoration:underline}
.article .meta{color:var(--muted-600);font-size:.9rem;margin-bottom:2rem}

/* ---- Page hero (interior pages) ---------------------------------------- */
.page-hero{background:var(--anchor-900);color:var(--muted-300);padding-block:clamp(2.5rem,5vw,4rem)}
.page-hero .eyebrow{color:var(--gold-bright)}
.page-hero h1{color:#fff;font-size:clamp(2rem,4vw,3rem);margin-bottom:.9rem;max-width:20ch}
.page-hero .lead{color:var(--muted-300);max-width:60ch}
.breadcrumb{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.85rem;color:var(--muted-500);margin-bottom:1.1rem}
.breadcrumb a{color:var(--muted-300)}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{color:var(--muted-500)}

/* ---- FAQ ---------------------------------------------------------------- */
.faq{display:grid;gap:.85rem;max-width:820px}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:0}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 1.35rem;font-family:var(--serif);
  font-weight:700;font-size:1.08rem;color:var(--ink-900);display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{width:20px;height:20px;color:var(--brand-700);transition:transform var(--motion-duration-base) var(--motion-ease)}
.faq details[open] summary .ico{transform:rotate(45deg)}
.faq details > div{padding:0 1.35rem 1.25rem}
.faq p{font-size:.96rem}

/* ---- Prose helpers ------------------------------------------------------ */
.stack-sm>*+*{margin-top:.85rem}
.stack>*+*{margin-top:1.15rem}
.text-center{text-align:center}
.mt-lg{margin-top:clamp(1.75rem,3vw,2.75rem)}

/* ---- Mobile nav --------------------------------------------------------- */
@media(max-width:1200px){
  .nav-toggle{display:flex}
  .nav{
    position:fixed;inset:74px 0 0;margin:0;background:var(--paper);z-index:99;
    padding:1rem var(--gutter) 6rem;overflow-y:auto;
    transform:translateX(100%);visibility:hidden;
    transition:transform var(--motion-duration-base) var(--motion-ease),visibility var(--motion-duration-base);
  }
  .nav.is-open{transform:translateX(0);visibility:visible}
  .nav__list{flex-direction:column;align-items:stretch;gap:.15rem}
  .nav__link{width:100%;justify-content:space-between;padding:.9rem .6rem;font-size:1.08rem;border-radius:var(--radius);border-bottom:1px solid var(--line)}
  .nav__link:hover{background:transparent}
  .nav__item--has-menu{position:static}
  .nav__menu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    min-width:0;padding:.2rem 0 .5rem .6rem;max-height:0;overflow:hidden;
    transition:max-height var(--motion-duration-base) var(--motion-ease);
  }
  .nav__link[aria-expanded="true"]+.nav__menu{max-height:520px}
  .nav__menu a{padding:.7rem .6rem}
  .header-phone{display:none}
  .callbar{display:block}
  body.has-callbar{padding-bottom:54px}
  /* Both are fixed to bottom:0, so the banner would sit on top of the call bar
     and hide the phone CTA until cookies are dismissed. Lift it clear of the
     bar (rendered height is 58px: the 54px min-height plus its border) so both
     stay reachable. */
  body.has-callbar .cookie{bottom:58px}
}
@media(min-width:1201px){
  .nav__menu{max-height:none}
}

/* ---- Reduced motion ----------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}