/* ══════════════════════════════════════════════════════════
   Passion Bike Shop — concept build
   Palette sampled directly from the mockup the shop supplied:
   red #c32c2b / #bd1e26, bar #121315, panel #181a1e, header #fefefe
   ══════════════════════════════════════════════════════════ */

:root{
  --red:#c1272d;
  --red-hi:#e0332f;
  --red-deep:#8f1b20;
  --ink:#121315;
  --panel:#181a1e;
  --panel-2:#202329;
  --white:#fff;
  --paper:#f6f6f7;
  --body:#4a4f57;
  --body-dim:#a8adb6;
  --line:rgba(18,19,21,.12);
  --line-d:rgba(255,255,255,.14);
  --wrap:1280px;
  --ease:cubic-bezier(.22,.72,.24,1);
  --util-h:38px;
  --hdr-h:84px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,iframe{max-width:100%}
img{display:block}
a{color:inherit}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,4vw,44px)}
.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;padding:12px 18px;z-index:400;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:2.5px solid var(--red); outline-offset:3px; border-radius:4px}
section[id]{scroll-margin-top:calc(var(--hdr-h) + 12px)}

/* scroll progress */
.prog{position:fixed; inset:0 0 auto 0; height:3px; z-index:300; pointer-events:none}
.prog-bar{display:block; height:100%; width:0%; background:var(--red)}

/* ─────────── utility bar ─────────── */
.util{background:var(--ink); color:#e6e8ea; height:var(--util-h); display:flex; align-items:center; font-size:13.5px}
.util-in{display:flex; gap:28px; justify-content:space-between; align-items:center}
/* Open/closed lives here now, as plain text. In the hero it was a rounded
   capsule floating over the photograph and read as a chat-app badge. */
.util-status{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:#c9ccd1; white-space:nowrap}
.util-status.open{color:#5fd39b}
.util-status.closed{color:#ff8b86}
.util-status .dot{width:7px; height:7px; border-radius:50%; background:#8a9099; flex:none}
.util-status.open .dot{background:#34c77b; animation:ping 2.4s infinite}
.util-status.closed .dot{background:var(--red-hi)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(52,199,123,.6)}70%{box-shadow:0 0 0 7px rgba(52,199,123,0)}100%{box-shadow:0 0 0 0 rgba(52,199,123,0)}}
.util-item{display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:inherit; transition:color .25s; white-space:nowrap}
.util-item svg{width:15px;height:15px;flex:none; color:var(--red)}
.util-item:hover{color:#fff}

/* ─────────── header ─────────── */
.hdr{
  position:sticky; top:0; z-index:250; background:var(--white);
  height:var(--hdr-h); display:flex; align-items:center;
  border-bottom:1px solid var(--line); transition:height .3s var(--ease), box-shadow .3s var(--ease);
}
.hdr.scrolled{height:70px; box-shadow:0 6px 26px -16px rgba(18,19,21,.55)}
.hdr-in{display:flex; align-items:center; gap:clamp(16px,3vw,40px)}
.brand{flex:none; display:block}
.brand img{width:clamp(150px,15vw,208px); height:auto; transition:transform .35s var(--ease)}
.brand:hover img{transform:scale(1.04)}

.nav{display:flex; gap:clamp(16px,2.4vw,34px); margin-inline:auto}
.nav a{
  text-decoration:none; font-size:13.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink); padding:8px 0; position:relative; white-space:nowrap;
  transition:color .25s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2.5px; background:var(--red);
  transform:scaleX(0); transform-origin:center; transition:transform .3s var(--ease);
}
.nav a:hover{color:var(--red)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.nav a.on{color:var(--red)}

.hdr-cta{flex:none}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:0; padding:10px; cursor:pointer}
.burger span{display:block; width:24px; height:2.5px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ─────────── buttons ─────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; text-decoration:none; font-weight:700; font-size:13.5px;
  letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
  border:2px solid transparent; cursor:pointer; border-radius:2px;
  transition:background .25s, color .25s, border-color .25s, transform .2s var(--ease), box-shadow .25s;
}
.btn:active{transform:translateY(1px)}
.ico{width:17px;height:17px;flex:none}
.btn-red{background:var(--red); color:#fff; border-color:var(--red)}
.btn-red:hover{background:var(--red-hi); border-color:var(--red-hi); transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(193,39,45,.9)}
.btn-outline{background:transparent; color:#fff; border-color:rgba(255,255,255,.8)}
.btn-outline:hover{background:#fff; color:var(--ink); border-color:#fff; transform:translateY(-2px)}
.btn-outline-dark{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-outline-dark:hover{border-color:var(--red); color:var(--red); transform:translateY(-2px)}
.btn-lg{padding:17px 34px; font-size:14px}
.btn-sm{padding:10px 18px; font-size:12px}

/* ─────────── hero ─────────── */
/* Sized so the hero + the moving ticker below it both land inside the first
   screen: 122px of bars above, ~52px of ticker below. */
/* Height budget for the first screen: bars 122 + ticker 56 + the three pillars
   ~290. Whatever is left goes to the hero, so the photo, the moving strip AND
   the three cards are all above the fold. */
.hero{
  position:relative; display:flex; align-items:center; overflow:hidden; background:var(--ink);
  min-height:clamp(340px, calc(100svh - 468px), 700px);
}

/* Two layers. `contain` shows the ENTIRE photograph — sign at the top, bikes and
   sidewalk at the bottom — instead of `cover` cropping both ends off. The photo
   is 1046x662 and lands at close to its native size, so it also stops being
   upscaled and soft. The gap either side is filled by the same picture, blown up
   and blurred, which reads as depth rather than as letterbox bars. */
/* Mirrored, so the bright stone-and-sidewalk end of the photo lands on the LEFT
   of the hero. background-position could not do this: with `cover` on a frame
   wider than the image there is no horizontal slack to slide, so the X value is
   simply ignored and the dark left edge stays put however bright it is pushed.
   Flipping is invisible at this blur and it is the only thing that moved it. */
.hero-bg{
  position:absolute; inset:-8%;
  background:url("/img/storefront.jpg") 50% 42% / cover no-repeat;
  filter:blur(32px) saturate(1.05) brightness(1.08);
  transform:scale(1.18) scaleX(-1);
}
/* Pinned right, not centred. Centred, the storefront and its sign drifted into
   the headline's space and the two sat on top of each other; against the right
   edge the text gets the left of the frame to itself, which is the composition
   the mockup had. */
.hero-img{
  position:absolute; inset:0;
  background:url("/img/storefront.jpg") 100% 50% / contain no-repeat;
  will-change:transform;
}
.js .hero-img{animation:kenburns 30s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.045)}}

/* The scrim is deliberately narrow and much lighter than before. It only has to
   carry the text block — washing the whole left half in near-black buried the
   photograph, which is the thing worth looking at. */
.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(96deg,rgba(9,10,12,.50) 0%,rgba(9,10,12,.46) 26%,rgba(9,10,12,.34) 44%,rgba(9,10,12,.12) 60%,rgba(9,10,12,0) 72%),
    linear-gradient(180deg,rgba(9,10,12,.22) 0%,rgba(9,10,12,0) 22%,rgba(9,10,12,0) 68%,rgba(9,10,12,.32) 100%);
}
/* Pushes the neighbouring storefront on the right back so it stops competing. */
.hero-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 100% at 34% 52%,transparent 42%,rgba(9,10,12,.5) 100%);
}

/* The cut-out Piermont Ave sign has been removed. Pasting a crop of a sign back
   over the same photograph never stopped looking stuck-on — wrong light, wrong
   edge, floating free of the post it belongs to. The real photograph has the
   sign in it; that is where it should come from. */

.hero-in{position:relative; z-index:4; color:#fff; max-width:760px; padding-block:clamp(32px,4.5vw,60px)}

.hero-rule{
  display:block; height:4px; width:0; background:var(--red); margin:0 0 20px;
  border-radius:2px;
}
.js .hero-rule{animation:ruleIn .9s var(--ease) .78s forwards}
@keyframes ruleIn{to{width:112px}}

/* Text shadows carry legibility now that the scrim is light — the alternative
   was darkening the whole photograph, which defeated the point of having one. */
/* Trimmed to fit the shorter hero — the whole block has to clear the fold
   alongside the photo and the ticker. */
.hero-h1{
  font-family:"Archivo",Impact,sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(2.3rem,5.4vw,4.2rem); line-height:.97; letter-spacing:-.015em; margin:0 0 16px;
  text-shadow:0 3px 26px rgba(0,0,0,.72), 0 1px 3px rgba(0,0,0,.5);
}
.hero-h1 .l{display:block}
.hero-h1 .red{color:#ff4a44; font-size:.53em; letter-spacing:.005em; margin-top:.34em}
.hero-sub{
  font-size:clamp(.98rem,1.5vw,1.1rem); color:#eceef0; max-width:46ch; margin:0 0 24px;
  text-shadow:0 2px 14px rgba(0,0,0,.7);
}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px}

/* staged entrance */
.js .hero-h1 .l,.js .hero-sub,.js .hero-cta{opacity:0; animation:riseIn .85s var(--ease) forwards; animation-delay:calc(var(--i,0) * 110ms + 120ms)}
@keyframes riseIn{from{opacity:0; transform:translateY(26px)}to{opacity:1; transform:none}}

/* ─────────── pillars ─────────── */
.pillars{background:var(--panel); color:#fff; padding:clamp(32px,4.2vw,50px) 0}
.pillars-in{display:grid; grid-template-columns:repeat(3,1fr); gap:0}
.pillar{padding:8px clamp(20px,3vw,44px); position:relative}
.pillar + .pillar::before{content:""; position:absolute; left:0; top:6%; bottom:6%; width:1px; background:var(--line-d)}
.pillar-ico{display:block; width:44px; height:44px; color:var(--red-hi); margin-bottom:18px}
.pillar-ico svg{width:100%;height:100%}
.pillar h2{font-family:"Archivo",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:1.12rem; margin:0 0 10px}
.pillar p{margin:0 0 16px; color:var(--body-dim); font-size:15px; line-height:1.6; max-width:34ch}
.arrow{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:var(--red-hi);
  font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; transition:gap .25s var(--ease), color .25s;
}
.arrow span{transition:transform .25s var(--ease)}
.arrow:hover{color:#fff}
.arrow:hover span{transform:translateX(4px)}

/* ─────────── ticker ─────────── */
.ticker{
  overflow:hidden; padding:16px 0; background:var(--red); position:relative; z-index:5;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.ticker-track{display:flex; align-items:center; gap:24px; width:max-content; animation:slide 38s linear infinite}
.ticker-track span{font-family:"Archivo",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:15.5px; color:#fff; white-space:nowrap}
.ticker-track i{color:rgba(255,255,255,.55); font-style:normal; font-size:8px}
@keyframes slide{to{transform:translateX(-50%)}}

/* ─────────── sections ─────────── */
.sec{padding:clamp(70px,9vw,118px) 0}
.sec-tint{background:var(--paper)}
.sec-dark{background:var(--ink); color:#fff}
.sec-dark .lede{color:var(--body-dim)}
.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--red); margin:0 0 14px; display:flex; align-items:center; gap:11px;
}
.eyebrow::before{content:""; width:28px; height:2.5px; background:var(--red); flex:none}
.h2{
  font-family:"Archivo",Impact,sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(1.95rem,4.4vw,3.2rem); line-height:1.02; letter-spacing:-.012em; margin:0 0 20px;
}
.lede{font-size:clamp(1rem,1.6vw,1.13rem); color:var(--body); max-width:60ch; margin:0 0 46px}
.body{color:var(--body); margin:0 0 18px}

.js [data-wipe] .wm{display:block; overflow:hidden; padding-block:.09em; margin-block:-.09em}
.js [data-wipe] .wi{display:block; transform:translateY(110%); opacity:0; transition:transform .9s var(--ease), opacity .55s var(--ease)}
.js [data-wipe].in .wi{transform:none; opacity:1}
.js [data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.js [data-reveal].in{opacity:1; transform:none; transition-delay:var(--d,0ms)}

/* ── Directional entrances ──
   data-anim picks the direction a block travels in from. Uses `transform`;
   the scroll parallax below uses the independent `translate` property so the
   two can run on the same element without overwriting each other. */
.js [data-anim]{
  opacity:0; will-change:transform,opacity;
  transition:opacity .85s var(--ease), transform .95s var(--ease);
  transition-delay:var(--d,0ms);
}
.js [data-anim="left"]  {transform:translateX(-64px)}
.js [data-anim="right"] {transform:translateX(64px)}
.js [data-anim="rise"]  {transform:translateY(40px)}
.js [data-anim="zoom"]  {transform:scale(.9)}
.js [data-anim="tilt"]  {transform:translateY(38px) rotate(-1.6deg)}
.js [data-anim].in{opacity:1; transform:none}

/* The map opens up rather than just fading in.
   clip-path is safe on this one BECAUSE the reveal check reads
   getBoundingClientRect(), which reports the layout box and ignores clipping.
   It would NOT be safe under IntersectionObserver, which measures the clipped
   visual rect — that is exactly how every section heading ended up permanently
   invisible earlier. Do not move reveals back onto an observer. */
.js .map-card{clip-path:inset(0 0 100% 0); transition:clip-path 1.05s var(--ease)}
.js .map-card.in{clip-path:inset(0 0 0 0)}

/* ─────────── service cards ─────────── */
.grid{display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); background:var(--line); border:1px solid var(--line)}
.card{position:relative; padding:30px 26px 28px; background:var(--white); transition:background .3s}
.card::after{content:""; position:absolute; inset:auto 0 0 0; height:3px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease)}
.card:hover{background:#fcfcfd}
.card:hover::after{transform:scaleX(1)}
.card-ico{display:block; width:42px;height:42px; color:var(--red); margin-bottom:18px; transition:transform .4s var(--ease)}
.card-ico svg{width:100%;height:100%}
.card:hover .card-ico{transform:translateY(-4px) rotate(-6deg)}
.card h3{font-family:"Archivo",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:1.02rem; margin:0 0 9px}
.card p{margin:0; font-size:14.5px; color:var(--body); line-height:1.62}

.sec-cta{margin-top:46px; display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.sec-cta-note{font-size:14px; color:var(--body)}

/* ─────────── gear ─────────── */
.casa{margin:0; font-size:1.05rem; color:var(--body-dim)}
.casa span{color:#fff; font-family:"Archivo",sans-serif; font-weight:700; font-size:1.25rem}
.brand-marquee{
  margin-top:46px; overflow:hidden; padding:24px 0; border-block:1px solid var(--line-d);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.brand-track{display:flex; align-items:center; gap:28px; width:max-content; animation:slide 40s linear infinite}
.brand-track span{
  font-family:"Archivo",sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(22px,3.6vw,42px); color:#fff; opacity:.9; white-space:nowrap; transition:color .3s,opacity .3s;
}
.brand-track span:hover{color:var(--red-hi); opacity:1}
.brand-track em{color:var(--red); font-style:normal; font-size:14px}

/* ─────────── about ─────────── */
.split{display:grid; gap:clamp(36px,6vw,72px); grid-template-columns:1.1fr .9fr; align-items:start}
.facts{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.facts li{display:grid; gap:4px; padding:20px 22px; background:var(--white); transition:background .3s}
.facts li:hover{background:var(--paper)}
.facts strong{font-family:"Archivo",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.07em; font-size:13px; color:var(--red)}
.facts span{font-size:15px; color:var(--body)}

/* ─────────── community ─────────── */
.comm{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.comm-card{
  display:grid; gap:8px; padding:26px 24px; text-decoration:none;
  background:var(--white); border:1px solid var(--line); border-left:3px solid var(--red);
  transition:transform .3s var(--ease), box-shadow .3s;
}
.comm-card:hover{transform:translateY(-5px); box-shadow:0 18px 36px -26px rgba(18,19,21,.8)}
.comm-k{font-family:"Archivo",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:1rem}
.comm-v{font-size:14.5px; color:var(--body)}

/* ─────────── visit ─────────── */
.visit{display:grid; gap:clamp(26px,4vw,48px); grid-template-columns:1.05fr .95fr; align-items:start}
.map-card{border:1px solid var(--line); background:var(--paper); aspect-ratio:4/3.3; overflow:hidden}
.map-card iframe{width:100%;height:100%;border:0;display:block}
.visit-info{display:grid; gap:34px}
.vblock h3{
  font-family:"Archivo",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  font-size:13px; color:var(--body); margin:0 0 13px; padding-bottom:11px; border-bottom:2px solid var(--line);
}
.addr{margin:0 0 15px; font-size:1.16rem; line-height:1.5; font-weight:500}
.dir-row{display:flex; gap:10px; flex-wrap:wrap}
.book-note{margin:0 0 10px; font-size:14.5px; color:var(--body)}

.hours{width:100%; border-collapse:collapse; font-size:15px}
.hours th{text-align:left; font-weight:500; color:var(--body); padding:9px 0}
.hours td{text-align:right; padding:9px 0; font-variant-numeric:tabular-nums}
.hours tr{border-bottom:1px solid var(--line)}
.hours tr:last-child{border-bottom:0}
.hours td.muted{color:var(--body)}
.hours tr.today th,.hours tr.today td{color:var(--red); font-weight:700}
.hours tr.today th::after{content:" · today"; font-weight:500; font-size:12px}

.big-link{display:block; font-family:"Archivo",sans-serif; font-weight:800; font-size:clamp(1.6rem,3.2vw,2.2rem); text-decoration:none; transition:color .25s}
.big-link:hover{color:var(--red)}
.big-link.sub{font-family:"Inter",sans-serif; font-weight:600; font-size:14.5px; color:var(--body); margin-top:9px}
.big-link.sub:hover{color:var(--red)}

/* ─────────── final CTA ─────────── */
.cta{background:var(--ink); color:#fff; padding:clamp(64px,8vw,100px) 0; text-align:center; position:relative; overflow:hidden}
.cta::before{content:""; position:absolute; left:50%; top:-40%; width:760px; height:760px; translate:-50% 0; background:radial-gradient(circle,rgba(193,39,45,.34),transparent 66%); pointer-events:none}
.cta-in{position:relative}
.cta h2{font-family:"Archivo",sans-serif; font-weight:800; text-transform:uppercase; font-size:clamp(1.8rem,4.2vw,3rem); line-height:1.03; margin:0 0 14px}
.cta p{color:var(--body-dim); margin:0 0 30px; font-size:1.04rem}

/* ─────────── footer ─────────── */
.ftr{background:var(--panel); color:#fff; padding:52px 0 0}
.ftr-in{display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; padding-bottom:34px}
.ftr-logo{width:190px; height:auto; margin-bottom:14px; background:#fff; padding:8px 12px; border-radius:3px}
.ftr-line{margin:0 0 6px; font-size:14.5px; color:var(--body-dim)}
.ftr-line a{text-decoration:none; font-weight:600; color:#fff}
.ftr-line a:hover{color:var(--red-hi)}
.ftr-nav{display:flex; flex-wrap:wrap; gap:10px 24px; align-content:start}
.ftr-nav a{font-size:13.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--body-dim); text-decoration:none; transition:color .25s}
.ftr-nav a:hover{color:var(--red-hi)}
.ftr-btm{border-top:1px solid var(--line-d); padding-block:20px}
.ftr-btm p{margin:0; font-size:12.5px; color:#7c828b}

/* ─────────── mobile call bar ─────────── */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:260; display:none;
  align-items:center; justify-content:center; gap:9px;
  padding:15px; padding-bottom:calc(15px + env(safe-area-inset-bottom));
  background:var(--red); color:#fff; text-decoration:none;
  font-weight:700; font-size:15px; letter-spacing:.05em; text-transform:uppercase;
}

/* ─────────── responsive ─────────── */
@media (max-width:1080px){
  .pillars-in{grid-template-columns:1fr; gap:34px}
  .pillar + .pillar::before{left:0; right:0; top:-17px; bottom:auto; width:auto; height:1px}
  .pillar{padding-inline:0}
  .split,.visit{grid-template-columns:1fr}
}
@media (max-width:900px){
  .burger{display:flex}
  .hdr-cta{display:none}
  .nav{
    position:fixed; inset:calc(var(--util-h) + var(--hdr-h)) 0 auto 0; flex-direction:column; gap:0;
    background:var(--white); border-bottom:1px solid var(--line); padding:8px 0;
    box-shadow:0 20px 40px -24px rgba(18,19,21,.6);
    clip-path:inset(0 0 100% 0); transition:clip-path .35s var(--ease);
  }
  .nav.open{clip-path:inset(0 0 0 0)}
  .nav a{padding:15px clamp(20px,4vw,44px); border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .util-item:last-child{display:none}
  .util-in{justify-content:space-between; gap:14px}
  .util{font-size:12.5px}
}
@media (max-width:640px){
  :root{--hdr-h:70px}
  /* On a narrow screen `contain` would shrink the photo to a thin strip, so the
     hero goes back to `cover` here and simply crops. */
  .hero{min-height:clamp(430px,62vh,560px)}
  .hero-img{background-size:cover; background-position:50% 42%}
  .hero-bg{display:none}
  .hero-veil{background:linear-gradient(180deg,rgba(9,10,12,.58) 0%,rgba(9,10,12,.34) 42%,rgba(9,10,12,.84) 100%)}
  .hero-vignette{display:none}
  .hero-cta .btn{flex:1 1 100%}
  .callbar{display:flex}
  .ftr{padding-bottom:76px}
  .map-card{aspect-ratio:1/1}
  .sec-cta{flex-direction:column; align-items:flex-start; gap:14px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .js [data-reveal],.js [data-anim]{opacity:1; transform:none; translate:none}
  .js [data-wipe] .wi{opacity:1; transform:none}
  .js .map-card{clip-path:none}
  .js .hero-h1 .l,.js .hero-sub,.js .hero-cta{opacity:1}
  .js .hero-img{animation:none}
}