/* Layout: a stationery desk — ruled & graph-paper bands, folder-tab service cards, pinned sticky-note steps. Orange Zest leads; the other logo colours play support. */
:root{
  --paper:#FFFCF8; --paper-2:#FFF4EA; --card:#FFFFFF;
  --ink:#201914; --muted:#6A5E55; --line:#EEE2D6;
  --orange:#FF7A02; --orange-deep:#E86A00; --orange-ink:#A84B00;
  --cherry:#FE4E93; --pink:#FFAAD4; --lime:#B6E72C; --teal:#09CAB4; --teal-ink:#05776A;
  --display:"Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand:"Caveat", "Comic Sans MS", cursive;
  --r:14px; --max:1180px;
  color-scheme: light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:84px}
html{overflow-x:clip}
body{overflow-x:clip; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--paper)}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display); line-height:1.02; letter-spacing:-.02em; margin:0; text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--max); margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
.eyebrow{font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-ink); display:inline-flex; align-items:center; gap:.5rem}
.eyebrow::before{content:""; width:22px; height:3px; border-radius:2px; background:var(--orange)}
.section{padding-block:clamp(64px, 9vw, 112px)}
.section-head{display:grid; gap:14px; max-width:680px; margin-bottom:clamp(32px,5vw,52px)}
.section-head h2{font-size:clamp(2.1rem, 4.6vw, 3.4rem); font-weight:800}
.section-head p{color:var(--muted); font-size:1.08rem; max-width:60ch}
.hl{background:linear-gradient(transparent 58%, color-mix(in srgb, var(--orange) 45%, transparent) 58%, color-mix(in srgb, var(--orange) 45%, transparent) 92%, transparent 92%); padding:0 .08em}
:focus-visible{outline:3px solid var(--teal); outline-offset:3px; border-radius:6px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font:700 1rem/1 var(--body); padding:.95rem 1.35rem; border-radius:999px; border:2px solid var(--ink); text-decoration:none; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s; white-space:nowrap}
.btn svg{width:20px; height:20px; flex:none}
.btn-primary{background:var(--orange); color:var(--ink); box-shadow:4px 4px 0 var(--ink)}
.btn-primary:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink)}
.btn-ghost{background:var(--card); color:var(--ink)}
.btn-ghost:hover{background:var(--paper-2)}
.btn-wa{background:#25D366; color:#0B2E17; border-color:#0B2E17; box-shadow:4px 4px 0 #0B2E17}
.btn-wa:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 #0B2E17}

/* Header */
.topbar{background:var(--ink); color:#FFE9D6; font-size:.86rem}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; gap:12px; padding-block:8px; flex-wrap:wrap}
.topbar b{color:var(--lime); font-weight:700}
.topbar .tb-right{display:flex; gap:18px; flex-wrap:wrap}
header.site{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:12px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand img.mark{height:46px; width:auto}
.brand img.word{height:30px; width:auto}
.nav-links{display:flex; gap:4px; list-style:none; margin:0; padding:0}
.nav-links a{text-decoration:none; font-weight:600; font-size:.97rem; padding:.55rem .8rem; border-radius:999px; transition:background .15s}
.nav-links a:hover{background:var(--paper-2)}
.nav-cta{display:flex; gap:10px; align-items:center}
.nav-cta .btn{padding:.7rem 1.1rem; font-size:.94rem; box-shadow:3px 3px 0 var(--ink)}
.menu-btn{display:none; background:var(--card); border:2px solid var(--ink); border-radius:12px; width:46px; height:46px; cursor:pointer; align-items:center; justify-content:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block; width:20px; height:2.5px; background:var(--ink); border-radius:2px; position:relative; transition:.2s}
.menu-btn span::before,.menu-btn span::after{content:""; position:absolute; left:0}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}

/* Hero */
.hero{position:relative; overflow:hidden; padding-block:clamp(40px,6vw,80px) clamp(56px,7vw,96px)}
.hero::before{content:""; position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:28px 28px; mask-image:radial-gradient(ellipse 70% 80% at 75% 40%, #000 30%, transparent 75%); -webkit-mask-image:radial-gradient(ellipse 70% 80% at 75% 40%, #000 30%, transparent 75%); opacity:.7}
.hero-grid{position:relative; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(32px,5vw,64px); align-items:center}
.hero-copy{display:grid; gap:24px; min-width:0}
.badge{justify-self:start; display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1.5px solid var(--ink); border-radius:999px; padding:6px 14px 6px 8px; font-weight:600; font-size:.88rem}
.badge i{width:22px; height:22px; border-radius:50%; background:var(--teal); display:grid; place-items:center; font-style:normal; color:#fff; font-size:.75rem}
.hero h1{font-size:clamp(2.7rem, 6.6vw, 5.2rem); font-weight:800}
.hero h1 .plug{position:relative; display:inline-block; color:var(--orange-deep)}
.hero h1 .plug svg{position:absolute; left:-4%; bottom:-.12em; width:108%; height:.32em}
.hero-lede{font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--muted); max-width:52ch}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}
.hero-facts{display:flex; gap:22px; flex-wrap:wrap; list-style:none; margin:4px 0 0; padding:0; font-size:.93rem; font-weight:600}
.hero-facts li{display:flex; align-items:center; gap:8px}
.hero-facts svg{width:18px; height:18px; color:var(--teal-ink)}

/* Hero paper stack illustration */
.desk{position:relative; aspect-ratio:1/1.02; max-width:520px; width:100%; justify-self:center}
.sheet{position:absolute; border-radius:6px; box-shadow:0 18px 40px -18px rgba(60,30,0,.35), 0 2px 0 rgba(0,0,0,.04)}
.sheet.s1{inset:10% 14% 8% 10%; background:var(--pink); transform:rotate(-9deg)}
.sheet.s2{inset:8% 9% 11% 15%; background:var(--orange); transform:rotate(5deg)}
.sheet.s3{inset:12% 12% 7% 12%; background:var(--card); transform:rotate(-1.5deg); padding:11% 10% 0; overflow:hidden; border:1px solid var(--line)}
.s3::after{content:""; position:absolute; right:0; top:0; width:56px; height:56px; background:linear-gradient(225deg, var(--paper) 50%, #F3E3D2 50%); box-shadow:-3px 3px 6px rgba(0,0,0,.06)}
.doc-title{font:800 clamp(1.1rem,2.4vw,1.55rem)/1.05 var(--display); letter-spacing:-.01em}
.doc-sub{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:6px 0 16px; font-weight:700}
.doc-lines{display:grid; gap:9px}
.doc-lines i{display:block; height:7px; border-radius:4px; background:#F1E7DD}
.doc-lines i:nth-child(3n){width:72%}.doc-lines i:nth-child(4n){width:86%}
.doc-chart{display:flex; align-items:flex-end; gap:8px; height:64px; margin-top:18px}
.doc-chart b{flex:1; border-radius:4px 4px 0 0}
.clip{position:absolute; left:6%; top:2%; width:15%; z-index:3; transform:rotate(-6deg); filter:drop-shadow(2px 4px 3px rgba(0,0,0,.18))}
.sticky{position:absolute; right:0; bottom:6%; width:44%; aspect-ratio:1; background:var(--lime); transform:rotate(6deg); z-index:4; padding:14px 16px; display:flex; flex-direction:column; justify-content:center; box-shadow:0 14px 26px -12px rgba(40,60,0,.45); font-family:var(--hand); line-height:1.05; color:#1E2A05}
.sticky::before{content:""; position:absolute; top:-12px; left:50%; width:70px; height:24px; transform:translateX(-50%) rotate(-3deg); background:rgba(255,255,255,.55); border:1px solid rgba(0,0,0,.05)}
.sticky strong{font-size:clamp(1.35rem,2.8vw,1.9rem); font-weight:700}
.sticky span{font-size:clamp(1.05rem,2.1vw,1.4rem); font-weight:600}
.stamp{position:absolute; left:2%; bottom:10%; z-index:4; width:30%; aspect-ratio:1; border-radius:50%; background:var(--teal); color:#fff; display:grid; place-items:center; text-align:center; transform:rotate(-12deg); font:800 clamp(.7rem,1.5vw,.95rem)/1.05 var(--display); text-transform:uppercase; letter-spacing:.04em; box-shadow:0 0 0 5px var(--paper), 0 0 0 7px var(--teal); padding:10px}
.stamp em{font-style:normal; display:block; font-size:1.7em; letter-spacing:-.02em}
@keyframes floaty{0%,100%{transform:rotate(6deg) translateY(0)}50%{transform:rotate(4deg) translateY(-8px)}}
@keyframes spin{to{transform:rotate(348deg)}}
.sticky{animation:floaty 6s ease-in-out infinite}

/* Marquee */
.marquee{background:var(--orange); border-block:2px solid var(--ink); overflow:hidden; transform:rotate(-1.2deg); margin-block:-10px 0; position:relative; z-index:2; contain:paint}
.marquee-track{display:flex; gap:0; width:max-content; animation:marq 32s linear infinite; padding-block:14px}
.marquee-track span{font:800 clamp(1.1rem,2vw,1.45rem)/1 var(--display); text-transform:uppercase; letter-spacing:.01em; padding:0 22px; display:flex; align-items:center; gap:44px; white-space:nowrap}
.marquee-track span::after{content:"✦"; color:var(--paper); font-size:.9em}
@keyframes marq{to{transform:translateX(-50%)}}

/* Services — folder cards */
.services-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:26px 20px; padding-top:22px}
.folder{position:relative; background:var(--card); border:2px solid var(--ink); border-radius:0 var(--r) var(--r) var(--r); padding:26px 22px 24px; display:flex; flex-direction:column; gap:14px; transition:transform .2s ease, box-shadow .2s ease}
.folder:hover{transform:translateY(-4px); box-shadow:6px 8px 0 var(--ink)}
.folder .tab{position:absolute; left:-2px; top:-24px; height:24px; padding:0 16px; border:2px solid var(--ink); border-bottom:none; border-radius:10px 10px 0 0; background:var(--tab); font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; display:flex; align-items:center}
.folder .ico{width:58px; height:58px; border-radius:16px; background:color-mix(in srgb, var(--tab) 28%, var(--card)); display:grid; place-items:center}
.folder .ico svg{width:32px; height:32px}
.folder h3{font-size:1.38rem; font-weight:800}
.folder p{color:var(--muted); font-size:.97rem}
.folder ul{margin:auto 0 0; padding:12px 0 0; list-style:none; border-top:1.5px dashed var(--line); display:flex; flex-wrap:wrap; gap:6px}
.folder li{font-size:.8rem; font-weight:600; background:var(--paper-2); border-radius:999px; padding:4px 10px}
.folder.soon{background:repeating-linear-gradient(-45deg, var(--card) 0 14px, #FFF7FB 14px 28px)}
.soon-pill{position:absolute; right:14px; top:14px; background:var(--cherry); color:#fff; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:999px; transform:rotate(4deg)}

/* Audience strip */
.audience{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:44px}
.aud{display:flex; gap:14px; align-items:flex-start; padding:18px; border-radius:var(--r); background:var(--paper-2)}
.aud b{display:block; font-family:var(--display); font-size:1.12rem}
.aud span{font-size:.92rem; color:var(--muted)}
.aud .dot{flex:none; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-weight:800; color:var(--ink)}

/* What we print — ruled paper */
.ruled{background-color:var(--card); background-image:linear-gradient(90deg, transparent 0 calc(max(16px, 4vw) + 40px), color-mix(in srgb, var(--cherry) 55%, transparent) calc(max(16px, 4vw) + 40px) calc(max(16px, 4vw) + 42px), transparent calc(max(16px, 4vw) + 42px)), repeating-linear-gradient(transparent 0 35px, #DCEBF5 35px 36px); border-block:1px solid var(--line)}
.print-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,64px); align-items:start}
.print-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.print-item{background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:16px 18px; display:flex; gap:12px; align-items:flex-start}
.print-item svg{flex:none; width:22px; height:22px; color:var(--orange-deep); margin-top:2px}
.print-item b{display:block; font-weight:700}
.print-item span{font-size:.9rem; color:var(--muted)}
.note-hand{font-family:var(--hand); font-size:1.6rem; color:var(--orange-ink); transform:rotate(-2deg); display:inline-block; margin-top:8px}

/* Steps */
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; list-style:none; padding:0; margin:0; counter-reset:step}
.step{position:relative; padding:34px 26px 28px; border-radius:4px; box-shadow:0 16px 30px -18px rgba(60,30,0,.4); counter-increment:step}
.step:nth-child(1){background:#FFE3F0; transform:rotate(-1.5deg)}
.step:nth-child(2){background:#FFE7CF; transform:rotate(1deg)}
.step:nth-child(3){background:#D8F7F2; transform:rotate(-.8deg)}
.step::before{content:""; position:absolute; top:-9px; left:50%; width:18px; height:18px; border-radius:50%; background:var(--cherry); box-shadow:inset -3px -3px 0 rgba(0,0,0,.18), 0 3px 4px rgba(0,0,0,.2); transform:translateX(-50%)}
.step .num{font:700 3.2rem/1 var(--hand); color:var(--orange-ink)}
.step .num::before{content:counter(step)}
.step h3{font-size:1.4rem; margin:6px 0 8px}
.step p{color:#4A3F37; font-size:.98rem}

/* Quote builder */
.quote{background:var(--paper-2); position:relative}
.quote::before{content:""; position:absolute; inset:0; background-image:radial-gradient(color-mix(in srgb, var(--orange) 22%, transparent) 1.2px, transparent 1.4px); background-size:22px 22px; opacity:.6; pointer-events:none}
.quote .wrap{position:relative}
.qb{display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:start}
.qb-form{background:var(--card); border:2px solid var(--ink); border-radius:20px; padding:clamp(20px,3vw,32px); box-shadow:8px 8px 0 var(--ink); min-width:0}
.tabs{display:flex; gap:6px; background:var(--paper-2); padding:5px; border-radius:999px; margin-bottom:24px; flex-wrap:wrap}
.tabs button{flex:1; min-width:max-content; border:0; background:transparent; font:700 .92rem var(--body); padding:.7rem 1rem; border-radius:999px; cursor:pointer; color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--ink); color:#fff}
.fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.field{display:grid; gap:6px; min-width:0}
.field.full{grid-column:1/-1}
.field label,.field .lbl{font-size:.84rem; font-weight:700}
.field input,.field select,.field textarea{width:100%; font:500 1rem var(--body); color:var(--ink); background:var(--paper); border:1.5px solid #E2D5C8; border-radius:12px; padding:.8rem .9rem; transition:border-color .15s, box-shadow .15s}
.field textarea{min-height:110px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--orange); box-shadow:0 0 0 4px color-mix(in srgb, var(--orange) 22%, transparent)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips label{cursor:pointer}
.chips input{position:absolute; opacity:0; pointer-events:none}
.chips span{display:inline-block; padding:.5rem .9rem; border:1.5px solid #E2D5C8; border-radius:999px; font-weight:600; font-size:.9rem; background:var(--paper); transition:.15s}
.chips input:checked + span{background:var(--orange); border-color:var(--ink); color:var(--ink)}
.chips input:focus-visible + span{outline:3px solid var(--teal); outline-offset:2px}
.qb-preview{position:sticky; top:100px; display:grid; gap:14px; min-width:0}
.phone{background:#E9DFD4; border-radius:22px; padding:16px; border:2px solid var(--ink)}
.phone-head{display:flex; align-items:center; gap:10px; padding:4px 4px 12px; border-bottom:1px solid rgba(0,0,0,.08); margin-bottom:12px}
.phone-head img{width:36px; height:36px; border-radius:50%; background:#fff; padding:3px; object-fit:contain}
.phone-head b{display:block; font-size:.95rem}
.phone-head small{color:var(--muted); font-size:.78rem}
.bubble{background:#DCF8C6; border-radius:14px 14px 4px 14px; padding:12px 14px; font-size:.92rem; white-space:pre-wrap; word-break:break-word; margin-left:12%; box-shadow:0 1px 1px rgba(0,0,0,.08); max-height:340px; overflow:auto}
.qb-actions{display:flex; gap:10px; flex-wrap:wrap}
.qb-actions .btn{flex:1}
.qb-hint{font-size:.86rem; color:var(--muted)}
.copied{font-size:.85rem; font-weight:700; color:var(--teal-ink); min-height:1.2em}

/* About */
.about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,6vw,80px); align-items:center}
.about-art{position:relative; aspect-ratio:1; max-width:440px; width:100%}
.about-art .blob{position:absolute; inset:6%; border-radius:42% 58% 60% 40% / 45% 40% 60% 55%; background:var(--orange); opacity:.16}
.about-art img{position:absolute; inset:12%; width:76%; height:76%; object-fit:contain}
.about-copy{display:grid; gap:18px; min-width:0}
.about-copy h2{font-size:clamp(2rem,4.2vw,3.1rem)}
.about-copy p{color:#463B33; font-size:1.06rem; max-width:62ch}
.about-copy .big{font:700 1.3rem/1.35 var(--display); color:var(--ink)}
.pill-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
.pill-row span{border:1.5px solid var(--ink); border-radius:999px; padding:.45rem .95rem; font-weight:600; font-size:.9rem}

/* Branding coming soon */
.soon-band{background:var(--ink); color:#FFF3E8; border-radius:28px; padding:clamp(28px,5vw,56px); display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center; position:relative; overflow:hidden}
.soon-band h2{font-size:clamp(1.9rem,4vw,3rem); color:#fff}
.soon-band p{color:#D9CBBE; max-width:52ch; margin-top:12px}
.soon-band .eyebrow{color:var(--lime)}.soon-band .eyebrow::before{background:var(--lime)}
.merch{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.merch div{width:96px; height:110px; border-radius:16px; display:grid; place-items:center; transform:rotate(var(--rot))}
.merch svg{width:58px; height:58px}

/* FAQ */
.faq-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,5vw,64px); align-items:start}
.faq-list{display:grid; gap:12px}
details{background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:0 20px; transition:border-color .15s}
details[open]{border-color:var(--ink)}
summary{list-style:none; cursor:pointer; font-weight:700; font-size:1.05rem; padding:18px 36px 18px 0; position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:var(--paper-2); display:grid; place-items:center; font-size:1.2rem; transition:transform .2s}
details[open] summary::after{transform:translateY(-50%) rotate(45deg); background:var(--orange)}
details p{padding:0 0 18px; color:var(--muted)}

/* Contact */
.contact-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.c-card{background:var(--card); border:2px solid var(--ink); border-radius:18px; padding:24px; display:grid; gap:10px; align-content:start; min-width:0}
.c-card .ico{width:46px; height:46px; border-radius:14px; display:grid; place-items:center}
.c-card .ico svg{width:24px; height:24px}
.c-card h3{font-size:1.2rem}
.c-card p{color:var(--muted); font-size:.97rem}
.c-card .val{font-weight:700; color:var(--ink); word-break:break-all; user-select:all}
.copy-btn{justify-self:start; background:var(--paper-2); border:1.5px solid var(--line); border-radius:999px; padding:.45rem .9rem; font:700 .85rem var(--body); cursor:pointer}
.hours{width:100%; border-collapse:collapse; font-size:.95rem; font-variant-numeric:tabular-nums}
.hours td{padding:5px 0; border-bottom:1px dashed var(--line)}
.hours td:last-child{text-align:right; font-weight:600}
.hours tr.closed td:last-child{color:var(--cherry)}
.open-now{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.88rem}
.open-now i{width:10px; height:10px; border-radius:50%; background:var(--muted)}
.open-now.on i{background:#22B35E; box-shadow:0 0 0 4px rgba(34,179,94,.2)}

/* Footer */
footer{background:var(--ink); color:#D8CABD; margin-top:clamp(64px,8vw,100px)}
.foot{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px; padding-block:56px 28px}
.foot h4{color:#fff; font-family:var(--display); font-size:1.05rem; margin:0 0 12px}
.foot ul{list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:.95rem}
.foot a{text-decoration:none}.foot a:hover{color:var(--orange)}
.foot-brand img{width:180px; background:#fff; border-radius:14px; padding:10px 14px}
.foot-brand p{margin-top:14px; font-size:.95rem; max-width:34ch}
.foot-bottom{border-top:1px solid #3B322B; padding-block:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.85rem}
.foot-bottom a{color:var(--orange); text-decoration:none}

/* Floating WhatsApp */
.wa-float{position:fixed; right:calc(18px + env(safe-area-inset-right,0px)); bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:70; width:60px; height:60px; border-radius:50%; background:#25D366; display:grid; place-items:center; box-shadow:0 10px 24px -6px rgba(0,0,0,.35); border:2px solid #0B2E17; transition:transform .2s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:32px; height:32px}
.wa-float::after{content:"Chat with us"; position:absolute; right:72px; background:var(--ink); color:#fff; font-size:.82rem; font-weight:700; padding:7px 12px; border-radius:10px; white-space:nowrap; opacity:0; transform:translateX(6px); transition:.2s; pointer-events:none}
.wa-float:hover::after{opacity:1; transform:none}

/* Reveal (starts visible; JS adds a gentle lift only when motion is allowed) */
.js-motion .reveal{transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s}
.js-motion .reveal.pre{transform:translateY(18px); opacity:.35}

/* Active nav */
.nav-links a[aria-current="page"]{background:var(--ink); color:#fff}
.nav-links a[aria-current="page"]:hover{background:var(--ink)}

.nav-quote-m{display:none}
/* Sub-page hero */
.page-hero{position:relative; overflow:hidden; padding-block:clamp(44px,7vw,88px) clamp(40px,6vw,72px); border-bottom:1px solid var(--line)}
.page-hero::before{content:""; position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:28px 28px; mask-image:linear-gradient(90deg, transparent 20%, #000 75%); -webkit-mask-image:linear-gradient(90deg, transparent 20%, #000 75%); opacity:.7}
.page-hero .wrap{position:relative; display:grid; grid-template-columns:1.3fr .7fr; gap:32px; align-items:center}
.page-hero-copy{display:grid; gap:18px; min-width:0}
.page-hero h1{font-size:clamp(2.4rem,5.6vw,4.4rem); font-weight:800}
.page-hero p{color:var(--muted); font-size:clamp(1.03rem,1.5vw,1.18rem); max-width:56ch}
.crumbs{display:flex; gap:8px; flex-wrap:wrap; list-style:none; margin:0; padding:0; font-size:.86rem; font-weight:600; color:var(--muted)}
.crumbs li+li::before{content:"/"; margin-right:8px; color:#C9B9AA}
.crumbs a{text-decoration:none; color:var(--orange-ink)}
.page-hero-art{position:relative; justify-self:center; width:min(260px,100%); aspect-ratio:1}
.page-hero-art .pa-sheet{position:absolute; inset:12%; border-radius:8px; box-shadow:0 18px 40px -18px rgba(60,30,0,.35)}
.page-hero-art .pa-1{background:var(--pink); transform:rotate(-10deg)}
.page-hero-art .pa-2{background:var(--card); transform:rotate(4deg); border:1px solid var(--line); display:grid; place-items:center}
.page-hero-art .pa-2 svg{width:46%; height:46%}
.page-hero-art .pa-tag{position:absolute; right:0; bottom:8%; background:var(--lime); font:700 1.35rem/1 var(--hand); padding:10px 14px; transform:rotate(7deg); box-shadow:0 10px 18px -10px rgba(40,60,0,.5)}

/* Service detail rows */
.detail{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,5vw,64px); align-items:center}
.detail + .detail{margin-top:clamp(56px,8vw,96px)}
.detail.flip .detail-art{order:2}
.detail-art{position:relative; aspect-ratio:4/3; border-radius:24px; border:2px solid var(--ink); background:var(--tint); display:grid; place-items:center; overflow:hidden; max-width:100%}
.detail-art::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(32,25,20,.12) 1.2px, transparent 1.4px); background-size:20px 20px}
.detail-art svg{position:relative; width:44%; height:auto}
.detail-art .tag{position:absolute; left:16px; top:16px; background:var(--card); border:1.5px solid var(--ink); border-radius:999px; padding:5px 12px; font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase}
.detail-copy{display:grid; gap:16px; min-width:0}
.detail-copy h2{font-size:clamp(1.9rem,3.8vw,2.8rem)}
.detail-copy p{color:var(--muted); font-size:1.05rem; max-width:58ch}
.ticks{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px}
.ticks li{display:flex; gap:10px; align-items:flex-start; font-weight:600}
.ticks li::before{content:""; flex:none; width:20px; height:20px; margin-top:3px; border-radius:6px; background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23201914' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat}

.link-more{display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--orange-ink); text-decoration:none; margin-top:auto; padding-top:6px}
.link-more::after{content:"→"; transition:transform .15s}
.link-more:hover::after{transform:translateX(4px)}

/* CTA band */
.cta-band{background:var(--orange); border:2px solid var(--ink); border-radius:28px; padding:clamp(28px,5vw,52px); display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; box-shadow:8px 8px 0 var(--ink)}
.cta-band h2{font-size:clamp(1.8rem,3.8vw,2.7rem); max-width:18ch}
.cta-band p{margin-top:8px; font-weight:500; max-width:48ch}
.cta-band .btn-ghost{box-shadow:4px 4px 0 var(--ink)}
.cta-band .hero-actions{flex:none}

/* Values */
.values{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.value{padding:26px; border-radius:18px; background:var(--tint); display:grid; gap:8px}
.value b{font:800 1.5rem/1.1 var(--display)}
.value span{color:#4A3F37}

/* Form validation & status */
.field.invalid input{border-color:var(--cherry); box-shadow:0 0 0 4px color-mix(in srgb, var(--cherry) 18%, transparent)}
.err{font-size:.8rem; font-weight:700; color:#C2185B; min-height:0}
.req{color:var(--cherry)}
.form-status{border-radius:14px; padding:14px 16px; font-size:.92rem; font-weight:600; display:grid; gap:4px}
.form-status.ok{background:#E3F8EC; color:#0E5A30; border:1.5px solid #9ADBB5}
.form-status.warn{background:#FFF1E2; color:#7A3A00; border:1.5px solid #F7C38F}
.form-status.bad{background:#FFE8F1; color:#8A1240; border:1.5px solid #F5A9C8}

/* Contact page hours card wider */
.contact-faq{margin-top:clamp(64px,8vw,100px)}

/* Responsive */
@media (max-width:1060px){
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .audience{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-links a{padding:.5rem .55rem}
}
@media (max-width:960px){
  .nav-links{display:none; position:absolute; left:0; right:0; top:100%; background:var(--paper); flex-direction:column; padding:12px max(16px, env(safe-area-inset-right,0px)) 20px max(16px, env(safe-area-inset-left,0px)); border-bottom:2px solid var(--ink); gap:2px; max-height:calc(100dvh - 80px); overflow:auto}
  .nav-links.open{display:flex}
  .nav-links a{display:block; padding:.9rem 1rem; font-size:1.08rem; text-align:center}
  .menu-btn{display:inline-flex}
  .nav-cta .btn-primary{display:none}
  .nav-quote-m{display:block; margin-top:8px}
  .nav-quote-m a{background:var(--orange); border:2px solid var(--ink); font-weight:700}
  .nav-quote-m a[aria-current="page"]{background:var(--ink)}
  .hero-grid,.print-grid,.qb,.about-grid,.faq-grid,.soon-band,.detail,.page-hero .wrap{grid-template-columns:1fr}
  .detail.flip .detail-art{order:0}
  .detail-art{max-width:520px; width:100%; justify-self:center}
  .desk{max-width:440px}
  .qb-preview{position:static}
  .about-art{max-width:300px; margin:0 auto}
  .contact-grid{grid-template-columns:1fr 1fr}
  .foot{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr; max-width:520px; margin-inline:auto}
  .values{grid-template-columns:1fr}
  .page-hero-art{display:none}
}

/* Mobile: centred layout */
@media (max-width:760px){
  body{font-size:16px}
  html{scroll-padding-top:76px}
  .topbar .tb-left{display:none}
  .topbar .wrap{justify-content:center; text-align:center}
  .topbar .tb-right{justify-content:center; gap:4px 14px}
  .brand img.word{height:24px}
  .brand img.mark{height:40px}
  .nav-cta .btn-wa{padding:.65rem; border-radius:12px; box-shadow:2px 2px 0 #0B2E17}
  .nav-cta .btn-wa .lbl{display:none}

  .section{padding-block:56px}
  .section-head,.hero-copy,.page-hero-copy,.about-copy,.detail-copy,.soon-band,.cta-band,.c-card,.foot,.foot-bottom{text-align:center; justify-items:center}
  .section-head{margin-inline:auto}
  .section-head p,.hero-lede,.page-hero p,.about-copy p,.detail-copy p,.soon-band p,.cta-band p{margin-inline:auto}
  .eyebrow{justify-content:center}
  .badge{justify-self:center}
  .hero h1{font-size:clamp(2.3rem,10.5vw,3.2rem)}
  .hero-actions,.pill-row,.hero-facts,.crumbs,.qb-actions{justify-content:center}
  .hero-facts{flex-direction:column; align-items:center; gap:8px}
  .hero-actions{width:100%}
  .hero-actions .btn{flex:1 1 100%; max-width:360px}
  .desk{max-width:340px}
  .note-hand{display:block; text-align:center}

  .services-grid,.audience,.print-list,.fields,.contact-grid,.ticks{grid-template-columns:1fr}
  .services-grid{gap:40px; max-width:420px; margin-inline:auto}
  .folder{align-items:center; text-align:center}
  .folder .tab{left:50%; transform:translateX(-50%)}
  .folder.soon .soon-pill{right:12px}
  .folder ul{justify-content:center; width:100%}
  .link-more{justify-content:center}
  .aud{flex-direction:column; align-items:center; text-align:center}
  .print-item{flex-direction:column; align-items:center; text-align:center}
  .ticks{justify-items:center; max-width:340px; margin-inline:auto}
  .ticks li{width:100%; justify-content:flex-start}
  .step{text-align:center}
  .values .value{text-align:center}

  .tabs{border-radius:20px}
  .tabs button{flex:1 1 100%}
  .field label,.field .lbl,.err{text-align:center}
  .chips{justify-content:center}
  .qb-hint,.copied{text-align:center}
  .qb-actions .btn{flex:1 1 100%}
  .form-status{text-align:center}

  .soon-band .merch{order:-1}
  .cta-band{justify-content:center; flex-direction:column}
  .cta-band .hero-actions .btn{max-width:none}
  .c-card .ico,.copy-btn,.c-card .btn{justify-self:center!important}
  .open-now{justify-content:center}
  .hours td{text-align:left}

  details{text-align:left}
  .faq-list{max-width:560px; margin-inline:auto; width:100%}

  .foot{grid-template-columns:1fr; gap:28px}
  .foot ul{justify-items:center}
  .foot-brand img{margin-inline:auto}
  .foot-brand p{margin-inline:auto}
  .foot-bottom{flex-direction:column; align-items:center}
  .ruled{background-image:repeating-linear-gradient(transparent 0 35px, #DCEBF5 35px 36px)}
  .wa-float{width:54px; height:54px}
  .wa-float::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}