/* ==========================================================================
   FAMOUS PHILLIES CHEESESTEAKS
   Design system : tokens declared first, components after.
   Display : Anton   Body : Work Sans
   ========================================================================== */

:root{
  /* ---- type ---- */
  --font-display:'Anton', 'Arial Narrow', sans-serif;
  --font-body:'Work Sans', 'Helvetica Neue', sans-serif;

  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:2rem; --text-4xl:2.75rem;
  --text-5xl:3.75rem;

  --leading-none:1; --leading-tight:1.15; --leading-snug:1.35;
  --leading-normal:1.6; --leading-relaxed:1.75;

  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  --tracking-tight:-.02em; --tracking-normal:0em; --tracking-wide:.05em; --tracking-widest:.12em;

  /* ---- red ---- */
  --red-100:hsl(358 70% 95%); --red-200:hsl(358 72% 88%); --red-300:hsl(358 74% 74%);
  --red-400:hsl(358 78% 55%); --red-500:hsl(358 81% 45%); --red-600:hsl(358 81% 38%);
  --red-700:hsl(358 85% 30%); --red-800:hsl(358 88% 23%); --red-900:hsl(358 92% 15%);

  /* ---- warm greys (red-tinted, never pure) ---- */
  --grey-50:hsl(0 8% 97%);  --grey-100:hsl(0 7% 94%); --grey-200:hsl(0 6% 88%);
  --grey-300:hsl(0 5% 77%); --grey-400:hsl(0 5% 60%); --grey-500:hsl(0 5% 46%);
  --grey-600:hsl(0 6% 34%); --grey-700:hsl(0 7% 22%); --grey-800:hsl(0 8% 13%);
  --grey-900:hsl(0 9% 8%);  --grey-950:hsl(0 10% 5%);

  /* ---- roles ---- */
  --bg:var(--grey-950);
  --bg-raised:var(--grey-900);
  --bg-card:hsl(0 9% 11%);
  --bg-light:var(--grey-50);
  --line:hsl(0 8% 18%);
  --line-light:var(--grey-200);

  --txt-1:hsl(0 0% 100%);
  --txt-2:hsl(0 5% 76%);
  --txt-3:hsl(0 5% 56%);
  --txt-1-inv:var(--grey-900);
  --txt-2-inv:var(--grey-600);
  --txt-3-inv:var(--grey-500);

  --accent:var(--red-500);
  --accent-hi:var(--red-400);

  /* ---- spacing ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px;
  --section-y:96px;

  /* ---- radius ---- */
  --r-sm:3px; --r-md:6px; --r-lg:10px; --r-pill:999px;

  /* ---- shadows ---- */
  --sh-xs:0 1px 2px hsl(0 0% 0% / .4);
  --sh-sm:0 2px 6px hsl(0 0% 0% / .45);
  --sh-md:0 6px 18px hsl(0 0% 0% / .5);
  --sh-lg:0 14px 38px hsl(0 0% 0% / .55);
  --sh-xl:0 26px 70px hsl(0 0% 0% / .62);

  --wrap:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   RESET
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;}
body{
  margin:0;background:var(--bg);color:var(--txt-2);
  font-family:var(--font-body);font-size:var(--text-base);
  font-weight:var(--weight-regular);line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;}
h1,h2,h3,h4{margin:0;color:var(--txt-1);font-family:var(--font-display);font-weight:400;
  letter-spacing:var(--tracking-tight);text-transform:uppercase;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}

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

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red-600);
  color:#fff;padding:var(--s-3) var(--s-5);font-weight:var(--weight-semibold);}
.skip:focus{left:var(--s-4);top:var(--s-4);}

/* ==========================================================================
   PRIMITIVES
   ========================================================================== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s-6);}
.section{padding-block:var(--section-y);position:relative;}
.section--light{background:var(--bg-light);color:var(--txt-2-inv);}
.section--light h1,.section--light h2,.section--light h3,.section--light h4{color:var(--txt-1-inv);}
.section--raised{background:var(--bg-raised);}

/* griddle texture : the flat-top motif, used for depth on dark bands */
.griddle::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(115deg,
    hsl(0 0% 100% / .022) 0 1px, transparent 1px 9px);
}
.griddle > *{position:relative;}

.kicker{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:var(--text-xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;
  color:var(--red-400);margin-bottom:var(--s-4);
}
.kicker::before{content:'';width:26px;height:2px;background:var(--red-500);}
.section--light .kicker{color:var(--red-600);}

.h-hero{font-size:clamp(2.6rem,8.5vw,5.25rem);line-height:var(--leading-none);}
.h-1{font-size:clamp(2.1rem,6vw,var(--text-4xl));line-height:var(--leading-tight);}
.h-2{font-size:clamp(1.75rem,4.6vw,var(--text-3xl));line-height:var(--leading-tight);}
.h-3{font-size:var(--text-2xl);line-height:var(--leading-snug);letter-spacing:var(--tracking-normal);}
.h-4{font-family:var(--font-body);font-size:var(--text-xl);font-weight:var(--weight-semibold);
  line-height:var(--leading-snug);letter-spacing:var(--tracking-normal);text-transform:none;}

.lede{font-size:var(--text-lg);line-height:var(--leading-relaxed);max-width:62ch;color:var(--txt-2);}
.section--light .lede{color:var(--txt-2-inv);}
.prose p{max-width:65ch;margin-bottom:var(--s-4);}
.prose p:last-child{margin-bottom:0;}

.sec-head{max-width:62ch;margin-bottom:var(--s-12);}
.sec-head .lede{margin-top:var(--s-4);}
.sec-head--center{margin-inline:auto;text-align:center;}
.sec-head--center .kicker{justify-content:center;}
.sec-head--center .lede{margin-inline:auto;}

/* star band : lifted straight from the logo lockup */
.stars{display:flex;align-items:center;justify-content:center;gap:var(--s-3);
  color:var(--red-500);font-size:var(--text-sm);letter-spacing:.4em;line-height:1;}
.stars::before,.stars::after{content:'';height:1px;width:min(90px,14vw);
  background:linear-gradient(90deg,transparent,var(--red-700));}
.stars::after{background:linear-gradient(270deg,transparent,var(--red-700));}

/* ---- buttons ---- */
.btn{
  --btn-h:48px;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:var(--btn-h);padding-inline:calc(var(--btn-h) * 2 / 2.2);
  border:2px solid transparent;border-radius:var(--r-sm);cursor:pointer;
  font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;line-height:var(--leading-tight);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),
             background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
  text-align:center;
}
.btn svg{width:17px;height:17px;flex:none;}
.btn--primary{background:var(--red-600);border-color:var(--red-600);color:#fff;box-shadow:var(--sh-sm);}
.btn--primary:hover{background:var(--red-500);border-color:var(--red-500);transform:translateY(-2px);box-shadow:var(--sh-md);}
.btn--primary:active{transform:translateY(1px);box-shadow:var(--sh-xs);}
.btn--ghost{background:transparent;border-color:hsl(0 0% 100% / .3);color:#fff;}
.btn--ghost:hover{border-color:#fff;background:hsl(0 0% 100% / .08);transform:translateY(-2px);}
.btn--ghost:active{transform:translateY(1px);}
.btn--dark{background:var(--grey-900);border-color:var(--grey-900);color:#fff;}
.btn--dark:hover{background:var(--grey-800);border-color:var(--grey-800);transform:translateY(-2px);box-shadow:var(--sh-md);}
.btn--dark:active{transform:translateY(1px);}
.btn--wa{background:hsl(142 70% 34%);border-color:hsl(142 70% 34%);color:#fff;}
.btn--wa:hover{background:hsl(142 70% 39%);border-color:hsl(142 70% 39%);transform:translateY(-2px);box-shadow:var(--sh-md);}
.btn--wa:active{transform:translateY(1px);}
.btn--sm{--btn-h:38px;font-size:var(--text-xs);}
.btn--block{width:100%;}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);}

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{
  position:sticky;top:0;z-index:100;
  background:hsl(0 10% 5% / .82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background-color .3s var(--ease),border-color .3s var(--ease);
}
.hdr.is-stuck{background:hsl(0 10% 4% / .96);border-bottom-color:var(--red-800);}
.hdr__in{display:flex;align-items:center;gap:var(--s-6);min-height:78px;}
.hdr__logo{display:flex;align-items:center;gap:var(--s-3);flex:none;margin-right:auto;}
.hdr__logo img{width:auto;height:52px;}
.hdr__nav{display:flex;align-items:center;gap:var(--s-6);}
.navlink{
  position:relative;font-size:var(--text-sm);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--txt-2);
  padding-block:var(--s-2);transition:color .2s var(--ease);
}
.navlink::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--red-500);transition:width .25s var(--ease);}
.navlink:hover{color:#fff;}
.navlink:hover::after,.navlink[aria-current="page"]::after{width:100%;}
.navlink[aria-current="page"]{color:#fff;}

.burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0 11px;background:transparent;border:1px solid var(--line);
  border-radius:var(--r-sm);cursor:pointer;transition:border-color .2s var(--ease);}
.burger:hover{border-color:var(--red-500);}
.burger span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease);}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* drawer slides from the top : avoids the horizontal overflow an X-slide causes */
.drawer{
  position:fixed;left:0;right:0;top:0;z-index:99;
  background:var(--grey-950);border-bottom:2px solid var(--red-700);
  padding:100px var(--s-6) var(--s-8);
  transform:translateY(-100%);visibility:hidden;
  transition:transform .35s var(--ease),visibility .35s var(--ease);
  max-height:100dvh;overflow-y:auto;
}
.drawer.is-open{transform:translateY(0);visibility:visible;}
.drawer a{display:block;padding:var(--s-4) 0;border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-size:var(--text-xl);text-transform:uppercase;
  letter-spacing:var(--tracking-tight);color:#fff;}
.drawer a:hover{color:var(--red-400);}
.drawer .btn{margin-top:var(--s-6);}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;min-height:min(760px,88svh);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--grey-950);}
.hero__media{position:absolute;inset:-8% 0 0;z-index:0;will-change:transform;}
.hero__media img{width:100%;height:112%;object-fit:cover;object-position:center 42%;}
.hero__glow{position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(120% 90% at 80% 15%, hsl(358 90% 30% / .48), transparent 62%),
    linear-gradient(180deg, hsl(0 10% 4% / .82) 0%, hsl(0 10% 4% / .55) 38%, hsl(0 10% 4% / .96) 92%);
  background-size:200% 200%,100% 100%;
  animation:heatShift 14s ease-in-out infinite;
}
@keyframes heatShift{0%,100%{background-position:0% 50%,0 0;}50%{background-position:100% 50%,0 0;}}
.hero__in{position:relative;z-index:2;width:100%;padding-block:var(--s-20) var(--s-16);}
.hero__badge{display:inline-flex;align-items:center;gap:var(--s-2);
  background:hsl(0 0% 100% / .08);border:1px solid hsl(0 0% 100% / .18);
  border-radius:var(--r-pill);padding:var(--s-2) var(--s-4);
  font-size:var(--text-xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:#fff;
  margin-bottom:var(--s-6);}
.hero__badge .dot{width:7px;height:7px;border-radius:50%;background:hsl(142 70% 48%);flex:none;}
.hero h1{max-width:16ch;}
.hero h1 em{font-style:normal;color:var(--red-400);}
.hero__sub{margin-top:var(--s-6);font-size:var(--text-lg);line-height:var(--leading-relaxed);
  max-width:56ch;color:hsl(0 0% 92%);}
.hero .btn-row{margin-top:var(--s-8);}

.hero-slim{position:relative;overflow:hidden;background:var(--grey-900);
  border-bottom:1px solid var(--line);}
.hero-slim::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 120% at 88% 0%, hsl(358 88% 32% / .42), transparent 60%);}
.hero-slim__in{position:relative;z-index:1;padding-block:var(--s-20) var(--s-16);}
.hero-slim h1{max-width:18ch;}
.hero-slim .lede{margin-top:var(--s-5);}

/* breadcrumb */
.crumbs{font-size:var(--text-xs);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--txt-3);margin-bottom:var(--s-5);}
.crumbs a:hover{color:var(--red-400);}
.crumbs span{margin-inline:var(--s-2);color:var(--red-700);}

/* ==========================================================================
   HIGHLIGHT STRIP
   ========================================================================== */
.strip{background:var(--red-700);position:relative;overflow:hidden;}
.strip::before{content:'';position:absolute;inset:0;opacity:.6;
  background-image:repeating-linear-gradient(115deg,hsl(0 0% 0% / .07) 0 1px,transparent 1px 10px);}
.strip__grid{position:relative;display:grid;gap:var(--s-8);
  grid-template-columns:repeat(4,1fr);padding-block:var(--s-12);}
.strip__item h3{font-size:var(--text-lg);letter-spacing:var(--tracking-normal);margin-bottom:var(--s-2);}
.strip__item p{font-size:var(--text-sm);color:hsl(0 40% 92%);line-height:var(--leading-normal);}
.strip__num{display:block;font-family:var(--font-display);font-size:var(--text-sm);
  color:hsl(0 60% 80%);letter-spacing:var(--tracking-widest);margin-bottom:var(--s-3);}

/* ==========================================================================
   CARDS
   ========================================================================== */
.grid{display:grid;gap:var(--s-6);}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}

.card{
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--red-700);}
.card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--grey-800);}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease);}
.card:hover .card__media img{transform:scale(1.06);}
.card__media::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,hsl(0 10% 4% / .55) 100%);}
.card__body{padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3);flex:1;}
.card__body p{font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--txt-2);}
.card__foot{margin-top:auto;padding-top:var(--s-2);}

/* branded placeholder plate for items with no photograph yet */
.plate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:var(--s-3);
  background:
    repeating-linear-gradient(115deg,hsl(0 0% 100% / .028) 0 1px,transparent 1px 11px),
    linear-gradient(150deg,var(--grey-800),var(--grey-900) 60%,var(--red-900));}
.plate__star{color:var(--red-500);font-size:var(--text-lg);letter-spacing:.35em;line-height:1;}
.plate__txt{font-family:var(--font-display);font-size:var(--text-sm);text-transform:uppercase;
  letter-spacing:var(--tracking-widest);color:hsl(0 5% 52%);text-align:center;padding-inline:var(--s-4);}

.price{font-family:var(--font-display);font-size:var(--text-2xl);color:hsl(358 88% 64%);
  letter-spacing:var(--tracking-normal);line-height:1;}
.section--light .price{color:var(--red-600);}
.card__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);}
.card__top h3{flex:1;}

/* ==========================================================================
   MENU PAGE
   ========================================================================== */
.menunav{position:sticky;top:78px;z-index:60;background:hsl(0 10% 5% / .94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.menunav ul{display:flex;gap:var(--s-2);overflow-x:auto;padding-block:var(--s-3);
  scrollbar-width:none;}
.menunav ul::-webkit-scrollbar{display:none;}
.menunav a{flex:none;padding:var(--s-2) var(--s-4);border:1px solid var(--line);
  border-radius:var(--r-pill);font-size:var(--text-xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--txt-2);
  transition:all .2s var(--ease);white-space:nowrap;}
.menunav a:hover,.menunav a.is-active{background:var(--red-600);border-color:var(--red-600);color:#fff;}

.cat{padding-block:var(--s-16);border-bottom:1px solid var(--line);}
.cat:last-of-type{border-bottom:0;}
.cat__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s-6);flex-wrap:wrap;margin-bottom:var(--s-10);
  padding-bottom:var(--s-5);border-bottom:2px solid var(--red-700);}
.cat__head p{font-size:var(--text-sm);color:var(--txt-3);}

/* ==========================================================================
   SPECIALS
   ========================================================================== */
.deal{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--bg-card);}
.deal--hero{border-color:var(--red-600);box-shadow:var(--sh-lg);}
.deal__head{padding:var(--s-8);background:linear-gradient(135deg,var(--red-700),var(--red-900));
  position:relative;overflow:hidden;}
.deal__head::before{content:'';position:absolute;inset:0;opacity:.55;
  background-image:repeating-linear-gradient(115deg,hsl(0 0% 0% / .09) 0 1px,transparent 1px 10px);}
.deal__head > *{position:relative;}
.deal__when{display:inline-flex;align-items:center;gap:var(--s-2);margin-top:var(--s-4);
  background:hsl(0 0% 0% / .3);border:1px solid hsl(0 0% 100% / .2);border-radius:var(--r-pill);
  padding:var(--s-2) var(--s-4);font-size:var(--text-xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:#fff;}
.deal__body{padding:var(--s-8);}
.deal__line{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-6);
  padding-block:var(--s-5);border-bottom:1px dashed var(--line);}
.deal__line:last-of-type{border-bottom:0;}
.deal__line h4{margin-bottom:var(--s-1);}
.deal__line p{font-size:var(--text-sm);color:var(--txt-3);max-width:52ch;}
.deal__price{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--red-400);
  white-space:nowrap;line-height:1;}
.deal__fine{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line);
  font-size:var(--text-xs);color:var(--txt-3);}

.empty{border:1px dashed var(--line);border-radius:var(--r-md);padding:var(--s-12);
  text-align:center;color:var(--txt-3);}

/* ==========================================================================
   SPLIT / FEATURE ROWS
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-16);align-items:center;}
.split__media{position:relative;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-xl);}
.split__media img{width:100%;}
.split__media::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,hsl(0 10% 4% / .35));}
.split--flip .split__media{order:2;}

.tag{display:inline-block;background:hsl(358 81% 45% / .14);border:1px solid var(--red-700);
  color:var(--red-300);border-radius:var(--r-sm);padding:var(--s-1) var(--s-3);
  font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;}

/* ==========================================================================
   BANNER CTA
   ========================================================================== */
.banner{position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--red-800),var(--red-600) 55%,var(--red-800));
  background-size:220% 220%;animation:heatShift 12s ease-in-out infinite;}
.banner::before{content:'';position:absolute;inset:0;opacity:.5;
  background-image:repeating-linear-gradient(115deg,hsl(0 0% 0% / .08) 0 1px,transparent 1px 10px);}
.banner__in{position:relative;padding-block:var(--s-20);text-align:center;}
.banner p{color:hsl(0 45% 94%);margin-inline:auto;}

/* ==========================================================================
   FORMS
   ========================================================================== */
.form{display:grid;gap:var(--s-5);}
.field{display:flex;flex-direction:column;gap:var(--s-2);}
.field label{font-size:var(--text-xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--txt-2);}
.section--light .field label{color:var(--txt-2-inv);}
.field .req{color:var(--red-500);}
.field input,.field select,.field textarea{
  width:100%;padding:var(--s-3) var(--s-4);background:var(--grey-900);
  border:1px solid var(--line);border-radius:var(--r-sm);color:#fff;
  font-family:var(--font-body);font-size:var(--text-base);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{min-height:130px;resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:var(--txt-3);}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--red-500);box-shadow:0 0 0 3px hsl(358 81% 45% / .22);}
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--red-400);}
.field__hint{font-size:var(--text-xs);color:var(--txt-3);}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);}
.form__note{font-size:var(--text-xs);color:var(--txt-3);line-height:var(--leading-normal);}
.form__status{font-size:var(--text-sm);padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);display:none;}
.form__status.is-ok{display:block;background:hsl(142 60% 30% / .2);border:1px solid hsl(142 60% 34%);color:hsl(142 60% 74%);}
.form__status.is-err{display:block;background:hsl(358 70% 34% / .2);border:1px solid var(--red-600);color:var(--red-300);}

/* ==========================================================================
   INFO PANELS / LOCATION
   ========================================================================== */
.panel{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-8);}
.panel h3{margin-bottom:var(--s-5);}
.info{display:flex;gap:var(--s-4);padding-block:var(--s-4);border-bottom:1px solid var(--line);}
.info:last-child{border-bottom:0;}
.info__ico{flex:none;width:22px;height:22px;color:var(--red-500);margin-top:2px;}
.info__ico svg{width:100%;height:100%;}
.info dt{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-widest);
  text-transform:uppercase;color:var(--txt-3);margin-bottom:var(--s-1);}
.info dd{margin:0;color:var(--txt-1);font-size:var(--text-base);}
.info dd a:hover{color:var(--red-400);}

.map{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  background:var(--grey-800);line-height:0;box-shadow:var(--sh-lg);}
.map iframe{width:100%;height:460px;border:0;display:block;filter:grayscale(.25) contrast(1.05);}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);}
.gallery figure{margin:0;position:relative;border-radius:var(--r-md);overflow:hidden;
  aspect-ratio:4/3;background:var(--grey-800);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.gallery figure:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);}
.gallery img{width:100%;height:100%;object-fit:cover;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr{background:var(--grey-950);border-top:2px solid var(--red-700);padding-block:var(--s-20) var(--s-8);
  position:relative;overflow:hidden;}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:var(--s-10);}
.ftr__logo img{height:72px;width:auto;margin-bottom:var(--s-5);}
.ftr h4{font-family:var(--font-display);font-size:var(--text-sm);text-transform:uppercase;
  letter-spacing:var(--tracking-widest);color:#fff;font-weight:400;margin-bottom:var(--s-5);}
.ftr li{margin-bottom:var(--s-3);font-size:var(--text-sm);}
.ftr a:hover{color:var(--red-400);}
.ftr p{font-size:var(--text-sm);color:var(--txt-3);line-height:var(--leading-normal);}
.social{display:flex;gap:var(--s-3);margin-top:var(--s-5);}
.social a{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);
  border-radius:var(--r-sm);color:var(--txt-2);transition:all .2s var(--ease);}
.social a:hover{background:var(--red-600);border-color:var(--red-600);color:#fff;transform:translateY(-2px);}
.social svg{width:18px;height:18px;}
.ftr__bar{margin-top:var(--s-16);padding-top:var(--s-6);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:space-between;align-items:center;
  font-size:var(--text-xs);color:var(--txt-3);}
.ftr__bar nav{display:flex;gap:var(--s-5);flex-wrap:wrap;}

/* ==========================================================================
   FLOATING + MOBILE CTA
   ========================================================================== */
.float{position:fixed;right:var(--s-6);bottom:var(--s-6);z-index:90;
  display:flex;flex-direction:column;gap:var(--s-3);}
.float a{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  color:#fff;box-shadow:var(--sh-lg);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease);}
.float a:hover{transform:translateY(-3px) scale(1.05);filter:brightness(1.1);}
.float a:active{transform:translateY(0) scale(.98);}
.float svg{width:26px;height:26px;}
.float .fl-wa{background:hsl(142 70% 34%);}
.float .fl-call{background:var(--red-600);}

.mobar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:hsl(0 10% 5% / .97);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding:var(--s-3) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom));
  gap:var(--s-2);}
.mobar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:var(--s-2);border-radius:var(--r-sm);font-size:10px;font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--txt-2);
  transition:color .2s var(--ease),background-color .2s var(--ease);}
.mobar a svg{width:20px;height:20px;}
.mobar a:active{background:hsl(0 0% 100% / .06);}
.mobar .mb-wa{color:hsl(142 55% 62%);}
.mobar .mb-call{color:var(--red-400);}

/* ==========================================================================
   MOTION
   ========================================================================== */
.reveal{opacity:0;transform:translateY(30px);
  transition:opacity .65s var(--ease),transform .65s var(--ease);}
.reveal.is-in{opacity:1;transform:translateY(0);}
.reveal-group > *{opacity:0;transform:translateY(26px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);}
.reveal-group.is-in > *{opacity:1;transform:translateY(0);}
.reveal-group.is-in > *:nth-child(1){transition-delay:0s;}
.reveal-group.is-in > *:nth-child(2){transition-delay:.08s;}
.reveal-group.is-in > *:nth-child(3){transition-delay:.16s;}
.reveal-group.is-in > *:nth-child(4){transition-delay:.24s;}
.reveal-group.is-in > *:nth-child(5){transition-delay:.32s;}
.reveal-group.is-in > *:nth-child(6){transition-delay:.4s;}
.reveal-group.is-in > *:nth-child(n+7){transition-delay:.46s;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  :root{--section-y:72px;}
  .hdr__nav{display:none;}
  .burger{display:flex;}
  .strip__grid{grid-template-columns:repeat(2,1fr);}
  .grid--4{grid-template-columns:repeat(2,1fr);}
  .split{grid-template-columns:1fr;gap:var(--s-10);}
  .split--flip .split__media{order:0;}
  .ftr__grid{grid-template-columns:1fr 1fr;gap:var(--s-8);}
  .menunav{top:78px;}
}
@media (max-width:760px){
  :root{--section-y:60px;}
  .wrap{padding-inline:var(--s-5);}
  .hdr__in{min-height:70px;}
  .hdr__logo img{height:44px;}
  .menunav{top:70px;}
  html{scroll-padding-top:130px;}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr;}
  .strip__grid{grid-template-columns:1fr;gap:var(--s-6);}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .form__row{grid-template-columns:1fr;}
  .ftr__grid{grid-template-columns:1fr;}
  .ftr__bar{flex-direction:column;align-items:flex-start;}
  .float{display:none;}
  .mobar{display:flex;}
  body{padding-bottom:74px;}
  .hero{min-height:auto;}
  .hero__in{padding-block:var(--s-16) var(--s-12);}
  .hero .btn-row .btn{flex:1 1 46%;}
  .deal__line{flex-direction:column;gap:var(--s-2);}
  .map iframe{height:340px;}
  .panel{padding:var(--s-6);}
  .cat__head{align-items:flex-start;}
  /* vertical-only reveals on mobile so nothing can push the viewport sideways */
  .reveal,.reveal-group > *{transform:translateY(20px);}
}
@media (max-width:400px){
  .hero .btn-row .btn{flex:1 1 100%;}
}

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

@media print{
  .hdr,.drawer,.float,.mobar,.banner,.menunav{display:none !important;}
  body{background:#fff;color:#000;}
}