/* ============ TOKENS ============ */
:root{
  --ink:#0a0a0a;
  --paper:#ffffff;
  --ash:#6e6e6e;
  --line:rgba(10,10,10,.14);
  --line-strong:rgba(10,10,10,.28);
  --head:92px;
  --pad:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
/* Double-tap zoom is never what anyone means here — it fires on a quick second
   tap of a thumbnail or an arrow and leaves the page zoomed at a strange crop.
   `manipulation` drops that one gesture and keeps the two that matter: scrolling
   and pinch to zoom. Pinch stays deliberately; taking it away breaks the page
   for anyone who needs to magnify it. Elements that need a tighter rule (the
   thumb rail, the photo stage) set their own and win on specificity. */
*{touch-action:manipulation}
html{scroll-behavior:smooth;scroll-padding-top:var(--head);-webkit-text-size-adjust:100%}
/* the canvas behind the page is black, so the rubber-band overscroll on phones
   shows black past the closing bar instead of a white strip */
html{background:var(--ink)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ============ TYPE ============ */
.display{
  font-family:"Barlow Condensed",Impact,"Haettenschweiler","Arial Narrow",sans-serif;
  font-weight:900;font-style:italic;text-transform:uppercase;
  line-height:.88;letter-spacing:-.005em;margin:0;
}

/* ============ LOADER ============ */
@media(prefers-reduced-motion:no-preference){
  html.noloader .hero{animation:heroZoom .95s var(--ease) both}
  @keyframes heroZoom{from{opacity:0;transform:scale(1.055)}to{opacity:1;transform:none}}
}

.loader{
  position:fixed;inset:0;z-index:5000;background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
  transition:opacity .7s var(--ease),visibility .7s;
  /* failsafe: if the script never runs, the curtain still lifts */
  animation:loaderFailsafe .6s linear 12s forwards;
}
.loader.done{opacity:0;visibility:hidden;animation:none}
/* returning visitor: the curtain never paints at all */
html.noloader .loader{display:none}
@keyframes loaderFailsafe{to{opacity:0;visibility:hidden}}
.loader__logo{
  width:min(360px,64vw);height:auto;
  animation:loaderZoom 3.4s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes loaderZoom{from{transform:scale(.96);opacity:.72}to{transform:scale(1.08);opacity:1}}
/* on release the mark pushes in and dissolves */
.loader.done .loader__logo{
  animation:none;transform:scale(1.4);opacity:0;
  transition:transform .95s var(--ease),opacity .6s var(--ease);
}
html.loading,html.loading body{overflow:hidden}

/* images fade in as they decode — only when JS is running, so they are never
   left invisible if it isn't */
.js .cat img,.js .mega__thumb img{opacity:0;transition:opacity .55s var(--ease)}
.js .cat img.ready,.js .mega__thumb img.ready{opacity:1}

/* ============ HEADER ============ */
.hdr{
  position:fixed;inset:0 0 auto;height:var(--head);z-index:1000;
  display:flex;align-items:center;gap:24px;padding:0 var(--pad);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .45s var(--ease),border-color .45s var(--ease),backdrop-filter .45s;
}
.hdr.solid{background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(14px);border-bottom-color:var(--line)}
/* flex:none on the link, not just the img — the link is the flex child and
   was collapsing, squashing the logo to a sliver on narrow headers */
.hdr__brand{flex:none;display:flex;align-items:center}
.hdr__logo{height:54px;width:auto;flex:none;transition:opacity .3s}
.hdr__logo--dark{display:none}
.hdr.solid .hdr__logo--light{display:none}
.hdr.solid .hdr__logo--dark{display:block}

.nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav a,.nav button{
  font-family:"Barlow Condensed",Arial,sans-serif;font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:.12em;font-size:15px;
  color:#fff;background:none;border:0;padding:10px 14px;cursor:pointer;
  text-decoration:none;white-space:nowrap;position:relative;transition:opacity .2s;
}
.hdr.solid .nav a,.hdr.solid .nav button{color:var(--ink)}
.nav a::after,.nav button::after{
  content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav a:hover::after,.nav button:hover::after,.nav [aria-expanded="true"]::after{transform:scaleX(1)}
.nav__cta{
  background:#fff !important;color:var(--ink) !important;
  border:2px solid #fff !important;padding:9px 18px !important;margin-left:10px;
}
/* on the solid white bar it needs an outline to stay visible */
.hdr.solid .nav__cta{border-color:var(--ink) !important}
.nav__cta::after{display:none}
.nav__cta:hover{background:transparent !important;color:#fff !important}
.hdr.solid .nav__cta:hover{background:var(--ink) !important;color:#fff !important;border-color:var(--ink) !important}
.caret{display:inline-block;margin-left:7px;font-size:11px;transform:translateY(-2px);transition:transform .3s var(--ease)}
[aria-expanded="true"] .caret{transform:translateY(-2px) rotate(180deg)}

/* ---- search ----
   Two triggers, one panel. The nav one sits beside Find Us and dies with the
   inline row at 1300; the bar one lives next to the burger and only appears
   once the nav has collapsed, so the magnifier never leaves the header. */
.srch__btn{
  flex:none;display:grid;place-items:center;width:42px;height:42px;
  background:none;border:0;padding:0;cursor:pointer;color:#fff;
  transition:transform .3s var(--ease),opacity .2s;
}
.hdr.solid .srch__btn{color:var(--ink)}
.srch__btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round}
.srch__btn:hover{transform:scale(1.14)}
.srch__btn::after{display:none !important}
.hdr__search{display:none}
.srch__label{display:none}

/* the panel: the loader curtain reused as a room you type into */
.srch{
  position:fixed;inset:0;z-index:2000;background:var(--ink);color:#fff;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.srch.open{opacity:1;visibility:visible}
.srch__x{
  position:absolute;top:22px;right:calc(var(--pad) - 8px);z-index:2;
  width:46px;height:46px;display:grid;place-items:center;
  background:none;border:0;color:#fff;cursor:pointer;
  transition:transform .35s var(--ease);
}
.srch__x:hover{transform:rotate(90deg)}
.srch__x svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round}
/* The whole panel is the scroller, not just the list. When only the list
   scrolled, the top 180px — the padding, the field, the count — swallowed every
   wheel and drag, so scrolling back up did nothing if the cursor happened to be
   up there. The field block stays put by being sticky at full height instead of
   by sitting outside the scroll area, so it looks identical and scrolls from
   anywhere. */
.srch__in{
  flex:1;min-height:0;padding:0 var(--pad);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent;
}
.srch__in::-webkit-scrollbar{width:3px}
.srch__in::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3)}
.srch__head{
  position:sticky;top:0;z-index:1;background:var(--ink);
  padding-top:clamp(74px,12vh,140px);
}
/* the field is the rule under it — no box, so the type is the whole interface */
.srch__field{
  display:flex;align-items:center;gap:clamp(14px,2vw,24px);
  border-bottom:2px solid rgba(255,255,255,.22);
  padding-bottom:clamp(10px,1.6vh,18px);
  transition:border-color .4s var(--ease);
}
.srch.open .srch__field{border-bottom-color:#fff}
.srch__field svg{
  flex:none;width:clamp(24px,2.6vw,34px);height:clamp(24px,2.6vw,34px);
  fill:none;stroke:rgba(255,255,255,.5);stroke-width:2;stroke-linecap:round;
  transition:stroke .4s var(--ease);
}
.srch__field:focus-within svg{stroke:#fff}
.srch__q{
  flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;
  font-family:"Barlow Condensed",Impact,"Arial Narrow",sans-serif;
  font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:clamp(34px,6.4vw,86px);line-height:1;letter-spacing:-.005em;
  padding:0;-webkit-appearance:none;appearance:none;
}
.srch__q::placeholder{color:rgba(255,255,255,.26)}
.srch__q::-webkit-search-cancel-button{display:none}
.srch__meta{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin:16px 0 0;font-family:"Barlow Condensed",Arial,sans-serif;font-style:italic;
  font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:11px;
  color:rgba(255,255,255,.42);
}
.srch__keys{flex:none}
/* The list is plain content now — .srch__in above does the scrolling, and its
   overflow-x is pinned there. That pin matters: left `visible` beside an auto
   overflow-y, the browser computes it to `auto`, and the 12px name slide on
   hover pushed a row past the right edge — a horizontal scrollbar appeared,
   which stole height, which moved the rows, which moved the row out from under
   the cursor, which dropped the hover, which removed the scrollbar. */
.srch__res{margin-top:6px;padding-bottom:clamp(30px,6vh,70px)}
.srch__hit{
  display:flex;align-items:baseline;gap:clamp(12px,2vw,26px);
  scroll-margin-top:var(--srch-head,0px);scroll-margin-bottom:12px;
  /* 16px of right padding is the room the hovered name slides into — a row with
     no price ran to the full width and had nowhere to move */
  padding:clamp(13px,1.8vh,20px) 16px clamp(13px,1.8vh,20px) 4px;
  text-decoration:none;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.12);
  opacity:0;transform:translateY(14px);
}
/* the stagger delay is set inline per row, so a long list still cascades */
.srch__hit.in{opacity:1;transform:none}
.srch__kind{
  flex:none;width:clamp(58px,7vw,104px);
  font-family:"Barlow Condensed",Arial,sans-serif;font-style:italic;font-weight:800;
  text-transform:uppercase;letter-spacing:.14em;font-size:10px;
  color:rgba(255,255,255,.4);transition:color .3s var(--ease);
}
.srch__name{
  flex:1;min-width:0;font-size:clamp(19px,2.5vw,34px);
  transition:transform .4s var(--ease);transform-origin:left;
}
.srch__name b{background:rgba(255,255,255,.17);font-weight:inherit;box-shadow:0 0 0 2px rgba(255,255,255,.17)}
.srch__hit:hover,.srch__hit:focus-visible,.srch__hit.on{
  outline:0;background:rgba(255,255,255,.05);
}
.srch__hit:hover .srch__name,.srch__hit.on .srch__name{transform:translateX(12px)}
.srch__hit:hover .srch__kind,.srch__hit.on .srch__kind{color:#fff}
.srch__none{
  padding:clamp(26px,5vh,54px) 4px;color:rgba(255,255,255,.5);
  font-size:clamp(17px,2vw,24px);
}
@media(prefers-reduced-motion:no-preference){
  .srch__hit{transition:opacity .5s var(--ease),transform .5s var(--ease),background .3s var(--ease)}
}
@media(prefers-reduced-motion:reduce){
  .srch__hit{opacity:1;transform:none}
}

/* ---- mega dropdown ---- */
.mega{
  position:fixed;top:var(--head);left:0;right:0;z-index:999;
  background:var(--paper);border-bottom:1px solid var(--line);
  padding:44px var(--pad) 48px;
  opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity .38s var(--ease),transform .38s var(--ease),visibility .38s;
  max-height:calc(100vh - var(--head));overflow-y:auto;
}
.mega.open{opacity:1;visibility:visible;transform:none}
.mega__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.mega__title{font-size:clamp(28px,3.4vw,44px)}
.mega__note{font-size:13px;color:var(--ash)}
.mega__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:1px;
}
.mega__item{
  background:var(--paper);text-decoration:none;padding:0;display:block;position:relative;overflow:hidden;
  box-shadow:0 0 0 1px var(--line);transition:box-shadow .35s var(--ease);
}
/* the hairline firms up to ink on hover — enough to read as active, no lift */
.mega__item:hover,.mega__item:focus-visible{box-shadow:0 0 0 1px var(--ink)}
.mega__thumb{aspect-ratio:16/10;overflow:hidden;background:#eee}
.mega__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.mega__item:hover .mega__thumb img,.mega__item:focus-visible .mega__thumb img{transform:scale(1.04)}
.mega__label{
  font-family:"Barlow Condensed",Arial,sans-serif;font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:.05em;font-size:16px;line-height:1.1;
  padding:13px 14px 14px;
}
.scrim{position:fixed;inset:0;background:rgba(10,10,10,.42);opacity:0;visibility:hidden;transition:.38s;z-index:998}
.scrim.on{opacity:1;visibility:visible}

/* ---- mobile menu button ---- */
.burger{display:none}

/* ============ HERO ============ */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--ink)}
.hero__slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.5s var(--ease);
  will-change:opacity;
}
.hero__slide.on{opacity:1}
.hero__slide img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform 8s linear;
}
.hero__slide.on img{transform:scale(1.13)}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,10,10,.62) 0%,rgba(10,10,10,.30) 44%,rgba(10,10,10,0) 70%),
    linear-gradient(180deg,rgba(10,10,10,.70) 0%,rgba(10,10,10,.18) 28%,rgba(10,10,10,.50) 58%,rgba(10,10,10,.80) 80%,rgba(10,10,10,.90) 100%);
}
.hero__inner{
  /* low-left, lifted clear of the bottom edge to leave room for the scroll cue */
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--head) var(--pad) clamp(96px,15vh,150px);color:#fff;
}
.hero__h1{
  font-size:clamp(40px,7.4vw,112px);max-width:16ch;
  text-shadow:0 2px 16px rgba(0,0,0,.6),0 2px 54px rgba(0,0,0,.45);
}
.hero__sub{
  margin:24px 0 0;max-width:44ch;font-size:clamp(15px,1.5vw,19px);
  color:rgba(255,255,255,.96);line-height:1.55;text-shadow:0 1px 12px rgba(0,0,0,.65);
}
.hero__acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero__acts .btn{min-width:266px;text-align:center}
.btn{
  font-family:"Barlow Condensed",Arial,sans-serif;font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:.13em;font-size:16px;
  padding:15px 30px;text-decoration:none;border:2px solid;display:inline-block;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.btn--solid{background:#fff;color:var(--ink);border-color:#fff}
.btn--solid:hover{background:transparent;color:#fff}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--ink:hover{background:transparent;color:var(--ink)}
.btn--inkghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--inkghost:hover{background:var(--ink);color:#fff}

.hero__dots{position:absolute;right:var(--pad);bottom:clamp(48px,8vh,96px);z-index:4;display:flex;flex-direction:column;gap:9px}
.hero__dot{width:9px;height:9px;border:1.5px solid rgba(255,255,255,.85);background:transparent;padding:0;cursor:pointer;border-radius:50%;transition:.3s}
.hero__dot.on{background:#fff}
.hero__cue{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;
  color:rgba(255,255,255,.75);font-family:"Barlow Condensed",Arial,sans-serif;font-style:italic;
  font-weight:700;letter-spacing:.2em;font-size:11px;text-transform:uppercase;text-decoration:none;
  display:flex;flex-direction:column;align-items:center;gap:7px;
}
.hero__cue span{display:block;width:1px;height:34px;background:linear-gradient(180deg,rgba(255,255,255,.8),transparent);animation:cue 2.2s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============ SECTIONS ============ */
section{padding:clamp(72px,11vh,144px) var(--pad)}
.sec__head{max-width:900px;margin-bottom:clamp(40px,6vh,72px)}
.sec__title{font-size:clamp(36px,5.6vw,84px)}
.sec__lead{margin:24px 0 0;font-size:clamp(16px,1.6vw,20px);color:var(--ash);max-width:60ch}

/* ---- pillars ---- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
.pillar{background:var(--paper);padding:clamp(32px,4vw,54px) clamp(24px,3vw,44px)}
.pillar__t{font-size:clamp(28px,3vw,42px);margin-bottom:16px}
.pillar p{margin:0;color:var(--ash);font-size:16px}

/* ---- category grid ---- */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2px}
/* only two tiles — split the width rather than huddling in the first columns */
.cats--two{grid-template-columns:repeat(2,1fr)}
.mega__grid--two{grid-template-columns:repeat(2,minmax(210px,340px))}
/* Flex column (not absolute text) so long category names grow the tile
   instead of overflowing past `overflow:hidden` and getting clipped. */
.cat{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  text-decoration:none;background:var(--ink);overflow:hidden;aspect-ratio:4/3;
}
/* Hover: a slow, shallow push-in rather than a snap-zoom, the veil deepening
   from the foot of the card, and a rule wiping in under the name — the same
   left-origin scaleX the nav links use, so the motion reads as one system.
   The rule reserves its space at all times, so nothing shifts on hover. */
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.cat:hover img,.cat:focus-visible img{transform:scale(1.045)}
.cat__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 38%,rgba(10,10,10,.86) 100%);
  transition:background .55s var(--ease);
}
.cat:hover .cat__veil,.cat:focus-visible .cat__veil{
  background:linear-gradient(180deg,rgba(10,10,10,.06) 0%,rgba(10,10,10,.92) 100%);
}
.cat__txt{position:relative;z-index:2;padding:22px 24px;color:#fff}
.cat__name{font-size:clamp(20px,2vw,27px);line-height:1.02}
.cat__txt::after{
  content:"";display:block;height:2px;width:46px;background:#fff;margin-top:14px;
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.cat:hover .cat__txt::after,.cat:focus-visible .cat__txt::after{transform:scaleX(1)}
.cat:focus-visible{outline:2px solid #fff;outline-offset:-4px}

/* ---- map ---- */
.map{padding:0;position:relative;background:var(--ink)}
/* nothing overlays the map now, so the pin sits dead centre */
.map__frame{width:100%;height:clamp(480px,62vh,680px);border:0;display:block}

/* full-width bar beneath the map */
.mapbar{
  --bar-gap:clamp(20px,2.6vw,44px);
  background:var(--ink);color:#fff;
  padding:clamp(26px,3vw,40px) var(--pad) clamp(24px,2.6vw,34px);
}
.mapbar__main{
  display:flex;flex-wrap:wrap;align-items:flex-start;
  gap:var(--bar-gap);
}
/* the old footer's two lines, now closing out the black bar */
.mapbar__legal{
  display:flex;flex-wrap:wrap;gap:4px 26px;
  margin-top:clamp(26px,3.4vh,44px);
  font-size:12.5px;color:rgba(255,255,255,.5);
}
.mapbar__home{flex:none;display:block;align-self:center;transition:opacity .25s var(--ease)}
.mapbar__home:hover{opacity:.75}
.mapbar__logo{width:clamp(150px,15vw,215px);height:auto}
/* even columns rather than a wrapping flex row, which stranded "Hours" alone */
.mapbar__items{
  /* proportioned to the content: equal columns forced the address onto 4 lines */
  display:grid;grid-template-columns:1.6fr 1.05fr 1.15fr .7fr;flex:1;
  gap:var(--bar-gap);
}
.mapbar__item{min-width:0}
.mapbar__k{
  display:block;font-family:"Barlow Condensed",Arial,sans-serif;font-style:italic;font-weight:800;
  text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:rgba(255,255,255,.55);margin-bottom:6px;
}
.mapbar__v{color:#fff;text-decoration:none;line-height:1.45;font-size:14.5px;display:block;white-space:normal;overflow-wrap:break-word}
a.mapbar__v:hover{text-decoration:underline}
/* a phone number must never break across lines */
.mapbar__item:nth-child(2) .mapbar__v{white-space:nowrap}
/* a wider gap here nudges the Facebook block left, off the button */
.mapbar__acts{display:flex;align-items:flex-start;gap:calc(var(--bar-gap) * 1.7);flex:none}
.mapbar__social{display:flex;flex-direction:column;align-items:flex-start}
.mapbar__fb{display:grid;place-items:center;flex:none;color:#fff;opacity:.85;transition:opacity .25s var(--ease)}
.mapbar__fb:hover{opacity:1}
.mapbar__btn{flex:none;margin-top:17px;background:#fff;color:var(--ink);border-color:#fff;white-space:nowrap}
.mapbar__btn:hover{background:transparent;color:#fff;border-color:#fff}

/* ---- FAQ ---- */
.faq{border-top:1px solid var(--line)}
.faq__empty{
  border-bottom:1px solid var(--line);
  padding:clamp(56px,9vh,110px) 0;
  display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;
}
.faq__mark{
  font-family:"Barlow Condensed",Arial,sans-serif;font-weight:900;font-style:italic;
  font-size:clamp(48px,7vw,86px);line-height:1;color:var(--line-strong);
}
.faq__note{
  font-family:"Barlow Condensed",Arial,sans-serif;font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--ash);margin:0;
}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(30px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
/* The nav switches to the burger earlier than the rest of the layout does.
   With two long dropdown labels the inline row needs ~1270px beside the logo,
   so the burger takes over below 1300. Layout rules stay at 900px below. */
@media(max-width:1300px){
  .burger{
    /* flex, not grid: grid's stretched auto-rows spread the bars wider than the
       ±7px translate below, so the X never closed */
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    margin-left:auto;width:44px;height:44px;
    background:none;border:0;cursor:pointer;gap:5px;
  }
  .burger i{display:block;width:24px;height:2px;background:#fff;transition:.3s var(--ease)}
  .hdr.solid .burger i{background:var(--ink)}
  .burger.x i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.x i:nth-child(2){opacity:0}
  .burger.x i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav{
    position:fixed;top:var(--head);left:0;right:0;background:var(--paper);
    flex-direction:column;align-items:stretch;gap:0;padding:14px var(--pad) 30px;
    border-bottom:1px solid var(--line);margin:0;
    opacity:0;visibility:hidden;transform:translateY(-12px);transition:.35s var(--ease);
    max-height:calc(100vh - var(--head));overflow-y:auto;
  }
  .nav.open{opacity:1;visibility:visible;transform:none}
  .nav a,.nav button{color:var(--ink) !important;font-size:20px;padding:14px 0;text-align:left;width:100%;white-space:normal}
  .nav a::after,.nav button::after{display:none}
  .nav__cta{border:2px solid var(--ink) !important;text-align:center !important;margin:12px 0 0;padding:14px !important}
  /* Once the nav collapses the magnifier steps out of it and sits beside the
     burger — but on its own an icon reads as decoration, so here it carries the
     word in a bubble. The label types itself in on first load. */
  .nav .srch__btn{display:none}
  .burger{margin-left:0}
  .hdr{gap:6px}
  .hdr__search{
    display:inline-flex;align-items:center;gap:8px;margin-left:auto;
    width:auto;height:38px;padding:0 15px 0 12px;border-radius:999px;
    border:1.5px solid rgba(255,255,255,.5);background:rgba(255,255,255,.1);
    -webkit-backdrop-filter:saturate(160%) blur(10px);backdrop-filter:saturate(160%) blur(10px);
    transition:transform .3s var(--ease),background .35s var(--ease),border-color .35s var(--ease);
  }
  .hdr.solid .hdr__search{border-color:var(--line-strong);background:rgba(10,10,10,.045)}
  .hdr__search:hover{transform:scale(1.045);background:rgba(255,255,255,.2)}
  .hdr.solid .hdr__search:hover{background:rgba(10,10,10,.09)}
  .hdr__search svg{width:16px;height:16px}
  /* the ghost holds the full word's width from the first frame, so the header
     never reflows while the letters land */
  .hdr__search .srch__label{
    display:block;position:relative;
    font-family:"Barlow Condensed",Arial,sans-serif;font-weight:800;font-style:italic;
    text-transform:uppercase;letter-spacing:.15em;font-size:12px;line-height:1;
  }
  .srch__ghost{visibility:hidden}
  .srch__type{position:absolute;left:0;top:0;white-space:nowrap}
  /* the caret only exists while it is typing */
  .srch__label.typing .srch__type::after{
    content:"";display:inline-block;width:1.5px;height:11px;margin-left:2px;
    background:currentColor;vertical-align:-1px;animation:srchCaret .78s steps(1) infinite;
  }
  @keyframes srchCaret{0%,50%{opacity:1}51%,100%{opacity:0}}
}

@media(max-width:900px){
  :root{--head:70px}
  .srch__x{top:12px}
  .srch__keys{display:none}
  .mega{padding:24px var(--pad) 34px}
  .mega__grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .mega__label{font-size:14px;padding:10px 11px 12px}
  .hdr__logo{height:38px}
  .hero__dots,.hero__cue{display:none}
  .hero__acts{flex-direction:column;align-items:stretch}
  .hero__acts .btn{text-align:center}
  .cat__name{font-size:21px}
  .cat__txt{padding:18px 20px}
  .map__frame{height:340px}
  .mapbar__main{display:block}
  .mapbar__home{margin-bottom:24px}
  .mapbar__logo{width:190px}
  .mapbar__items{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .mapbar__item{min-width:0}
  /* the address is the only long value — give it the full row so it stops laddering */
  .mapbar__item:first-child{grid-column:1/-1}
  .mapbar__acts{width:100%;margin-top:26px;gap:18px}
  .mapbar__btn{flex:1;text-align:center}
  .cats{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  .pillars{grid-template-columns:1fr}
}
/* Small phones: the bubble tightens so the logo, the word and the burger all fit
   on one bar. Below 360 the bar itself gives up padding and a few logo pixels —
   at 320 the row is 353px wide otherwise and the burger walks off the edge. */
@media(max-width:390px){
  .hdr__search{height:34px;padding:0 11px 0 9px;gap:6px}
  .hdr__search svg{width:15px;height:15px}
  .hdr__search .srch__label{font-size:11px;letter-spacing:.1em}
}
@media(max-width:360px){
  .hdr{padding:0 14px}
  .hdr__logo{height:32px}
  .burger{width:38px}
}

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