/* ==========================================================================
   TEXAS BEST HIBACHI
   Dark hibachi visual language · brand orange #ED611A
   ========================================================================== */

/* ---------- TOKENS ---------- */
:root{
  --ink:      #0C0C0C;   /* matches the logo backdrop exactly */
  --ink-2:    #121212;
  --ink-3:    #191919;
  --char:     #1F1F1F;
  --cream:    #F2ECDB;
  --cream-2:  #FAF6F3;
  --dim:      rgba(242,236,219,.60);
  --dim-2:    rgba(242,236,219,.38);
  --line:     rgba(242,236,219,.11);
  --line-2:   rgba(242,236,219,.06);

  --orange:   #ED611A;
  --flame:    #F5821F;
  --gold:     #F5A623;
  --ember:    #C0350A;

  --f-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --f-script:  'Kaushan Script', 'Brush Script MT', cursive;
  --f-mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --nav-h: 96px;
  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1320px;
  --r: 14px;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-2: cubic-bezier(.65,.05,.36,1);
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.lenis{ scroll-behavior:auto; }
body{
  font-family:var(--f-body);
  background:var(--ink);
  color:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* height:auto is required: the width/height HTML attributes (there to reserve
   layout space and stop CLS) otherwise win over any CSS aspect-ratio.
   Rules below that deliberately set height:100% are more specific, so they still win. */
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
picture{ display:contents; }
a{ color:inherit; text-decoration:none; }
button,input,select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul{ list-style:none; }
::selection{ background:var(--orange); color:#fff; }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:#2e2e2e; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--orange); }

/* ---------- TYPE ---------- */
.display{
  font-family:var(--f-display);
  font-weight:400;
  line-height:.86;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.h-xl{ font-size:clamp(3.2rem, 11vw, 10rem); }
.h-lg{ font-size:clamp(2.6rem, 7.5vw, 6.2rem); }
.h-md{ font-size:clamp(2rem, 4.6vw, 3.6rem); }
.h-sm{ font-size:clamp(1.5rem, 3vw, 2.2rem); }

.script{ font-family:var(--f-script); text-transform:none; letter-spacing:0; line-height:1.2; }
.o{ color:var(--orange); }
.cream{ color:var(--cream); }

/* Eyebrow — the hibachigrillhouston.com signature label above every heading */
.eyebrow{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--orange);
  display:flex; align-items:center; gap:.75rem;
  margin-bottom:1rem;
}
.eyebrow::before{ content:''; width:34px; height:1px; background:var(--orange); flex:none; }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{ content:''; width:34px; height:1px; background:var(--orange); flex:none; }

.lede{ font-size:clamp(1rem,1.15vw,1.12rem); color:var(--dim); max-width:60ch; }

/* ---------- LAYOUT ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(72px, 11vh, 140px); position:relative; }
.section--tight{ padding-block:clamp(52px,7vh,90px); }
.center{ text-align:center; }
.sec-head{ margin-bottom:clamp(36px,5vw,64px); }
.sec-head.center{ display:flex; flex-direction:column; align-items:center; }

/* Faint grid overlay, as on the reference hero */
.grid-lines{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, var(--line-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-2) 1px, transparent 1px);
  background-size:clamp(70px,8vw,116px) clamp(70px,8vw,116px);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
}

/* ---------- BUTTONS ---------- */
.btn{
  --bg:var(--orange); --fg:#fff;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 2.1rem; border-radius:999px;
  background:var(--bg); color:var(--fg);
  font-family:var(--f-mono); font-size:.78rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; white-space:nowrap;
  overflow:hidden; isolation:isolate;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), color .35s;
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(100deg, var(--gold), var(--orange) 55%, var(--ember));
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 14px 34px -10px rgba(237,97,26,.65); }
.btn:hover::before{ transform:translateY(0); }
.btn:active{ transform:translateY(-1px); }

.btn--ghost{ --bg:transparent; --fg:var(--cream); border:1px solid var(--line); }
.btn--ghost:hover{ --fg:#fff; border-color:transparent; }
.btn--cream{ --bg:var(--cream); --fg:var(--ink); }
.btn--cream:hover{ --fg:#fff; }
.btn--sm{ padding:.68rem 1.35rem; font-size:.68rem; }
.btn--lg{ padding:1.2rem 2.7rem; font-size:.84rem; }
.btn--block{ width:100%; }
.btn svg{ width:15px; height:15px; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  background:transparent;
  transition:transform .5s var(--ease), background .4s, border-color .4s, height .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-solid{
  background:rgba(12,12,12,.92);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
  height:82px;
}
.nav.is-hidden{ transform:translateY(-105%); }
.nav__in{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; gap:clamp(16px,3vw,42px); }

.brand{ display:flex; align-items:center; gap:.7rem; flex:none; }
.brand img{
  height:74px; width:auto; border-radius:8px;
  transition:height .4s var(--ease);
  /* feather the photo's edges so it melts into the dark bar */
  mask-image:radial-gradient(ellipse 68% 68% at 50% 50%, #000 62%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 68% 68% at 50% 50%, #000 62%, transparent 100%);
}
.nav.is-solid .brand img{ height:64px; }
.brand__txt{ display:none; }
.brand__txt b{ font-family:var(--f-display); font-size:1.32rem; letter-spacing:.02em; display:block; line-height:1; text-transform:uppercase; }
.brand__txt span{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.3em; color:var(--orange); text-transform:uppercase; }
@media (min-width:1240px){ .brand__txt{ display:block; } }

.nav__links{ display:none; gap:clamp(12px,1.5vw,24px); margin-right:auto; flex-wrap:nowrap; }
@media (min-width:1060px){ .nav__links{ display:flex; } }
.nav__links a{
  position:relative; white-space:nowrap;
  font-family:var(--f-mono); font-size:clamp(.68rem,.82vw,.8rem); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
  padding-block:.45rem; transition:color .3s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--orange); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__links a:hover, .nav__links a.is-active{ color:var(--cream); }
.nav__links a:hover::after, .nav__links a.is-active::after{ transform:scaleX(1); transform-origin:left; }

.nav__act{ display:flex; align-items:center; gap:.6rem; margin-left:auto; }
@media (min-width:1060px){ .nav__act{ margin-left:0; } }

/* Burger */
.burger{ width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; }
@media (min-width:1060px){ .burger{ display:none; } }
.burger i{ display:block; width:16px; height:1.5px; background:var(--cream); position:relative; transition:background .3s; }
.burger i::before,.burger i::after{ content:''; position:absolute; left:0; width:16px; height:1.5px; background:var(--cream); transition:transform .4s var(--ease); }
.burger i::before{ top:-5px; } .burger i::after{ top:5px; }
.burger.on i{ background:transparent; }
.burger.on i::before{ transform:translateY(5px) rotate(45deg); }
.burger.on i::after{ transform:translateY(-5px) rotate(-45deg); }

/* Mobile drawer */
.mnav{
  position:fixed; inset:0; z-index:99; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; gap:.3rem;
  padding:var(--nav-h) var(--pad) 2rem;
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease);
  pointer-events:none;
}
.mnav.on{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.mnav a{
  font-family:var(--f-display); font-size:clamp(2.2rem,10vw,3.4rem);
  text-transform:uppercase; line-height:1.1; color:var(--cream);
  opacity:0; transform:translateY(28px); transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
  border-bottom:1px solid var(--line-2); padding-block:.35rem;
}
.mnav.on a{ opacity:1; transform:none; }
.mnav a:hover{ color:var(--orange); }
.mnav__foot{ margin-top:2rem; font-family:var(--f-mono); font-size:.75rem; color:var(--dim); letter-spacing:.1em; }
.mnav__foot a{ font-family:var(--f-mono); font-size:.75rem; border:0; color:var(--orange); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.hero__bg{ position:absolute; inset:-8% 0 -8%; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.44; }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse 62% 46% at 50% 48%, rgba(12,12,12,.80), rgba(12,12,12,.30) 62%, transparent 82%),
    linear-gradient(to bottom, rgba(12,12,12,.92) 0%, rgba(12,12,12,.42) 30%, rgba(12,12,12,.62) 70%, var(--ink) 99%);
}
/* warm ember glow behind the type */
.hero__glow{
  position:absolute; z-index:1; left:50%; top:52%; transform:translate(-50%,-50%);
  width:min(90vw,900px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(237,97,26,.20), transparent 66%);
  filter:blur(30px); animation:pulse 7s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.65; transform:translate(-50%,-50%) scale(1); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.09); } }

.hero__in{ position:relative; z-index:2; width:100%; text-align:center; padding-top:var(--nav-h); }
.hero__welcome{ font-family:var(--f-script); font-size:clamp(1.5rem,3.6vw,2.6rem); color:var(--orange); margin-bottom:.1em; text-shadow:0 2px 24px rgba(0,0,0,.8); }
.hero h1{ margin-bottom:1.5rem; text-shadow:0 4px 40px rgba(0,0,0,.72); }
.hero h1 .l2{ display:block; color:var(--orange); }
.hero__sub{
  font-family:var(--f-mono); font-size:clamp(.66rem,1.5vw,.86rem);
  letter-spacing:.3em; text-transform:uppercase; color:var(--cream);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.6rem 1rem;
  margin-bottom:2.2rem;
}
.hero__sub i{ width:5px; height:5px; background:var(--orange); border-radius:50%; display:inline-block; font-style:normal; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; }

.hero__scroll{
  position:absolute; z-index:2; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; color:var(--dim-2);
}
.hero__scroll span::after{ content:''; display:block; width:1px; height:44px; margin:.6rem auto 0;
  background:linear-gradient(var(--orange), transparent); animation:drop 2.1s var(--ease) infinite; }
@keyframes drop{ 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; } }

/* Page hero (menu page) — deliberately short so the category bar and the
   first row of dishes are visible without scrolling. */
.phero{ position:relative; padding:calc(var(--nav-h) + clamp(22px,3.4vw,40px)) 0 clamp(20px,2.6vw,32px); overflow:hidden; }
.phero__bg{ position:absolute; inset:0; z-index:0; }
.phero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.24; }
.phero::after{ content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, rgba(12,12,12,.74), var(--ink) 94%); }
.phero .wrap{ position:relative; z-index:2; }
.phero__row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:.8rem 2.5rem; }
.phero__row .lede{ max-width:34ch; font-size:.92rem; }
.phero h1{ line-height:.84; }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{
  border-block:1px solid var(--line); background:var(--ink-2);
  padding-block:1.05rem; overflow:hidden; display:flex; user-select:none;
}
.marquee__t{
  display:flex; align-items:center; gap:2.4rem; flex:none; padding-right:2.4rem;
  animation:slide 34s linear infinite;
  font-family:var(--f-display); font-size:clamp(1.05rem,2.3vw,1.7rem);
  text-transform:uppercase; letter-spacing:.03em; white-space:nowrap;
}
.marquee:hover .marquee__t{ animation-play-state:paused; }
.marquee__t em{ font-style:normal; color:var(--orange); }
.marquee__t s{ text-decoration:none; color:var(--orange); font-size:.7em; }
@keyframes slide{ to{ transform:translateX(-100%); } }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about__grid{ display:grid; gap:clamp(32px,5vw,72px); align-items:center; }
@media (min-width:900px){ .about__grid{ grid-template-columns:.92fr 1fr; } }
.about__media{ position:relative; border-radius:var(--r); overflow:hidden; }
.about__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; transform:scale(1.06); }
.about__media::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  border:1px solid var(--line); box-shadow:inset 0 0 90px rgba(12,12,12,.5); pointer-events:none;
}
.about__quote{ font-family:var(--f-script); font-size:clamp(1.25rem,2.3vw,1.7rem); color:var(--orange); margin:1.5rem 0 0; }

.pillars{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:2.6rem; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
@media (min-width:620px){ .pillars{ grid-template-columns:repeat(4,1fr); } }
.pillar{ background:var(--ink); padding:1.35rem 1rem; text-align:center; transition:background .4s; }
.pillar:hover{ background:var(--ink-3); }
.pillar svg{ width:26px; height:26px; margin:0 auto .7rem; stroke:var(--orange); fill:none; stroke-width:1.6; }
.pillar b{ display:block; font-family:var(--f-display); font-size:.95rem; letter-spacing:.04em; text-transform:uppercase; }
.pillar span{ display:block; font-family:var(--f-mono); font-size:.54rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim-2); margin-top:.2rem; }

/* Slow drift on the story photo — a stand-in for real footage of the griddle. */
@media (prefers-reduced-motion:no-preference){
  .about__media--motion img{ animation:driftphoto 26s ease-in-out infinite alternate; }
}
@keyframes driftphoto{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to  { transform:scale(1.18) translate3d(-2.2%,-2.6%,0); }
}

/* ==========================================================================
   FAN FAVORITES — four across, then three centred (per the client's layout)
   ========================================================================== */
/* Four across, then three centred. Eight tracks with every tile spanning two
   keeps all seven the same width — offsetting with a margin would have made the
   last row's tiles half-width. Tile 5 starts at track 2, so the final row sits
   inset by one track on each side. */
.fav-grid{ display:grid; gap:clamp(12px,1.5vw,20px); grid-template-columns:repeat(8,1fr); }
.fav-grid > *{ grid-column:span 2; }
.fav-grid > :nth-child(5){ grid-column:2 / span 2; }

@media (max-width:1000px){
  .fav-grid{ grid-template-columns:repeat(4,1fr); }
  .fav-grid > *,
  .fav-grid > :nth-child(5){ grid-column:span 2; }
}
@media (max-width:560px){
  .fav-grid{ grid-template-columns:1fr; }
  .fav-grid > *,
  .fav-grid > :nth-child(5){ grid-column:auto; }
}

.fav{
  position:relative; overflow:hidden; isolation:isolate;
  border:1px solid var(--line); border-radius:var(--r); background:var(--ink-2);
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}
.fav:hover{ transform:translateY(-6px); border-color:rgba(237,97,26,.5);
  box-shadow:0 22px 44px -24px rgba(0,0,0,.9); }
.fav__img{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--ink-3); }
.fav__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.fav:hover .fav__img img{ transform:scale(1.06); }
.fav__img svg{ width:52px; height:52px; margin:auto; stroke:var(--orange); fill:none; stroke-width:1.1; opacity:.6; }
.fav__body{ padding:1rem 1.1rem 1.2rem; text-align:center; }
.fav__body h3{ font-family:var(--f-display); font-size:1.12rem; line-height:1.12;
  text-transform:uppercase; letter-spacing:.02em; color:var(--orange); }
.fav__body p{ font-size:.82rem; line-height:1.55; color:var(--dim); margin-top:.5rem; }

/* ---------- how we cook (Our Dishes) ---------- */
.how-grid{ display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); }
.how{ background:var(--ink); padding:1.3rem 1.15rem; }
.how h3{ font-family:var(--f-display); font-size:1.05rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--orange); margin-bottom:.6rem; }
.how p{ font-size:.85rem; line-height:1.6; color:var(--dim); }
.how ul{ display:grid; gap:.3rem; }
.how li{ position:relative; padding-left:1rem; font-size:.85rem; color:var(--dim); }
.how li::before{ content:''; position:absolute; left:0; top:.55em;
  width:5px; height:5px; border-radius:50%; background:var(--orange); }
.how-shot{ margin-top:clamp(20px,3vw,34px); border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); }
.how-shot img{ width:100%; height:auto; display:block; }

/* ---------- the truck's contact list ---------- */
.truck__contact{ display:grid; gap:.55rem; margin-top:1.8rem; }
.truck__contact a, .truck__contact .is-soon{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.06em; color:var(--dim);
  transition:color .3s;
}
.truck__contact a:hover{ color:var(--orange); }
.truck__contact svg{ width:17px; height:17px; flex:none; color:var(--orange); }
.truck__contact .is-soon{ opacity:.6; }
.truck__contact small{ font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim-2); }

/* delivery partner marks */
.deliv__mark{ display:grid; place-items:center; width:30px; height:30px; margin-bottom:.15rem; }
.deliv__mark svg{ width:26px; height:26px; color:var(--orange); }

/* ==========================================================================
   PRODUCT GRID (menu page)
   ========================================================================== */
/* Sits flush under the 66px solid nav so the two read as one bar.
   (The nav does not auto-hide on pages that have this — otherwise the bar
   detaches and floats with a gap above it.) */
.cat-bar{
  position:sticky; top:var(--cat-top, 66px); z-index:40;
  background:rgba(12,12,12,.94); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line); margin-bottom:clamp(30px,4vw,52px);
}
.cat-bar__in{ display:flex; gap:.4rem; overflow-x:auto; padding:.6rem var(--pad);
  max-width:var(--maxw); margin-inline:auto; scrollbar-width:none; }
.cat-bar__in::-webkit-scrollbar{ display:none; }
.cat-bar a{
  flex:none; padding:.55rem 1.05rem; border-radius:999px; border:1px solid var(--line);
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); transition:.3s;
}
.cat-bar a:hover{ color:var(--cream); border-color:var(--dim-2); }
.cat-bar a.is-active{ background:var(--orange); border-color:var(--orange); color:#fff; }

.cat{ scroll-margin-top:132px; margin-bottom:clamp(48px,7vw,90px); }
.cat__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.2rem; padding-bottom:1rem;
  border-bottom:1px solid var(--line); margin-bottom:clamp(22px,3vw,38px); }
.cat__head h2{ font-family:var(--f-display); font-size:clamp(1.9rem,4vw,3rem); text-transform:uppercase; line-height:1; }
.cat__head p{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); }
.cat__head b{ margin-left:auto; font-family:var(--f-mono); font-size:.68rem; color:var(--dim-2); letter-spacing:.14em; }

.grid{ display:grid; gap:clamp(14px,1.7vw,24px); grid-template-columns:repeat(auto-fit,minmax(min(100%,262px),1fr)); }

/* A category with one item shouldn't sit in a 4-up grid leaving three empty
   columns — it becomes one full-width horizontal card instead. */
.grid--feature{ grid-template-columns:1fr; }
@media (min-width:760px){
  /* two class selectors so these beat the base .pcard rules further down */
  .grid--feature .pcard--feature{ flex-direction:row; align-items:stretch; min-height:340px; }
  .grid--feature .pcard--feature .pcard__img{ flex:0 0 46%; aspect-ratio:auto; }
  .grid--feature .pcard--feature .pcard__img img{ height:100%; }
  .grid--feature .pcard--feature .pcard__body{ justify-content:center; padding:clamp(1.5rem,3.2vw,2.6rem); }
  .grid--feature .pcard--feature h3{ font-size:clamp(1.6rem,3vw,2.4rem); }
  .grid--feature .pcard--feature .pcard__desc{ font-size:.98rem; max-width:44ch; flex:0 1 auto; margin:.7rem 0 1.7rem; }
  .grid--feature .pcard--feature .pcard__foot{ justify-content:flex-start; gap:1.5rem; margin-top:0; }
  .grid--feature .pcard--feature .pcard__desc{ flex:0 0 auto; }
  .grid--feature .pcard--feature .pcard__price{ font-size:1.45rem; }
}

/* small items (sauces, drinks) — narrower cards so a row fills out */
.grid--compact{ grid-template-columns:repeat(auto-fit,minmax(min(100%,178px),1fr)); }
.grid--compact .pcard__img{ aspect-ratio:1; }
.grid--compact h3{ font-size:1rem; }
.grid--compact .pcard__body{ padding:.85rem .9rem 1rem; }
.grid--compact .pcard__desc{ font-size:.76rem; margin:.35rem 0 .8rem; }
.grid--compact .pcard__price{ font-size:.9rem; }

/* add-on price list */
.rows{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; grid-template-columns:1fr; }
@media (min-width:680px){ .rows{ grid-template-columns:1fr 1fr; } }
.rows > :last-child:nth-child(odd){ grid-column:1 / -1; }
.row{ display:flex; align-items:center; gap:.9rem; background:var(--ink-2);
  padding:.95rem 1.15rem; transition:background .35s; }
.row:hover{ background:var(--ink-3); }
.row__name{ font-weight:600; font-size:.95rem; white-space:nowrap; }
.row__dot{ flex:1; height:1px; background:repeating-linear-gradient(to right,var(--line-2) 0 4px,transparent 4px 8px); }
.row__price{ font-family:var(--f-mono); font-size:.92rem; font-weight:700; letter-spacing:.04em; }
.add--xs{ padding:.42rem .8rem; font-size:.58rem; letter-spacing:.13em; }
.add--xs svg{ width:10px; height:10px; }

.pcard{
  position:relative; display:flex; flex-direction:column;
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}
.pcard:hover{ transform:translateY(-6px); border-color:rgba(237,97,26,.45); box-shadow:0 22px 44px -22px rgba(0,0,0,.9); }
.pcard__img{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--ink-3); }
.pcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.pcard:hover .pcard__img img{ transform:scale(1.06); }
/* photo-less items (sides, bottled water) get a branded tile instead */
.pcard__img--none{ display:grid; place-items:center;
  background:radial-gradient(circle at 50% 42%, rgba(237,97,26,.2), transparent 62%), var(--ink-3); }
.pcard__img--none svg{ width:52px; height:52px; stroke:var(--orange); fill:none; stroke-width:1.2; opacity:.85; }

.pcard__tag{
  position:absolute; top:10px; left:10px; z-index:2;
  padding:.32rem .68rem; border-radius:999px; background:var(--orange); color:#fff;
  font-family:var(--f-mono); font-size:.56rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.pcard__body{ display:flex; flex-direction:column; flex:1; padding:1.05rem 1.1rem 1.15rem; }
.pcard h3{ font-family:var(--f-display); font-size:1.18rem; text-transform:uppercase; line-height:1.08; letter-spacing:.01em; }
.pcard__desc{ font-size:.83rem; color:var(--dim); margin:.45rem 0 1rem; flex:1; }
.pcard__foot{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:auto; }
.pcard__price{ font-family:var(--f-mono); font-size:1.02rem; font-weight:700; letter-spacing:.04em; }

/* "Order" — opens the Clover store in a new tab */
.add{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.6rem 1.05rem; border-radius:999px;
  border:1px solid var(--orange); color:var(--orange); background:transparent;
  font-family:var(--f-mono); font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  white-space:nowrap; transition:.35s var(--ease);
}
.add:hover{ background:var(--orange); color:#fff; transform:translateY(-2px); }
.add svg{ width:12px; height:12px; flex:none; }

/* ==========================================================================
   SPLIT / TRUCK / LOCATION
   ========================================================================== */
.band{ position:relative; overflow:hidden; }
.band__bg{ position:absolute; inset:-14% 0; z-index:0; }
.band__bg img{ width:100%; height:100%; object-fit:cover; opacity:.4; }
.band::after{ content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to right, var(--ink) 4%, rgba(12,12,12,.72) 46%, rgba(12,12,12,.45)); }
.band .wrap{ position:relative; z-index:2; }
.band__box{ max-width:600px; }

/* Text alone on one side reads oddly — every prose block gets a visual partner. */
.split__grid{ display:grid; gap:clamp(30px,4.5vw,66px); align-items:center; }
@media (min-width:900px){
  .split__grid{ grid-template-columns:1fr 1.05fr; }
  .split__grid.is-flipped .split__copy{ order:2; }
}
.split__media{ position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); }
.split__media img{ width:100%; aspect-ratio:3/2; object-fit:cover; transform:scale(1.06); }
.split__media::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(to top, rgba(12,12,12,.55), transparent 55%); }
.split__badge{
  position:absolute; z-index:2; left:16px; bottom:16px;
  display:flex; align-items:center; gap:.55rem;
  padding:.6rem 1rem; border-radius:999px;
  background:rgba(12,12,12,.74); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
}

/* compact fact list that sits under a paragraph so the column has weight */
.facts{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; margin-top:2rem; grid-template-columns:repeat(3,1fr); }
.fact{ background:var(--ink); padding:1.05rem .9rem; }
.fact b{ display:block; font-family:var(--f-display); font-size:clamp(1.25rem,2.4vw,1.7rem); color:var(--orange); line-height:1; }
.fact span{ display:block; margin-top:.35rem; font-family:var(--f-mono); font-size:.55rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim-2); }

.loc__grid{ display:grid; gap:clamp(26px,4vw,54px); }
@media (min-width:880px){ .loc__grid{ grid-template-columns:1fr 1fr; align-items:center; } }
.loc__card{ border:1px solid var(--line); border-radius:var(--r); background:var(--ink-2); overflow:hidden; }
.loc__row{ display:flex; gap:1rem; padding:1.25rem 1.4rem; border-bottom:1px solid var(--line); align-items:flex-start; }
.loc__row:last-child{ border-bottom:0; }
.loc__row svg{ width:19px; height:19px; stroke:var(--orange); fill:none; stroke-width:1.6; flex:none; margin-top:3px; }
.loc__row dt{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--dim-2); margin-bottom:.28rem; }
.loc__row dd{ font-size:1.02rem; }
.loc__row dd a:hover{ color:var(--orange); }
.hours{ display:grid; gap:.3rem; margin-bottom:.2rem; }
.hrow{ display:flex; align-items:baseline; gap:.75rem; font-size:.92rem; }
.hrow span{ flex:none; min-width:5.5rem; color:var(--dim); }
.hrow b{ font-weight:600; }
.hrow.is-off b{ color:var(--dim-2); font-weight:400; }

.badge{
  display:flex; width:fit-content; align-items:center; gap:.45rem; margin-top:.55rem;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
}
.badge i{ width:7px; height:7px; border-radius:50%; background:#39C46B; box-shadow:0 0 0 0 rgba(57,196,107,.6); animation:ring 2.2s infinite; }
.badge.shut i{ background:#8a8a8a; animation:none; box-shadow:none; }
@keyframes ring{ 70%{ box-shadow:0 0 0 8px rgba(57,196,107,0); } 100%{ box-shadow:0 0 0 0 rgba(57,196,107,0); } }

/* the printed menu shown beside the location card */
/* embedded map — inverted so it reads as part of the dark theme */
.loc__map{ position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  background:var(--ink-3); min-height:clamp(320px,42vh,460px); }
.loc__map iframe{ display:block; width:100%; height:100%; min-height:inherit; border:0;
  filter:invert(92%) hue-rotate(180deg) saturate(.75) contrast(.92); }
.loc__map-cta{ position:absolute; z-index:2; left:14px; bottom:14px; }
@media (prefers-reduced-motion:no-preference){
  .loc__map iframe{ transition:filter .4s var(--ease); }
}

.loc__poster{ position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--ink-2); }
.loc__poster img{ width:100%; height:auto; max-width:620px; margin-inline:auto; object-fit:contain; display:block; }

/* ---------- GALLERY ---------- */
.gal{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(8px,1vw,14px); }
@media (min-width:760px){ .gal{ grid-template-columns:repeat(4,1fr); } }
.gal a{ position:relative; overflow:hidden; border-radius:10px; aspect-ratio:1; display:block; }
.gal a:nth-child(1),.gal a:nth-child(6){ grid-row:span 2; aspect-ratio:1/2.06; }
@media (max-width:759px){ .gal a:nth-child(1),.gal a:nth-child(6){ grid-row:span 1; aspect-ratio:1; } }
.gal img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease), filter .5s; filter:grayscale(.22) brightness(.9); }
.gal a:hover img{ transform:scale(1.08); filter:none; }

/* ==========================================================================
   OFFERS · DELIVERY
   ========================================================================== */
.offers{ display:grid; gap:clamp(14px,1.8vw,24px); grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.offer{
  position:relative; overflow:hidden; isolation:isolate;
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(160deg, var(--ink-3), var(--ink) 72%);
  padding:clamp(1.4rem,2.6vw,2.1rem); transition:transform .5s var(--ease), border-color .4s;
}
.offer:hover{ transform:translateY(-5px); border-color:rgba(237,97,26,.5); }
.offer::before{ content:''; position:absolute; z-index:-1; right:-30%; top:-60%;
  width:70%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(237,97,26,.22), transparent 66%); filter:blur(14px); }
.offer__badge{
  display:inline-block; margin-bottom:.9rem; padding:.4rem .9rem; border-radius:999px;
  background:var(--orange); color:#fff;
  font-family:var(--f-display); font-size:1.15rem; letter-spacing:.03em;
}
.offer h3{ font-family:var(--f-display); font-size:clamp(1.25rem,2.4vw,1.7rem);
  text-transform:uppercase; line-height:1.1; margin-bottom:.5rem; }
.offer p{ font-size:.92rem; color:var(--dim); }

.deliv{ display:grid; gap:clamp(26px,4vw,54px); align-items:center; }
@media (min-width:880px){ .deliv{ grid-template-columns:1.05fr .95fr; } }
.deliv__apps{ display:grid; gap:.7rem; grid-template-columns:1fr 1fr; margin-bottom:1rem; }
.deliv__app{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  padding:1.15rem .9rem; border:1px solid var(--line); border-radius:var(--r);
  background:var(--ink-2); transition:.35s var(--ease);
}
.deliv__app:hover{ border-color:var(--orange); transform:translateY(-3px); }
.deliv__app b{ font-family:var(--f-display); font-size:1.12rem; text-transform:uppercase; letter-spacing:.02em; }
.deliv__app small{ font-family:var(--f-mono); font-size:.56rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim-2); }
.deliv__app.is-soon{ opacity:.72; }
.deliv__app svg{ width:13px; height:13px; stroke:var(--orange); }
.deliv__cta{ display:flex; flex-wrap:wrap; gap:.6rem; }

/* review QR */
.qr{ margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
.qr img, .qr canvas{ margin:0 auto .55rem; border-radius:8px; display:block; }
.qr__cap{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim-2); }
.qr__cap--todo{ text-transform:none; letter-spacing:0; font-size:.72rem; line-height:1.5; }
.qr__cap--todo code{ color:var(--orange); }

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.rnotice{
  border:1px solid rgba(245,166,35,.42); background:rgba(245,166,35,.09);
  border-radius:var(--r); padding:.9rem 1.1rem; margin-bottom:clamp(20px,2.6vw,32px);
  font-size:.84rem; line-height:1.55; color:var(--cream);
}
.rnotice strong{ color:var(--gold); }
.rnotice code{ font-family:var(--f-mono); font-size:.78em; color:var(--orange); }

.rgrid__cols{ columns:1; column-gap:clamp(12px,1.5vw,20px); }
@media (min-width:700px){ .rgrid__cols{ columns:2; } }
@media (min-width:1040px){ .rgrid__cols{ columns:3; } }

.rcard{
  break-inside:avoid; margin-bottom:clamp(12px,1.5vw,20px);
  border:1px solid var(--orange); border-radius:var(--r);
  background:var(--ink-2); padding:1.15rem 1.25rem 1.25rem;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.rcard:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -22px rgba(237,97,26,.6); }

.rcard--sum{ text-align:center; }
.rcard--sum h3{ font-family:var(--f-display); font-size:1.5rem; line-height:1.15;
  text-transform:none; margin:.7rem 0 .5rem; }
.rcard__g{ display:block; width:76px; margin:0 auto; }
.rcard__g svg{ width:100%; height:auto; }
.rcard__g--sm{ width:15px; margin:0; flex:none; }
.rcard__rate{ display:flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--f-mono); font-size:1.05rem; font-weight:700; }
.rcard__count{ font-size:.82rem; color:var(--dim); margin:.4rem 0 1rem; }
.rcard__count a{ color:var(--dim); border-bottom:1px solid var(--line); transition:color .3s; }
.rcard__count a:hover{ color:var(--orange); }

.rcard__head{ display:flex; align-items:center; gap:.7rem; margin-bottom:.7rem; }
.rcard__av{ width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--ink-3); border:1px solid var(--line);
  font-family:var(--f-display); font-size:1rem; color:var(--cream); }
.rcard__head b{ display:block; font-size:.92rem; font-weight:600; }
.rcard__head small{ font-family:var(--f-mono); font-size:.66rem; color:var(--dim-2); }

.stars{ display:inline-flex; gap:2px; color:var(--orange); }
.stars svg{ width:15px; height:15px; }

.rcard__text{ font-size:.88rem; line-height:1.6; color:var(--cream); margin:.6rem 0 .9rem; }
.rcard__reply{ margin:.85rem 0 .2rem; padding:.75rem .85rem; border-radius:10px;
  background:rgba(242,236,219,.045); border-left:2px solid var(--orange); }
.rcard__reply b{ display:block; font-family:var(--f-mono); font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--orange); margin-bottom:.35rem; }
.rcard__reply p{ font-size:.82rem; line-height:1.55; color:var(--dim); }

.rcard__foot{ display:flex; align-items:center; gap:.5rem; padding-top:.8rem;
  border-top:1px solid var(--line); font-size:.78rem; color:var(--dim-2); }
.rcard__foot a{ display:inline-flex; align-items:center; gap:.5rem; color:inherit; transition:color .3s; }
.rcard__foot a:hover{ color:var(--orange); }

/* ---------- CTA ---------- */
.cta{ position:relative; text-align:center; overflow:hidden;
  background:linear-gradient(160deg, var(--ink-3), var(--ink) 70%); border-block:1px solid var(--line); }
.cta::before{ content:''; position:absolute; left:50%; top:-40%; transform:translateX(-50%);
  width:min(120vw,1000px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(237,97,26,.16), transparent 62%); filter:blur(20px); }
.cta .wrap{ position:relative; z-index:1; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ background:var(--ink-2); border-top:1px solid var(--line); padding-top:clamp(50px,7vw,84px); }
.foot__grid{ display:grid; gap:clamp(30px,4vw,48px); padding-bottom:clamp(34px,4vw,54px); }
@media (min-width:760px){ .foot__grid{ grid-template-columns:1.4fr 1fr 1fr 1.1fr; } }
.foot__logo img{ height:96px; width:auto; border-radius:10px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 60%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 60%, transparent 100%); }
.foot h4{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--orange); margin-bottom:1.05rem; }
.foot li{ margin-bottom:.6rem; font-size:.9rem; color:var(--dim); }
.foot li a{ transition:color .3s; }
.foot li a:hover{ color:var(--cream); }
.foot__social{ display:flex; gap:.55rem; margin-top:1.1rem; }
.foot__social a{ width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; transition:.35s var(--ease); }
.foot__social a:hover{ background:var(--orange); border-color:var(--orange); transform:translateY(-3px); }
.foot__social svg{ width:15px; height:15px; fill:currentColor; }
.foot__bar{ border-top:1px solid var(--line); padding-block:1.35rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; color:var(--dim-2); }
.foot__bar a:hover{ color:var(--orange); }

/* ==========================================================================
   SCROLL ANIMATIONS
   ========================================================================== */
/* line-by-line mask reveal for display headings.
   The padding enlarges the clip box so Anton's caps aren't sliced at line-height .86;
   the matching negative margin keeps the visual line spacing unchanged. */
.line{ display:block; overflow:hidden; padding:.14em 0 .20em; margin:-.14em 0 -.20em; }
.js .line > i{ transform:translateY(135%); }
.line > i{ display:block; font-style:inherit; transition:transform 1s var(--ease); }
/* keep the clip padding on the final line so it doesn't pull the next element up */
.line:last-child{ margin-bottom:0; }
.is-in .line > i{ transform:none; }
.is-in .line:nth-child(2) > i{ transition-delay:.09s; }
.is-in .line:nth-child(3) > i{ transition-delay:.18s; }

/* Everything below is gated behind html.js, which app.js sets immediately.
   If the script never runs (error, blocked, slow network) nothing is hidden —
   content must never depend on an animation finishing in order to be seen. */
.js [data-reveal]{ opacity:0; transition:opacity .9s var(--ease), transform 1s var(--ease), clip-path 1.1s var(--ease); }
.js [data-reveal="up"]{ transform:translateY(38px); }
.js [data-reveal="down"]{ transform:translateY(-28px); }
.js [data-reveal="left"]{ transform:translateX(-40px); }
.js [data-reveal="right"]{ transform:translateX(40px); }
.js [data-reveal="scale"]{ transform:scale(.94); }
.js [data-reveal="clip"]{ opacity:0; transform:scale(.97); }
.js [data-reveal].is-in{ opacity:1; transform:none; clip-path:inset(0 0 0 0); }

.js [data-stagger] > *{ opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .9s var(--ease); }
.js [data-stagger].is-in > *{ opacity:1; transform:none; }

/* Used when the page isn't actually on screen: jump to the visible state
   rather than starting a transition the browser may never run. */
.no-anim, .no-anim *{ transition:none !important; animation:none !important; }

.parallax{ transform-style:flat; }


/* ==========================================================================
   MOBILE
   The header is deliberately large on desktop; on a phone that same size eats
   an eighth of the screen, so it scales back down here.
   ========================================================================== */
@media (max-width:900px){
  :root{ --nav-h:74px; }
  .nav.is-solid{ height:64px; }
  .brand img{ height:56px; }
  .nav.is-solid .brand img{ height:48px; }
  .cat-bar{ top:var(--cat-top, 64px); }
}
@media (max-width:620px){
  :root{ --nav-h:66px; }
  .nav.is-solid{ height:58px; }
  .brand img{ height:46px; }
  .nav.is-solid .brand img{ height:40px; }
  .nav__in{ gap:8px; padding-inline:14px; }
  .nav__act{ gap:.35rem; }
  /* four things share the bar on a phone: logo, Order Now, Menu, burger */
  .nav__act .btn--sm{ padding:.55rem .75rem; font-size:.58rem; letter-spacing:.1em; }
  .burger i, .burger i::before, .burger i::after{ width:14px; }
}
@media (max-width:360px){
  .nav__act .btn--sm{ padding:.5rem .6rem; font-size:.54rem; letter-spacing:.06em; }
  .brand img{ height:40px; }
}

/* Comfortable touch targets — 44px is the accessible minimum. */
@media (hover:none){
  .btn, .add, .cat-bar a, .nav__links a, .foot li a, .deliv__app, .loc__row dd a,
  .truck__contact a, .truck__contact .is-soon, .rcard__count a, .rcard__foot a,
  .mnav__foot a, .qr a{
    min-height:44px; display:inline-flex; align-items:center;
  }
  .burger{ width:44px; height:44px; }
  .btn--block, .deliv__app{ justify-content:center; }
  .foot li{ margin-bottom:.15rem; }
  .foot li a{ padding-block:.35rem; }
  .foot__social a{ width:46px; height:46px; }
  .cat-bar a{ padding-inline:1.1rem; }
  .loc__row dd a{ padding-block:.2rem; }
}

@media (max-width:760px){
  .hero__cta .btn{ width:100%; justify-content:center; }
  .hero__sub{ gap:.4rem .7rem; }

  .hrow{ flex-direction:column; gap:.1rem; align-items:flex-start; }
  .hrow span{ min-width:0; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }

  .deliv__cta .btn{ flex:1 1 auto; justify-content:center; }
  .loc__row{ padding:1.05rem 1.15rem; }
  .foot__bar{ justify-content:flex-start; }
}

/* line-height:.86 assumes one line of text per .line. On narrow screens a long
   heading wraps inside it and the lines collide, so give section headings a
   little more leading there. The hero is left alone — it never wraps. */
@media (max-width:760px){
  .h-lg, .h-md, .h-sm{ line-height:.98; }
}

@media (max-width:400px){
  .deliv__apps{ grid-template-columns:1fr; }
  .pillars{ grid-template-columns:repeat(2,1fr); }
}

/* keep content clear of the notch / home indicator */
@supports (padding:env(safe-area-inset-left)){
  .wrap, .nav__in, .pin__head, .pin__track, .cat-bar__in{
    padding-left:max(var(--pad), env(safe-area-inset-left));
    padding-right:max(var(--pad), env(safe-area-inset-right));
  }
  .foot{ padding-bottom:env(safe-area-inset-bottom); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
  [data-reveal],[data-stagger] > *,.line > i{ opacity:1 !important; transform:none !important; clip-path:none !important; }
}