/* =========================================================================
   Jerry John Pizzeria — design system
   Black + red + basil-green on warm cream. Signature: torn band edges.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Core */
  --ink:        #1A1715;
  --ink-2:      #262220;
  --ink-3:      #322C29;
  --cream:      #FBF7F0;
  --cream-2:    #F2EADD;

  /* Brand accents */
  --red:        #C8202B;
  --red-deep:   #9E1620;
  --red-soft:   #E24652;   /* lighter red for text on dark (AA contrast) */
  --basil:      #3F7D3A;
  --gold:       #E8A53D;

  /* Neutrals */
  --line:       rgba(255,255,255,.10);
  --line-ink:   rgba(26,23,21,.12);
  --muted:      #8A8178;
  --muted-dark: #B7AEA4;   /* secondary text on dark */

  /* Type */
  --fs-hero:  clamp(3rem, 9vw, 7rem);
  --fs-h2:    clamp(2rem, 5vw, 3.5rem);
  --fs-h3:    1.5rem;
  --fs-body:  1.0625rem;
  --fs-small: 0.875rem;
  --font-display: "Anton", "Archivo Black", system-ui, sans-serif;
  --font-script:  "Caveat", cursive;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  /* Layout */
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 10px;
  --shadow-card: 0 10px 30px rgba(0,0,0,.06);
  --shadow-card-dark: 0 14px 40px rgba(0,0,0,.45);
  --shadow-lift: 0 18px 40px rgba(0,0,0,.18);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; line-height:1.05; font-weight:400; }

:focus-visible{ outline:3px solid var(--red-soft); outline-offset:2px; border-radius:2px; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ position:relative; padding-block:clamp(4rem,8vw,7rem); }
.section--dark{ background:var(--ink); color:var(--cream); }
.section--cream{ background:var(--cream); color:var(--ink); }
.section--cream-2{ background:var(--cream-2); color:var(--ink); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- 3. Eyebrow + headings ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--font-script);
  font-size:clamp(1.4rem,3vw,1.9rem);
  color:var(--red-soft);
  line-height:1;
  margin:0 0 .35rem;
}
.section--cream .eyebrow,.section--cream-2 .eyebrow{ color:var(--red); }
.eyebrow svg{ width:1.1em; height:1.1em; color:var(--basil); }

.h2{
  font-family:var(--font-display);
  font-size:var(--fs-h2);
  text-transform:uppercase;
  letter-spacing:.01em;
}
.section-head{ text-align:center; max-width:720px; margin:0 auto clamp(2.5rem,5vw,3.75rem); }

/* ---------- 4. Buttons ---------- */
.btn{
  --btn-bg:var(--red); --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:14px 32px;
  background:var(--btn-bg); color:var(--btn-fg);
  font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  font-size:var(--fs-small);
  border:2px solid var(--btn-bg); border-radius:4px;
  transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover{ background:var(--red-deep); border-color:var(--red-deep); transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.btn--outline{ --btn-bg:transparent; --btn-fg:var(--red); border-color:var(--red); }
.btn--outline:hover{ --btn-fg:#fff; background:var(--red); }
.section--dark .btn--outline{ --btn-fg:#fff; border-color:#fff; }
.section--dark .btn--outline:hover{ background:#fff; --btn-fg:var(--ink); border-color:#fff; }
.btn--lg{ padding:17px 40px; font-size:1rem; }

/* ---------- 5. Tear dividers ---------- */
.tear{ position:absolute; left:0; right:0; width:100%; line-height:0; pointer-events:none; z-index:2; }
.tear svg{ display:block; width:100%; height:clamp(34px,5vw,64px); }
.tear--top{ top:-1px; }
.tear--bottom{ bottom:-1px; }
.tear--cream{ color:var(--cream); }
.tear--cream-2{ color:var(--cream-2); }
.tear--ink{ color:var(--ink); }
.tear--red{ color:var(--red); }

/* ---------- 6. Food image + placeholder ---------- */
.food-img{ width:100%; height:100%; object-fit:cover; }
.food-img--placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  width:100%; height:100%; min-height:120px;
  background:
    radial-gradient(circle at 30% 25%, rgba(232,165,61,.18), transparent 60%),
    linear-gradient(135deg, var(--ink-2), var(--ink-3));
  color:var(--muted-dark); text-align:center; padding:1rem;
}
.section--cream .food-img--placeholder,.section--cream-2 .food-img--placeholder{
  background:
    radial-gradient(circle at 30% 25%, rgba(200,32,43,.10), transparent 60%),
    linear-gradient(135deg, var(--cream-2), #E7DCCB);
  color:var(--muted);
}
.food-img--placeholder svg{ width:38px; height:38px; opacity:.55; }
.food-img__label{ font-size:var(--fs-small); font-weight:600; letter-spacing:.02em; line-height:1.3; }

/* =========================================================================
   7. HEADER / NAV
   ========================================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease);
  padding-block:1rem;
}
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.site-header.is-stuck{ background:rgba(26,23,21,.97); box-shadow:0 6px 24px rgba(0,0,0,.25); padding-block:.55rem; backdrop-filter:saturate(140%) blur(4px); }

.brand{ display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.brand img{ height:76px; width:auto; border-radius:50%; background:#fff; padding:3px; box-shadow:0 4px 14px rgba(0,0,0,.25); transition:height .3s var(--ease); }
.is-stuck .brand img{ height:60px; }
.brand__name{ font-family:var(--font-display); text-transform:uppercase; color:#fff; font-size:1.15rem; line-height:.95; letter-spacing:.02em; }
.brand__name small{ display:block; font-size:.62rem; letter-spacing:.32em; color:var(--gold); }

.nav{ display:flex; align-items:center; gap:2rem; }
.nav a{ color:#fff; font-weight:600; font-size:.95rem; position:relative; padding-block:.3rem; }
.nav a::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--red-soft); transition:width .25s var(--ease); }
.nav a:hover::after,.nav a[aria-current="true"]::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:1.1rem; flex-shrink:0; }
.header-phone{ display:inline-flex; align-items:center; gap:.5rem; color:#fff; font-weight:700; white-space:nowrap; }
.header-phone svg{ width:34px; height:34px; padding:7px; background:var(--basil); border-radius:50%; color:#fff; }
.header-phone span{ font-size:.7rem; font-weight:500; color:var(--muted-dark); display:block; line-height:1; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; z-index:70; }
.nav-toggle span{ width:26px; height:3px; background:#fff; border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* =========================================================================
   8. HERO
   ========================================================================= */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  background:radial-gradient(110% 90% at 70% 10%, #2a2421 0%, var(--ink) 55%);
  color:var(--cream); overflow:hidden; padding-top:6rem;
}
.hero__bg{ position:absolute; inset:0; background:url("../img/pizza-dark.jpg") center/cover no-repeat; opacity:.16; }
.hero__inner{ position:relative; z-index:3; display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center; width:100%; }
.hero__eyebrow{ color:var(--red-soft); }
.hero h1{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:var(--fs-hero); letter-spacing:.005em; margin:.2rem 0 .6rem;
}
.hero h1 .accent{ color:var(--red-soft); }
.hero__sub{ font-size:clamp(1.05rem,2vw,1.3rem); color:var(--muted-dark); max-width:48ch; margin-bottom:2rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; }
.hero__media{ position:relative; display:grid; place-items:center; }
.hero__pizza{ width:min(100%,520px); filter:drop-shadow(0 30px 50px rgba(0,0,0,.5)); animation:slow-spin 60s linear infinite; }
.hero__leaf{ position:absolute; width:46px; color:var(--basil); opacity:.9; animation:drift 7s ease-in-out infinite; }
.hero__leaf--1{ top:6%; left:8%; }
.hero__leaf--2{ bottom:12%; right:10%; animation-delay:1.5s; width:34px; }
.hero__leaf--3{ top:48%; left:-2%; animation-delay:3s; width:28px; }

@keyframes slow-spin{ to{ transform:rotate(360deg); } }
@keyframes drift{ 0%,100%{ transform:translateY(0) rotate(-6deg); } 50%{ transform:translateY(-16px) rotate(8deg); } }

.scroll-hint{ position:absolute; left:50%; bottom:1.5rem; transform:translateX(-50%); z-index:3; color:var(--muted-dark); font-size:var(--fs-small); letter-spacing:.2em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.scroll-hint::after{ content:""; width:1px; height:34px; background:linear-gradient(var(--gold),transparent); animation:pulse-down 2s ease-in-out infinite; }
@keyframes pulse-down{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

/* =========================================================================
   9. FEATURE STRIP (red band)
   ========================================================================= */
.features{ position:relative; background:var(--red); color:#fff; padding-block:clamp(3.5rem,7vw,5rem); }
.features__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.feature{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:.6rem; padding:0 1rem; }
.feature__icon{ width:78px; height:78px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.4); }
.feature__icon svg{ width:40px; height:40px; fill:#fff; }
.feature h3{ font-family:var(--font-display); text-transform:uppercase; font-size:1.35rem; letter-spacing:.03em; }
.feature p{ margin:0; color:rgba(255,255,255,.85); font-size:var(--fs-small); max-width:30ch; }
.features__grid .feature:not(:last-child){ border-right:1px solid rgba(255,255,255,.18); }

/* =========================================================================
   10. SPECIALITIES
   ========================================================================= */
.specialities__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3rem); margin-bottom:2.5rem; }
.spec-card{ text-align:center; }
.spec-card__media{
  width:min(260px,80%); aspect-ratio:1; margin:0 auto 1.25rem; border-radius:50%; overflow:hidden;
  position:relative; box-shadow:0 16px 36px rgba(0,0,0,.14); border:6px solid #fff;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.spec-card__media::after{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(200,32,43,.25); }
.spec-card:hover .spec-card__media{ transform:translateY(-8px) scale(1.02); box-shadow:0 24px 48px rgba(0,0,0,.2); }
.spec-card h3{ font-family:var(--font-display); text-transform:uppercase; font-size:1.4rem; letter-spacing:.02em; }
.spec-card p{ color:var(--muted); font-size:var(--fs-small); margin:.3rem 0 0; }
.specialities .center{ text-align:center; }

/* =========================================================================
   11. THE MENU
   ========================================================================= */
.menu__tabs{
  display:flex; gap:.6rem; overflow-x:auto; padding-bottom:.75rem; margin-bottom:2.5rem;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; justify-content:flex-start;
}
.menu__tabs::-webkit-scrollbar{ height:6px; }
.menu__tabs::-webkit-scrollbar-thumb{ background:var(--ink-3); border-radius:6px; }
.menu-tab{
  flex:0 0 auto; scroll-snap-align:start;
  padding:.6rem 1.3rem; border-radius:40px; border:1px solid var(--line);
  background:transparent; color:var(--muted-dark); font-weight:600; font-size:.9rem;
  white-space:nowrap; transition:background .2s, color .2s, border-color .2s;
}
.menu-tab:hover{ color:#fff; border-color:var(--red-soft); }
.menu-tab[aria-selected="true"]{ background:var(--red); color:#fff; border-color:var(--red); }
@media (min-width:900px){ .menu__tabs{ flex-wrap:wrap; justify-content:center; overflow:visible; } }

.menu-cat{ margin-bottom:2.5rem; }
.menu-cat[hidden]{ display:none; }
.menu-cat__head{ display:flex; align-items:baseline; gap:1rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.menu-cat__title{ font-family:var(--font-display); text-transform:uppercase; font-size:1.7rem; color:#fff; }
.menu-cat__eyebrow{ font-family:var(--font-script); color:var(--gold); font-size:1.3rem; line-height:1; }

.menu-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1rem 1.6rem; }
.menu-grid--wide{ grid-template-columns:1fr; }

/* standard item row */
.dish{ display:flex; gap:1rem; align-items:flex-start; padding:.85rem 0; border-bottom:1px dotted var(--line); }
.dish__media{ flex:0 0 64px; width:64px; height:64px; border-radius:50%; overflow:hidden; background:var(--ink-2); }
.dish__body{ flex:1; min-width:0; }
.dish__top{ display:flex; align-items:baseline; gap:.5rem; }
.dish__name{ font-weight:700; color:#fff; font-size:1.02rem; }
.dish__dots{ flex:1; border-bottom:1px dotted var(--line); transform:translateY(-4px); min-width:14px; }
.dish__price{ font-weight:800; color:var(--gold); white-space:nowrap; }
.dish__desc{ color:var(--muted-dark); font-size:var(--fs-small); margin:.2rem 0 0; }
.dish__alt{ color:var(--red-soft); font-size:var(--fs-small); font-weight:600; }
.section--cream .dish__name{ color:var(--ink); }
.section--cream .dish__price{ color:var(--red); }

/* pizza multi-price */
.pizza-sizes{ display:grid; grid-template-columns:1fr repeat(var(--cols,4),minmax(56px,auto)); gap:.4rem 1rem; align-items:center; margin-bottom:1rem; }
.pizza-sizes__head{ display:contents; }
.pizza-sizes__head span{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted-dark); text-align:right; font-weight:700; }
.pizza-sizes__head span:first-child{ text-align:left; }
.pizza-row{ display:contents; }
.pizza-row > .pizza-row__name{ grid-column:1; padding:.7rem 0; border-bottom:1px dotted var(--line); }
.pizza-row__name b{ color:#fff; font-weight:700; display:block; }
.pizza-row__name small{ color:var(--muted-dark); font-weight:400; }
.pizza-row__price{ text-align:right; color:var(--gold); font-weight:800; padding:.7rem 0; border-bottom:1px dotted var(--line); font-variant-numeric:tabular-nums; }
.pizza-row__price--single{ grid-column:2 / -1; }

/* flat-price ribbon */
.ribbon{
  display:inline-block; position:relative; background:var(--red); color:#fff;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em;
  padding:.45rem 1.4rem; transform:rotate(-2deg); margin-bottom:1rem;
  box-shadow:0 6px 16px rgba(200,32,43,.35);
}
.ribbon::before,.ribbon::after{ content:""; position:absolute; top:0; border:14px solid var(--red-deep); }
.ribbon::before{ left:-10px; border-left-color:transparent; border-bottom-color:transparent; }
.ribbon::after{ right:-10px; border-right-color:transparent; border-bottom-color:transparent; }
.flat-list{ columns:2; column-gap:2rem; }
.flat-list li{ padding:.5rem 0; border-bottom:1px dotted var(--line); break-inside:avoid; }
.flat-list b{ color:#fff; }
.flat-list span{ display:block; color:var(--muted-dark); font-size:var(--fs-small); }

/* info panels (extras / sauces / notes) */
.menu-info{ margin-top:1rem; padding:1.1rem 1.3rem; background:var(--ink-2); border-left:3px solid var(--red); border-radius:8px; }
.menu-info h4{ font-size:.95rem; color:var(--gold); text-transform:uppercase; letter-spacing:.04em; margin:0 0 .5rem; }
.menu-info p{ margin:0; color:var(--muted-dark); font-size:var(--fs-small); }
.menu-info ul{ display:flex; flex-wrap:wrap; gap:.4rem .9rem; }
.menu-info li{ color:var(--muted-dark); font-size:var(--fs-small); }
.menu-note{ color:var(--muted-dark); font-size:var(--fs-small); font-style:italic; margin:.2rem 0 1rem; }
.menu-disclaimer{ text-align:center; color:var(--muted); font-size:.8rem; margin-top:2.5rem; font-style:italic; }

/* =========================================================================
   12. ABOUT
   ========================================================================= */
.about__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.about__media{ display:grid; place-items:center; }
.about__media img{ width:min(100%,440px); filter:drop-shadow(0 24px 40px rgba(0,0,0,.18)); }
.about__body p{ margin:0 0 1.1rem; }
.why{ display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem 1.5rem; margin:1.5rem 0; }
.why li{ display:flex; align-items:center; gap:.6rem; font-weight:600; }
.why li::before{ content:""; width:22px; height:22px; flex:0 0 22px; border-radius:50%; background:var(--basil); color:#fff; -webkit-mask:url("../svg/leaf.svg") center/16px no-repeat; mask:url("../svg/leaf.svg") center/16px no-repeat; background:var(--basil); }

/* =========================================================================
   13. REVIEWS
   ========================================================================= */
.reviews__track{ max-width:760px; margin-inline:auto; position:relative; }
.review{ text-align:center; padding:0 1rem; }
.review[hidden]{ display:none; }
.review__stars{ color:var(--gold); font-size:1.25rem; letter-spacing:.15em; margin-bottom:1rem; }
.review__text{ font-size:clamp(1.1rem,2.2vw,1.4rem); line-height:1.5; color:var(--cream); }
.review__text::before{ content:"\201C"; }
.review__text::after{ content:"\201D"; }
.review__who{ margin-top:1.25rem; }
.review__name{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.03em; color:#fff; font-size:1.1rem; }
.review__where{ color:var(--muted-dark); font-size:var(--fs-small); }
.reviews__dots{ display:flex; gap:.6rem; justify-content:center; margin-top:2rem; }
.reviews__dots button{ width:11px; height:11px; border-radius:50%; border:0; background:var(--ink-3); transition:background .2s,transform .2s; }
.reviews__dots button[aria-current="true"]{ background:var(--red); transform:scale(1.25); }
.reviews__link{ text-align:center; margin-top:1.75rem; }
.reviews__link a{ color:var(--red-soft); font-weight:600; border-bottom:1px solid currentColor; padding-bottom:2px; }

/* =========================================================================
   14. NEWS
   ========================================================================= */
.news__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }
.post{ background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-card); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.post:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.post__media{ aspect-ratio:16/10; overflow:hidden; }
.post__body{ padding:1.3rem 1.4rem 1.6rem; }
.post__meta{ color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.5rem; }
.post__title{ font-family:var(--font-display); text-transform:uppercase; font-size:1.15rem; line-height:1.15; margin-bottom:.6rem; }
.post__more{ color:var(--red); font-weight:700; font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.04em; }

/* =========================================================================
   15. CONTACT
   ========================================================================= */
.contact__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,3.5rem); }
.contact__info > *+*{ margin-top:1.3rem; }
.info-row{ display:flex; gap:1rem; align-items:flex-start; }
.info-row__icon{ flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:var(--ink-2); color:var(--red-soft); }
.info-row__icon svg{ width:22px; height:22px; }
.info-row h4{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-dark); margin:0 0 .15rem; }
.info-row a,.info-row p{ margin:0; color:var(--cream); font-weight:600; }
.hours-table{ width:100%; border-collapse:collapse; }
.hours-table th,.hours-table td{ text-align:left; padding:.5rem 0; border-bottom:1px solid var(--line); font-weight:600; }
.hours-table td{ text-align:right; color:var(--gold); }
.map-embed{ margin-top:1.5rem; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
.map-embed iframe{ display:block; width:100%; height:240px; border:0; filter:grayscale(.2) contrast(1.05); }

.form-card{ background:var(--ink-2); border-radius:14px; padding:clamp(1.5rem,4vw,2.25rem); box-shadow:var(--shadow-card-dark); }
.form-card h3{ font-family:var(--font-display); text-transform:uppercase; font-size:1.5rem; margin-bottom:.3rem; }
.form-card .form-sub{ color:var(--muted-dark); font-size:var(--fs-small); margin-bottom:1.4rem; }
.field{ margin-bottom:1rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field label{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted-dark); margin-bottom:.35rem; }
.field input,.field select,.field textarea{
  width:100%; padding:.75rem .9rem; border-radius:8px; border:1px solid var(--line);
  background:var(--ink); color:var(--cream); font:inherit; font-size:.95rem; transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--red-soft); box-shadow:0 0 0 3px rgba(226,70,82,.2); }
.field textarea{ resize:vertical; min-height:96px; }
.field--error input,.field--error select,.field--error textarea{ border-color:var(--red); }
.field__err{ color:var(--red-soft); font-size:.78rem; margin-top:.3rem; min-height:1em; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-alert{ padding:.9rem 1.1rem; border-radius:8px; margin-bottom:1.2rem; font-weight:600; font-size:.92rem; }
.form-alert--ok{ background:rgba(63,125,58,.18); border:1px solid var(--basil); color:#bfe3bb; }
.form-alert--err{ background:rgba(200,32,43,.15); border:1px solid var(--red); color:var(--red-soft); }

/* =========================================================================
   16. FOOTER
   ========================================================================= */
.site-footer{ background:#0F0D0C; color:var(--muted-dark); padding-block:clamp(3rem,6vw,4.5rem) 0; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem; }
.footer__brand img{ height:64px; border-radius:50%; background:#fff; padding:4px; margin-bottom:1rem; }
.footer__brand p{ font-size:var(--fs-small); max-width:34ch; }
.footer h4{ font-family:var(--font-display); text-transform:uppercase; color:#fff; font-size:1.1rem; letter-spacing:.04em; margin-bottom:1rem; }
.footer a:hover{ color:var(--red-soft); }
.footer ul li{ padding:.3rem 0; }
.footer-hours td{ padding:.25rem 0; font-size:var(--fs-small); }
.footer-hours td:last-child{ text-align:right; color:var(--gold); }
.socials{ display:flex; gap:.7rem; margin-top:1rem; }
.socials a{ width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--ink-2); color:#fff; transition:background .2s,transform .2s; }
.socials a:hover{ background:var(--red); transform:translateY(-2px); }
.socials svg{ width:18px; height:18px; }
.footer__bar{ border-top:1px solid var(--line); padding-block:1.4rem; text-align:center; font-size:var(--fs-small); }

/* =========================================================================
   17. MOBILE CALL BAR
   ========================================================================= */
.call-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:55; display:none;
  background:var(--red); color:#fff; text-align:center; padding:.85rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  box-shadow:0 -6px 20px rgba(0,0,0,.25);
}
.call-bar svg{ width:20px; height:20px; vertical-align:-4px; margin-right:.4rem; }

/* =========================================================================
   18. SCROLL REVEAL
   ========================================================================= */
/* Content is visible by default. It is only hidden for animation AFTER main.js
   confirms it's running (adds .js-reveal to <html>). If JS is disabled or main.js
   fails to load, nothing is ever hidden — the page can't go blank. */
.reveal{ transition:opacity .6s var(--ease), transform .6s var(--ease); }
.js-reveal .reveal{ opacity:0; transform:translateY(16px); }
.js-reveal .reveal.is-in,
.reveal.is-in{ opacity:1; transform:none; }

/* =========================================================================
   19. RESPONSIVE
   ========================================================================= */
@media (max-width:1024px){
  .nav,.header-phone span{ display:none; }
  .nav-toggle{ display:flex; }
  .hero__inner{ grid-template-columns:1fr; text-align:center; }
  .hero__cta{ justify-content:center; }
  .hero__media{ order:-1; margin-bottom:1rem; }
  .hero__pizza{ width:min(70%,360px); }
  .about__inner,.contact__inner{ grid-template-columns:1fr; }
  .about__media{ order:-1; }
  .news__grid{ grid-template-columns:1fr 1fr; }

  /* Mobile drawer nav */
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(82vw,340px); display:flex; flex-direction:column;
    align-items:flex-start; justify-content:center; gap:1.5rem; padding:2rem;
    background:var(--ink); transform:translateX(100%); transition:transform .35s var(--ease); z-index:65;
    box-shadow:-10px 0 40px rgba(0,0,0,.4);
  }
  .nav.is-open{ display:flex; transform:translateX(0); }
  .nav a{ font-size:1.4rem; font-family:var(--font-display); text-transform:uppercase; }
  .nav-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:opacity .3s; z-index:62; }
  .nav-overlay.is-open{ opacity:1; visibility:visible; }
}
@media (max-width:760px){
  .features__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .features__grid .feature:not(:last-child){ border-right:0; border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:2.5rem; }
  .specialities__grid{ grid-template-columns:1fr; }
  .news__grid{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; gap:2rem; }
  .field-row{ grid-template-columns:1fr; }
  .flat-list{ columns:1; }
  .call-bar{ display:block; }
  body{ padding-bottom:56px; }
  .menu-grid{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .pizza-sizes{ grid-template-columns:1fr; gap:0; }
  .pizza-sizes__head{ display:none; }
  .pizza-row > .pizza-row__name{ border-bottom:0; padding-bottom:.2rem; }
  .pizza-row__price{ text-align:left; border-bottom:1px dotted var(--line); padding-top:0; }
  .pizza-row__price::before{ content:attr(data-size) " — "; color:var(--muted-dark); font-weight:600; }
  .pizza-row__price--single::before{ content:""; }
}

/* =========================================================================
   20. REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal,.js-reveal .reveal{ opacity:1; transform:none; }
  .hero__pizza,.hero__leaf{ animation:none; }
}