/* Jayce's Treats site stylesheet. Grown from homepage concept 04 (Ribbon Lettermark).
   Single source of truth: edit _build/src/site.css, then run build.py. */
@font-face{font-family:Outfit;src:url("fonts/outfit.woff2") format("woff2-variations"),url("fonts/outfit.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ===== tokens: light ===== */
:root{
  color-scheme:light;
  --bg:#FBF6EF; --bg-2:#F6EEE3; --surface:#FFFCF7; --oat:#EFE3D3; --blush:#F3DCDA; --tag:#FFFCF7;
  --text:#5B2B16; --text-2:#6B4433; --muted:#7A5444; --rule:rgba(91,43,22,.16); --rule-2:rgba(91,43,22,.32);
  --accent:#A8405A; --rose:#D98E9B; --rose-hover:#E3A1AC; --rose-ink:#3B1E12;
  --btn-bg:#5B2B16; --btn-text:#FBF6EF; --btn-hover:#3B1E12;
  --panel:#F3DCDA; --panel-glow:rgba(255,255,255,.45); --tag-ink:#5B2B16; --tag-rule:rgba(91,43,22,.3);
  --band:#3B1E12; --band-text:#FBF6EF; --band-muted:rgba(251,246,239,.82); --band-rule:rgba(251,246,239,.2); --band-accent:#E8A6B1;
  --summary-bg:#3B1E12; --summary-text:#FBF6EF; --summary-muted:rgba(251,246,239,.66); --summary-dt:#E8A6B1; --summary-rule:rgba(251,246,239,.18);
  --field-bg:#FFFCF7; --field-border:rgba(91,43,22,.38); --tile-on:#F3DCDA;
  --err:#A3283E; --err-bg:#FDF1F2; --focus:#5B2B16; --focus-alt:#A8405A;
  --final-bg:#33201A; --final-text:#F6EDE2;
  --foot-bg:#3B1E12; --foot-text:#FBF6EF; --foot-muted:rgba(251,246,239,.8); --foot-accent:#E8A6B1; --foot-rule:rgba(251,246,239,.2);
  --head-bg:rgba(251,246,239,.92); --mbar-bg:rgba(251,246,239,.97);
  --shadow:rgba(59,30,18,.28);
  --rb-edge:#5B2B16; --rb-body:#D98E9B; --rb-stitch:#FBF6EF;
  --line:#4A2414; --fill:#D98E9B; --fill2:#F3D9D9; --lw:2;
  --gut:16px; --max:1280px; --head:64px; --ease:cubic-bezier(.2,.7,.2,1);
  --gap:clamp(52px,6.6vw,92px);
}
/* ===== tokens: dark (same brand, after hours) ===== */
/* ===== dark sections: the same brand after hours, scoped to one band =====
   The page has no light/dark toggle. Instead roughly half the sections carry the
   dark token set, so the page alternates cream and chocolate as you scroll.
   Because every token is a custom property, everything inside a .sec-dark
   (buttons, fields, rules, focus rings, line art) re-themes automatically. */
.sec-dark,.final{
--bg:#21110A; --bg-2:#26150D; --surface:#2D1910; --oat:#33201A; --blush:#3B2320; --tag:#FBF4EA;
  --text:#F6EDE2; --text-2:#E3D3C5; --muted:#C4AA9A; --rule:rgba(246,237,226,.14); --rule-2:rgba(246,237,226,.3);
  --accent:#F0A9B5; --rose:#D98E9B; --rose-hover:#E6A5B0; --rose-ink:#21110A;
  --btn-bg:#F6EDE2; --btn-text:#2A150C; --btn-hover:#FFFFFF;
  --panel:#40231F; --panel-glow:rgba(217,142,155,.16); --tag-ink:#5B2B16; --tag-rule:rgba(91,43,22,.3);
  --band:#160A05; --band-text:#F6EDE2; --band-muted:rgba(246,237,226,.8); --band-rule:rgba(246,237,226,.16); --band-accent:#E8A6B1;
  --summary-bg:#33201A; --summary-text:#F6EDE2; --summary-muted:rgba(246,237,226,.62); --summary-dt:#F0A9B5; --summary-rule:rgba(246,237,226,.14);
  --field-bg:#26150D; --field-border:rgba(246,237,226,.3); --tile-on:#4A2A26;
  --err:#F4A3B0; --err-bg:#3A1A1E; --focus:#F0A9B5; --focus-alt:#F0A9B5;
  --final-bg:#33201A; --final-text:#F6EDE2;
  --shadow:rgba(0,0,0,.55);
  --rb-edge:#120804; --rb-body:#D98E9B; --rb-stitch:#F6EDE2;
  --line:#F6EDE2; --fill:#C9737F; --fill2:#5A3328;
  background:var(--bg);color:var(--text);border-top:0}
.sec-dark .num{background:var(--bg);border-color:var(--rule-2);color:var(--text)}
.sec-dark .label{color:var(--muted)}
.sec-dark .lede{color:var(--text-2)}
.sec-dark .slot{background:var(--oat)}
.sec-dark .mtable thead th{color:var(--muted);border-bottom-color:var(--rule-2)}
.sec-dark .mtable th,.sec-dark .mtable td{border-bottom-color:var(--rule)}
.sec-dark .iprod{background:var(--surface);border-color:var(--rule)}
.sec-dark .iprod.on{background:var(--tile-on);border-color:var(--rose)}
.sec-dark .review{background:var(--surface);border-color:var(--rule)}
.sec-dark .contact-card{background:var(--surface);border-color:var(--rule)}
.sec-dark .faq summary{border-color:var(--rule)}
.sec-dark .flag{color:#2A150C}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;-webkit-tap-highlight-color:rgba(217,142,155,.22)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 Outfit,system-ui,sans-serif;overflow-x:clip;transition:background-color .3s,color .3s}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
a,button,label,summary,input,select,textarea{touch-action:manipulation}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--btn-bg);color:var(--btn-text);padding:12px 18px;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{top:72px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.label{font-size:14px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.art{--lw:1.6}
.inline-link{display:inline-flex;align-items:center;min-height:44px;font-weight:500;text-underline-offset:4px;text-decoration-thickness:1px}
.inline-link:hover{text-decoration-thickness:2px}

/* placeholder flags: amber, visible until the client confirms the detail */
.flag{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;margin:0 4px;padding:2px 8px;border-radius:999px;background:#ffc93c;color:#3a2600;border:1px solid #e0a800;font:700 14px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.02em;text-transform:none;white-space:normal;font-style:normal;writing-mode:horizontal-tb}
.flag::before{content:"\26A0"}
html.noflags .flag{display:none!important}

/* buttons: one line, always */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:999px;border:1px solid var(--text);font-weight:500;font-size:16px;letter-spacing:.01em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,border-color .2s,transform .12s}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn-solid{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-text)}
.btn-solid:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn-line{background:transparent;color:var(--text)}
.btn-line:hover{background:var(--text);color:var(--bg)}
.btn-rose{background:var(--rose);border-color:var(--rose);color:var(--rose-ink)}
.btn-rose:hover{background:var(--rose-hover);border-color:var(--rose-hover)}
@media (max-width:420px){.btn{padding:0 20px}}

/* ===== header ===== */
.site-head{position:sticky;top:0;z-index:40;background:var(--head-bg);backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--rule)}
.head-in{display:flex;align-items:center;gap:10px;height:var(--head)}
.brand{display:flex;align-items:center;flex:none;padding:4px 0;text-decoration:none}
.brand img{height:54px;width:auto}
.brand .hz{display:none;height:34px}
.logo-dark{display:none!important}
@media (min-width:1200px){.brand .stk{display:none!important}.brand .hz.logo-light{display:block}}
.nav{margin-left:auto}
.nav>ul{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;white-space:nowrap}
.nav a:hover{background:var(--oat)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--accent);border-radius:0}
.head-cta{min-height:44px;padding:0 20px;font-size:15px}
.menu-btn{display:none}
.sheet-top,.nav .sheet-cta,.sheet-backdrop{display:none}
/* Treats mega menu: opens on hover and keyboard focus, no JS needed. Anchored to the header row, not the nav item. */
.head-in{position:relative}
@media (min-width:1100px){
  .nav .has-sub>a::after{content:"";width:7px;height:7px;margin:-4px 0 0 9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s}
  .nav .has-sub:hover>a::after,.nav .has-sub:focus-within>a::after{transform:translateY(3px) rotate(225deg)}
  .mega{position:absolute;left:50%;top:calc(100% - 20px);width:min(1040px,calc(100vw - 48px));padding-top:30px;transform:translate(-50%,8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s .12s,transform .25s var(--ease) .12s,visibility 0s .37s}
  .mega *{pointer-events:none}
  .nav .has-sub:hover .mega,.nav .has-sub:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition:opacity .18s,transform .25s var(--ease),visibility 0s}
  .nav .has-sub:hover .mega *,.nav .has-sub:focus-within .mega *{pointer-events:auto}
  .mega-in{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,.95fr);gap:8px;padding:12px;background:var(--surface);border:1px solid var(--rule);border-radius:22px;box-shadow:0 30px 60px -30px var(--shadow)}
  .mm-col{padding:16px 14px 12px}
  .mm-h{font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 8px 8px}
  .mm-h2{margin-top:18px}
  .mm-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px}
  .mm-list.one{grid-template-columns:1fr}
  .nav .mega a{text-transform:none;letter-spacing:0;white-space:normal}
  .nav .mm-list a{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 10px;border-radius:14px;font-size:16px;font-weight:400}
  .nav .mm-list a:hover,.nav .mm-list a:focus-visible{background:var(--blush)}
  .mm-ico{width:44px;height:44px;flex:none;--lw:2.2;transition:transform .3s var(--ease)}
  .nav .mm-list a:hover .mm-ico{transform:rotate(-6deg) scale(1.06)}
  .mm-list span{display:flex;flex-direction:column;gap:2px;min-width:0}
  .mm-list b{font-weight:500;font-size:17px;letter-spacing:-.01em}
  .mm-list small{font-size:14px;color:var(--muted);line-height:1.3}
  .nav .mm-all{display:inline-flex;min-height:44px;margin:6px 0 0 8px;padding:0 4px;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:4px;border-radius:6px}
  .nav .mm-all:hover{background:none;text-decoration-thickness:2px}
  .mm-occ{list-style:none;margin:0;padding:0}
  .nav .mm-occ a{display:flex;align-items:center;min-height:40px;padding:0 10px;font-size:16px;font-weight:400;border-radius:10px}
  .nav .mm-occ a:hover{background:var(--oat)}
  .nav .mm-occ li:last-child a{font-weight:600;text-decoration:underline;text-underline-offset:4px}
  .mm-feature{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:22px 20px;border-radius:16px;background:var(--band);color:var(--band-text);--line:var(--band-text);--fill:var(--rose);--fill2:transparent}
  .mm-bow{position:absolute;right:-18px;top:-12px;width:150px;height:150px;opacity:.35;--lw:1.4}
  .mm-k{font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--band-accent)}
  .mm-t{font-size:22px;font-weight:300;line-height:1.2;letter-spacing:-.02em;max-width:12em}
  .nav .mm-feature .btn{align-self:flex-start;text-transform:none;letter-spacing:.01em;font-size:15px;min-height:46px;padding:0 18px;border-radius:999px;color:var(--rose-ink)}
  .nav .mm-feature .btn:hover{background:var(--rose-hover)}
  .mm-feature :focus-visible{outline-color:var(--band-accent)}
}
@media (min-width:1100px) and (max-width:1279px){.nav a{padding:0 9px;letter-spacing:.08em}.head-cta{padding:0 16px}}
/* mobile + tablet: bottom sheet menu */
@media (max-width:1099px){
  .site-head{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
  body.locked .site-head{z-index:80}
    .menu-btn{width:48px;height:48px}
  /* The theme toggle used to carry margin-left:auto and push this group right.
     It was removed in round 9, which left the CTA and the burger stranded
     beside the logo on the left. The CTA now does that job. */
  .head-cta{min-height:48px;margin-left:auto}
  .head-in{gap:8px}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--rule-2);border-radius:999px;background:none;cursor:pointer;flex:none}
  .menu-btn span{display:block;width:18px;height:1.5px;background:var(--text);position:relative}
  .menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--text)}
  .menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
  .nav{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:70;display:block;margin:0;background:var(--bg);border:1px solid var(--rule);border-bottom:0;border-radius:22px 22px 0 0;padding:8px calc(var(--gut) + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(var(--gut) + env(safe-area-inset-left));box-shadow:0 -20px 60px -20px var(--shadow);transform:translateY(105%);visibility:hidden;transition:transform .35s var(--ease),visibility 0s .35s;overscroll-behavior:contain;max-height:88vh;overflow-y:auto}
  .nav.open{transform:none;visibility:visible;transition:transform .35s var(--ease),visibility 0s}
  .sheet-top{display:flex;align-items:center;justify-content:space-between;padding:4px 0 6px}
  .sheet-title{font-size:14px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
  .sheet-close{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--rule-2);border-radius:999px;background:none;color:var(--text);cursor:pointer}
  .sheet-close svg{width:20px;height:20px}
  .nav>ul{flex-direction:column;gap:0;padding:0}
  .nav a{min-height:56px;font-size:22px;font-weight:300;letter-spacing:-.01em;text-transform:none;padding:0 2px;border-radius:0;border-bottom:1px solid var(--rule)}
  .nav a[aria-current="page"]{box-shadow:none;font-weight:500}
  .mega .mm-col:not(.mm-treats),.mega .mm-feature,.mega .mm-h,.mega small,.mega .mm-ico,.mega .mm-all{display:none}
  .mm-list{list-style:none;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 14px;padding:0 0 4px 14px;border-bottom:1px solid var(--rule)}
  .nav .mm-list a{min-height:48px;font-size:17px;font-weight:400;border-bottom:0}
  .mm-list b{font-weight:400}
  .nav .sheet-cta{display:flex;width:100%;margin-top:18px;min-height:52px;font-size:16px;border-bottom:0;text-transform:none;letter-spacing:.01em;font-weight:500;justify-content:center;border-radius:999px}
  .sheet-backdrop{display:block;position:fixed;inset:0;z-index:65;background:rgba(20,9,4,.45);opacity:0;transition:opacity .3s}
  .sheet-backdrop.on{opacity:1}
  .sheet-backdrop[hidden]{display:none}
  body.locked{overflow:hidden}
  html:not(.js) .nav{position:static;transform:none;visibility:visible;box-shadow:none;border-radius:0}
}
@media (max-width:380px){.brand img{height:46px}.head-cta{padding:0 12px;font-size:14px}.head-in{gap:6px}}
@media (max-width:359px){.head-cta{display:none}.menu-btn{margin-left:auto}}

/* ===== ribbon layer ===== */
main{position:relative;display:block}

/* ===== home hero ===== */
.hero{position:relative}
.hero-grid{display:grid;grid-template-columns:1fr}
.hero-copy{padding:22px var(--gut) 30px;max-width:640px}
.hero h1{font-size:clamp(40px,10.4vw,82px);line-height:1.02;font-weight:250;letter-spacing:-.04em;margin-bottom:16px}
.hero h1 b,.hero h1 strong{font-weight:650;display:block;letter-spacing:-.045em}
.hero-sub{font-size:18px;line-height:1.55;max-width:33em;color:var(--text-2);margin-bottom:22px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-note{display:flex;align-items:center;gap:14px;margin-top:20px;font-size:15px;color:var(--muted)}
.hero-note .dots{display:flex;gap:5px;flex:none}
.hero-note .dots i{width:20px;height:2px;background:var(--rule-2)}
.hero-note .dots i:first-child{background:var(--accent)}
.hero-panel{position:relative;background:var(--panel);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:64px 24px 60px;transition:background-color .3s}
.hero-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 44%,var(--panel-glow),transparent 62%)}
.tag-wrap{position:relative;width:min(76vw,320px);transform:rotate(-3deg);transform-origin:50% -60px;animation:swing 2.4s var(--ease) both .2s;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.tag-wrap.held{cursor:grabbing}
.tag-wrap.held .tag{box-shadow:0 40px 70px -30px var(--shadow)}
.tag-wrap img{-webkit-user-drag:none;pointer-events:none}
.tag-string{position:absolute;left:50%;bottom:calc(100% - 34px);width:1px;height:260px;background:var(--text);transform:translateX(-50%)}
.tag{position:relative;background:var(--tag);padding:58px 26px 24px;clip-path:polygon(18% 0,82% 0,100% 13%,100% 100%,0 100%,0 13%);box-shadow:0 30px 60px -30px var(--shadow)}
.tag::before{content:"";position:absolute;left:50%;top:22px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--tag-rule)}
.tag img{width:100%;height:auto}
.tag .tag-art{width:72%;margin:0 auto;--line:#4A2414;--fill:#D98E9B;--fill2:#F3D9D9;--lw:1.8}
.tag-name{margin-top:12px;text-align:center;font-size:clamp(22px,6vw,28px);font-weight:500;letter-spacing:-.02em;color:var(--tag-ink)}
.tag-foot{margin-top:16px;padding-top:12px;border-top:1px dashed var(--tag-rule);display:flex;justify-content:space-between;gap:8px;font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--tag-ink)}
.panel-cap{position:absolute;left:24px;right:24px;bottom:22px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;font-size:14px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text)}
.panel-cap span:last-child{text-align:right}
@media (max-width:599px){.panel-cap{display:none}}
@keyframes swing{0%{transform:rotate(-9deg)}45%{transform:rotate(2deg)}75%{transform:rotate(-4deg)}100%{transform:rotate(-3deg)}}
@media (min-width:900px){
  .hero-grid{grid-template-columns:1.05fr 1fr;min-height:min(780px,calc(100vh - 64px))}
  .hero-copy{align-self:center;padding:64px 56px 72px max(40px,calc((100vw - var(--max))/2 + 40px));max-width:none}
  .hero h1{font-size:clamp(54px,5.5vw,82px);margin-bottom:22px}
  .hero-sub{font-size:19px;margin-bottom:28px}
  .hero-note{margin-top:28px}
  .hero-panel{padding:90px 40px}
  .tag-wrap{width:min(29vw,400px)}
  .tag{padding:74px 36px 30px}
  .tag::before{top:28px;width:20px;height:20px;margin-left:-10px}
  .panel-cap{left:40px;right:40px;bottom:32px}
}

/* ===== numbered sections ===== */
.sec{position:relative;padding:50px 0 54px;scroll-margin-top:var(--head)}
.sec-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.sec-grid>*{min-width:0}
.sec-mark{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.num{position:relative;z-index:6;flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:1px solid var(--text);font-size:14px;font-weight:500;letter-spacing:.06em;color:var(--text)}
.sec h2{font-size:clamp(31px,6.8vw,52px);line-height:1.02;font-weight:250;letter-spacing:-.038em;max-width:15em}
.sec h2 strong{font-weight:650;letter-spacing:-.04em}
.lede{margin-top:13px;font-size:17px;line-height:1.5;max-width:33em;color:var(--text-2)}
.sec-next{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:24px;font-size:15px;color:var(--muted)}
@media (max-width:899px){.lede{max-width:38ch}.sec-next .btn{flex:1 1 100%}}
@media (min-width:900px){
  .sec{padding:var(--gap) 0}
  .wrap{padding-left:40px;padding-right:40px}
  .sec-grid{grid-template-columns:140px minmax(0,1fr)}
  .sec-mark{display:block;margin:0}
  .sec-mark .num{width:60px;height:60px;font-size:15px}
  .sec-mark .label{display:block;margin-top:46px;writing-mode:vertical-rl;transform:rotate(180deg);margin-left:20px}
}
.sec-oat{background:var(--oat)}.sec-oat .num{background:var(--oat)}
.sec-alt{background:var(--bg-2);border-top:1px solid var(--rule)}.sec-alt .num{background:var(--bg-2)}
.sec-band{background:var(--band);color:var(--band-text)}
.sec-band .num{background:var(--band);border-color:var(--band-text);color:var(--band-text)}
.sec-band .lede,.sec-band p{color:var(--band-muted)}
.sec-band .btn-line{border-color:var(--band-text);color:var(--band-text)}
.sec-band .btn-line:hover{background:var(--band-text);color:var(--band)}
.sec-band :focus-visible{outline-color:var(--band-accent)}

/* ===== offers (home + treats hub) ===== */
.offers{list-style:none;margin:44px 0 0;padding:0;border-bottom:1px solid var(--rule)}
.offer{position:relative;border-top:1px solid var(--rule)}
.offer-h{margin:0;font:inherit}
.offer-toggle{position:relative;z-index:1;width:100%;display:flex;align-items:center;gap:14px;min-height:72px;padding:10px 0;background:none;border:0;text-align:left;cursor:pointer}
.offer-toggle:active .offer-name{opacity:.7}
.offer-name{flex:1;font-size:clamp(28px,8vw,40px);font-weight:300;letter-spacing:-.03em;line-height:1.05}
.offer-plus{position:relative;width:34px;height:34px;border-radius:50%;border:1px solid var(--text);flex:none}
.offer-plus::before,.offer-plus::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1px;margin:-.5px 0 0 -6.5px;background:var(--text);transition:transform .3s var(--ease)}
.offer-plus::after{transform:rotate(90deg)}
.offer.open .offer-plus::after{transform:rotate(0)}
.offer-body{position:relative;z-index:1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.offer.open .offer-body{grid-template-rows:1fr}
.offer-body>div{overflow:hidden}
.offer-inner{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:14px 18px;align-items:center;padding:0 0 26px}
.offer-inner p{color:var(--text-2);font-size:16px;line-height:1.55;max-width:38ch}
.offer-inner p a{display:inline-block;margin-top:6px}
.offer-art{width:92px;height:92px;grid-row:1;grid-column:2}
.offer-inner .add{grid-column:1/-1;justify-self:start}
.add{min-height:48px;padding:0 20px;font-size:15px}
.add[data-added="true"]{background:var(--rose);border-color:var(--rose);color:var(--rose-ink)}
html:not(.js) .offer-body{grid-template-rows:1fr}
@media (min-width:900px) and (hover:hover){
  .offer{display:grid;grid-template-columns:minmax(0,1fr) 270px 104px 176px;align-items:center;min-height:128px;column-gap:24px}
  .offer::before{content:"";position:absolute;inset:0 -24px;background:var(--blush);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
  .offer-toggle{min-height:128px;padding:18px 0}
  .offer-name{font-size:clamp(44px,4.7vw,70px);font-weight:250;text-wrap:balance;transition:transform .45s var(--ease)}
  .offer-plus{display:none}
  .offer-body,.offer.open .offer-body{display:contents}
  .offer-body>div,.offer-inner{display:contents}
  .offer-inner p{position:relative;z-index:1;font-size:16px;line-height:1.5;max-width:none;opacity:0;transform:translateX(-14px);transition:opacity .35s,transform .45s var(--ease)}
  .offer-art{position:relative;z-index:1;width:104px;height:104px;grid-row:auto;grid-column:auto;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .5s var(--ease)}
  .offer .add{position:relative;z-index:1;justify-self:end;grid-column:auto}
  .offer:hover::before,.offer:focus-within::before,.offer.open::before{transform:scaleX(1)}
  .offer:hover .offer-name,.offer:focus-within .offer-name,.offer.open .offer-name{transform:translateX(14px)}
  .offer:hover p,.offer:focus-within p,.offer.open p,.offer:hover .offer-art,.offer:focus-within .offer-art,.offer.open .offer-art{opacity:1;transform:none}
  .offers:hover .offer.open:not(:hover):not(:focus-within)::before{transform:scaleX(0)}
  .offers:hover .offer.open:not(:hover):not(:focus-within) p,.offers:hover .offer.open:not(:hover):not(:focus-within) .offer-art{opacity:0}
  .offers:hover .offer.open:not(:hover):not(:focus-within) .offer-name{transform:none}
  .offer:hover .add:not([data-added="true"]){background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-text)}
}
@media (min-width:900px) and (max-width:1199px) and (hover:hover){.offer{grid-template-columns:minmax(0,1fr) 220px 80px auto;column-gap:18px}.offer-art{width:80px;height:80px}.offer-name{font-size:clamp(40px,4.4vw,52px)}}

/* ===== parties equation ===== */
.party{display:grid;gap:40px}
.scene{position:relative;margin:0;background:var(--surface);border-radius:260px 260px 0 0;padding:44px 26px 22px;border:1px solid var(--rule-2)}
.scene svg{width:100%;height:auto}
.scene figcaption{margin-top:10px;text-align:center;font-size:14px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.equation{list-style:none;margin:28px 0 30px;padding:0}
.equation li{display:grid;grid-template-columns:40px 1fr;gap:4px 14px;align-items:baseline;padding:16px 0;border-top:1px solid var(--rule)}
.equation li:last-child{border-bottom:1px solid var(--rule)}
.equation .op{font-size:28px;font-weight:200;line-height:1;color:var(--accent)}
.equation h3{font-size:21px;font-weight:500;letter-spacing:-.01em}
.equation p{grid-column:2;font-size:16px;color:var(--text-2)}
.equation .total h3{font-weight:700}
@media (min-width:900px){.party{grid-template-columns:1fr 1fr;gap:72px;align-items:start}.scene{padding:60px 40px 26px}}

/* ===== occasions word list ===== */
.occ{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0}
.occ li{display:flex;align-items:baseline}
.occ li:not(:last-child)::after{content:"";width:7px;height:7px;margin:0 18px 0 16px;border-radius:50%;background:var(--rose);flex:none;align-self:center}
.occ a{font-size:clamp(28px,7.4vw,58px);font-weight:250;letter-spacing:-.035em;line-height:1.22;text-decoration:none;background:linear-gradient(var(--rose),var(--rose)) 0 94%/0 2px no-repeat;transition:background-size .35s var(--ease)}
.occ a:hover,.occ a:focus-visible{background-size:100% 2px}
.occ a:active{opacity:.7}
.occ-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:40px;padding-top:24px;border-top:1px solid var(--rule)}
.occ-foot p{font-size:17px;color:var(--text-2)}
@media (max-width:699px){.occ{display:block;border-bottom:1px solid var(--rule)}.occ li{display:block;border-top:1px solid var(--rule)}.occ li:not(:last-child)::after{display:none}.occ a{display:flex;align-items:center;justify-content:space-between;min-height:60px;font-size:28px;background:none}.occ a::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--rose);flex:none}.occ-foot{border-top:0;margin-top:28px;padding-top:0}}

/* ===== steps ===== */
.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:0}
.steps li{position:relative;padding:28px 0 30px;border-top:1px solid var(--band-rule)}
.steps .n{display:block;font-size:72px;font-weight:200;line-height:.9;color:var(--band-accent);letter-spacing:-.04em;margin-bottom:16px}
.steps h3{font-size:23px;font-weight:500;letter-spacing:-.01em;line-height:1.25;margin-bottom:10px}
.steps p{max-width:28em;font-size:16px;line-height:1.55}
.how-cta{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr);gap:40px}.steps .n{font-size:120px}.steps p{font-size:17px}}
.steps-light li{border-top-color:var(--rule)}
.steps-light .n{color:var(--accent)}
.steps-light p{color:var(--text-2)}

/* ===== reviews + gallery ===== */
.reviews{display:grid;gap:16px;margin-top:44px}
@media (max-width:899px){.reviews{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px;scrollbar-width:thin;margin-right:calc(-1 * var(--gut))}.reviews .review{flex:0 0 84%;scroll-snap-align:start}.reviews .review:last-child{margin-right:var(--gut)}}
.review{position:relative;margin:0;background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:30px 26px 26px}
.review svg{width:28px;height:22px;margin-bottom:16px}
.review blockquote{margin:0}
.review p{font-size:21px;font-weight:300;line-height:1.4;letter-spacing:-.01em}
.review figcaption{margin-top:20px;font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.swipe-hint{display:none}
@media (max-width:899px){.swipe-hint{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:14px;color:var(--muted)}.sdots{display:flex;gap:6px}.sdots i{width:6px;height:6px;border-radius:50%;background:var(--rule-2);transition:background .2s,width .2s}.sdots i.on{width:18px;border-radius:3px;background:var(--accent)}}
@media (min-width:900px){.reviews{grid-template-columns:repeat(3,1fr);gap:20px}}
.reviews.grid-all{display:grid}
@media (max-width:899px){.reviews.grid-all{margin-right:0}.reviews.grid-all .review:last-child{margin-right:0}}
.gal-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:72px 0 22px}
.gal-head h3{font-size:24px;font-weight:500;letter-spacing:-.015em}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.slot{position:relative;margin:0;aspect-ratio:4/5;background:var(--oat);overflow:hidden;display:flex;align-items:flex-end;padding:18px}
.slot::before{content:"";position:absolute;inset:10px;border:1px solid var(--rule)}
.slot svg{position:absolute;right:12%;top:12%;width:46%;height:auto;opacity:.38;--lw:1.4}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot figcaption{position:relative;font-size:14px;font-weight:500;letter-spacing:.04em;color:var(--muted);line-height:1.35}
.slot.feature{grid-column:1/-1;aspect-ratio:5/4}
@media (max-width:899px){.slot.wide{grid-column:1/-1;aspect-ratio:16/9}}
.ig{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px;font-size:16px}
.ig a{font-weight:500}
@media (min-width:900px){
  .gallery{grid-template-columns:repeat(4,1fr);grid-auto-rows:250px;grid-auto-flow:dense;gap:16px}
  .slot{aspect-ratio:auto;padding:24px}
  .slot.feature{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  .slot.wide{grid-column:span 2}
  .slot.wide svg{width:30%;right:8%;top:14%}
  .gallery.three{grid-template-columns:repeat(3,1fr);grid-auto-rows:300px}
}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 24px}
.filters button{min-height:48px;padding:0 18px;border-radius:999px;border:1px solid var(--rule-2);background:transparent;color:var(--text);font-size:15px;cursor:pointer}
.filters button:hover{border-color:var(--text)}
.filters button[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--bg);font-weight:600}
.slot[hidden]{display:none}
@media (max-width:599px){.filters{flex-wrap:nowrap;overflow-x:auto;margin-right:calc(-1 * var(--gut));padding-right:var(--gut);scrollbar-width:none}.filters button{flex:none}}

/* ===== planner ===== */
.planner{display:grid;gap:20px;margin-top:28px}
.pform{background:var(--bg);border:1px solid var(--rule-2);border-radius:20px;padding:22px 18px;min-width:0}
.progress{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.progress button{width:100%;min-height:44px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:7px;padding:0;background:none;border:0;cursor:pointer;text-align:left}
.progress .bar{display:block;width:100%;height:2px;background:var(--rule-2);transition:background .3s}
.progress .t{font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.progress .done .bar{background:var(--text)}
.progress [aria-current="step"] .bar{background:var(--accent);height:3px}
.progress [aria-current="step"] .t{color:var(--text)}
@media (max-width:599px){.progress .t{display:none}.progress button{justify-content:center}}
.step{border:0;margin:0;padding:0;min-width:0}
.js .step:not(.cur){display:none}
.step legend{padding:0;margin:0 0 6px;font-size:14px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.step .q{font-size:clamp(26px,5.6vw,38px);font-weight:250;letter-spacing:-.035em;line-height:1.08;margin-bottom:16px;outline:none}
.step .hint{font-size:15px;color:var(--muted);margin:-10px 0 18px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{position:relative;display:block;cursor:pointer}
.tile input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.tile span{display:flex;align-items:center;gap:10px;min-height:56px;height:100%;padding:12px 14px;border:1px solid var(--rule-2);border-radius:12px;background:var(--surface);font-size:16px;font-weight:400;line-height:1.25;transition:border-color .2s,background .2s,transform .12s}
.tile:hover span{border-color:var(--text)}
.tile:active span{transform:scale(.98)}
.tile input:checked+span{border-color:var(--text);background:var(--tile-on);font-weight:600}
.tile input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.tile.check span::after{content:"";margin-left:auto;width:20px;height:20px;flex:none;border:1px solid var(--text);border-radius:5px}
.tile.check input:checked+span::after{background:var(--text);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips .tile span{border-radius:999px;padding:0 20px;min-height:50px}
.field{display:flex;flex-direction:column;gap:6px;margin-top:18px}
.field label{font-size:15px;font-weight:500}
.field label .req{color:var(--err);font-weight:700}
.field input,.field textarea{width:100%;min-height:52px;padding:12px 16px;border:1px solid var(--field-border);border-radius:10px;background:var(--field-bg);font-size:17px;color:var(--text)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.85}
.field textarea{min-height:110px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--focus-alt);outline-offset:1px;border-color:var(--text)}
.field [aria-invalid="true"]{border-color:var(--err);background:var(--err-bg)}
.err{font-size:14px;font-weight:600;color:var(--err)}
.err[hidden]{display:none}
.two{display:grid;gap:0 14px}
@media (min-width:600px){.two{grid-template-columns:1fr 1fr}}
.pnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid var(--rule)}
.pnav .back{background:none;border:0;min-height:48px;min-width:48px;padding:0 6px;font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.pnav .back[hidden]{visibility:hidden;display:inline-flex}
.pnav .count{font-size:14px;color:var(--muted);margin-left:auto;margin-right:4px}
.submit-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px}
.submit-row[hidden]{display:none}
@media (max-width:599px){.pnav{flex-wrap:wrap}.submit-row{flex-basis:100%;flex-direction:column-reverse;align-items:stretch}.submit-row .flag{align-self:center}}
html:not(.js) .pnav .back,html:not(.js) .pnav .next,html:not(.js) .progress{display:none}
html:not(.js) .step{margin-bottom:34px}
.summary{position:relative;background:var(--summary-bg);color:var(--summary-text);border-radius:20px;padding:24px 22px 22px;align-self:start;--line:var(--summary-text);--fill:var(--rose);--fill2:transparent}
.summary h3{font-size:21px;font-weight:500;letter-spacing:-.01em;margin-bottom:4px;display:flex;align-items:center;gap:10px}
.summary h3 svg{width:30px;height:30px;--lw:2.4}
.summary .sub{font-size:14px;color:var(--summary-muted);margin-bottom:12px}
.summary dl{margin:0}
.srow{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 0;border-top:1px solid var(--summary-rule);align-items:center}
.srow dt{font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--summary-dt)}
.srow dd{margin:0;grid-column:1;font-size:16px;font-weight:400;line-height:1.35}
.srow dd.empty{color:var(--summary-muted)}
.srow .edit{grid-column:2;grid-row:1/span 2;min-height:48px;min-width:48px;padding:0 6px;background:none;border:0;color:var(--summary-text);font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.srow.flash dd{animation:flash 1.2s var(--ease)}
@keyframes flash{0%{color:var(--summary-dt)}100%{color:inherit}}
.summary :focus-visible{outline-color:var(--summary-dt)}
.sum-meter{display:flex;gap:4px;margin-top:14px}
.sum-meter i{flex:1;height:2px;background:var(--summary-rule);transition:background .3s}
.sum-meter i.on{background:var(--summary-dt)}
.success{padding:10px 4px}
.success h3{font-size:clamp(28px,6vw,40px);font-weight:250;letter-spacing:-.035em;line-height:1.1;margin-bottom:12px;outline:none}
.success p{color:var(--text-2);max-width:32em}
.success .btn{margin-top:20px}
#order,#pform{scroll-margin-top:calc(var(--head) + 12px)}
@media (min-width:900px){
  .planner{grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
  .pform{padding:36px 40px 34px}
  .tiles{grid-template-columns:repeat(3,1fr);gap:12px}
  .summary{position:sticky;top:calc(var(--head) + 24px);padding:30px 28px 26px}
}
@media (max-width:899px){
  .summary{order:-1;padding:18px 18px 14px}
  .summary .sub{display:none}
  .summary dl{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
  .srow{grid-template-columns:1fr;padding:9px 0}
  .srow .edit{display:none}
  .srow.wide{grid-column:1/-1}
  .srow dd{font-size:15px}
  .srow.hide-sm{display:none}
  .pnav{position:sticky;bottom:0;z-index:3;background:var(--bg);margin:22px -18px -22px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));border-radius:0 0 20px 20px}
  .pnav .next{flex:1 1 auto;max-width:220px}
}

/* ===== FAQ ===== */
.faq{margin-top:26px;border-bottom:1px solid var(--rule)}
.faq details{border-top:1px solid var(--rule)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:14px 0;cursor:pointer;font-size:clamp(20px,4.8vw,25px);font-weight:400;letter-spacing:-.02em;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--text);background:linear-gradient(var(--text),var(--text)) center/12px 1px no-repeat,linear-gradient(var(--text),var(--text)) center/1px 12px no-repeat}
.faq details[open] summary::after{background:linear-gradient(var(--rose-ink),var(--rose-ink)) center/12px 1px no-repeat;background-color:var(--rose);border-color:var(--rose)}
.faq .a{padding:0 0 24px;max-width:40em;color:var(--text-2)}
@media (max-width:899px){.faq .a{max-width:38ch}}
@media (min-width:900px){.faq summary{min-height:72px}}
.faq-mark{display:block;font-size:14px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px}
.faq-group+.faq-group{margin-top:56px}
.faq-group h3{font-size:14px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.faq-group .faq{margin-top:14px}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.jump a{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border:1px solid var(--rule-2);border-radius:999px;text-decoration:none;font-size:15px}
.jump a:hover{border-color:var(--text);background:var(--oat)}

/* ===== final CTA + footer ===== */
.final{background:var(--final-bg);color:var(--final-text);--line:#F6EDE2;padding:60px 0 64px;position:relative;overflow:hidden;border-top:1px solid var(--rule)}
.final-in{position:relative;display:grid;gap:26px;align-items:center}
.final h2{font-size:clamp(40px,9vw,96px);font-weight:250;letter-spacing:-.045em;line-height:1}
.final h2 b{font-weight:650}
.final p{font-size:18px;max-width:30em;margin-top:14px;color:var(--text-2)}
.final-ctas{display:flex;flex-wrap:wrap;gap:12px}
.final-art{position:absolute;right:-40px;bottom:-30px;width:300px;height:300px;opacity:.22;--lw:1.2}
@media (min-width:900px){.final{padding:120px 0}.final-in{grid-template-columns:1fr auto;gap:60px}.final-in>div:first-child{padding-left:140px}.final-art{right:auto;left:-120px;top:50%;bottom:auto;transform:translateY(-50%);width:380px;height:380px;opacity:.14}}
.foot{background:var(--foot-bg);color:var(--foot-text);padding:60px 0 36px}
.foot-grid{display:grid;gap:36px}
.foot-brand{display:flex;flex-direction:column;align-items:center;text-align:center}
.foot .foot-logo{width:150px;height:auto;margin:0 auto}
.foot h2{font-size:14px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--foot-accent);margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:4px 0}
.foot li a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;text-decoration:none}
.foot li a[href^="tel:"],.foot li a[href^="mailto:"]{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.foot li a:hover{text-decoration:underline;text-underline-offset:4px}
.foot .foot-cta{margin-top:22px;display:flex;justify-content:center}
.foot .foot-cta .btn{border-color:var(--foot-text);color:var(--foot-text)}
.foot .foot-cta .btn:hover{background:var(--foot-text);color:var(--foot-bg)}
.foot-base{margin-top:44px;padding-top:22px;border-top:1px solid var(--foot-rule);font-size:14px;color:var(--foot-muted);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}
.foot-base a{color:inherit;text-underline-offset:3px}
.foot-base nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.foot-base nav a{display:inline-flex;align-items:center;min-height:44px}
.foot :focus-visible{outline-color:var(--foot-accent)}
@media (max-width:899px){.foot li a{min-height:48px}}
@media (min-width:900px){.foot-grid{grid-template-columns:1.2fr 1fr 1fr 1.3fr}.foot{padding:80px 0 40px}}

/* ===== mobile sticky CTA ===== */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:10px;padding:10px calc(var(--gut) + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(var(--gut) + env(safe-area-inset-left));background:var(--mbar-bg);border-top:1px solid var(--rule);box-shadow:0 -10px 30px -18px var(--shadow);transform:translateY(110%);transition:transform .3s var(--ease)}
.mbar .btn{min-height:50px;padding:0 16px;font-size:16px}
.mbar .q,.mbar .c{flex:1}
.mbar .t{flex:1;position:relative;display:flex}
.mbar .t .btn{flex:1}
.mbar .t .flag{position:absolute;top:-16px;right:-4px;margin:0;pointer-events:none}
.mbar.show{transform:none}
@media (max-width:768px){body{padding-bottom:84px}}
@media (min-width:769px){.mbar{display:none}}

/* =====================================================================
   INTERIOR PAGES
   ===================================================================== */
.crumbs{font-size:14px;color:var(--muted);margin-bottom:18px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"";width:5px;height:5px;margin:0 10px;border-radius:50%;background:var(--rose)}
.crumbs a{display:inline-flex;align-items:center;min-height:32px;text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current]{color:var(--text)}
.ph-h1{font-size:clamp(40px,10vw,84px);line-height:1.02;font-weight:250;letter-spacing:-.04em}
.ph-h1 strong,.ph-h1 b{font-weight:650;letter-spacing:-.045em}
.ph-sub{margin-top:16px;font-size:18px;line-height:1.55;max-width:34em;color:var(--text-2)}
.ph-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
@media (max-width:899px){.ph-sub{max-width:38ch}}

/* hero A: split with hanging tag (treat pages) */
.ph-split .hero-copy{padding-bottom:34px}
.ph-split .hero-panel{padding:58px 24px 54px}
.ph-split .tag-wrap{width:min(62vw,270px)}
@media (min-width:900px){.ph-split .hero-grid{min-height:min(640px,calc(100vh - 64px))}.ph-split .tag-wrap{width:min(24vw,330px)}}

/* hero B: editorial index strip (treats hub) */
.ph-index{background:var(--oat);padding:26px 0 0;border-bottom:1px solid var(--rule)}
.ph-index .ph-h1{max-width:12em}
.istrip{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule-2)}
.istrip li{border-right:1px solid var(--rule)}
.istrip li:nth-child(3n){border-right:0}
.istrip li:nth-child(n+4){border-top:1px solid var(--rule)}
.istrip a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:132px;padding:16px 8px;text-decoration:none;text-align:center;font-size:15px;font-weight:500;line-height:1.2;transition:background .25s}
.istrip a:hover{background:var(--blush)}
.istrip svg{width:56px;height:56px;--lw:1.7;transition:transform .35s var(--ease)}
.istrip a:hover svg{transform:translateY(-4px) rotate(-4deg)}
@media (min-width:900px){.ph-index{padding:64px 0 0}.istrip{grid-template-columns:repeat(6,1fr)}.istrip li{border-right:1px solid var(--rule)!important;border-top:0!important}.istrip li:last-child{border-right:0!important}.istrip a{min-height:200px;font-size:16px}.istrip svg{width:84px;height:84px}}

/* hero C: arch frame (balloon arches, about) */
.ph-arch{padding:22px 0 0}
.ph-arch-grid{display:grid;gap:28px}
.arch-frame{position:relative;margin:0;background:var(--panel);border-radius:999px 999px 0 0;overflow:hidden;aspect-ratio:4/4.4;display:flex;align-items:center;justify-content:center;padding:40px 24px 30px;border:1px solid var(--rule-2)}
.arch-frame::before{content:"";position:absolute;inset:14px 14px 0;border:1px solid var(--tag-rule);border-bottom:0;border-radius:999px 999px 0 0}
.arch-frame svg{width:82%;height:auto;--lw:1.4}
.arch-frame figcaption{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
@media (max-width:899px){.ph-arch .arch-frame{max-width:340px;width:84%;margin:0 auto;aspect-ratio:4/3.6}}
@media (min-width:900px){.ph-arch{padding:72px 0 0}.ph-arch-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:72px;align-items:end}.ph-arch .ph-copy{padding-bottom:72px}}

/* hero D: dark band (occasions, reviews) */
.ph-band{background:var(--band);color:var(--band-text);padding:26px 0 52px;position:relative;overflow:hidden}
.ph-band .crumbs{color:var(--band-muted)}
.ph-band .crumbs [aria-current]{color:var(--band-text)}
.ph-band .ph-sub{color:var(--band-muted)}
.ph-band .btn-line{border-color:var(--band-text);color:var(--band-text)}
.ph-band .btn-line:hover{background:var(--band-text);color:var(--band)}
.ph-band .btn-rose:focus-visible,.ph-band :focus-visible{outline-color:var(--band-accent)}
.ph-band .band-art{position:absolute;right:-60px;bottom:-50px;width:280px;height:280px;opacity:.2;--line:var(--band-text);--fill:var(--rose);--fill2:transparent;--lw:1.2}
.ph-band .quote-big{display:block;width:64px;height:50px;margin-bottom:18px}
@media (min-width:900px){.ph-band{padding:72px 0 96px}.ph-band .band-art{right:6%;bottom:auto;top:50%;transform:translateY(-50%);width:420px;height:420px;opacity:.16}}

/* hero E: compact (gallery, faq, plan, legal) */
.ph-compact{padding:26px 0 8px}
@media (min-width:900px){.ph-compact{padding:72px 0 16px}.ph-compact .ph-in{padding-left:140px}}
.ph-compact .ph-h1{font-size:clamp(40px,9vw,76px)}

/* treat cards (hub + pairs) */
.tcards{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:14px}
.tcard{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:8px 16px;align-items:center;padding:22px 20px;background:var(--surface);border:1px solid var(--rule);border-radius:16px;text-decoration:none;transition:border-color .25s,transform .25s var(--ease),box-shadow .25s}
.tcard:hover{border-color:var(--text);transform:translateY(-3px);box-shadow:0 20px 40px -26px var(--shadow)}
.tcard .k{grid-column:1/-1;font-size:14px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.tcard h3{font-size:clamp(26px,6.6vw,34px);font-weight:300;letter-spacing:-.03em;line-height:1.08}
.tcard p{grid-column:1;font-size:16px;line-height:1.5;color:var(--text-2)}
.tcard svg{grid-column:2;grid-row:2/span 2;width:96px;height:96px;transition:transform .4s var(--ease)}
.tcard:hover svg{transform:rotate(-5deg) scale(1.04)}
.tcard .go{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-top:8px;font-size:15px;font-weight:500}
.tcard .go i{display:block;width:26px;height:1px;background:currentColor;transition:width .3s var(--ease)}
.tcard:hover .go i{width:40px}
@media (min-width:700px){.tcards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.tcards{grid-template-columns:repeat(3,1fr);gap:18px}.tcard{grid-template-columns:1fr;padding:28px 26px}.tcard svg{grid-column:1;grid-row:auto;width:110px;height:110px;margin:6px 0 10px}.tcard p{grid-column:1}}

/* option rows (make it yours) */
.opts{list-style:none;margin:36px 0 0;padding:0;counter-reset:o}
.opts li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;padding:20px 0;border-top:1px solid var(--rule)}
.opts li:last-child{border-bottom:1px solid var(--rule)}
.opts li::before{counter-increment:o;content:counter(o,lower-roman);grid-row:1/span 2;font-size:22px;font-weight:200;color:var(--accent);line-height:1.2}
.opts h3{font-size:21px;font-weight:500;letter-spacing:-.01em}
.opts p{grid-column:2;color:var(--text-2);font-size:16px;line-height:1.55}
@media (min-width:900px){.opts li{grid-template-columns:60px minmax(0,.8fr) minmax(0,1.2fr);align-items:baseline;padding:26px 0}.opts li::before{grid-row:auto}.opts p{grid-column:3}.opts h3{font-size:24px}}

/* about-this-treat two-column */
.duo{display:grid;gap:28px;margin-top:28px}
.duo p{color:var(--text-2);max-width:38ch}
.duo p+p{margin-top:14px}
.goodfor{border:1px solid var(--rule-2);border-radius:16px;padding:22px 22px 18px;background:var(--surface)}
.goodfor h3{font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.goodfor ul{list-style:none;margin:0;padding:0}
.goodfor a{display:flex;align-items:center;justify-content:space-between;min-height:52px;border-bottom:1px solid var(--rule);text-decoration:none;font-size:19px;font-weight:300;letter-spacing:-.01em}
.goodfor li:last-child a{border-bottom:0}
.goodfor a::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--rose);flex:none}
.goodfor a:hover{color:var(--accent)}
@media (min-width:900px){.duo{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:64px;align-items:start}.duo p{max-width:34em;font-size:18px}}

/* occasion blocks */
.oblocks{list-style:none;margin:40px 0 0;padding:0}
.oblock{display:grid;gap:12px;padding:28px 0;border-top:1px solid var(--rule);scroll-margin-top:calc(var(--head) + 12px)}
.oblock:last-child{border-bottom:1px solid var(--rule)}
.oblock h3{font-size:clamp(32px,8vw,56px);font-weight:250;letter-spacing:-.035em;line-height:1.05}
.oblock p{color:var(--text-2);max-width:38ch}
.oblock .mix{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.oblock .mix a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 8px;border:1px solid var(--rule-2);border-radius:999px;text-decoration:none;font-size:15px;background:var(--surface)}
.oblock .mix a:hover{border-color:var(--text)}
.oblock .mix svg{width:28px;height:28px;--lw:2.4}
.oblock .btn{justify-self:start;margin-top:8px}
@media (min-width:900px){.oblock{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px 40px;align-items:center;padding:36px 0}.oblock h3{grid-row:1/span 2}.oblock .btn{grid-column:3;grid-row:1/span 2;margin:0}.oblock p{max-width:30em}}

/* about values */
.values{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:14px}
.values li{padding:26px 22px;border:1px solid var(--rule);border-radius:16px;background:var(--surface)}
.values svg{width:64px;height:64px;margin-bottom:14px}
.values h3{font-size:22px;font-weight:500;letter-spacing:-.01em;margin-bottom:8px}
.values p{color:var(--text-2);font-size:16px;line-height:1.55}
@media (min-width:900px){.values{grid-template-columns:repeat(3,1fr);gap:20px}}
.story p{color:var(--text-2);max-width:38ch}
.story p+p{margin-top:14px}
@media (min-width:900px){.story p{max-width:36em;font-size:18px}}
.portrait{margin:0}

/* plan page aside */
.plan-aside{display:grid;gap:14px;margin-top:22px}
.contact-card{border:1px solid var(--rule-2);border-radius:20px;padding:24px 22px;background:var(--surface)}
.contact-card h2{font-size:24px;font-weight:500;letter-spacing:-.015em;margin-bottom:6px}
.contact-card>p{color:var(--text-2);font-size:16px}
.contact-card ul{list-style:none;margin:16px 0 0;padding:0}
.contact-card li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:12px 0;border-top:1px solid var(--rule);font-size:16px;align-items:baseline}
.contact-card li span:first-child{font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media (min-width:900px){.plan-aside{grid-template-columns:repeat(2,1fr);gap:20px;margin-top:28px}}

/* prose (legal) */
.prose{max-width:44em}
.prose h2{font-size:clamp(24px,5vw,30px);font-weight:500;letter-spacing:-.02em;line-height:1.2;margin:44px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--text-2);font-size:17px;line-height:1.65}
.prose p+p{margin-top:12px}
.prose ul{margin:12px 0 0;padding:0;list-style:none}
.prose li{position:relative;padding-left:22px;margin-top:8px}
.prose li::before{content:"";position:absolute;left:2px;top:.68em;width:7px;height:7px;border-radius:50%;background:var(--rose)}
.prose a:not(.btn){font-weight:500;text-underline-offset:3px}
.legal-note{margin-top:40px;padding:18px 20px;border:1px dashed var(--rule-2);border-radius:12px;font-size:15px;color:var(--muted)}
@media (min-width:900px){.prose-wrap{padding-left:140px}}

/* centered states (thank you, 404) */
.center-state{padding:56px 0 72px;text-align:center}
.center-state .bow{width:120px;height:120px;margin:0 auto 18px}
.center-state .ph-h1{max-width:12em;margin:0 auto}
.center-state .ph-sub{margin:16px auto 0}
.center-state .ph-ctas{justify-content:center}
.center-state .next-steps{list-style:none;margin:40px auto 0;padding:0;max-width:760px;display:grid;gap:12px;text-align:left}
.center-state .next-steps li{display:grid;grid-template-columns:40px 1fr;gap:4px 14px;padding:18px 20px;border:1px solid var(--rule);border-radius:14px;background:var(--surface)}
.center-state .next-steps .n{font-size:28px;font-weight:200;color:var(--accent);line-height:1}
.center-state .next-steps h2{font-size:19px;font-weight:500}
.center-state .next-steps p{grid-column:2;color:var(--text-2);font-size:16px}
.center-state .quick{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:36px}
@media (min-width:900px){.center-state{padding:110px 0 120px}.center-state .next-steps{grid-template-columns:repeat(3,1fr)}.center-state .next-steps li{grid-template-columns:1fr}.center-state .next-steps p{grid-column:1}}

/* hero F: contact (ways to reach us) */
.ph-contact{background:var(--oat);padding:26px 0 40px;border-bottom:1px solid var(--rule)}
.pc-grid{display:grid;gap:28px}
.ph-contact .btn svg{width:18px;height:18px}
.ways{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.way{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:16px 18px;background:var(--surface);border:1px solid var(--rule-2);border-radius:16px;text-decoration:none;transition:border-color .2s,transform .25s var(--ease),box-shadow .25s}
.way:hover{border-color:var(--text);transform:translateY(-2px);box-shadow:0 18px 36px -24px var(--shadow)}
.way-ico{grid-row:1/span 2;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--blush);color:var(--text)}
.way-ico svg{width:24px;height:24px}
.way-k{font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.way-v{font-size:clamp(19px,5vw,24px);font-weight:400;letter-spacing:-.015em;line-height:1.25;overflow-wrap:anywhere}
@media (min-width:900px){.ph-contact{padding:64px 0 72px}.pc-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;align-items:center}.ph-contact .ph-h1{font-size:clamp(48px,5.4vw,80px)}}
/* contact form */
.cform-wrap{display:grid;gap:22px;margin-top:36px}
.cform{background:var(--bg);border:1px solid var(--rule-2);border-radius:20px;padding:22px 18px;min-width:0}
.field-set{border:0;margin:0;padding:0;min-width:0}
.field-set legend{padding:0;margin:0 0 12px;font-size:15px;font-weight:500}
.cform .chips .tile span{min-height:48px;padding:0 18px}
.cform-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--rule)}
@media (max-width:599px){.cform-foot{flex-direction:column-reverse;align-items:stretch}.cform-foot .flag{align-self:center}}
.cform-wrap>.success{background:var(--bg);border:1px solid var(--rule-2);border-radius:20px;padding:26px 22px}
.cform-wrap .contact-card{align-self:start}
@media (min-width:900px){.cform-wrap{grid-template-columns:minmax(0,1fr) 360px;gap:28px}.cform{padding:34px 38px}.cform-wrap .contact-card{position:sticky;top:calc(var(--head) + 24px)}}
.contact-card a{text-underline-offset:3px;overflow-wrap:anywhere}

/* ===== hello bar (above the header) ===== */
.hello{background:var(--band);color:var(--band-text);font-size:14px;line-height:1.35;border-bottom:1px solid var(--band-rule)}
.hello-in{display:flex;align-items:center;gap:12px;min-height:44px}
.hello p{flex:1;min-width:0;padding:8px 0}
.hello .hl-short{display:none}
.hello a{color:inherit}
.hello-link{font-weight:600;text-underline-offset:3px;white-space:nowrap;color:var(--band-accent)!important}
.hello-phone{flex:none;display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none;letter-spacing:.02em}
.hello-phone:hover{text-decoration:underline;text-underline-offset:3px}
.hello :focus-visible{outline-color:var(--band-accent)}
@media (max-width:719px){.hello .hl-long{display:none}.hello .hl-short{display:inline}.hello-phone{display:none}}

/* ===== service areas ===== */
.ph-town{background:var(--oat);padding:26px 0 36px;border-bottom:1px solid var(--rule)}
.pt-grid{display:grid;gap:24px}
@media (min-width:900px){.ph-town{padding:56px 0 64px}.pt-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}}
.amap{margin:0;background:var(--surface);border:1px solid var(--rule-2);border-radius:20px;padding:12px 12px 10px}
.amap svg{width:100%;height:auto}
.amap figcaption{margin-top:6px;text-align:center;font-size:14px;color:var(--muted)}
.am-county{fill:var(--bg-2);stroke:var(--rule-2);stroke-width:1.5}
.am-lake{fill:var(--blush);stroke:var(--line);stroke-width:1.2}
.am-note{font:500 15px Outfit,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;fill:var(--muted)}
.am-road{fill:none;stroke:var(--rule-2);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 7}
.am-hw{font:600 14px Outfit,system-ui,sans-serif;fill:var(--muted);letter-spacing:.06em}
.am-dot{fill:var(--rose);stroke:var(--line);stroke-width:1.5;transition:r .2s}
.am-dot.on{fill:var(--accent)}
.am-ring{fill:none;stroke:var(--accent);stroke-width:2;opacity:.5}
.am-lbl{font:500 17px Outfit,system-ui,sans-serif;fill:var(--text)}
.am-lbl.on{font-weight:700;font-size:20px}
.amap a:hover .am-lbl,.amap a:focus .am-lbl{text-decoration:underline}
.amap a:hover .am-dot{r:8}
.amap a:focus-visible{outline:none}
.amap a:focus-visible .am-dot{stroke:var(--focus);stroke-width:3}
.tcard.town{grid-template-columns:1fr}
.tcard.town p{grid-column:1}
.tchips{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tchips a{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border:1px solid var(--rule-2);border-radius:999px;background:var(--surface);text-decoration:none;font-size:16px}
.tchips a:hover{border-color:var(--text);background:var(--blush)}
.near{margin-top:36px}
.near h3{font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.near .tchips{margin-top:12px}
.lgrid{overflow-x:auto;margin-top:18px;border:1px solid var(--rule);border-radius:14px;background:var(--surface)}
.lgrid table{border-collapse:collapse;min-width:760px;width:100%;font-size:15px}
.lgrid th,.lgrid td{padding:0;border-bottom:1px solid var(--rule);text-align:left}
.lgrid th a,.lgrid td a{display:flex;align-items:center;min-height:44px;padding:0 12px;text-underline-offset:3px}
.lgrid th a{font-weight:600}

/* ============================================================
   Round 8: real photography, menu table, basket builder
   ============================================================ */

/* ---- photos in gallery slots ---- */
.slot.has-photo{padding:0;align-items:stretch}
.slot.has-photo::before{z-index:2;pointer-events:none}
.slot.has-photo picture{position:absolute;inset:0;display:block}
.slot.has-photo img{width:100%;height:100%;object-fit:cover;display:block}
.slot.has-photo figcaption{position:relative;z-index:3;align-self:flex-end;width:100%;padding:18px;
  color:#FBF6EF;background:linear-gradient(to top,rgba(26,12,6,.86),rgba(26,12,6,.5) 55%,transparent);
  text-shadow:0 1px 2px rgba(0,0,0,.5)}
.slot.has-photo{display:flex;flex-direction:column;justify-content:flex-end}

/* ---- hero photo ---- */
.hero-shot{position:relative;margin:0;width:min(84vw,460px)}
.hero-shot picture{display:block;overflow:hidden;border-radius:2px;
  box-shadow:0 34px 60px -26px var(--shadow);transform:rotate(-1.5deg)}
.hero-shot img{width:100%;height:auto;display:block}
.hero-shot figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:16px;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--tag-ink);opacity:.75}
@media (min-width:900px){.hero-shot{width:min(34vw,480px)}}
@media (prefers-reduced-motion:reduce){.hero-shot picture{transform:none}}

/* ---- photo inside an offer row ---- */
.offer-photo{width:100%;height:100%;object-fit:cover;display:block}
.offer-inner picture{display:block;width:92px;height:92px;grid-row:1;grid-column:2;
  overflow:hidden;border-radius:2px;box-shadow:0 10px 22px -14px var(--shadow)}
@media (min-width:900px) and (hover:hover){
  .offer-inner picture{position:relative;z-index:1;width:104px;height:104px;
    grid-row:auto;grid-column:auto;opacity:0;transform:translateY(6px);
    transition:opacity .35s,transform .5s var(--ease)}
  .offer:hover .offer-inner picture,.offer:focus-within .offer-inner picture,
  .offer.open .offer-inner picture{opacity:1;transform:none}
  .offers:hover .offer.open:not(:hover):not(:focus-within) .offer-inner picture{opacity:0}
}
@media (min-width:900px) and (max-width:1199px) and (hover:hover){
  .offer-inner picture{width:80px;height:80px}
}
@media (prefers-reduced-motion:reduce){.offer-inner picture{transition:none}}

/* ---- owner portrait ---- */
.arch-frame.portrait.has-photo{display:flex;flex-direction:column;gap:14px}
.arch-frame.portrait.has-photo picture{display:block;overflow:hidden;border-radius:2px;
  box-shadow:0 30px 56px -26px var(--shadow)}
.portrait-photo{width:100%;height:auto;display:block}

/* ---- menu & prices table ---- */
.mtable-wrap{margin-top:24px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.mtable{width:100%;border-collapse:collapse;min-width:520px}
.mtable th,.mtable td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--rule);
  font-size:16px;vertical-align:top}
.mtable thead th{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--rule-2);font-weight:600}
.mtable tbody th{font-weight:600;white-space:nowrap}
.mtable tbody th a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule-2)}
.mtable tbody th a:hover{color:var(--accent)}
.mtable td{color:var(--text-2)}
.mtable .mprice{white-space:nowrap;font-weight:600;color:var(--text)}
.mtable .mprice small{font-weight:400;color:var(--muted)}

/* ---- basket builder: product rows ---- */
.iprods{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.iprod{border:1px solid var(--rule);background:var(--surface);padding:14px;border-radius:14px;
  transition:border-color .2s,background-color .2s}
.iprod.on{border-color:var(--rose);background:var(--tile-on)}
.ip-main{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start}
.ip-art{width:48px;height:48px;--lw:1.6;opacity:.75}
.ip-txt h3{margin:0 0 4px;font-size:17px;font-weight:600}
.ip-txt p{margin:0 0 6px;font-size:15px;color:var(--text-2);line-height:1.45}
.ip-price{display:inline-block;font-size:15px;font-weight:600}
.ip-price small{font-weight:400;color:var(--muted)}
.ip-price.none{font-weight:400;color:var(--muted)}
.qty{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:0;margin-top:4px;
  border:1px solid var(--field-border);background:var(--field-bg)}
.qty button{width:48px;height:48px;border:0;background:transparent;color:var(--text);
  font-size:22px;line-height:1;cursor:pointer}
.qty button:hover{background:var(--oat)}
.qty button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.qty input{width:62px;height:48px;border:0;border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  background:transparent;color:var(--text);text-align:center;font:600 17px/1 inherit;
  -moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.ip-extra{margin-top:12px;padding-top:12px;border-top:1px solid var(--rule);display:grid;gap:12px}
.ip-flavor label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.ip-flavor select{width:100%;max-width:320px;min-height:48px;padding:0 12px;
  border:1px solid var(--field-border);background:var(--field-bg);color:var(--text);font:400 16px/1 inherit}
.ip-flavor.none{margin:0;font-size:14px;color:var(--muted)}
@media (min-width:560px){
  .ip-main{grid-template-columns:56px 1fr auto;align-items:center}
  .ip-art{width:56px;height:56px}
  .qty{grid-column:auto;margin-top:0}
}

/* ---- running total in the summary rail ---- */
.sum-total{margin-top:20px;padding-top:18px;border-top:1px solid var(--summary-rule)}
.sum-total .st-k{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--summary-dt);font-weight:600}
.sum-total .st-v{display:block;margin-top:6px;font-size:26px;font-weight:600;color:var(--summary-text);
  line-height:1.2}
.sum-total .st-note{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--summary-muted)}

.fineprint{margin:18px 0 0;font-size:14px;line-height:1.55;color:var(--muted)}

/* ============================================================
   Round 10: specials + latest orders band, location collage
   ============================================================ */

/* ---- offers ---- */
.sp-cards{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:14px}
.sp-card{background:var(--surface);border:1px solid var(--rule);padding:22px 20px;position:relative}
.sp-card .sp-k{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.sp-card h3{margin:0 0 8px;font-size:19px;font-weight:600;line-height:1.25}
.sp-card p{margin:0;font-size:15px;line-height:1.55;color:var(--text-2)}
.sp-card .sp-until{margin-top:10px;font-size:13px;color:var(--muted)}
@media (min-width:760px){.sp-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}

/* ---- latest orders strip ---- */
.sp-shots{list-style:none;margin:22px 0 0;padding:0 0 6px;display:grid;
  grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin}
.sp-shots>li{scroll-snap-align:start}
.sp-shot picture{display:block;aspect-ratio:1;overflow:hidden;border-radius:2px;
  box-shadow:0 16px 30px -20px var(--shadow)}
.sp-shot img{width:100%;height:100%;object-fit:cover;display:block}
.sp-cap{margin:10px 0 0;font-size:14px;font-weight:600;line-height:1.35}
.sp-cap span{display:block;margin-top:3px;font-size:13px;font-weight:400;color:var(--muted)}
@media (min-width:900px){
  .sp-shots{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
}
@media (min-width:1200px){.sp-shots{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* ---- product collage in the town hero ---- */
.collage{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.collage li{margin:0}
.collage picture{display:block;aspect-ratio:1;overflow:hidden;border-radius:2px;
  box-shadow:0 18px 34px -22px var(--shadow)}
.collage img{width:100%;height:100%;object-fit:cover;display:block}
.collage li:nth-child(1){transform:rotate(-1.2deg)}
.collage li:nth-child(4){transform:rotate(1.2deg)}
@media (prefers-reduced-motion:reduce){.collage li{transform:none}}

/* ---- the map keeps its place lower down on a town page ---- */
.town-map{margin-top:28px;max-width:420px}
.town-map svg{width:100%;height:auto}

/* ---- order submit: failure message and the reference on success ---- */
.send-err{margin:0 0 14px;padding:12px 14px;background:var(--err-bg);border:1px solid var(--err);
  color:var(--err);font-size:15px;line-height:1.5;border-radius:3px}
.send-err:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.order-ref{margin:0 0 10px;font-size:15px}
.order-ref strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;
  font-size:17px;background:var(--oat);padding:2px 8px;border-radius:3px}

/* ===== tiered pricing =====
   Jayce prices by the pack, and the unit rate falls as the pack grows. Every
   number in here comes out of content/treats.json. */

/* ---- price table, on a product page and on /pricing/ ---- */
.pt-wrap{margin-top:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ptable{width:100%;border-collapse:collapse}
.ptable th,.ptable td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--rule);font-size:16px}
.ptable thead th{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  font-weight:600;border-bottom:1px solid var(--rule-2);padding-top:0}
.ptable tbody th{font-weight:500;white-space:nowrap}
.ptable .pt-price{font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right;width:1%}
.ptable .pt-each{color:var(--muted);font-size:14px;white-space:nowrap;text-align:right;width:1%}
.ptable tbody tr:last-child th,.ptable tbody tr:last-child td{border-bottom:0}
.ptable .pt-addon th,.ptable .pt-addon td{border-top:1px solid var(--rule);color:var(--text-2)}
.ptable .pt-addon .pt-each{white-space:normal;min-width:11em}
.pt-note{margin-top:9px;font-size:14px;color:var(--muted);line-height:1.5}
.pt-quote{margin-top:14px;font-size:16px;color:var(--text-2);line-height:1.55;max-width:34em}
@media (max-width:479px){
  .ptable th,.ptable td{padding:10px 8px;font-size:15px}
  .ptable .pt-each{display:none}
}

/* ---- party packs ---- */
.packs{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.pack{display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid var(--rule-2);
  border-radius:16px;background:var(--surface)}
.pack-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:10px;border-bottom:1px solid var(--rule)}
.pack-top h3{margin:0;font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.pack-price{margin:0;font-size:30px;font-weight:650;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.pack-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:16px;color:var(--text-2)}
.pack-list li{padding-left:16px;position:relative}
.pack-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--rose)}
.pack-line{margin:0;font-size:14px;color:var(--muted);line-height:1.5}
.pack .btn{margin-top:auto;align-self:start}
.sec-dark .pack{background:var(--surface);border-color:var(--rule-2)}
@media (min-width:720px){.packs{grid-template-columns:repeat(3,1fr);gap:14px}}

/* ---- /pricing/ page ---- */
.prjump{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0}
.prjump a{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border-radius:999px;
  border:1px solid var(--rule-2);font-size:15px;text-decoration:none;color:var(--text);
  transition:border-color .2s,background .2s}
.prjump a:hover{border-color:var(--text);background:var(--oat)}
.pr-list{display:grid;gap:14px;margin-top:24px}
.pr-item{padding:20px;border:1px solid var(--rule);border-radius:16px;background:var(--surface);
  scroll-margin-top:calc(var(--head) + 16px)}
.pr-head{display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:start}
.pr-art{width:46px;height:46px;--lw:1.6;opacity:.8}
.pr-head h3{margin:0;font-size:19px;font-weight:600;letter-spacing:-.01em}
.pr-head h3 a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule-2)}
.pr-head h3 a:hover{color:var(--accent)}
.pr-short{margin:4px 0 0;font-size:15px;color:var(--text-2);line-height:1.5}
.pr-from{margin:7px 0 0;font-size:15px;font-weight:650;color:var(--accent)}
.pr-from-quote{color:var(--muted);font-weight:500}
.pr-flavors{margin:12px 0 0;font-size:14px;color:var(--muted);line-height:1.55}
.pr-flavors b{color:var(--text-2);font-weight:600}
@media (min-width:860px){
  .pr-list{grid-template-columns:1fr 1fr}
  .pr-item{padding:22px 24px}
}

/* ---- download button ---- */
.btn .dl-ico{width:19px;height:19px;flex:none}

/* ---- "take it with you": the price list as a saveable image ----
   The image is on the page on purpose. A download link cannot put a file in a
   phone's photo library, but press-and-hold on a real <img> can. */
.dlbox{display:grid;gap:20px;margin-top:22px;align-items:start}
.dl-shot{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--rule-2);
  background:var(--surface);box-shadow:0 24px 44px -28px var(--shadow);
  transition:transform .2s var(--ease),box-shadow .2s}
.dl-shot:hover{transform:translateY(-2px);box-shadow:0 30px 52px -26px var(--shadow)}
.dl-shot img{display:block;width:100%;height:auto}
.dl-k{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:15px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dl-k .dl-ico{width:20px;height:20px;flex:none;color:var(--accent)}
.dl-row{display:flex;flex-wrap:wrap;gap:10px}
.dl-note{margin:14px 0 0;font-size:14px;color:var(--muted);line-height:1.55;max-width:34em}
@media (min-width:760px){
  .dlbox{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px}
  .dl-side{position:sticky;top:calc(var(--head) + 24px)}
}
@media (prefers-reduced-motion:reduce){.dl-shot,.dl-shot:hover{transform:none;transition:none}}

/* ---- balloon decor sits under its own heading in the mega menu ---- */
.mm-decor{margin-bottom:18px}

/* ---- no reviews yet: an honest empty state, only ever shown after launch ---- */
.reviews-empty{margin-top:24px;padding:26px 24px;border:1px dashed var(--rule-2);
  border-radius:16px;background:var(--surface);max-width:38em}
.reviews-empty .re-k{margin:0 0 8px;font-size:13px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}
.reviews-empty p{margin:0;font-size:17px;line-height:1.55;color:var(--text-2)}
.sec-dark .reviews-empty{background:var(--surface);border-color:var(--rule-2)}

/* ---- ordering policies ---- */
.pols{display:grid;gap:0;margin:24px 0 0}
.pol{display:grid;gap:3px 20px;padding:13px 0;border-top:1px solid var(--rule)}
.pol:last-child{border-bottom:1px solid var(--rule)}
.pol dt{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pol dd{margin:0;font-size:16px;line-height:1.5;color:var(--text-2)}
@media (min-width:720px){
  .pol{grid-template-columns:180px minmax(0,1fr);align-items:baseline}
  .pol dt{padding-top:2px}
}

/* ---- "from" price in the home menu table ---- */
.mtable .mp-quote{font-weight:500;color:var(--muted)}

/* ---- basket builder: pack chips ---- */
.ip-picks{border:0;margin:12px 0 0;padding:0;min-width:0}
.pack-chips{gap:8px}
.pack-chip span{flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;
  min-height:56px;padding:8px 16px;border-radius:12px;line-height:1.2}
.pack-chip b{font-size:15px;font-weight:600}
.pack-chip small{font-size:14px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.pack-chip input:checked+span small{color:var(--text)}
.iprod.on{border-color:var(--rose);background:var(--tile-on)}
.ip-howmany{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.ip-hm-k{font-size:15px;font-weight:600}
.ip-addon{position:relative;display:flex;align-items:flex-start;gap:11px;padding:12px 14px;
  border:1px solid var(--rule-2);border-radius:12px;background:var(--field-bg);cursor:pointer}
.ip-addon input{width:22px;height:22px;flex:none;margin:0;accent-color:var(--accent);cursor:pointer}
.ip-addon span{font-size:15px;line-height:1.45;color:var(--text-2)}
.ip-addon b{color:var(--text);font-weight:600}
.ip-addon:has(input:checked){border-color:var(--rose);background:var(--tile-on)}
.ip-addon:focus-within{outline:2px solid var(--focus-alt);outline-offset:2px}
.ip-quote{margin:0;font-size:14px;color:var(--muted);line-height:1.55}
.ip-clear{justify-self:start;min-height:44px;padding:0 2px;background:none;border:0;cursor:pointer;
  font:500 14px/1 inherit;color:var(--muted);text-decoration:underline;text-underline-offset:4px}
.ip-clear:hover{color:var(--accent)}
.ip-clear[hidden]{display:none}

/* ---- basket builder: party pack picker ---- */
.ip-packs{border:1px solid var(--rule-2);border-radius:16px;padding:16px;margin:0 0 16px;
  background:var(--bg-2)}
.ip-packs legend{padding:0 7px;margin-left:-7px;font-size:15px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--text)}
.ip-packs .hint{margin:4px 0 12px;font-size:14px;color:var(--muted);line-height:1.5}
.pack-picks{gap:8px}
.pack-pick{flex:1 1 180px}
.pack-pick span{flex-direction:column;align-items:flex-start;gap:2px;min-height:76px;
  padding:12px 16px;border-radius:12px;line-height:1.25}
.pack-pick b{font-size:16px;font-weight:600}
.pack-pick small{font-size:19px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pack-pick em{font-style:normal;font-size:13px;color:var(--muted);line-height:1.4}
.pack-pick input:checked+span em{color:var(--text-2)}
.sec-dark .ip-packs{background:var(--surface);border-color:var(--rule-2)}

/* Touch targets. On a phone these are all standalone links sitting on their own
   line or in a list, not links inside a sentence, so WCAG 2.5.8's inline
   exception does not cover them. 44px minimum. */
@media (max-width:1099px){
  .hello-link,.hello-phone{display:inline-flex;align-items:center;min-height:44px}
  .crumbs a{display:inline-flex;align-items:center;min-height:44px}
  .contact-card ul a{display:inline-flex;align-items:center;min-height:44px}
  /* price-table row headers link to the treat pages and were 21px tall */
  th a,td a{display:inline-flex;align-items:center;min-height:44px}
}