/* ==========================================================================
   Patterson & Sons Construction Inc. -- site.css
   One stylesheet for every page in /psc/. No framework and no build step, in
   keeping with the rest of this domain.

   Brand is taken from the client's own logo, sampled rather than guessed:
   #C1272D is the red in PSC-Logo-Retina.png and #1A1A1A is its black. The
   palette is built out from those two so the site and the letterhead agree.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* brand */
  --red:#C1272D;
  --red-dark:#9E1F24;
  --red-light:#E0404A;

  /* neutrals, warm-shifted so concrete greys read as concrete and not as screen grey */
  --ink:#0E0F11;
  --ink-2:#16181B;
  --charcoal:#1A1A1A;
  --steel-700:#3C4249;
  --steel-500:#6B7280;
  --steel-300:#B9BEC4;
  --steel-200:#D9DCE0;
  --steel-100:#ECEEF0;
  --bone:#F7F6F4;

  /* semantic */
  --bg:#fff;
  --bg-alt:var(--bone);
  --text:#1F2328;
  --text-muted:#585F68;
  --text-invert-muted:#B9BEC4;
  --line:#E3E6E9;
  --line-dark:#2B2F34;

  /* type */
  --font-display:'Oswald','Arial Narrow',Impact,system-ui,sans-serif;
  --font-body:'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;

  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:88px;

  --container:1240px;
  --radius:3px;          /* construction reads square: almost no rounding anywhere */
  --shadow-sm:0 1px 2px rgba(14,15,17,.06),0 2px 6px rgba(14,15,17,.05);
  --shadow:0 8px 24px rgba(14,15,17,.10),0 2px 6px rgba(14,15,17,.06);
  --shadow-lg:0 24px 60px rgba(14,15,17,.18),0 6px 16px rgba(14,15,17,.08);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-dark)}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.1;margin:0 0 var(--s4);letter-spacing:.01em}
h1{font-size:clamp(2.25rem,1.35rem + 3.4vw,4rem);text-transform:uppercase;letter-spacing:.005em}
h2{font-size:clamp(1.85rem,1.25rem + 2.1vw,2.9rem);text-transform:uppercase}
h3{font-size:clamp(1.2rem,1.05rem + .55vw,1.5rem);text-transform:uppercase;letter-spacing:.02em}
h4{font-size:1.05rem;text-transform:uppercase;letter-spacing:.06em}
p{margin:0 0 var(--s5)}
ul,ol{margin:0 0 var(--s5);padding-left:1.15em}
li{margin-bottom:var(--s2)}
strong{font-weight:650}
::selection{background:var(--red);color:#fff}

/* Focus: visible, branded, never removed. */
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.site-header :focus-visible,.site-footer :focus-visible,.hero :focus-visible{outline-color:#fff}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--red);color:#fff;padding:14px 22px;font-weight:600;
}
.skip-link:focus{left:0;color:#fff}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--s5)}
.container-narrow{max-width:860px}
.section{padding-block:clamp(56px,4vw + 38px,104px)}
.section--tight{padding-block:clamp(40px,3vw + 26px,72px)}
.section--dark{background:var(--ink);color:#fff}
.section--alt{background:var(--bg-alt)}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}
.section--dark p{color:var(--text-invert-muted)}

.grid{display:grid;gap:var(--s5)}
@media(min-width:700px){.g-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:700px){.g-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.g-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:700px){.g-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.g-4{grid-template-columns:repeat(4,1fr)}}

/* ---------- Section heading ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--font-display);font-size:.82rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--red);
  margin:0 0 var(--s3);
}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--red);flex:none}
.section--dark .eyebrow,.hero .eyebrow{color:var(--red-light)}
.section--dark .eyebrow::before,.hero .eyebrow::before{background:var(--red-light)}
.section-head{max-width:760px;margin-bottom:var(--s7)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head p{font-size:1.075rem;color:var(--text-muted);margin-bottom:0}
.section--dark .section-head p{color:var(--text-invert-muted)}
.lede{font-size:1.16rem;line-height:1.62;color:var(--text-muted)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);font-weight:600;font-size:.97rem;
  letter-spacing:.09em;text-transform:uppercase;
  padding:16px 30px;border:2px solid transparent;border-radius:var(--radius);
  cursor:pointer;text-align:center;line-height:1.2;
  transition:background .2s var(--ease),color .2s var(--ease),
    border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 6px 18px rgba(193,39,45,.28)}
.btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff;box-shadow:0 10px 26px rgba(193,39,45,.36)}
.btn-dark{background:var(--charcoal);color:#fff;border-color:var(--charcoal)}
.btn-dark:hover{background:#000;border-color:#000;color:#fff}
.btn-outline{background:transparent;color:var(--text);border-color:var(--steel-200)}
.btn-outline:hover{border-color:var(--charcoal);background:var(--charcoal);color:#fff}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-ghost-light:hover{background:#fff;color:var(--charcoal);border-color:#fff}
.btn-lg{padding:19px 38px;font-size:1.02rem}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3)}

.arrow-link{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-weight:600;font-size:.92rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--red);
}
.arrow-link svg{transition:transform .22s var(--ease)}
.arrow-link:hover svg{transform:translateX(5px)}

/* ==========================================================================
   Header
   ========================================================================== */
.topbar{background:var(--ink);color:var(--text-invert-muted);font-size:.85rem;border-bottom:1px solid var(--line-dark)}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:44px;flex-wrap:wrap}
.topbar a{color:var(--text-invert-muted);display:inline-flex;align-items:center;gap:7px}
.topbar a:hover{color:#fff}
.topbar__list{display:flex;align-items:center;gap:var(--s5);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.topbar__list li{margin:0;display:inline-flex;align-items:center;gap:7px}
.topbar svg{flex:none;opacity:.8}
.topbar__badge{
  font-family:var(--font-display);letter-spacing:.12em;text-transform:uppercase;
  font-size:.76rem;color:#fff;border:1px solid var(--line-dark);padding:3px 10px;border-radius:2px;
}
@media(max-width:860px){.topbar__list li.topbar__hide-sm{display:none}}

/* z-index MUST stay above .nav-scrim (940). The mobile drawer .nav lives
   inside this header, and a positioned header with a z-index creates its own
   stacking context -- so the drawer's z-index:950 is resolved INSIDE this
   context, not against the scrim. At 900 the scrim painted over the open menu
   and swallowed every tap: the menu looked dimmed and nothing was clickable. */
.site-header{position:sticky;top:0;z-index:960;background:var(--charcoal);border-bottom:1px solid var(--line-dark)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:78px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:42px;width:auto}
@media(max-width:520px){.brand img{height:34px}}

.nav{display:flex;align-items:center;gap:var(--s2)}
.nav__list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav__list li{margin:0;position:relative}
.nav__link{
  display:block;padding:12px 14px;color:#E7E9EB;
  font-family:var(--font-display);font-size:.92rem;font-weight:500;
  letter-spacing:.075em;text-transform:uppercase;
  border-bottom:2px solid transparent;transition:color .18s,border-color .18s;
}
.nav__link:hover{color:#fff;border-bottom-color:var(--red)}
.nav__link[aria-current="page"]{color:#fff;border-bottom-color:var(--red)}

/* dropdown */
.has-sub > .nav__link{display:flex;align-items:center;gap:6px}
.has-sub > .nav__link svg{transition:transform .2s var(--ease)}
.has-sub:hover > .nav__link svg,.has-sub:focus-within > .nav__link svg{transform:rotate(180deg)}
.subnav{
  position:absolute;top:100%;left:0;min-width:300px;background:#fff;
  border-top:3px solid var(--red);box-shadow:var(--shadow-lg);
  list-style:none;margin:0;padding:8px 0;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.has-sub:hover .subnav,.has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:translateY(0)}
.subnav a{
  display:block;padding:11px 20px;color:var(--text);font-size:.95rem;
  border-left:3px solid transparent;transition:background .16s,border-color .16s,color .16s;
}
.subnav a:hover,.subnav a[aria-current="page"]{background:var(--bone);border-left-color:var(--red);color:var(--red)}
.subnav strong{display:block;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;font-weight:600}
.subnav span{display:block;font-size:.82rem;color:var(--text-muted);line-height:1.4;margin-top:2px}

.header-cta{display:flex;align-items:center;gap:var(--s4);flex:none}
.header-phone{display:flex;flex-direction:column;line-height:1.15}
.header-phone small{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-300);font-family:var(--font-display)}
.header-phone a{font-family:var(--font-display);font-size:1.32rem;font-weight:600;color:#fff;letter-spacing:.01em}
.header-phone a:hover{color:var(--red-light)}

.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:46px;height:46px;background:transparent;border:1px solid var(--line-dark);
  border-radius:var(--radius);cursor:pointer;flex:none;
}
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;position:relative;transition:background .2s}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:#fff;
  transition:transform .22s var(--ease),top .22s var(--ease);
}
.nav-toggle span::before{top:-7px}
.nav-toggle span::after{top:7px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media(max-width:620px){
  /* See note above: this button is what overflowed the header on a phone. */
  .header-cta > .btn{display:none}
  .site-header__inner{min-height:64px}
}

/* ---------- The mobile drawer ----------
   Rebuilt 2026-09-13. What was here before was a panel that slid in and did
   nothing else: it had no way to close itself other than the hamburger showing
   through a 96px blank strip at its top, it stayed in the tab order and in the
   screen reader's tree while it was off-screen, the page scrolled behind it on
   iOS, and tapping "Services" opened a submenu instead of going to the
   services page. Each of those is fixed below and in site.js.

   The drawer's own padding is 0 and each of the three regions pads itself.
   That is what lets the head and the foot sit against the panel's edges and
   the middle scroll between them. */
@media(max-width:1100px){
  .header-phone{display:none}
  .nav-toggle{display:flex}

  .nav{
    position:fixed;inset:0 0 0 auto;width:min(392px,88vw);
    background:var(--charcoal);flex-direction:column;align-items:stretch;
    padding:0;gap:0;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    border-left:1px solid var(--line-dark);z-index:950;
    box-shadow:-18px 0 46px rgba(8,9,10,.5);
    transform:translateX(100%);
    /* visibility, not just the transform. Translated off-screen it was still
       a visible element: Tab walked into eight links nobody could see and a
       screen reader read the whole menu twice. visibility:hidden takes it out
       of both, and the 0s delay holds it visible for the length of the slide
       out so the panel does not vanish mid-animation. */
    visibility:hidden;
    transition:transform .32s var(--ease),visibility 0s linear .32s;
  }
  .nav.is-open{
    transform:none;visibility:visible;
    transition:transform .32s var(--ease),visibility 0s;
  }

  /* Head and foot exist only in the drawer; site.js injects them and this is
     the only breakpoint that shows them. */
  .nav__head{
    display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
    padding:calc(env(safe-area-inset-top,0px) + 18px) 20px 18px;
    border-bottom:1px solid var(--line-dark);
    position:sticky;top:0;background:var(--charcoal);z-index:2;
  }
  .nav__head-title{
    font-family:var(--font-display);text-transform:uppercase;letter-spacing:.16em;
    font-size:.78rem;color:var(--steel-300);
  }
  .nav__close{
    display:flex;align-items:center;justify-content:center;flex:none;
    width:46px;height:46px;margin-right:-8px;
    background:transparent;border:1px solid var(--line-dark);border-radius:var(--radius);
    color:#fff;cursor:pointer;transition:background .2s,border-color .2s;
  }
  .nav__close:hover,.nav__close:focus-visible{background:var(--red);border-color:var(--red)}

  .nav__list{flex-direction:column;align-items:stretch;gap:0;width:100%;padding:var(--s2) 20px 0}

  /* A row is the link plus its own expander, so tapping the words goes to the
     page and tapping the chevron opens the list. The old build put both jobs
     on the link: the first tap on "Services" expanded, and only a second tap
     navigated, which reads as a dead link to anybody who does not know. */
  .nav__list li{display:block}
  /* `li.has-sub`, not `.has-sub`. The rule directly above is `.nav__list li`,
     which carries a type selector and therefore OUT-SPECIFIES a lone class --
     so a bare `.has-sub{display:grid}` never applied, the row stayed a block,
     and the expander dropped onto a line of its own underneath "Services"
     instead of sitting at the end of its row. */
  .nav__list li.has-sub{display:grid;grid-template-columns:1fr auto;align-items:center}
  .has-sub > .nav__link{grid-column:1}
  .has-sub > .nav__link svg{display:none}      /* the row's own button replaces it */
  .has-sub > .subnav{grid-column:1/-1}

  .nav__link{
    display:flex;align-items:center;min-height:52px;padding:13px 2px;
    border-bottom:1px solid var(--line-dark);
    font-size:1.02rem;
  }
  .has-sub > .nav__link{border-bottom:0}
  .has-sub{border-bottom:1px solid var(--line-dark)}
  .nav__link:hover,.nav__link[aria-current="page"]{border-bottom-color:var(--line-dark);color:var(--red-light)}
  .has-sub > .nav__link[aria-current="page"]{color:var(--red-light)}

  .subnav-toggle{
    display:flex;align-items:center;justify-content:center;
    width:52px;height:52px;flex:none;margin-right:-10px;
    background:transparent;border:0;color:var(--steel-300);cursor:pointer;
  }
  .subnav-toggle svg{transition:transform .25s var(--ease)}
  .subnav-toggle[aria-expanded="true"]{color:#fff}
  .subnav-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

  .subnav{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    background:transparent;border-top:0;padding:0;max-height:0;overflow:hidden;
    transition:max-height .3s var(--ease);
  }
  .has-sub.is-open .subnav{max-height:640px;padding-bottom:var(--s3)}
  .subnav a{
    display:flex;align-items:center;min-height:46px;
    color:var(--steel-300);padding:10px 4px 10px 18px;border-left:2px solid var(--line-dark);
  }
  .subnav a:hover,.subnav a[aria-current="page"]{background:transparent;color:#fff;border-left-color:var(--red)}
  .subnav span{display:none}

  /* The foot carries the phone number because the header's does not exist at
     this width, and a contractor's phone number is the conversion. The extra
     bottom padding is the home indicator: without it the call row is half
     under the swipe-up strip. */
  .nav__foot{
    margin-top:auto;padding:var(--s5) 20px calc(env(safe-area-inset-bottom,0px) + 22px);
    border-top:1px solid var(--line-dark);display:grid;gap:var(--s4);
  }
  .nav .btn{margin-top:0}
  .nav__cta{display:flex;justify-content:center;min-height:52px}
  .nav__call{
    display:flex;align-items:center;gap:11px;min-height:52px;
    color:#fff;font-family:var(--font-display);font-size:1.3rem;letter-spacing:.01em;
  }
  .nav__call svg{color:var(--red-light);flex:none}
  .nav__call small{display:block;font-family:var(--font-body);font-size:.76rem;
    letter-spacing:.1em;text-transform:uppercase;color:var(--steel-300);margin-top:2px}
  .nav__call:hover{color:var(--red-light)}
}

/* Above the breakpoint none of the drawer furniture exists.

   SCOPED TO A MIN-WIDTH QUERY, AND THAT IS THE WHOLE POINT. This used to be a
   bare `.nav__cta{display:none}` sitting after the max-width block that sets
   `.nav__cta{display:flex}`. Both are one class, so specificity ties and the
   later rule wins at every width -- which is why the drawer's "Request a
   Quote" button has never actually appeared on a phone. The head, the foot
   and the row expanders would have gone the same way. */
@media(min-width:1101px){
  .nav__cta,.nav__head,.nav__foot,.subnav-toggle{display:none}
}

.nav-scrim{
  position:fixed;inset:0;background:rgba(10,11,12,.6);
  opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s;z-index:940;
}
.nav-scrim.is-open{opacity:1;visibility:visible}

/* SCROLL LOCK. overflow:hidden on the body is ignored by iOS Safari, which
   happily scrolled the page behind the open drawer and then left the visitor
   somewhere else when it closed. position:fixed is the one thing iOS honours;
   it collapses the page to the viewport, so site.js records the scroll offset,
   pins the body at minus that offset, and puts it back on close. The lightbox
   locks with the same pair for the same reason. */
body.nav-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(10,11,12,.94) 0%,rgba(10,11,12,.82) 42%,rgba(10,11,12,.44) 72%,rgba(10,11,12,.32) 100%),
    linear-gradient(to top,rgba(10,11,12,.72),rgba(10,11,12,0) 45%);
}
.hero__inner{position:relative;padding-block:clamp(72px,7vw + 30px,150px);max-width:790px}
.hero h1{margin-bottom:var(--s5);text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero h1 em{font-style:normal;color:var(--red-light);display:block}
.hero__sub{font-size:clamp(1.06rem,.98rem + .38vw,1.28rem);color:#DDE0E4;max-width:640px;margin-bottom:var(--s6)}
.hero .btn-row{margin-bottom:var(--s7)}
.hero--home .hero__inner{padding-block:clamp(88px,8vw + 40px,176px)}
.hero--page .hero__inner{padding-block:clamp(56px,4.5vw + 28px,104px);max-width:860px}
.hero--page h1{margin-bottom:var(--s4)}
.hero--page .hero__sub{margin-bottom:0}

.hero__cred{
  display:flex;flex-wrap:wrap;gap:var(--s5) var(--s7);
  padding-top:var(--s6);border-top:1px solid rgba(255,255,255,.16);
}
.hero__cred div{display:flex;align-items:center;gap:11px;font-size:.93rem;color:#D3D7DB}
.hero__cred svg{flex:none;color:var(--red-light)}
.hero__cred strong{display:block;font-family:var(--font-display);font-size:1.02rem;color:#fff;letter-spacing:.04em;text-transform:uppercase;line-height:1.2}
.hero__cred span{font-size:.83rem;color:var(--steel-300)}

/* Breadcrumbs */
.crumbs{font-size:.86rem;color:var(--steel-300);margin-bottom:var(--s5)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:9px;list-style:none;margin:0;padding:0}
.crumbs li{margin:0;display:flex;align-items:center;gap:9px}
.crumbs li+li::before{content:"/";color:var(--steel-500)}
.crumbs a{color:var(--steel-300)}
.crumbs a:hover{color:#fff}
.crumbs [aria-current="page"]{color:#fff}

/* ==========================================================================
   Trust / stats bands
   ========================================================================== */
.trustbar{background:var(--charcoal);border-top:3px solid var(--red);color:#fff}
.trustbar__grid{display:grid;gap:0;grid-template-columns:1fr}
@media(min-width:640px){.trustbar__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.trustbar__grid{grid-template-columns:repeat(4,1fr)}}
.trustbar__item{
  display:flex;align-items:center;gap:var(--s4);
  padding:var(--s5);border-bottom:1px solid var(--line-dark);
}
@media(min-width:640px){.trustbar__item:nth-child(odd){border-right:1px solid var(--line-dark)}}
@media(min-width:1000px){
  .trustbar__item{border-bottom:0;border-right:1px solid var(--line-dark)}
  .trustbar__item:last-child{border-right:0}
}
.trustbar__icon{
  width:44px;height:44px;flex:none;display:grid;place-items:center;
  background:rgba(193,39,45,.14);color:var(--red-light);border-radius:var(--radius);
}
.trustbar__item strong{display:block;font-family:var(--font-display);font-size:1.02rem;text-transform:uppercase;letter-spacing:.05em;line-height:1.25}
.trustbar__item span{font-size:.86rem;color:var(--steel-300)}

.stats{display:grid;gap:var(--s5);grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{text-align:center;padding:var(--s5) var(--s3)}
.stat__num{
  font-family:var(--font-display);font-weight:600;line-height:1;
  font-size:clamp(2.4rem,1.7rem + 2.6vw,3.6rem);color:#fff;
}
.stat__num .unit{color:var(--red-light)}
.stat__label{
  display:block;margin-top:var(--s3);font-size:.84rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel-300);font-family:var(--font-display);
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;height:100%;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
.card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--steel-100)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .card__media img{transform:scale(1.06)}
.card__tag{
  position:absolute;left:0;bottom:0;background:var(--red);color:#fff;
  font-family:var(--font-display);font-size:.75rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;padding:7px 14px;
}
.card__body{padding:var(--s5);display:flex;flex-direction:column;flex:1}
.card__body h3{margin-bottom:var(--s3)}
.card__body h3 a{color:var(--text)}
.card:hover .card__body h3 a{color:var(--red)}
.card__body p{color:var(--text-muted);font-size:.97rem;margin-bottom:var(--s4)}
.card__body .arrow-link{margin-top:auto}
.card__list{list-style:none;padding:0;margin:0 0 var(--s5);font-size:.93rem;color:var(--text-muted)}
.card__list li{position:relative;padding-left:22px;margin-bottom:6px}
.card__list li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--red)}

/* numbered feature card (no image) */
.feature{
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);
  padding:var(--s6) var(--s5);height:100%;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.feature__icon{
  width:52px;height:52px;display:grid;place-items:center;margin-bottom:var(--s5);
  background:rgba(193,39,45,.09);color:var(--red);border-radius:var(--radius);
}
.feature h3{margin-bottom:var(--s3)}
.feature p{color:var(--text-muted);font-size:.97rem;margin:0}
.section--dark .feature{background:var(--ink-2);border-color:var(--line-dark)}
.section--dark .feature p{color:var(--text-invert-muted)}

/* ==========================================================================
   Split (image + copy)
   ========================================================================== */
.split{display:grid;gap:var(--s7);align-items:center}
@media(min-width:940px){
  .split{grid-template-columns:1fr 1fr;gap:clamp(40px,4vw,84px)}
  .split--reverse .split__media{order:2}
}
.split__media{position:relative}
.split__media img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}
.split__badge{
  position:absolute;left:-14px;bottom:26px;background:var(--red);color:#fff;
  padding:var(--s4) var(--s5);border-radius:var(--radius);box-shadow:var(--shadow);max-width:240px;
}
.split__badge strong{display:block;font-family:var(--font-display);font-size:1.9rem;line-height:1}
.split__badge span{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-display)}

/* checklist */
.checklist{list-style:none;padding:0;margin:0 0 var(--s6)}
.checklist li{position:relative;padding-left:38px;margin-bottom:var(--s4);font-size:1rem}
.checklist li::before{
  content:"";position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:2px;
  background:var(--red);
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/20px no-repeat;
  mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/20px no-repeat;
}
.section--dark .checklist li{color:#E7E9EB}

.cols-2{columns:2;column-gap:var(--s7)}
@media(max-width:620px){.cols-2{columns:1}}
.cols-2 li{break-inside:avoid}

/* ==========================================================================
   Process
   ========================================================================== */
.process{display:grid;gap:var(--s5)}
@media(min-width:760px){.process{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.process{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;padding-top:var(--s6)}
.step__num{
  font-family:var(--font-display);font-size:3.4rem;font-weight:600;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--red);display:block;margin-bottom:var(--s3);
}
.section--dark .step__num{-webkit-text-stroke-color:var(--red-light)}
.step::before{content:"";position:absolute;top:0;left:0;width:52px;height:3px;background:var(--red)}
.step h3{margin-bottom:var(--s3)}
.step p{font-size:.97rem;color:var(--text-muted);margin:0}
.section--dark .step p{color:var(--text-invert-muted)}

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery-filters{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s6);justify-content:center}
.filter-btn{
  background:transparent;border:1px solid var(--line);color:var(--text-muted);
  padding:10px 20px;border-radius:var(--radius);cursor:pointer;
  font-family:var(--font-display);font-size:.87rem;letter-spacing:.09em;text-transform:uppercase;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.filter-btn:hover{border-color:var(--charcoal);color:var(--text)}
.filter-btn[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}

.gallery{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr))}
.gallery__item{
  position:relative;display:block;overflow:hidden;border-radius:var(--radius);
  aspect-ratio:4/3;background:var(--steel-100);cursor:zoom-in;padding:0;border:0;width:100%;
}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.gallery__item:hover img{transform:scale(1.07)}
.gallery__item::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,11,12,.86),rgba(10,11,12,.1) 55%,transparent);
  opacity:0;transition:opacity .3s var(--ease);
}
.gallery__item:hover::after,.gallery__item:focus-visible::after{opacity:1}
.gallery__cap{
  position:absolute;left:0;right:0;bottom:0;padding:var(--s4);z-index:2;text-align:left;
  color:#fff;font-family:var(--font-display);font-size:.95rem;letter-spacing:.03em;
  text-transform:uppercase;line-height:1.3;
  transform:translateY(10px);opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.gallery__cap span{display:block;font-family:var(--font-body);font-size:.8rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--red-light);margin-bottom:4px}
.gallery__item:hover .gallery__cap,.gallery__item:focus-visible .gallery__cap{transform:translateY(0);opacity:1}
.gallery__item.is-hidden{display:none}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:1200;background:rgba(8,9,10,.95);
  display:grid;place-items:center;padding:clamp(16px,4vw,56px);
  opacity:0;visibility:hidden;transition:opacity .26s,visibility .26s;
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox figure{margin:0;max-width:min(1180px,100%);max-height:100%;display:flex;flex-direction:column;gap:var(--s4)}
.lightbox img{max-height:76vh;width:auto;margin-inline:auto;border-radius:var(--radius)}
.lightbox figcaption{color:#E7E9EB;text-align:center;font-size:.95rem}
.lightbox__close,.lightbox__nav{
  position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);
  color:#fff;width:50px;height:50px;display:grid;place-items:center;cursor:pointer;
  border-radius:var(--radius);transition:background .2s,border-color .2s;
}
.lightbox__close:hover,.lightbox__nav:hover{background:var(--red);border-color:var(--red)}
.lightbox__close{top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px)}
.lightbox__nav--prev{left:clamp(10px,2vw,24px);top:50%;transform:translateY(-50%)}
.lightbox__nav--next{right:clamp(10px,2vw,24px);top:50%;transform:translateY(-50%)}
@media(max-width:620px){
  .lightbox__nav{width:42px;height:42px}
  .lightbox img{max-height:64vh}
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.quote{
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--red);
  padding:var(--s6);height:100%;display:flex;flex-direction:column;
}
.quote__stars{display:flex;gap:3px;color:var(--red);margin-bottom:var(--s4)}
.quote blockquote{margin:0 0 var(--s5);font-size:1.03rem;line-height:1.66;color:var(--text)}
.quote figcaption{margin-top:auto;font-size:.9rem;color:var(--text-muted)}
.quote figcaption strong{display:block;font-family:var(--font-display);font-size:1rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--text)}
.section--dark .quote{background:var(--ink-2);border-color:var(--line-dark);border-left-color:var(--red)}
.section--dark .quote blockquote{color:#E7E9EB}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{background:var(--red);color:#fff;position:relative;overflow:hidden}
.cta-band::before{
  content:"";position:absolute;inset:0;opacity:.13;
  background-image:repeating-linear-gradient(135deg,#000 0 22px,transparent 22px 44px);
}
.cta-band__inner{position:relative;display:grid;gap:var(--s6);align-items:center}
@media(min-width:900px){.cta-band__inner{grid-template-columns:1.4fr auto}}
.cta-band h2{color:#fff;margin-bottom:var(--s3)}
.cta-band p{color:rgba(255,255,255,.92);margin:0;font-size:1.06rem;max-width:620px}
.cta-band .btn-dark{background:var(--charcoal);border-color:var(--charcoal)}
.cta-band .btn-dark:hover{background:#000;border-color:#000}
.cta-band .btn-ghost-light:hover{background:#fff;color:var(--red)}

/* ==========================================================================
   Forms
   ========================================================================== */
.form-card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);padding:clamp(24px,3vw,40px);box-shadow:var(--shadow-sm)}
.form-grid{display:grid;gap:var(--s4)}
@media(min-width:620px){.form-grid{grid-template-columns:repeat(2,1fr)}.form-grid .full{grid-column:1/-1}}
.field label{
  display:block;font-family:var(--font-display);font-size:.83rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin-bottom:7px;
}
.field .req{color:var(--red)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--steel-200);border-radius:var(--radius);
  font:inherit;font-size:.98rem;color:var(--text);background:#fff;
  transition:border-color .18s,box-shadow .18s;
}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(193,39,45,.14);
}
.field input::placeholder,.field textarea::placeholder{color:#9AA1A9}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23585F68' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px;padding-right:42px;
}
.form-note{font-size:.85rem;color:var(--text-muted);margin:var(--s4) 0 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:var(--s4);padding:14px 16px;border-radius:var(--radius);font-size:.94rem;display:none}
.form-status.is-error{display:block;background:#FDF0F0;border:1px solid #F2C4C6;color:#96222A}
.form-status.is-ok{display:block;background:#EEF7F0;border:1px solid #BFE0C8;color:#1F6B35}

/* ==========================================================================
   Contact / info blocks
   ========================================================================== */
.info-list{list-style:none;padding:0;margin:0}
.info-list li{display:flex;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--line);margin:0}
.info-list li:last-child{border-bottom:0}
.info-icon{
  width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:var(--radius);
  background:rgba(193,39,45,.09);color:var(--red);
}
.info-list strong{display:block;font-family:var(--font-display);font-size:.84rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:3px;font-weight:500}
.info-list a,.info-list span{color:var(--text);font-size:1.02rem}
.info-list a:hover{color:var(--red)}
.section--dark .info-list li{border-bottom-color:var(--line-dark)}
.section--dark .info-list a,.section--dark .info-list span{color:#fff}
.section--dark .info-list strong{color:var(--steel-300)}
/* The footer reuses .info-list but is not .section--dark, so the dark-on-dark
   defaults above did not reach it: the Hours value is a <span>, not a link,
   and was rendering #1F2328 on #0E0F11. */
.site-footer .info-list li{border-bottom-color:var(--line-dark)}
.site-footer .info-list a,.site-footer .info-list span{color:#E7E9EB}
.site-footer .info-list a:hover{color:#fff}
.site-footer .info-list strong{color:var(--steel-300)}
.site-footer .info-icon{background:rgba(193,39,45,.16);color:var(--red-light)}

.map-embed{border:0;width:100%;height:420px;display:block;filter:grayscale(.35) contrast(1.05)}

.chips{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;padding:0;margin:0}
.chips li{margin:0}
.chips span,.chips a{
  display:inline-block;padding:8px 15px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);font-size:.9rem;color:var(--text-muted);
}
.chips a:hover{border-color:var(--red);color:var(--red)}
.section--dark .chips span,.section--dark .chips a{background:var(--ink-2);border-color:var(--line-dark);color:var(--steel-300)}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{max-width:880px;margin-inline:auto}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s5);
  background:transparent;border:0;padding:var(--s5) 0;cursor:pointer;text-align:left;
  font-family:var(--font-display);font-size:1.09rem;font-weight:500;color:var(--text);
  letter-spacing:.01em;line-height:1.35;
}
.faq__q:hover{color:var(--red)}
.faq__icon{
  flex:none;width:26px;height:26px;position:relative;margin-top:3px;
  border:1px solid var(--steel-200);border-radius:2px;transition:background .2s,border-color .2s;
}
.faq__icon::before,.faq__icon::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--red);
  transform:translate(-50%,-50%);transition:transform .24s var(--ease),background .2s;
}
.faq__icon::before{width:12px;height:2px}
.faq__icon::after{width:2px;height:12px}
.faq__q[aria-expanded="true"] .faq__icon{background:var(--red);border-color:var(--red)}
.faq__q[aria-expanded="true"] .faq__icon::before,.faq__q[aria-expanded="true"] .faq__icon::after{background:#fff}
.faq__q[aria-expanded="true"] .faq__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__a{overflow:hidden;max-height:0;transition:max-height .32s var(--ease)}
.faq__a > div{padding:0 0 var(--s5);color:var(--text-muted);max-width:74ch}
.faq__a p:last-child{margin-bottom:0}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--ink);color:var(--text-invert-muted);font-size:.95rem}
.site-footer a{color:var(--text-invert-muted)}
.site-footer a:hover{color:#fff}
.footer__top{padding-block:clamp(48px,4vw + 26px,80px);display:grid;gap:var(--s7)}
@media(min-width:760px){.footer__top{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.footer__top{grid-template-columns:1.5fr 1fr 1fr 1.25fr}}
/* The footer used to repeat the full logo lockup. The header is position:sticky,
   so scrolling to the bottom of the page put the identical lockup on screen
   twice -- same artwork, same size, same left edge in the same column. The
   brand is already permanently on screen up there, so the footer sets the name
   as type instead: same identity, different texture, no duplicate. */
.footer__wordmark{margin:0 0 var(--s5)}
.footer__wordmark::before{
  content:"";display:block;width:44px;height:3px;background:var(--red);margin-bottom:var(--s5);
}
.footer__wordmark strong{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:1.75rem;line-height:1.02;letter-spacing:.015em;
  text-transform:uppercase;color:#fff;
}
.footer__wordmark span{
  display:block;margin-top:8px;font-family:var(--font-display);font-weight:400;
  font-size:.8rem;letter-spacing:.32em;text-transform:uppercase;color:var(--steel-300);
}
.footer__brand p{font-size:.95rem;line-height:1.7;margin-bottom:var(--s5)}
.site-footer h3{color:#fff;margin-bottom:var(--s5);font-size:.87rem;text-transform:uppercase;letter-spacing:.14em}
.footer__list{list-style:none;padding:0;margin:0}
.footer__list li{margin-bottom:11px}
.footer__list a{display:inline-flex;align-items:center;gap:8px}
.footer__list a::before{content:"";width:7px;height:1px;background:var(--red);transition:width .2s var(--ease)}
.footer__list a:hover::before{width:13px}
.footer__nap{font-style:normal;line-height:1.75}
.license-badge{
  display:inline-flex;flex-direction:column;gap:2px;margin-top:var(--s5);
  border:1px solid var(--line-dark);border-left:3px solid var(--red);padding:12px 16px;
}
.license-badge strong{color:#fff;font-family:var(--font-display);letter-spacing:.08em;font-size:1rem}
.license-badge span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.socials{display:flex;gap:var(--s2);margin-top:var(--s5)}
.socials a{
  width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-dark);
  border-radius:var(--radius);transition:background .2s,border-color .2s,color .2s;
}
.socials a:hover{background:var(--red);border-color:var(--red);color:#fff}
.footer__bottom{
  border-top:1px solid var(--line-dark);padding-block:var(--s5);
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);align-items:center;justify-content:space-between;
  font-size:.86rem;
}
.footer__bottom ul{display:flex;flex-wrap:wrap;gap:var(--s5);list-style:none;margin:0;padding:0}
.footer__bottom li{margin:0}

/* Sticky mobile call bar */
/* ---------- The sticky contact bar (phones only) ----------
   Rebuilt 2026-09-13, after it was described as clashing with everything else
   on the page. Four separate things were wrong with it and all four are below:

   1. It sat under the iPhone home indicator. There was no safe-area padding,
      so the bottom of both labels was cut off and the right-hand button
      overlapped the swipe-up strip -- a tap on "Free Estimate" was as likely
      to send the visitor to their app switcher.
   2. The space reserved for it was a hardcoded 56px against a bar that
      measured about 52, and it was reserved on the BODY, which is white. The
      footer is --ink, so the last row of the footer ended up under the bar.
      The height is now one custom property and the space is reserved on the
      footer, which is the surface the bar actually sits on.
   3. It is --charcoal and the footer is --ink: two darks two shades apart. At
      the bottom of the page the bar dissolved into the footer and read as a
      rendering fault. The red top rule and the shadow ABOVE the bar are what
      separate the two surfaces.
   4. It was on from the first pixel of the page, so on the home screen it
      duplicated the hero's own two buttons -- the same call and the same
      estimate, stacked over them. It now stays out of the way until the hero
      is scrolled past (site.js), and gets out of the way again while the menu
      is open or a form field has the keyboard up. */
:root{ --callbar-h:58px; }

.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:880;display:none;
  grid-template-columns:1fr 1fr;
  background:var(--charcoal);
  border-top:2px solid var(--red);
  box-shadow:0 -10px 26px rgba(8,9,10,.45);
  padding-bottom:env(safe-area-inset-bottom,0px);
  transform:translateY(115%);
  visibility:hidden;
  transition:transform .28s var(--ease),visibility 0s linear .28s;
}
.callbar.is-on{
  transform:none;visibility:visible;
  transition:transform .28s var(--ease),visibility 0s;
}
.callbar a{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--callbar-h);padding:15px 10px;color:#fff;
  font-family:var(--font-display);font-size:.92rem;letter-spacing:.08em;text-transform:uppercase;
}
.callbar a+a{background:var(--red)}
.callbar a:active{background:var(--ink-2)}
.callbar a+a:active{background:var(--red-dark)}

@media(max-width:760px){
  .callbar{display:grid}
  /* Reserved on the footer and not on the body: the body is white, so a gap
     there showed as a white strip under a dark footer whenever the bar was
     away. Here the reserved strip is footer-coloured either way. */
  .site-footer{padding-bottom:calc(var(--callbar-h) + env(safe-area-inset-bottom,0px))}
}

/* With JS off nothing ever adds .is-on and the bar could never appear at all.
   `scripting: none` is the media feature for exactly that case, so no class
   has to be stamped on <html> by a blocking inline script in thirteen files.
   Without script the bar is simply always on, which is what it did before
   this rebuild. */
@media(scripting: none){
  .callbar{transform:none;visibility:visible;transition:none}
}

/* ==========================================================================
   Utilities + motion
   ========================================================================== */
.text-center{text-align:center}
.mb-0{margin-bottom:0}
.mt-6{margin-top:var(--s6)}
.muted{color:var(--text-muted)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- 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: site.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 var(--ease),transform .7s var(--ease);
  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 exactly the .container gutter (--s5), so a sideways entrance stops
   at the edge of the document and can never add a horizontal scrollbar.
   Below 940px the two halves of a .split are stacked and there is no
   sideways for them to come from, so they rise like everything else. */
@media(max-width:939px){
  [data-anim="left"],[data-anim="right"]{transform:translate3d(0,26px,0)}
}
@media print{
  [data-anim]{opacity:1!important;transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  [data-anim]{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .card:hover,.feature:hover,.btn:hover{transform:none}
}

@media print{
  .site-header,.topbar,.callbar,.cta-band,.nav,.lightbox,.nav-scrim{display:none!important}
  body{font-size:12pt;color:#000;padding-bottom:0}
  .hero{background:#fff;color:#000}
  .hero::after{display:none}
}

/* Video tiles: a play badge over the poster, carrying the running time so
   nobody opens a thirty-second clip expecting a still. */
.gallery__item--video { cursor: pointer; }
.gallery__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  display: flex; align-items: center; gap: 8px; padding: 9px 14px 9px 12px;
  background: rgba(17, 20, 24, .62); border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px; color: #fff; transition: background .25s, transform .25s;
}
.gallery__play svg { flex: none; }
.gallery__play em {
  font-style: normal; font-size: 12px; letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.gallery__item--video:hover .gallery__play {
  background: var(--red, #b4232a); border-color: var(--red, #b4232a);
  transform: translate(-50%, -50%) scale(1.06);
}
/* Portrait phone video: bound it by height so a 9:16 clip cannot run off the
   screen, and let the width follow. */
.lightbox figure video {
  max-height: calc(100vh - 160px); width: auto; max-width: 100%;
  margin: 0 auto; display: block; border-radius: 6px; background: #000;
}
.lightbox figure video[hidden], .lightbox figure img[hidden] { display: none !important; }

/* ---------- Recent-work marquee (home) ----------
   99 tiles down the front page buried everything under them. The track holds
   the same strip twice so translateX(-50%) loops with no visible seam. */
.marq { overflow: hidden; position: relative; margin-top: 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: 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: 6px; background: #e9e9ea; 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(17,20,24,.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, #b4232a); 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; }
}

/* ---------- Projects page, grouped by job ---------- */
.galgrp { margin-top: 46px; }
.galgrp:first-child { margin-top: 26px; }
.galgrp[hidden] { display: none; }
.galgrp__h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 14px;
  font-family: var(--font-display, inherit); font-size: clamp(17px, 2vw, 21px);
  padding-bottom: 10px; border-bottom: 1px solid rgba(17,20,24,.14); }
.galgrp__h span { font-family: inherit; font-size: 12.5px; letter-spacing: .04em;
  text-transform: uppercase; opacity: .6; }

/* 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; }
.footer .info-list li > div > span { display: inline-block; line-height: 1.7; }