/* ZONEMET website. Layout: full-bleed colour bands (red hero, white, mist, night, red) with a centred 1180px column. */
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/BricolageGrotesque-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/BricolageGrotesque-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Figtree";src:url(../fonts/Figtree-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url(../fonts/Figtree-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Figtree";src:url(../fonts/Figtree-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Figtree";src:url(../fonts/Figtree-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --amber:#C88400;
  --red:#C81601;
  --crimson:#B5005F;
  --fork:#E93719;
  --glow:#FFB15C;
  --ink:#241310;
  --ink-soft:#5B4640;
  --paper:#FFFFFF;
  --mist:#FFF2EC;
  --night:#2A0A13;
  --night-deep:#1B060C;
  --verified:#17803D;
  --display:"Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max:1180px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--fork);outline-offset:3px;border-radius:6px}
.on-red :focus-visible,.on-night :focus-visible{outline-color:#fff}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px), 4vw);padding-right:max(16px, env(safe-area-inset-right, 0px), 4vw)}
@media (min-width:1300px){.wrap{padding-left:48px;padding-right:48px}}
.skip{position:absolute;left:12px;top:-60px;z-index:10;background:#fff;color:var(--ink);padding:10px 14px;border-radius:10px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;transition:transform .15s ease, background-color .15s ease;text-align:center}
.btn:active{transform:translateY(1px)}
.btn-light{background:#fff;color:var(--red)}
.btn-light:hover{background:#FFE9DF}
.btn-ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.75)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#DD1E07}
.btn-sm{min-height:42px;padding:0 18px;font-size:15px}

/* Top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;padding-bottom:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand img{width:44px;height:44px;border-radius:12px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.brand span{font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:.01em}
.nav{display:flex;align-items:center;gap:6px}
.nav .link{text-decoration:none;font-weight:600;font-size:15px;padding:8px 12px;border-radius:999px}
.nav .link:hover{background:rgba(255,255,255,.14)}
@media (max-width:820px){.nav .link{display:none}}
@media (max-width:420px){.brand span{font-size:20px}.brand img{width:38px;height:38px}.nav .btn-sm{padding:0 14px;font-size:14px}}

/* Red hero band */
.hero{position:relative;color:#fff;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(55% 65% at 80% 42%, rgba(200,132,0,.85) 0%, rgba(200,132,0,0) 62%),
    linear-gradient(140deg, var(--red) 0%, #BD0B31 55%, var(--crimson) 100%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:clamp(24px,4vw,56px);padding-top:clamp(20px,4vw,48px);padding-bottom:clamp(56px,7vw,104px)}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(44px,5vw,70px);line-height:.95;letter-spacing:-.025em;margin:0 0 24px;max-width:11ch;text-wrap:balance}
.hero .lede{font-size:clamp(18px,1.6vw,20px);line-height:1.55;max-width:32em;margin:0 0 32px;color:rgba(255,255,255,.93)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.launch{margin:28px 0 0;font-size:15px;font-weight:600;display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.92)}
.launch i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--glow);box-shadow:0 0 0 4px rgba(255,177,92,.3)}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}}

/* Dish orbit: the hero's one moment. Stage is a square; everything is placed in % so it scales. */
.orbit{position:relative;width:100%;max-width:640px;aspect-ratio:1/1;justify-self:center;margin:0}
.orbit .ring{position:absolute;inset:9%;border-radius:50%;border:2px dashed rgba(255,255,255,.62);background:radial-gradient(closest-side, rgba(255,255,255,.10), rgba(255,255,255,.03));animation:ring 1.2s cubic-bezier(.2,.8,.2,1) .15s both}
.orbit .ring-tag{position:absolute;left:50%;top:9%;transform:translate(-50%,-50%);background:#fff;color:var(--red);font-weight:700;font-size:14px;padding:5px 14px;border-radius:999px;white-space:nowrap;animation:fade .6s ease .9s both}
.dish{position:absolute;margin:0;animation:pop .6s cubic-bezier(.3,1.4,.5,1) both}
.dish img{width:100%;filter:drop-shadow(0 18px 22px rgba(60,0,10,.35))}
.dish figcaption{position:absolute;left:50%;transform:translateX(-50%);bottom:-6px;background:#fff;color:var(--ink);font-weight:600;font-size:13.5px;line-height:1;padding:7px 12px;border-radius:999px;white-space:nowrap;box-shadow:0 6px 16px -8px rgba(60,0,10,.5)}
.dish.hero-dish{left:26%;top:27%;width:48%;animation-delay:.35s}
.dish.hero-dish img{filter:drop-shadow(0 30px 34px rgba(60,0,10,.45))}
.dish.d1{left:2%;top:10%;width:27%;animation-delay:.75s}
.dish.d2{left:69%;top:4%;width:27%;animation-delay:.88s}
.dish.d3{left:75%;top:52%;width:25%;animation-delay:1.01s}
.dish.d4{left:47%;top:74%;width:26%;animation-delay:1.14s}
.dish.d5{left:0%;top:62%;width:27%;animation-delay:1.27s}
@keyframes ring{from{transform:scale(.15);opacity:0}to{transform:none;opacity:1}}
@keyframes pop{from{transform:translateY(18px) scale(.85);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.orbit .ring,.orbit .ring-tag,.dish{animation:none}}
@media (max-width:480px){.dish figcaption{font-size:12px;padding:6px 10px}.orbit .ring-tag{font-size:12.5px}}

/* Sections */
.section{padding-top:clamp(72px,10vw,128px);padding-bottom:clamp(72px,10vw,128px)}
.h2{font-family:var(--display);font-weight:800;font-size:clamp(34px,4.6vw,58px);line-height:1.02;letter-spacing:-.02em;margin:0 0 18px;max-width:16ch;text-wrap:balance}
.intro{font-size:19px;color:var(--ink-soft);max-width:36em;margin:0}

/* Menu board */
.menu{background:var(--mist)}
.menu .h2{max-width:18ch}
.plates{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
.plates li{display:flex;flex-direction:column;align-items:center;text-align:center}
.plates .art{width:100%;aspect-ratio:1/1;display:grid;place-items:center;border-radius:50%;background:radial-gradient(closest-side,#FFE0D2 0%,#FFE0D2 62%,rgba(255,224,210,0) 63%)}
.plates img{width:86%;filter:drop-shadow(0 16px 18px rgba(90,20,10,.22))}
.plates b{font-family:var(--display);font-weight:600;font-size:22px;margin-top:14px;line-height:1.2}
.plates span{color:var(--ink-soft);font-size:15.5px;margin-top:2px}
@media (max-width:760px){
  .plates{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:20px;padding-bottom:12px;margin-right:calc(-1 * max(16px, 4vw));padding-right:max(16px, 4vw)}
  .plates li{flex:0 0 64%;scroll-snap-align:start}
}
.menu-note{margin:24px 0 0;font-size:14.5px;color:var(--ink-soft)}

/* Promises + example bill */
.you-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,88px);align-items:start;margin-top:56px}
.truths{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:34px 40px}
.truths li{padding-top:16px;border-top:2px solid var(--ink);min-width:0}
.truths h3{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.2;margin:0 0 6px;letter-spacing:-.01em}
.truths p{margin:0;color:var(--ink-soft);font-size:16.5px}
@media (max-width:960px){.you-grid{grid-template-columns:1fr}}
@media (max-width:560px){.truths{grid-template-columns:1fr}}
.bill-wrap{position:sticky;top:32px}
.bill-note{font-size:14px;font-weight:600;color:var(--ink-soft);margin:0 0 12px 4px}
.bill{background:var(--paper);color:var(--ink);border-radius:18px 18px 0 0;padding:26px 26px 34px;box-shadow:0 30px 60px -30px rgba(120,20,20,.35), 0 0 0 1px rgba(36,19,16,.08);transform:rotate(-1.2deg);
  -webkit-mask:radial-gradient(10px at 50% calc(100% + 1px),#0000 98%,#000) 50% / 26px 100%;
          mask:radial-gradient(10px at 50% calc(100% + 1px),#0000 98%,#000) 50% / 26px 100%}
.bill-kitchen{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:16px;border-bottom:1.5px dashed rgba(36,19,16,.25)}
.bill-kitchen b{font-family:var(--display);font-weight:600;font-size:20px;display:block;line-height:1.2}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tag{font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:5px}
.tag-ok{background:#E3F4E8;color:var(--verified)}
.tag-new{background:var(--mist);color:var(--red)}
.tag svg{width:13px;height:13px}
.km{font-size:13px;color:var(--ink-soft);white-space:nowrap;padding-top:4px}
.rows{margin:16px 0 0;padding:0;list-style:none}
.rows li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-variant-numeric:tabular-nums}
.rows .sum{border-top:1.5px dashed rgba(36,19,16,.25);margin-top:10px;padding-top:12px}
.rows .total{font-weight:700;font-size:19px}
.rows .muted{color:var(--ink-soft)}
.bill-foot{margin:18px 0 0;background:var(--mist);border-radius:12px;padding:12px 14px;font-size:14.5px;font-weight:600;color:#7A1A0C}

/* Kitchen kinds + seller hand-off */
.kinds{background:var(--paper);padding-top:0}
.kind-list{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;font-family:var(--display);font-weight:800;font-size:clamp(34px,6.2vw,80px);line-height:1.05;letter-spacing:-.025em}
.kind-list li{display:inline-flex;align-items:center;gap:22px}
.kind-list li:not(:last-child)::after{content:"";flex:none;width:.4em;height:.55em;background:var(--red);-webkit-mask:url(../img/zonemet-pin.png) center/contain no-repeat;mask:url(../img/zonemet-pin.png) center/contain no-repeat}
.kind-list .soft{color:var(--red);text-decoration:underline dashed 3px;text-decoration-color:rgba(200,22,1,.55);text-underline-offset:.16em}
.kinds-note{margin:28px 0 0;color:var(--ink-soft);font-size:16.5px;max-width:40em}
.handoff{margin-top:56px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding:28px clamp(20px,3vw,36px);border-radius:24px;background:var(--night);color:#fff}
.handoff p{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(22px,2.4vw,28px);line-height:1.2;max-width:24ch}

/* Follow band */
.follow{color:#fff;background:radial-gradient(50% 80% at 92% 10%, rgba(200,132,0,.8) 0%, rgba(200,132,0,0) 70%),linear-gradient(150deg, var(--red) 0%, #BD0B31 50%, var(--crimson) 100%)}
.follow .intro{color:rgba(255,255,255,.93)}
.socials{list-style:none;margin:48px 0 0;padding:0;border-top:2px solid rgba(255,255,255,.55)}
.socials a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:18px 8px;border-bottom:2px solid rgba(255,255,255,.55);text-decoration:none;transition:background-color .15s ease, padding .2s ease}
.socials a:hover{background:rgba(255,255,255,.12);padding-left:18px;padding-right:18px}
.socials svg{width:30px;height:30px;fill:#fff}
.socials .net{font-family:var(--display);font-weight:800;font-size:clamp(28px,4.4vw,52px);line-height:1.05;letter-spacing:-.02em}
.socials .handle{font-weight:600;font-size:clamp(15px,1.6vw,19px);text-align:right}
@media (max-width:560px){.socials a{grid-template-columns:auto 1fr}.socials .handle{grid-column:2;text-align:left;margin-top:-10px}}
.contact{margin:40px 0 0;font-size:18px}
.contact a{font-weight:700;text-underline-offset:4px}

/* Footer */
.site-foot{background:var(--night-deep);color:rgba(255,255,255,.8);padding:48px 0 40px;font-size:15px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:center}
.foot .brand span{color:#fff;font-size:21px}
.foot p{margin:0}
.tagline{font-family:var(--display);font-weight:600;color:var(--glow);font-size:18px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px}
.foot-links a{color:#fff;font-weight:600;text-underline-offset:4px}
.legal{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;color:rgba(255,255,255,.6);font-size:14px}
.legal p{margin:0}

/* ---------- Partner page ---------- */
.p-hero{color:#fff;position:relative;overflow:hidden;isolation:isolate;background:var(--night)}
.p-hero::before{content:"";position:absolute;z-index:-1;right:-10%;top:-20%;width:70%;aspect-ratio:1/1;border-radius:50%;background:radial-gradient(closest-side, rgba(200,22,1,.75), rgba(181,0,95,.35) 55%, rgba(181,0,95,0))}
.p-hero .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.p-hero h1{font-family:var(--display);font-weight:800;font-size:clamp(44px,6.4vw,84px);line-height:.96;letter-spacing:-.025em;margin:0 0 24px;max-width:12ch;text-wrap:balance}
.p-hero .lede{font-size:clamp(18px,1.6vw,20px);max-width:32em;margin:0 0 32px;color:rgba(255,255,255,.85)}
.mailline{margin:16px 0 0;font-size:15px;color:rgba(255,255,255,.75)}
.mailline b{color:#fff;font-weight:600;user-select:all}
.counter{position:relative;justify-self:center;width:100%;max-width:520px;aspect-ratio:1/1}
.counter img{position:absolute;filter:drop-shadow(0 26px 30px rgba(0,0,0,.45))}
.counter .c1{left:2%;top:4%;width:68%}
.counter .c2{left:40%;top:38%;width:58%}
.counter .c3{left:0;top:62%;width:42%}
@media (max-width:960px){.p-hero .hero-grid{grid-template-columns:1fr}.counter{max-width:420px}}

.fee{margin-top:8px;display:flex;gap:16px;flex-wrap:wrap}
.fee div{flex:1 1 200px;border-radius:20px;padding:22px 22px 20px;background:var(--mist)}
.fee b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(48px,5.4vw,68px);line-height:1;color:var(--red);font-variant-numeric:tabular-nums}
.fee span{display:block;margin-top:8px;font-weight:600}
.fee-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:end}
@media (max-width:860px){.fee-grid{grid-template-columns:1fr}}

.steps{list-style:none;counter-reset:step;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.steps li{counter-increment:step;position:relative;padding-top:64px;min-width:0}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:#fff;font-family:var(--display);font-weight:800;font-size:22px}
.steps li:not(:last-child)::after{content:"";position:absolute;left:60px;right:-16px;top:24px;border-top:2px dashed rgba(200,22,1,.4)}
.steps h3{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.2;margin:0 0 6px}
.steps p{margin:0;color:var(--ink-soft);font-size:16px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}.steps li:nth-child(2)::after{display:none}}
@media (max-width:520px){.steps{grid-template-columns:1fr}.steps li::after{display:none}}

.perks{background:var(--night);color:#fff}
.perks .intro{color:rgba(255,255,255,.8)}
.perk-list{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.perk-list li{padding:24px 0;border-top:1px solid rgba(255,255,255,.18);min-width:0}
.perk-list h3{font-family:var(--display);font-weight:600;font-size:23px;margin:0 0 6px;letter-spacing:-.01em}
.perk-list p{margin:0;color:rgba(255,255,255,.78)}
@media (max-width:760px){.perk-list{grid-template-columns:1fr}}

.need{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,88px);align-items:start}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{display:grid;grid-template-columns:28px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid rgba(36,19,16,.14)}
.checklist li:first-child{padding-top:4px}
.checklist svg{width:28px;height:28px;color:var(--verified)}
.checklist b{display:block;font-weight:700}
.checklist span{color:var(--ink-soft);font-size:16px}
@media (max-width:860px){.need{grid-template-columns:1fr}}

.faq{background:var(--mist)}
.faq-list{margin:40px 0 0;max-width:820px}
.faq details{border-top:2px solid var(--ink);padding:4px 0}
.faq details:last-child{border-bottom:2px solid var(--ink)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-family:var(--display);font-weight:600;font-size:clamp(19px,2vw,23px);line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:#fff;font-family:var(--body);font-weight:700;font-size:22px;line-height:1;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 20px;color:var(--ink-soft);max-width:40em}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

.p-cta{color:#fff;background:linear-gradient(140deg, var(--red) 0%, #BD0B31 55%, var(--crimson) 100%)}
.p-cta .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px}
.p-cta .h2{margin:0}
.p-cta .mailline{color:rgba(255,255,255,.88)}