html,body{margin:0;padding:0}
/* Layout: a ruled spec sheet. Ink rules divide sections, mono labels carry the data, products sit on a shared-border label sheet. */
:root{
  --paper:#ffffff;
  --ink:#141414;
  --ink-2:#4a4743;
  --ink-3:#75706a;
  --hair:#dfdbd6;
  --wash:#f4f3f1;
  --frost:#1f6fb2;
  --frost-wash:#e8f1fa;
  --on-ink:#ffffff;
  --photo-bright:1;
  --danger:#b42318;
  --ok:#1b7a44;
  --f-display:"Sofia Sans Extra Condensed","Roboto Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --f-body:"Sofia Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --fs-label:.75rem;
  --fs-small:.875rem;
  --fs-body:1.0625rem;
  --fs-lead:1.25rem;
  --fs-h3:1.875rem;
  --fs-h2:clamp(2.375rem,5.2vw,4rem);
  --fs-h1:clamp(3.125rem,8vw,6.5rem);
  --wrap:1240px;
  --gutter:clamp(16px,4vw,44px);
  --head-h:64px;
  color-scheme:only light;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--fs-body);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{padding-bottom:var(--espa-h,0px)}
body.has-list{padding-bottom:calc(84px + var(--espa-h,0px))}
img,svg{max-width:100%}
a{color:inherit;text-underline-offset:3px}
button,input,select,textarea{font:inherit}
p,h1,h2,h3,h4,dl,dd,figure{margin:0}
:focus-visible{outline:2px solid var(--frost);outline-offset:3px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--ink);color:var(--on-ink);padding:10px 14px;font-family:var(--f-mono);font-size:var(--fs-small);text-decoration:none}
.skip:focus{top:12px}
.nowrap{white-space:nowrap}
.frost{color:var(--frost)}
.muted{color:var(--ink-2)}
.eyebrow{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.08em;color:var(--ink-2);display:flex;align-items:center;gap:10px;margin-bottom:16px}
.eyebrow::before{content:"";width:8px;height:8px;background:currentColor;flex:none}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:1;letter-spacing:0;text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:.98;overflow-wrap:break-word}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
.lead{font-size:var(--fs-lead);line-height:1.45;color:var(--ink-2);max-width:40ch}

/* buttons & chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 20px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--f-mono);font-size:.8125rem;font-weight:600;letter-spacing:.03em;text-decoration:none;cursor:pointer;text-align:center;transition:background-color .15s ease,color .15s ease}
.btn-ink{background:var(--ink);color:var(--on-ink)}
.btn-ink:hover{background:var(--paper);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--on-ink)}
.btn-sm{min-height:40px;padding:8px 14px;font-size:.75rem}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font-family:var(--f-mono);font-size:.8125rem;line-height:1.3;cursor:pointer;text-align:left}
.chip:hover{background:var(--wash)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.chip .n{font-size:.6875rem;opacity:.65}
.state{font-family:var(--f-mono);font-size:.625rem;font-weight:600;letter-spacing:.07em;padding:3px 7px;border:1px solid currentColor;line-height:1.4;white-space:nowrap}

/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--paper);border-bottom:1px solid var(--ink)}
.head-row{display:flex;align-items:center;gap:20px;min-height:var(--head-h)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none;color:var(--ink)}
.brand-logo{display:block;width:38px;height:38px;flex:none;fill:currentColor}
.brand-text{display:flex;flex-direction:column;gap:6px}
.brand-word{display:block;width:112px;height:auto;aspect-ratio:145.8/20;fill:currentColor}
.brand-tag{font-family:var(--f-mono);font-size:.5rem;letter-spacing:.15em;color:var(--ink-2);white-space:nowrap}
.nav{display:flex;gap:24px;margin-left:auto}
.nav a{font-family:var(--f-mono);font-size:.8125rem;text-decoration:none;padding-block:8px;border-bottom:1.5px solid transparent}
.nav a:hover,.nav a[aria-current="true"]{border-bottom-color:currentColor}
.head-actions{display:flex;align-items:center;gap:10px}
.lang{display:inline-flex;border:1px solid var(--ink)}
.lang button{min-width:38px;min-height:36px;padding:6px 8px;border:0;background:transparent;color:var(--ink);font-family:var(--f-mono);font-size:.75rem;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.menu-btn{display:none}
.count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;background:var(--frost);color:var(--paper);font-size:.6875rem}
@media (max-width:1100px){
  .menu-btn{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--ink);padding:4px var(--gutter) 16px}
  .nav.open{display:flex}
  .nav a{padding-block:14px;border-bottom:1px solid var(--hair);font-size:.9375rem}
  .head-actions{margin-left:auto}
}
@media (max-width:640px){.head-cta{display:none}}
@media (max-width:400px){.brand .brand-tag{display:none}.head-actions{gap:6px}.brand{gap:9px}.brand-logo{width:32px;height:32px}.brand-word{width:92px}}

/* hero */
.hero{border-bottom:1px solid var(--ink)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:center;padding-block:clamp(44px,7vw,104px)}
.hero-copy{display:grid;gap:26px;min-width:0}
.hero-copy .eyebrow{margin-bottom:0}
@media (max-width:920px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.labels{display:grid;gap:22px;min-width:0;padding-inline:4px}
.tag{border:1px dashed var(--ink-3);background:var(--paper);padding:16px 18px;font-family:var(--f-mono);font-size:.75rem;line-height:1.7;color:var(--ink-2);transform:rotate(-1deg)}
.tag-cap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;margin-bottom:8px;letter-spacing:.06em;color:var(--ink-3)}
.tag-hint{letter-spacing:0;font-style:italic}
.tag s{text-decoration-thickness:1.5px;text-decoration-color:var(--danger)}
.tag-theya{border:2px solid var(--ink);padding:0;color:var(--ink);transform:rotate(.8deg);box-shadow:7px 7px 0 var(--ink);font-size:.8125rem}
.tag-bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;background:var(--ink);color:var(--on-ink);padding:9px 16px;letter-spacing:.08em;font-weight:600}
.tag-body{padding:16px 18px 18px;display:grid;gap:12px}
.tag-k{font-size:.6875rem;letter-spacing:.08em;color:var(--ink-2)}
.tag-ingr{font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,3.6vw,2.75rem);line-height:1}
.tag-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1.5px solid var(--ink)}
.tag-rows div{display:grid;gap:2px;padding:9px 0;border-bottom:1px solid var(--hair);min-width:0}
.tag-rows div:nth-child(odd){padding-right:12px;border-right:1px solid var(--hair)}
.tag-rows div:nth-child(even){padding-left:12px}
.tag-rows dt{font-size:.625rem;letter-spacing:.07em;color:var(--ink-2)}
.tag-rows dd{font-weight:600}
.tag-note{font-family:var(--f-mono);font-size:.75rem;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.tag,.tag-theya{transform:none}}

/* ticker */
.ticker{overflow:hidden;background:var(--ink);color:var(--on-ink)}
.ticker-track{display:flex;width:max-content;animation:tick 44s linear infinite}
.ticker-track span{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.1em;white-space:nowrap;padding-block:12px;display:inline-flex;align-items:center}
.ticker-track span::after{content:"/";margin-inline:22px;opacity:.5}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* sections */
.sec{border-bottom:1px solid var(--ink);padding-block:clamp(60px,8.5vw,120px)}
.sec-head{margin-bottom:clamp(30px,4.5vw,56px)}
.sec-head h2{max-width:18ch}
.sec-head-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px 56px;align-items:end}
.sec-intro{color:var(--ink-2);max-width:54ch}
@media (max-width:860px){.sec-head-row{grid-template-columns:minmax(0,1fr)}}
.sub{margin-top:clamp(52px,7vw,96px)}
.sub-title{margin-bottom:22px}

/* about */
.about-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.prose{display:grid;gap:1.05em;max-width:62ch;font-size:1.125rem;line-height:1.6}
.prose p:first-child{font-size:1.3125rem;line-height:1.5}
.spec{border-top:1.5px solid var(--ink)}
.spec>div{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:16px;padding-block:12px;border-bottom:1px solid var(--hair)}
.spec dt{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.07em;color:var(--ink-3);padding-top:4px}
.spec dd{font-weight:600;min-width:0;overflow-wrap:anywhere}
@media (max-width:860px){.about-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.spec>div{grid-template-columns:minmax(0,1fr);gap:2px}}
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px;margin-top:clamp(44px,6vw,80px)}
.principle{border-top:1.5px solid var(--ink);padding-top:18px;display:grid;gap:10px;align-content:start}
.principle .k{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;color:var(--frost);font-weight:600}
.principle h3{font-size:1.75rem}
.principle p{color:var(--ink-2)}
@media (max-width:760px){.principles{grid-template-columns:minmax(0,1fr);gap:28px}}

/* products */
.filters{margin-bottom:22px}
.grid-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,272px),1fr));border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.card{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);display:flex;flex-direction:column;min-width:0;background:var(--paper)}
.card-media{position:relative;aspect-ratio:4/3;max-width:100%;background:var(--wash);border-bottom:1px solid var(--ink);overflow:hidden}
.card-media img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(var(--photo-bright))}
.card-media .m2{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.card-media.alt .m2{opacity:1}
.m-dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:6px;pointer-events:none}
.m-dots i{display:block;width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.22;transition:opacity .35s ease}
.m-dots i:first-child,.card-media.alt .m-dots i:last-child{opacity:.75}
.card-media.alt .m-dots i:first-child{opacity:.22}
@media (hover:hover){
  .card-media.has-2:hover .m2{opacity:1}
  .card-media.has-2:hover .m-dots i:first-child{opacity:.22}
  .card-media.has-2:hover .m-dots i:last-child{opacity:.75}
}
@media (hover:none){.card-media.has-2{cursor:pointer}}
.card-specs .vpick{display:flex;flex-wrap:wrap;gap:6px;padding:3px 0 0;border:0}
.vbtn{font:inherit;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.04em;min-height:30px;padding:0 10px;border:1px solid var(--ink-3);border-radius:0;background:var(--paper);color:var(--ink);cursor:pointer}
.vbtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
@media (hover:hover){.vbtn[aria-pressed="false"]:hover{border-color:var(--ink)}}
@media (prefers-reduced-motion:reduce){.card-media .m2,.m-dots i{transition:none}}
.media-tag{position:absolute;left:0;top:0;background:var(--ink);color:var(--on-ink);font-family:var(--f-mono);font-size:.6875rem;font-weight:600;letter-spacing:.06em;padding:5px 9px}
.soon-tag{position:absolute;right:0;top:0;background:var(--frost);color:var(--paper);font-family:var(--f-mono);font-size:.6875rem;font-weight:600;letter-spacing:.06em;padding:5px 9px}
.ph{position:absolute;inset:0;display:grid;place-items:center}
.ph-mark{font-family:var(--f-display);font-weight:800;font-size:3.25rem;letter-spacing:.04em;line-height:1;color:transparent;-webkit-text-stroke:1.25px var(--ink-3)}
@supports not (-webkit-text-stroke:1px black){.ph-mark{color:var(--hair)}}
.ph-note{position:absolute;right:12px;bottom:10px;font-family:var(--f-mono);font-size:.625rem;letter-spacing:.08em;color:var(--ink-3)}
.card-body{padding:18px;display:flex;flex-direction:column;gap:12px;flex:1;min-width:0}
.card-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.07em;color:var(--ink-3)}
.card-top .t{color:var(--frost);font-weight:600}
.card h3{font-size:2rem;line-height:.95}
.card-desc{color:var(--ink-2);font-size:.9375rem;line-height:1.5}
.card-specs{margin-top:auto;border-top:1px solid var(--hair);display:grid}
.trio{display:grid;grid-template-columns:auto auto minmax(0,1fr);border-bottom:1px solid var(--hair)}
.trio div,.rows div{display:grid;gap:1px;min-width:0;padding-block:8px}
.trio div{padding-right:12px}
.trio div+div{padding-left:12px;border-left:1px solid var(--hair)}
.rows div{border-bottom:1px solid var(--hair)}
.card-specs dt{font-family:var(--f-mono);font-size:.625rem;letter-spacing:.07em;color:var(--ink-3)}
.card-specs dd{font-size:.875rem;font-variant-numeric:tabular-nums}
.card-add{width:100%}
.card-add[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.prod-note{margin-top:22px;display:grid;gap:6px;font-size:var(--fs-small);color:var(--ink-2);max-width:80ch}
.prod-note a{color:var(--ink);font-weight:600}

/* services */
.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px}
.service{border-top:1.5px solid var(--ink);padding-block:18px 8px;display:grid;gap:10px;align-content:start}
.service .k{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.07em;color:var(--ink-3)}
.service h3{font-size:1.75rem}
.service p{color:var(--ink-2);font-size:.96875rem}
@media (max-width:1000px){.services{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}}
@media (max-width:560px){.services{grid-template-columns:minmax(0,1fr)}}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1.5px solid var(--ink)}
.steps li{display:grid;gap:6px;align-content:start;padding:16px 18px 0 0}
.steps li+li{padding-left:18px;border-left:1px solid var(--hair)}
.step-n{font-family:var(--f-display);font-weight:800;font-size:2.75rem;line-height:1}
.steps b{font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.04em}
.steps .d{color:var(--ink-2);font-size:.9375rem}
@media (max-width:900px){
  .steps{grid-template-columns:minmax(0,1fr)}
  .steps li,.steps li+li{grid-template-columns:3rem minmax(0,1fr);padding:14px 0;border-left:0;border-bottom:1px solid var(--hair)}
  .steps .step-n{grid-row:span 2;font-size:2.25rem}
}
.coverage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:center}
.rings{display:grid;gap:10px;justify-items:center}
.rings svg{width:100%;max-width:380px;height:auto}
.rings figcaption,.pallet figcaption{font-family:var(--f-mono);font-size:.6875rem;color:var(--ink-3)}
.r3{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.r2{fill:var(--wash);stroke:var(--ink);stroke-width:1.5}
.r1{fill:var(--frost-wash);stroke:var(--ink);stroke-width:1.5}
.r0{fill:var(--ink)}
.rl{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;fill:var(--ink);text-anchor:middle}
.rl.dim{fill:var(--ink-3)}
.zones{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.zone{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:6px 18px;padding-block:16px;border-bottom:1px solid var(--hair)}
.zone .zk{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.07em;color:var(--ink-3);padding-top:7px}
.zone h4{font-size:1.625rem;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.zone p{grid-column:2;color:var(--ink-2)}
.state.on{color:var(--frost)}
.state.dev{color:var(--ink-3);border-style:dashed}
@media (max-width:860px){.coverage{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.zone{grid-template-columns:minmax(0,1fr)}.zone p{grid-column:1}}
.logistics{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
.pallet{display:grid;gap:10px;justify-items:start}
.pallet svg{width:100%;max-width:340px;height:auto}
.lay{fill:var(--wash);stroke:var(--ink);stroke-width:1}
.lay-div{stroke:var(--ink);stroke-width:1}
.pal{fill:var(--ink-3)}
.maxline{stroke:var(--frost);stroke-width:1.25;stroke-dasharray:4 3}
.pt{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.04em;fill:var(--ink-3);text-anchor:middle}
.pt.b{fill:var(--ink);font-weight:600}
.pt.f{fill:var(--frost);font-weight:600}
@media (max-width:760px){.logistics{grid-template-columns:minmax(0,1fr)}}

/* next steps */
.next-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-areas:"head tl" "partner tl";gap:0 clamp(36px,5vw,80px);align-items:start}
.next-grid .sec-head{grid-area:head}
.timeline{grid-area:tl;list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:8px;top:10px;bottom:30px;width:1.5px;background:var(--ink)}
.tl{position:relative;padding:0 0 30px 44px;display:grid;gap:8px}
.tl::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;background:var(--paper);border:1.5px solid var(--ink)}
.tl.done::before{background:var(--ink)}
.tl.now::before{background:var(--frost);border-color:var(--frost)}
.tl.next::before{border-style:dashed;border-color:var(--ink-3)}
.tl-meta{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-family:var(--f-mono);font-size:.75rem;letter-spacing:.06em}
.tl.done .state{color:var(--ink)}
.tl.now .state{color:var(--frost)}
.tl.next .state{color:var(--ink-3);border-style:dashed}
.tl h3{font-size:1.875rem}
.tl p{color:var(--ink-2);max-width:56ch}
.partner{grid-area:partner;border:1.5px solid var(--ink);background:var(--wash);padding:clamp(20px,3vw,32px);display:grid;gap:14px}
.partner .eyebrow{margin-bottom:0}
.partner h3{font-size:2rem}
.partner p{color:var(--ink-2)}
@media (max-width:860px){.next-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "tl" "partner"}}

/* contact & form */
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:clamp(32px,5vw,80px);align-items:start}
.contact-side{display:grid;gap:22px;position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--head-h) + 24px)}
.contact-side .sec-head{margin-bottom:0}
.copyline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.sel{user-select:all;-webkit-user-select:all}
.copy{border:1px solid var(--ink-3);background:transparent;color:var(--ink-2);font-family:var(--f-mono);font-size:.6875rem;padding:4px 9px;min-height:30px;cursor:pointer}
.copy:hover{border-color:var(--ink);color:var(--ink)}
.staff-note{border:1px solid var(--frost);color:var(--frost);font-family:var(--f-mono);font-size:.75rem;padding:10px 12px;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
@media (max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr)}.contact-side{position:static}}
.form{border:1.5px solid var(--ink);padding:clamp(18px,3.2vw,36px);min-width:0;background:var(--paper)}
.form-main,.form-done{display:grid;gap:24px}
.progress{display:grid;gap:10px}
.progress-k{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.07em;color:var(--ink-2)}
.progress-k .mode{color:var(--frost)}
.bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.bar i{display:block;height:4px;background:var(--hair)}
.bar i.on{background:var(--ink)}
.step{border:0;margin:0;padding:0;min-width:0;display:grid;gap:20px}
.step-title{font-size:2.125rem}
.field{display:grid;gap:8px;min-width:0}
.lbl{font-weight:600;font-size:.9375rem;line-height:1.35}
.lbl em{font-style:normal;color:var(--danger)}
.opt{font-weight:400;color:var(--ink-3)}
.inp{font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid var(--ink-3);border-radius:0;padding:11px 13px;min-height:48px;width:100%}
textarea.inp{min-height:108px;resize:vertical;line-height:1.5}
.inp:focus{outline:2px solid var(--frost);outline-offset:0;border-color:var(--ink)}
.inp[aria-invalid="true"]{border-color:var(--danger)}
.chips[data-invalid="true"] .chip{border-color:var(--danger)}
.err{color:var(--danger);font-size:.875rem}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:560px){.row2{grid-template-columns:minmax(0,1fr)}}
.check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font-size:.9375rem;color:var(--ink-2);cursor:pointer}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink)}
.form-nav{display:flex;flex-wrap:wrap;gap:12px;padding-top:18px;border-top:1px solid var(--hair)}
.form-nav .fwd{margin-left:auto}
.form-done h3{font-size:2.25rem}
.form-done textarea{font-family:var(--f-mono);font-size:.8125rem;line-height:1.6;min-height:240px}
.small-mono{font-family:var(--f-mono);font-size:.75rem;color:var(--ink-2)}

/* footer */
.foot{padding-block:44px 56px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:28px 48px;align-items:start}
.foot-logo{display:grid;justify-items:center;gap:12px;width:max-content;max-width:100%;color:var(--ink)}
.foot-mark{display:block;width:72px;height:72px;fill:currentColor}
.foot-word{display:block;width:128px;height:auto;aspect-ratio:145.8/20;margin-top:6px;fill:currentColor}
.foot-logo .brand-tag{font-size:.5625rem;color:var(--ink);border-top:1px solid currentColor;padding-top:9px}
.foot dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:16px 28px}
.foot dt{font-family:var(--f-mono);font-size:.625rem;letter-spacing:.08em;color:var(--ink-3)}
.foot dd{margin-top:3px;font-size:.9375rem;overflow-wrap:anywhere}
.foot-legal{grid-column:1 / -1;font-family:var(--f-mono);font-size:.6875rem;color:var(--ink-3);border-top:1px solid var(--hair);padding-top:18px;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}
@media (max-width:760px){.foot-grid{grid-template-columns:minmax(0,1fr)}}

/* list bar, toast */
.listbar{position:fixed;left:0;right:0;bottom:var(--espa-h,0px);z-index:50;background:var(--ink);color:var(--on-ink)}
.listbar-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-block:12px}
.listbar-k{font-family:var(--f-mono);font-size:.8125rem;margin-right:auto}
.listbar .btn{border-color:var(--on-ink);color:var(--on-ink);min-height:42px;background:transparent}
.listbar .btn-inv{background:var(--on-ink);color:var(--ink)}
.listbar .btn-inv:hover{background:transparent;color:var(--on-ink)}
.listbar .btn-ghost:hover{background:var(--on-ink);color:var(--ink)}
.toast{position:fixed;left:50%;bottom:calc(var(--espa-h,0px) + 96px);transform:translateX(-50%);z-index:90;background:var(--ink);color:var(--on-ink);font-family:var(--f-mono);font-size:.8125rem;padding:10px 14px;max-width:calc(100% - 32px);opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}

/* ESPA co-funding banners: pinned to the bottom of every page, Greek or English with the page language */
.espa{position:fixed;left:0;right:0;bottom:0;z-index:45;background:#fff;border-top:1px solid var(--hair);padding:6px var(--gutter) calc(6px + env(safe-area-inset-bottom,0px))}
.espa-row{max-width:var(--wrap);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px clamp(16px,3vw,40px)}
.espa-link{display:block;line-height:0;max-width:100%}
.espa-link img{display:block;width:auto;max-width:100%}
.espa-2127 img{height:60px}
.espa-1420 img{height:47px}
html[lang="en"] .espa .l-el,html:not([lang="en"]) .espa .l-en{display:none}
/* store: pop-up video, shown like an ad on the store page (once a day when live, always with ?promo=1) */
.promo{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:16px;--promo-gap:160px}
/* on the temporary wix-site-host address Wix shows its own small label bottom-right: keep the card's button clear of it */
.promo.wixbar{padding-bottom:84px;--promo-gap:228px}
body:has(#wixheadless-banner-container[style*="block"]) .promo{padding-bottom:84px;--promo-gap:228px}
.promo[hidden]{display:none}
.promo-backdrop{position:absolute;inset:0;width:100%;height:100%;background:rgba(10,10,10,.62);opacity:0;transition:opacity .25s ease}
.promo-card{position:relative;display:flex;flex-direction:column;width:min(400px, calc((100vh - var(--promo-gap)) * 9 / 16), 100%);width:min(400px, calc((100svh - var(--promo-gap)) * 9 / 16), 100%);background:var(--paper);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);opacity:0;transform:translateY(22px) scale(.97);transition:opacity .25s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.promo.on .promo-backdrop{opacity:1}
.promo.on .promo-card{opacity:1;transform:none}
.promo-bar{align-items:center;flex-wrap:nowrap;padding:4px 4px 4px 14px;font-family:var(--f-mono);font-size:.6875rem}
.promo-bar .promo-t{margin-left:auto;white-space:nowrap}
.promo-x{width:40px;height:40px;display:grid;place-items:center;flex:none;border:0;background:transparent;color:var(--on-ink);cursor:pointer}
.promo-x svg{width:18px;height:18px}
.promo-media{position:relative;aspect-ratio:9/16;background:#111;overflow:hidden}
.promo-media video{display:block;width:100%;height:100%;object-fit:cover}
.promo-sound{position:absolute;right:10px;bottom:10px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;cursor:pointer}
.promo-sound svg{width:22px;height:22px}
.promo-sound .on,.promo-sound[aria-pressed="true"] .off{display:none}
.promo-sound[aria-pressed="true"] .on{display:block}
.promo-cta{border:0;border-top:2px solid var(--ink);justify-content:center;min-height:52px;font-size:1rem}
.promo-card:focus{outline:none}
html.promo-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){.promo-backdrop,.promo-card{transition:none}}
@media (max-width:760px){.espa-row{flex-direction:column;gap:2px}.espa-2127 img{height:auto;width:300px}.espa-1420 img{height:auto;width:236px}}
/* phones (and phones turned sideways): the co-funding strip stays on the entry page only and leaves as soon as the visitor opens the store or the wholesale pages */
@media (max-width:760px),(max-height:500px) and (pointer:coarse){html:not([data-view="gate"]) .espa{display:none}}

/* privacy notice: a modal sheet, Greek or English with the page language */
.privacy{width:min(760px,calc(100% - 32px));max-height:calc(100% - 48px);margin:auto;padding:0;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);overflow:auto;overscroll-behavior:contain}
.privacy::backdrop{background:rgba(20,20,20,.55)}
.pv-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,3vw,28px);background:var(--paper);border-bottom:1.5px solid var(--ink)}
.pv-head h2{margin:0;font-size:clamp(1.75rem,4.5vw,2.5rem);line-height:1}
.pv-body{padding:4px clamp(16px,3vw,28px) 28px}
.pv-body h3{margin:26px 0 8px;font-family:var(--f-mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.pv-body p,.pv-body li{margin:0 0 10px;font-size:.9375rem;line-height:1.6;color:var(--ink-2);max-width:68ch}
.pv-body ul{margin:0 0 10px;padding-left:18px}
.pv-body a{color:var(--ink)}
.pv-body .pv-date{margin-top:16px;font-family:var(--f-mono);font-size:var(--fs-label);color:var(--ink-3)}
html[lang="en"] .privacy .pv-el,html:not([lang="en"]) .privacy .pv-en{display:none}
html:has(.privacy[open]){overflow:hidden}
.pv-note{margin:0;font-size:.875rem;color:var(--ink-2)}
.legal-l{display:inline-flex;flex-wrap:wrap;gap:6px 18px}

/* entry: one question first, then the wholesale site or the store page */
.entry{display:flex;flex-direction:column;min-height:100vh;min-height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - var(--espa-h,0px));background:var(--paper)}
html[data-view="wholesale"] .entry,html[data-view="retail"] .entry{display:none}
html:not([data-view="retail"]) .rsite{display:none}
html:not([data-view="wholesale"]) #whSkip,
html:not([data-view="wholesale"]) #top,
html:not([data-view="wholesale"]) #main,
html:not([data-view="wholesale"]) #whFoot,
html:not([data-view="wholesale"]) .listbar{display:none!important}
html:not([data-view="wholesale"]) body.has-list{padding-bottom:var(--espa-h,0px)}
.entry-head{border-bottom:1px solid var(--ink)}
.entry-head .head-actions{margin-left:auto}
.gate{flex:1;display:flex;align-items:center;padding-block:clamp(40px,7vh,88px)}
.gate-inner{width:100%;display:grid;gap:22px}
.gate-inner .eyebrow{margin-bottom:0}
.gate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);margin-top:clamp(12px,3vw,32px)}
@media (max-width:760px){.gate-grid{grid-template-columns:minmax(0,1fr)}}
.gate-card{display:flex;flex-direction:column;gap:16px;min-width:0;padding:clamp(20px,2.6vw,32px);border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
@media (hover:hover){.gate-card:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--ink)}.gate-card:hover .gate-arrow{transform:translateX(4px)}}
.gate-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 12px;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.08em;color:var(--ink-2)}
.gate-t{font-family:var(--f-display);font-weight:800;font-size:clamp(2.25rem,4.6vw,3.75rem);line-height:.95;text-wrap:balance}
.gate-d{color:var(--ink-2);max-width:44ch}
.gate-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--hair);font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.08em}
.gate-arrow{font-family:var(--f-body);font-size:1.5rem;line-height:1;transition:transform .15s ease}
.entry-foot{border-top:1px solid var(--ink);padding-block:16px;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.04em;color:var(--ink-3)}
.entry-foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px}
@media (prefers-reduced-motion:reduce){.gate-card,.gate-arrow{transition:none}.gate-card:hover,.gate-card:hover .gate-arrow{transform:none}}

/* retail: the store, built on the same sheet as the wholesale page */
.rsite .card-top .t{color:var(--ink)}
.hours div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-block:6px;border-bottom:1px solid var(--hair);font-variant-numeric:tabular-nums}
.hours dt{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.hours dd{white-space:nowrap}
.hours .today{font-weight:600}
.open-now{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:.75rem;letter-spacing:.07em;font-weight:600}
.open-now::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.open-now.is-open{color:var(--ok)}
.open-now.is-closed{color:var(--danger)}
.drinks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(28px,3vw,40px) 36px}
.dsec{border-top:1.5px solid var(--ink);padding-top:14px;display:grid;gap:8px;align-content:start;min-width:0}
.dsec h3{font-size:1.625rem;display:flex;justify-content:space-between;align-items:center;gap:10px}
.dsec .note{font-family:var(--f-mono);font-size:.6875rem;line-height:1.5;color:var(--ink-3)}
.dlist{list-style:none;margin:0;padding:0}
.dlist li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 14px;padding-block:8px;border-bottom:1px solid var(--hair)}
.dlist .n{grid-column:1 / -1;font-weight:600;min-width:0;overflow-wrap:anywhere}
/* the price sits at the end of the ingredients line (its last line when the list wraps); beside the name when there are no ingredients */
.dlist .p{grid-column:2;grid-row:2;align-self:end;align-self:last baseline;font-family:var(--f-mono);font-size:.875rem;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.dlist .d{grid-column:1;grid-row:2;align-self:last baseline;min-width:0;font-size:.8125rem;color:var(--ink-2)}
.dlist li.nod .n{grid-column:1}
.dlist li.nod .p{grid-row:1;align-self:baseline}
.dlist .m{grid-column:1 / -1;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.04em;color:var(--ink-3)}
.rblock{margin-top:clamp(28px,4vw,44px)}
.rblock+.rblock{margin-top:clamp(56px,7vw,96px)}
/* the allergens note and the brunch photos sit between the brunch and the drinks */
#rcoffee{margin-top:clamp(56px,7vw,96px)}
.rstory{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:14px clamp(24px,4vw,64px);align-items:start;border-top:1.5px solid var(--ink);padding-top:20px;margin-bottom:clamp(32px,4vw,52px)}
@media (max-width:860px){.rstory{grid-template-columns:minmax(0,1fr)}}
.rstory>div{min-width:0}
.rstory .k{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;color:var(--frost);font-weight:600;margin-bottom:10px}
.rstory h3{font-size:clamp(2rem,3.4vw,2.75rem);max-width:14ch}
.rstory>p{color:var(--ink-2);font-size:1.125rem;line-height:1.6;max-width:60ch}
/* small label beside the brunch title, left of the story text: the opening-hours label of the store hero, at a smaller size */
.rstory-tagged{display:flex;flex-wrap:wrap;align-items:center;gap:16px 10px}
.rstory-tagged>div{min-width:0}
.tag-mini{width:fit-content;max-width:100%;margin-inline:auto;font-size:.6875rem;line-height:1.5;box-shadow:4px 4px 0 var(--ink);transform:rotate(3.5deg)}
@media (max-width:860px){.tag-mini{margin-inline:clamp(10px,4.5vw,56px) auto}}
.tag-mini .tag-bar{padding:5px 12px;gap:4px 18px}
.tag-mini-text{padding:9px 14px 11px;font-family:var(--f-body);font-size:1.0625rem;line-height:1.2;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.tag-mini{transform:none}}
.rlists{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(28px,3vw,40px) clamp(28px,4vw,56px)}
.rlists .dlist li{padding-block:12px}
.rlists .dlist .n{font-size:1.0625rem}
.rlists .dlist .d{font-size:.875rem}
/* store: brunch photos after the brunch list and the allergens note, before the drinks — a row on wide screens, a swipe strip on phones; dish name from the menu, no price */
.rphotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin:clamp(28px,4vw,44px) 0 0}
.rphotos[hidden]{display:none}
.rphoto{min-width:0;display:grid;gap:10px}
.rphoto img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--wash)}
.rphoto figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:1rem;font-weight:600;line-height:1.3}
@media (max-width:760px){
  .rphotos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
  .rphotos::-webkit-scrollbar{display:none}
  .rphoto{flex:0 0 78%;scroll-snap-align:start}
}
.visit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
@media (max-width:860px){.visit{grid-template-columns:minmax(0,1fr)}}
.visit>div{min-width:0}
.visit .hours{border-top:1.5px solid var(--ink);font-size:1.0625rem}
.visit .hours div{padding-block:12px}
.visit .open-now{margin-top:14px}
.visit-cta{margin-top:22px}
.cross{margin-top:clamp(44px,6vw,80px)}
/* intro: the motion logo plays on the entry page at most once a day; any tap or key skips it
   (while it fades after a skip it still catches the tap, so the tap never opens a gate card) */
.intro{display:none}
html[data-intro] .intro{display:block;position:fixed;inset:0;z-index:300;background:var(--paper);--tm-ink:var(--ink);--tm-flour:#a89f94;cursor:pointer;animation:intro-failsafe .4s ease 7.5s forwards}
html[data-intro] body{overflow:hidden}
.intro-svg{position:absolute;inset:0;display:block;width:100%;height:100%;transition:transform .7s cubic-bezier(.4,0,.2,1)}
.intro-skip{position:absolute;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;opacity:0;animation:intro-hint .5s ease 1.2s forwards}
html[data-intro="out"] .intro{opacity:0;pointer-events:none;transition:opacity .6s ease .05s}
html[data-intro="skip"] .intro{opacity:0;transition:opacity .3s ease}
html[data-intro="out"] .intro-svg{transform:scale(.96)}
html[data-intro="out"] .gate-inner,html[data-intro="skip"] .gate-inner{animation:gate-in .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes gate-in{from{opacity:0;transform:translateY(16px)}}
@keyframes intro-hint{to{opacity:1}}
@keyframes intro-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}