/* =========================================================
   LE MEXICAIN — Design System
   Palette inspired by mole poblano (deep charcoal-green),
   cempasúchil marigold, dried guajillo chile, and warm masa.
   Display: Fraunces / Body: Work Sans / Data: Space Mono
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,450;0,9..144,600;0,9..144,700;1,9..144,500&family=Work+Sans:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --ink:#14170F;
  --ink-2:#1D2117;
  --ink-3:#262B1F;
  --line: rgba(243,234,216,0.14);
  --marigold:#E8A33D;
  --marigold-deep:#C97F1F;
  --guajillo:#A83226;
  --guajillo-bright:#C4432F;
  --tomatillo:#6B8A4A;
  --bone:#F3EAD8;
  --bone-dim:#E7DCC3;
  --white:#FFFBF3;
  --shadow: 0 20px 60px rgba(10,12,7,0.35);
  --radius: 2px;
  --maxw: 1240px;
  --ease: cubic-bezier(.22,.68,0,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:'Work Sans', sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block; height:auto;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
button{font-family:inherit; cursor:pointer;}
input,textarea,select{font-family:inherit; font-size:1rem;}

h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:600;
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
  color:var(--white);
}
.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--marigold);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";
  width:24px; height:1px;
  background:var(--marigold);
  display:inline-block;
}
p{margin:0 0 1em; color:rgba(243,234,216,0.82);}
.section-lead{max-width:640px;}

:focus-visible{
  outline:2px solid var(--marigold);
  outline-offset:3px;
}

.container{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
@media(max-width:640px){.container{padding:0 18px;}}

/* -------- Zig-zag / papel picado divider (signature motif,
   echoes the sombrero brim zig-zag from the real logo) -------- */
.zigzag{
  height:14px;
  width:100%;
  background:
    linear-gradient(135deg, transparent 50%, var(--ink) 50%) 0 0/16px 16px,
    linear-gradient(45deg, var(--ink) 50%, transparent 50%) 0 0/16px 16px;
  background-color: var(--marigold);
}
.zigzag.on-bone{background-color:var(--bone); }
.zigzag.on-bone{
  background:
    linear-gradient(135deg, transparent 50%, var(--bone) 50%) 0 0/16px 16px,
    linear-gradient(45deg, var(--bone) 50%, transparent 50%) 0 0/16px 16px;
  background-color: var(--marigold);
}
.zigzag.flip{transform:scaleY(-1);}

/* ================= NAV ================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(20,23,15,0.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  max-width:var(--maxw); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{width:44px; height:44px;}
.brand-text{display:flex; flex-direction:column; line-height:1.1;}
.brand-text .name{font-family:'Fraunces', serif; font-weight:700; font-size:1.15rem; color:var(--white);}
.brand-text .tag{font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.14em; color:var(--marigold); text-transform:uppercase;}

.nav-links{display:flex; align-items:center; gap:2px;}
.nav-links a{
  padding:10px 16px; font-size:.92rem; font-weight:500;
  color:var(--bone-dim); border-radius:var(--radius);
  position:relative;
  transition:color .2s var(--ease);
}
.nav-links a:hover, .nav-links a:focus-visible{color:var(--white);}
.nav-links a.active{color:var(--marigold);}
.nav-links a.active::after{
  content:""; position:absolute; left:16px; right:16px; bottom:4px; height:2px; background:var(--marigold);
}
.nav-cta{
  display:flex; align-items:center; gap:10px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px;
  font-size:.88rem; font-weight:600;
  letter-spacing:.01em;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{background:var(--guajillo); color:var(--white);}
.btn-primary:hover{background:var(--guajillo-bright); transform:translateY(-2px);}
.btn-outline{border-color:var(--marigold); color:var(--marigold);}
.btn-outline:hover{background:var(--marigold); color:var(--ink); transform:translateY(-2px);}
.btn-ghost{color:var(--bone); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--marigold); color:var(--marigold);}
.btn-sm{padding:8px 16px; font-size:.78rem;}
.btn-block{width:100%;}
.btn-wa{background:#25D366; color:#0b2b17;}
.btn-wa:hover{background:#2fe377; transform:translateY(-2px);}

.menu-toggle{
  display:none;
  background:none; border:1px solid var(--line); color:var(--bone);
  width:42px; height:42px; border-radius:var(--radius);
  align-items:center; justify-content:center;
}

.nav-links .nav-inline-cta{display:none;}

@media(max-width:940px){
  .nav-links .nav-inline-cta{display:inline-flex;}
  .nav-links{
    position:fixed; top:70px; left:0; right:0; height:calc(100vh - 70px); height:calc(100dvh - 70px);
    background:var(--ink);
    flex-direction:column; align-items:stretch; padding:12px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
    overflow-y:auto;
    z-index:1000;
  }
  .nav-links.open{opacity:1; transform:translateY(0); pointer-events:auto;}
  .nav-links a{padding:16px; border-bottom:1px solid var(--line); font-size:1.05rem;}
  .menu-toggle{display:flex;}
  .nav-cta .btn-outline{display:none;}
}

/* ================= HERO ================= */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:flex-end;
  overflow:hidden; color:var(--white);
}
.hero-media{position:absolute; inset:0; z-index:0;}
.hero-media img{width:100%; height:100%; object-fit:cover;}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,23,15,.35) 0%, rgba(20,23,15,.55) 45%, rgba(20,23,15,.96) 100%);
}
.hero-inner{position:relative; z-index:1; padding:120px 24px 64px; max-width:var(--maxw); margin:0 auto; width:100%;}
.hero h1{
  font-size:clamp(2.6rem, 6.4vw, 5.6rem);
  max-width:14ch;
  margin-bottom:.3em;
}
.hero h1 em{font-style:italic; color:var(--marigold); font-weight:500;}
.hero-sub{font-size:1.1rem; max-width:46ch; color:rgba(255,251,243,.86); margin-bottom:1.8em;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.hero-meta{
  display:flex; gap:32px; margin-top:56px; flex-wrap:wrap;
  padding-top:24px; border-top:1px solid rgba(243,234,216,.18);
}
.hero-meta div{font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(243,234,216,.65);}
.hero-meta strong{display:block; font-family:'Fraunces',serif; font-size:1.3rem; color:var(--white); font-weight:600; letter-spacing:0; text-transform:none; margin-top:4px;}

/* ================= SECTIONS ================= */
section{padding:96px 0;}
@media(max-width:720px){section{padding:64px 0;}}
.section-bone{background:var(--bone); color:var(--ink);}
.section-bone h2, .section-bone h3{color:var(--ink);}
.section-bone p{color:rgba(20,23,15,.72);}
.section-ink2{background:var(--ink-2);}

.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  margin-bottom:48px; flex-wrap:wrap;
}
.section-head h2{font-size:clamp(2rem, 3.6vw, 3rem); margin:.2em 0 0;}

/* ================= CARDS: SIGNATURE DISHES ================= */
.dish-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
@media(max-width:940px){.dish-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.dish-grid{grid-template-columns:1fr;}}

.dish-card{
  position:relative; overflow:hidden; border-radius:var(--radius);
  aspect-ratio:4/5; background:var(--ink-2);
}
.dish-card img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease);}
.dish-card:hover img{transform:scale(1.07);}
.dish-card .dish-info{
  position:absolute; left:0; right:0; bottom:0; padding:24px;
  background:linear-gradient(0deg, rgba(20,23,15,.94) 0%, rgba(20,23,15,0) 100%);
}
.dish-info .cat{font-family:'Space Mono',monospace; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--marigold);}
.dish-info h3{font-size:1.35rem; margin:.25em 0 0; color:var(--white);}
.dish-price{font-family:'Space Mono',monospace; color:var(--marigold); font-size:.95rem; margin-top:6px; display:inline-block;}

/* ================= ABOUT / STORY SPLIT ================= */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
@media(max-width:860px){.split{grid-template-columns:1fr; gap:32px;}}
.split img{border-radius:var(--radius); box-shadow:var(--shadow);}
.split-rev{grid-template-columns:1fr 1fr;}
.split-rev > *:first-child{order:2;}
@media(max-width:860px){.split-rev > *:first-child{order:0;}}

/* ================= STATS BAR ================= */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.stats div{padding:32px 24px; text-align:center; border-left:1px solid var(--line);}
.stats div:first-child{border-left:none;}
.stats strong{display:block; font-family:'Fraunces',serif; font-size:2.4rem; color:var(--marigold); font-weight:600;}
.stats span{font-family:'Space Mono',monospace; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim);}
@media(max-width:720px){.stats{grid-template-columns:repeat(2,1fr);} .stats div:nth-child(3){border-left:none;}}

/* ================= RESTAURANT / BRANCH CARDS ================= */
.branch-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media(max-width:980px){.branch-grid{grid-template-columns:1fr;}}
.branch-card{
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
}
.branch-media{position:relative; aspect-ratio:16/10; overflow:hidden;}
.branch-media img{width:100%; height:100%; object-fit:cover;}
.branch-badge{
  position:absolute; top:16px; left:16px;
  background:var(--guajillo); color:var(--white);
  font-family:'Space Mono',monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 12px; border-radius:2px;
}
.branch-body{padding:28px; display:flex; flex-direction:column; gap:16px; flex:1;}
.branch-body h3{font-size:1.5rem; margin:0;}
.branch-row{display:flex; gap:12px; font-size:.9rem; color:var(--bone-dim);}
.branch-row svg{flex-shrink:0; margin-top:3px; color:var(--marigold);}
.branch-hours{font-family:'Space Mono',monospace; font-size:.82rem; line-height:1.9; color:var(--bone-dim);}
.branch-hours .fri{color:var(--marigold);}
.branch-actions{display:flex; gap:10px; margin-top:auto; padding-top:8px; flex-wrap:wrap;}
.branch-actions .btn{flex:1;}

/* ================= MENU PAGE ================= */
.menu-toolbar{
  position:sticky; top:73px; z-index:50;
  background:rgba(20,23,15,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:18px 0;
}
.menu-tabs{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin;}
.menu-tabs::-webkit-scrollbar{height:4px;}
.menu-tabs::-webkit-scrollbar-thumb{background:var(--line);}
.menu-tab{
  font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  padding:10px 16px; border:1px solid var(--line); border-radius:20px; color:var(--bone-dim);
  white-space:nowrap; background:transparent; flex-shrink:0;
  transition:all .2s var(--ease);
}
.menu-tab:hover{border-color:var(--marigold); color:var(--white);}
.menu-tab.active{background:var(--marigold); border-color:var(--marigold); color:var(--ink); font-weight:700;}
.menu-search{
  margin-top:14px; display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:var(--radius); padding:10px 14px;
  max-width:420px;
}
.menu-search input{background:transparent; border:none; color:var(--white); width:100%; outline:none;}
.menu-search input::placeholder{color:var(--bone-dim);}

.menu-category{padding:56px 0 8px; border-bottom:1px solid var(--line);}
.menu-category h2{font-size:1.9rem;}
.menu-category .cat-sub{font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--marigold); margin-bottom:24px; display:block;}
.menu-list{display:grid; grid-template-columns:1fr 1fr; gap:8px 48px;}
@media(max-width:760px){.menu-list{grid-template-columns:1fr;}}
.menu-item{
  display:flex; align-items:baseline; gap:10px;
  padding:16px 0; border-bottom:1px dashed var(--line);
}
.menu-item .item-name{font-weight:600; color:var(--white); font-size:1.02rem;}
.menu-item .item-desc{display:block; font-weight:400; font-size:.84rem; color:var(--bone-dim); margin-top:3px; line-height:1.5;}
.menu-item .item-leader{flex:1; border-bottom:1px dotted var(--line); transform:translateY(-5px); min-width:12px;}
.menu-item .item-price{
  font-family:'Space Mono',monospace; color:var(--marigold); font-weight:700; font-size:.92rem; white-space:nowrap;
}
.menu-item .item-price small{color:var(--bone-dim); font-weight:400; font-size:.7rem;}
.menu-item.hidden{display:none;}
.menu-add{
  border:1px solid var(--marigold); color:var(--marigold); background:transparent;
  width:26px; height:26px; border-radius:50%; font-size:1rem; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center; transition:all .2s;
}
.menu-add:hover{background:var(--marigold); color:var(--ink);}
.menu-empty{padding:60px 0; text-align:center; color:var(--bone-dim); display:none;}
.menu-empty.show{display:block;}

/* ================= GALLERY ================= */
.gallery-grid{
  columns:3 260px; column-gap:16px;
}
@media(max-width:720px){.gallery-grid{columns:2 180px;}}
.gallery-grid figure{margin:0 0 16px; break-inside:avoid; border-radius:var(--radius); overflow:hidden; cursor:zoom-in; position:relative;}
.gallery-grid img{width:100%; transition:transform .5s var(--ease);}
.gallery-grid figure:hover img{transform:scale(1.05);}

.lightbox{
  position:fixed; inset:0; background:rgba(10,12,7,.94); z-index:2000;
  display:none; align-items:center; justify-content:center; padding:40px;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:min(90vw,1000px); max-height:85vh; object-fit:contain; border-radius:var(--radius);}
.lightbox-close{
  position:absolute; top:24px; right:24px; background:none; border:1px solid var(--line);
  color:var(--white); width:44px; height:44px; border-radius:50%; font-size:1.2rem;
}
.lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); background:none; border:1px solid var(--line); color:var(--white); width:48px; height:48px; border-radius:50%; font-size:1.3rem;}
.lightbox-prev{left:24px;} .lightbox-next{right:24px;}

/* ================= TESTIMONIALS ================= */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media(max-width:860px){.testi-grid{grid-template-columns:1fr;}}
.testi-card{
  background:var(--ink-2); border:1px solid var(--line); padding:32px; border-radius:var(--radius);
}
.testi-stars{color:var(--marigold); letter-spacing:2px; margin-bottom:14px;}
.testi-card p{font-family:'Fraunces',serif; font-style:italic; font-size:1.12rem; color:var(--white); font-weight:450;}
.testi-name{font-family:'Space Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--marigold); margin-top:16px; display:block;}

/* ================= FAQ ================= */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; color:var(--white);
  padding:24px 0; display:flex; justify-content:space-between; align-items:center;
  font-family:'Fraunces',serif; font-size:1.15rem; gap:20px;
}
.faq-q .icon{font-family:'Space Mono',monospace; color:var(--marigold); transition:transform .3s var(--ease); flex-shrink:0;}
.faq-item.open .faq-q .icon{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s var(--ease);}
.faq-a p{padding-bottom:24px; margin:0;}

/* ================= FORMS ================= */
.form-card{background:var(--ink-2); border:1px solid var(--line); padding:40px; border-radius:var(--radius);}
@media(max-width:600px){.form-card{padding:24px;}}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media(max-width:600px){.form-grid{grid-template-columns:1fr;}}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
.field label{font-family:'Space Mono',monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim);}
.field input, .field select, .field textarea{
  background:var(--ink); border:1px solid var(--line); color:var(--white);
  padding:13px 14px; border-radius:var(--radius); outline:none; transition:border-color .2s;
  width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--marigold);}
.field textarea{resize:vertical; min-height:100px;}
.field.error input, .field.error select, .field.error textarea{border-color:var(--guajillo-bright);}
.field .err-msg{font-size:.76rem; color:var(--guajillo-bright); display:none;}
.field.error .err-msg{display:block;}
.field-full{grid-column:1/-1;}
.radio-group{display:flex; gap:10px; flex-wrap:wrap;}
.radio-pill{
  border:1px solid var(--line); border-radius:20px; padding:9px 16px; font-size:.84rem; color:var(--bone-dim); cursor:pointer;
  transition:all .2s;
}
.radio-pill input{display:none;}
.radio-pill.checked{background:var(--marigold); border-color:var(--marigold); color:var(--ink); font-weight:600;}
.form-success{
  display:none; text-align:center; padding:48px 24px;
}
.form-success.show{display:block;}
.form-success .check{
  width:64px; height:64px; border-radius:50%; background:var(--tomatillo); color:var(--white);
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:1.8rem;
}

/* ================= CART / ORDER ================= */
.order-layout{display:grid; grid-template-columns:1.6fr 1fr; gap:40px; align-items:flex-start;}
@media(max-width:940px){.order-layout{grid-template-columns:1fr;}}
.cart-panel{
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; position:sticky; top:150px;
}
.cart-empty{color:var(--bone-dim); font-size:.92rem; text-align:center; padding:24px 0;}
.cart-line{display:flex; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); font-size:.9rem;}
.cart-line .cl-name{color:var(--white); font-weight:600;}
.cart-line .cl-meta{color:var(--bone-dim); font-size:.78rem;}
.cart-line .cl-price{font-family:'Space Mono',monospace; color:var(--marigold);}
.cart-line button{background:none; border:none; color:var(--bone-dim); font-size:1rem;}
.cart-line button:hover{color:var(--guajillo-bright);}
.cart-total{display:flex; justify-content:space-between; padding-top:18px; font-family:'Fraunces',serif; font-size:1.3rem; color:var(--white);}
.cart-total span:last-child{color:var(--marigold); font-family:'Space Mono',monospace; font-size:1.1rem;}
.qty-stepper{display:flex; align-items:center; gap:6px;}
.qty-stepper button{width:22px; height:22px; border:1px solid var(--line); background:none; color:var(--bone); border-radius:50%; font-size:.8rem; line-height:1;}

/* ================= FOOTER ================= */
footer{background:var(--ink); border-top:1px solid var(--line); padding:72px 0 28px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:56px;}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.footer-brand{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.footer-brand img{width:42px; height:42px;}
.footer-col h4{font-family:'Space Mono',monospace; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--marigold); margin-bottom:18px;}
.footer-col a, .footer-col li{display:block; color:var(--bone-dim); font-size:.9rem; margin-bottom:12px; transition:color .2s;}
.footer-col a:hover{color:var(--marigold);}
.social-row{display:flex; gap:12px; margin-top:8px;}
.social-row a{
  width:38px; height:38px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--bone);
}
.social-row a:hover{border-color:var(--marigold); color:var(--marigold);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding-top:28px; border-top:1px solid var(--line);
  font-size:.8rem; color:var(--bone-dim);
}
.footer-bottom a{color:var(--bone-dim);}
.footer-bottom a:hover{color:var(--marigold);}

/* ================= FLOATING BUTTONS ================= */
.floating-wa{
  position:fixed; bottom:24px; right:24px; z-index:900;
  width:58px; height:58px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.4);
  color:#0b2b17; transition:transform .25s var(--ease);
}
.floating-wa:hover{transform:scale(1.08);}
.back-top{
  position:fixed; bottom:24px; left:24px; z-index:900;
  width:46px; height:46px; border-radius:50%; background:var(--ink-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--bone);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
  transform:translateY(8px);
}
.back-top.show{opacity:1; pointer-events:auto; transform:translateY(0);}

/* ================= UTILITIES ================= */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.text-center{text-align:center; margin-left:auto; margin-right:auto;}
.mt-0{margin-top:0;}
.badge-new{
  background:var(--guajillo); color:var(--white); font-family:'Space Mono',monospace;
  font-size:.62rem; letter-spacing:.08em; padding:3px 9px; border-radius:10px; text-transform:uppercase; margin-left:8px; vertical-align:middle;
}

/* ================= PAGE HERO (interior pages) ================= */
.page-hero{
  padding:150px 0 64px; text-align:center; position:relative; overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; inset:0; opacity:.14; z-index:0;
  background-image:radial-gradient(circle at 20% 20%, var(--guajillo) 0, transparent 45%), radial-gradient(circle at 80% 60%, var(--tomatillo) 0, transparent 40%);
}
.page-hero .container{position:relative; z-index:1;}
.page-hero .eyebrow{justify-content:center;}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.6rem); max-width:18ch; margin:.3em auto 0;}
.page-hero p{max-width:56ch; margin:20px auto 0;}

/* 404 */
.error-page{min-height:80vh; display:flex; align-items:center; justify-content:center; text-align:center;}
.error-code{font-family:'Fraunces',serif; font-size:clamp(5rem,16vw,10rem); color:var(--marigold); line-height:1; font-weight:700;}

/* Map embed frame */
.map-frame{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; aspect-ratio:16/9;}
.map-frame iframe{width:100%; height:100%; border:0;}

/* skip link */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--marigold); color:var(--ink); padding:12px 20px; z-index:3000;
}
.skip-link:focus{left:16px; top:16px;}