/* ==========================================================================
   Sideline Audio — "The Boot Build"
   --------------------------------------------------------------------------
   The page is a workshop job card: numbered stages on one rule, mono line
   items, real photographs. base.css owns the reset, shell, header/nav
   mechanics, buttons, footer skeleton, reveals, preloader and the hero
   headline contract. This file supplies the palette, the type and the page.
   ========================================================================== */

:root{
  /* ---------- the palette, straight from the brief ---------- */
  --night:      #0b0b0c;   /* their logo ground */
  --coal:       #17181a;   /* panels, the bay */
  --bone:       #f1ece3;   /* the job card */
  --bone-2:     #e6dfd3;
  --orange:     #f56e28;   /* their own link orange */
  --orange-ink: #b8470f;   /* orange that passes contrast on paper */
  --steel:      #7d8085;
  --white:      #ffffff;

  /* ---------- base.css contract ---------- */
  --ink:        var(--night);
  --ink-2:      #101012;
  --ink-3:      var(--coal);
  --surface:    var(--bone);
  --surface-2:  var(--bone-2);
  --text:       #f6f3ee;
  --muted:      #9a9da2;
  --ink-text:   #141416;
  --ink-mute:   #5d6064;
  --accent:     var(--orange);
  --accent-lit: #ff8b52;
  --accent-2:   var(--orange);
  --line:       rgba(255,255,255,.13);
  --line-d:     rgba(11,11,12,.16);

  /* ---------- type: workshop signage, plain body, job-card mono ---------- */
  --font-display: "Fjalla One", "Arial Narrow", Impact, sans-serif;
  --font-body:    "Reddit Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "Lekton", ui-monospace, "SFMono-Regular", monospace;

  --wrap-max: 1240px;
  --pad:      clamp(1.15rem, 4vw, 2.6rem);
  --radius:   0;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

html{ scroll-padding-top:96px; }
body{
  background:var(--night);
  color:var(--text);
  font-size:17px;
  line-height:1.66;
}
::selection{ background:var(--orange); color:var(--night); }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

/* print texture — the page is a document, not a screen */
body::after{
  content:""; position:fixed; inset:0; z-index:940; pointer-events:none; opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.skip{
  position:absolute; left:.6rem; top:.6rem; z-index:10000;
  width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  padding:.8rem 1.1rem; background:var(--bone); color:var(--ink-text);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
}
.skip:focus{ width:auto; height:auto; clip-path:none; }

/* ---------- shared document furniture ---------- */
.field{
  display:flex; align-items:center; gap:1rem;
  font-family:var(--font-mono); font-size:.62rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--orange-ink); margin-bottom:1.2rem;
}
.field::after{ content:""; flex:1 1 auto; min-width:1.5rem; height:1px; background:currentColor; opacity:.3; }
.sect--dark-2 .field, .bay .field, .gal .field, .ws .field{ color:var(--orange); }

.sect__h2{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.9rem, 4.6vw, 3.2rem);
  line-height:.95; letter-spacing:.005em; text-transform:uppercase;
}
.sect__lead{ font-size:.97rem; line-height:1.66; max-width:42ch; }
.sect--light .sect__lead, .sect--light-2 .sect__lead{ color:var(--ink-mute); }

.btn{
  border-radius:0; font-family:var(--font-mono); font-size:.7rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.92rem 1.2rem; border-width:1px;
}
.btn--solid{ background:var(--orange); color:var(--night); border:1px solid var(--orange); }
.btn--solid:hover{ transform:none; background:transparent; color:var(--orange); }
.btn--outline{ border-color:rgba(255,255,255,.28); }
.btn--outline:hover{ background:var(--bone); color:var(--night); border-color:var(--bone); }
.btn--ghost{ border:1px solid rgba(255,255,255,.3); color:var(--bone); }
.btn--ghost:hover{ border-color:var(--orange); color:var(--orange); }

/* ---------- the signal path motif (hero, stage 04, footer) ---------- */
.sig{ display:block; width:100%; height:auto; color:var(--steel); overflow:visible; }
.sig rect, .sig circle{ fill:none; stroke:currentColor; stroke-width:1.15; vector-effect:non-scaling-stroke; }
.sig path{ fill:none; stroke:currentColor; stroke-width:1.15; vector-effect:non-scaling-stroke; }
.sig .sig__dot{ fill:var(--orange); stroke:none; }

@keyframes sigdraw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
.sig--live [pathLength]{
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:sigdraw 1.4s var(--ease) .85s forwards;
}

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.pre{ background:var(--night); }
.pre__mark{ width:clamp(150px, 24vw, 210px); }
.pre__mark .sig{ color:var(--steel); }
.pre__meta{ color:var(--steel); font-size:.66rem; letter-spacing:.22em; }
.pre__pct{ color:var(--orange); }
.pre__bar{ background:rgba(255,255,255,.14); }
.pre__bar i{ background:var(--orange); }

/* ==========================================================================
   HEADER — mono utility strip, then logo · nav · book
   ========================================================================== */
.hdr{ background:var(--night); border-bottom:1px solid var(--line); }
.hdr__strip{ border-bottom:1px solid rgba(255,255,255,.08); }
.hdr__strip-in{
  max-width:var(--wrap-max); margin-inline:auto; padding-inline:var(--pad);
  height:31px; display:flex; align-items:center; gap:1.6rem;
  font-family:var(--font-mono); font-size:.6rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--steel);
}
.hdr__tag{ color:var(--steel); }
.hdr__tel{ margin-left:auto; color:var(--bone); letter-spacing:.1em; }
.hdr__tel:hover{ color:var(--orange); }
.hdr__util{ display:flex; align-items:center; gap:1.1rem; }
.hdr__util a{ color:var(--steel); transition:color .18s; }
.hdr__util a:hover{ color:var(--bone); }
.hdr__util a + a{ position:relative; }
.hdr__util a + a::before{
  content:""; position:absolute; left:-.58rem; top:50%; width:1px; height:9px;
  background:rgba(255,255,255,.18); transform:translateY(-50%);
}

.hdr__in{ min-height:66px; gap:1.4rem; }
.brand img{ width:164px; height:auto; }
.nav__link{
  font-size:.83rem; font-weight:500; color:rgba(241,236,227,.82);
  padding:.55rem .62rem; border-radius:0;
}
.nav__link:hover{ color:var(--orange); background:rgba(255,255,255,.04); }
.nav__list{ gap:.05rem; }

.hdr__cta{
  display:inline-flex; align-items:center; flex-shrink:0;
  padding:.62rem .85rem; border:1px solid var(--orange); background:var(--orange);
  color:var(--night); font-family:var(--font-mono); font-size:.64rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  transition:background .2s, color .2s;
}
.hdr__cta:hover{ background:transparent; color:var(--orange); }
.nav__book, .nav__item--mob{ display:none; }
@media (min-width:1024px){
  .nav__foot{ display:none; }
}
@media (min-width:1024px) and (max-width:1180px){
  .nav__link{ font-size:.77rem; padding:.5rem .42rem; }
  .brand img{ width:142px; }
  .hdr__cta{ padding:.55rem .7rem; font-size:.6rem; }
}

/* ==========================================================================
   HERO — one object, full bleed, measured
   ========================================================================== */
.hero{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:min(calc(100svh - 98px), 920px); padding:0; overflow:hidden;
  background:var(--night); color:var(--bone);
  border-bottom:1px solid var(--line);
}
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 44%; }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,11,12,.52) 0%, rgba(11,11,12,.06) 27%, rgba(11,11,12,.58) 66%, rgba(11,11,12,.95) 100%),
    linear-gradient(90deg, rgba(11,11,12,.78) 0%, rgba(11,11,12,.36) 46%, rgba(11,11,12,0) 78%);
}

.hero__in{
  position:relative; z-index:2; width:100%;
  padding-block:clamp(2.4rem,7vw,5rem) clamp(1.4rem,3vw,2.2rem);
}
.hero__copy{ max-width:min(100%, 720px); }
.hero__kicker{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--font-mono); font-size:.62rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--orange);
  margin-bottom:1.15rem;
}
.hero__kicker::before{ content:""; width:30px; height:1px; background:var(--orange); }

.hero__h1{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:var(--h1-size, clamp(2.5rem, 12vw, 5.4rem));
  line-height:.9; letter-spacing:.01em;
}
@media (min-width:1024px){
  .hero__h1{ font-size:var(--h1-size, clamp(3.4rem, 8.2vw, 6.4rem)); }
}

.hero__lead{
  max-width:47ch; margin-top:1.5rem;
  font-size:clamp(.96rem, 1.35vw, 1.05rem); line-height:1.64;
  color:rgba(241,236,227,.8);
}
.hero__acts{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem; }
.hero__acts .btn{ padding:.95rem 1.15rem; }

.hero__sig{
  display:flex; align-items:center; gap:1rem; margin-top:2.1rem;
  color:rgba(241,236,227,.52);
}
.hero__sig .sig{ width:clamp(170px, 21vw, 250px); flex-shrink:0; }
.hero__sig span{
  font-family:var(--font-mono); font-size:.6rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(241,236,227,.52);
}

/* the measured depth: a real detail, labelled, no invented number */
.hero__measure{
  position:absolute; z-index:2; right:8%; top:24%; height:30%;
  display:flex; align-items:flex-start; gap:.55rem;
  pointer-events:none;
}
.hero__measure-line{
  position:relative; display:block; width:12px; height:100%;
  border-right:1px solid var(--orange);
}
.hero__measure-line::before, .hero__measure-line::after{
  content:""; position:absolute; right:-1px; width:11px; height:1px; background:var(--orange);
}
.hero__measure-line::before{ top:0; }
.hero__measure-line::after{ bottom:0; }
.hero__measure-lab{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--font-mono); font-size:.6rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--orange);
  padding-block:.3rem; text-shadow:0 1px 6px rgba(11,11,12,.9);
}

.hero__strip{
  position:relative; z-index:2; width:100%;
  border-top:1px solid rgba(241,236,227,.22);
  background:rgba(11,11,12,.78);
}
.hero__strip-in{
  max-width:var(--wrap-max); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
}
.hero__cell{
  padding:.85rem .9rem .85rem 1rem;
  border-left:1px solid rgba(241,236,227,.14);
  font-family:var(--font-mono); font-size:.61rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:rgba(241,236,227,.7);
  line-height:1.5;
}
.hero__cell--job{ border-left:0; padding-left:0; color:var(--orange); }

/* ==========================================================================
   SCOPE — six things, one bay
   ========================================================================== */
.svc{ background:var(--bone); color:var(--ink-text); }
.svc .sect__lead{ color:var(--ink-mute); }
.svc__list{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  column-gap:clamp(1.2rem, 3vw, 2.4rem);
}
.svc__item{ border-top:1px solid var(--line-d); }
.svc__item a{
  position:relative; display:block; padding:1.15rem 1.6rem 1.45rem 0;
  transition:color .2s;
}
.svc__t{
  display:block; margin:0 0 .5rem;
  font-family:var(--font-display); font-size:1.45rem; font-weight:400;
  line-height:1; letter-spacing:.01em; text-transform:uppercase;
}
.svc__d{ display:block; max-width:30ch; font-size:.85rem; line-height:1.5; color:var(--ink-mute); }
.svc__go{
  position:absolute; right:.2rem; top:1.55rem;
  font-family:var(--font-mono); font-size:.9rem; color:var(--steel);
  transition:transform .2s var(--ease), color .2s;
}
.svc__item a:hover .svc__t{ color:var(--orange-ink); }
.svc__item a:hover .svc__go{ transform:translate(3px,-3px); color:var(--orange-ink); }

/* ==========================================================================
   THE BAY — numbered stages on one rule
   ========================================================================== */
.bay{ background:var(--night); overflow:hidden; }
.bay .sect__lead{ color:rgba(241,236,227,.7); }

.bay__grid{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  column-gap:clamp(1.8rem, 4.5vw, 4rem); align-items:start;
}
.bay__tabs{ display:flex; flex-direction:column; border-left:1px solid rgba(241,236,227,.18); }
.bay__tab{
  position:relative; display:grid; grid-template-columns:2.2rem minmax(0,1fr) 12px;
  align-items:center; gap:.7rem; width:100%; text-align:left;
  padding:1.05rem 0 1.05rem 1.15rem;
  border-bottom:1px solid rgba(241,236,227,.1);
  color:rgba(241,236,227,.52);
  transition:color .2s, background .2s;
}
.bay__tab::before{
  content:""; position:absolute; left:-1px; top:0; bottom:0; width:2px;
  background:var(--orange); transform:scaleY(0); transform-origin:50% 0;
  transition:transform .28s var(--ease);
}
.bay__tab:hover{ color:rgba(241,236,227,.85); background:rgba(255,255,255,.02); }
.bay__tab[aria-selected="true"]{ color:var(--bone); }
.bay__tab[aria-selected="true"]::before{ transform:scaleY(1); }
.bay__n{ font-family:var(--font-mono); font-size:.7rem; font-weight:700; letter-spacing:.06em; color:var(--steel); }
.bay__tab[aria-selected="true"] .bay__n{ color:var(--orange); }
.bay__t{ font-family:var(--font-display); font-size:1.18rem; font-weight:400; line-height:1.02; text-transform:uppercase; letter-spacing:.01em; }
.bay__mark{ width:8px; height:8px; border:1px solid currentColor; transition:background .2s, border-color .2s; }
.bay__tab[aria-selected="true"] .bay__mark{ background:var(--orange); border-color:var(--orange); }

.bay__panel[hidden]{ display:none !important; }
.bay__panel{ animation:panelin .32s var(--ease) both; }
@keyframes panelin{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.bay__fig{ margin:0 0 1.15rem; }
.bay__fig img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  border:1px solid rgba(241,236,227,.1);
}
.bay__fig figcaption{
  margin-top:.55rem; font-family:var(--font-mono); font-size:.6rem; line-height:1.5;
  letter-spacing:.06em; color:var(--steel);
}
.bay__pair{ display:grid; grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr); gap:.7rem; align-items:start; margin-bottom:1.15rem; }
.bay__pair .bay__fig{ margin-bottom:0; }
.bay__pair .bay__fig img{
  aspect-ratio:auto; height:clamp(210px, 25vw, 330px); object-fit:cover;
}
.bay__p{ font-size:.96rem; line-height:1.68; color:rgba(241,236,227,.78); max-width:52ch; }
.bay__p + .bay__p{ margin-top:1rem; }

.bay__sig{
  display:flex; align-items:center; gap:1rem; margin-top:1.5rem;
  padding-top:1.1rem; border-top:1px solid rgba(241,236,227,.12);
}
.bay__sig .sig{ width:clamp(150px, 26vw, 230px); flex-shrink:0; }
.bay__sig span{
  font-family:var(--font-mono); font-size:.57rem; font-weight:700; line-height:1.6;
  letter-spacing:.13em; text-transform:uppercase; color:var(--steel);
}

.bay__checks{ margin-top:2rem; border-top:1px solid rgba(241,236,227,.12); }
.bay__checks li{
  display:flex; align-items:baseline; gap:1rem;
  padding:.8rem 0; border-bottom:1px solid rgba(241,236,227,.09);
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em;
  color:rgba(241,236,227,.76);
}
.bay__checks li span{ font-size:.6rem; font-weight:700; letter-spacing:.14em; color:var(--steel); }

/* ==========================================================================
   QUOTE — line items
   ========================================================================== */
.cost{ background:var(--bone); color:var(--ink-text); }
.cost .sect__lead{ color:var(--ink-mute); }
.quote{ width:100%; border-collapse:collapse; margin-top:clamp(1.6rem, 3vw, 2.4rem); }
.quote thead th{
  padding:.55rem .5rem .75rem 0; border-bottom:1px solid var(--ink-text);
  font-family:var(--font-mono); font-size:.58rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); text-align:left;
}
.quote thead th:last-child{ text-align:right; }
.quote tbody td, .quote tbody th{
  padding:1.05rem .5rem 1.05rem 0; border-bottom:1px solid var(--line-d);
  text-align:left; vertical-align:baseline; font-weight:400;
}
.quote tbody th{ font-size:1.04rem; font-weight:500; color:var(--ink-text); }
.quote tbody td:last-child{
  text-align:right; white-space:nowrap;
  font-family:var(--font-mono); font-size:1.12rem; color:var(--ink-text);
}
.quote tbody tr:hover td, .quote tbody tr:hover th{ background:rgba(11,11,12,.035); }

.quote__note{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.2rem;
  margin-top:1.5rem; font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.03em; color:var(--ink-mute);
}
.quote__note a{ color:var(--orange-ink); border-bottom:1px solid rgba(184,71,15,.35); }
.quote__note a:hover{ border-bottom-color:var(--orange-ink); }

/* ==========================================================================
   BUILDS — three plates
   ========================================================================== */
.gal{ background:var(--night); }
.gal .sect__lead{ color:rgba(241,236,227,.7); }
.gal__grid{
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1.06fr) minmax(0,.78fr);
  gap:clamp(.9rem, 2vw, 1.6rem); align-items:start;
}
.gal__fig{ margin:0; }
.gal__fig img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  border:1px solid rgba(241,236,227,.1);
}
.gal__fig--tall{ grid-column:3; grid-row:1 / span 2; }
.gal__fig--tall img{ aspect-ratio:4/5; object-position:50% 44%; }
.gal__fig figcaption{
  margin-top:.7rem; font-size:.82rem; line-height:1.55; color:rgba(241,236,227,.68);
}
.gal__fig figcaption span{
  display:inline-block; margin-right:.5rem;
  font-family:var(--font-mono); font-size:.58rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--orange);
}
.gal__note{
  grid-column:1 / 3; margin-top:.4rem; padding-top:1.4rem;
  border-top:1px solid rgba(241,236,227,.14);
}
.gal__note p{ max-width:52ch; font-size:.92rem; line-height:1.62; color:rgba(241,236,227,.7); }
.gal__note a{
  display:inline-block; margin-top:.9rem;
  font-family:var(--font-mono); font-size:.66rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--orange); border-bottom:1px solid rgba(245,110,40,.4);
  padding-bottom:.2rem;
}
.gal__note a:hover{ border-bottom-color:var(--orange); }

/* ==========================================================================
   SHELF — the shop
   ========================================================================== */
.shop{ background:var(--bone-2); color:var(--ink-text); }
.shop .sect__lead{ color:var(--ink-mute); }
.shop__strip{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(1rem, 2.4vw, 2rem);
}
.shop__strip li{ border-top:1px solid var(--ink-text); }
.shop__strip a{
  position:relative; display:block; padding:1.2rem 1.6rem 1.4rem 0;
  transition:color .2s;
}
.shop__brand{
  display:block; font-family:var(--font-mono); font-size:.58rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--steel);
}
.shop__t{
  display:block; margin-top:.5rem;
  font-family:var(--font-display); font-size:1.7rem; line-height:1; text-transform:uppercase;
}
.shop__go{
  position:absolute; right:.2rem; top:1.1rem;
  font-family:var(--font-mono); font-size:.9rem; color:var(--steel);
  transition:transform .2s var(--ease), color .2s;
}
.shop__strip a:hover .shop__t{ color:var(--orange-ink); }
.shop__strip a:hover .shop__go{ transform:translate(3px,-3px); color:var(--orange-ink); }
.shop__note{
  margin-top:2rem; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.04em;
  color:var(--ink-mute);
}
.shop__note a{ color:var(--orange-ink); border-bottom:1px solid rgba(184,71,15,.35); }

/* ==========================================================================
   WORKSHOP
   ========================================================================== */
.ws{ background:var(--coal); border-top:1px solid var(--line); }
.ws__grid{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(1.8rem, 4.5vw, 4rem); align-items:start;
}
.ws .sect__lead{ color:rgba(241,236,227,.7); }
.ws__facts{ margin-top:2rem; border-top:1px solid var(--line); }
.ws__facts > div{
  display:grid; grid-template-columns:7.4rem minmax(0,1fr); gap:1rem;
  padding:.9rem 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.ws__facts dt{
  font-family:var(--font-mono); font-size:.58rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--steel);
}
.ws__facts dd{ font-size:.94rem; line-height:1.55; color:rgba(241,236,227,.82); }
.ws__facts a:hover{ color:var(--orange); }
.ws__tel{ font-family:var(--font-display); font-size:clamp(1.7rem, 3.4vw, 2.2rem); line-height:1; letter-spacing:.01em; }
.ws__facts dd.ws__tel{ font-family:var(--font-display); font-size:clamp(1.7rem, 3.4vw, 2.2rem); line-height:1; }
.ws__tel a{ color:var(--bone); }
.ws__map{ margin-top:1.8rem; }
.ws__fig{ margin:0; }
.ws__fig img{ width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--line); }
.ws__fig figcaption{
  margin-top:.65rem; font-family:var(--font-mono); font-size:.6rem;
  letter-spacing:.06em; color:var(--steel);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ border-top:1px solid var(--line); }
.foot__brand img{ width:180px; height:auto; margin-bottom:1.15rem; }
.foot__blurb{ max-width:36ch; font-size:.85rem; line-height:1.62; color:rgba(241,236,227,.6); }
.foot__sig{
  display:flex; align-items:center; gap:.85rem; margin-top:1.6rem; color:var(--steel);
}
.foot__sig .sig{ width:180px; flex-shrink:0; }
.foot__sig span{
  font-family:var(--font-mono); font-size:.55rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
}
.foot__h{ color:var(--orange); opacity:.9; }
.foot__nav a:hover{ color:var(--orange); }
.foot__bottom{ color:rgba(241,236,227,.55); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1023px){
  .hdr__util{ display:none; }
  .hdr__in{ min-height:62px; gap:1rem; }
  .brand img{ width:150px; }
  .hdr__cta{ display:none; }
  .nav__item--mob{ display:block; }
  .nav__item--mob .nav__link{ color:var(--steel); font-size:.92rem; font-weight:500; }
  .nav__book{
    display:block; margin-bottom:.5rem; padding:.95rem 1rem;
    background:var(--orange); color:var(--night);
    font-family:var(--font-mono); font-size:.66rem; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase; text-align:center;
  }
  .nav__foot a:not(.nav__book){ font-family:var(--font-mono); font-size:.72rem; }
  .nav__foot span{ line-height:1.5; }

  .hero{ min-height:min(calc(100svh - 94px), 820px); }
  .hero__media img{ object-position:74% 46%; }
  .hero__scrim{
    background:
      linear-gradient(180deg, rgba(11,11,12,.5) 0%, rgba(11,11,12,.05) 24%, rgba(11,11,12,.55) 62%, rgba(11,11,12,.96) 100%),
      linear-gradient(90deg, rgba(11,11,12,.88) 0%, rgba(11,11,12,.62) 46%, rgba(11,11,12,.12) 82%, rgba(11,11,12,0) 100%);
  }
  .hero__measure{ display:none; }
  .hero__in{ padding-block:clamp(2rem,8vw,3.4rem) 1.4rem; }

  .svc__list{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bay__grid{ display:flex; flex-direction:column; }
  .bay__tabs{ display:contents; }
  .bay__panels{ display:contents; }
  .bay__tab{
    border-left:0; border-top:1px solid rgba(241,236,227,.16);
    padding:1rem .2rem;
  }
  .bay__tab::before{ left:0; top:auto; bottom:0; width:100%; height:2px; transform:scaleX(0); transform-origin:0 50%; }
  .bay__tab[aria-selected="true"]::before{ transform:scaleX(1); }
  .bay__tab:nth-child(1){ order:1; } .bay__panel:nth-child(1){ order:2; }
  .bay__tab:nth-child(2){ order:3; } .bay__panel:nth-child(2){ order:4; }
  .bay__tab:nth-child(3){ order:5; } .bay__panel:nth-child(3){ order:6; }
  .bay__tab:nth-child(4){ order:7; } .bay__panel:nth-child(4){ order:8; }
  .bay__tab:nth-child(5){ order:9; } .bay__panel:nth-child(5){ order:10; }
  .bay__tab:nth-child(6){ order:11; } .bay__panel:nth-child(6){ order:12; }
  .bay__panel{ padding:1.3rem .2rem 1.8rem; border-bottom:1px solid rgba(241,236,227,.1); }
  .bay__fig img{ aspect-ratio:16/9; }

  .gal__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .gal__fig--tall{ grid-column:1 / -1; grid-row:auto; }
  .gal__fig--tall img{ aspect-ratio:4/5; object-position:50% 44%; }
  .gal__note{ grid-column:1 / -1; }

  .shop__strip{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.2rem 2rem; }
  .ws__grid{ grid-template-columns:minmax(0,1fr); }
  .ws__fig{ order:-1; max-width:520px; }
}

@media (max-width:720px){
  body{ font-size:16.5px; }
  .hdr__tag{ display:none; }
  .hdr__strip-in{ justify-content:space-between; }
  .hdr__tel{ margin-left:0; }
  .sect__h2{ font-size:clamp(1.75rem, 8.4vw, 2.6rem); }
  .sect__head{ margin-bottom:1.8rem; }
  .hero__sig{ margin-top:1.6rem; }
  .hero__cell{ font-size:.56rem; padding:.7rem .5rem .7rem .7rem; letter-spacing:.1em; }
  .svc__t{ font-size:1.3rem; }
  .quote tbody th{ font-size:.95rem; }
  .quote tbody td, .quote tbody th{ padding:.85rem .35rem .85rem 0; }
  .quote tbody td:last-child{ font-size:1rem; }
  .bay__pair{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .gal__fig figcaption{ font-size:.78rem; }
  .ws__facts > div{ grid-template-columns:minmax(0,1fr); gap:.2rem; }
  .foot__sig{ margin-top:1.3rem; }
  .foot__nav{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .foot__nav > div:last-child{ grid-column:1 / -1; }
}

@media (max-width:420px){
  .svc__list{ grid-template-columns:minmax(0,1fr); }
  .svc__item a{ padding-bottom:1.2rem; }
  .shop__strip{ grid-template-columns:minmax(0,1fr); }
  .hero__acts .btn{ width:100%; justify-content:center; }
  .hero__sig span{ display:none; }
  .hero__cell:nth-child(3), .hero__cell:nth-child(4){ border-top:1px solid rgba(241,236,227,.14); }
  .hero__cell:nth-child(3){ border-left:0; padding-left:0; }
}

@media (prefers-reduced-motion: reduce){
  .sig--live [pathLength]{ animation:none; stroke-dashoffset:0; }
  .bay__panel{ animation:none; }
}