/* ============================================================
   THE VINTAGE HOME — homepage
   Design reference: armanello.framer.website (structure, spacing,
   hierarchy, section flow). Brand: The Vintage Home.

   BRAND FONTS ------------------------------------------------
   Headings   = Bloom Skirt   (drop BloomSkirt.woff2 into ./fonts/)
   Body/items = Sigher        (drop Sigher.woff2 into ./fonts/)
   Salt Kitchen wordmark = Lobster (loaded from Google Fonts)
   Until the two licensed files are added, headings fall back to
   Cormorant Garamond and body to Jost — both chosen to hold the
   same proportions so nothing reflows when you swap them in.

   IMAGES -----------------------------------------------------
   Every <img> is a placeholder. Replace the src with your own
   photography; aspect ratios are locked in CSS so nothing shifts.
   ============================================================ */

/* Warmstreak — chalkboard sans by Letterhanna Studio (commercial licence).
   It still heads the --body and --menu stacks, which costs nothing while no
   such family exists: the browser falls straight through to Quicksand. Drop
   Warmstreak.woff2 into ./fonts/ and uncomment this block to switch it on.
@font-face{
  font-family:'Warmstreak';font-display:swap;
  src:url('../fonts/Warmstreak.woff2') format('woff2');
}
*/
/* ============================================================
   FONTS — all self-hosted from ./fonts, so a page paints in its own
   type with no third-party request and nothing to swap in later.
   Quicksand, Lobster and Montserrat are SIL Open Font License 1.1.
   ============================================================ */
@font-face{
  font-family:'Quicksand';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/Quicksand-400.woff2') format('woff2');
}
@font-face{
  font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/Quicksand-700.woff2') format('woff2');
}
@font-face{
  font-family:'Lobster';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/Lobster-400.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/Montserrat-700.woff2') format('woff2');
}
@font-face{
  /* Bloom Skirt — the brand display face. Every heading on the site is
     set in it; Quicksand stands in only if the file fails to load. */
  font-family:'Bloom Skirt';
  src:url('../fonts/BloomSkirt.woff2') format('woff2');
  font-display:swap;
}

:root{
  /* palette ------------------------------------------------- */
  --ink:#1D2024;
  --ink-2:#25282D;
  --slate:#5D6169;          /* brand logo background */
  --slate-2:#4B4F57;
  --paper:#F4F2F1;
  --paper-2:#E9E5E3;
  --white:#FFFFFF;
  --pink:#FFC0CB;           /* brand pink */
  --pink-ink:#96566B;       /* pink, darkened for text on light */
  --mute-d:rgba(255,255,255,.62);
  --mute-l:rgba(29,32,36,.62);
  --line-d:rgba(255,255,255,.14);
  --line-l:rgba(29,32,36,.13);

  /* type ---------------------------------------------------- */
  /* headings: a chalkboard sans, so every title on the site reads like it
     was written up on the board. Warmstreak (the licensed brand face) still
     wins the moment its file is dropped into ./fonts/. */
  --display:'Bloom Skirt','Quicksand','Century Gothic',sans-serif;
  --body:'Warmstreak','Quicksand','Century Gothic',sans-serif;
  /* the chalkboard menu keeps the face it already had — item names, prices
     and every other figure on the boards stay in it */
  --menu:'Warmstreak','Quicksand','Century Gothic',sans-serif;
  --script:'Lobster',cursive;
  /* every telephone number on the site */
  --num:'Montserrat','Quicksand','Century Gothic',sans-serif;

  --h1:clamp(2.8rem,6.9vw,5.8rem);
  --h2:clamp(1.95rem,3.8vw,3.3rem);
  --h3:clamp(1.45rem,2.35vw,2rem);
  --h4:clamp(1.05rem,1.35vw,1.28rem);
  --lead:clamp(.98rem,1.06vw,1.08rem);

  /* space --------------------------------------------------- */
  --sec:clamp(80px,9.5vw,148px);
  --gut:clamp(20px,4.4vw,60px);
  --max:1320px;
  --r:2px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

/* A link to a section has to land below the sticky header — and below the
   sub-nav too, on the pages that have one. */
:root{--hdr-h:104px;--sub-h:64px}
section[id],article[id],details[id]{scroll-margin-top:calc(var(--hdr-h) + 18px)}
.subnav ~ section[id],
.subnav ~ section [id]{scroll-margin-top:calc(var(--hdr-h) + var(--sub-h) + 14px)}
@media (max-width:1180px){:root{--hdr-h:72px}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-weight:400;font-size:16.5px;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:400;letter-spacing:.005em;line-height:1.14}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

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

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec)}
.dark{background:var(--ink);color:var(--white)}
.slate{background:var(--slate);color:var(--white)}

/* eyebrow ------------------------------------------------- */
.eyebrow{
  font-family:var(--body);font-size:.68rem;font-weight:400;
  letter-spacing:.34em;text-transform:uppercase;color:var(--pink-ink);
  display:flex;align-items:center;gap:.85em;margin-bottom:1.4rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.55;flex:none}
.dark .eyebrow,.slate .eyebrow{color:var(--pink)}
.eyebrow.center{justify-content:center}

.lead{font-size:var(--lead);color:var(--mute-l);max-width:52ch}
.dark .lead,.slate .lead{color:var(--mute-d)}

/* buttons -------------------------------------------------- */
.btn{
  --bg:var(--ink);--fg:var(--white);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.7em;min-height:52px;padding:0 2.05rem;border:1px solid var(--bg);
  border-radius:100px;background:var(--bg);color:var(--fg);cursor:pointer;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400;
  transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s ease;
}
.btn:hover{background:var(--pink);border-color:var(--pink);color:var(--ink);transform:translateY(-2px)}
.btn--ghost{--bg:transparent;--fg:var(--ink);border-color:var(--line-l)}
.dark .btn--ghost,.slate .btn--ghost{--fg:var(--white);border-color:var(--line-d)}
.btn--light{--bg:var(--white);--fg:var(--ink)}
.btn--pink{--bg:var(--pink);--fg:var(--ink)}
.btn--pink:hover{background:var(--white);border-color:var(--white)}
.btn--sm{min-height:44px;padding:0 1.4rem;font-size:.66rem}

.link-u{
  display:inline-flex;align-items:center;gap:.6em;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;padding-bottom:.35rem;
  border-bottom:1px solid currentColor;transition:gap .35s ease,opacity .3s ease;
}
.link-u:hover{gap:1.1em;opacity:.65}

/* ============================ TOP BAR ==================== */
.topbar{
  background:var(--ink);color:var(--mute-d);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:44px}
.topbar a:hover{color:var(--pink)}
.topbar .mid{color:var(--pink);letter-spacing:.14em;font-family:var(--num);font-weight:700}
@media (max-width:860px){.topbar .side{display:none}.topbar .wrap{justify-content:center}}

/* ============================ HEADER ===================== */
.hdr{position:sticky;top:0;z-index:60;background:transparent;transition:background .5s ease,box-shadow .5s ease}
.hdr::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(29,32,36,.55),transparent);pointer-events:none;transition:opacity .5s}
.hdr.stuck{background:var(--ink);box-shadow:0 1px 0 var(--line-d)}
.hdr.stuck::after{opacity:0}
/* three-track grid: the two link columns are exactly equal, so the brand
   in the middle track always lands on the true centre of the bar and can
   never sit under the WhatsApp button. */
.nav{position:relative;z-index:2;display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(16px,3vw,48px);min-height:104px}
.nav ul{display:flex;align-items:center;flex-wrap:nowrap;min-width:0;
  gap:clamp(.9rem,2vw,2.2rem)}
.nav .left{justify-content:flex-start}
.nav .right{justify-content:flex-end}
.nav a{
  white-space:nowrap;color:var(--white);font-size:.71rem;letter-spacing:.2em;text-transform:uppercase;
  position:relative;padding-block:.4rem;
}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--pink);transition:width .4s ease}
.nav a:hover::after{width:100%}
.nav .brand{position:static;grid-column:2;justify-self:center;display:block;
  line-height:0;padding:0;
  width:clamp(62px,7vw,84px);flex:none}
.nav .brand::after{display:none}          /* not a nav link — no underline */
.brand img{width:100%;filter:drop-shadow(0 6px 18px rgba(0,0,0,.28))}
.nav-cta{display:inline-flex}
.nav .nav-cta a{color:var(--ink)}
.nav .nav-cta a::after{display:none}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line-d);border-radius:100px;background:transparent;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer}
.burger i{display:block;width:16px;height:1px;background:var(--white)}
@media (max-width:1180px){
  .nav ul,.nav-cta{display:none}
  /* On a phone the mark starts large and centred, then shrinks and slides
     into the top-left corner as soon as the page is scrolled. Animating
     `left` rather than swapping grid tracks is what makes it glide. */
  .nav{min-height:124px;grid-template-columns:1fr;position:relative;
       transition:min-height .5s cubic-bezier(.65,0,.35,1)}
  .hdr.stuck .nav{min-height:72px}
  .nav .brand{position:absolute;left:50%;top:50%;justify-self:auto;grid-column:1;
         width:clamp(76px,21vw,96px);transform:translate(-50%,-50%);
         transition:left .55s cubic-bezier(.65,0,.35,1),
                    width .55s cubic-bezier(.65,0,.35,1),
                    transform .55s cubic-bezier(.65,0,.35,1)}
  .hdr.stuck .nav .brand{left:0;width:46px;transform:translate(0,-50%)}
  .burger{display:flex;position:absolute;right:0;top:50%;transform:translateY(-50%)}
}
@media (max-width:1180px) and (prefers-reduced-motion:reduce){
  .nav,.nav .brand{transition:none}
}
/* drawer */
/* visibility is toggled as well as the transform: on a short screen the
   panel's own content is taller than the panel, and anything overflowing a
   closed drawer would otherwise paint straight over the top bar. */
.drawer{position:fixed;inset:0;z-index:80;background:var(--ink);color:var(--white);
  transform:translateY(-100%);visibility:hidden;overflow-y:auto;overscroll-behavior:contain;
  transition:transform .55s cubic-bezier(.65,0,.35,1),visibility 0s linear .55s;
  display:flex;flex-direction:column;padding:var(--gut)}
.drawer.open{transform:translateY(0);visibility:visible;
  transition:transform .55s cubic-bezier(.65,0,.35,1),visibility 0s}
.drawer .x{align-self:flex-end;flex:none;width:44px;height:44px;border:1px solid var(--line-d);border-radius:100px;background:none;cursor:pointer}
.drawer nav{margin-top:auto;margin-bottom:auto;display:flex;flex-direction:column;gap:.7rem;padding-block:1.2rem}
.drawer nav a{font-family:var(--display);font-size:clamp(1.5rem,5.4vw,2.2rem);line-height:1.25}
.drawer .foot{flex:none;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-d);display:grid;gap:.5rem}

/* ============================ HERO ======================= */
.hero{position:relative;margin-top:-104px;min-height:min(100svh,900px);display:flex;align-items:flex-end;isolation:isolate}
@media (max-width:1180px){.hero{margin-top:-124px;min-height:min(94svh,760px)}}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 55%;transform:scale(1.06);animation:heroZoom 9s cubic-bezier(.2,.6,.3,1) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(20,22,25,.92) 0%,rgba(20,22,25,.55) 42%,rgba(20,22,25,.28) 100%)}
.hero .wrap{padding-bottom:clamp(48px,6vw,86px);padding-top:clamp(140px,18vw,220px);color:var(--white);
  max-width:1500px}
.hero h1{font-family:var(--display);font-size:clamp(2.2rem,4.4vw,3.7rem);max-width:22ch;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--pink)}
.hero .lead{margin-top:1.7rem;color:rgba(255,255,255,.74);max-width:44ch}
.hero .actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.4rem}
.hero .actions .btn--ghost{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.72);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero .actions .btn--ghost:hover{background:#fff;border-color:#fff;color:var(--ink)}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;margin-top:3.2rem;padding-top:1.5rem;
  border-top:1px solid var(--line-d);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.62)
}
.hero__meta b{font-weight:400;color:var(--pink)}

/* ============================ HOURS STRIP ================ */
.hours{border-bottom:1px solid var(--line-d)}
.hours .grid{display:grid;grid-template-columns:1.1fr 2fr 1.1fr;gap:clamp(24px,4vw,64px);padding-block:clamp(40px,5vw,64px);align-items:center}
.hours h3{font-size:var(--h3)}
.hours dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.4rem}
.hours .everyday dd{font-size:clamp(1.55rem,2.6vw,2.2rem);line-height:1.15;
  font-family:var(--num);font-weight:700;letter-spacing:.01em}
.hours .note{margin:.75rem 0 0;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-d)}
.hours dt{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--pink)}
.hours dd{margin:.5rem 0 0;font-family:var(--display);font-size:1.35rem;color:var(--white)}
.hours .call{text-align:right}
.hours .call span{display:block;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute-d);margin-bottom:.6rem}
.hours .call a{font-family:var(--display);font-size:clamp(1.4rem,2.1vw,1.9rem);color:var(--white)}
.hours .call a:hover{color:var(--pink)}
@media (max-width:980px){
  .hours .grid{grid-template-columns:1fr;text-align:left}
  .hours .call{text-align:left}
  .hours dl{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
}

/* ============================ ABOUT ====================== */
.about .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,96px);align-items:start}
.about h2{font-size:var(--h2);max-width:22ch;margin-bottom:1.6rem}
.about .btn{margin-top:2.2rem}
.stats{display:grid;gap:2.4rem}
.stat{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:baseline;
  padding-bottom:2.2rem;border-bottom:1px solid var(--line-l)}
.stat b{font-family:var(--display);font-weight:400;font-size:clamp(3rem,5.6vw,4.6rem);line-height:1;color:var(--ink)}
.stat span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-l)}
.stat p{margin-top:.5rem;font-size:.92rem;color:var(--mute-l)}
.guests{display:flex;align-items:center;gap:1rem}
.guests .faces{display:flex}
.guests .faces img{width:44px;height:44px;border-radius:100px;object-fit:cover;
  object-position:50% 16%;              /* these are full-length photographs — frame the face */
  border:2px solid var(--paper);margin-left:-12px}
.guests .faces img:first-child{margin-left:0}
.guests small{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-l)}
@media (max-width:900px){.about .grid{grid-template-columns:1fr}}

/* ============================ HOUSES MARQUEE ============= */
.houses{border-block:1px solid var(--line-l);padding-block:clamp(34px,4vw,54px);overflow:hidden}
.marq{display:flex;width:max-content;animation:marq 34s linear infinite}
.marq:hover{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marq .row{display:flex;align-items:center;gap:clamp(48px,7vw,110px);padding-right:clamp(48px,7vw,110px)}
.house{display:flex;align-items:center;gap:.9rem;opacity:.55;transition:opacity .4s ease}
.house:hover{opacity:1}
.house img{width:46px;height:46px;object-fit:contain}
.house b{font-family:var(--display);font-weight:400;font-size:1.5rem;white-space:nowrap}
.house .sk{font-family:var(--script);font-size:1.45rem;letter-spacing:.01em}
.house i{font-style:normal;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute-l);display:block}

/* ============================ WIDE IMAGE ================= */
.band{position:relative;height:clamp(320px,46vw,620px);overflow:hidden}
.band img{width:100%;height:100%;object-fit:cover}
/* a taller band, for a portrait photograph that a letterbox crop would gut */
.band--tall{height:clamp(440px,56vw,820px)}
/* a caption has to survive whatever the photograph puts behind it */
.band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;pointer-events:none;
  background:linear-gradient(to top,rgba(20,22,25,.75),transparent)}
.band .cap{position:absolute;z-index:1;left:var(--gut);bottom:clamp(20px,3vw,38px);color:var(--white);
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.5)}

/* ============================ STORY ====================== */
.story .grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(36px,6vw,90px);align-items:center}
.story figure{margin:0;position:relative}
.story figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.story figure .tag{
  position:absolute;right:-18px;bottom:24px;background:var(--pink);color:var(--ink);
  padding:1.1rem 1.4rem;text-align:center;max-width:190px}
.story figure .tag b{display:block;font-family:var(--display);font-size:2.2rem;line-height:1}
.story figure .tag span{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase}
.story h2{font-size:var(--h2);max-width:23ch;margin-bottom:1.6rem}
.story p+p{margin-top:1.15rem}
.story .btn{margin-top:2.3rem}
@media (max-width:900px){.story .grid{grid-template-columns:1fr}.story figure .tag{right:12px}}

/* ============================ PHILOSOPHY + CARDS ========= */
.philo .head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:end;margin-bottom:clamp(40px,5vw,70px)}
.philo h2{font-size:var(--h2);max-width:24ch}
.philo .head p+p{margin-top:1rem}
@media (max-width:900px){.philo .head{grid-template-columns:1fr}}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(268px,1fr);gap:clamp(14px,1.6vw,22px);
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;scrollbar-width:thin}
.card{position:relative;scroll-snap-align:start;overflow:hidden;background:var(--ink);color:var(--white)}
.card img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .9s cubic-bezier(.2,.6,.3,1);opacity:.92}
.card:hover img{transform:scale(1.06)}
.card .in{position:absolute;inset:auto 0 0 0;padding:1.5rem 1.4rem;
  background:linear-gradient(to top,rgba(20,22,25,.94),rgba(20,22,25,0))}
.card h4{font-size:var(--h4);margin-bottom:.45rem}
.card p{font-size:.85rem;color:rgba(255,255,255,.7);line-height:1.6}
.card .px{position:absolute;top:1rem;right:1rem;background:var(--pink);color:var(--ink);
  font-size:.68rem;letter-spacing:.1em;padding:.35rem .7rem;border-radius:100px}

/* ============================ SIGNATURES MENU ============ */
.menu__head{text-align:center;max-width:62ch;margin:0 auto clamp(48px,6vw,80px)}
.menu__head h2{font-size:var(--h2);margin-bottom:1.2rem}
.menu__head .lead{margin-inline:auto}
.menu__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(24px,3.4vw,56px);align-items:start}
.mcol{grid-column:span 4}
.mfig{grid-column:span 4;position:relative}
.mfig img{width:100%;object-fit:cover}
.mfig--tall img{aspect-ratio:3/4}
.mfig--wide img{aspect-ratio:1/1}
.mfig figcaption{position:absolute;left:0;bottom:0;padding:1rem 1.2rem;font-size:.66rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--white);
  background:linear-gradient(to top,rgba(20,22,25,.85),transparent);width:100%}
.mcat{font-family:var(--script);font-size:clamp(1.6rem,2.3vw,2.05rem);color:var(--pink);
  line-height:1;margin-bottom:.35rem}
.mcat--alt{font-family:var(--script);letter-spacing:0}
.mcol .sub{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mute-d);
  margin-bottom:1.9rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line-d)}
.item{padding-block:1.15rem;border-bottom:1px solid var(--line-d)}
.item:last-child{border-bottom:0}
.item .t{display:flex;align-items:baseline;gap:.8rem}
.item .t h4{font-family:var(--body);font-weight:400;font-size:.94rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--white);line-height:1.35}
.item .dots{flex:1;border-bottom:1px dotted rgba(255,255,255,.28);transform:translateY(-4px)}
.item .p{font-family:var(--menu);font-size:1.15rem;color:var(--pink);white-space:nowrap}
.item p.d{margin-top:.4rem;font-size:.8rem;line-height:1.6;color:rgba(255,255,255,.55);max-width:38ch}
.item .flag{display:inline-block;margin-left:.55rem;font-size:.56rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);background:var(--pink);padding:.15rem .45rem;vertical-align:middle}
.menu__cta{display:flex;justify-content:center;margin-top:clamp(44px,5vw,72px)}
@media (max-width:1080px){.mcol{grid-column:span 6}.mfig{grid-column:span 6}}
@media (max-width:720px){.mcol,.mfig{grid-column:span 12}}

/* ============================ FEATURE TRIO =============== */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-l)}
.trio article{background:var(--paper);padding:clamp(30px,3.4vw,52px) clamp(24px,2.6vw,40px)}
.trio .ico{width:34px;height:44px;margin-bottom:1.6rem;color:var(--pink-ink)}
.trio h4{font-size:var(--h4);margin-bottom:.8rem}
.trio p{font-size:.9rem;color:var(--mute-l)}
@media (max-width:860px){.trio{grid-template-columns:1fr}}

/* ============================ FOUNDER ==================== */
.founder{position:relative;overflow:hidden}
.founder .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.founder .port img{width:100%;aspect-ratio:4/5;object-fit:cover}
.founder h2{font-size:var(--h2);margin-bottom:.5rem}
.founder .role{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--pink);margin-bottom:2rem}
.founder blockquote{margin:0;font-family:var(--display);font-size:clamp(1.35rem,2.3vw,1.95rem);
  line-height:1.35;color:var(--white)}
.founder .sig{margin-top:2.2rem;display:flex;align-items:center;gap:1rem;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-d)}
.founder .sig i{display:block;width:46px;height:1px;background:var(--pink)}
.founder .pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:2.6rem}
.founder .pair img{width:100%;aspect-ratio:1/1;object-fit:cover}
@media (max-width:900px){.founder .grid{grid-template-columns:1fr}}

/* ============================ TESTIMONIALS =============== */
.quotes{text-align:center}
.quotes .stage{position:relative;max-width:900px;margin-inline:auto;min-height:270px}
.quotes .q{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s ease}
.quotes .q.on{opacity:1;visibility:visible;transform:none;position:relative}
.quotes .stars{color:var(--pink);letter-spacing:.36em;font-size:.85rem;margin-bottom:1.6rem}
.quotes blockquote{margin:0;font-family:var(--display);font-size:clamp(1.35rem,2.6vw,2.15rem);line-height:1.34}
.quotes .who{margin-top:1.9rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.quotes .who span{display:block;color:var(--mute-l);margin-top:.35rem;letter-spacing:.14em}
.quotes .ctrl{display:flex;justify-content:center;gap:.8rem;margin-top:2.6rem}
.quotes .ctrl button{width:52px;height:52px;border-radius:100px;border:1px solid var(--line-l);
  background:transparent;cursor:pointer;transition:background .35s,color .35s,border-color .35s}
.quotes .ctrl button:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}

/* ============================ RESERVATION ================ */
.book{position:relative}
.book .grid{display:grid;grid-template-columns:1fr minmax(320px,560px) 1fr;gap:clamp(20px,3vw,44px);align-items:center}
.book .side img{width:100%;aspect-ratio:2/3;object-fit:cover}
.book .panel{text-align:center}
.book h2{font-size:var(--h2);margin-bottom:1rem}
.book .lead{margin-inline:auto;margin-bottom:2.4rem}
.book .fields{display:grid;gap:12px;text-align:left}
.book label{display:block;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mute-d);margin-bottom:.5rem}
.book select,.book input{
  width:100%;min-height:52px;padding:0 1.1rem;background:transparent;
  border:1px solid var(--line-d);border-radius:var(--r);color:var(--white);
  font-size:.9rem;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23FFC0CB'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1rem center;
}
.book input{background-image:none}
.book select option{background:var(--ink)}
.book .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.book .btn{width:100%;margin-top:1.1rem}
.book small{display:block;margin-top:1.2rem;font-size:.72rem;color:var(--mute-d)}
@media (max-width:1080px){.book .grid{grid-template-columns:1fr}.book .side{display:none}}
@media (max-width:520px){.book .row2{grid-template-columns:1fr}}

/* ============================ JOURNAL ==================== */
.journal .head{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:end;justify-content:space-between;
  margin-bottom:clamp(36px,4vw,60px)}
.journal h2{font-size:var(--h2);max-width:26ch}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,34px)}
.post img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .9s cubic-bezier(.2,.6,.3,1)}
.post .fr{overflow:hidden}
.post:hover img{transform:scale(1.05)}
.post .meta{display:flex;gap:1.2rem;margin-top:1.4rem;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute-l)}
.post .meta b{font-weight:400;color:var(--pink-ink)}
.post h3{font-size:1.2rem;margin-top:.9rem;line-height:1.28;font-family:var(--display)}
@media (max-width:900px){.posts{grid-template-columns:1fr}}

/* ============================ CTA BAND =================== */
.cta{position:relative;text-align:center;overflow:hidden;color:var(--white)}
.cta__bg{position:absolute;inset:0;z-index:0}
.cta__bg img{width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;background:rgba(20,22,25,.74);z-index:1}
.cta .wrap{position:relative;z-index:2}
.cta h2{font-size:var(--h2);max-width:26ch;margin:0 auto 1.3rem}
.cta .lead{margin-inline:auto;color:rgba(255,255,255,.72)}
.cta .actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2.4rem}
.cta .eyebrow{color:var(--pink)}
.cta .btn--ghost{--fg:var(--white);border-color:rgba(255,255,255,.5)}

/* ============================ NEWSLETTER ================= */
.news .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.news h2{font-size:var(--h2);max-width:22ch;margin-bottom:1.2rem}
.news form{display:flex;gap:10px;margin-top:2rem;flex-wrap:wrap}
.news input{flex:1;min-width:220px;min-height:54px;padding:0 1.2rem;border:1px solid var(--line-l);
  background:var(--white);border-radius:var(--r)}
.news small{display:block;margin-top:1rem;font-size:.72rem;color:var(--mute-l)}
.ft-mail{color:var(--mute-d);font-size:.9rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:900px){.news .grid{grid-template-columns:1fr}}

/* ============================ FOOTER ===================== */
.ft{background:var(--ink);color:var(--white);position:relative;overflow:hidden}
.ft__strip{display:grid;grid-template-columns:1fr 1fr}
.ft__strip img{width:100%;height:clamp(150px,17vw,240px);object-fit:cover;opacity:.62}
@media (max-width:700px){.ft__strip{grid-template-columns:1fr}.ft__strip img:last-child{display:none}}
.ft__main{padding-block:clamp(56px,6vw,90px)}
.ft__cols{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:clamp(28px,3.4vw,54px)}
.ft h5{margin:0 0 1.3rem;font-family:var(--body);font-weight:400;font-size:.64rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--pink)}
.ft address{font-style:normal;font-size:.92rem;color:var(--mute-d);line-height:1.8;max-width:26ch}
.ft a:hover{color:var(--pink)}
.ft .big{font-family:var(--display);font-size:1.28rem;display:block;margin-bottom:.5rem}
.ft .ftk{display:block;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--pink);margin-bottom:.55rem}
.ft ul{display:grid;gap:.7rem;font-size:.86rem;color:var(--mute-d)}
.ft dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.2rem;font-size:.86rem;color:var(--mute-d)}
.ft dl dd{font-family:var(--num);font-weight:700;color:var(--white)}
.ft dt{color:rgba(255,255,255,.45)}
.ft__bot{border-top:1px solid var(--line-d);padding-block:1.9rem;display:flex;flex-wrap:wrap;
  gap:1.2rem;align-items:center;justify-content:space-between;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-d)}
.ft__bot .mark{display:flex;align-items:center;gap:.9rem}
.ft__bot .mark img{width:52px}
.ft__bot .tag{font-family:var(--script);font-size:1.05rem;color:var(--pink);text-transform:none;letter-spacing:0}
/* the credit line, in the same face and size as the copyright above it */
.ft__legal{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;text-align:right}
.ft__by{display:inline-flex;align-items:center;gap:.5em;color:inherit;
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  border-bottom:1px solid transparent;transition:color .3s ease,border-color .3s ease}
.ft__by img{height:1.5em;width:auto;flex:none;opacity:.9;transition:opacity .3s ease}
.ft__by:hover{color:var(--white);border-bottom-color:currentColor}
.ft__by:hover img{opacity:1}
@media (max-width:640px){.ft__legal{align-items:flex-start;text-align:left}}
@media (max-width:980px){.ft__cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ft__cols{grid-template-columns:1fr}}

/* ============================ WHATSAPP FAB =============== */
.fab{position:fixed;right:clamp(14px,2.4vw,28px);bottom:clamp(14px,2.4vw,28px);z-index:70;
  width:56px;height:56px;border-radius:100px;background:var(--pink);color:var(--ink);
  display:grid;place-items:center;box-shadow:0 12px 30px rgba(20,22,25,.28);
  transition:transform .35s ease}
.fab:hover{transform:translateY(-3px) scale(1.04)}
.fab svg{width:26px;height:26px}

/* ============================ REVEAL ===================== */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.6,.3,1),transform .9s cubic-bezier(.2,.6,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   SHARED INNER-PAGE COMPONENTS
   Used by menu / about / contact / careers / community.
   Same tokens, same rhythm as the homepage — nothing new in
   the palette, only new arrangements of it.
   ============================================================ */

/* ---------------- PAGE HERO (every inner page) ------------- */
.phero{position:relative;margin-top:-104px;min-height:min(88svh,860px);
  display:flex;align-items:flex-end;isolation:isolate;overflow:hidden}
@media (max-width:1180px){.phero{margin-top:-124px;min-height:min(78svh,700px)}}
.phero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.phero__media img{width:100%;height:100%;object-fit:cover;object-position:center 52%;
  transform:scale(1.07);animation:heroZoom 11s cubic-bezier(.2,.6,.3,1) forwards}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(20,22,25,.94) 0%,rgba(20,22,25,.58) 46%,rgba(20,22,25,.30) 100%)}
.phero .wrap{color:var(--white);padding-top:clamp(150px,19vw,240px);padding-bottom:clamp(46px,5.4vw,84px)}
.phero__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(26px,5vw,80px);align-items:end}
.phero h1{font-size:var(--h1);max-width:19ch;text-wrap:balance}
.phero h1 em{font-style:normal;color:var(--pink)}
.phero__note{border-left:1px solid var(--line-d);padding-left:clamp(18px,2.2vw,30px)}
.phero__note p{font-size:var(--lead);color:rgba(255,255,255,.76);max-width:36ch}
.phero__note p+p{margin-top:.9rem}
.phero__note .kicker{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--pink);margin-bottom:1rem;display:block}
.phero__meta{display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;margin-top:clamp(28px,3.4vw,48px);
  padding-top:1.4rem;border-top:1px solid var(--line-d);font-size:.68rem;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
.phero__meta b{font-weight:400;color:var(--pink)}
@media (max-width:900px){
  .phero__grid{grid-template-columns:1fr;gap:26px}
  .phero__note{border-left:0;border-top:1px solid var(--line-d);padding-left:0;padding-top:1.3rem}
}
.crumbs{font-size:.65rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:1.5rem}
.crumbs a:hover{color:var(--pink)}
.crumbs span{opacity:.5;margin-inline:.55em}

/* ---------------- SECTION INTRO ---------------------------- */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:end;
  margin-bottom:clamp(40px,5vw,72px)}
.intro h2{font-size:var(--h2);max-width:24ch}
.intro p+p{margin-top:1rem}
.intro.center{grid-template-columns:1fr;text-align:center;max-width:66ch;margin-inline:auto}
.intro.center .lead{margin-inline:auto}
@media (max-width:900px){.intro{grid-template-columns:1fr}}

/* ---------------- STICKY CATEGORY SUBNAV ------------------- */
/* pinned directly beneath the 104px header so it never slides under it */
.subnav{position:sticky;top:104px;z-index:50;background:var(--ink);
  border-bottom:1px solid var(--line-d);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.subnav .wrap{display:flex;gap:clamp(.6rem,1.6vw,1.6rem);align-items:center;
  overflow-x:auto;scrollbar-width:none;min-height:64px}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{white-space:nowrap;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mute-d);padding:.55rem .95rem;border:1px solid transparent;border-radius:100px;
  transition:color .3s ease,border-color .3s ease,background .3s ease}
.subnav a:hover{color:var(--white);border-color:var(--line-d)}
.subnav a.on{color:var(--ink);background:var(--pink);border-color:var(--pink)}
.subnav a.out::after{content:" \2192";opacity:.55}
.subnav a.out{margin-left:auto}
@media (max-width:1180px){.subnav{top:72px}}

/* ---------------- CHALKBOARD HOUSE HEADER ------------------ */
.house-head{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,2.4vw,32px);
  align-items:center;padding-bottom:1.6rem;margin-bottom:clamp(34px,4vw,56px);
  border-bottom:1px solid var(--line-d)}
.house-head img{width:clamp(52px,5vw,68px);height:auto}
.house-head h2{font-size:var(--h2);line-height:1}
.house-head h2.script{font-family:var(--script);color:var(--pink);letter-spacing:.01em}
.house-head .who{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--mute-d);text-align:right;max-width:34ch;line-height:2}
@media (max-width:760px){
  .house-head{grid-template-columns:auto 1fr}
  .house-head .who{grid-column:1/-1;text-align:left;max-width:none}
}

/* ---------------- CHALKBOARD BOARD ------------------------- */
.board{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(24px,3.4vw,56px);align-items:start}
.board .mcol{grid-column:span 4}
.board .mfig{grid-column:span 4}
.board .mcol.wide{grid-column:span 6}
@media (max-width:1080px){.board .mcol,.board .mfig,.board .mcol.wide{grid-column:span 6}}
@media (max-width:720px){.board .mcol,.board .mfig,.board .mcol.wide{grid-column:span 12}}
.board-note{margin-top:clamp(34px,4vw,56px);padding-top:1.5rem;border-top:1px solid var(--line-d);
  display:flex;flex-wrap:wrap;gap:1rem 2.4rem;align-items:center;justify-content:space-between;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-d)}
.sec+.sec.dark,.dark+.dark{border-top:1px solid var(--line-d)}


/* ---------------- HISTORY TIMELINE (about) ----------------- */
.history{position:relative}
.history .layout{display:grid;grid-template-columns:170px 1fr;gap:clamp(28px,5vw,84px);align-items:start}
.yrail{position:sticky;top:120px;display:grid;gap:.2rem}
.yrail b{display:block;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--pink);margin-bottom:1.1rem;font-weight:400}
.yrail a{display:block;font-family:var(--display);font-size:1.22rem;color:var(--mute-l);
  padding:.28rem 0 .28rem 1.1rem;border-left:1px solid var(--line-l);transition:color .3s,border-color .3s,padding .3s}
.yrail a:hover{color:var(--ink);border-color:var(--ink)}
.yrail a.on{color:var(--ink);border-left:2px solid var(--pink);padding-left:1.3rem}
@media (max-width:960px){
  .history .layout{grid-template-columns:1fr}
  .yrail{position:static;grid-auto-flow:column;grid-auto-columns:max-content;gap:.4rem;
    overflow-x:auto;scrollbar-width:none;padding-bottom:.6rem;margin-bottom:2rem}
  .yrail b{display:none}
  .yrail a{border-left:0;border:1px solid var(--line-l);border-radius:100px;padding:.35rem 1rem;font-size:1rem}
  .yrail a.on{border:1px solid var(--pink);padding:.35rem 1rem}
}
.mstone{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);
  align-items:center;padding-block:clamp(44px,5vw,76px);border-top:1px solid var(--line-l)}
.mstone:first-of-type{border-top:0;padding-top:0}
.mstone:nth-child(even) .mstone__fig{order:2}
.mstone__fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.mstone__fig figcaption{margin-top:.85rem;font-size:.64rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute-l)}
.mstone__yr{font-family:var(--display);font-size:clamp(3.4rem,7vw,5.8rem);line-height:.9;
  color:var(--ink);display:block;margin-bottom:1rem}
.mstone__yr small{display:block;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--pink-ink);margin-bottom:.9rem;font-family:var(--body)}
.mstone h3{font-size:var(--h3);margin-bottom:1rem;max-width:26ch}
.mstone p{font-size:.96rem;color:var(--mute-l);max-width:46ch}
.mstone p+p{margin-top:.9rem}
.mstone figure{margin:0}
@media (max-width:760px){.mstone{grid-template-columns:1fr}.mstone:nth-child(even) .mstone__fig{order:0}}

/* pull-quote band between eras */
.era{background:var(--slate);color:var(--white);text-align:center;
  padding-block:clamp(52px,6vw,92px)}
.era blockquote{margin:0 auto;max-width:30ch;font-family:var(--display);
  font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.3}
.era .who{margin-top:1.6rem;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--pink)}

/* ---------------- FACT / VALUE TILES ----------------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line-l)}
.tiles article{background:var(--paper);padding:clamp(26px,3vw,44px)}
.dark .tiles,.slate .tiles{background:var(--line-d)}
.dark .tiles article,.slate .tiles article{background:var(--ink)}
.tiles b{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(2.2rem,3.6vw,3.1rem);line-height:1;margin-bottom:.7rem}
.dark .tiles b{color:var(--pink)}
.tiles span{display:block;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--pink-ink);margin-bottom:.7rem}
.dark .tiles span{color:var(--pink)}
.tiles p{font-size:.88rem;color:var(--mute-l)}
.dark .tiles p,.slate .tiles p{color:var(--mute-d)}

/* ---------------- FORMS (shared) --------------------------- */
.form{display:grid;gap:14px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:620px){.form .row2,.form .row3{grid-template-columns:1fr}}
.form label{display:block;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mute-l);margin-bottom:.5rem}
.form input,.form select,.form textarea{
  width:100%;min-height:54px;padding:.9rem 1.1rem;background:var(--white);
  border:1px solid var(--line-l);border-radius:var(--r);color:var(--ink);
  font-size:.92rem;font-family:var(--body);transition:border-color .3s ease}
.form textarea{min-height:140px;resize:vertical;line-height:1.7}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--pink);outline:none}
.form select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%2396566B'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1rem center}
.form input[type=file]{padding:.85rem 1.1rem;font-size:.82rem;cursor:pointer}
.form input[type=file]::file-selector-button{
  margin-right:1rem;padding:.5rem 1rem;border:1px solid var(--line-l);border-radius:100px;
  background:var(--paper);font:inherit;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer}
.form .check{display:flex;gap:.8rem;align-items:flex-start;font-size:.82rem;color:var(--mute-l)}
.form .check input{width:18px;min-height:18px;height:18px;flex:none;margin-top:.25rem;accent-color:var(--pink-ink)}
.form .actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.6rem}
.form .hint{font-size:.78rem;color:var(--mute-l);line-height:1.7}
.dark .form label,.slate .form label{color:var(--mute-d)}
.dark .form input,.dark .form select,.dark .form textarea,
.slate .form input,.slate .form select,.slate .form textarea{
  background:transparent;border-color:var(--line-d);color:var(--white)}
.dark .form select option{background:var(--ink);color:var(--white)}
.dark .form .hint,.slate .form .hint,.dark .form .check,.slate .form .check{color:var(--mute-d)}
.dark .form select,.slate .form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23FFC0CB'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1rem center}
.dark .form input[type=date],.slate .form input[type=date]{color-scheme:dark}
.dark .form input[type=file]::file-selector-button,.slate .form input[type=file]::file-selector-button{
  background:transparent;border-color:var(--line-d);color:var(--white)}
.formwrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,80px);align-items:start}
@media (max-width:940px){.formwrap{grid-template-columns:1fr}}
.form-note{font-size:.72rem;letter-spacing:.02em;color:var(--mute-l);margin-top:1rem;line-height:1.7}
.dark .form-note,.slate .form-note{color:var(--mute-d)}
.sent{display:none;margin-top:1rem;padding:1rem 1.2rem;border:1px solid var(--pink);
  background:rgba(255,192,203,.16);font-size:.84rem;line-height:1.7}
.sent.on{display:block}

/* ---------------- CONTACT CARDS ---------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--line-l)}
.cards article{background:var(--paper);padding:clamp(26px,3vw,42px);display:flex;flex-direction:column;gap:.7rem}
.cards h4{font-size:var(--h4)}
.cards .k{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--pink-ink)}
.cards a.big{font-family:var(--display);font-size:1.3rem;line-height:1.4;
  overflow-wrap:anywhere;word-break:break-word}
.cards a[href^="mailto:"].big{font-size:clamp(.8rem,.9vw,.98rem);letter-spacing:0;line-height:1.5}
.cards .hrs{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--pink-ink);margin-top:-.2rem}
.cards a:hover{color:var(--pink-ink)}
.cards p{font-size:.88rem;color:var(--mute-l)}
.cards .btn{margin-top:auto;align-self:flex-start}

/* ---------------- JOBS ------------------------------------- */
.jobs{display:grid;gap:0;border-top:1px solid var(--line-d)}
.job{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:clamp(14px,2.4vw,32px);
  align-items:center;padding-block:clamp(22px,2.6vw,34px);border-bottom:1px solid var(--line-d)}
.job h4{font-size:var(--h4)}
.job .m{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-d)}
.job .m b{font-weight:400;color:var(--pink)}
.job p{font-size:.86rem;color:var(--mute-d);grid-column:1/-1;max-width:70ch;margin-top:-.4rem}
@media (max-width:820px){.job{grid-template-columns:1fr;gap:.6rem}.job .btn{justify-self:start}}

/* ---------------- POLICIES (accordion) --------------------- */
.pols{display:grid;gap:0;border-top:1px solid var(--line-l)}
.pol{border-bottom:1px solid var(--line-l)}
.pol summary{list-style:none;cursor:pointer;display:flex;gap:1.4rem;align-items:baseline;
  padding-block:clamp(20px,2.2vw,28px);transition:color .3s ease}
.pol summary::-webkit-details-marker{display:none}
.pol summary:hover{color:var(--pink-ink)}
.pol summary .n{font-size:.66rem;letter-spacing:.2em;color:var(--pink-ink);flex:none;width:2.4rem}
.pol summary h4{font-size:var(--h4);flex:1}
.pol summary .pm{flex:none;width:26px;text-align:center;font-size:1.2rem;line-height:1;
  transition:transform .35s ease;color:var(--mute-l)}
.pol[open] summary .pm{transform:rotate(45deg)}
.pol .body{padding:0 0 clamp(22px,2.4vw,32px) calc(2.4rem + 1.4rem);max-width:78ch}
.pol .body p{font-size:.92rem;color:var(--mute-l)}
.pol .body p+p,.pol .body ul{margin-top:.9rem}
.pol .body ul{display:grid;gap:.55rem;font-size:.92rem;color:var(--mute-l)}
.pol .body li{padding-left:1.2rem;position:relative}
.pol .body li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:1px;background:var(--pink-ink)}
@media (max-width:640px){.pol .body{padding-left:0}}
.dark .pols,.slate .pols{border-top-color:var(--line-d)}
.dark .pol,.slate .pol{border-bottom-color:var(--line-d)}
.dark .pol summary,.slate .pol summary{color:var(--white)}
.dark .pol summary:hover,.slate .pol summary:hover{color:var(--pink)}
.dark .pol summary .n,.slate .pol summary .n{color:var(--pink)}
.dark .pol summary .pm,.slate .pol summary .pm{color:var(--mute-d)}
.dark .pol .body p,.dark .pol .body ul,
.slate .pol .body p,.slate .pol .body ul{color:var(--mute-d)}
.dark .pol .body li::before,.slate .pol .body li::before{background:var(--pink)}

/* ---------------- COMMUNITY DIRECTORY ---------------------- */
.dir{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:clamp(18px,2.2vw,30px)}
.biz{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line-l);
  transition:transform .45s cubic-bezier(.2,.6,.3,1),box-shadow .45s ease}
.biz:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(20,22,25,.10)}
.biz .fr{overflow:hidden}
.biz img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .9s cubic-bezier(.2,.6,.3,1)}
.biz:hover img{transform:scale(1.06)}
.biz .in{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.biz .tagline{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--pink-ink)}
.biz h4{font-size:1.12rem}
.biz p{font-size:.86rem;color:var(--mute-l);flex:1}
.biz .links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.chip{display:inline-flex;align-items:center;gap:.45em;font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;border:1px solid var(--line-l);border-radius:100px;padding:.42rem .85rem;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.chip:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.chip svg{width:13px;height:13px}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(28px,3vw,44px)}
.filters button{font:inherit;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--line-l);background:transparent;border-radius:100px;padding:.55rem 1.1rem;
  cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.filters button:hover{border-color:var(--ink)}
.filters button.on{background:var(--ink);color:var(--white);border-color:var(--ink)}

/* ---------------- MAP / VISIT PANEL ------------------------ */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.visit .pic img{width:100%;height:100%;min-height:340px;object-fit:cover}
.visit .in{padding:clamp(32px,4vw,64px);display:flex;flex-direction:column;justify-content:center;gap:1.2rem}
@media (max-width:860px){.visit{grid-template-columns:1fr}}

/* ---------------- STEPS ------------------------------------ */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(20px,2.6vw,40px)}
.step b{display:block;font-family:var(--display);font-size:2.4rem;line-height:1;color:var(--pink-ink);margin-bottom:.9rem}
.dark .step b,.slate .step b{color:var(--pink)}
.step h4{font-size:var(--h4);margin-bottom:.55rem}
.step p{font-size:.88rem;color:var(--mute-l)}
.dark .step p,.slate .step p{color:var(--mute-d)}

/* ============================================================
   CART & CHECKOUT
   The "Add" buttons are generated by site.js from the existing
   chalkboard rows, so any item added to the board later gets a
   button automatically. Give an item data-variants="A|B" to name
   the two halves of a split price yourself.
   ============================================================ */
.item__buy{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.85rem}
.add{
  font:inherit;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.5em;cursor:pointer;
  padding:.5rem 1rem;border-radius:100px;border:1px solid var(--line-l);
  background:transparent;color:var(--ink);
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .25s ease}
.add:hover{background:var(--pink);border-color:var(--pink);color:var(--ink);transform:translateY(-2px)}
.add.done{background:var(--pink);border-color:var(--pink);color:var(--ink)}
.dark .add,.slate .add{border-color:var(--line-d);color:var(--mute-d)}
.dark .add:hover,.slate .add:hover,.dark .add.done,.slate .add.done{background:var(--pink);border-color:var(--pink);color:var(--ink)}

/* ---------------- CART BUTTON ------------------------------ */
.cartfab{position:fixed;right:clamp(14px,2.4vw,28px);bottom:calc(clamp(14px,2.4vw,28px) + 68px);
  z-index:70;width:56px;height:56px;border-radius:100px;background:var(--ink);color:var(--white);
  border:0;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 12px 30px rgba(20,22,25,.28);transition:transform .35s ease,background .35s ease}
.cartfab:hover{transform:translateY(-3px) scale(1.04);background:var(--slate)}
.cartfab svg{width:24px;height:24px}
.cartfab .n{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;
  border-radius:100px;background:var(--pink);color:var(--ink);font-size:.66rem;line-height:22px;
  text-align:center;font-family:var(--body)}
.cartfab[hidden]{display:none}

/* ---------------- CART DRAWER ------------------------------ */
.cartwrap{position:fixed;inset:0;z-index:90;visibility:hidden}
.cartwrap.open{visibility:visible}
.cartwrap__veil{position:absolute;inset:0;background:rgba(20,22,25,.55);opacity:0;transition:opacity .45s ease}
.cartwrap.open .cartwrap__veil{opacity:1}
.cartpanel{position:absolute;top:0;right:0;height:100%;width:min(420px,100%);
  background:var(--paper);color:var(--ink);display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .5s cubic-bezier(.65,0,.35,1);
  box-shadow:-20px 0 60px rgba(20,22,25,.22)}
.cartwrap.open .cartpanel{transform:none}
.cartpanel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.5rem var(--gut);border-bottom:1px solid var(--line-l)}
.cartpanel header h3{font-size:1.5rem}
.cartpanel header button{width:40px;height:40px;border-radius:100px;border:1px solid var(--line-l);
  background:transparent;cursor:pointer;flex:none}
.cartpanel header button:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.cart__list{flex:1;overflow-y:auto;padding:0 var(--gut)}
.cart__empty{padding:3rem 0;text-align:center;color:var(--mute-l);font-size:.9rem}
.cartline{display:grid;grid-template-columns:1fr auto;gap:.4rem 1rem;
  padding-block:1.15rem;border-bottom:1px solid var(--line-l)}
.cartline h4{font-size:.9rem;letter-spacing:.05em;text-transform:uppercase;line-height:1.4;font-family:var(--body)}
.cartline .v{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pink-ink);margin-top:.25rem}
.cartline .amt{font-family:var(--menu);font-size:1.05rem;white-space:nowrap;text-align:right}
.cartline .qty{display:flex;align-items:center;gap:.55rem;grid-column:1}
.cartline .qty button{width:28px;height:28px;border-radius:100px;border:1px solid var(--line-l);
  background:transparent;cursor:pointer;font-size:.9rem;line-height:1;display:grid;place-items:center}
.cartline .qty button:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.cartline .qty b{font-weight:400;min-width:1.4rem;text-align:center;font-size:.92rem}
.cartline .rm{grid-column:2;justify-self:end;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  background:none;border:0;padding:0;cursor:pointer;color:var(--mute-l);text-decoration:underline}
.cartline .rm:hover{color:var(--pink-ink)}
.cart__foot{padding:1.4rem var(--gut) calc(1.4rem + env(safe-area-inset-bottom));border-top:1px solid var(--line-l)}
.cart__sum{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.1rem}
.cart__sum span{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute-l)}
.cart__sum b{font-family:var(--menu);font-weight:400;font-size:1.7rem}
.cart__foot .btn{width:100%}
.cart__foot small{display:block;margin-top:.9rem;font-size:.72rem;color:var(--mute-l);line-height:1.6}

/* ---------------- CHECKOUT PAGE ---------------------------- */
.co{display:grid;grid-template-columns:1fr .85fr;gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:940px){.co{grid-template-columns:1fr}.co__sum{order:-1}}
.co__sum{border:1px solid var(--line-l);padding:clamp(24px,3vw,36px);position:sticky;top:130px}
@media (max-width:940px){.co__sum{position:static}}
.co__sum h3{font-size:var(--h3);margin-bottom:1.4rem}
.co__lines{display:grid;border-top:1px solid var(--line-l)}
.co__line{display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;padding-block:.95rem;
  border-bottom:1px solid var(--line-l);font-size:.88rem}
.co__line .n{letter-spacing:.03em}
.co__line .v{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pink-ink)}
.co__line .a{font-family:var(--menu);font-size:1.02rem;white-space:nowrap;text-align:right}
.co__tot{display:flex;align-items:baseline;justify-content:space-between;margin-top:1.4rem}
.co__tot span{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute-l)}
.co__tot b{font-family:var(--menu);font-weight:400;font-size:2rem}
.co__empty{padding:2rem 0;color:var(--mute-l);font-size:.92rem;line-height:1.8}
.pay{display:grid;gap:12px}
.pay label{display:flex;gap:.9rem;align-items:flex-start;cursor:pointer;
  border:1px solid var(--line-l);padding:1.05rem 1.2rem;transition:border-color .3s ease,background .3s ease;
  margin:0;text-transform:none;letter-spacing:0;font-size:.92rem;color:var(--ink)}
.pay label:hover{border-color:var(--ink)}
.pay input{width:18px;height:18px;min-height:18px;flex:none;margin-top:.2rem;accent-color:var(--pink-ink)}
.pay b{display:block;font-weight:400;font-family:var(--body);letter-spacing:.04em;text-transform:uppercase;font-size:.78rem}
.pay small{display:block;margin-top:.3rem;font-size:.82rem;color:var(--mute-l);line-height:1.6}
.pay input:checked + span b{color:var(--pink-ink)}
.pay :has(input:checked){border-color:var(--pink-ink)}

/* a photo that never arrives should read as an empty dark frame */
.hero__media,.phero__media,.band,.cta__bg,.mfig,.card,.biz .fr,.post .fr{background:var(--ink-2)}

/* ---------------- COMPACT PAGE HEAD (no photo) ------------- */
.pagehead{background:var(--ink);color:var(--white);margin-top:-104px;
  padding-top:calc(104px + clamp(52px,6vw,90px));padding-bottom:clamp(38px,4.4vw,64px)}
@media (max-width:1180px){.pagehead{margin-top:-124px;padding-top:calc(124px + clamp(44px,6vw,72px))}}
.pagehead h1{font-size:clamp(2.1rem,4.2vw,3.4rem);max-width:24ch}
.pagehead h1 em{font-style:normal;color:var(--pink)}
.pagehead .crumbs{margin-bottom:1.1rem}

/* ---------------- LEADERSHIP ------------------------------- */
.leaders{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-d)}
@media (max-width:1080px){.leaders{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.leaders{grid-template-columns:1fr}}
.leader{background:var(--slate);padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column}
@media (max-width:820px){.leaders{grid-template-columns:1fr}}
.leader .mono{display:grid;place-items:center;width:74px;height:74px;border-radius:100px;
  border:1px solid var(--line-d);font-family:var(--display);font-size:1.6rem;
  color:var(--pink);margin-bottom:1.8rem;letter-spacing:.06em}
.leader .role{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--pink);margin-bottom:.7rem}
.leader h3{font-size:var(--h3);margin-bottom:.4rem}
.leader .from{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute-d);margin-bottom:1.4rem}
.leader p:last-child{font-size:.94rem;color:var(--mute-d);line-height:1.8}

/* the one line in a policy that has to be impossible to skim past */
.pol .body p.warn{border-left:2px solid var(--pink-ink);padding-left:1rem;margin-top:1.2rem}
.dark .pol .body p.warn,.slate .pol .body p.warn{border-left-color:var(--pink)}

/* the personal Instagram link under a name, where there is one */
.leader .ig{display:inline-flex;align-items:center;gap:.45em;align-self:flex-start;
  margin:-.35rem 0 1.1rem;font-size:.78rem;letter-spacing:.02em;color:var(--mute-d);
  border-bottom:1px solid transparent;transition:color .3s ease,border-color .3s ease}
.leader .ig svg{width:15px;height:15px;flex:none}
.leader .ig:hover{color:var(--pink);border-bottom-color:currentColor}

/* ---------------- DIRECTORY TILE (no partner photo yet) ---- */
.biz .mark{aspect-ratio:16/10;display:grid;place-items:center;background:var(--ink);
  color:var(--pink);font-family:var(--display);font-size:2.6rem;letter-spacing:.08em;
  position:relative;overflow:hidden}
.biz .mark::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px)}
.biz:hover .mark{background:var(--ink-2)}

/* ---------------- CUSTOM ORDERS ---------------------------- */
.custom{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start}
@media (max-width:900px){.custom{grid-template-columns:1fr}}
.custom__pics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.custom__pics figure{margin:0}
.custom__pics img{width:100%;aspect-ratio:3/4;object-fit:cover}
.custom__pics figcaption{margin-top:.7rem;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute-d)}
.custom__in p+p{margin-top:1rem}
.custom__in .btn{margin-top:2rem}
.ticks{display:grid;gap:.7rem;margin-top:1.8rem;font-size:.92rem;color:var(--mute-d)}
.ticks li{position:relative;padding-left:1.6rem}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;
  border:1px solid var(--pink);border-radius:100px}
.ticks b{font-weight:400;color:var(--white)}
.custom__note{margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--line-d);
  display:grid;gap:.5rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-d)}
.custom__note b{font-weight:400;color:var(--pink)}

/* ---------------- MODAL ------------------------------------ */
.modal{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:var(--gut);
  visibility:hidden;opacity:0;transition:opacity .35s ease,visibility 0s linear .35s}
.modal.open{visibility:visible;opacity:1;transition:opacity .35s ease,visibility 0s}
.modal__veil{position:absolute;inset:0;background:rgba(20,22,25,.72);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.modal__box{position:relative;width:min(700px,100%);max-height:88svh;overflow-y:auto;
  overscroll-behavior:contain;background:var(--paper);color:var(--ink);
  padding:clamp(26px,3.4vw,46px);transform:translateY(18px);
  transition:transform .4s cubic-bezier(.65,0,.35,1);box-shadow:0 30px 80px rgba(20,22,25,.4)}
.modal.open .modal__box{transform:none}
.modal__x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:100px;
  border:1px solid var(--line-l);background:transparent;cursor:pointer;line-height:1}
.modal__x:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.modal__box h3{font-size:var(--h3);margin-bottom:1rem;max-width:26ch}
.modal__box .form{margin-top:2rem}

/* a cart line with no fixed price yet */
.cartline .quote,.co__line .quote{font-family:var(--body);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--pink-ink);white-space:nowrap;text-align:right}
.cartline .spec,.co__line .spec{margin-top:.4rem;font-size:.74rem;line-height:1.6;color:var(--mute-l)}
.co__quote{margin-top:.9rem;font-size:.78rem;color:var(--mute-l);line-height:1.6}


/* ---------------- TELEPHONE NUMBERS ------------------------ */
/* every phone number on the site, desktop and mobile */
.ft .big,
.cards a.big,
.hours .call a,
a[href^="tel:"]{font-family:var(--num);font-weight:700;letter-spacing:.01em}
.hero__meta b,.phero__meta b{font-family:inherit}
.hero__meta span.tel b,.phero__meta span.tel b{font-family:var(--num);font-weight:700}

/* ---------------- WHATSAPP MARK ---------------------------- */
.wa-i{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.16em;
  margin-right:.4em;flex:none;fill:currentColor}
.btn .wa-i,.chip .wa-i{margin-right:.15em}

/* ---------------- FOOTER MARK ------------------------------ */
.ft__bot .tag{display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--menu);font-size:.72rem;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute-d)}
.ft__bot .tag svg{width:15px;height:15px;flex:none}
.ft__bot .tag:hover{color:var(--pink)}

.hours .note--soft{margin-top:.35rem;color:var(--mute-d);opacity:.75;text-transform:none;
  letter-spacing:.02em;font-size:.78rem}

/* ============================================================
   PHOTOGRAPHY GRADE
   The photographs come from a dozen different phones and hours of
   the day — some cool daylight, some warm tungsten. A single light
   grade pulls them together and settles them against the dark
   chalkboard palette.
   ============================================================ */
.hero__media img,.phero__media img,.band img,.cta__bg img,.card img,.mfig img,
.post img,.mstone__fig img,.story figure img,.book .side img,.visit .pic img,
.custom__pics img,.ft__strip img,.biz .fr img,.cakegrid img,
.exgrid img,.feat2 img,.fcard img{
  filter:saturate(.88) contrast(1.06) brightness(.97) sepia(.10) hue-rotate(-4deg);
}
/* backgrounds sit under a heavy scrim already — take them a shade further */
.cta__bg img,.ft__strip img{filter:saturate(.72) contrast(1.05) brightness(.9) sepia(.14)}
.wa-mark{white-space:nowrap}

/* ---------------- CUSTOM PRODUCTS, TIERS, GALLERY ---------- */
/* borders rather than a 1px gap, so a part-filled last row leaves no
   stray block where a card would have been */
.cprods{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:1.8rem;border-top:1px solid var(--line-d);border-left:1px solid var(--line-d)}
.cprod{padding:clamp(20px,2.2vw,30px);
  border-right:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.cprod h4{font-size:var(--h4);margin-bottom:.45rem}
.cprod .min{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--pink);margin-bottom:.9rem}
.cprod p:last-child{font-size:.88rem;color:var(--mute-d);line-height:1.75}

/* one block per cake shape: the catalogue's own illustrations above the
   sizing table they belong to */
.tiershape{margin-top:2.2rem;min-width:0}
.tiershape h4{font-size:var(--h4);color:var(--pink);margin-bottom:1rem;
  padding-bottom:.7rem;border-bottom:1px solid var(--line-d)}
.tierpics{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.6vw,22px);
  margin-bottom:1.4rem;align-items:end}
@media (max-width:640px){.tierpics{grid-template-columns:repeat(2,1fr);gap:16px}}
.tierpics figure{margin:0;text-align:center}
.tierpics img{width:100%;max-width:150px;height:auto;margin-inline:auto;display:block}
.tierpics figcaption{margin-top:.6rem;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute-d)}
.tiers .none{color:rgba(255,255,255,.3)}
.tscroll .none{color:rgba(255,255,255,.3)}
@media (max-width:900px){.tierwrap{grid-template-columns:1fr}}
.tiers{margin:0;min-width:0}
.tiers figcaption{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--pink);margin-bottom:.9rem}
.tscroll{overflow-x:auto}
.tiers table,.tiershape table{border-collapse:collapse;width:100%;min-width:420px;font-size:.82rem}
.tiers th,.tiers td,.tiershape th,.tiershape td{border:1px solid var(--line-d);
  padding:.6rem .7rem;text-align:left;color:var(--mute-d);font-weight:400}
.tiers thead th,.tiershape thead th{color:var(--white);font-family:var(--body);letter-spacing:.06em;
  text-transform:uppercase;font-size:.66rem;vertical-align:top}
.tiers thead th span,.tiershape thead th span{display:block;margin-top:.3rem;color:var(--pink);letter-spacing:.1em;font-size:.58rem}
.tiers tbody th,.tiershape tbody th{color:var(--white);white-space:nowrap}
.tiers .tot th,.tiers .tot td,.tiershape .tot th,.tiershape .tot td{color:var(--pink);border-top:1px solid var(--pink)}

.cakegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;margin-top:1.8rem}
.cakegrid img{width:100%;aspect-ratio:3/4;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.6,.3,1),opacity .4s ease;opacity:.92}
.cakegrid img:hover{transform:scale(1.04);opacity:1}

/* social links carry their own mark */
.ft ul.social a{display:inline-flex;align-items:center;gap:.55em}
.ft ul.social svg{width:15px;height:15px;flex:none}

/* ============================================================
   THE CAKE COUNTER — exotic cake gallery and the two features
   ============================================================ */
.exgrid{display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(10px,1.4vw,18px);margin-top:clamp(30px,3.6vw,50px)}
@media (max-width:1080px){.exgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.exgrid{grid-template-columns:repeat(2,1fr)}}
.exgrid figure{margin:0;min-width:0}
.exgrid .fr{overflow:hidden;background:var(--ink-2)}
.exgrid img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 84%;
  display:block;opacity:.94;transition:transform .7s cubic-bezier(.2,.6,.3,1),opacity .4s ease}
.exgrid figure:hover img{transform:scale(1.05);opacity:1}
.exgrid figcaption{margin-top:.65rem;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute-d);line-height:1.5}

.feat2{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,2.8vw,44px);margin-top:clamp(46px,5.4vw,78px)}
@media (max-width:860px){.feat2{grid-template-columns:1fr}}
.feat2 article{border:1px solid var(--line-d);background:var(--ink-2);
  display:flex;flex-direction:column;min-width:0}
.feat2 .fr{overflow:hidden;background:var(--ink);flex:none}
.feat2 img{width:100%;aspect-ratio:16/11;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.6,.3,1)}
.feat2 article:hover img{transform:scale(1.035)}
.feat2 .in{padding:clamp(22px,2.6vw,36px)}
.feat2 .k{display:block;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--pink)}
.feat2 h4{font-size:var(--h3);color:var(--white);margin:.6rem 0 1rem;line-height:1.15}
.feat2 p{color:var(--mute-d);line-height:1.8;font-size:var(--lead)}
.feat2 p+p{margin-top:.9rem}

/* crops for the photographs that came in tall */
.p-sk1{object-position:center 78%}
.p-sk2{object-position:center 70%}
.p-bar{object-position:center 34%}
.p-dubai{object-position:center 56%}
.p-bday{object-position:center 58%}

/* ============================================================
   THE FLOWER BOUTIQUE — bouquets, baskets and boxes
   Photo tiles above chalkboard item lines, so the boutique reads as
   part of the same menu rather than a shop bolted onto it.
   ============================================================ */
.fgroup{margin-top:clamp(40px,4.6vw,66px)}
.fgroup:first-of-type{margin-top:clamp(28px,3.2vw,44px)}
/* auto-fit, so a group of three stretches across the full width rather than
   leaving two empty tracks on the right */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(18px,2.2vw,30px) clamp(14px,1.8vw,24px);margin-top:1.35rem}
/* two up on a phone, the same as the cake gallery — twelve full-width cards
   is a very long scroll otherwise */
@media (max-width:600px){
  .fgrid{grid-template-columns:1fr 1fr;gap:20px 14px}
  .fmeta h4{font-size:.86rem}
  .fmeta .p{font-size:1rem}
  .fmeta p.d{font-size:.75rem}
}
.fcard{min-width:0}
.fcard .fr{overflow:hidden;background:var(--ink-2);border:1px solid var(--line-d)}
.fcard img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 45%;
  display:block;opacity:.94;
  transition:transform .8s cubic-bezier(.2,.6,.3,1),opacity .4s ease}
.fcard:hover img{transform:scale(1.05);opacity:1}
.fcard .fr--empty{aspect-ratio:4/3;display:grid;place-items:center;
  border-style:dashed;background:rgba(255,255,255,.02)}
.fcard .fr--empty span{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.3);text-align:center;padding:0 1rem;line-height:1.6}
.fmeta{padding-top:.9rem;display:flex;flex-direction:column;gap:.3rem}
.fmeta h4{font-family:var(--body);font-weight:400;font-size:.94rem;letter-spacing:.06em;
  color:var(--white);line-height:1.35}
.fmeta .p{font-family:var(--menu);font-size:1.12rem;color:var(--pink);line-height:1.2}
.fmeta p.d{margin-top:.15rem;font-size:.8rem;line-height:1.6;color:rgba(255,255,255,.55)}

/* ---------------- GHUNZAKHI — the house speciality ----------
   Built like the feature cards further up the page: one bordered panel,
   the drawing on its own tinted ground, the words beside it. */
.ghun{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  align-items:stretch;overflow:hidden;
  border:1px solid var(--line-d);background:var(--ink-2);
  margin-top:clamp(44px,5vw,72px)}
@media (max-width:820px){.ghun{grid-template-columns:1fr}}
.ghun__fig{display:grid;place-items:center;padding:clamp(26px,3.4vw,48px);
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(255,192,203,.10), transparent 68%),
    var(--ink);
  border-right:1px solid var(--line-d)}
@media (max-width:820px){.ghun__fig{border-right:0;border-bottom:1px solid var(--line-d)}}
.ghun__fig img{width:100%;max-width:262px;height:auto;display:block;
  filter:brightness(1.4) contrast(1.04)}
.ghun__in{padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;
  justify-content:center}
.ghun__in .k{display:block;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--pink)}
.ghun__in h3{font-size:var(--h3);color:var(--white);margin:.6rem 0 1rem;line-height:1.15}
.ghun__in>p{color:var(--mute-d);line-height:1.8;font-size:var(--lead);max-width:52ch}
.ghun__price{display:flex;flex-wrap:wrap;gap:10px;margin:1.6rem 0 0}
.ghun__price div{border:1px solid var(--line-d);padding:.75rem 1.1rem;
  background:rgba(255,255,255,.025);min-width:150px;
  display:flex;flex-direction:column;justify-content:space-between}
.ghun__price dt{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mute-d)}
.ghun__price dt span{display:block;letter-spacing:.12em;opacity:.68;margin-top:.25rem}
.ghun__price dd{margin:.45rem 0 0;font-family:var(--num);font-weight:700;
  font-size:1.32rem;color:var(--pink);letter-spacing:.01em}
.ghun__note{margin-top:1.1rem;font-size:.84rem;color:var(--mute-d);opacity:.85;max-width:50ch}
.ghun__in .btn{margin-top:1.5rem;align-self:flex-start}

/* ============================================================
   HERO — the three houses, straight through to their board
   No chips and no captions: the marks sit straight on the photograph
   and carry their own shadow so they hold up against it.
   Desktop: out at the right edge, in the gap above the meta rule.
   Phone:   a centred row above the headline.
   ============================================================ */
/* the hero column is a flex stack on every width, so the marks can be sent
   to the right edge on a desktop and re-ordered to the top on a phone */
.hero .wrap{display:flex;flex-direction:column;align-items:stretch}

.hero__houses{display:flex;align-items:center;gap:clamp(18px,2.2vw,32px)}
.hero__houses .hh{
  display:inline-flex;align-items:center;text-decoration:none;color:#fff;
  transition:transform .45s cubic-bezier(.2,.6,.3,1),opacity .35s ease;
}
.hero__houses .hh:hover{transform:translateY(-3px)}
.hero__houses .hh img{
  height:64px;width:auto;display:block;
  filter:drop-shadow(0 3px 14px rgba(0,0,0,.85)) drop-shadow(0 0 4px rgba(0,0,0,.7));
}
/* the bar mark was drawn dark; as a white silhouette it survives the photo */
.hh--bar img{filter:brightness(0) invert(1)
  drop-shadow(0 3px 14px rgba(0,0,0,.85)) drop-shadow(0 0 4px rgba(0,0,0,.75))}
/* Salt Kitchen has no drawn mark, so it wears its name in the script face the
   menu already uses for it — kept on one line */
.hh--sk span{
  font-family:var(--script);font-size:1.5rem;line-height:1;color:#fff;
  white-space:nowrap;letter-spacing:.01em;
  text-shadow:0 3px 14px rgba(0,0,0,.85), 0 0 4px rgba(0,0,0,.7);
  transition:color .35s ease;
}
.hero__houses .hh:hover img{opacity:.92}
.hh--sk:hover span{color:var(--pink)}
.hero__houses .hh:focus-visible{outline:2px solid var(--pink);outline-offset:8px;border-radius:8px}

/* Desktop: the marks stay in the flow, so they land in the gap the meta rule
   already leaves — right-aligned, and pushed past the wrap's gutter so the
   row finishes at the edge of the page. */
@media (min-width:981px){
  .hero__houses{
    align-self:flex-end;
    margin-top:clamp(28px,3vw,44px);
    margin-bottom:clamp(14px,1.4vw,20px);
    margin-right:calc(24px - var(--gut) - max(0px, (100vw - 1500px) / 2));
  }
  .hero__meta{margin-top:0}
}

/* Phone and tablet: a centred row above the headline. */
@media (max-width:980px){
  .hero__houses{
    order:-1;width:100%;justify-content:center;flex-wrap:wrap;
    gap:clamp(20px,5vw,32px);margin-bottom:clamp(24px,4vw,34px);
  }
  .hero__houses .hh img{height:58px}
  .hh--sk span{font-size:1.35rem}
}
@media (max-width:420px){
  .hero__houses{gap:16px}
  .hero__houses .hh img{height:50px}
  .hh--sk span{font-size:1.15rem}
}

/* the Add button inside a boutique card */
.fcard .item__buy{margin-top:.7rem}
.fcard .add{width:100%;justify-content:center}