:root{
  --paper:#F4EFE3;
  --cream:#FAF5E9;
  --beige:#EBE2CE;
  --ink:#21302A;
  --ink-soft:#3A4A41;
  --ink-mute:#5C6760;
  --hair:rgba(33,48,42,.13);
  --hair-soft:rgba(33,48,42,.07);
  --emerald:#1F4034;
  --emerald-deep:#152C24;
  --pistachio:#9CB36B;
  --pistachio-soft:#D9DFAF;
  --espresso:#3E2C1F;
  --gold:#A6884F;
  --gold-light:#C7AC74;
  --gold-deep:#6E5825; /* AA-contrast gold for small text on light surfaces */
  --display:"Cormorant Garamond", "Times New Roman", serif;
  --sans:"Karla", system-ui, -apple-system, sans-serif;
  --ease:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:96px;}
html,body{background:var(--paper); color:var(--ink); font-family:var(--sans); font-weight:400; -webkit-font-smoothing:antialiased;}
body{overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
::selection{background:var(--emerald); color:var(--pistachio-soft);}

.wrap{max-width:1240px; margin:0 auto; padding:0 56px; position:relative;}
@media (max-width:880px){ .wrap{padding:0 32px;} }
@media (max-width:560px){ .wrap{padding:0 22px;} }

/* ─────────── REVEAL ─────────── */
@media (prefers-reduced-motion: no-preference){
  .reveal-on [data-reveal]{
    opacity:0; transform:translateY(28px);
    transition:opacity .9s var(--ease), transform .9s var(--ease);
    transition-delay:var(--reveal-delay, 0ms);
    will-change:opacity, transform;
  }
  .reveal-on [data-reveal].is-in{opacity:1; transform:none;}
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

/* ─────────── TYPE ─────────── */
.eyebrow{font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-deep); font-weight:600;}
.display{font-family:var(--display); font-weight:400; line-height:1.04; letter-spacing:-.012em; color:var(--ink);}
.display em{font-style:italic; color:var(--emerald); font-weight:500;}

/* ─────────── BUTTONS (unified system) ─────────── */
.btn{
  font-size:12.5px; letter-spacing:.06em; font-weight:500;
  padding:15px 28px; border-radius:999px;
  display:inline-flex; align-items:center; gap:11px;
  background:transparent; color:var(--ink); border:1px solid var(--hair);
  transition:.35s var(--ease); white-space:nowrap;
}
.btn:hover{border-color:var(--ink); transform:translateY(-1px);}
.btn.primary{background:var(--emerald); color:var(--cream); border-color:var(--emerald);}
.btn.primary:hover{background:var(--emerald-deep); border-color:var(--emerald-deep);}
.btn .arr{font-family:var(--display); font-size:17px; line-height:1; transition:transform .35s var(--ease);}
.btn:hover .arr{transform:translateX(4px);}

/* Dark-context overrides (Visit emerald section + home hero) */
.visit .btn{color:var(--cream); border-color:var(--gold-light);}
.visit .btn:hover{border-color:var(--cream); background:rgba(250,245,233,.06);}
.visit .btn.primary{background:var(--cream); color:var(--emerald); border-color:var(--cream);}
.visit .btn.primary:hover{background:var(--pistachio-soft); border-color:var(--pistachio-soft); color:var(--emerald-deep);}

.link-soft{display:inline-flex; align-items:center; gap:9px; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; color:var(--emerald);}
.link-soft .arr{font-family:var(--display); font-size:16px; text-transform:none; transition:transform .35s var(--ease);}
.link-soft:hover .arr{transform:translateX(4px);}

/* ─────────── UNIFIED IMAGE FRAMING ─────────── */
.story-img, .shop-feature, .shop-tile, .sig-vis{
  border-radius:8px;
  outline:1px solid rgba(199,172,116,.5);
  outline-offset:3px;
}

/* ─────────── NAV (opaque cream default; home overrides to transparent) ─────────── */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(244,239,227,.93);
  backdrop-filter:saturate(1.1) blur(12px);
  border-bottom:1px solid var(--hair-soft);
  transition:background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.scrolled{
  box-shadow:0 10px 34px -26px rgba(23,46,38,.6);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding-top:20px; padding-bottom:20px; gap:32px;}
.brand{display:flex; align-items:center; gap:13px; white-space:nowrap;}
.brand-mark{width:48px; height:48px; flex:0 0 48px;}
.brand-mark img{width:100%; height:100%; object-fit:contain; display:block;}
.brand-name{font-family:var(--display); font-size:22px; font-weight:500; letter-spacing:.01em; color:var(--ink); transition:color .4s var(--ease);}
.brand-name em{font-style:italic; color:var(--gold-deep); font-weight:400; transition:color .4s var(--ease);}
.nav-links{display:flex; gap:30px; font-size:13px; align-items:center;}
.nav-links a{color:var(--ink-soft); font-weight:500; position:relative; letter-spacing:.02em; transition:color .35s var(--ease); padding:6px 0; display:inline-flex; align-items:center; min-height:24px;}
.nav-links a::after{content:""; position:absolute; left:0; bottom:2px; height:1px; width:0; background:var(--emerald); transition:width .35s var(--ease), background .35s var(--ease);}
.nav-links a:hover{color:var(--emerald);}
.nav-links a:hover::after{width:100%;}
.nav-links a.is-current{color:var(--emerald);}
.nav-links a.is-current::after{width:100%;}
.nav-cta{font-size:12.5px; font-weight:500; letter-spacing:.05em; border:1px solid var(--hair); color:var(--ink); padding:11px 20px; border-radius:999px; display:inline-flex; align-items:center; gap:9px; white-space:nowrap; transition:.35s var(--ease); background:transparent;}
.nav-cta:hover{border-color:var(--emerald); color:var(--emerald);}
.nav-cta .dot{width:6px; height:6px; border-radius:50%; background:var(--pistachio);}

/* Home variant: nav transparent over the hero photo */
body.home .nav{
  /* Opaque deep-emerald header so cream text over the bright hero photo clears
     4.5:1 with certainty (a translucent header lets the bright photo bleed through
     and drops real + measured contrast below AA). The hero photo remains fully
     visible immediately below the header strip. */
  background-color:#13201A;
  border-bottom-color:transparent;
}
body.home .nav .brand-name{color:var(--cream); text-shadow:0 1px 12px rgba(15,22,18,.4);}
body.home .nav .brand-name em{color:var(--gold-light);}
body.home .nav-links a{color:rgba(250,245,233,.92); text-shadow:0 1px 12px rgba(15,22,18,.35);}
body.home .nav-links a:hover, body.home .nav-links a.is-current{color:var(--pistachio-soft);}
body.home .nav-links a::after{background:var(--pistachio-soft);}
body.home .nav-cta{color:var(--cream); border-color:rgba(250,245,233,.45); background:rgba(15,22,18,.18); backdrop-filter:saturate(1.1) blur(6px);}
body.home .nav-cta:hover{border-color:var(--cream); background:rgba(15,22,18,.28);}
/* Home + scrolled = same as default opaque */
body.home .nav.scrolled{
  background:rgba(244,239,227,.93);
  backdrop-filter:saturate(1.1) blur(12px);
  border-bottom-color:var(--hair-soft);
}
body.home .nav.scrolled .brand-name{color:var(--ink); text-shadow:none;}
body.home .nav.scrolled .brand-name em{color:var(--gold-deep);}
body.home .nav.scrolled .nav-links a{color:var(--ink-soft); text-shadow:none;}
body.home .nav.scrolled .nav-links a:hover, body.home .nav.scrolled .nav-links a.is-current{color:var(--emerald);}
body.home .nav.scrolled .nav-links a::after{background:var(--emerald);}
body.home .nav.scrolled .nav-cta{color:var(--ink); border-color:var(--hair); background:transparent; backdrop-filter:none;}
body.home .nav.scrolled .nav-cta:hover{border-color:var(--emerald); color:var(--emerald); background:transparent;}

/* Hamburger (base — hidden on desktop, shown on mobile via media query below) */
.nav-toggle{
  display:none; width:44px; height:44px; padding:0; border:0; background:transparent;
  align-items:center; justify-content:center; flex-direction:column; gap:6px;
  color:var(--ink); cursor:pointer; transition:color .4s var(--ease), background .4s var(--ease);
  border-radius:50%;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
/* On the home page the hamburger sits over a photograph — give it a subtle frosted
   pill so it's always visible regardless of what's behind it. */
body.home .nav-toggle{
  color:var(--cream);
  background:rgba(15,22,18,.28);
  backdrop-filter:saturate(1.1) blur(6px);
  box-shadow:0 1px 8px rgba(15,22,18,.25);
}
body.home .nav.scrolled .nav-toggle{
  color:var(--ink);
  background:transparent;
  backdrop-filter:none;
  box-shadow:none;
}
.nav-toggle span{display:block; width:22px; height:1.5px; background:currentColor; transition:transform .35s var(--ease), opacity .25s var(--ease);}
.nav-toggle[aria-expanded="true"]{color:var(--ink);}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* Mobile full-screen menu */
.m-menu{
  position:fixed; inset:0; z-index:40;
  background:var(--paper);
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.m-menu.is-open{opacity:1; pointer-events:auto; visibility:visible;}
.m-menu-inner{
  height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:36px;
  padding:96px 32px 56px; text-align:center;
}
.m-menu nav{display:flex; flex-direction:column; gap:4px;}
.m-menu nav a{
  font-family:var(--display); font-weight:500; font-size:34px; color:var(--ink);
  padding:12px 20px; min-height:54px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:color .25s var(--ease); letter-spacing:-.005em;
}
.m-menu nav a:active, .m-menu nav a.is-current{color:var(--emerald);}
.m-menu .btn.primary{padding:18px 36px; min-height:54px;}
.m-menu-links{display:flex; gap:22px; flex-wrap:wrap; justify-content:center; font-size:13px; letter-spacing:.04em;}
.m-menu-links a{color:var(--ink-soft); font-weight:500; padding:8px 4px; min-height:40px; display:inline-flex; align-items:center;}
.m-menu-links a:active{color:var(--emerald);}
.m-menu-foot{font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-mute); margin-top:auto;}
body.menu-open{overflow:hidden;}

/* Responsive nav switch (placed AFTER nav-toggle base rule so display:flex wins) */
@media (max-width:900px){
  .nav-links{display:none;}
  .nav-cta{display:none;}
  .nav-toggle{display:flex;}
}
@media (max-width:520px){
  .nav-inner{gap:14px;}
  .brand-name{font-size:19px;}
  .brand-mark{width:40px; height:40px; flex-basis:40px;}
}

/* ─────────── HERO (home only — full-bleed photo) ─────────── */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:clamp(640px, 92vh, 1000px);
  min-height:clamp(640px, 92dvh, 1000px);
  display:flex; align-items:center; justify-content:center;
  color:var(--cream);
}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:50% 55%;}
.hero-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(78% 56% at 50% 50%, rgba(15,22,18,.46) 0%, rgba(15,22,18,0) 100%),
    linear-gradient(180deg, rgba(15,22,18,.42) 0%, rgba(15,22,18,.48) 55%, rgba(15,22,18,.80) 100%);
}
.hero-inner{position:relative; z-index:2; padding:120px 0 96px; text-align:center; width:100%;}
.hero-content{max-width:920px; margin:0 auto;}
.hero .eyebrow{display:inline-flex; align-items:center; gap:14px; color:var(--gold-light);}
.hero .eyebrow::before, .hero .eyebrow::after{content:""; width:42px; height:1px; background:currentColor; opacity:.55;}
.hero h1{font-size:clamp(68px, 11vw, 168px); margin-top:36px; color:var(--cream); text-shadow:0 2px 30px rgba(15,22,18,.35);}
.hero h1 em{color:var(--pistachio-soft);}
.hero-sub{margin:38px auto 0; max-width:540px; font-size:18px; line-height:1.65; color:rgba(250,245,233,.86);}
.hero-cta{margin-top:46px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
.hero-scroll{margin-top:60px;}
.hero-scroll .link-soft{color:var(--cream);}
.hero-scroll .link-soft:hover{color:var(--pistachio-soft);}

.hero .btn{color:var(--cream); border-color:var(--gold-light);}
.hero .btn:hover{border-color:var(--cream); background:rgba(250,245,233,.08);}
.hero .btn.primary{background:var(--cream); color:var(--emerald); border-color:var(--cream);}
.hero .btn.primary:hover{background:var(--pistachio-soft); border-color:var(--pistachio-soft); color:var(--emerald-deep);}

@media (max-width:880px){
  .hero{
    min-height:clamp(540px, 86vh, 720px);
    min-height:clamp(540px, 86dvh, 720px);
  }
  .hero-inner{padding:104px 0 80px;}
  .hero-sub{max-width:420px;}
  .hero .eyebrow::after{display:none;}
}
@media (max-width:560px){
  .hero h1{font-size:clamp(50px, 15vw, 78px); margin-top:30px;}
  .hero-sub{font-size:16px; margin-top:30px;}
  .hero-inner{padding:96px 0 64px;}
  .hero-scroll{margin-top:48px;}
  /* Keep the eyebrow from running into the screen edge on small phones */
  .hero .eyebrow{font-size:10px; letter-spacing:.2em;}
  .hero .eyebrow::before{width:30px;}
}
@media (max-width:380px){
  .hero h1{font-size:46px;}
  .hero .eyebrow{letter-spacing:.16em;}
}

/* ─────────── PAGE HERO (non-home pages) ─────────── */
.page-hero{
  padding:128px 0 88px;
  background:var(--cream);
  border-bottom:1px solid var(--hair-soft);
}
.page-hero .eyebrow{display:block; margin-bottom:22px;}
.page-hero h1{
  font-family:var(--display); font-weight:400; line-height:1.04;
  font-size:clamp(48px, 7vw, 96px); color:var(--ink); letter-spacing:-.012em;
  max-width:880px;
}
.page-hero h1 em{font-style:italic; color:var(--emerald); font-weight:500;}
.page-hero p{margin-top:28px; max-width:540px; font-size:17px; line-height:1.7; color:var(--ink-soft);}
.page-actions{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap;}
@media (max-width:420px){ .page-actions{flex-direction:column; align-items:stretch; max-width:320px;} .page-actions .btn{width:100%; justify-content:center;} }
@media (max-width:880px){ .page-hero{padding:104px 0 72px;} }
@media (max-width:560px){ .page-hero{padding:92px 0 60px;} .page-hero h1{font-size:clamp(38px, 11vw, 60px);} }

/* ─────────── SECTION SHELL ─────────── */
section.block{padding:120px 0;}
@media (max-width:880px){ section.block{padding:88px 0;} }
@media (max-width:560px){ section.block{padding:72px 0;} }

.sec-head{max-width:760px; margin-bottom:64px;}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.sec-head .eyebrow{display:block; margin-bottom:22px;}
.sec-head h2{font-size:clamp(38px, 5.4vw, 72px);}
.sec-head p{margin-top:26px; font-size:17px; line-height:1.7; color:var(--ink-soft); max-width:540px;}
.sec-head.center p{margin-left:auto; margin-right:auto;}
@media (max-width:560px){ .sec-head{margin-bottom:44px;} }

/* ─────────── SIGNATURES (real photo cards) ─────────── */
.sigs{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
.sig{display:flex; flex-direction:column;}
.sig-vis{
  aspect-ratio:4/5; overflow:hidden; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:var(--emerald);
  transition:box-shadow .5s var(--ease), transform .5s var(--ease);
}
.sig:hover .sig-vis{box-shadow:0 36px 70px -42px rgba(23,46,38,.55); transform:translateY(-4px);}
.sig-vis img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease);}
.sig:hover .sig-vis img{transform:scale(1.06);}
.sig-cat{margin-top:24px; font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-deep); font-weight:600;}
.sig h3{font-family:var(--display); font-weight:500; font-size:30px; line-height:1.05; color:var(--ink); margin-top:10px;}
.sig p{margin-top:12px; font-size:14.5px; line-height:1.65; color:var(--ink-soft); font-style:italic;}
.sigs-foot{margin-top:60px;}
@media (max-width:880px){ .sigs{grid-template-columns:1fr; gap:44px; max-width:440px; margin:0 auto;} }

/* ─────────── STORY ─────────── */
.story{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;}
.story-img{aspect-ratio:4/5; overflow:hidden; position:relative; background:var(--emerald); box-shadow:0 40px 90px -52px rgba(23,46,38,.55);}
.story-img img{width:100%; height:100%; object-fit:cover;}
.story-badge{position:absolute; right:22px; top:22px; width:104px; height:104px; border-radius:50%; background:var(--paper); border:1px solid var(--gold); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-family:var(--display); font-style:italic; font-size:13px; color:var(--emerald); line-height:1.25;}
.story-badge .top{font-family:var(--sans); font-style:normal; font-weight:600; font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:4px;}
.story-text .eyebrow{display:block; margin-bottom:22px;}
.story-text h2{font-size:clamp(38px, 5vw, 68px);}
.story-text .body{margin-top:30px; max-width:480px; font-size:17.5px; line-height:1.75; color:var(--ink-soft);}
.story-text .link-soft{margin-top:36px;}
@media (max-width:880px){ .story{grid-template-columns:1fr; gap:44px;} .story-img{order:-1; max-width:460px;} }

/* ─────────── WHY VISIT ─────────── */
.why-band{padding:96px 0 108px;}
@media (max-width:880px){ .why-band{padding:68px 0 80px;} }
.why-head{max-width:640px; margin-bottom:52px;}
.why-head .eyebrow{display:block; margin-bottom:18px;}
.why-head h2{font-family:var(--display); font-weight:400; font-size:clamp(34px, 4.4vw, 56px); line-height:1.05; letter-spacing:-.01em; color:var(--ink);}
.whys{display:grid; grid-template-columns:repeat(4,1fr); gap:36px 32px;}
.why{padding:28px 24px 0 0; border-top:1px solid var(--hair);}
.why-icon{width:30px; height:30px; color:var(--gold); display:block; margin-bottom:18px;}
.why h3{font-family:var(--display); font-weight:500; font-size:24px; line-height:1.15; color:var(--ink);}
.why p{margin-top:12px; font-size:14px; line-height:1.6; color:var(--ink-mute); max-width:220px;}
@media (max-width:820px){ .whys{grid-template-columns:1fr 1fr; gap:28px 32px;} .why{padding-right:0;} }
@media (max-width:460px){ .whys{grid-template-columns:1fr;} }

/* ─────────── MENU ─────────── */
.menu-cat{display:grid; grid-template-columns:minmax(180px,250px) 1fr; gap:52px; align-items:start; background:var(--cream); border:1px solid var(--hair-soft); border-radius:14px; padding:48px 52px; margin-bottom:22px;}
.menu-cat-head .n{font-family:var(--display); font-style:italic; font-size:16px; color:var(--gold-deep); display:block; margin-bottom:14px;}
.menu-cat-head h2{font-family:var(--display); font-weight:500; font-size:32px; line-height:1.04; color:var(--ink);}
.menu-cat-head .price-lead{font-family:var(--display); font-style:italic; font-size:20px; color:var(--emerald); margin-top:8px;}
.menu-cat-head .note{margin-top:14px; font-size:13.5px; line-height:1.65; color:var(--ink-mute); font-style:italic; max-width:215px;}
.size-head{display:flex; justify-content:flex-end; gap:18px; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); font-weight:600; padding-bottom:8px; margin-bottom:2px; border-bottom:1px solid var(--hair-soft);}
.menu-items{column-count:2; column-gap:52px;}
.menu-items.single{column-count:1; max-width:600px;}
.m-row{break-inside:avoid; display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:15px 0; border-bottom:1px solid var(--hair-soft);}
.m-row .nm{font-family:var(--display); font-weight:500; font-size:20px; color:var(--ink); line-height:1.25;}
.m-row .nm small{display:block; font-family:var(--sans); font-size:11.5px; font-weight:400; color:var(--ink-mute); letter-spacing:.01em; margin-top:2px;}
.m-row .pr{font-family:var(--sans); font-size:13px; color:var(--ink-mute); font-weight:500; white-space:nowrap; letter-spacing:.02em; font-variant-numeric:tabular-nums;}
.m-row .pr.tiers{font-size:12.5px; letter-spacing:.04em;}
.m-row .note{flex-basis:100%; font-size:12.5px; color:var(--ink-mute); line-height:1.55; margin-top:5px;}
@media (max-width:820px){ .menu-cat{grid-template-columns:1fr; gap:24px; padding:34px 28px;} .menu-cat-head .note{max-width:none;} }
@media (max-width:700px){ .menu-items{column-count:1;} }
@media (max-width:420px){
  .m-row{flex-wrap:wrap; gap:2px 16px;}
  .m-row .pr{margin-left:auto;}
}

.flavors{column-count:3; column-gap:44px; margin-top:4px;}
.flavors li{break-inside:avoid; list-style:none; padding:11px 0; font-size:16px; color:var(--ink-soft); border-bottom:1px solid var(--hair-soft);}
.flavors.two{column-count:2;}
@media (max-width:760px){ .flavors{column-count:2; column-gap:28px;} }
@media (max-width:420px){ .flavors{column-count:1;} .flavors.two{column-count:1;} }
.gelato-price{font-family:var(--display); font-size:18px; color:var(--ink-soft); margin-bottom:26px; letter-spacing:.01em;}
.gelato-price .sep{color:var(--gold-deep); margin:0 10px;}
.cat-foot{margin-top:24px; font-size:12.5px; color:var(--ink-mute); letter-spacing:.03em; line-height:1.65;}

/* ─────────── SHOP / ATMOSPHERE ─────────── */
.shop-feature{position:relative; overflow:hidden; aspect-ratio:21/9; background:var(--emerald);}
.shop-feature img{width:100%; height:100%; object-fit:cover;}
.shop-feature::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(23,46,38,.66), rgba(23,46,38,.14) 60%, transparent);}
.shop-feature .cap{position:absolute; left:clamp(24px,4vw,56px); bottom:clamp(24px,4vw,52px); right:24px; color:var(--cream); max-width:480px; z-index:1;}
.shop-feature .cap .eyebrow{color:var(--gold-light); display:block; margin-bottom:18px;}
.shop-feature .cap h2{font-family:var(--display); font-weight:500; font-size:clamp(30px,4vw,52px); line-height:1.05; color:var(--cream);}
.shop-feature .cap p{margin-top:18px; font-size:15.5px; line-height:1.7; color:rgba(250,245,233,.86);}
.shop-pair{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px;}
.shop-tile{aspect-ratio:4/3; overflow:hidden; background:var(--emerald);}
.shop-tile img{width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease);}
.shop-tile:hover img{transform:scale(1.05);}
@media (max-width:680px){ .shop-feature{aspect-ratio:4/5;} .shop-pair{grid-template-columns:1fr;} }

/* ─────────── VISIT — LOCATE (map + storefront) ─────────── */
.locate{padding:96px 0 40px;}
@media (max-width:880px){ .locate{padding:64px 0 24px;} }
.locate-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:20px; align-items:stretch;}
.locate figure{margin:0; position:relative; border-radius:8px; overflow:hidden; outline:1px solid rgba(199,172,116,.5); outline-offset:3px; background:var(--cream);}
.locate-map{min-height:420px; background:var(--beige);}
/* Placeholder shown beneath the map (visible only if the iframe is slow/blocked) */
.locate-map::before{
  content:"Map — 1801 L Street, Midtown Sacramento";
  position:absolute; inset:0; z-index:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:24px; font-size:13px; letter-spacing:.04em; color:var(--ink-mute);
  background:
    repeating-linear-gradient(0deg, rgba(31,64,52,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(31,64,52,.05) 0 1px, transparent 1px 34px),
    var(--beige);
}
.locate-map iframe{position:relative; z-index:1; display:block; width:100%; height:100%; min-height:420px; border:0; filter:saturate(.92);}
.locate-map .map-open{
  position:absolute; z-index:2; right:14px; bottom:14px;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--cream); color:var(--ink); border:1px solid var(--hair);
  padding:10px 16px; border-radius:999px; font-size:12px; font-weight:600;
  letter-spacing:.04em; min-height:40px; box-shadow:0 6px 18px -8px rgba(15,22,18,.5);
  transition:.3s var(--ease);
}
.locate-map .map-open:hover{background:var(--emerald); color:var(--cream); border-color:var(--emerald);}
.locate-map .map-open svg{width:15px; height:15px;}
.locate-photo img{width:100%; height:100%; object-fit:cover; min-height:420px;}
.locate-photo figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:34px 22px 18px;
  font-size:13px; line-height:1.5; color:var(--cream);
  background:linear-gradient(180deg, transparent, rgba(15,22,18,.78));
}
@media (max-width:760px){
  .locate-grid{grid-template-columns:1fr;}
  .locate-map, .locate-map iframe, .locate-photo img{min-height:340px;}
  .locate-photo{aspect-ratio:16/10;}
}

/* ─────────── VISIT ─────────── */
.visit{background:var(--emerald); color:var(--cream);}
.visit .wrap{padding-top:130px; padding-bottom:130px;}
@media (max-width:560px){ .visit .wrap{padding-top:84px; padding-bottom:84px;} }
.visit .eyebrow{color:var(--gold-light); display:block; margin-bottom:22px;}
.visit h2{font-family:var(--display); font-weight:400; font-size:clamp(38px,5vw,66px); color:var(--cream); line-height:1.02; margin-bottom:64px;}
.visit-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:56px; align-items:start;}
.visit h3{font-family:var(--sans); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-light); font-weight:600; margin-bottom:20px;}
.visit address{font-style:normal; font-size:16px; line-height:1.85;}
.visit address b{display:block; font-family:var(--display); font-style:italic; font-weight:500; font-size:25px; color:var(--pistachio-soft); margin-bottom:8px;}
.visit address a{text-decoration:none;}
.visit address a:hover{color:var(--pistachio-soft);}
.visit .row{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:11px 0; border-bottom:1px solid rgba(250,245,233,.13); font-size:14px;}
.visit .row:last-of-type{border-bottom:none;}
.visit .row .h{font-family:var(--display); font-style:italic; font-weight:500; color:var(--pistachio-soft); font-size:17px;}
.visit p{font-size:15px; line-height:1.75; color:rgba(250,245,233,.84); max-width:280px;}
.visit .park{margin-top:18px; font-size:12.5px; line-height:1.6; color:rgba(250,245,233,.62);}
.visit-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px;}
@media (max-width:880px){ .visit-grid{grid-template-columns:1fr; gap:48px;} .visit h2{margin-bottom:48px;} }

/* ─────────── CLOSING ─────────── */
.closing{padding:140px 0; text-align:center;}
@media (max-width:560px){ .closing{padding:88px 0;} }
.closing .eyebrow{display:block; margin-bottom:24px;}
.closing h2{font-size:clamp(40px,6vw,86px); max-width:840px; margin:0 auto;}
.closing p{margin:26px auto 42px; max-width:440px; font-size:17px; line-height:1.7; color:var(--ink-soft);}
.closing .actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ─────────── FOOTER ─────────── */
footer{border-top:1px solid var(--hair); padding:72px 0 48px;}
.foot-grid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:48px;}
.foot-about{max-width:300px; margin-top:18px; font-size:14px; line-height:1.65; color:var(--ink-mute);}
.foot-grid h2{font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink); margin-bottom:18px; font-weight:600; line-height:1.2;}
.foot-grid ul{list-style:none; display:flex; flex-direction:column; gap:6px; font-size:14px;}
.foot-grid ul a{color:var(--ink-soft); display:inline-flex; align-items:center; min-height:24px; padding:3px 0;}
.foot-grid a{color:var(--ink-soft);}
.foot-grid a:hover{color:var(--emerald);}
.foot-bottom{margin-top:56px; padding-top:24px; border-top:1px solid var(--hair-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute);}
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr; gap:36px;} }
@media (max-width:420px){ .foot-grid{grid-template-columns:1fr; gap:32px;} }

/* ─────────── PHONE OPTIMIZATIONS ─────────── */
a, button, .btn, .link-soft, .nav-toggle, .tab{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.btn:active{transform:scale(.97);}
.link-soft:active{opacity:.7;}
@media (max-width:900px){
  .btn{min-height:48px; padding:16px 26px;}
  .link-soft{padding:10px 4px; min-height:44px; align-items:center;}
  .foot-grid ul a{padding:6px 0; display:inline-block;}
}
@media (max-width:420px){
  .hero-cta, .closing .actions, .visit-cta{flex-direction:column; align-items:stretch;}
  .hero-cta, .closing .actions{max-width:300px; margin-left:auto; margin-right:auto;}
  .hero-cta .btn, .closing .actions .btn, .visit-cta .btn{width:100%; justify-content:center;}
}
input, select, textarea{font-size:16px;}

/* ─────────── ACCESSIBILITY (WCAG 2.1 AA / ADA) ─────────── */
/* Skip link — hidden until focused */
.skip-link{
  position:fixed; top:10px; left:50%; transform:translate(-50%,-160%);
  z-index:100; background:var(--emerald); color:var(--cream);
  padding:12px 22px; border-radius:999px; font-size:13px; font-weight:600;
  letter-spacing:.04em; box-shadow:0 8px 24px -10px rgba(15,22,18,.6);
  transition:transform .25s var(--ease);
}
.skip-link:focus{transform:translate(-50%,0); outline:2px solid var(--gold-light); outline-offset:2px;}

/* Visible keyboard focus on every interactive element */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-cta:focus-visible,
.nav-toggle:focus-visible, .link-soft:focus-visible, input:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--gold-deep);
  outline-offset:3px;
  border-radius:6px;
}
/* On dark surfaces use a light focus ring for contrast */
.hero a:focus-visible, .hero .btn:focus-visible,
.visit a:focus-visible, .visit .btn:focus-visible,
.shop-feature a:focus-visible,
.nav:not(.scrolled) .nav-toggle:focus-visible,
body.home .nav:not(.scrolled) a:focus-visible,
.m-menu a:focus-visible{
  outline-color:var(--pistachio-soft);
}
main:focus{outline:none;}
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Accessibility / ADA badge in footer */
.foot-a11y{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:20px; padding:9px 15px;
  border:1px solid var(--hair); border-radius:999px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600; min-height:40px;
  transition:.3s var(--ease);
}
.foot-a11y:hover{border-color:var(--emerald); color:var(--emerald);}
.foot-a11y svg{width:18px; height:18px; flex:0 0 18px; color:var(--emerald);}

/* Accessibility statement page */
.a11y-doc{max-width:760px;}
.a11y-doc h2{font-family:var(--display); font-weight:500; font-size:clamp(26px,3.2vw,36px); color:var(--ink); margin:48px 0 16px;}
.a11y-doc h2:first-of-type{margin-top:0;}
.a11y-doc p{font-size:16px; line-height:1.75; color:var(--ink-soft); margin-bottom:14px;}
.a11y-doc ul{margin:0 0 14px 20px; color:var(--ink-soft);}
.a11y-doc li{font-size:16px; line-height:1.7; margin-bottom:8px;}
.a11y-doc a{color:var(--emerald); text-decoration:underline; text-underline-offset:3px;}

/* ─────────── REDUCED MOTION (WCAG 2.3.3 / respect user preference) ─────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .hero-figure:hover .hero-image img, .shop-tile:hover img, .sig:hover .sig-vis img{ transform:none !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* ─────────── HERO TRUST MICROLINE ─────────── */
.hero-trust{margin-top:30px; display:flex; gap:8px 16px; justify-content:center; flex-wrap:wrap; font-size:13px; letter-spacing:.04em; color:rgba(250,245,233,.94); text-shadow:0 1px 12px rgba(15,22,18,.55);}
.hero-trust .sep{color:var(--gold-light); opacity:.9;}

/* ─────────── TRUST RIBBON (below hero) ─────────── */
.trust-ribbon{background:var(--emerald); color:var(--cream);}
.trust-ribbon .wrap{display:flex; flex-wrap:wrap; gap:14px 40px; align-items:center; justify-content:center; padding-top:20px; padding-bottom:20px; text-align:center;}
.trust-ribbon .ti{display:inline-flex; align-items:center; gap:11px; font-size:13.5px; letter-spacing:.05em; color:var(--cream);}
.trust-ribbon .ti svg{width:20px; height:20px; color:var(--pistachio-soft); flex:0 0 auto;}

/* ─────────── BEST SELLERS price + also-loved ─────────── */
.sig .sig-price{margin-top:10px; font-size:13px; letter-spacing:.04em; color:var(--gold-deep); font-weight:600;}
.also-loved{margin-top:54px; border-top:1px solid var(--hair); padding-top:34px; display:flex; flex-wrap:wrap; gap:14px 30px; align-items:baseline; justify-content:center; text-align:center;}
.also-loved .al-label{font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-mute); font-weight:600; width:100%;}
.also-loved .al-item{font-family:var(--display); font-size:24px; color:var(--ink);}
.also-loved .al-item b{font-style:italic; font-weight:500;}
.also-loved .al-item .pr{font-family:var(--sans); font-size:13px; font-weight:600; color:var(--gold-deep); margin-left:8px; letter-spacing:.02em;}
.sellers-cta{margin-top:46px; display:flex; gap:16px; flex-wrap:wrap; justify-content:center; align-items:center;}

/* ─────────── SOCIAL PROOF BAND ─────────── */
.proof{padding:96px 0; text-align:center;}
.proof .eyebrow{display:block; margin-bottom:20px;}
.proof h2{font-size:clamp(34px,4.6vw,60px); max-width:760px; margin:0 auto;}
.proof .proof-sub{margin:24px auto 0; max-width:560px; font-size:17px; line-height:1.7; color:var(--ink-soft);}
.proof-cta{margin-top:38px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
.proof-note{margin-top:22px; font-size:12.5px; letter-spacing:.04em; color:var(--ink-mute);}

/* ─────────── FAQ ─────────── */
.faq{padding:0 0 120px;}
.faq .faq-list{max-width:840px; margin:48px auto 0;}
.faq details{border-top:1px solid var(--hair); padding:6px 0;}
.faq details:last-child{border-bottom:1px solid var(--hair);}
.faq summary{list-style:none; cursor:pointer; padding:24px 44px 24px 4px; position:relative; font-family:var(--display); font-size:23px; line-height:1.25; color:var(--ink); min-height:24px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-family:var(--sans); font-weight:400; font-size:24px; color:var(--gold-deep); transition:transform .3s var(--ease);}
.faq details[open] summary::after{content:"–";}
.faq .ans{padding:0 44px 26px 4px; font-size:16px; line-height:1.75; color:var(--ink-soft); max-width:680px;}
.faq .ans a{color:var(--emerald); text-decoration:underline; text-underline-offset:3px;}

/* ─────────── STICKY MOBILE ACTION BAR (built by script.js) ─────────── */
.mobi-bar{position:fixed; left:0; right:0; bottom:0; z-index:1500; display:none; grid-template-columns:1fr 1fr 1fr; background:var(--cream); border-top:1px solid var(--hair); box-shadow:0 -6px 22px -14px rgba(15,22,18,.4);}
.mobi-bar a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:62px; color:var(--ink); font-size:11px; letter-spacing:.07em; text-transform:uppercase; font-weight:600; text-decoration:none; border-left:1px solid var(--hair);}
.mobi-bar a:first-child{border-left:0;}
.mobi-bar a.primary{background:var(--emerald); color:var(--cream);}
.mobi-bar a:active{background:var(--beige);}
.mobi-bar a.primary:active{background:var(--emerald-deep);}
.mobi-bar svg{width:21px; height:21px; stroke-width:1.6;}
@media (max-width:760px){
  .mobi-bar{display:grid;}
  body.menu-open .mobi-bar{display:none;}
  footer{padding-bottom:90px;}
  .pca-fab{bottom:78px !important;}
}

/* ─────────── small-screen tweaks for new sections ─────────── */
@media (max-width:560px){
  .hero-trust{font-size:12px; gap:6px 12px;}
  .also-loved .al-item{font-size:21px;}
  .faq summary{font-size:20px;}
}