/* KUKU Catering — site styles
   Brand tokens from github.com/artin-kuku/design-system (tokens.css) */

@font-face{font-family:"Dela Gothic One";src:url(/assets/fonts/DelaGothicOne-Regular.woff2?v=04541f54) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Ygro Sans";src:url(/assets/fonts/YgroSansBeta-Book.woff2?v=2172f960) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Ygro Sans";src:url(/assets/fonts/YgroSansBeta-Medium.woff2?v=445f60ea) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Ygro Sans";src:url(/assets/fonts/YgroSansBeta-Bold.woff2?v=b9a6bff7) format("woff2");font-weight:700;font-display:swap}

:root{
  --jade:#17482D;--jade-deep:#0F3220;--jade-soft:#2A6A45;
  --mustard:#E9AB0F;--mustard-dim:#C7900A;
  --guava:#CD5647;--guava-deep:#B0432F;
  --iso:#DDD3D2;--iso-warm:#EFE6E4;
  --cream:#F7F1EA;--white:#fff;--ink:#0F2A1B;--muted:#4A5A4F;
  --border:rgba(23,72,45,.18);
  --display:"Dela Gothic One","Ygro Sans",system-ui,sans-serif;
  --body:"Ygro Sans","Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --farsi:"Vazirmatn","Noto Naskh Arabic","Geeza Pro","Segoe UI",system-ui,sans-serif;
  --r-sm:8px;--r-md:14px;--r-lg:22px;--pill:999px;
  --sh-sm:0 1px 2px rgba(15,42,27,.08);--sh-md:0 6px 14px -4px rgba(15,42,27,.18);--sh-lg:0 18px 40px -12px rgba(15,42,27,.28);
  --stamp:4px 4px 0 0 var(--jade);--stamp-m:12px 12px 0 0 var(--mustard);
  --ease:cubic-bezier(.22,.7,.25,1);
  --wrap:1160px;--gutter:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;font-weight:400}
img{display:block;max-width:100%;height:auto}
a{color:var(--jade)}
h1,h2,h3,h4{margin:0;font-family:var(--body);font-weight:700;color:var(--jade);line-height:1.1;letter-spacing:-.01em}
h2{font-size:clamp(28px,3.4vw,38px)}
h3{font-size:clamp(20px,2.2vw,24px)}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.muted{color:var(--muted)}
.fa{font-family:var(--farsi);direction:rtl;unicode-bidi:isolate}
:focus-visible{outline:3px solid var(--mustard);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 15px/1 var(--body);padding:15px 26px;border-radius:var(--pill);border:1.5px solid transparent;text-decoration:none;cursor:pointer;transition:background var(--ease) .14s,transform .08s,box-shadow .14s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--jade);color:#fff}
.btn-primary:hover{background:var(--jade-soft)}
.btn-mustard{background:var(--mustard);color:var(--jade)}
.btn-mustard:hover{background:#F2BB2A}
.btn-stamp{background:var(--mustard);color:var(--jade);box-shadow:var(--stamp)}
.btn-stamp:hover{background:#F2BB2A}
.btn-stamp:active{box-shadow:2px 2px 0 0 var(--jade)}
.btn-ghost{background:transparent;color:var(--jade);border-color:var(--jade)}
.btn-ghost:hover{background:rgba(23,72,45,.06)}
.btn-ghost.on-jade{color:#fff;border-color:rgba(255,255,255,.7)}
.btn-ghost.on-jade:hover{background:rgba(255,255,255,.1)}
.btn-lg{font-size:17px;padding:18px 32px}
.btn-sm{font-size:14px;padding:11px 18px}
.eyebrow{display:inline-block;background:var(--mustard);color:var(--jade);font:700 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border-radius:var(--pill)}
.eyebrow.on-mustard{background:var(--jade);color:var(--mustard)}
.badge{display:inline-block;font:700 12px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:var(--pill);background:var(--jade);color:#fff}
.badge-m{background:var(--mustard);color:var(--jade)}
.badge-o{background:transparent;color:var(--jade);border:1.5px solid var(--jade)}

/* ---------- nav ---------- */
.nav{background:var(--cream);position:sticky;top:0;z-index:20;border-bottom:1.5px solid var(--border)}
.nav .wrap{display:flex;align-items:center;gap:20px;height:72px}
.nav-logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.nav-logo img{height:52px;width:auto}
/* v8: the link group itself takes the spare width (margin-left:auto on the nav element, not on the inner list),
   so the links and the page CTA sit together at the right of the container. */
.nav-desk{margin-left:auto;flex:0 1 auto;min-width:0}
.nav-links{display:flex;gap:4px;margin:0;list-style:none;padding:0}
.nav-links a{display:block;padding:10px 12px;border-radius:var(--pill);font:500 15px/1 var(--body);color:var(--jade);text-decoration:none;white-space:nowrap}
.nav-links a:hover{background:rgba(23,72,45,.07)}
.nav-links a[aria-current=page]{background:var(--jade);color:#fff}
.nav-cta{flex:0 0 auto}


/* ---------- hero ---------- */
.hero{background:var(--jade);color:#fff;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center;padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(44px,6vw,88px)}
.hero-copy{position:relative;z-index:2}
.hero h1{font-family:var(--display);font-weight:400;text-transform:uppercase;color:#fff;font-size:clamp(34px,5vw,66px);line-height:1;letter-spacing:0;margin:22px 0 22px;max-width:15ch}
.hero.solo .wrap{grid-template-columns:minmax(0,1fr)}
.hero.solo h1{max-width:20ch}
.hero.solo .hero-sub{max-width:56ch}
.hero-sub{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:rgba(255,255,255,.88);max-width:46ch;margin:0 0 30px}
.hero-sub strong{color:var(--mustard);font-weight:700}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-note{font-size:14px;color:rgba(255,255,255,.7);margin:18px 0 0}
.photo-card{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--stamp-m);background:var(--cream)}
.photo-card img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.photo-card.tall img{aspect-ratio:4/5}
.hero .photo-card{margin-right:12px;margin-bottom:12px}
/* v8: the hero ornament is a single, fully visible medallion hung on the hero's bottom edge (see the v8b block at the end) */
.eyebrow{max-width:100%}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;padding-top:36px;padding-bottom:44px}
  .hero h1{font-size:clamp(34px,10vw,52px);max-width:none}
  .eyebrow{letter-spacing:.08em;font-size:11px}
  .hero .photo-card{order:-1;margin-right:12px}
  .hero .photo-card img{aspect-ratio:16/10}
}

/* ---------- sections ---------- */
.section{padding:clamp(52px,7vw,96px) 0}
.section.tight{padding:clamp(36px,5vw,64px) 0}
.section.white{background:#fff}
.section.jade{background:var(--jade);color:#fff}
.section.jade h2,.section.jade h3{color:#fff}
.section.jade .muted{color:rgba(255,255,255,.75)}
.section-head{max-width:62ch;margin-bottom:clamp(24px,3vw,40px)}
.section-head p{margin:10px 0 0;font-size:18px;color:var(--muted)}
.section.jade .section-head p{color:rgba(255,255,255,.8)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.lead{font-size:19px;line-height:1.5}

/* occasion cards */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:960px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cards,.cards-3,.cards-2{grid-template-columns:1fr}
  .cards.occasions .card{flex-direction:row;align-items:stretch}
  .cards.occasions .card img{width:38%;aspect-ratio:auto;height:auto;min-height:150px}
  .cards.occasions .card-body{padding:14px 14px 14px 16px}
  .cards.occasions .card-body h3{font-size:18px}
  .cards.occasions .card-body p{font-size:14px}
  .cards.occasions .card-price{font-size:15px;padding-top:8px}
}
.card{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:box-shadow .2s var(--ease)}
a.card:hover{box-shadow:var(--sh-md)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-body h3{font-size:21px}
.card-body p{margin:0;font-size:15px;color:var(--muted);line-height:1.45}
.card-price{margin-top:auto;padding-top:10px;font-weight:700;color:var(--jade);font-size:16px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.card-price .arrow{width:34px;height:34px;border-radius:50%;background:var(--mustard);color:var(--jade);display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}

/* steps (a real sequence) */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:step}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border-radius:var(--r-lg);padding:26px 24px 28px;box-shadow:var(--sh-sm);position:relative}
.step::before{counter-increment:step;content:counter(step);display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--mustard);color:var(--jade);font-weight:700;font-size:17px;margin-bottom:16px}
.step h3{font-size:20px;margin-bottom:8px}
.step p{margin:0;color:var(--muted);font-size:15.5px}
.section.jade .step{background:rgba(255,255,255,.06);box-shadow:none}
.section.jade .step h3{color:#fff}
.section.jade .step p{color:rgba(255,255,255,.8)}

/* split (photo + copy) */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.split.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split.rev .split-media{order:2}
@media (max-width:860px){.split,.split.rev{grid-template-columns:1fr}.split.rev .split-media{order:0}}
.split-copy h2{margin-bottom:14px}
.split-copy p{font-size:17px;color:var(--muted)}
.split-copy p:last-child{margin-bottom:0}
.check{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.check li{position:relative;padding-left:32px;font-size:16.5px}
.check li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--mustard)}
.check li::after{content:"";position:absolute;left:7px;top:7px;width:5px;height:9px;border:solid var(--jade);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}

/* CTA band */
.band{background:var(--mustard);color:var(--jade);position:relative;overflow:hidden}
.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px);position:relative;z-index:2}
.band.has-mascot .wrap{padding-right:clamp(200px,22vw,300px)}
@media (max-width:860px){.band.has-mascot .wrap{padding-right:var(--gutter)}}
.band h2{color:var(--jade);font-size:clamp(28px,3.6vw,42px);margin-bottom:6px}
.band p{margin:0;font-size:17px;color:rgba(23,72,45,.85)}
.band-mascot{position:absolute;right:clamp(-30px,2vw,40px);bottom:-18px;width:clamp(120px,16vw,200px);z-index:1;pointer-events:none}
@media (max-width:860px){.band-mascot{display:none}}

/* menu rows */
.menu-group{background:#fff;border-radius:var(--r-lg);padding:8px 24px;box-shadow:var(--sh-sm);margin-bottom:20px}
.menu-group h3{padding:18px 0 10px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--guava)}
.row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:14px 0;border-top:1.5px solid var(--iso-warm)}
.row:first-of-type{border-top:0}
.row-name{font-weight:700;color:var(--jade);font-size:17px}
.row-note{font-size:14px;color:var(--muted);margin-top:2px}
.row-price{font-weight:700;color:var(--jade);white-space:nowrap;font-size:17px}
.row-thumb{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:0 0 auto;margin-right:4px}
.row.with-thumb{align-items:center}
.row-main{flex:1}

/* forms */
.form{background:#fff;border-radius:var(--r-lg);padding:clamp(22px,3vw,36px);box-shadow:var(--sh-md)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field>label,.field>legend{font:700 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--jade)}
.field .help{font-size:13px;color:var(--muted);margin:0}
.field input,.field select,.field textarea{font:400 16px/1.3 var(--body);color:var(--ink);background:#fff;border:1.5px solid var(--border);border-radius:10px;padding:13px 14px;width:100%;appearance:none;-webkit-appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2317482D' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--jade);box-shadow:0 0 0 3px rgba(23,72,45,.15)}
.field textarea{min-height:110px;resize:vertical}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media (max-width:600px){.field-2,.field-3{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.chip span{display:inline-block;padding:11px 16px;border-radius:var(--pill);border:1.5px solid var(--border);font:500 15px/1 var(--body);color:var(--jade);background:#fff;cursor:pointer}
.chip input:checked+span{background:var(--jade);color:#fff;border-color:var(--jade)}
.chip input:focus-visible+span{outline:3px solid var(--mustard);outline-offset:2px}
.form-ok{display:none;background:var(--jade);color:#fff;border-radius:var(--r-md);padding:20px 22px;font-size:17px}
.form-ok strong{display:block;font-size:20px;margin-bottom:4px}
.form-err{display:none;color:var(--guava-deep);font-weight:500;margin:10px 0 0}

/* footer */
.footer{background:var(--jade);color:rgba(255,255,255,.85);padding:52px 0 36px;font-size:15px}
.footer .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:36px}
@media (max-width:760px){.footer .wrap{grid-template-columns:1fr}}
.footer img{width:150px;margin-bottom:14px}
.footer a{color:#fff;text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer h4{color:var(--mustard);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.fine{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.18);padding-top:22px;margin-top:8px;font-size:13.5px;color:rgba(255,255,255,.65);line-height:1.6}
.fine p{margin:0 0 4px}

/* misc blocks */
.pricebox{background:#fff;border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--sh-sm)}
.pricebox .big{font-size:clamp(34px,4vw,46px);font-weight:700;color:var(--jade);line-height:1;letter-spacing:-.02em}
.pricebox .per{font-size:15px;color:var(--muted);margin-top:4px}
.note{background:var(--iso-warm);border-radius:var(--r-md);padding:16px 18px;font-size:15px;color:var(--muted)}
.note strong{color:var(--jade)}
.sticker{width:88px;height:88px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:700 13px/1.1 var(--body);text-align:center;letter-spacing:.04em;text-transform:uppercase;background:#fff;color:var(--jade);border:9px solid var(--mustard);box-shadow:var(--sh-sm)}
.sticker.red{border-color:var(--guava)}
.sticker.green{border-color:var(--jade)}
.sticker.solid{background:var(--jade);color:#fff;border-color:var(--jade)}
.boxes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:960px){.boxes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.boxes{grid-template-columns:1fr}}
.box{background:#fff;border-radius:var(--r-lg);padding:24px 22px 22px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:10px}
.box h3{font-size:20px}
.box p{margin:0;font-size:15px;color:var(--muted);line-height:1.45}
.box .price{margin-top:auto;padding-top:8px;font-size:24px;font-weight:700;color:var(--jade)}
.box .price small{font-size:14px;color:var(--muted);font-weight:500;margin-left:4px}
.faq{display:grid;gap:12px;max-width:760px}
.faq details{background:#fff;border-radius:var(--r-md);box-shadow:var(--sh-sm)}
.faq summary{cursor:pointer;list-style:none;padding:18px 48px 18px 22px;font-weight:700;color:var(--jade);font-size:17px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:14px;font-size:24px;color:var(--mustard);font-weight:700;transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details div{padding:0 22px 20px;color:var(--muted);font-size:16px}
.faq details div p{margin:0 0 .6em}
.faq details div p:last-child{margin:0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.two-col>.sticky-col{position:sticky;top:90px}
@media (max-width:760px){.two-col{grid-template-columns:1fr}}
.bento{width:100%;height:auto;display:block}

/* ---------- Mehmooni builder ---------- */
.builder{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-md);padding:clamp(20px,3vw,36px)}
.b-top{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"sizes price" "inc price";gap:24px 28px;align-items:start}
.b-sizes{grid-area:sizes}.b-price{grid-area:price;align-self:stretch}.b-included{grid-area:inc}
.b-included h3{font-size:19px;margin-bottom:4px}
@media (max-width:860px){.b-top{grid-template-columns:1fr;grid-template-areas:"sizes" "price" "inc"}.pricebox.sticky{position:static}}
.b-label{font:700 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--jade);margin:0 0 10px}
.sizes{display:flex;flex-wrap:wrap;gap:8px}
.km-size{font:700 15px/1 var(--body);color:var(--jade);background:#fff;border:1.5px solid var(--border);border-radius:var(--pill);padding:11px 16px;cursor:pointer}
.km-size[aria-pressed=true]{background:var(--jade);color:#fff;border-color:var(--jade)}
.km-range{width:100%;accent-color:var(--jade);margin:18px 0 6px;height:28px}
.km-feeds{display:inline-block;border-radius:var(--pill);padding:9px 14px;font-size:14px;font-weight:700;margin-top:8px}
.km-ok{background:#E6EFE8;color:var(--jade)}
.km-warn{background:#F6E0DB;color:var(--guava-deep)}
.pricebox.sticky{position:sticky;top:90px}
.pricebox .line{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-top:8px}
.pricebox .btn{width:100%;margin-top:16px}
.pricebox .floor{font-size:13px;color:var(--muted);margin-top:10px}
.km-included{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.km-chip{display:inline-block;background:var(--cream);border-radius:var(--pill);padding:8px 13px;font-size:14px;font-weight:500;color:var(--jade)}
.b-section{border-top:1.5px solid var(--iso-warm);margin-top:26px;padding-top:22px}
.b-section h3{font-size:19px;margin-bottom:4px}
.b-section .muted{font-size:14.5px;margin:0}
details.km-adjust{margin-top:16px}
details.km-adjust>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:10px;font:700 15px/1 var(--body);color:var(--jade);background:var(--cream);border-radius:var(--pill);padding:12px 18px}
details.km-adjust>summary::-webkit-details-marker{display:none}
details.km-adjust>summary::after{content:"+";font-size:18px;color:var(--mustard)}
details.km-adjust[open]>summary::after{content:"–"}
.km-grp{font:700 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--guava);margin:22px 0 4px}
.km-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-top:1.5px solid var(--iso-warm)}
.km-row-name{font-weight:700;color:var(--jade);font-size:15.5px}
.km-row-note{font-size:13px;color:var(--muted);margin-top:2px}
.km-step{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.km-step button{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--jade);background:#fff;color:var(--jade);font:700 18px/1 var(--body);cursor:pointer}
.km-step button:hover{background:var(--cream)}
.km-qty{min-width:30px;text-align:center;font-weight:700;color:var(--jade)}
.km-orderline{background:var(--cream);border-radius:var(--r-md);padding:14px 16px;font-size:14px;line-height:1.55;color:var(--ink);margin:10px 0 12px}
.km-veg{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.km-veg input{width:92px;font:400 16px var(--body);padding:11px 12px;border:1.5px solid var(--border);border-radius:10px}
.km-vegnote{font-size:14px;color:var(--muted);margin:8px 0 0}
.km-form{margin-top:18px}
.km-total-line{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;color:var(--jade);font-size:18px;margin:4px 0 12px}

/* ---------- v3: flows ---------- */
.hero.compact .wrap{padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(28px,4vw,52px)}
.hero.compact h1{font-size:clamp(32px,4.4vw,58px);margin:16px 0 16px}
.hero.compact .hero-sub{margin-bottom:0}
@media (max-width:860px){
  .hero .photo-card{order:2;margin-top:8px}
  .hero .photo-card img{aspect-ratio:16/9}
  .hero.compact .photo-card{display:none}
}
.flow{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-md);padding:clamp(18px,3vw,36px);margin-top:22px}
.flow-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:0 32px;align-items:start}
.flow-main{grid-column:1}
.flow-side{grid-column:2;grid-row:1/span 20;position:sticky;top:88px}
@media (max-width:900px){.flow-grid{grid-template-columns:1fr}.flow-side{grid-column:1;grid-row:auto;position:static}}
.fstep{padding:22px 0 26px;border-top:1.5px solid var(--iso-warm)}
.fstep:first-child{border-top:0;padding-top:4px}
.fstep-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.fstep-num{width:32px;height:32px;border-radius:50%;background:var(--mustard);color:var(--jade);font:700 15px/1 var(--body);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.fstep-head h3{font-size:20px}
.fstep .hint{font-size:14.5px;color:var(--muted);margin:0 0 12px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:600px){.opts{grid-template-columns:1fr}}
.opt{position:relative;display:block;border:1.5px solid var(--border);border-radius:var(--r-md);padding:16px 16px 14px;cursor:pointer;background:#fff}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.opt input:checked~.opt-body{color:var(--ink)}
.opt:has(input:checked){border-color:var(--jade);box-shadow:0 0 0 2px var(--jade) inset;background:#fff}
.opt:has(input:disabled){opacity:.5;cursor:not-allowed}
.opt input:focus-visible~.opt-body{outline:3px solid var(--mustard);outline-offset:6px;border-radius:6px}
.opt-body{position:relative;display:block;pointer-events:none}
.opt-title{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:700;color:var(--jade);font-size:17px}
.opt-title .per{font-size:14px;color:var(--muted);font-weight:500;white-space:nowrap}
.opt-desc{font-size:14px;color:var(--muted);margin:6px 0 0;line-height:1.45}
.opt-note{font-size:13px;color:var(--guava-deep);margin:8px 0 0;display:none}
.opt.disabled .opt-note{display:block}
.diet{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px}
@media (max-width:600px){.diet{grid-template-columns:1fr}}
.diet .field{margin:0}
.diet input{max-width:140px}
.summary{list-style:none;padding:0;margin:0}
.summary li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--iso-warm);font-size:15px}
.summary li:first-child{border-top:0}
.summary li span:last-child{font-weight:700;color:var(--jade);white-space:nowrap}
.summary li.sub{font-weight:700;color:var(--jade);border-top:1.5px solid var(--border);margin-top:4px;padding-top:12px}
.summary li.tot{font-size:18px;font-weight:700;color:var(--jade);border-top:1.5px solid var(--jade)}
.summary li.quiet{font-size:13.5px;color:var(--muted);padding:4px 0 8px;border-top:0}
.summary li.quiet span:last-child{font-weight:500;color:var(--muted)}
.pricebox .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;color:var(--muted);margin-top:6px}
.pricebox .meta b{color:var(--jade)}
.pricebox .km-feeds{margin-top:10px}
.pricebox .side-cta{margin-top:14px;width:100%}
.pricebox .side-note{font-size:13px;color:var(--muted);margin:10px 0 0;line-height:1.45}
.qty-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1.5px solid var(--iso-warm)}
.qty-row:first-child{border-top:0}
.qty-row .sticker{width:60px;height:60px;border-width:7px;font-size:10px;flex:0 0 auto}
.qty-main{flex:1;min-width:0}
.qty-name{font-weight:700;color:var(--jade);font-size:16.5px;display:flex;justify-content:space-between;gap:10px}
.qty-name .p{white-space:nowrap}
.qty-desc{font-size:14px;color:var(--muted);margin-top:2px;line-height:1.4}
.qty-ctl{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.qty-ctl button{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--jade);background:#fff;color:var(--jade);font:700 18px/1 var(--body);cursor:pointer}
.qty-ctl input{width:54px;text-align:center;font:700 16px var(--body);color:var(--jade);border:1.5px solid var(--border);border-radius:10px;padding:8px 4px;-moz-appearance:textfield}
.qty-ctl input::-webkit-outer-spin-button,.qty-ctl input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
@media (max-width:600px){.qty-row{flex-wrap:wrap}.qty-row .sticker{display:none}.qty-ctl{margin-left:auto}}
.fill{display:flex;flex-wrap:wrap;align-items:end;gap:12px;background:var(--cream);border-radius:var(--r-md);padding:14px 16px;margin-bottom:16px}
.fill .field{margin:0;flex:0 0 150px}
.fill .field input{padding:11px 12px}
.fill p{margin:0;font-size:13.5px;color:var(--muted);flex:1 1 220px}
.minbar{display:flex;align-items:center;gap:12px;font-size:14px;margin-top:12px;color:var(--muted)}
.minbar .bar{flex:1;height:8px;border-radius:4px;background:var(--iso-warm);overflow:hidden}
.minbar .bar i{display:block;height:100%;background:var(--mustard);width:0;transition:width .2s var(--ease)}
.minbar.ok .bar i{background:var(--jade)}
.minbar.ok b{color:var(--jade)}
.tiny{font-size:13.5px;color:var(--muted)}
.callout{background:var(--cream);border-radius:var(--r-md);padding:14px 16px;font-size:14.5px;color:var(--muted);margin-top:12px;display:none}
.callout.show{display:block}
.callout strong{color:var(--jade)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
@media (max-width:600px){.checks{grid-template-columns:1fr}}
.checks label{display:flex;align-items:center;gap:10px;font-size:15.5px;cursor:pointer}
.checks input{width:20px;height:20px;accent-color:var(--jade)}
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.offers{grid-template-columns:1fr}}
.offer{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);display:flex;flex-direction:column}
.offer img{width:100%;aspect-ratio:4/3;object-fit:cover}
.offer-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.offer-body h3{font-size:22px}
.offer-body p{margin:0;font-size:15px;color:var(--muted);line-height:1.45}
.offer-ex{margin-top:8px;background:var(--cream);border-radius:var(--r-md);padding:12px 14px;font-size:14px;color:var(--muted)}
.offer-ex b{display:block;color:var(--jade);font-size:17px;margin-bottom:2px}
.offer .btn{margin-top:auto;align-self:flex-start}
.offer-body .btn{margin-top:14px}
.bento-strip{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,48px);align-items:center;background:#fff;border-radius:var(--r-lg);padding:clamp(18px,3vw,32px);box-shadow:var(--sh-sm);margin-top:22px}
@media (max-width:860px){.bento-strip{grid-template-columns:1fr}}
.bento-strip h3{font-size:22px;margin-bottom:8px}
.bento-strip .check{margin-top:10px}
.btn:disabled,.btn[disabled]{background:var(--iso);color:var(--muted);cursor:not-allowed;box-shadow:none}
.btn:disabled:hover{background:var(--iso)}
.check.plus li::before{background:#fff;border:1.5px solid var(--jade);box-sizing:border-box}
.check.plus li::after{content:"+";border:0;transform:none;left:5px;top:-1px;width:auto;height:auto;font:700 15px/1.6 var(--body);color:var(--jade)}

/* mobile: keep the price in view while building */
.mbar{display:none}
@media (max-width:900px){
  .mbar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:30;background:var(--jade);color:#fff;border-radius:var(--pill);padding:10px 10px 10px 20px;align-items:center;justify-content:space-between;gap:12px;box-shadow:var(--sh-lg)}
  .mbar b{font-size:20px}
  .mbar span{font-size:13px;color:rgba(255,255,255,.8)}
  .mbar .btn{padding:11px 16px;font-size:14px}
  body.has-mbar{padding-bottom:84px}
  .mbar.hide{display:none}
}

/* ---------- QA pass ---------- */
[id]{scroll-margin-top:96px}
@media (max-width:900px){
  body.has-mbar .flow-side{display:none}
  .fstep .km-feeds{margin-top:12px}
}
.opt-title{display:block}
.opt-title .per{display:block;margin-top:4px;white-space:normal;font-weight:700;color:var(--jade)}
.opt-title .per::before{content:"";}
@media (max-width:600px){
  .qty-row{flex-wrap:wrap;gap:8px 14px}
  .qty-main{flex:1 0 100%}
  .qty-ctl{margin-left:auto}
}
.mbar{transition:transform .25s var(--ease),opacity .25s;transform:translateY(0)}
.mbar.off{transform:translateY(120%);opacity:0;pointer-events:none}
@media (min-width:901px){.fstep #km-feedsbox{display:none}}

/* ---------- v4 ---------- */
.textlink{font:700 15px/1 var(--body);color:var(--jade);text-decoration:underline;text-underline-offset:4px;padding:14px 4px}
.textlink.on-jade{color:#fff}
/* service cards (home) */
.offer .cue{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--muted);margin-top:2px}
.offer .cue span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mustard);margin-right:7px;vertical-align:1px}
.offer-ex{margin-top:10px}
.offer-ex b{font-size:16px}
.offer-sub{font-size:16px;color:var(--jade);font-weight:500;margin:0}

/* boxed meal groups */
.group{margin-top:10px}
.group+.group{margin-top:22px}
.group-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0 4px;border-bottom:1.5px solid var(--jade)}
.group-head h4{font-size:17px;color:var(--jade)}
.group-head .from{font-size:13.5px;color:var(--muted);text-align:right}
.group-blurb{font-size:14px;color:var(--muted);margin:6px 0 4px}
.qty-name .p{font-weight:700}
.diet-tag{display:inline-block;font:700 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:var(--pill);background:#E6EFE8;color:var(--jade);margin-left:8px;vertical-align:2px}
.qty-row .sticker{font-size:9px;line-height:1.15;padding:4px}
.meal-target{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px;font-size:15px}
.meal-target b{color:var(--jade)}
.meal-target .warn{color:var(--guava-deep);font-weight:700}
.mix{background:var(--cream);border-radius:var(--r-md);padding:14px 16px;margin:14px 0 6px}
.mix .row2{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.mix .field{margin:0;flex:0 0 150px}
.mix .field input{padding:11px 12px}
.mix p{margin:8px 0 0;font-size:13.5px;color:var(--muted)}
.field-err{display:none;color:var(--guava-deep);font-size:14px;font-weight:500;margin:6px 0 0}
.field-err.show{display:block}
.field.invalid input,.field.invalid select{border-color:var(--guava);box-shadow:0 0 0 3px rgba(205,86,71,.15)}
.notice{display:none;background:#F6E0DB;color:var(--guava-deep);border-radius:var(--r-md);padding:12px 16px;font-size:14.5px;margin-top:12px}
.notice.show{display:block}
.notice a{color:var(--guava-deep)}
.kept{display:none;background:var(--cream);border-radius:var(--r-md);padding:12px 16px;font-size:14px;color:var(--muted);margin-top:12px;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.kept.show{display:flex}
.kept .btn{padding:9px 14px;font-size:13px}
.summary li.adj span:first-child{color:var(--muted)}
.summary li small{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:2px}
.summary li.quote span:last-child{color:var(--muted);font-weight:500}
.checkline{display:flex;align-items:flex-start;gap:10px;font-size:15px;margin-top:14px;cursor:pointer}
.checkline input{width:20px;height:20px;accent-color:var(--jade);margin-top:2px;flex:0 0 auto}
.recur-note{margin-top:10px;display:none}
.recur-note.show{display:block}
.copyrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.tiny-muted{font-size:13px;color:var(--muted)}
.pricebox .big{font-size:clamp(30px,3.4vw,40px)}
.opt-title .per{font-weight:500;color:var(--muted);font-size:14px}
.opt-title .per b{color:var(--jade);font-weight:700}
.two-states{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){.two-states{grid-template-columns:1fr}}
.two-states figure{margin:0}
.two-states figcaption{font-size:14px;color:var(--muted);margin-top:6px;text-align:center}
.two-states figcaption b{color:var(--jade)}
.inc-list{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.inc-list li{display:grid;grid-template-columns:120px 1fr;gap:10px;font-size:15px}
.inc-list li b{color:var(--jade)}
@media (max-width:520px){.inc-list li{grid-template-columns:1fr;gap:2px}}
.topic-fields{display:none}
.topic-fields.show{display:block}
.events-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
@media (max-width:760px){.events-cards{grid-template-columns:1fr}}
.events-cards .card-body{padding:20px 22px 22px}
.events-cards h3{font-size:19px;margin-bottom:8px}
.events-cards p{font-size:15px;color:var(--muted);margin:0;line-height:1.5}
.drivers{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.drivers span{display:inline-block;padding:8px 12px;border-radius:var(--pill);background:var(--cream);font-size:13.5px;color:var(--jade);font-weight:500}
.proof{font-size:15px;color:var(--muted);margin:0}
.hero-note strong{display:block;color:var(--mustard);font-size:18px;margin-bottom:4px}
.hero.compact .hero-actions{margin-top:22px}
.hero-note a{color:#fff}
.menu-group .row-note .inc{display:block;margin-top:2px}
.menu-group .row-name .diet-tag{margin-left:6px}
.menu-intro{font-size:15px;color:var(--muted);margin:0 0 14px}
.field>label.checkline{font:400 15px/1.4 var(--body);letter-spacing:0;text-transform:none;color:var(--ink);margin-top:8px}
.fstep:first-of-type{border-top:0;padding-top:4px}
.offer-body .btn{margin-top:auto}
.offer-body .offer-ex{margin-bottom:14px}
.field input[type=checkbox]{appearance:auto;-webkit-appearance:checkbox;width:20px;height:20px;padding:0;border-radius:4px;box-shadow:none;accent-color:var(--jade)}
.mbar>div span{white-space:nowrap}
.fstep-head .edit-link{margin-left:auto;padding:8px 4px;font-size:15px;background:none;border:0;cursor:pointer}
.summary li span:first-child{min-width:0}
.summary li small{white-space:normal}
.jumps{display:flex;flex-wrap:wrap;gap:8px;padding:18px 0 0}
.jumps a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:var(--pill);border:1.5px solid var(--jade);font:700 14px/1 var(--body);color:var(--jade);text-decoration:none;background:#fff}
.row-sub{font-size:14px;color:var(--jade);font-weight:500;margin-top:1px}
.builder-intro{margin:22px 0 0;color:var(--muted);font-size:17px}
.qty-name .sub{display:block;font-size:13.5px;color:var(--jade);font-weight:500}
@media (max-width:900px){
  body.has-mbar .flow-side.inline{display:block;position:static;margin:0 0 18px}
  .flow-side.inline .side-cta,.flow-side.inline .side-note{display:none}
  .flow-side.inline .pricebox{padding:16px 18px;box-shadow:none;background:var(--cream)}
}

/* ---------- Desktop header: text links, a thin underline marks the current page ---------- */
.nav-links{gap:2px}
.nav-links a{position:relative;padding:10px 12px;border-radius:0;background:none;font:500 15px/1 var(--body);color:var(--jade);opacity:.78}
.nav-links a:hover{background:none;opacity:1}
.nav-links a[aria-current=page]{background:none;color:var(--jade);opacity:1;font-weight:700}
.nav-links a[aria-current=page]::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;background:var(--mustard)}
.nav-cta{padding:9px 16px;font-size:13.5px;box-shadow:none}
/* "Edit" — guava caps */
.fstep-head .edit-link{color:var(--guava);text-decoration:none;text-transform:uppercase;letter-spacing:.1em;font:700 13px/1 var(--body);padding:12px 4px}
.fstep-head .edit-link:hover{text-decoration:underline;text-underline-offset:4px}

/* Customization card */
details.km-adjust>summary{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;box-sizing:border-box;border-radius:16px;padding:14px 18px;background:var(--cream);border:1.5px dashed rgba(23,72,45,.25);font:400 15px/1.35 var(--body)}
details.km-adjust>summary::after{content:none}
details.km-adjust>summary:hover{border-color:var(--jade)}
.ka-text b{display:block;font:700 16px/1.2 var(--body);color:var(--jade)}
.ka-text span{display:block;font-size:14px;color:var(--muted);margin-top:3px}
.ka-cta::before{content:"Edit";text-transform:uppercase;letter-spacing:.1em;font:700 13px/1 var(--body);color:var(--guava);white-space:nowrap}
details.km-adjust[open]>summary .ka-cta::before{content:"Done"}
details.km-adjust[open]>summary{border-style:solid;border-color:var(--jade)}
details.km-adjust[open]>summary::after{content:none}

/* ---------- Header (v7 final)
   Desktop: one sticky row with links + CTA (unchanged).
   Phones: a slim sticky row (wordmark + Menu); under it the service selector, which scrolls away with the page. ---------- */
:root{--bar-h:56px}
.nav-logo img.logo-word{height:26px;width:auto}
.nav-burger,.mobile-menu,.nav-services{display:none}
@media (max-width:960px){
  .nav{position:sticky;top:0;z-index:30}
  .nav .wrap.nav-top{height:var(--bar-h);gap:12px}
  .nav-logo img.logo-word{height:29px}
  .nav-desk,.nav-cta{display:none}
  .nav-burger{display:inline-flex;align-items:center;gap:10px;margin-left:auto;margin-right:-10px;min-height:44px;padding:0 10px;border:0;background:none;cursor:pointer;font:600 15px/1 var(--body);color:var(--jade)}
  .nav-burger .bars{display:grid;gap:4px;width:20px}
  .nav-burger .bars i{display:block;height:2px;border-radius:2px;background:var(--jade);transition:transform .2s var(--ease),opacity .2s}
  .nav-burger[aria-expanded=true] .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-burger[aria-expanded=true] .bars i:nth-child(2){opacity:0}
  .nav-burger[aria-expanded=true] .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .mobile-menu{display:block;position:fixed;left:0;right:0;top:var(--bar-h);bottom:0;z-index:40;background:var(--cream);overflow:auto;padding:8px var(--gutter) calc(24px + env(safe-area-inset-bottom));border-top:1px solid var(--border)}
  .mobile-menu[hidden]{display:none}
  .mobile-menu ul{list-style:none;margin:0;padding:0}
  .mobile-menu li+li{border-top:1px solid var(--border)}
  .mobile-menu a{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:56px;padding:10px 2px;text-decoration:none;color:var(--jade)}
  .mobile-menu a span{font:700 19px/1.2 var(--body)}
  .mobile-menu a small{font-size:14px;color:var(--muted)}
  .mobile-menu a[aria-current=page] span{color:var(--guava)}
  .mobile-menu-foot{display:grid;gap:10px;margin:18px 0 0;padding-top:16px;border-top:1.5px solid var(--border)}
  .mobile-menu-foot a{min-height:0;padding:0;font:500 16px/1.3 var(--body)}
  body.menu-open{overflow:hidden}
  body.menu-open .mbar{visibility:hidden}

  /* Service selector: content-sized pills (natural text width + padding), spare width shared out; one weight for all states */
  .nav-services{display:block;background:var(--cream);border-bottom:1px solid var(--border);padding:6px 12px}
  .svc-tray{display:flex;gap:2px;padding:3px;background:var(--iso-warm);border-radius:12px}
  .svc-tray a{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 8px;border-radius:9px;
    font-family:var(--body);font-weight:500;font-size:14px;line-height:1;letter-spacing:normal;color:var(--jade);text-decoration:none;white-space:nowrap}
  .svc-tray a[aria-current=page]{background:var(--jade);color:var(--cream)}
  .nav-burger:focus-visible,.mobile-menu a:focus-visible,.svc-tray a:focus-visible,.nav-logo:focus-visible{outline:3px solid var(--mustard);outline-offset:2px}
  [id]{scroll-margin-top:calc(var(--bar-h) + 16px)}
}
@media (max-width:359px){
  .nav-services{padding:6px 8px}
  .svc-tray a{padding:0 5px;font-size:13.5px}
}
/* Mobile price bar: lifted above the home indicator (safe area outside the pill), never padded taller */
@media (max-width:900px){
  .mbar{bottom:calc(12px + env(safe-area-inset-bottom));padding:10px 10px 10px 20px;min-height:0;height:auto;align-items:center}
  body.has-mbar{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .mbar>div{white-space:nowrap;min-width:0}
}
@media (max-width:359px){
  .mbar{left:8px;right:8px;padding-left:16px;gap:8px}
  .mbar b{font-size:18px}
  .mbar span{font-size:12px}
  .mbar .btn{padding:10px 13px;font-size:13.5px}
}

/* ---------- v8: desktop type scale, header and imagery ----------
   Everything below the first media query is scoped to desktop (min-width:961px); the phone header, pills and
   mobile type sizes from v7 are untouched. */

/* Hero photos from the v8 derivative set keep their own aspect ratio (3:2 photos, the 4:3 tray illustration). */
.photo-card.native{margin:0}
.photo-card.native img{aspect-ratio:auto;height:auto}
.photo-card.native .photo-cap{font-size:13px;line-height:1.4;color:var(--jade);background:var(--cream);padding:9px 14px 10px;margin:0}
.hero .photo-card.native{margin-right:12px;margin-bottom:12px}
/* Home service cards: one gentler 3:2 frame for all three (4:3 clipped the platter handles and the tray outline). */
.offer picture{display:block}
.offer img{aspect-ratio:3/2}
.offer .img-note{margin:0;font-size:12.5px;line-height:1.35;color:var(--muted)}
/* Special Events: one supporting image beside the optional services, before the inquiry fields. */
.support-fig{margin:18px 0 0;max-width:340px}
.support-fig img{width:100%;height:auto;border-radius:var(--r-md);display:block}
.support-fig figcaption{font-size:13.5px;line-height:1.4;color:var(--muted);margin-top:8px}
@media (max-width:760px){.support-fig{max-width:none;margin-top:14px}}

@media (min-width:961px){
  /* Header: one sticky 72px row aligned to the container — logo · services · Menu & Prices · Contact · CTA */
  .nav .wrap{gap:clamp(12px,1.6vw,22px)}
  .nav-links{gap:2px;overflow:visible}
  .nav-links a{padding:10px 11px;font:500 15px/1 var(--body);opacity:.78}
  .nav-links a[aria-current=page]{font-weight:500;opacity:1}
  .nav-links a[aria-current=page]::after{left:11px;right:11px}
  .nav-links a:focus-visible{outline:3px solid var(--mustard);outline-offset:-2px;border-radius:6px;opacity:1}
  .nav-cta{padding:9px 15px;font-size:13.5px}
  .builder-intro{margin-top:0}

  /* Hero composition: a real column gap, calmer headline, 18px description, measured gaps between the elements. */
  .hero .wrap{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(48px,4.7vw,64px);padding-top:clamp(44px,5vw,68px);padding-bottom:clamp(48px,5.4vw,76px)}
  .hero h1,.hero.compact h1,.hero.solo h1{line-height:1.08;margin:22px 0 26px;max-width:none}
  .hero-sub{font-size:18px;line-height:1.6;margin:0 0 30px;max-width:52ch}
  .hero.compact .hero-sub{margin-bottom:0}
  .hero.compact .hero-actions{margin-top:30px}
  .hero-note{margin-top:22px;font-size:14.5px;max-width:52ch}
  .hero-note strong{font-size:17px}
  /* Home: 54–56px at normal desktop widths, about two lines. */
  .hero.hero-home h1{font-size:clamp(46px,4.2vw,56px)}
  /* Services: 46–48px, no more than three lines in the copy column. */
  .hero.hero-service .wrap{padding-top:clamp(44px,5vw,64px);padding-bottom:clamp(48px,5.4vw,72px)}
  .hero.hero-service h1{font-size:clamp(40px,3.6vw,48px)}
  /* Menu & Prices and Contact: quieter, text-led introductions so the lists and the form arrive sooner. */
  .hero.hero-util .wrap{padding-top:clamp(36px,4vw,52px);padding-bottom:clamp(36px,4vw,52px)}
  .hero.hero-util h1{font-size:clamp(36px,3.2vw,44px);margin-bottom:22px}
  .hero.hero-util .hero-sub{max-width:60ch}
  .hero.hero-util .hero-actions{margin-top:26px}
  .hero.hero-util .hero-note{margin-top:18px}
}
@media (min-width:961px) and (max-width:1024px){
  /* Fit the five full labels and the CTA at 961–1024px: tighter gaps and padding before anything else gives. */
  .nav .wrap{gap:10px}
  .nav-links a{padding:10px 8px}
  .nav-links a[aria-current=page]::after{left:8px;right:8px}
  .nav-cta{padding:9px 12px}
}

/* ---------- v8b: brand ornaments that read against their background ----------
   Hero: one ornament (mustard or coral — never a jade-leaved one, which vanishes on the jade band), never cropped,
   hung on the hero's bottom edge like a medallion on a border: half on jade, half on the cream page, centred. 72px on
   desktop, 56px on phones and tablets. */
.hero{overflow:visible}
.hero-orn{display:block;position:absolute;z-index:3;pointer-events:none;left:50%;bottom:0;width:72px;height:72px;transform:translate(-50%,50%)}
@media (max-width:960px){.hero-orn{width:56px;height:56px}}
/* Phones (owner request, 13 Oct 2026): the service pages show their hero picture too — after the copy and the button,
   full width at the picture's own ratio, caption beneath — instead of hiding it below 860px as v7 did. */
@media (max-width:860px){
  .hero.compact .photo-card{display:block}
  .hero .photo-card.native{order:2;margin-top:24px}
  .hero.compact .wrap{padding-bottom:44px}
}
/* Accent strip (design-system component 08): six ornament tiles above the footer, each ornament on the tile colour it
   was designed for. Six tiles on phones, the row twice on desktop so the band stays 80–120px tall. */
.accent-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:100%;overflow:hidden;border-top:1.5px solid var(--jade)}
.accent-strip .tile{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;min-width:0}
.accent-strip .tile.white{background:#fff}
.accent-strip .tile.guava{background:var(--guava)}
.accent-strip .tile.mustard{background:var(--mustard)}
.accent-strip .tile img{width:58%;height:58%;object-fit:contain;display:block}
.accent-strip .strip-repeat{display:none}
@media (min-width:961px){
  .accent-strip{grid-template-columns:repeat(12,minmax(0,1fr))}
  .accent-strip .strip-repeat{display:contents}
}

/* Phones (owner request, 13 Oct 2026): the hero button is a step smaller so the secondary link — Menu & Prices on Home,
   How pricing works on Special Events — sits beside it instead of dropping to a second row. 16px / 48px tall from 390px,
   15px / 45px tall on 360–389px phones; both stay above the 44px tap target. Below 360px the link wraps as before.
   Desktop keeps the 17px button. */
@media (max-width:860px){
  .hero-actions{column-gap:10px}
  .hero-actions .btn-lg{font-size:16px;padding:15px 21px}
}
@media (max-width:389px){
  .hero-actions{column-gap:8px}
  .hero-actions .btn-lg{font-size:15px;padding:14px 17px}
  .hero-actions .textlink{padding-left:2px;padding-right:2px}
}

/* ---------- v8c: photo rows (15 Oct 2026) — one photo moment per page: three 3:2 photographs, factual captions ---------- */
.photo-row .section-head{margin-bottom:clamp(20px,2.6vw,30px)}
.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.photo-grid figure{margin:0;min-width:0}
.photo-grid picture{display:block}
.photo-grid img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-md);display:block}
.photo-grid figcaption{font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.8);margin-top:8px}
@media (max-width:860px){
  .photo-grid{grid-template-columns:1fr 1fr;gap:12px}
  .photo-grid figure:first-child{grid-column:1/-1}
  .photo-grid figcaption{font-size:13px}
}

/* ---------- v8d: Contact portrait (15 Oct 2026) — a small 4:5 portrait of Chef Reza beside the intro ----------
   Desktop and tablet: the copy keeps the width, the portrait takes a fixed column at the right (240px / 220px) with the
   usual mustard stamp. Phones: 200px wide under the copy, left-aligned, so the form still arrives quickly. */
.hero.hero-portrait .wrap{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.hero.hero-portrait .photo-card.native{width:220px;justify-self:end}
.hero.hero-portrait .photo-card.native img{aspect-ratio:4/5;object-fit:cover}
.hero.hero-portrait .hero-note{max-width:none}
@media (min-width:961px){
  .hero.hero-portrait .wrap{grid-template-columns:minmax(0,1fr) auto}
  .hero.hero-portrait .photo-card.native{width:240px}
}
@media (max-width:860px){
  .hero.hero-portrait .wrap{grid-template-columns:1fr}
  .hero.hero-portrait .photo-card.native{width:200px;justify-self:start;margin-top:22px;order:2}
}

/* ---------- v9 (15 Oct 2026): photographs where the question arises ----------
   Each photo now sits beside the choice or explanation it supports. Existing images keep their sizes and crops;
   these rules only add the new treatments. */
/* One photograph, with or without an explanation beside it (Special Events "On site" shows the photo alone, centred). */
.photo-feature .pf{margin:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:center}
.photo-feature.tall .pf{grid-template-columns:minmax(0,1fr) minmax(0,400px)}
.photo-feature .pf-copy h2{margin:0 0 12px}
.photo-feature .pf-copy p{margin:0;font-size:18px;line-height:1.55;color:rgba(255,255,255,.85);max-width:44ch}
.photo-feature .pf-media picture{display:block}
.photo-feature .pf-media img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-md);display:block}
.photo-feature.tall .pf-media img{aspect-ratio:4/5}
@media (max-width:860px){
  .photo-feature .pf,.photo-feature.tall .pf{grid-template-columns:1fr;gap:18px}
  .photo-feature .pf-copy p{font-size:16px}
}
.photo-feature.solo .pf,.photo-feature.solo.tall .pf{grid-template-columns:minmax(0,400px);justify-content:center}

/* ---------- v10 (15 Oct 2026): motion ----------
   One vocabulary, taken from the brand rather than from a library: photographs settle onto their mustard stamp, choices
   press in and get a mustard check, prices tick when they change, the medallion and the footer ornaments arrive like
   stamps on a page, and the mascot looks up over the band. Everything is transform/opacity (plus a one-off height on the
   accordions), gated on `html.js` so a page without scripts shows plainly. Reduced motion: every rule here is off and
   nothing is ever hidden. Page-to-page: the browser crossfades pages and slides the current-page mark along the header. */
:root{--m-fast:.16s;--m-base:.24s;--m-slow:.5s;--ease-spring:cubic-bezier(.34,1.45,.64,1);--ease-io:cubic-bezier(.65,0,.35,1)}

@keyframes v10-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes v10-settle{from{transform:translate(9px,-11px);box-shadow:0 0 0 0 var(--mustard)}to{transform:none;box-shadow:var(--stamp-m)}}
@keyframes v10-medallion{from{opacity:0;transform:translate(-50%,50%) scale(.3) rotate(-55deg)}to{opacity:1;transform:translate(-50%,50%) scale(1) rotate(0)}}
@keyframes v10-pop{0%{transform:scale(1)}35%{transform:scale(1.09)}100%{transform:scale(1)}}
@keyframes v10-tick{0%{color:var(--jade)}30%{color:var(--mustard-dim)}100%{color:var(--jade)}}
@keyframes v10-up{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes v10-down{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}
@keyframes v10-in-left{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes v10-nudge{0%,100%{transform:none}20%{transform:translateX(-5px)}50%{transform:translateX(4px)}80%{transform:translateX(-2px)}}
@keyframes v10-badge{from{transform:scale(0) rotate(-25deg)}to{transform:scale(1) rotate(0)}}
@keyframes v10-vt-out{to{opacity:0}}
@keyframes v10-vt-in{from{opacity:0;transform:translateY(10px)}}

/* Hero: eyebrow → headline → description → buttons rise in turn; the photograph settles onto its stamp (no opacity on the
   photo, so the largest image still paints at once); the medallion spins in once it is in view. */
html.js .hero-copy>*{animation:v10-rise .55s var(--ease) both;animation-delay:calc(60ms + var(--i,0)*70ms)}
html.js .hero-copy>:nth-child(2){--i:1}html.js .hero-copy>:nth-child(3){--i:2}html.js .hero-copy>:nth-child(4){--i:3}html.js .hero-copy>:nth-child(5){--i:4}
html.js .hero .photo-card{animation:v10-settle .7s var(--ease) .15s both}
html.js .hero-orn{opacity:0}
html.js .hero-orn.in{animation:v10-medallion .8s var(--ease-spring) .2s both}

/* Buttons: lift on hover (pointer devices only), press on tap everywhere. */
.btn{transition:background var(--m-fast) var(--ease),color var(--m-fast),transform .2s var(--ease-spring),box-shadow .2s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px -10px rgba(15,42,27,.45)}
  .btn-mustard:hover{box-shadow:0 10px 20px -10px rgba(199,144,10,.65)}
  .btn-ghost:hover,.btn-ghost.on-jade:hover{box-shadow:none}
  .btn-stamp:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 0 var(--jade)}
}
.btn:active,.btn:active:hover{transform:translateY(1px) scale(.98);box-shadow:none;transition-duration:.06s}
.btn:disabled,.btn:disabled:hover{transform:none;box-shadow:none}
.textlink{transition:text-underline-offset var(--m-fast),color var(--m-fast)}
.textlink:hover{text-underline-offset:6px}

/* Header: a mustard mark grows under the link you point at; the current page's mark slides along when the page changes. */
@media (min-width:961px){
  .nav-links a{transition:opacity var(--m-fast)}
  .nav-links a::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;border-radius:2px;background:var(--mustard);transform:scaleX(0);transition:transform .22s var(--ease)}
  .nav-links a:hover::after,.nav-links a:focus-visible::after,.nav-links a[aria-current=page]::after{transform:scaleX(1)}
  .nav-links a[aria-current=page]::after{view-transition-name:nav-mark}
}
@media (min-width:961px) and (max-width:1024px){.nav-links a::after{left:8px;right:8px}}
@media (max-width:960px){
  .svc-tray a{transition:background var(--m-fast),color var(--m-fast)}
  .svc-tray a[aria-current=page]{view-transition-name:svc-mark}
  .mobile-menu li{animation:v10-up .32s var(--ease) both;animation-delay:calc(var(--i,0)*35ms)}
  .mobile-menu li:nth-child(2){--i:1}.mobile-menu li:nth-child(3){--i:2}.mobile-menu li:nth-child(4){--i:3}.mobile-menu li:nth-child(5){--i:4}.mobile-menu li:nth-child(6){--i:5}
  .mobile-menu-foot{animation:v10-up .32s var(--ease) .22s both}
}
@view-transition{navigation:auto}
::view-transition-old(root){animation:v10-vt-out .18s var(--ease-io) both}
::view-transition-new(root){animation:v10-vt-in .3s var(--ease) both}
.nav{view-transition-name:site-nav}
::view-transition-group(site-nav){animation-duration:.2s}
::view-transition-group(nav-mark),::view-transition-group(svc-mark){animation-duration:.32s;animation-timing-function:var(--ease)}

/* Scroll reveals: only sets of things (cards, steps, FAQ entries, checklist lines) and section headings, so the stagger
   says "these belong together". Builders and forms never fade. Anything already scrolled past shows at once. */
html.js .rv{opacity:0;transform:translateY(16px)}
html.js .rv.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
html.js .step.rv::before{transform:scale(0)}
html.js .step.rv.in::before{transform:none;transition:transform .5s var(--ease-spring) calc(var(--i,0)*80ms + .25s)}
html.js .check>li.rv::before{transform:scale(0)}
html.js .check>li.rv.in::before{transform:none;transition:transform .45s var(--ease-spring) calc(var(--i,0)*80ms + .2s)}
/* Lazy photographs fade in instead of popping. */
html.js img[loading=lazy]:not(.hero-orn){opacity:0;transition:opacity .5s var(--ease)}
html.js img[loading=lazy].in{opacity:1}
/* Footer ornaments: twelve stamps, one after another. */
html.js .accent-strip .tile img{opacity:0;transform:scale(.5)}
html.js .accent-strip.in .tile img.in{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .55s var(--ease-spring);transition-delay:calc(var(--i,0)*45ms)}
/* The mascot looks up over the mustard band once it scrolls into view. */
html.js .band-mascot{transform:translateY(45%)}
html.js .band.in .band-mascot{transform:none;transition:transform .7s var(--ease-spring) .15s}

/* Cards (Home services): lift, and the photograph eases closer. */
.offer{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.offer picture{overflow:hidden}
.offer img{transition:transform .6s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .offer:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
  .offer:hover img{transform:scale(1.03)}
}

/* Builders: a choice presses in and gets a mustard check; pills and steppers respond under the finger. */
.opt{transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .25s var(--ease-spring)}
@media (hover:hover) and (pointer:fine){.opt:hover{border-color:rgba(23,72,45,.45)}}
.opt:active{transform:scale(.99)}
.opt::after{content:"";position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;background:var(--mustard) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2317482D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E") center/11px no-repeat;transform:scale(0);transition:transform .3s var(--ease-spring);pointer-events:none}
.opt:has(input:checked)::after{transform:scale(1)}
.opt .opt-title{padding-right:30px}
.chip span,.km-size,.jumps a,.checks label{transition:background var(--m-fast),color var(--m-fast),border-color var(--m-fast),transform .2s var(--ease-spring)}
.chip:active span,.km-size:active,.jumps a:active{transform:scale(.96)}
.km-step button,.qty-ctl button{transition:background var(--m-fast),transform .15s var(--ease-spring)}
.km-step button:active,.qty-ctl button:active{transform:scale(.86);background:var(--iso-warm)}
.km-feeds{transition:background .3s,color .3s}
.minbar .bar i{transition:width .35s var(--ease),background .3s}
.minbar b{transition:color .3s}
.field input,.field select,.field textarea{transition:border-color var(--m-fast),box-shadow var(--m-fast)}
.field.invalid{animation:v10-nudge .36s var(--ease)}
.faq details{transition:box-shadow .25s var(--ease)}
.faq details[open]{box-shadow:var(--sh-md)}
.faq summary{transition:color var(--m-fast)}
.faq summary:hover{color:var(--jade-soft)}
details.km-adjust>summary{transition:border-color var(--m-fast),background var(--m-fast)}
/* Feedback classes set from the scripts: a price that changed ticks, a quantity rolls in the direction it moved, a new
   line in the summary slides in from the left. */
.fx-pop{animation:v10-pop .34s var(--ease-spring)}
.fx-tick{animation:v10-pop .34s var(--ease-spring),v10-tick .6s var(--ease)}
.km-qty.up{animation:v10-up .22s var(--ease)}
.km-qty.down{animation:v10-down .22s var(--ease)}
.summary li.fx-new{animation:v10-in-left .32s var(--ease) both}
.pricebox .big,.pricebox .meta b,.mbar b,.mbar>div,.km-qty,.qty-ctl input{display:inline-block}
.pricebox .big{display:block}
/* Notices, callouts, revealed fields and the success card arrive, never snap (browsers without @starting-style just show them). */
.callout.show,.notice.show,.kept.show,.recur-note.show,.topic-fields.show,.field-err.show,.meal-target{transition:opacity var(--m-base) var(--ease),translate var(--m-base) var(--ease)}
.form-ok{transition:opacity .4s var(--ease),scale .5s var(--ease-spring)}
@starting-style{
  .callout.show,.notice.show,.kept.show,.recur-note.show,.topic-fields.show,.field-err.show{opacity:0;translate:0 -6px}
  .form-ok{opacity:0;scale:1.05}
}
.form-ok::before{content:"";display:block;width:40px;height:40px;border-radius:50%;background:var(--mustard) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2317482D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E") center/17px no-repeat;margin-bottom:12px;animation:v10-badge .5s var(--ease-spring) .2s both}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  html.js .rv,html.js .hero-orn,html.js .accent-strip .tile img,html.js img[loading=lazy],html.js .band-mascot,html.js .step.rv::before,html.js .check>li.rv::before{opacity:1;transform:none}
}

/* ---------- v10b (15 Oct 2026): tablets, 600–900px ----------
   Below 900px the phone layout used to stretch: each Home service card became a full-width photograph and the owners'
   portrait ran the whole width at 4:5. On tablets the three cards now lie down — photograph left, copy right — and the
   portrait sits beside its copy from 700px. Phones (under 600px) and desktop are untouched. */
@media (min-width:600px) and (max-width:900px){
  .offer{flex-direction:row;align-items:stretch}
  .offer picture{flex:0 0 42%;position:relative;min-height:280px;overflow:hidden}
  .offer img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
  .offer-body{flex:1;padding:22px 26px 24px}
}
@media (min-width:700px) and (max-width:860px){
  .split,.split.rev{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:32px}
  .split.rev .split-media{order:2}
}

/* ---------- v10c (15 Oct 2026): café sign-off — the kukucafe.com footer, above the catering footer ----------
   Jade band with "Gone KUKU yet? 😜" drifting right, tilted a few degrees; a mustard-edged arc opens onto cream; the bird
   mascot stands on the accent strip beside the café's details. The marquee runs only while on screen (motion.js) and
   stops under reduced motion (the global rule near the top). */
.cafe-sign{background:var(--jade);position:relative;overflow:hidden}
.mq{padding:clamp(64px,9vw,120px) 0 clamp(36px,5vw,72px);overflow:hidden}
.mq-line{width:130%;margin-left:-15%;transform:rotate(-4deg)}
.mq-track{display:flex;width:max-content;animation:v10-mq var(--mq-dur,42s) linear infinite;will-change:transform}
html.js .mq:not(.on) .mq-track{animation-play-state:paused}
.mq-set{display:flex;flex:0 0 auto}
/* kukucafe.com: Dela Gothic One, 60px at 1440, 54px at 1280, about 40px on phones (its 5.0 step × .74). */
.mq-unit{display:inline-flex;align-items:center;flex:0 0 auto;padding-right:.9em;font:400 40px/1 var(--display);font-synthesis:none;letter-spacing:-.015em;color:var(--mustard);white-space:nowrap}
@media (min-width:961px){.mq-unit{font-size:min(calc((4.8vw + 12px) * .74),62px)}}
.mq-emoji{margin-right:.3em;font-size:.9em;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
@keyframes v10-mq{from{transform:translateX(-50%)}to{transform:translateX(0)}}

.cafe-sign-body{position:relative;background:var(--cream);overflow:hidden}
.cafe-arc{display:block;width:100%;height:clamp(30px,6.5vw,88px);background:var(--jade);overflow:visible}
/* The cream fill runs past the bottom of the box, so a fractional box height never leaves a jade hairline. */
.cafe-arc .fill{fill:var(--cream)}
.cafe-arc .line{fill:none;stroke:var(--mustard);stroke-width:6;vector-effect:non-scaling-stroke}
.cafe-grid{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:end;column-gap:clamp(16px,5vw,72px);padding-top:clamp(16px,3vw,36px)}
.cafe-mascot{display:block;width:clamp(132px,19vw,285px);height:auto;margin-bottom:-1px}   /* kukucafe.com: 274px at 1440, 247px at 1280 */
.cafe-info{align-self:center;min-width:0;padding-bottom:clamp(24px,4vw,56px)}
/* "KUKU Cafe" exactly as kukucafe.com sets it: Dela Gothic One, 24px phones, 30.5px at 1280, 33px at 1440. */
.cafe-info h2{font:400 24px/1.15 var(--display);font-synthesis:none;letter-spacing:-.015em;color:var(--jade);margin:0 0 clamp(12px,1.6vw,22px)}
@media (min-width:961px){.cafe-info h2{font-size:min(calc((2.28vw + 12px) * .74),34.2px)}}
.cafe-info p{margin:0 0 clamp(10px,1.2vw,14px);font-size:15px;line-height:1.45;color:var(--jade)}
.cafe-tel{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.cafe-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(14px,1.8vw,22px)!important}
.cafe-links a{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border-radius:var(--pill);border:1.5px solid var(--jade);font:700 14px/1 var(--body);color:var(--jade);text-decoration:none;transition:background var(--m-fast),color var(--m-fast),transform .2s var(--ease-spring)}
.cafe-links a:hover{background:var(--jade);color:var(--cream)}
.cafe-links a:active{transform:scale(.96)}
/* The mascot rises from behind the accent strip when the block comes into view. */
html.js .cafe-mascot{transform:translateY(28px)}
html.js .cafe-sign-body.in .cafe-mascot{transform:none;transition:opacity .5s var(--ease),transform .8s var(--ease-spring) .1s}
/* Phones: a larger mascot, a tighter gap, and Instagram and Yelp on one row. */
@media (max-width:600px){
  .cafe-grid{column-gap:12px}
  .cafe-mascot{width:clamp(128px,46vw,240px)}
  .cafe-links{gap:6px}
  .cafe-links a{min-height:38px;padding:0 12px;font-size:13.5px}
}
@media (max-width:379px){.cafe-mascot{width:40vw}.cafe-links a{padding:0 10px;font-size:13px}}
@media (prefers-reduced-motion:reduce){html.js .cafe-mascot{transform:none}}

/* ---------- v10d (15 Oct 2026): GF tags on Menu & Prices ----------
   Mustard pill so it reads apart from the green vegan / vegetarian tags; the legend sits under the jump links. */
.diet-tag.gf{background:var(--mustard);color:var(--jade)}
.gf-note{display:flex;align-items:flex-start;gap:10px;margin:12px 0 0;padding-top:12px;border-top:1px solid rgba(23,72,45,.12);font-size:inherit;line-height:1.5;color:var(--muted)}
.gf-note .diet-tag{margin:2px 0 0;flex:0 0 auto}

/* GF footnote at the bottom of each builder's menu step (Family Style step 4, Boxed Meals step 1) */
.gf-foot{display:flex;align-items:flex-start;gap:10px;margin:20px 0 0;padding-top:14px;border-top:1px solid var(--iso-warm);font-size:13.5px;line-height:1.5;color:var(--muted)}
.gf-foot .diet-tag{margin:1px 0 0;flex:0 0 auto}

/* Persian name under the English name in the Family Style builder (same look as the menu's row-sub) */
.km-row-fa{color:var(--jade);font-weight:500}
.km-row-name .diet-tag{margin-left:8px}
/* Tags travel together: if they wrap, the diet tag and GF move to the next line as one group */
.row-name .tags{display:inline-block;white-space:nowrap}

/* Party trays pointer (20 Oct 2026): a little air under the guest slider on Family Style. */
.fstep .bulk-note{margin:14px 0 0}