/* Bodoni Moda (SIL Open Font License), self-hosted so no visitor data goes to
   Google Fonts. One variable file per character set covers weights 400-500. */
@font-face{
  font-family:"Bodoni Moda"; font-style:normal; font-weight:400 500; font-display:swap;
  src:url("fonts/bodoni-moda-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Bodoni Moda"; font-style:normal; font-weight:400 500; font-display:swap;
  src:url("fonts/bodoni-moda-latin.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;
}

/* ── tokens ─────────────────────────────────────────────── */
:root{
  --ink:      #171717;
  --ink-soft: #3C3936;
  --dim:      #6B6660;
  --dimmer:   #9C9691;

  --paper:    #FFFFFF;
  --paper-2:  #F6F4F1;   /* warm off-white band */
  --paper-3:  #EDE9E4;

  --line:     #E5E2DE;
  --line-dk:  #CFC9C2;

  --copper:   #B4702F;

  --sp:       clamp(3.5rem, 7vw, 7rem);
  --gutter:   clamp(1rem, 2.5vw, 2.25rem);
  --ease:     cubic-bezier(.22,1,.36,1);

  --ui: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --dp: "Bodoni Moda", Didot, "Times New Roman", serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ui); font-weight:400;
  font-size:.9375rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
/* Skip link: off-screen until a keyboard user tabs to it, then it drops in. */
.skip{
  position:absolute; left:1rem; top:-4rem; z-index:200;
  background:var(--ink); color:var(--paper); padding:.8rem 1.1rem;
  font-size:.8125rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
}
.skip:focus{top:1rem}

/* ── type roles ─────────────────────────────────────────── */
.display{
  font-family:var(--dp); font-weight:400; margin:0;
  font-size:clamp(2.75rem,9.5vw,8.5rem); line-height:.92;
  letter-spacing:-.015em; text-transform:uppercase;
}
.display--sm{font-size:clamp(2.25rem,6vw,5rem)}

.hd{
  font-family:var(--ui); font-weight:700; margin:0;
  font-size:clamp(1.375rem,2.6vw,2.25rem); line-height:1.15;
  letter-spacing:-.02em; text-transform:uppercase;
}
.hd--sm{font-size:clamp(1.0625rem,1.6vw,1.3125rem)}

.eyebrow{
  font-family:var(--ui); font-size:.6875rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.lede{font-size:clamp(.9375rem,.9rem + .25vw,1.125rem); line-height:1.65; color:var(--ink-soft)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
.dim{color:var(--dim)}

/* ── layout ─────────────────────────────────────────────── */
.wrap{max-width:96rem; margin-inline:auto; padding-inline:var(--gutter)}
/* clears the sticky wordmark + category rows when jumping to an anchor */
.sec{padding-block:var(--sp); scroll-margin-top:13rem}
.band{background:var(--paper-2)}

/* ── link buttons ───────────────────────────────────────── */
.lnk{
  font-family:var(--ui); font-size:.6875rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; text-decoration:none;
  display:inline-block; padding-bottom:.35rem;
  border-bottom:1px solid var(--ink);
  transition:opacity .3s var(--ease);
}
.lnk:hover,.lnk:focus-visible{opacity:.55}

.btn{
  font-family:var(--ui); font-size:.6875rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  padding:1.0625rem 2.25rem; border:1px solid var(--ink);
  background:var(--ink); color:var(--paper); cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.btn:hover,.btn:focus-visible{background:transparent; color:var(--ink)}
.btn--ghost{background:transparent; color:var(--ink)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--ink); color:var(--paper)}
.btn--light{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.btn--light:hover,.btn--light:focus-visible{background:transparent; color:var(--paper)}

/* ── announcement ticker ────────────────────────────────── */
.ticker{background:var(--ink); color:var(--paper); overflow:hidden; display:flex; padding-block:.6rem}
.ticker div{display:flex; gap:3rem; flex:none; padding-right:3rem; animation:tick 40s linear infinite}
.ticker span{
  font-size:.6875rem; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; white-space:nowrap;
}
.ticker a{color:inherit}
@keyframes tick{to{transform:translateX(-100%)}}

/* ── header ─────────────────────────────────────────────── */
.hdr{position:sticky; top:0; z-index:60; background:var(--paper); border-bottom:1px solid var(--line)}
.hdr-row{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:1rem; padding:1.15rem var(--gutter);
}
.hdr-l,.hdr-r{display:flex; align-items:center; gap:1.75rem}
.hdr-r{justify-content:flex-end}
.hdr-l a,.hdr-r a{
  font-size:.9375rem; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
  transition:opacity .3s var(--ease);
}
.hdr-l a:hover,.hdr-r a:hover{opacity:.55}
/* Phone number: shown at every width. On a phone the digits don't fit beside the
   logo and Book a visit, so it becomes a tap-to-call icon button. */
.hdr-tel svg{display:none; width:1.25rem; height:1.25rem; fill:currentColor}
/* Book a visit: a real button, not a text link, and bigger than the other
   header links so it reads as the primary action. */
.hdr-r a.hdr-cta{
  font-size:1rem; font-weight:700; letter-spacing:.1em;
  padding:1rem 1.75rem; color:var(--paper); background:var(--ink);
  border:1px solid var(--ink);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.hdr-r a.hdr-cta:hover,.hdr-r a.hdr-cta:focus-visible{opacity:1; background:transparent; color:var(--ink)}

.wordmark{display:flex; align-items:center; text-decoration:none; justify-self:center}
/* the real Crowe logo (1600×764 raster, white background) — sized by
   height so the header row stays a predictable thickness */
.wordmark img{height:92px; width:auto; max-width:none; display:block}

/* category row */
.catnav{border-top:1px solid var(--line)}
.catnav ul{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:.25rem clamp(1.1rem, 2.4vw, 2.5rem);
  list-style:none; margin:0; padding:.9rem var(--gutter);
}
.catnav a{
  font-size:.75rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
  padding-block:.25rem; border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.catnav a:hover,.catnav a:focus-visible{border-bottom-color:var(--ink)}
@media(max-width:1060px){
  .catnav{display:none}
  .hdr-l,.hdr-r{gap:1rem}
  /* Get directions is in the menu panel below desktop width; the phone number
     stays in the header at every width (text above 640px, an icon below). */
  .hide-sm{display:none}
  .wordmark img{height:60px}
  .hdr-r a.hdr-cta{font-size:.8125rem; padding:.85rem 1.2rem}
}

@media(max-width:640px){
  /* Menu | logo | call + Book a visit all have to fit on one phone row, so the
     centre column takes whatever is left instead of sharing equally. */
  .hdr-row{grid-template-columns:auto 1fr auto; gap:.5rem}
  .hdr-tel span{display:none}
  .hdr-r a.hdr-tel{display:grid; place-items:center; width:2.5rem; height:2.5rem; border:1px solid var(--ink); border-radius:50%}
  .hdr-tel svg{display:block}
  .hdr-r{gap:.5rem}
  .wordmark img{height:50px}
  .hdr-r a.hdr-cta{font-size:.6875rem; letter-spacing:.06em; padding:.8rem .9rem}
}
@media(max-width:420px){
  .hdr-l .menu-btn{font-size:0; gap:0}   /* hamburger only; the button keeps its Menu name for screen readers */
  .wordmark img{height:44px}
}

/* ── hero ───────────────────────────────────────────────── */
/* taller than the original one-line hero — it now carries a headline,
   a strapline and a paragraph above the button */
.hero{position:relative; height:clamp(34rem,86svh,50rem); overflow:hidden; background:var(--paper-3)}
.hero video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  will-change:opacity;
}
.hero video + video{opacity:0}   /* B starts hidden; JS cross-fades A↔B */
.hero-veil{
  position:absolute; inset:0;
  /* the film is a bright oak hallway, so the foot of the frame needs
     real weight for the white headline to hold contrast */
  background:linear-gradient(to top, rgba(23,23,23,.82) 0%, rgba(23,23,23,.62) 26%, rgba(23,23,23,.3) 48%, rgba(23,23,23,.06) 70%, rgba(23,23,23,0) 88%);
}
.hero-copy{
  position:absolute; left:0; right:0; bottom:0; padding:var(--gutter);
  padding-bottom:clamp(2rem,5vw,3.5rem); color:var(--paper);
}
.hero-copy .inner{max-width:96rem; margin-inline:auto; display:grid; gap:1.1rem; justify-items:start}
.hero-copy .hd{max-width:22ch}
.hero-copy .btn{margin-top:.7rem}
.hero-sub{
  margin:0; max-width:36ch; font-weight:500;
  font-size:clamp(1rem,.95rem + .45vw,1.3125rem); line-height:1.4;
}
.hero-body{
  margin:0; max-width:54ch; color:rgba(255,255,255,.84);
  font-size:clamp(.875rem,.85rem + .25vw,1.0625rem); line-height:1.6;
}

/* video placeholder */
/* mid-tone so the white hero copy still reads before the film lands */
.vslot{
  position:absolute; inset:0; display:grid; place-items:center;
  background:
    repeating-linear-gradient(135deg, #8C857D 0 22px, #837C74 22px 44px);
}
.vslot-card{
  text-align:center; display:grid; gap:.75rem; padding:1.5rem 2rem;
  background:var(--paper); border:1px solid var(--line-dk);
}
.vslot-card b{font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--copper)}
.vslot-card code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.75rem; color:var(--dim); line-height:1.85}
@media(max-width:900px){.vslot-card{padding:1rem 1.25rem}.vslot-card code{font-size:.6875rem}}

/* ── section head ───────────────────────────────────────── */
.sechd{display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap}

/* ── mosaic ─────────────────────────────────────────────── */
.mosaic{display:grid; gap:.5rem; grid-template-columns:repeat(2,1fr); margin-top:clamp(1.5rem,3vw,2.5rem)}
/* Desktop: 1 big tile (Luxury vinyl) beside a 2x2 block of square tiles
   (Herringbone, Engineered wood, Carpet, Commercial). The big column is
   1.5fr so a tile spanning the two square rows lands close to 3:4.
   Phones: big tile full width, then the four squares in two pairs. */
@media(min-width:900px){
  .mosaic{grid-template-columns:1.5fr 1fr 1fr}
  .tile--big{grid-column:1/2; grid-row:1/3}
}
.tile{
  position:relative; overflow:hidden; display:grid; place-items:center;
  aspect-ratio:1/1; text-decoration:none; background:var(--paper-3);
}
/* Row-span (above) anchors it to the grid track, but stretching a photo
   to fill all 3 rows forces an ~0.33 aspect ratio — any real image gets
   blown up to cover that and turns to mush. align-self:start + a sane
   portrait aspect-ratio lets it size itself instead; the gap that leaves
   below it is intentional editorial whitespace, not a layout bug. */
.tile--big{aspect-ratio:3/4; min-height:0; align-self:start}
@media(max-width:899px){.tile--big{grid-column:1/-1; aspect-ratio:4/3; min-height:0}}
.tile img,.tile .ph{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.tile::after{
  content:""; position:absolute; inset:0; background:rgba(23,23,23,.14);
  transition:background .45s var(--ease);
}
.tile:hover::after,.tile:focus-visible::after{background:rgba(23,23,23,.3)}
.tile b{
  position:relative; z-index:2; color:#fff; text-align:center;
  font-family:var(--ui); font-weight:700; font-size:clamp(.9375rem,1.4vw,1.25rem);
  letter-spacing:.03em; text-transform:uppercase; line-height:1.15;
  text-shadow:0 1px 14px rgba(0,0,0,.35);
}
.ph{
  display:grid; place-items:center; text-align:center; padding:1rem;
  background:repeating-linear-gradient(135deg,#EDE9E4 0 18px,#E7E2DC 18px 36px);
}
.ph span{
  font-family:var(--ui); font-size:.625rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dimmer);
}
/* tiles carry a centred label, so park the spec note at the top */
.tile .ph{place-items:start center; padding-top:.9rem}

/* ── carousel (Luxury vinyl tile) ───────────────────────────
   Native scroll-snap does the swiping and the snapping; JS only wires
   the arrows and dots. Kept after the mosaic rules so it wins the
   phone-size override — these are portrait photos, so 3:4 everywhere. */
/* only the big tile is portrait; the small ones stay square like every other tile */
.tile--big.carousel{aspect-ratio:3/4}
@media(min-width:900px){.tile--big.carousel{aspect-ratio:auto; align-self:stretch}}
.carousel .car-track{
  position:absolute; inset:0; display:flex; overflow-x:auto;
  scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none;
}
.carousel .car-track::-webkit-scrollbar{display:none}
@media(prefers-reduced-motion:no-preference){.carousel .car-track{scroll-behavior:smooth}}
/* .tile img is position:absolute; the slides have to sit in a row instead */
.carousel .car-track img{
  position:static; flex:0 0 100%; width:100%; height:100%; object-fit:cover;
  scroll-snap-align:start; scroll-snap-stop:always;
}
/* the tint would otherwise swallow swipes and taps on the photos */
.carousel::after{pointer-events:none}
/* label sits on the top edge, not dead centre like the other tiles — centred it
   covers the subject of every photo and lines up with the arrows */
.tile-link{
  position:absolute; z-index:2; left:50%; top:.75rem; transform:translateX(-50%);
  padding:.5rem 1rem; text-decoration:none; white-space:nowrap;
}
.carousel::before{
  content:""; position:absolute; inset:0 0 auto 0; height:5.5rem; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(23,23,23,.45), rgba(23,23,23,0));
}
.car-btn{
  position:absolute; top:50%; z-index:3; width:2.75rem; height:2.75rem; margin-top:-1.375rem;
  display:grid; place-items:center; padding:0; cursor:pointer; color:#fff;
  border:1px solid rgba(255,255,255,.7); border-radius:50%;
  background:rgba(23,23,23,.35); backdrop-filter:blur(4px);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.car-prev{left:.75rem}
.car-next{right:.75rem}
.car-btn:hover,.car-btn:focus-visible{background:rgba(23,23,23,.7)}
.car-btn:active{transform:scale(.94)}
.car-btn svg{width:.875rem; height:.875rem; fill:none; stroke:currentColor; stroke-width:1.75}
.car-dots{
  position:absolute; left:0; right:0; bottom:.75rem; z-index:3;
  display:flex; justify-content:center; gap:.125rem;
}
.car-dots button{
  width:1.5rem; height:1.5rem; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center;
}
.car-dots button::before{
  content:""; width:.5rem; height:.5rem; border-radius:50%;
  border:1px solid #fff; background:transparent; transition:background .3s var(--ease);
}
.car-dots button[aria-current="true"]::before{background:#fff}

/* Narrow tiles (the small Carpet tile on a phone is ~175px wide): 11 dots
   would run edge to edge and the arrows would cover half the photo, so swap
   the dots for a counter and shrink the arrows. Keyed to the tile's own
   width, not the viewport, so it applies wherever the tile ends up. */
.carousel{container-type:inline-size}
.car-count{
  display:none; position:absolute; left:50%; bottom:.5rem; z-index:3; transform:translateX(-50%);
  padding:.15rem .6rem; font-size:.6875rem; font-weight:700; letter-spacing:.08em; color:#fff;
  background:rgba(23,23,23,.5); border-radius:1rem; white-space:nowrap;
}
@container (max-width:340px){
  .car-dots{display:none}
  .car-count{display:block}
  .car-btn{width:2.25rem; height:2.25rem; margin-top:-1.125rem}
  .car-prev{left:.375rem}
  .car-next{right:.375rem}
}

/* ── statement band ─────────────────────────────────────── */
.statement{text-align:center; display:grid; gap:1.75rem; justify-items:center}
.statement .hd{max-width:24ch}
.statement p{max-width:56ch}

/* why choose us — icon badges. The icons are cut from the client's graphic;
   converted to transparent PNGs in the site ink colour so they sit on any background. */
.why-grid,.why-badges{list-style:none; margin:0; padding:0; width:100%}
.why-grid{
  margin-top:clamp(1.5rem,3vw,2.5rem);
  display:grid; gap:2.5rem 1.5rem; grid-template-columns:repeat(2,1fr);
}
@media(min-width:640px){.why-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.why-grid{grid-template-columns:repeat(5,1fr)}}
.why-grid li,.why-badges li{display:grid; justify-items:center; align-content:start; gap:.6rem; text-align:center}
.why-ic{width:5.5rem; height:5.5rem}
.why-grid b,.why-badges b{
  font-family:var(--ui); font-weight:500; font-size:1.0625rem; line-height:1.25; letter-spacing:-.01em;
}
.why-grid li > span{color:var(--dim); font-size:.875rem; line-height:1.55; max-width:26ch}
.why-badges{
  display:flex; flex-wrap:wrap; justify-content:center; gap:2.5rem 4.5rem;
  margin-top:clamp(2rem,4vw,3rem); padding-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--line);
}
.why-badges li{max-width:11rem}

/* ── three cards ────────────────────────────────────────── */
.cards{display:grid; gap:clamp(1rem,2vw,1.75rem); grid-template-columns:1fr; margin-top:clamp(1.5rem,3vw,2.5rem)}
@media(min-width:820px){.cards{grid-template-columns:repeat(3,1fr)}}
/* rows: media / heading / copy (flexes) / link — so the links stay on a
   common baseline even when one card's copy runs longer */
.card{display:grid; gap:1.25rem; text-decoration:none; grid-template-rows:auto auto 1fr auto}
.card .media{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--paper-3)}
.card .media img,.card .media .ph{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.card p{color:var(--dim); font-size:.9375rem; margin:0}
.card .lnk{justify-self:start; margin-top:.25rem}

/* ── brand logo marquee ─────────────────────────────────────
   Real client-supplied logos, auto-scrolling. Decorative: the same
   brand names are already accessible text in .brands below, so the
   whole thing is aria-hidden and the track is one element holding
   the 12 logos twice back-to-back — translateX(-50%) then lands
   exactly back on the start of the first copy, so the loop is
   seamless with no snap at the seam. */
.logo-marquee{
  margin-top:clamp(2rem,4vw,3rem); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.logo-track{
  display:flex; align-items:center; width:max-content;
  gap:clamp(2.5rem,5vw,4rem);
  animation:logo-scroll 36s linear infinite;
}
.logo-marquee:hover .logo-track{animation-play-state:paused}
/* The strip sits in its own slim ruled band just above Explore the ranges, on plain
   white so the logos' own white backgrounds disappear into it. */
.logo-band{padding-block:clamp(1.5rem,3vw,2.25rem); background:var(--paper); border-block:1px solid var(--line)}
.logo-band .logo-marquee{margin-top:0}
.logo-tile{flex:0 0 auto; height:3rem; display:flex; align-items:center}
.logo-tile img{height:100%; width:auto; max-width:9rem; object-fit:contain; display:block}
@keyframes logo-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Reduced motion: stop the scroll and show the 13 logos once, wrapped
   into a static row rather than a cropped, half-hidden strip. */
@media(prefers-reduced-motion:reduce){
  .logo-marquee{overflow:visible; -webkit-mask-image:none; mask-image:none}
  .logo-track{
    animation:none; flex-wrap:wrap; justify-content:center;
    width:100%; row-gap:1.5rem;
  }
  .logo-track .logo-tile:nth-child(n+14){display:none}
}

/* ── brand list ─────────────────────────────────────────── */
.brands{display:grid; gap:2.5rem; grid-template-columns:1fr; margin-top:clamp(1.5rem,3vw,2.5rem)}
@media(min-width:760px){.brands{grid-template-columns:repeat(3,1fr)}}
.brands h3{font-family:var(--ui); font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin:0 0 1.1rem; padding-bottom:.85rem; border-bottom:1px solid var(--line)}
.brands ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.brands li{color:var(--dim); font-size:.9375rem}

/* ── chapters ───────────────────────────────────────────── */
.chapter{display:grid; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; grid-template-columns:1fr; padding-block:clamp(2rem,4vw,3.5rem); border-top:1px solid var(--line)}
@media(min-width:900px){
  .chapter{grid-template-columns:1fr 1fr}
  /* Targets the .media element by class, not :first-child — the markup
     lists .body before .media for every flip chapter, so an order:2 on
     ":first-child" was landing on .body and cancelling itself out. Every
     chapter rendered media-left regardless of this class. Verified: before
     this fix all 5 chapters had media at the same x position. */
  .chapter--flip .media{order:2}
}
.chapter .media{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-3)}
.chapter .media img,.chapter .media .ph{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* A chapter photo that is a carousel (01 The showroom): slides sit in a row
   inside the track, so undo the absolute positioning above for them. */
.chapter .media.carousel .car-track img{position:static; flex:0 0 100%}
/* 01 The showroom: the display photos are portrait with the brand sign at the
   top, so this box is portrait (3:4) like 02 The craft, capped so it stays a
   sensible height on big screens. */
.chapter .media.showroom-gallery{aspect-ratio:3/4; max-height:700px}
/* Long sliders: too many dots to fit, so always show the "n / total" counter. */
.carousel--count .car-dots{display:none}
.carousel--count .car-count{display:block}

/* internal review clip — portrait screen recording (792×1314). Its own
   aspect-ratio close to the source (3/5), not the chapter's landscape
   4/3, so it fills the box instead of floating as a thin strip inside
   wide letterbox bars; contain (not cover) keeps the whole recording
   visible since nothing here should be cropped away, and max-height
   stops it running too tall on very large screens. */
.chapter .media--review{background:#111; aspect-ratio:3/5; max-height:640px}
.chapter .media--review video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
}
/* ── 03 The craft: drag-to-reveal, screeded | drying | finished ──
   Three stacked stills; the two upper ones are clipped from the left edge to
   their handle, so left to right reads in time order. --e1 / --e2 are the
   handle centres in px (site.js sets them); the defaults are 20% / 45%, so with
   no JS it is a static three-part picture and the sliders are hidden. */
.chapter .media.craft-compare{
  --e1:20%; --e2:45%; --t:44px;
  aspect-ratio:3/4; max-height:700px; background:#171717; touch-action:pan-y; user-select:none;
}
.craft-compare img{object-position:50% 42%}
.cmp-layer{position:absolute; inset:0}
.cmp-b{clip-path:inset(0 calc(100% - var(--e2)) 0 0)}
.cmp-a{clip-path:inset(0 calc(100% - var(--e1)) 0 0)}
.cmp-tag{
  position:absolute; top:.9rem; left:.9rem; z-index:2; pointer-events:none;
  font-family:var(--ui); font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:rgba(23,23,23,.6); padding:.4rem .65rem;
}
.cmp-tag--b{left:calc(var(--e1) + .9rem)}
.cmp-tag--c{left:auto; right:.9rem}
.cmp-line{position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 0 1px rgba(23,23,23,.25); pointer-events:none; display:none}
.cmp-line--1{left:var(--e1)}
.cmp-line--2{left:var(--e2)}
.cmp-range{
  display:none; position:absolute; inset:0; width:100%; height:100%; margin:0; z-index:3;
  -webkit-appearance:none; appearance:none; background:transparent; pointer-events:none; cursor:ew-resize;
}
.js .cmp-range,.js .cmp-line{display:block}
.cmp-range::-webkit-slider-runnable-track{background:transparent; height:100%}
.cmp-range::-moz-range-track{background:transparent; height:100%}
.cmp-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; pointer-events:auto; cursor:ew-resize;
  width:var(--t); height:var(--t); border-radius:50%; border:2px solid #fff; margin-top:calc(50% - 22px);
  background:rgba(23,23,23,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5'/%3E%3C/svg%3E") center/22px no-repeat;
}
.cmp-range::-moz-range-thumb{
  pointer-events:auto; cursor:ew-resize; box-sizing:border-box;
  width:var(--t); height:var(--t); border-radius:50%; border:2px solid #fff;
  background:rgba(23,23,23,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5'/%3E%3C/svg%3E") center/22px no-repeat;
}
.cmp-range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--copper); outline-offset:3px}
.cmp-range:focus-visible::-moz-range-thumb{outline:2px solid var(--copper); outline-offset:3px}
.review-badge{
  position:absolute; top:.75rem; left:.75rem; z-index:2;
  font-family:var(--ui); font-size:.625rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:rgba(0,0,0,.55); padding:.4rem .6rem; pointer-events:none;
}
.chapter .num{font-family:var(--dp); font-size:1.5rem; color:var(--copper); display:block; margin-bottom:.6rem}
.chapter .body{max-width:46ch}

/* ── reviews ────────────────────────────────────────────── */
.reviews{display:grid; gap:clamp(1rem,1.6vw,1.25rem); grid-template-columns:1fr; margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:700px){.reviews{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.reviews{grid-template-columns:repeat(4,1fr)}}
.review{
  border:1px solid var(--line); padding:clamp(1.5rem,2.2vw,2rem);
  display:grid; grid-template-rows:auto 1fr auto auto; gap:1.1rem;
}
.review .stars{letter-spacing:.32em; font-size:.8125rem; line-height:1; color:var(--ink)}
.review blockquote{
  margin:0; font-family:var(--dp); font-weight:400;
  font-size:clamp(1rem,1.15vw,1.125rem); line-height:1.5;
}
.review .who{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.75rem; letter-spacing:.02em; color:var(--dim);
}
.review .job{
  border-top:1px solid var(--line); padding-top:1.1rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.75rem; color:var(--ink-soft); line-height:1.5;
}

/* ── showroom ───────────────────────────────────────────── */
.two{display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1fr}
@media(min-width:900px){.two{grid-template-columns:1fr 1fr}}
.info dl{display:grid; gap:1.5rem; margin:0}
.info dt{font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:.4rem}
.info dd{margin:0; font-size:1.0625rem; line-height:1.55}
.map-embed{display:block; margin-top:2rem; border:1px solid var(--line)}
.map-gate{
  height:260px; display:grid; place-content:center; justify-items:center; gap:.9rem;
  padding:1.25rem; text-align:center; background:var(--paper-2);
}
.map-gate-addr{margin:0; font-weight:700; font-size:.9375rem}
.map-gate-note{margin:0; font-size:.75rem; color:var(--dim)}
/* Chat button: stands in for the Tawk bubble until someone wants to chat. Same
   corner and offsets the Tawk widget used (lifted on phones clear of the footer). */
.chat-launch{
  position:fixed; right:16px; bottom:16px; z-index:80;
  width:60px; height:60px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; background:#CE6A2E; color:#fff;
  box-shadow:0 6px 18px rgba(23,23,23,.22);
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.chat-launch:hover,.chat-launch:focus-visible{background:#B4702F; transform:scale(1.05)}
.chat-launch svg{width:26px; height:26px; fill:currentColor}
.chat-launch[aria-busy="true"]{opacity:.7; cursor:progress}
.chat-launch[hidden]{display:none}
@media(max-width:640px){.chat-launch{right:12px; bottom:90px}}
.areas{display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; margin:1.5rem 0 0; padding:0; list-style:none}
.areas li{font-size:.6875rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--dim)}

/* ── form ───────────────────────────────────────────────── */
.form{display:grid; gap:1.5rem}
.field{display:grid; gap:.45rem}
.field label{font-size:.625rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.field input,.field textarea,.field select{
  font-family:var(--ui); font-size:.9375rem; color:var(--ink);
  background:var(--paper); border:1px solid #8C857E;   /* 3.3:1+ against white and the band (WCAG 1.4.11) */
  padding:.85rem .95rem; width:100%; border-radius:0;
  transition:border-color .3s var(--ease);
}
.field textarea{resize:vertical; min-height:6rem}
.field :is(input,textarea,select):focus{outline:0; border-color:var(--ink)}
.field-row{display:grid; gap:1.5rem; grid-template-columns:1fr}
@media(min-width:640px){.field-row{grid-template-columns:1fr 1fr}}
.form-note{font-size:.75rem; color:var(--dim)}
.botcheck{display:none}
.form-status{margin:0; font-size:.9375rem; line-height:1.5}
.form-status:empty{display:none}
.form-status[data-state="ok"]{color:var(--ink); font-weight:700}
.form-status[data-state="error"]{color:#a33a1e}

.perks{list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:1.25rem}
.perks li{display:grid; gap:.2rem}
.perks b{font-size:.9375rem; font-weight:700}
.perks span{font-size:.875rem; color:var(--dim)}

/* ── footer ─────────────────────────────────────────────── */
.ftr{border-top:1px solid var(--line); padding-block:clamp(2.5rem,5vw,4rem) 2rem}
.ftr-grid{display:grid; gap:2.5rem; grid-template-columns:1fr}
@media(min-width:820px){.ftr-grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}}
.ftr h4{font-size:.625rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin:0 0 1.1rem; color:var(--dim)}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.ftr a{text-decoration:none; color:var(--ink-soft); font-size:.875rem; transition:opacity .3s var(--ease)}
.ftr a:hover{opacity:.55}
.ftr li{font-size:.875rem; color:var(--ink-soft)}
.social{display:flex; gap:.6rem; margin-top:1.5rem}
.social a{
  width:2.375rem; height:2.375rem; display:grid; place-items:center;
  border:1px solid var(--line-dk); color:var(--ink);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.social svg{width:.9375rem; height:.9375rem; fill:currentColor; display:block}
.social a:hover,.social a:focus-visible{background:var(--ink); color:var(--paper); border-color:var(--ink)}

.ftr-base{
  margin-top:clamp(2rem,4vw,3rem); padding-top:1.25rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.75rem; justify-content:space-between;
  font-size:.75rem; color:var(--dim);
  padding-right:84px;   /* keep the company-details line clear of the fixed chat button */
}

/* ── mobile menu ────────────────────────────────────────── */
.menu-btn{display:none}
.mnav{display:none}
@media(max-width:1060px){
  .menu-btn{
    display:inline-flex; align-items:center; gap:.5rem;
    font-family:var(--ui); font-size:.6875rem; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase;
    background:none; border:0; color:var(--ink); cursor:pointer; padding:.5rem 0;
  }
  .menu-btn i{width:18px; height:1px; background:currentColor; display:block; position:relative; transition:background .3s var(--ease)}
  .menu-btn i::before,.menu-btn i::after{
    content:""; position:absolute; left:0; width:18px; height:1px; background:currentColor;
    transition:transform .4s var(--ease);
  }
  .menu-btn i::before{transform:translateY(-5px)}
  .menu-btn i::after{transform:translateY(5px)}
  .menu-btn[aria-expanded="true"] i{background:transparent}
  .menu-btn[aria-expanded="true"] i::before{transform:rotate(45deg)}
  .menu-btn[aria-expanded="true"] i::after{transform:rotate(-45deg)}

  .mnav{
    display:grid; align-content:start; gap:0;
    position:fixed; inset:0; z-index:55; background:var(--paper);
    padding:5.5rem var(--gutter) var(--gutter); overflow-y:auto;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
  }
  .mnav[data-open="true"]{opacity:1; visibility:visible; transform:none}
  .mnav a{
    font-family:var(--ui); font-weight:700; font-size:1.125rem;
    letter-spacing:.02em; text-transform:uppercase; text-decoration:none;
    border-bottom:1px solid var(--line); padding-block:1.05rem;
  }
  .mnav a:last-child{color:var(--copper)}
}

/* ── reveal (gated on JS so it degrades) ────────────────── */
.js .rv{opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.js .rv[data-in="true"]{opacity:1; transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  .js .rv{opacity:1; transform:none}
  .ticker div{animation:none}
}

/* ── privacy policy text ───────────────────────────────── */
.prose{max-width:68ch}
.prose h2{font-family:var(--ui); font-size:1.25rem; font-weight:700; margin:2.75rem 0 .75rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--ui); font-size:1rem; font-weight:700; margin:1.5rem 0 .4rem}
.prose p,.prose li{color:var(--ink-soft); line-height:1.7}
.prose p{margin:0 0 1rem}
.prose ul{margin:0 0 1rem; padding-left:1.25rem}
.prose li{margin:.35rem 0}
.prose a{color:var(--ink)}
.prose mark{background:#FCE7B8; color:var(--ink); padding:0 .2em}