/* =========================================================================
   Aftermath Cleanup & Hauling (ACH Services)
   One stylesheet, hand written, no framework.
   Light document, dark hero and footer -- the logo is a black truck on
   transparent, so the header has to be light or the mark disappears.
   ========================================================================= */

:root{
  /* Ink scale */
  --ink:#0B0E12;
  --graphite:#141A21;
  --steel:#1E262F;
  --steel-2:#28323D;
  --line-d:#2C3742;

  /* Paper scale */
  --paper:#FFFFFF;
  --paper-2:#F5F7F9;
  --paper-3:#EAEEF2;
  --line:#DFE4E9;

  /* Text */
  --text:#151B22;
  --text-2:#59646F;
  --text-3:#7C8792;
  --inv:#EDF1F5;
  --inv-2:#9BA7B3;

  /* Brand: the red off the ACH mark */
  --red:#C8102E;
  --red-2:#E01F3D;
  --red-ink:#8E0B20;

  --wrap:1290px;
  --gut:clamp(20px,5vw,48px);
  --sect:clamp(64px,9vw,118px);
  --r:3px;

  --f-disp:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --shadow:0 1px 2px rgba(11,14,18,.05),0 8px 24px -12px rgba(11,14,18,.14);
  --shadow-lg:0 2px 4px rgba(11,14,18,.06),0 24px 56px -20px rgba(11,14,18,.26);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--f-body);font-size:17px;line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--f-disp);font-weight:700;line-height:1.06;letter-spacing:-.022em;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0}

:focus-visible{outline:3px solid var(--red-2);outline-offset:2px;border-radius:2px}

/* THE GUTTER. Anything that also carries .wrap must set padding-top /
   padding-bottom, never the `padding` shorthand -- the shorthand resets the
   inline sides to 0 and the text then runs flush to the edge of the screen on
   every viewport narrower than --wrap. That bug shipped once. */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;padding:12px 18px;z-index:200;font-weight:600}
.skip:focus{left:8px;top:8px}

/* ---------- Type helpers ---------- */
.eyebrow{
  font-family:var(--f-body);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--red);flex:none}
.eyebrow--inv{color:#FF8A9B}
.eyebrow--inv::before{background:var(--red-2)}
.eyebrow--center{justify-content:center}

.h-xl{font-size:clamp(2.45rem,5.6vw,4.5rem)}
.h-lg{font-size:clamp(2rem,3.9vw,3.15rem)}
.h-md{font-size:clamp(1.5rem,2.3vw,2rem)}
.h-sm{font-size:clamp(1.18rem,1.6vw,1.4rem)}
.lede{font-size:clamp(1.06rem,1.35vw,1.22rem);line-height:1.62;color:var(--text-2)}
.lede--inv{color:var(--inv-2)}
.measure{max-width:64ch}
.measure-s{max-width:52ch}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-body);font-weight:600;font-size:15px;letter-spacing:.01em;
  padding:15px 26px;border:1.5px solid transparent;border-radius:var(--r);
  cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .18s;
  text-align:center;
  /* A button that wraps "See the work" onto three lines reads as broken.
     Labels here are short by design, so never break them. */
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
/* An inline SVG with no intrinsic size stretches to fill its flex line, which
   turns the phone icon on the hero CTA into a glyph the size of the button. */
.btn svg{width:17px;height:17px;flex:none}
.btn--red{background:var(--red);color:#fff;border-color:var(--red)}
.btn--red:hover{background:var(--red-2);border-color:var(--red-2)}
.btn--ink{background:var(--graphite);color:#fff;border-color:var(--graphite)}
.btn--ink:hover{background:var(--steel);border-color:var(--steel)}
.btn--ghost{border-color:var(--line);color:var(--text);background:transparent}
.btn--ghost:hover{border-color:var(--graphite);background:var(--graphite);color:#fff}
.btn--ghost-inv{border-color:rgba(255,255,255,.42);color:#fff;background:rgba(255,255,255,.05)}
.btn--ghost-inv:hover{background:#fff;color:var(--graphite);border-color:#fff}
.btn--wide{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
/* On a phone two buttons of different natural widths read as ragged. Full
   width is both tidier and a bigger tap target. */
@media (max-width:560px){
  .hero .btn-row .btn,.phero .btn-row .btn,.band__act .btn,.sect__head .btn-row .btn{width:100%}
  .band__act{width:100%}
}

/* ---------- Utility bar ---------- */
.util{background:var(--ink);color:var(--inv-2);font-size:13px;line-height:1}
.util__in{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:42px;flex-wrap:wrap}
.util__l,.util__r{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:7px 0}
.util b{color:#fff;font-weight:600}
.util a:hover b,.util a:hover{color:#fff}
.util__item{display:inline-flex;align-items:center;gap:7px}
.util__item svg{width:14px;height:14px;flex:none;opacity:.75}
.util__sep{width:1px;height:13px;background:var(--line-d)}
@media (max-width:900px){.util__r{display:none}.util__in{justify-content:center}}

/* ---------- Header ---------- */
.hdr{
  position:sticky;top:0;z-index:90;background:var(--paper);
  border-bottom:1px solid var(--line);transition:box-shadow .2s;
}
.hdr.is-stuck{box-shadow:0 1px 0 var(--line),0 10px 30px -18px rgba(11,14,18,.3)}
.hdr__in{display:flex;align-items:center;gap:clamp(14px,2.5vw,38px);min-height:82px}
.brand{display:flex;align-items:center;flex:none;padding:10px 0}
.brand img{width:clamp(150px,15vw,196px);height:auto}
.nav{display:flex;align-items:center;gap:clamp(4px,1.1vw,14px);margin-left:auto}
.nav__a{
  display:inline-flex;align-items:center;gap:6px;padding:11px 12px;border-radius:var(--r);
  font-size:14.5px;font-weight:550;color:var(--text);white-space:nowrap;
  transition:color .16s,background .16s;position:relative;
}
.nav__a:hover{color:var(--red)}
.nav__a[aria-current="page"]{color:var(--red)}
.nav__a[aria-current="page"]::after{
  content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--red);
}
.nav__a svg{width:11px;height:11px;opacity:.55;transition:transform .18s}
.nav__hdr{display:none}

/* Services dropdown */
.drop{position:relative}
.drop__menu{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  width:min(680px,86vw);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-lg);padding:14px;
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;
}
.drop:hover .drop__menu,.drop:focus-within .drop__menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop:hover .nav__a svg,.drop:focus-within .nav__a svg{transform:rotate(180deg)}
.drop__i{display:block;padding:11px 13px;border-radius:var(--r);transition:background .15s}
.drop__i:hover{background:var(--paper-2)}
.drop__i b{display:block;font-size:14.5px;font-weight:600;color:var(--text)}
.drop__i span{display:block;font-size:12.5px;color:var(--text-3);margin-top:2px;line-height:1.45}
.drop__i:hover b{color:var(--red)}
.hdr__cta{display:flex;align-items:center;gap:10px;flex:none}
.hdr__tel{display:inline-flex;flex-direction:column;line-height:1.2;padding-right:4px}
.hdr__tel small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.hdr__tel b{font-family:var(--f-disp);font-size:19px;font-weight:700;letter-spacing:-.01em}
.hdr__tel:hover b{color:var(--red)}

.burger{
  display:none;width:46px;height:46px;align-items:center;justify-content:center;
  background:var(--graphite);border:0;border-radius:var(--r);cursor:pointer;flex:none;margin-left:auto;
  -webkit-tap-highlight-color:transparent;
}
.burger span{display:block;width:19px;height:2px;background:#fff;position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:#fff;transition:transform .25s}
.burger span::before{top:-6px}.burger span::after{top:6px}
/* Open state: the bars fold into an X. The panel covers the header on a
   phone, but on a tablet the 420px drawer leaves it visible, and it reads
   during the transition either way. */
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* The nav collapses at 1130px but the call bar does not appear until 760px.
   Dropping .hdr__cta wholesale at 1130 left every tablet with a header
   carrying a logo, a burger and no way to phone anyone. The phone number
   stays until the call bar takes over; only the quote button goes. */
@media (max-width:1130px){
  .nav{display:none}
  .burger{display:flex;margin-left:12px}
  .hdr__cta{margin-left:auto}
  .hdr__cta .btn{display:none}
  .hdr__in{min-height:70px}
}
@media (max-width:760px){
  .hdr__cta{display:none}
  .burger{margin-left:auto}
}

/* ---------- Mobile sheet ----------
   A right-hand drawer, not a full-screen fade: it comes from the side the
   burger is on, and on a tablet the page stays visible behind the scrim so
   the menu reads as a layer rather than a page change. */
.sheet{
  position:fixed;inset:0;z-index:120;
  height:100%;height:100dvh;
  visibility:hidden;
  --sheet-pad:20px;
}
.sheet[data-open="1"]{visibility:visible}

.sheet__scrim{
  position:absolute;inset:0;background:rgba(11,14,18,.62);
  opacity:0;transition:opacity .3s ease;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.sheet[data-open="1"] .sheet__scrim{opacity:1}

.sheet__panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(420px,100%);
  background:var(--graphite);color:#fff;
  display:flex;flex-direction:column;
  overflow-y:auto;
  /* Without this, flicking past the end of the menu scrolls the page behind
     it -- the one thing the scroll lock cannot catch on its own. */
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  box-shadow:-24px 0 64px -24px rgba(0,0,0,.7);
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.22,.61,.36,1);
}
.sheet[data-open="1"] .sheet__panel{transform:none}

/* Sticky head and foot: the close button and the quote CTA stay put however
   far down the list you are. */
.sheet__top{
  position:sticky;top:0;z-index:2;background:var(--graphite);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:64px;padding:12px var(--sheet-pad);border-bottom:1px solid var(--line-d);
}
.sheet__top .brandmark{font-family:var(--f-disp);font-weight:800;font-size:21px;letter-spacing:-.02em;color:#fff}
.sheet__top .brandmark i{color:var(--red-2);font-style:normal}
.sheet__x{
  width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line-d);border-radius:var(--r);
  color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .15s,border-color .15s;
}
.sheet__x svg{width:20px;height:20px}
.sheet__x:active{background:rgba(255,255,255,.1)}
@media (hover:hover){.sheet__x:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}}

.sheet__nav{display:flex;flex-direction:column;padding:6px 0 14px}

/* One row style for links and for the accordion trigger, so the button does
   not read as a different kind of thing from the links around it. */
.sheet__a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;min-height:54px;padding:13px var(--sheet-pad);
  font-family:var(--f-disp);font-size:18px;font-weight:600;letter-spacing:-.01em;
  color:#fff;background:transparent;text-align:left;cursor:pointer;
  border:0;border-left:3px solid transparent;border-bottom:1px solid rgba(255,255,255,.07);
  -webkit-tap-highlight-color:transparent;
  transition:background .15s,border-left-color .15s,color .15s;
}
.sheet__nav>.sheet__a:last-child{border-bottom:0}
.sheet__a:active{background:rgba(255,255,255,.08)}
@media (hover:hover){.sheet__a:hover{background:rgba(255,255,255,.05);color:#FF8A9B}}
.sheet__a[aria-current="page"]{color:#FF8A9B;border-left-color:var(--red-2);background:rgba(224,31,61,.09)}

.sheet__chev{width:16px;height:16px;flex:none;opacity:.55;transition:transform .28s}
.sheet__grp[data-open="1"] .sheet__chev{transform:rotate(180deg)}

/* 1fr -> 0fr on a grid row is the only way to animate to content height
   without measuring it in JS. Browsers that will not interpolate it snap,
   which is fine; the menu still opens and closes. */
.sheet__sub{display:grid;grid-template-rows:1fr;transition:grid-template-rows .28s cubic-bezier(.22,.61,.36,1)}
.sheet__grp[data-open="0"] .sheet__sub{grid-template-rows:0fr}
.sheet__subin{
  min-height:0;overflow:hidden;background:rgba(0,0,0,.24);
  border-bottom:1px solid rgba(255,255,255,.07);
}
/* overflow:hidden still leaves the collapsed links in the tab order. */
.sheet__grp[data-open="0"] .sheet__subin{visibility:hidden;transition:visibility 0s .28s}

.sheet__s{
  display:block;min-height:46px;
  padding:12px var(--sheet-pad) 12px calc(var(--sheet-pad) + 15px);
  font-family:var(--f-body);font-size:15px;font-weight:500;line-height:1.4;
  color:var(--inv-2);border-left:3px solid transparent;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s,color .15s,border-left-color .15s;
}
.sheet__s:active{background:rgba(255,255,255,.07);color:#fff}
@media (hover:hover){.sheet__s:hover{color:#fff;background:rgba(255,255,255,.05)}}
.sheet__s[aria-current="page"]{color:#FF8A9B;border-left-color:var(--red-2);background:rgba(224,31,61,.1)}
.sheet__s--all{color:#fff;font-weight:600}

/* The nav is six rows once services collapse, which on a tall phone leaves a
   lot of dark nothing between it and the pinned CTA. This is what goes there. */
.sheet__aside{padding:20px var(--sheet-pad) 24px}
.sheet__mail{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;
  font-size:14.5px;font-weight:500;color:#fff;word-break:break-all;
  -webkit-tap-highlight-color:transparent;transition:color .15s;
}
.sheet__mail svg{width:17px;height:17px;flex:none;color:var(--red-2)}
@media (hover:hover){.sheet__mail:hover{color:#FF8A9B}}
.sheet__aside p{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--inv-2)}
/* On a short handset the aside is what pushes the menu into scrolling. It is
   the least important thing in the drawer, so it is the thing that goes. */
@media (max-height:660px){.sheet__aside{display:none}}

.sheet__foot{
  margin-top:auto;position:sticky;bottom:0;background:var(--graphite);
  padding:14px var(--sheet-pad) calc(14px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line-d);display:grid;gap:4px;
}
.sheet__tel{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 2px;-webkit-tap-highlight-color:transparent}
.sheet__tel svg{width:20px;height:20px;flex:none;color:var(--red-2)}
.sheet__tel small{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--inv-2);font-weight:600;line-height:1.5}
.sheet__tel b{display:block;font-family:var(--f-disp);font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
@media (hover:hover){.sheet__tel:hover b{color:#FF8A9B}}

/* Scroll lock. html{overflow:hidden} is ignored by iOS Safari, so the body is
   pinned instead and ach.js puts the scroll offset back on close. */
body.is-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(11,14,18,.94) 0%,rgba(11,14,18,.86) 38%,rgba(11,14,18,.5) 68%,rgba(11,14,18,.42) 100%),
    linear-gradient(to top,rgba(11,14,18,.85) 0%,rgba(11,14,18,0) 46%);
}
.hero__in{padding-top:clamp(60px,9vw,128px);padding-bottom:clamp(46px,6vw,74px)}
.hero__body{max-width:790px;border-left:3px solid var(--red);padding-left:clamp(18px,2.6vw,34px)}
.hero h1{font-size:clamp(2.3rem,5.5vw,4.4rem);font-weight:800;margin:18px 0 0;text-wrap:balance}
.hero h1 em{font-style:normal;color:#fff;display:block}
.hero__lede{margin-top:20px;font-size:clamp(1.04rem,1.4vw,1.25rem);color:#D4DBE2;max-width:60ch;line-height:1.6}
.hero .btn-row{margin-top:32px}
.hero__trust{
  margin-top:clamp(38px,5vw,58px);padding-top:26px;border-top:1px solid rgba(255,255,255,.16);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;
}
.hero__trust div{display:flex;gap:11px;align-items:flex-start}
.hero__trust svg{width:19px;height:19px;flex:none;color:var(--red-2);margin-top:2px}
.hero__trust b{display:block;font-size:14.5px;font-weight:600;color:#fff;line-height:1.3}
.hero__trust span{display:block;font-size:12.5px;color:var(--inv-2);margin-top:2px;line-height:1.4}
@media (max-width:880px){.hero__trust{grid-template-columns:1fr 1fr;gap:18px}}
@media (max-width:480px){.hero__trust{grid-template-columns:1fr}}

/* Page hero (interior pages) */
.phero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.phero__bg{position:absolute;inset:0;z-index:-2}
.phero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.phero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(95deg,rgba(11,14,18,.95) 0%,rgba(11,14,18,.84) 45%,rgba(11,14,18,.58) 100%);
}
.phero__in{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(48px,6vw,80px)}
.phero h1{font-size:clamp(2.1rem,4.4vw,3.5rem);font-weight:800;margin:16px 0 0;max-width:24ch;text-wrap:balance}
.phero__lede{margin-top:18px;color:#CFD7DF;font-size:clamp(1rem,1.3vw,1.16rem);max-width:60ch;line-height:1.6}
.phero .btn-row{margin-top:28px}

/* Breadcrumbs */
.crumbs{font-size:13px;color:var(--inv-2);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a:hover{color:#fff}
.crumbs svg{width:12px;height:12px;opacity:.5}
.crumbs [aria-current]{color:#fff}

/* ---------- Sections ---------- */
.sect{padding:var(--sect) 0}
.sect--tight{padding:clamp(48px,6vw,80px) 0}
.sect--paper{background:var(--paper-2)}
.sect--ink{background:var(--graphite);color:var(--inv)}
.sect--ink h2,.sect--ink h3{color:#fff}
.sect__head{max-width:760px}
.sect__head h2{margin-top:18px}
.sect__head p{margin-top:18px}
.sect__head--center{margin-left:auto;margin-right:auto;text-align:center}
.sect__head--center .eyebrow{justify-content:center}
.sect__bar{
  display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;
}

/* ---------- Stat band ---------- */
.stats{background:var(--ink);color:#fff;border-top:3px solid var(--red)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-d)}
.stats__i{background:var(--ink);padding:clamp(26px,3.4vw,40px) clamp(18px,2.4vw,30px)}
.stats__i b{display:block;font-family:var(--f-disp);font-size:clamp(1.7rem,3vw,2.5rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.stats__i i{font-style:normal;color:var(--red-2)}
.stats__i span{display:block;margin-top:10px;font-size:13.5px;color:var(--inv-2);line-height:1.45}
@media (max-width:820px){.stats__grid{grid-template-columns:1fr 1fr}}

/* ---------- Service cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);margin-top:clamp(36px,4.5vw,56px)}
@media (max-width:980px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}
.card{
  display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s;
}
.card:hover{border-color:#C3CBD3;box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.card__img{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--paper-3)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .4s}
.card:hover .card__img img{transform:scale(1.045)}
.card__n{
  position:absolute;left:0;bottom:0;background:var(--red);color:#fff;
  font-family:var(--f-disp);font-size:12px;font-weight:700;letter-spacing:.1em;padding:7px 12px;
}
.card__b{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;flex:1}
.card__b h3{font-size:1.26rem}
.card__b p{margin-top:11px;color:var(--text-2);font-size:15.2px;line-height:1.6;flex:1}
.card__more{
  margin-top:20px;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
  color:var(--red);letter-spacing:.02em;
}
.card__more svg{width:15px;height:15px;transition:transform .2s}
.card:hover .card__more svg{transform:translateX(4px)}

/* Seven services in a three-wide grid leaves one card stranded beside two
   empty cells. The last card spans the row and lies down instead, which
   reads as a decision rather than an accident. */
.card--wide{grid-column:1/-1;flex-direction:row}
.card--wide .card__img{width:36%;flex:none;aspect-ratio:auto;min-height:230px}
.card--wide .card__b{width:64%;justify-content:center}
.card--wide .card__b p{flex:0 1 auto;max-width:60ch}
.card--wide .card__more{margin-top:18px}
@media (max-width:640px){
  .card--wide{flex-direction:column}
  .card--wide .card__img{width:100%;aspect-ratio:3/2;min-height:0}
  .card--wide .card__b{width:100%}
}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(32px,5vw,76px);align-items:center}
.split--flip .split__media{order:2}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:34px}
  .split--flip .split__media{order:0}
}
.split__media{position:relative}
.split__media img{width:100%;border-radius:var(--r);aspect-ratio:4/3;object-fit:cover}
.split__media--tall img{aspect-ratio:3/4}
.split__tag{
  position:absolute;bottom:0;left:0;background:var(--red);color:#fff;padding:16px 22px;max-width:76%;
}
.split__tag b{display:block;font-family:var(--f-disp);font-size:1.02rem;font-weight:700;line-height:1.2}
.split__tag span{display:block;font-size:12.5px;opacity:.9;margin-top:3px}
.split__body h2{margin-top:18px}
.split__body>p{margin-top:18px;color:var(--text-2)}
.sect--ink .split__body>p{color:var(--inv-2)}

/* ---------- Tick lists ---------- */
.ticks{list-style:none;display:grid;gap:12px;margin-top:26px}
.ticks--2{grid-template-columns:1fr 1fr;gap:12px 26px}
@media (max-width:600px){.ticks--2{grid-template-columns:1fr}}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:15.4px;line-height:1.5}
.ticks svg{width:18px;height:18px;flex:none;color:var(--red);margin-top:3px}
.sect--ink .ticks svg{color:var(--red-2)}

/* ---------- Process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin-top:clamp(36px,4.5vw,56px);border:1px solid var(--line)}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{background:var(--paper);padding:clamp(24px,2.8vw,34px);position:relative}
.step__n{
  font-family:var(--f-disp);font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--red);
  display:flex;align-items:center;gap:10px;
}
.step__n::after{content:"";height:1px;flex:1;background:var(--line)}
.step h3{margin-top:16px;font-size:1.16rem}
.step p{margin-top:11px;font-size:14.8px;color:var(--text-2);line-height:1.6}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:clamp(28px,3.5vw,40px)}
.chips span{
  border:1px solid var(--line);background:var(--paper);border-radius:100px;
  padding:8px 16px;font-size:14px;font-weight:500;color:var(--text);
}
.sect--ink .chips span{border-color:var(--line-d);background:var(--steel);color:var(--inv)}

/* ---------- Quotes ---------- */
/* align-items:start so a two-line review does not inherit the height of a
   nine-line one and sit in a pool of white space. */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(36px,4.5vw,56px);align-items:start}
@media (max-width:980px){.quotes{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.quotes{grid-template-columns:1fr}}
.quote{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;
}
.quote__stars{display:flex;gap:3px;color:#F2A417}
.quote__stars svg{width:16px;height:16px}
.quote blockquote{margin:16px 0 0;font-size:15.4px;line-height:1.65;color:var(--text);flex:1}
.quote figcaption{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--text-3)}
.quote figcaption b{display:block;color:var(--text);font-size:14.5px;font-weight:600;margin-bottom:2px}

/* ---------- Areas ---------- */
.areas{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px);margin-top:clamp(34px,4vw,48px)}
@media (max-width:820px){.areas{grid-template-columns:1fr}}
.area{border:1px solid var(--line-d);background:var(--steel);border-radius:var(--r);padding:clamp(24px,2.8vw,34px)}
.area h3{font-size:1.3rem}
.area__addr{margin-top:14px;font-size:15px;color:var(--inv-2);line-height:1.6;font-style:normal}
.area__addr a{color:#fff;font-weight:600}
.area__addr a:hover{color:#FF8A9B}
.area__list{list-style:none;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-d);display:flex;flex-wrap:wrap;gap:7px}
.area__list li{font-size:13px;color:var(--inv-2);background:rgba(255,255,255,.05);border-radius:100px;padding:5px 12px}

/* ---------- CTA band ---------- */
.band{background:var(--red);color:#fff;position:relative;overflow:hidden}
.band__in{padding-top:clamp(44px,5.5vw,72px);padding-bottom:clamp(44px,5.5vw,72px);display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.band h2{font-size:clamp(1.7rem,3.2vw,2.6rem);max-width:22ch;color:#fff}
.band p{margin-top:14px;color:rgba(255,255,255,.9);max-width:52ch;font-size:16px}
.band__act{display:flex;gap:12px;flex-wrap:wrap;flex:none}
.band .btn--ink{background:#fff;color:var(--red);border-color:#fff}
.band .btn--ink:hover{background:var(--graphite);color:#fff;border-color:var(--graphite)}
.band .btn--ghost-inv{border-color:rgba(255,255,255,.6)}

/* ---------- FAQ ---------- */
.faq{margin-top:clamp(30px,4vw,44px);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 46px 22px 0;position:relative;
  font-family:var(--f-disp);font-size:clamp(1.02rem,1.35vw,1.18rem);font-weight:600;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;margin-top:-7px;
  border-right:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:rotate(45deg);transition:transform .22s;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--red)}
.faq__a{padding:0 46px 24px 0;color:var(--text-2);font-size:15.6px;line-height:1.68}
.faq__a p+p{margin-top:12px}

/* ---------- Gallery ---------- */
.galbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(28px,3.5vw,40px)}
.galbar button{
  border:1px solid var(--line);background:var(--paper);border-radius:100px;padding:9px 18px;
  font-size:14px;font-weight:600;cursor:pointer;transition:all .16s;color:var(--text-2);
}
.galbar button:hover{border-color:var(--graphite);color:var(--text)}
.galbar button[aria-pressed="true"]{background:var(--graphite);border-color:var(--graphite);color:#fff}
.gal{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,14px);
  margin-top:clamp(24px,3vw,34px);
}
@media (max-width:1000px){.gal{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.gal{grid-template-columns:1fr 1fr}}
.gal__i{
  position:relative;aspect-ratio:1;overflow:hidden;border-radius:var(--r);background:var(--paper-3);
  border:0;padding:0;cursor:zoom-in;display:block;
}
.gal__i img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .3s}
.gal__i:hover img{transform:scale(1.06)}
.gal__i::after{
  content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,14,18,.5),transparent 55%);
  opacity:0;transition:opacity .25s;
}
.gal__i:hover::after{opacity:1}
.gal__i[hidden]{display:none}
.gal__cap{
  position:absolute;left:0;right:0;bottom:0;padding:12px 14px;color:#fff;font-size:12.5px;
  line-height:1.4;text-align:left;opacity:0;transform:translateY(6px);transition:all .25s;z-index:1;
}
.gal__i:hover .gal__cap{opacity:1;transform:translateY(0)}

/* Lightbox */
.lb{
  position:fixed;inset:0;z-index:150;background:rgba(8,10,13,.94);
  display:flex;align-items:center;justify-content:center;padding:clamp(14px,4vw,54px);
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;
}
.lb[data-open="1"]{opacity:1;visibility:visible}
.lb__fig{margin:0;max-width:min(1400px,100%);max-height:100%;display:flex;flex-direction:column;gap:14px}
.lb__fig img{max-height:calc(100vh - 170px);width:auto;max-width:100%;margin:0 auto;border-radius:var(--r);object-fit:contain}
.lb__fig figcaption{color:var(--inv-2);font-size:14px;text-align:center;max-width:70ch;margin:0 auto}
.lb__btn{
  position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);
  color:#fff;width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .16s;
}
.lb__btn:hover{background:rgba(255,255,255,.24)}
.lb__x{top:18px;right:18px}
.lb__p{left:clamp(8px,2vw,26px);top:50%;margin-top:-24px}
.lb__n{right:clamp(8px,2vw,26px);top:50%;margin-top:-24px}
.lb__count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:var(--inv-2);font-size:13px;letter-spacing:.04em}
/* A video tile is a photo tile with a play badge over it. The badge carries
   the running time so nobody opens a thirty-second clip expecting a still. */
.gal__i--video{cursor:pointer}
.gal__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;
  display:flex;align-items:center;gap:8px;padding:9px 14px 9px 12px;
  background:rgba(11,14,18,.62);border:1px solid rgba(255,255,255,.34);border-radius:999px;
  color:#fff;backdrop-filter:blur(3px);transition:background .25s,transform .25s;
}
.gal__play svg{width:15px;height:15px;flex:none}
.gal__play em{font-style:normal;font-size:12px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.gal__i--video:hover .gal__play{background:var(--red);border-color:var(--red);transform:translate(-50%,-50%) scale(1.06)}
/* The badge sits centred, so keep the caption clear of it on the small tiles. */
.gal__i--video .gal__cap{background:linear-gradient(to top,rgba(11,14,18,.72),transparent)}
/* Portrait phone video: bound it by height so a 9:16 clip cannot run off the
   screen, and let the width follow. Same ceiling as the lightbox image. */
.lb__fig video{
  max-height:calc(100vh - 170px);width:auto;max-width:100%;margin:0 auto;display:block;
  border-radius:var(--r);background:#000;
}
.lb__fig video[hidden],.lb__fig img[hidden]{display:none}

/* ---------- Forms ---------- */
.formwrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,4.5vw,64px);align-items:start}
@media (max-width:940px){.formwrap{grid-template-columns:1fr}}
.form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,40px);box-shadow:var(--shadow)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:620px){.form__grid{grid-template-columns:1fr}}
.fg{display:flex;flex-direction:column;gap:7px}
.fg--full{grid-column:1/-1}
.fg label{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--text)}
.fg label span{color:var(--red);font-weight:700}
.fg input,.fg select,.fg textarea{
  font:inherit;font-size:15.5px;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);color:var(--text);width:100%;transition:border-color .16s,box-shadow .16s;
}
.fg textarea{min-height:132px;resize:vertical}
.fg input:hover,.fg select:hover,.fg textarea:hover{border-color:#C3CBD3}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(200,16,46,.12)}
.fg__hint{font-size:12.5px;color:var(--text-3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.optin{grid-column:1/-1;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px}
.optin__row{display:flex;gap:11px;align-items:flex-start;font-size:13.6px;line-height:1.55;color:var(--text-2);cursor:pointer}
.optin__row input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--red)}
.optin__fine{margin-top:10px;font-size:11.8px;line-height:1.55;color:var(--text-3)}
.optin__fine a{text-decoration:underline}
.form__foot{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.form__note{font-size:13px;color:var(--text-3);display:flex;gap:8px;align-items:flex-start}
.form__note svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--red)}
.form__msg{margin-top:14px;padding:13px 15px;border-radius:var(--r);font-size:14.5px;display:none}
.form__msg[data-kind="ok"]{display:block;background:#E8F6EC;border:1px solid #B7E0C2;color:#1C5F30}
.form__msg[data-kind="err"]{display:block;background:#FDEBEE;border:1px solid #F5C0C9;color:#8E0B20}

/* Contact detail blocks */
.cblock{border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.4vw,28px);background:var(--paper-2)}
.cblock+.cblock{margin-top:16px}
.cblock h3{font-size:1.1rem;display:flex;align-items:center;gap:10px}
.cblock h3 svg{width:18px;height:18px;color:var(--red);flex:none}
.cblock address{font-style:normal;margin-top:12px;font-size:15px;line-height:1.68;color:var(--text-2)}
.cblock address a{font-weight:600;color:var(--text)}
.cblock address a:hover{color:var(--red)}
.cblock dl{margin:12px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14.6px}
.cblock dt{color:var(--text-3)}
.cblock dd{margin:0;font-weight:600}

/* ---------- Rich text ---------- */
.rich{max-width:74ch}
.rich h2{margin-top:clamp(38px,4vw,54px);font-size:clamp(1.5rem,2.2vw,1.95rem)}
.rich h2:first-child{margin-top:0}
.rich h3{margin-top:32px;font-size:1.25rem}
.rich p{margin-top:17px;color:var(--text-2);line-height:1.72}
.rich ul{margin-top:17px;padding-left:0;list-style:none;display:grid;gap:10px}
.rich ul li{display:flex;gap:11px;color:var(--text-2);font-size:15.8px;line-height:1.6}
.rich ul li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);flex:none;margin-top:9px}
.rich a:not(.btn){color:var(--red);text-decoration:underline;text-underline-offset:3px;font-weight:500}
.rich a:not(.btn):hover{color:var(--red-ink)}
.rich strong{color:var(--text);font-weight:600}

/* Sidebar */
.withside{display:grid;grid-template-columns:1fr 340px;gap:clamp(34px,5vw,72px);align-items:start}
@media (max-width:1000px){.withside{grid-template-columns:1fr}}
.side{position:sticky;top:104px;display:grid;gap:16px}
.sidecard{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:var(--paper-2)}
.sidecard--ink{background:var(--graphite);border-color:var(--graphite);color:var(--inv)}
.sidecard--ink h3{color:#fff}
.sidecard h3{font-size:1.12rem}
.sidecard p{margin-top:11px;font-size:14.6px;color:var(--text-2);line-height:1.6}
.sidecard--ink p{color:var(--inv-2)}
.sidecard .btn{margin-top:18px}
.sidelist{list-style:none;margin-top:6px}
.sidelist li{border-bottom:1px solid var(--line)}
.sidelist li:last-child{border-bottom:0}
.sidelist a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;font-size:15px;font-weight:550}
.sidelist a:hover{color:var(--red)}
.sidelist svg{width:14px;height:14px;opacity:.4;flex:none}
.sidelist a:hover svg{opacity:1;color:var(--red)}
.sidelist [aria-current]{color:var(--red)}
.sidetel{font-family:var(--f-disp);font-size:1.6rem;font-weight:800;letter-spacing:-.02em;display:block;margin-top:8px;color:#fff}

/* ---------- Footer ---------- */
.ftr{background:var(--ink);color:var(--inv-2);border-top:3px solid var(--red);font-size:14.6px}
.ftr__main{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(34px,4vw,50px);display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,54px)}
@media (max-width:1000px){.ftr__main{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.ftr__main{grid-template-columns:1fr}}
.ftr h2,.ftr h3{color:#fff}
.ftr__lock{font-family:var(--f-disp);font-size:1.55rem;font-weight:800;letter-spacing:-.025em;color:#fff;line-height:1.05}
.ftr__lock i{font-style:normal;color:var(--red-2)}
.ftr__lock span{display:block;font-family:var(--f-body);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--inv-2);margin-top:8px}
.ftr__about{margin-top:18px;line-height:1.68;max-width:38ch}
.ftr__ttl{font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.ftr__list{list-style:none;display:grid;gap:10px}
.ftr__list a:hover{color:#fff}
.ftr address{font-style:normal;line-height:1.7}
.ftr address+address{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-d)}
.ftr address b{color:#fff;display:block;font-weight:600;margin-bottom:4px}
.ftr address a{color:#fff;font-weight:600}
.ftr address a:hover{color:#FF8A9B}
.ftr__hours{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-d)}
.ftr__hours b{color:#fff}
.ftr__bar{
  border-top:1px solid var(--line-d);padding-top:22px;padding-bottom:22px;display:flex;align-items:center;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13.2px;
}
.ftr__bar nav{display:flex;gap:18px;flex-wrap:wrap}
.ftr__bar a:hover{color:#fff}

/* ---------- Sticky mobile call bar ---------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  background:var(--graphite);border-top:1px solid var(--line-d);
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  grid-template-columns:1fr 1fr;gap:10px;
}
@media (max-width:760px){
  .callbar{display:grid}
  /* The bar pads itself for the home indicator (above), so the space reserved
     for it has to account for that inset too -- 78px alone leaves the last
     footer row under the bar by exactly the inset on a notched handset. */
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
}
.callbar .btn{padding:13px 14px;font-size:14.5px}

/* ---------- Misc ---------- */
.note{
  border-left:3px solid var(--red);background:var(--paper-2);padding:18px 22px;
  font-size:15px;line-height:1.65;color:var(--text-2);border-radius:0 var(--r) var(--r) 0;
}
.note b{color:var(--text)}
.center{text-align:center}
.mt-l{margin-top:clamp(30px,4vw,44px)}
.mt-m{margin-top:24px}
.hr{border:0;border-top:1px solid var(--line);margin:clamp(40px,5vw,64px) 0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Phone ergonomics ----------
   Measured in real Chrome at 390px: footer and list links were rendering
   18px tall, which is half a usable tap target and a mobile-usability flag.
   Padding rather than min-height, so the link box grows with the text
   instead of the text floating inside a fixed box. */
@media (max-width:760px){
  .ftr__list a{display:inline-block;padding:7px 0}
  .ftr__bar nav a{display:inline-block;padding:6px 0}
  .cblock address a,.cblock dd a,.area__addr a{display:inline-block;padding:5px 0}
  .ftr address a,.ftr__hours a{display:inline-block;padding:5px 0}
  .cblock p a{display:inline-block;padding:4px 0}
  .galbar button{padding:11px 18px}
  /* A 4-line placeholder was being clipped by the min-height. */
  .fg textarea{min-height:150px}
}

/* ---------- Recent-projects marquee (home) ----------
   99 tiles down the front page buried everything under it. The track holds
   the same strip twice so translateX(-50%) loops with no visible seam. */
.marq{overflow:hidden;position:relative;margin-top:clamp(24px,3vw,34px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marq__track{display:flex;gap:clamp(10px,1.2vw,14px);width:max-content;animation:marq 80s linear infinite}
.marq:hover .marq__track,.marq:focus-within .marq__track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marq__i{flex:0 0 auto;width:clamp(190px,21vw,270px);aspect-ratio:4/3;position:relative;display:block;
  overflow:hidden;border-radius:var(--r);background:var(--paper-3);text-decoration:none}
.marq__i img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.marq__i:hover img{transform:scale(1.06)}
.marq__i::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(11,14,18,.62),transparent 58%)}
.marq__cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:10px 12px;color:#fff;
  font-size:12px;letter-spacing:.03em;text-transform:uppercase}
.marq__i:focus-visible{outline:3px solid var(--red);outline-offset:2px}
/* Someone who has asked the system to stop moving things gets a strip they
   scroll themselves rather than one that scrolls at them. */
@media (prefers-reduced-motion:reduce){
  .marq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .marq__track{animation:none}
}

/* ---------- Gallery, grouped by project ---------- */
.galgrp{margin-top:clamp(30px,4vw,46px)}
.galgrp:first-child{margin-top:clamp(20px,2.5vw,28px)}
.galgrp[hidden]{display:none}
.galgrp__h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 14px;
  font-family:var(--f-disp);font-size:clamp(17px,2vw,21px);letter-spacing:.01em;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.galgrp__h span{font-family:var(--f-body);font-size:12.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-3)}

/* A run of text that must never be broken mid-phrase. Used on the footer
   hours so '7:00 p.m. PT' cannot be split across two lines. */
.nb{white-space:nowrap}
.ftr__hours p{margin:6px 0 10px;line-height:1.75}
.ftr__hours b{display:block;margin-bottom:2px}

/* ---------- Scroll animation ----------
   Every block of text and every image in <main> and the footer arrives as it
   scrolls into view. Nothing here hides anything on its own: ach.js is what
   sets data-anim, and it only sets it on a browser that can animate. With JS
   off, without IntersectionObserver, or with reduced motion asked for, no
   element ever carries the attribute and the page renders exactly as it did
   before any of this existed -- which is the point. A stylesheet that hid
   content up front would need JS to succeed before the page was readable. */
[data-anim]{
  opacity:0;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--anim-delay,0ms);
}
[data-anim="up"]{transform:translate3d(0,26px,0)}
[data-anim="fade"]{transform:none}
[data-anim="zoom"]{transform:translate3d(0,18px,0) scale(.972)}
[data-anim="left"]{transform:translate3d(-24px,0,0)}
[data-anim="right"]{transform:translate3d(24px,0,0)}
[data-anim].is-in{opacity:1;transform:none}

/* 24px is inside the .wrap gutter at every width where a sideways entrance
   can happen (--gut is 5vw there, so 45px and up), which is what keeps it
   from reaching past the edge of the document and adding a horizontal
   scrollbar. At 900px and below the two halves of a .split are stacked and
   there is no sideways to come from, so they rise like everything else. */
@media (max-width:900px){
  [data-anim="left"],[data-anim="right"]{transform:translate3d(0,26px,0)}
}
@media (prefers-reduced-motion:reduce){
  [data-anim]{opacity:1!important;transform:none!important;transition:none!important}
}
@media print{
  [data-anim]{opacity:1!important;transform:none!important}
}