/* ============================================================
   MiaMatcha Café — Design System
   Elegant botanical: deep matcha-olive + cream, gold & blush.
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* brand greens */
  --matcha-900:#2c351b;
  --matcha-800:#3a471f;
  --matcha-700:#4a5a2e;   /* primary */
  --matcha-600:#5c6d38;
  --olive-500:#6e7a43;    /* menu swatch green */
  --sage-300:#a7b083;
  --sage-100:#dbe1c9;

  /* neutrals / paper */
  --cream:#f5f0e3;        /* page background */
  --cream-50:#fbf7ec;     /* raised cards */
  --paper:#fffdf7;
  --line:#e4dcc7;
  --line-soft:#efe8d6;

  /* accents */
  --gold:#c6a15b;
  --gold-dark:#a9863f;
  --copper:#9a6a3a;       /* "coffee" accent from menu */
  --blush:#e2a9a1;        /* floral pink (peony mural) */
  --blush-soft:#f4ddd7;

  /* text */
  --ink:#25291a;
  --ink-soft:#585c46;
  --ink-faint:#8a8d76;
  --on-dark:#f3efe1;
  --on-dark-soft:#c9cbb2;

  /* type */
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* shape & depth */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:26px;
  --r-pill:999px;
  --shadow-sm:0 2px 10px rgba(44,53,27,.06);
  --shadow-md:0 12px 30px -12px rgba(44,53,27,.22);
  --shadow-lg:0 30px 60px -24px rgba(44,53,27,.35);

  /* layout */
  --maxw:1200px;
  --gutter:clamp(20px,5vw,64px);
  --header-h:74px;

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

/* ---------- Reset-ish ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  font-size:clamp(15px,.5vw + 14px,17px);
  letter-spacing:.005em;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
ul{margin:0;padding:0;list-style:none}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.08;margin:0;color:var(--matcha-900);letter-spacing:.005em}
h1{font-size:clamp(2.6rem,6.5vw,5rem);font-weight:500}
h2{font-size:clamp(2rem,4.4vw,3.3rem);font-weight:500}
h3{font-size:clamp(1.35rem,2.4vw,1.9rem)}
p{margin:0 0 1em}
.lede{font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--ink-soft);line-height:1.7}

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--copper);
  display:inline-flex;align-items:center;gap:.7em;
  margin:0 0 1rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:"";width:26px;height:1px;background:currentColor;opacity:.6}

.script{font-style:italic;font-family:var(--serif);color:var(--olive-500)}

/* ---------- Layout helpers ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,9vw,120px)}
.section--tight{padding-block:clamp(44px,6vw,80px)}
.center{text-align:center}
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}
.section-head{max-width:640px}
.section-head.center{margin-inline:auto}

/* skip link + a11y */
.skip{position:absolute;left:-999px;top:0;background:var(--matcha-800);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 var(--r-sm) 0;z-index:200}
.skip:focus{left:0}
:focus-visible{outline:2.5px solid var(--gold-dark);outline-offset:3px;border-radius:4px}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  --bg:var(--matcha-700);--fg:#fff;--bd:var(--matcha-700);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--sans);font-weight:500;font-size:.92rem;letter-spacing:.04em;
  padding:.85em 1.6em;border-radius:var(--r-pill);
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}
.btn--ghost{--bg:transparent;--fg:var(--matcha-800);--bd:var(--matcha-700)}
.btn--ghost:hover{--bg:var(--matcha-700);--fg:#fff}
.btn--gold{--bg:var(--gold);--fg:#3a2e12;--bd:var(--gold)}
.btn--gold:hover{--bg:var(--gold-dark)}
.btn--on-dark{--bg:transparent;--fg:var(--on-dark);--bd:rgba(243,239,225,.5)}
.btn--on-dark:hover{--bg:var(--cream);--fg:var(--matcha-800);--bd:var(--cream)}
.btn--sm{padding:.6em 1.1em;font-size:.82rem}
.btn .ico{width:1.05em;height:1.05em}
.btn[disabled],.btn.is-soon{opacity:.9}
.btn.is-soon{position:relative}

/* ============================================================
   Header
   ============================================================ */
.announce{
  background:var(--matcha-900);color:var(--on-dark);
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:400;
  text-align:center;padding:.5rem 1rem;
}
.announce b{color:var(--gold);font-weight:600}

/* The #site-header wrapper is what pins. The inner .site-header could never
   stick on its own: its containing block was the wrapper, which is exactly as
   tall as the header, so there was no distance to travel and it scrolled away.
   main.js puts the announce bar before this wrapper, so it scrolls off on its
   own and only the nav row stays pinned. */
#site-header{position:sticky;top:0;z-index:100}
.site-header{
  z-index:100;
  background:color-mix(in srgb,var(--cream) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.3) blur(12px);
  backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s,box-shadow .3s,background .3s;
}
.site-header.scrolled{border-bottom-color:var(--line);box-shadow:var(--shadow-sm);background:color-mix(in srgb,var(--cream) 94%,transparent)}
/* Backstop: iOS Safari pans the page into any unclipped horizontal overflow
   (body-level overflow-x:hidden does not stop it). Clipping on the sticky
   header itself contains its own row; clip creates no scroll container, so
   stickiness is unaffected. hidden first as fallback for pre-clip browsers. */
.site-header{overflow-x:hidden;overflow-x:clip}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:var(--header-h)}

/* brand lockup (real MiaMatcha wordmark artwork) */
.brand{display:inline-flex;align-items:center;color:var(--matcha-800)}
.brand__logo{height:38px;width:auto;display:block}
.footer-col--brand .brand__logo{height:46px}
.drawer__head .brand__logo{height:34px}

.nav__links{display:flex;align-items:center;gap:.35rem}
.nav__links a{
  font-size:.9rem;font-weight:500;letter-spacing:.03em;color:var(--ink-soft);
  padding:.5rem .9rem;border-radius:var(--r-pill);position:relative;transition:color .2s,background .2s;
}
.nav__links a:hover{color:var(--matcha-800)}
.nav__links a[aria-current="page"]{color:var(--matcha-800)}
.nav__links a[aria-current="page"]::after{
  content:"";position:absolute;left:50%;bottom:.28rem;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--gold);
}
.nav__actions{display:flex;align-items:center;gap:.6rem}
.icon-btn{
  width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  border:1.5px solid var(--line);background:var(--cream-50);color:var(--matcha-800);
  transition:transform .2s,background .2s,color .2s,border-color .2s;
}
.icon-btn:hover{background:var(--matcha-700);color:#fff;border-color:var(--matcha-700);transform:translateY(-2px)}
.icon-btn svg{width:19px;height:19px}

.nav__toggle{display:none;width:44px;height:44px;border:1.5px solid var(--line);border-radius:12px;background:var(--cream-50);color:var(--matcha-800);place-items:center}
.nav__toggle svg{width:22px;height:22px}

/* mobile drawer */
/* overflow:hidden clips the closed panel, which is parked off-screen right.
   body{overflow-x:hidden} can't clip it because .drawer is position:fixed. */
.drawer{position:fixed;inset:0;z-index:150;visibility:hidden;pointer-events:none;overflow:hidden}
.drawer__scrim{position:absolute;inset:0;background:rgba(37,41,26,.5);opacity:0;transition:opacity .35s}
.drawer__panel{
  position:absolute;top:0;right:0;height:100%;width:min(86vw,360px);
  background:var(--cream);box-shadow:var(--shadow-lg);
  transform:translateX(100%);transition:transform .4s var(--ease);
  display:flex;flex-direction:column;padding:1.4rem;
}
.drawer.open{visibility:visible;pointer-events:auto}
.drawer.open .drawer__scrim{opacity:1}
.drawer.open .drawer__panel{transform:none}
.drawer__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.drawer__links{display:flex;flex-direction:column;gap:.2rem;margin-top:.5rem}
.drawer__links a{font-family:var(--serif);font-size:1.5rem;font-weight:500;color:var(--matcha-800);padding:.5rem 0;border-bottom:1px solid var(--line-soft)}
.drawer__links a[aria-current="page"]{color:var(--olive-500)}
.drawer__foot{margin-top:auto;display:flex;flex-direction:column;gap:.8rem}
/* These buttons are full-width, and the icons main.js injects are raw <svg>
   with no class, so .btn .ico never matched them and they stretched to fill. */
.drawer__foot .btn svg{width:1.05em;height:1.05em;flex:none}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative;overflow:hidden}
.hero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4rem);align-items:center;
  padding-block:clamp(48px,7vw,96px)}
.hero__copy{max-width:560px}
.hero h1{margin-bottom:1.1rem}
.hero h1 .accent{color:var(--olive-500);font-style:italic;font-weight:500}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.hero__meta{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:2.2rem;color:var(--ink-soft);font-size:.85rem}
.hero__meta span{display:inline-flex;align-items:center;gap:.5rem}
.hero__meta svg{width:16px;height:16px;color:var(--olive-500)}

.hero__art{position:relative;aspect-ratio:4/5;max-width:460px;width:100%;justify-self:end}
.hero__frame{position:absolute;inset:0;z-index:2;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.hero__frame::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.45);border-radius:calc(var(--r-lg) - 8px);pointer-events:none}
.hero__frame img{width:100%;height:100%;object-fit:cover}
.hero__accent{position:absolute;z-index:1;width:62%;height:62%;right:-7%;bottom:-6%;border-radius:44% 56% 52% 48%/54% 46% 54% 46%;
  background:radial-gradient(120% 120% at 30% 20%,var(--blush-soft),var(--sage-300) 92%);box-shadow:var(--shadow-md)}
.hero__accent--tl{left:-8%;top:-6%;right:auto;bottom:auto;width:40%;height:40%;
  background:radial-gradient(120% 120% at 30% 20%,var(--sage-100),var(--olive-500) 96%)}
.hero__badge{
  position:absolute;z-index:3;background:var(--paper);border-radius:var(--r-md);
  box-shadow:var(--shadow-md);padding:.7rem .95rem;display:flex;align-items:center;gap:.65rem;
  font-size:.8rem;font-weight:500;color:var(--matcha-800);
}
.hero__badge small{display:block;color:var(--ink-faint);font-size:.7rem;font-weight:400;letter-spacing:.04em}
.hero__badge--tl{top:8%;left:-2%}
.hero__badge--br{bottom:10%;right:-3%}
.hero__badge .dot{width:34px;height:34px;border-radius:50%;background:var(--blush-soft);display:grid;place-items:center;color:var(--copper)}
.hero__badge .dot svg{width:18px;height:18px}

/* floating confetti dots */
.confetti{position:absolute;border-radius:50%;background:var(--gold);opacity:.7;z-index:1}

/* ============================================================
   Marquee
   ============================================================ */
.marquee{background:var(--matcha-800);color:var(--on-dark);overflow:hidden;border-block:1px solid var(--matcha-900)}
.marquee__track{display:flex;gap:0;white-space:nowrap;animation:marquee 26s linear infinite}
.marquee__track span{display:inline-flex;align-items:center;font-family:var(--serif);font-style:italic;
  font-size:1.5rem;padding:.7rem 1.6rem;color:var(--on-dark)}
.marquee__track span::after{content:"✿";margin-left:1.9rem;color:var(--gold);font-style:normal;font-size:.9rem}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee:hover .marquee__track{animation-play-state:paused}

/* ============================================================
   Cards / Featured
   ============================================================ */
.grid{display:grid;gap:clamp(1rem,2vw,1.6rem)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--cream-50);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:1.4rem;text-align:center;position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--sage-300)}
.card__media{aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;margin-bottom:1rem;background:var(--paper);position:relative}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card__tag{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--copper);font-weight:600}
.card h3{font-size:1.3rem;margin:.25rem 0 .2rem}
.card__desc{font-size:.86rem;color:var(--ink-soft);min-height:2.4em}
.card__price{font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--olive-500);margin-top:.5rem}

/* category pills */
.cats{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.cat-pill{
  display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;border-radius:var(--r-pill);
  background:var(--cream-50);border:1px solid var(--line);color:var(--matcha-800);font-weight:500;font-size:.9rem;
  transition:transform .2s,background .2s,color .2s,border-color .2s;
}
.cat-pill:hover{transform:translateY(-2px);background:var(--matcha-700);color:#fff;border-color:var(--matcha-700)}
.cat-pill svg{width:17px;height:17px}
.cat-pill:hover svg{color:#fff}

/* ============================================================
   Split feature (story)
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split--rev .split__media{order:2}
.split__media{position:relative}
.split__media img{border-radius:var(--r-lg);box-shadow:var(--shadow-md);width:100%;aspect-ratio:4/5;object-fit:cover}
.split__media .frame{position:absolute;inset:14px;border:1px solid rgba(255,255,255,.5);border-radius:calc(var(--r-lg) - 8px);pointer-events:none}
.split__badge{position:absolute;bottom:-22px;right:-18px;background:var(--matcha-800);color:var(--on-dark);
  padding:1.1rem 1.3rem;border-radius:var(--r-md);box-shadow:var(--shadow-lg);text-align:center;max-width:180px}
.split__badge b{font-family:var(--serif);font-size:1.7rem;display:block;color:#fff}
.split__badge small{font-size:.72rem;letter-spacing:.1em;color:var(--on-dark-soft)}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.8rem}
.pillar{display:flex;gap:.8rem}
.pillar__ico{width:44px;height:44px;flex:none;border-radius:50%;background:var(--sage-100);display:grid;place-items:center;color:var(--matcha-700)}
.pillar__ico svg{width:22px;height:22px}
.pillar h4{font-family:var(--sans);font-weight:600;font-size:.95rem;color:var(--matcha-800);margin-bottom:.15rem}
.pillar p{font-size:.83rem;color:var(--ink-soft);margin:0}

/* ============================================================
   Banners / callouts
   ============================================================ */
.banner{position:relative;border-radius:var(--r-lg);overflow:hidden;color:var(--on-dark);
  background:linear-gradient(120deg,var(--matcha-800),var(--matcha-700))}
.banner__bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.22;mix-blend-mode:luminosity}
.banner__inner{position:relative;padding:clamp(2.4rem,5vw,4.5rem);text-align:center;max-width:720px;margin-inline:auto}
.banner h2{color:#fff}
.banner p{color:var(--on-dark-soft)}
.banner .btn-row{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}

/* ============================================================
   Gallery
   ============================================================ */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
.gallery a{border-radius:var(--r-md);overflow:hidden;position:relative;aspect-ratio:1/1;background:var(--sage-100)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gallery a:hover img{transform:scale(1.07)}

/* ============================================================
   Menu page
   ============================================================ */
.menu-nav{position:sticky;top:var(--header-h);z-index:40;background:color-mix(in srgb,var(--cream) 92%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.menu-nav__track{display:flex;gap:.4rem;overflow-x:auto;padding:.7rem var(--gutter);scrollbar-width:none}
.menu-nav__track::-webkit-scrollbar{display:none}
/* Scroll affordance: fades the right edge so cut-off chips read as "more this
   way" instead of broken. JS adds .can-scroll only while there is more to
   reach, so it never shows on wide screens where every chip already fits. */
.menu-nav{position:sticky}
.menu-nav::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:3.2rem;
  background:linear-gradient(to right,rgba(243,239,225,0),var(--cream));
  opacity:0;transition:opacity .25s var(--ease);pointer-events:none;
}
.menu-nav.can-scroll::after{opacity:1}
.menu-nav a{white-space:nowrap;font-size:.85rem;font-weight:500;color:var(--ink-soft);padding:.45rem .9rem;border-radius:var(--r-pill);transition:background .2s,color .2s}
.menu-nav a:hover,.menu-nav a.active{background:var(--matcha-700);color:#fff}

.menu-section{scroll-margin-top:calc(var(--header-h) + 60px)}
.menu-section__head{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem}
.menu-section__head .ico{width:52px;height:52px;flex:none;border-radius:50%;background:var(--matcha-700);color:var(--cream);display:grid;place-items:center}
.menu-section__head .ico svg{width:26px;height:26px}
.menu-section__head h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.menu-section__head .rule{flex:1;height:1px;background:var(--line)}

.menu-list{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 3rem}
@media(max-width:720px){.menu-list{grid-template-columns:1fr}}
.mitem{display:flex;align-items:center;gap:.9rem;padding:.85rem 0;border-bottom:1px dashed var(--line)}
.mitem__thumb{width:56px;height:56px;flex:none;border-radius:12px;background:var(--paper);border:1px solid var(--line-soft);object-fit:cover}
.mitem__body{flex:1;min-width:0}
.mitem__name{font-weight:500;color:var(--matcha-900);font-size:1.02rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
/* Footnote markers. Pinned to the body font and text presentation: iOS was
   falling back to Apple Color Emoji and painting them as green emoji tiles. */
.star{font-family:var(--sans);font-variant-emoji:text;font-weight:500}
.mitem__name .star{color:var(--gold-dark);font-size:1.05rem;line-height:1;vertical-align:-.04em}
.mitem__desc{font-size:.8rem;color:var(--ink-faint);font-style:italic}
.mitem__price{font-family:var(--serif);font-weight:600;font-size:1.2rem;color:var(--olive-500);white-space:nowrap}

.menu-note{background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-md);padding:1.2rem 1.4rem;font-size:.85rem;color:var(--ink-soft)}
.menu-note b{color:var(--matcha-800)}
.menu-note ul{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:.6rem}
.menu-note li{display:flex;align-items:center;gap:.4rem}
.menu-note li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* ============================================================
   Visit / contact
   ============================================================ */
.info-card{background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.4rem)}
.info-row{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line-soft)}
.info-row:last-child{border-bottom:0}
.info-row .ico{width:44px;height:44px;flex:none;border-radius:12px;background:var(--sage-100);display:grid;place-items:center;color:var(--matcha-700)}
.info-row .ico svg{width:21px;height:21px}
.info-row h4{font-family:var(--sans);font-weight:600;font-size:.95rem;color:var(--matcha-800);margin-bottom:.15rem}
.info-row p{margin:0;color:var(--ink-soft);font-size:.9rem}

.hours{width:100%;border-collapse:collapse}
.hours td{padding:.5rem 0;border-bottom:1px solid var(--line-soft);font-size:.9rem}
.hours td:last-child{text-align:right;color:var(--ink-soft)}
.hours tr:last-child td{border-bottom:0}

.map-card{border-radius:var(--r-lg);overflow:hidden;position:relative;min-height:340px;box-shadow:var(--shadow-md);
  background:linear-gradient(135deg,var(--sage-100),var(--olive-500));display:grid;place-items:center;text-align:center;color:#fff}
.map-card__grid{position:absolute;inset:0;opacity:.25;
  background-image:linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.4) 1px,transparent 1px);
  background-size:38px 38px}
.map-card__pin{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.map-card__pin .ping{width:58px;height:58px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);background:var(--matcha-800);
  display:grid;place-items:center;box-shadow:var(--shadow-lg)}
.map-card__pin .ping svg{transform:rotate(45deg);width:26px;height:26px;color:var(--gold)}

.contact-form{display:grid;gap:1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-size:.8rem;font-weight:600;letter-spacing:.03em;color:var(--matcha-800)}
.field input,.field textarea{
  font-family:var(--sans);font-size:.95rem;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:.75rem .9rem;transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--olive-500);box-shadow:0 0 0 3px rgba(110,122,67,.16)}
.field textarea{resize:vertical;min-height:120px}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:var(--matcha-900);color:var(--on-dark-soft);padding-top:clamp(48px,6vw,80px)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2.4rem}
.site-footer .brand{color:var(--on-dark)}
.footer-tag{margin-top:1rem;max-width:34ch;color:var(--on-dark-soft);font-size:.9rem}
.footer-col h5{font-family:var(--sans);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;color:var(--sage-300);margin:0 0 1rem}
.footer-col a,.footer-col li{color:var(--on-dark-soft);font-size:.9rem;padding:.28rem 0;display:block;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-social{display:flex;gap:.6rem;margin-top:1rem}
.footer-social a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(243,239,225,.22);display:grid;place-items:center;color:var(--on-dark);transition:background .2s,color .2s,transform .2s}
.footer-social a:hover{background:var(--gold);color:var(--matcha-900);transform:translateY(-2px)}
.footer-social svg{width:18px;height:18px}
.footer-bottom{border-top:1px solid rgba(243,239,225,.14);margin-top:clamp(36px,5vw,56px);padding:1.5rem 0;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;align-items:center;font-size:.78rem}
.footer-bottom .slogan{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--sage-300)}

/* ============================================================
   Modal (order coming soon)
   ============================================================ */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.2rem;visibility:hidden;pointer-events:none}
.modal__scrim{position:absolute;inset:0;background:rgba(37,41,26,.55);opacity:0;transition:opacity .3s;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.modal__box{position:relative;background:var(--cream);border-radius:var(--r-lg);max-width:400px;width:100%;padding:2.2rem 2rem;text-align:center;box-shadow:var(--shadow-lg);transform:scale(.94) translateY(10px);opacity:0;transition:transform .35s var(--ease),opacity .35s}
.modal.open{visibility:visible;pointer-events:auto}
.modal.open .modal__scrim{opacity:1}
.modal.open .modal__box{transform:none;opacity:1}
.modal__icon{width:64px;height:64px;margin:0 auto 1rem;border-radius:50%;background:var(--sage-100);display:grid;place-items:center;color:var(--matcha-700)}
.modal__icon svg{width:30px;height:30px}
.modal__close{position:absolute;top:.8rem;right:.8rem;width:36px;height:36px;border-radius:50%;border:none;background:transparent;color:var(--ink-soft);display:grid;place-items:center}
.modal__close:hover{background:var(--line-soft)}

/* ============================================================
   Reveal animation
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:960px){
  .hero__inner{grid-template-columns:1fr;text-align:center}
  .hero__copy{margin-inline:auto}
  .eyebrow{justify-content:center}
  .hero__meta{justify-content:center}
  .hero__cta{justify-content:center}
  .hero__art{max-width:420px;margin-inline:auto;order:-1}
  .split{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .split__badge{right:14px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-col--brand{grid-column:1/-1}
}
@media(max-width:860px){
  .nav__links{display:none}
  .nav__actions .btn:not(.nav__cta){display:none}
  .nav__toggle{display:grid}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .grid--4{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero__badge{display:none}
  .footer-bottom{justify-content:center;text-align:center}
}
/* Phone-width header fit: at 393px the row needs ~441px at desktop sizes
   (brand 194 + gap 24 + actions 183 + gutters 40), so it overflowed and iOS
   exposed the spill as a pannable strip. Fluid brand type + tighter gaps make
   it genuinely fit down to 360px. Screens >520px are untouched. */
@media(max-width:520px){
  .nav{gap:.75rem}
  .nav__actions{gap:.45rem}
  .brand__logo{height:clamp(24px,7.4vw,32px)}
  .icon-btn{width:38px;height:38px}
  .nav__toggle{width:40px;height:40px}
  .nav__cta{padding:.55em .9em}
}
@media(max-width:370px){
  .nav{gap:.5rem}
  .nav__actions{gap:.35rem}
  .icon-btn{width:36px;height:36px}
  .nav__toggle{width:36px;height:36px}
  .nav__cta{padding:.5em .75em}
}
@media(max-width:340px){
  .nav__actions .icon-btn{display:none} /* Instagram stays reachable in the drawer */
}

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