/* Shears & Beards — site styles.
   Visual language borrowed from the Booth Brother v12 shop landing and
   v1 contractor page (dark mode). Own copy, no shared code with BB. */
:root{
  --accent:#1ad89c; --accent-ink:#052017;
  --coral:#ff8a5b; --coral-dk:#d65a2a;
  --honey:#f5a623; --warm-glow:rgba(255,220,140,.92);
  --bg:#0e1218; --bg-2:#1a1f2a; --bg-3:#23293a; --bg-rgb:14,18,24; --page-edge:#07090d;
  --rule:rgba(255,255,255,.06); --rule-2:rgba(255,255,255,.10);
  --ink:#f4f5f8; --ink-2:#b0b4c0; --ink-3:#76798a; --ink-dim:#4a4d56;
  --honey-bg:rgba(245,166,35,.10); --honey-bord:rgba(245,166,35,.35); --honey-ink:#f5c870;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--page-edge);color:var(--ink);font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
.page{max-width:500px;margin:0 auto;min-height:100vh;background:var(--bg);display:flex;flex-direction:column;box-shadow:0 0 0 1px var(--rule)}
.surface{flex:1;padding-bottom:12px}

/* Header */
.head{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:14px 20px;background:rgba(var(--bg-rgb),.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.head .back{width:30px;height:30px;margin-left:-8px;display:flex;align-items:center;justify-content:center;color:var(--ink-2);text-decoration:none;border-radius:8px}
.head .back svg{width:18px;height:18px}
.head .wordmark{flex:1;font-family:'Archivo Black',sans-serif;font-size:12.5px;letter-spacing:1.2px;text-decoration:none;color:var(--ink);display:flex;align-items:center}
.head .wordmark .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;margin-left:5px}
.head .call{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-3);text-decoration:none;display:flex;align-items:center;gap:6px}
.head .call svg{width:12px;height:12px;color:var(--accent)}

/* ---------- Storefront (landing) ---------- */
.building{position:relative;width:100%;aspect-ratio:1/1.115;overflow:hidden;background:#000;display:flex;flex-direction:column}
.building .sky{position:relative;height:10.3%;flex:0 0 auto;background:linear-gradient(to bottom,#060910 0%,#0b1018 70%,#000 100%);container-type:inline-size;overflow:hidden}
.building .facade{position:relative;flex:1;container-type:inline-size}
.building img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sign-name{position:absolute;left:12.12%;top:24.88%;width:75.76%;height:10.37%;display:flex;align-items:center;justify-content:center;font-family:'Archivo Black',sans-serif;letter-spacing:-.5px;white-space:nowrap;pointer-events:none;font-size:clamp(11px,4.4cqw,36px);color:#fdfcf9}
.sign-underline{position:absolute;left:32.06%;top:32.70%;width:35.89%;height:2.5px;background:var(--accent);border-radius:2px}
.glow{position:absolute;border-radius:14%;background:radial-gradient(ellipse at center,var(--warm-glow) 0%,rgba(255,200,80,.5) 50%,transparent 78%);mix-blend-mode:screen;opacity:0;filter:blur(3px);pointer-events:none;transition:opacity .85s ease-out}
.anim-on .glow{opacity:1;transition-delay:.6s}
.glow-u1{left:26.71%;top:4.07%;width:8.53%;height:9.57%}
.glow-u2{left:45.85%;top:4.07%;width:8.21%;height:9.57%}
.glow-u3{left:65.07%;top:4.07%;width:8.29%;height:9.57%}
.glow-d1{left:18.82%;top:42.98%;width:19.70%;height:35.09%}
.glow-d2{left:60.77%;top:42.90%;width:20.02%;height:35.96%}
.door-sign{position:absolute;left:43.62%;top:59.01%;width:11.88%;height:4.78%;perspective:600px;pointer-events:none}
.door-sign-flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1.4s cubic-bezier(.45,0,.55,1)}
.anim-on.is-open .door-sign-flip{transform:rotateY(180deg);transition-delay:1.1s}
.door-face,.door-back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Archivo Black',sans-serif;font-size:clamp(7px,1.6cqw,12px);letter-spacing:.5px;border-radius:3px;border:1.5px solid;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.door-face{background:#1a1a1a;color:var(--coral);border-color:var(--coral)}
.door-back{background:var(--accent-ink);color:var(--accent);border-color:var(--accent);transform:rotateY(180deg)}

.shop-hero{padding:0 22px 4px}
.shop-hero .name{font-family:'Archivo Black',sans-serif;font-size:44px;line-height:.94;letter-spacing:-1.6px;margin:16px 0 8px;text-wrap:balance}
.shop-hero .tag{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:8px;margin-bottom:14px}
.shop-hero .tag::before{content:'';width:14px;height:1.5px;background:var(--accent)}
.line{font-size:13.5px;font-weight:500;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.line svg{width:13px;height:13px;color:var(--ink-3);flex-shrink:0}
.hours{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.3px;color:var(--ink-3);margin-top:7px;display:flex;align-items:center;gap:7px;text-transform:uppercase}
.hours .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(26,216,156,.18)}
.hours.closed .dot{background:var(--coral);box-shadow:0 0 0 3px rgba(255,138,91,.18)}

/* Buttons */
.actions{padding:22px 22px 0;display:flex;flex-direction:column;gap:12px}
.btn{background:var(--accent);color:var(--accent-ink);font-family:'Archivo Black',sans-serif;font-size:17px;padding:22px;border-radius:18px;letter-spacing:-.3px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;text-align:left;position:relative;overflow:hidden;text-decoration:none;width:100%;transition:transform .1s}
.btn:hover{transform:translateY(-1px)}
.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,transparent 30%);pointer-events:none}
.btn .col{display:flex;flex-direction:column;gap:3px;position:relative;z-index:1}
.btn .sub{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;opacity:.65;letter-spacing:0}
.btn svg{width:20px;height:20px;position:relative;z-index:1;flex-shrink:0}
.btn.secondary{background:var(--bg-2);color:var(--ink);border:1px solid var(--rule-2)}

/* Video block */
.inside{margin:26px 22px 0}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:8px;margin-bottom:12px}
.eyebrow::before{content:'';width:14px;height:1.5px;background:var(--accent)}
.video{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;border:1px solid var(--rule-2)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}

/* Announcement */
.announce{margin:18px 22px 0;border-radius:12px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;background:var(--honey-bg);border:1px solid var(--honey-bord);border-left:3px solid var(--honey)}
.announce .ic{width:22px;height:22px;border-radius:50%;background:rgba(245,166,35,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--honey-ink)}
.announce .ic svg{width:12px;height:12px}
.announce .copy{font-size:13px;line-height:1.55;font-weight:500}
.announce .lbl{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:1.3px;font-weight:700;text-transform:uppercase;display:block;margin-bottom:4px;color:var(--honey-ink)}

/* Contact row */
.contact-row{display:flex;gap:8px;padding:14px 22px 0}
.contact-call{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 14px;border-radius:12px;font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;text-decoration:none;color:var(--ink);border:1px solid var(--rule-2)}
.contact-call svg{width:14px;height:14px;color:var(--accent)}
.contact-social{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;color:var(--ink);border:1px solid var(--rule-2);text-decoration:none;flex-shrink:0}
.contact-social svg{width:18px;height:18px}
.contact-call:hover,.contact-social:hover{background:var(--bg-2)}

.tail{padding:26px 22px 20px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-dim)}
.tail strong{color:var(--ink-3)}

/* ---------- Pick a barber ---------- */
.subpage-title{padding:28px 22px 6px}
.micro{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:2px;color:var(--accent);font-weight:700;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.micro::before{content:'';width:14px;height:1.5px;background:var(--accent)}
.subpage-title .title{font-family:'Archivo Black',sans-serif;font-size:32px;line-height:1;letter-spacing:-1.2px;margin-bottom:10px}
.subpage-title .sub{font-size:14px;color:var(--ink-2);font-weight:500}
.soonest{margin:22px 22px 0;background:var(--bg-2);border:1px solid var(--rule-2);border-radius:16px;padding:18px 18px 16px 20px;position:relative;overflow:hidden}
.soonest::before{content:'';position:absolute;top:0;left:0;height:100%;width:4px;background:var(--coral)}
.soonest .ribbon{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:1.8px;color:var(--coral);font-weight:700;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:7px}
.soonest .ribbon .live{width:5px;height:5px;background:var(--coral);border-radius:50%;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}
.soonest .when{font-family:'Archivo Black',sans-serif;font-size:21px;letter-spacing:-.6px;line-height:1.1;margin-bottom:6px}
.soonest .who{font-size:13px;color:var(--ink-2);margin-bottom:14px}
.soonest .pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{white-space:nowrap;background:var(--coral);color:#1a0f08;font-family:'Archivo Black',sans-serif;font-size:12.5px;padding:10px 16px;border-radius:100px;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.pill.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule-2)}
.divider{padding:26px 22px 10px;display:flex;align-items:center;gap:12px}
.divider .l{flex:1;height:1px;background:var(--rule-2)}
.divider .lbl{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:1.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase}
.barbers{padding:0 18px 8px;display:flex;flex-direction:column;gap:10px}
.barber-card{background:var(--bg-2);border:1px solid var(--rule);border-radius:18px;padding:18px;display:grid;grid-template-columns:76px 1fr auto;gap:16px;align-items:start;text-decoration:none;color:var(--ink);transition:background .12s,transform .1s}
.barber-card:hover{background:var(--bg-3);transform:translateY(-1px)}
.barber-card .av{width:76px;height:76px;border-radius:50%;background:var(--bg-3) center/cover no-repeat;box-shadow:0 0 0 2px var(--accent)}
.barber-card .nm{font-family:'Archivo Black',sans-serif;font-size:22px;letter-spacing:-.4px;line-height:1.1}
.barber-card .rl{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);margin-top:4px}
.barber-card .bi{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-top:8px}
.barber-card .chev{color:var(--ink-3)}
.barber-card .chev svg{width:16px;height:16px}

/* ---------- Barber page ---------- */
.interior{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000}
.interior img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.interior::after{content:'';position:absolute;left:0;right:0;bottom:0;height:50px;background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none}
.sconce{position:absolute;width:8%;height:38%;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .85s ease-out;background:radial-gradient(ellipse at center,var(--warm-glow) 0%,rgba(255,200,80,.5) 35%,transparent 70%);mix-blend-mode:screen;filter:blur(5px);transform:translate(-50%,0)}
.anim-on .sconce{opacity:1;transition-delay:.6s}
.interior.barber .s1{left:33%;top:14%}.interior.barber .s2{left:54%;top:14%}.interior.barber .s3{left:71%;top:14%}.interior.barber .s4{left:84%;top:14%}
.interior.salon .s1{left:35%;top:22%}.interior.salon .s2{left:53%;top:22%}.interior.salon .s3{left:62%;top:22%}.interior.salon .s4{left:80%;top:22%}

.pro-hero{padding:0 22px 4px;position:relative;margin-top:-32px;z-index:2;display:flex;gap:14px;align-items:flex-start}
.pro-hero .txt{flex:1;min-width:0}
.pro-hero .name{font-family:'Archivo Black',sans-serif;font-size:50px;line-height:.92;letter-spacing:-1.8px;margin:0 0 4px}
.role{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;margin:10px 0 0;display:flex;align-items:center;gap:8px;color:var(--accent)}
.role::before{content:'';width:14px;height:1.5px;background:var(--accent)}
.avatar{width:92px;height:92px;border-radius:50%;flex-shrink:0;margin-top:2px;background:var(--bg-2) center/cover no-repeat;box-shadow:0 0 0 3px var(--accent),0 10px 30px rgba(0,0,0,.5)}
.pro-body{padding:14px 22px 0}
.bio{font-size:14.5px;font-weight:500;line-height:1.6;color:var(--ink-2);margin:0}
.pro-body .line{margin-top:14px}

.services{padding:24px 22px 0}
.service{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:14px;margin-bottom:8px;background:var(--bg-2);border:1px solid var(--rule);cursor:pointer;width:100%;text-align:left;color:var(--ink);font:inherit;transition:background .12s,transform .1s}
.service:hover{background:var(--bg-3);transform:translateY(-1px)}
.service .sn{font-size:15px;font-weight:700;letter-spacing:-.2px}
.service .sm{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.5px;margin-top:3px;color:var(--ink-3)}
.service .sp{font-family:'Archivo Black',sans-serif;font-size:18px;letter-spacing:-.5px;color:var(--accent);white-space:nowrap}
.more{display:block;background:none;border:none;padding:6px 2px 0;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-3);cursor:pointer}
.more:hover{color:var(--ink)}
.ig-cta{margin:14px 22px 0;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 16px;border-radius:14px;font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;text-decoration:none;border:1.5px solid var(--accent);color:var(--accent)}

/* Booking sheet */
.sheet{position:fixed;inset:0;z-index:50;display:none;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.sheet.open{display:flex;align-items:flex-end;justify-content:center}
.sheet-panel{width:100%;max-width:500px;height:92vh;height:92dvh;background:var(--bg);border-radius:22px 22px 0 0;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--rule-2);border-bottom:none;animation:up .25s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--rule)}
.sheet-head .t{font-family:'Archivo Black',sans-serif;font-size:17px;letter-spacing:-.3px}
.sheet-head .s{font-size:11.5px;color:var(--ink-3);font-weight:500}
.sheet-close{width:36px;height:36px;border-radius:50%;background:var(--bg-2);border:1px solid var(--rule-2);color:var(--ink);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sheet-body{flex:1;background:#fff;position:relative}
.sheet-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sheet-body.plain{background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:30px;text-align:center;color:var(--ink-2)}
.sheet-body.plain .btn{max-width:340px}

@media (prefers-reduced-motion:reduce){
  .glow,.sconce{opacity:1!important;transition:none!important}
  .door-sign-flip{transition:none!important}
  .soonest .ribbon .live{animation:none}
}
@media (min-width:520px){
  body{padding:0}
}

/* Barbers at a glance — horizontal photo row */
.glance{padding:14px 0 16px;border-bottom:1px solid var(--rule)}
.glance .eyebrow{padding:0;margin-bottom:0}
.glance-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:0 20px;margin-bottom:10px}
.glance-meet{font-size:12px;font-weight:700;color:var(--accent);text-decoration:none;white-space:nowrap;border:1.5px solid var(--accent);border-radius:99px;padding:5px 12px;line-height:1.2;transition:background .15s,color .15s}
.glance-meet:hover,.glance-meet:focus-visible{background:var(--accent);color:var(--accent-ink)}
.glance-meet span{display:inline-block;margin-left:3px}
.glance-row{display:flex;gap:14px;overflow-x:auto;padding:4px 20px 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.glance-row::-webkit-scrollbar{display:none}
.g-item{flex:0 0 auto;width:58px;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ink-2)}
.g-av{width:52px;height:52px;border-radius:50%;background:var(--bg-3) center/cover no-repeat;box-shadow:0 0 0 2px var(--accent);transition:transform .12s}
.g-item:hover .g-av{transform:translateY(-2px)}
.g-nm{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;white-space:nowrap}
.g-item.owner .g-av{box-shadow:0 0 0 2px var(--accent),0 0 0 5px rgba(26,216,156,.18)}

/* Video seen through the storefront windows */
.building .vid-behind{position:absolute;left:18%;top:42%;width:64%;height:44%;overflow:hidden;background:#000}

.building img.bg{z-index:1}
.building .sign-name,.building .sign-underline,.building .glow,.building .door-sign{z-index:2}
.barber-card .next-mini{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--coral);font-weight:700;letter-spacing:.8px;margin-top:6px;text-transform:uppercase}
.barber-card .next-mini::before{content:'';display:inline-block;width:4px;height:4px;background:var(--coral);border-radius:50%;margin-right:6px;vertical-align:1.5px}
button.pill{border:none;cursor:pointer}
.pill svg{width:12px;height:12px}
.hours[hidden],.pills[hidden],.next-mini[hidden]{display:none}

/* Video behind the name + Book button (option C) */
.behind{position:relative;overflow:hidden;padding-bottom:26px}
.behind .vid-bg{position:absolute;inset:0;overflow:hidden;background:#000}
.behind .vid-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,var(--bg) 0%,rgba(var(--bg-rgb),.55) 22%,rgba(var(--bg-rgb),.6) 75%,var(--bg) 100%)}
.behind > *:not(.vid-bg){position:relative;z-index:1}
iframe[data-cover]{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0;pointer-events:none}
.building .vid-behind{z-index:0}

/* Video beside the name (option C2) */
.side-wrap{display:grid;grid-template-columns:1fr 38%;grid-template-areas:"hero vid" "act act";column-gap:14px;align-items:start;padding-top:16px}
.side-wrap .side-vid{grid-area:vid;margin-right:22px;position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#000;border:1px solid var(--rule-2);box-shadow:0 0 0 2px rgba(26,216,156,.25)}
.side-wrap .shop-hero{grid-area:hero;padding-right:0}
.side-wrap .shop-hero .name{font-size:clamp(30px,9vw,42px);margin-top:0}
.side-wrap .actions{grid-area:act}
.surface .glance{border-bottom:none;padding:22px 0 0}
.surface .glance + .soonest{margin-top:16px}

/* Real logo on the storefront sign */
.sign-name .sign-logo{height:78%;width:auto;max-width:94%;object-fit:contain;display:block;filter:drop-shadow(0 0 6px rgba(0,0,0,.6))}

/* Home: "SHEARS" sits on the brick sidewalk, "& BEARDS" just below it */
.behind{overflow:visible}
.behind .shop-hero .name{margin-top:calc(-1 * min(12vw, 60px));text-shadow:0 2px 0 #000,0 0 18px rgba(0,0,0,.85)}

/* Square booking right on the barber page, in a mint frame */
.book-inline{padding:24px 22px 0}
.embed-box{border:1.5px solid var(--accent);border-radius:18px;overflow:hidden;background:#fff;height:min(78vh,720px);position:relative;box-shadow:0 0 0 4px rgba(26,216,156,.08)}
.embed-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed-box.plain{height:auto;background:var(--bg-2)}
.embed-fallback{padding:22px;display:flex;flex-direction:column;gap:16px;color:var(--ink-2);font-size:14px}
.book-inline .secure{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-3);text-align:center;margin-top:10px}

/* Dark-mode Square booking: Square has no dark theme, so we flip its colors
   (invert + hue-rotate keeps blues blue). Its page is see-through, so our dark
   box shows behind it. */
.embed-box{background:var(--bg-2);height:min(70vh,640px)}
.embed-box iframe{filter:invert(.92) hue-rotate(180deg)}
.barber-card .chev{align-self:center}

/* Hide Square's top bar (its logo looks wrong once colors are flipped).
   The bar is 64px tall and scrolls with the page, so trimming the top of the
   frame hides it without cutting off services, back links or buttons. */
.embed-box iframe{top:-64px;height:calc(100% + 64px)}
.soon-note{margin-top:12px;font-size:12.5px;color:var(--ink-2);line-height:1.5;border-left:2px solid var(--coral);padding-left:10px}
.soonest .pills{align-items:center}

/* Home video: taller, words at the top, clear middle so the video shows, button at the bottom */
.behind{display:flex;flex-direction:column;min-height:min(165vw,820px);padding-bottom:22px}
.behind .actions{margin-top:auto;padding-top:24px}
.behind .vid-bg::after{background:linear-gradient(to bottom,var(--bg) 0%,rgba(var(--bg-rgb),.72) 16%,rgba(var(--bg-rgb),.35) 34%,rgba(var(--bg-rgb),.12) 55%,rgba(var(--bg-rgb),.35) 80%,var(--bg) 100%)}
.behind .shop-hero .line,.behind .shop-hero .hours,.behind .shop-hero .tag{text-shadow:0 1px 8px rgba(0,0,0,.9)}
.soonest .pills{flex-wrap:nowrap;gap:6px}.soonest .pill{padding:10px 13px;font-size:12px}
/* dial-in: video a bit shorter, Book button sits a little higher */
.behind{min-height:min(138vw,690px);padding-bottom:44px}
.behind .actions{padding-top:18px}

/* Quick picks: wrap onto two rows instead of side-scrolling */
.glance-row{flex-wrap:wrap;overflow-x:visible;justify-content:flex-start;row-gap:12px;column-gap:10px}
.g-item{width:calc((100% - 30px) / 4)}
.g-av{width:56px;height:56px}

/* ================= Computer screens: fill the width =================
   Phones keep the exact layout above; this only kicks in on wide screens. */
@media (min-width:900px){
  .page{max-width:1180px;box-shadow:none;background:var(--bg)}
  body{background:var(--bg)}
  .head{padding:16px 32px}
  .head .wordmark{font-size:14px}

  /* Home: storefront left, video + booking right */
  .surface.home{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;padding:32px 32px 12px;align-items:stretch}
  .surface.home .building{grid-column:1;grid-row:1;border-radius:18px}
  .surface.home .behind{grid-column:2;grid-row:1;min-height:0;border-radius:18px;overflow:hidden;padding-top:26px}
  .surface.home .behind .shop-hero .name{margin-top:0;font-size:58px}
  .surface.home .contact-row,.surface.home .tail,.surface.home .announce{grid-column:1 / -1}
  .surface.home .contact-row{max-width:560px;margin:10px auto 0;width:100%}

  /* Pick a barber: wider, cards in a grid */
  .surface.pick{padding:12px 16px}
  .surface.pick .subpage-title .title{font-size:44px}
  .surface.pick .glance-row{flex-wrap:nowrap;justify-content:flex-start}
  .surface.pick .g-item{width:78px}
  .surface.pick .g-av{width:66px;height:66px}
  .surface.pick .soonest{max-width:720px}
  .surface.pick .barbers{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;padding:0 22px 8px}

  /* Barber page: story on the left, booking on the right (stays in view) */
  .surface.pro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:36px;padding:24px 32px 0;align-items:start}
  .surface.pro > .interior{grid-column:1;grid-row:1;border-radius:18px}
  .surface.pro > .pro-hero{grid-column:1;grid-row:2}
  .surface.pro > .pro-body{grid-column:1;grid-row:3}
  .surface.pro > .book-inline{grid-column:2;grid-row:1 / span 4;position:sticky;top:84px;padding-top:0}
  .surface.pro > .book-inline .embed-box{height:calc(100vh - 150px);max-height:860px}
  .surface.pro > .ig-cta,.surface.pro > .announce{grid-column:1}
  .surface.pro > .tail{grid-column:1 / -1}
}
@media (min-width:900px){
  .surface.home .contact-row{align-self:start;align-items:center}
  .surface.home .contact-call{height:48px;padding:0 14px}
}
.group-line{margin-top:10px;text-align:center;font-size:13px;color:var(--ink-2)}
.group-line a{color:var(--accent);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(26,216,156,.4)}
/* Group booking — slim version of the soonest card */
.group-card{margin-top:14px;background:var(--bg-2);border:1px solid var(--rule-2);border-radius:14px;padding:10px 12px 10px 16px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:10px}
.group-card::before{content:'';position:absolute;top:0;left:0;height:100%;width:4px;background:var(--coral)}
.group-card .gtxt{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3}
.group-card .glbl{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:1.6px;font-weight:700;text-transform:uppercase;color:var(--coral);margin-bottom:2px}
.group-card .gpills{display:flex;gap:6px;flex-shrink:0}
.group-card .pill{padding:8px 13px;font-size:12px}
.group-line{display:none}

/* ===================== LIGHT MODE =====================
   Follows the phone's own setting; the sun/moon button in the header
   overrides it and remembers the choice on that phone. */
.theme-toggle{width:34px;height:34px;border-radius:50%;border:1px solid var(--rule-2);background:transparent;color:var(--ink-2);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.theme-toggle:hover{background:var(--bg-2)}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle .moon{display:none}
.light-only{display:none!important}

:root[data-theme="light"]{
  --bg:#fdfcf9; --bg-2:#f5f3ee; --bg-3:#ebe8df; --bg-rgb:253,252,249; --page-edge:#eceae3;
  --rule:rgba(20,26,40,.06); --rule-2:rgba(20,26,40,.12);
  --ink:#0a0c10; --ink-2:#3a3f4a; --ink-3:#7a8190; --ink-dim:#aab0bd;
  --honey-bg:#fffaf2; --honey-bord:rgba(245,166,35,.30); --honey-ink:#8a5c10;
  --accent-dk:#0ca877;
}
:root[data-theme="light"] .light-only{display:block!important}
:root[data-theme="light"] .dark-only{display:none!important}
:root[data-theme="light"] .theme-toggle .sun{display:none}
:root[data-theme="light"] .theme-toggle .moon{display:block}
/* Light illustrations sit on paper, not black */
:root[data-theme="light"] .building,:root[data-theme="light"] .interior{background:var(--bg-3)}
:root[data-theme="light"] .interior{border-bottom:1px solid var(--rule-2)}
:root[data-theme="light"] .sign-name{color:var(--ink)}
/* The room is already bright — the "lights came on" glow only belongs in dark */
:root[data-theme="light"] .sconce{display:none}
:root[data-theme="light"] .glow{filter:blur(5px);opacity:.85}
/* Square's booking needs no colour flip on a light page */
:root[data-theme="light"] .embed-box{background:#fff}
:root[data-theme="light"] .embed-box iframe{filter:none}
:root[data-theme="light"] .btn.secondary{background:var(--ink);color:#fff;border:none}
:root[data-theme="light"] .barber-card,:root[data-theme="light"] .service,:root[data-theme="light"] .soonest,:root[data-theme="light"] .group-card{background:#fff;border-color:var(--rule-2)}
:root[data-theme="light"] .sheet{background:rgba(20,26,40,.35)}
:root[data-theme="light"] .behind .shop-hero .name,:root[data-theme="light"] .behind .shop-hero .tag,:root[data-theme="light"] .behind .shop-hero .line,:root[data-theme="light"] .behind .shop-hero .hours{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.75)}
:root[data-theme="light"] .behind .shop-hero .line svg{color:#fff}

@media (prefers-color-scheme: light){
:root:not([data-theme]){
  --bg:#fdfcf9; --bg-2:#f5f3ee; --bg-3:#ebe8df; --bg-rgb:253,252,249; --page-edge:#eceae3;
  --rule:rgba(20,26,40,.06); --rule-2:rgba(20,26,40,.12);
  --ink:#0a0c10; --ink-2:#3a3f4a; --ink-3:#7a8190; --ink-dim:#aab0bd;
  --honey-bg:#fffaf2; --honey-bord:rgba(245,166,35,.30); --honey-ink:#8a5c10;
  --accent-dk:#0ca877;
}
:root:not([data-theme]) .light-only{display:block!important}
:root:not([data-theme]) .dark-only{display:none!important}
:root:not([data-theme]) .theme-toggle .sun{display:none}
:root:not([data-theme]) .theme-toggle .moon{display:block}
/* Light illustrations sit on paper, not black */
:root:not([data-theme]) .building,:root:not([data-theme]) .interior{background:var(--bg-3)}
:root:not([data-theme]) .interior{border-bottom:1px solid var(--rule-2)}
:root:not([data-theme]) .sign-name{color:var(--ink)}
/* The room is already bright — the "lights came on" glow only belongs in dark */
:root:not([data-theme]) .sconce{display:none}
:root:not([data-theme]) .glow{filter:blur(5px);opacity:.85}
/* Square's booking needs no colour flip on a light page */
:root:not([data-theme]) .embed-box{background:#fff}
:root:not([data-theme]) .embed-box iframe{filter:none}
:root:not([data-theme]) .btn.secondary{background:var(--ink);color:#fff;border:none}
:root:not([data-theme]) .barber-card,:root:not([data-theme]) .service,:root:not([data-theme]) .soonest,:root:not([data-theme]) .group-card{background:#fff;border-color:var(--rule-2)}
:root:not([data-theme]) .sheet{background:rgba(20,26,40,.35)}
:root:not([data-theme]) .behind .shop-hero .name,:root:not([data-theme]) .behind .shop-hero .tag,:root:not([data-theme]) .behind .shop-hero .line,:root:not([data-theme]) .behind .shop-hero .hours{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.75)}
:root:not([data-theme]) .behind .shop-hero .line svg{color:#fff}

}
:root[data-theme="light"] .sign-logo.light-only{filter:none}
@media (prefers-color-scheme: light){:root:not([data-theme]) .sign-logo.light-only{filter:none}}

/* Barber pole on the column beside the door — same line-art look, always turning */
.pole{position:absolute;left:82.6%;top:45%;width:3%;height:16.5%;display:flex;flex-direction:column;align-items:stretch;pointer-events:none;z-index:2}
.pole .cap{height:12%;border:0.35cqw solid #fff;border-radius:40%;background:var(--bg-2);flex:0 0 auto}
.pole .cap.top{margin-bottom:-0.2cqw}
.pole .cap.bot{margin-top:-0.2cqw}
.pole .tube{flex:1;border:0.35cqw solid #fff;border-radius:0.8cqw;overflow:hidden;background:#0d1016;position:relative}
.pole .stripes{position:absolute;inset:-40% -10% calc(-40% - 6cqw);background:repeating-linear-gradient(35deg,#d8232a 0 0.95cqw,#fdfcf9 0.95cqw 1.9cqw,#1b4ea8 1.9cqw 2.85cqw,#fdfcf9 2.85cqw 3.8cqw);animation:pole-spin 1.5s linear infinite}
/* one full stripe cycle: 3.8cqw along the 35deg stripes = 3.8/cos(35deg) straight up, so the loop is seamless */
@keyframes pole-spin{from{transform:translateY(0)}to{transform:translateY(-4.639cqw)}}
.pole .pole-glow{position:absolute;left:-110%;top:-10%;width:320%;height:120%;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .85s ease-out;background:radial-gradient(ellipse at center,rgba(255,240,220,.5) 0%,rgba(255,200,120,.25) 45%,transparent 72%);mix-blend-mode:screen;filter:blur(1.2cqw)}
.building.anim-on .pole .pole-glow{opacity:1;transition-delay:.9s}
:root[data-theme="light"] .pole .cap,:root[data-theme="light"] .pole .tube{border-color:#0a0c10}
:root[data-theme="light"] .pole .cap{background:#fff}
:root[data-theme="light"] .pole .tube{background:#fff}
:root[data-theme="light"] .pole .stripes{background:repeating-linear-gradient(35deg,#d8232a 0 0.95cqw,#fff 0.95cqw 1.9cqw,#1b4ea8 1.9cqw 2.85cqw,#fff 2.85cqw 3.8cqw)}
:root[data-theme="light"] .pole .pole-glow{display:none}
@media (prefers-reduced-motion:reduce){.pole .stripes{animation:none}}

@media (prefers-color-scheme: light){
:root:not([data-theme]) .pole .cap,:root:not([data-theme]) .pole .tube{border-color:#0a0c10}
:root:not([data-theme]) .pole .cap{background:#fff}
:root:not([data-theme]) .pole .tube{background:#fff}
:root:not([data-theme]) .pole .stripes{background:repeating-linear-gradient(35deg,#d8232a 0 0.95cqw,#fff 0.95cqw 1.9cqw,#1b4ea8 1.9cqw 2.85cqw,#fff 2.85cqw 3.8cqw)}
:root:not([data-theme]) .pole .pole-glow{display:none}
}

/* Trees that sway, and a pair of birds crossing the sky */
.building .tree{position:absolute;object-fit:fill;transform-origin:50% 100%;will-change:transform;pointer-events:none;z-index:1}
.building .tree.left{animation:sway 7s ease-in-out infinite}
.building .tree.right{animation:sway 8.4s ease-in-out infinite -2.1s}
@keyframes sway{0%,100%{transform:rotate(-0.55deg)}50%{transform:rotate(0.55deg)}}
.birds{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.bird{position:absolute;top:20%;width:2.2cqw;height:2.2cqw;background:no-repeat center/contain;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M1 8c3.5 0 5-6 7-6s3.5 6 7 6' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  animation:fly 26s linear infinite, flap 0.5s ease-in-out infinite alternate}
.bird.b2{top:52%;width:1.6cqw;height:1.6cqw;animation-duration:26s,0.62s;animation-delay:-3.4s,0s}
@keyframes fly{0%{transform:translateX(-12cqw)}100%{transform:translateX(112cqw)}}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.55)}}
:root[data-theme="light"] .bird{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M1 8c3.5 0 5-6 7-6s3.5 6 7 6' fill='none' stroke='%230a0c10' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){.building .tree{animation:none}.birds{display:none}}

@media (prefers-color-scheme: light){
:root:not([data-theme]) .bird{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M1 8c3.5 0 5-6 7-6s3.5 6 7 6' fill='none' stroke='%230a0c10' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
}

/* A strip of sky above the storefront so the birds have somewhere to fly */


.building .sky-star{position:absolute;width:0.5cqw;height:0.5cqw;border-radius:50%;background:#fff;opacity:.55;animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.8}}
:root[data-theme="light"] .building{background:var(--bg-3)}
:root[data-theme="light"] .building .sky{background:linear-gradient(to bottom,#dff0ff 0%,#eff8ff 70%,#fff 100%)}
:root[data-theme="light"] .building .sky-star{display:none}

@media (prefers-color-scheme: light){
:root:not([data-theme]) .building{background:var(--bg-3)}
:root:not([data-theme]) .building .sky{background:linear-gradient(to bottom,#dff0ff 0%,#eff8ff 70%,#fff 100%)}
:root:not([data-theme]) .building .sky-star{display:none}
}

/* ---------- Shop the shelf (pickup only) ---------- */
.surface.shop{padding-bottom:110px}
.products{padding:18px 22px 0;display:flex;flex-direction:column;gap:10px}
.product{display:grid;grid-template-columns:52px 1fr auto 22px;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;color:var(--ink);
  background:var(--bg-2);border:1px solid var(--rule);border-radius:16px;padding:14px 16px;cursor:pointer;transition:background .12s,transform .1s,border-color .12s}
.product:hover{transform:translateY(-1px)}
.product .thumb{width:52px;height:52px;border-radius:14px;background:var(--bg-3);display:flex;align-items:center;justify-content:center;font-size:24px}
.product .pname{font-size:15px;font-weight:700;letter-spacing:-.2px}
.product .pmeta{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.6px;color:var(--ink-3);margin-top:3px;text-transform:uppercase}
.product .pprice{font-family:'Archivo Black',sans-serif;font-size:17px;color:var(--accent);letter-spacing:-.4px}
.product .ptick{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--rule-2)}
.product.picked{border-color:var(--accent);background:rgba(26,216,156,.07)}
.product.picked .ptick{background:var(--accent);border-color:var(--accent);position:relative}
.product.picked .ptick::after{content:'';position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.hold-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;width:min(500px,calc(100% - 24px));z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:18px;
  background:var(--bg-2);border:1px solid var(--rule-2);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.hold-count{display:flex;flex-direction:column;font-family:'Archivo Black',sans-serif;font-size:15px}
.hold-sub{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:500;color:var(--ink-3);margin-top:2px}
.hold-bar[hidden]{display:none}

/* ---------- "Want anything set aside?" — the shop counter as the card ---------- */
.pickup{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px 14px calc(16px + env(safe-area-inset-bottom))}
.pickup[hidden]{display:none}
.pickup-panel{position:relative;width:min(460px,100%);height:min(86vh,860px);border-radius:24px;overflow:hidden;
  border:2px solid var(--accent);box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 6px rgba(26,216,156,.12);display:flex;flex-direction:column;animation:up .28s ease-out;background:#000}
.pickup-bg{position:absolute;inset:0;container-type:size;overflow:hidden}
.pickup-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.pickup-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(5,7,11,.62) 0%,rgba(5,7,11,.12) 30%,rgba(5,7,11,.18) 52%,rgba(5,7,11,.62) 100%)}
.pickup-inner{position:relative;z-index:1;display:flex;flex-direction:column;min-height:0;height:100%}
.pickup-head{padding:24px 22px 12px;position:relative;flex:0 0 auto}
.pickup-x{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:15px;cursor:pointer;backdrop-filter:blur(6px)}
.pickup-lbl{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--coral);margin-bottom:6px}
.pickup-t{font-family:'Archivo Black',sans-serif;font-size:21px;letter-spacing:-.6px;line-height:1.12;margin-bottom:7px;padding-right:44px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.pickup-s{font-size:13px;color:rgba(255,255,255,.82);line-height:1.5;padding-right:6px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.pickup-body{flex:1;overflow-y:auto;min-height:0;padding-bottom:6px;margin-top:auto;max-height:58%}
.pickup-body .products{padding:12px 20px 4px;gap:9px}
/* glassy tiles so the counter shows through */
.pickup .product{background:rgba(10,14,20,.30);border:1px solid rgba(255,255,255,.16);padding:12px 16px;grid-template-columns:42px minmax(0,1fr) auto 20px;gap:13px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff}
.pickup .product .thumb{background:rgba(255,255,255,.12);width:42px;height:42px;font-size:20px;border-radius:12px}
.pickup .product .pmeta{color:rgba(255,255,255,.62)}
.pickup .product.picked{background:rgba(26,216,156,.18);border-color:var(--accent)}
.pickup .hold-bar.inline{background:rgba(8,11,16,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.14);color:#fff}
.pickup .hold-sub{color:rgba(255,255,255,.65)}
.hold-bar.inline{position:static;transform:none;width:auto;margin:0;border-radius:0;border:none;box-shadow:none;padding:14px 20px calc(14px + env(safe-area-inset-bottom));gap:14px}
@media (min-width:900px){.surface.shop .products{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}

/* Retail counter illustration on the shelf pages */
.counter{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000;container-type:inline-size;flex:0 0 auto}
.counter img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.counter::after{content:'';position:absolute;left:0;right:0;bottom:0;height:46px;background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none}
.shelf-glow{position:absolute;height:2.6%;border-radius:40%;background:linear-gradient(90deg,transparent,rgba(26,216,156,.75),transparent);filter:blur(0.8cqw);opacity:.85;animation:shelf 5.5s ease-in-out infinite}
.shelf-glow.g1{left:56%;width:40%;top:23.5%}
.shelf-glow.g2{left:56%;width:40%;top:44%;animation-delay:-1.8s}
.shelf-glow.g3{left:56%;width:40%;top:63%;animation-delay:-3.4s}
@keyframes shelf{0%,100%{opacity:.5}50%{opacity:.95}}
:root[data-theme="light"] .counter{background:var(--bg-3)}
:root[data-theme="light"] .shelf-glow{display:none}
.surface.shop .counter{border-radius:0}
.pickup-panel .counter{border-radius:22px 22px 0 0}
@media (prefers-reduced-motion:reduce){.shelf-glow{animation:none}}

@media (prefers-color-scheme: light){
:root:not([data-theme]) .counter{background:var(--bg-3)}
:root:not([data-theme]) .shelf-glow{display:none}
}

/* Pickup card in light mode: pale wash over the counter, dark text */
:root[data-theme="light"] .pickup{background:rgba(20,26,40,.35)}
:root[data-theme="light"] .pickup-panel{background:#fff}
:root[data-theme="light"] .pickup-bg::after{background:linear-gradient(to bottom,rgba(253,252,249,.82) 0%,rgba(253,252,249,.35) 30%,rgba(253,252,249,.45) 52%,rgba(253,252,249,.85) 100%)}
:root[data-theme="light"] .pickup-t{color:var(--ink);text-shadow:0 1px 10px rgba(255,255,255,.9)}
:root[data-theme="light"] .pickup-s{color:var(--ink-2);text-shadow:0 1px 10px rgba(255,255,255,.9)}
:root[data-theme="light"] .pickup-x{background:rgba(255,255,255,.8);border-color:var(--rule-2);color:var(--ink)}
:root[data-theme="light"] .pickup .product{background:rgba(255,255,255,.72);border-color:rgba(20,26,40,.14);color:var(--ink)}
:root[data-theme="light"] .pickup .product .thumb{background:rgba(20,26,40,.06)}
:root[data-theme="light"] .pickup .product .pmeta{color:var(--ink-3)}
:root[data-theme="light"] .pickup .product.picked{background:rgba(26,216,156,.18)}
:root[data-theme="light"] .pickup .hold-bar.inline{background:rgba(255,255,255,.88);border-top-color:var(--rule-2);color:var(--ink)}
:root[data-theme="light"] .pickup .hold-sub{color:var(--ink-3)}

@media (prefers-color-scheme: light){
:root:not([data-theme]) .pickup{background:rgba(20,26,40,.35)}
:root:not([data-theme]) .pickup-panel{background:#fff}
:root:not([data-theme]) .pickup-bg::after{background:linear-gradient(to bottom,rgba(253,252,249,.82) 0%,rgba(253,252,249,.35) 30%,rgba(253,252,249,.45) 52%,rgba(253,252,249,.85) 100%)}
:root:not([data-theme]) .pickup-t{color:var(--ink);text-shadow:0 1px 10px rgba(255,255,255,.9)}
:root:not([data-theme]) .pickup-s{color:var(--ink-2);text-shadow:0 1px 10px rgba(255,255,255,.9)}
:root:not([data-theme]) .pickup-x{background:rgba(255,255,255,.8);border-color:var(--rule-2);color:var(--ink)}
:root:not([data-theme]) .pickup .product{background:rgba(255,255,255,.72);border-color:rgba(20,26,40,.14);color:var(--ink)}
:root:not([data-theme]) .pickup .product .thumb{background:rgba(20,26,40,.06)}
:root:not([data-theme]) .pickup .product .pmeta{color:var(--ink-3)}
:root:not([data-theme]) .pickup .product.picked{background:rgba(26,216,156,.18)}
:root:not([data-theme]) .pickup .hold-bar.inline{background:rgba(255,255,255,.88);border-top-color:var(--rule-2);color:var(--ink)}
:root:not([data-theme]) .pickup .hold-sub{color:var(--ink-3)}
}

/* Reception counter behind the "Who are you booking with?" block */
.pick-hero{position:relative;overflow:hidden}
.pick-bg{position:absolute;inset:0;container-type:size;overflow:hidden}
.pick-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
/* Right side fades out much lower so the kiosk stays visible; left keeps the
   earlier, deeper fade so the heading and photo row stay readable. */
.pick-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(14,18,24,.5) 0%,rgba(14,18,24,.24) 50%,rgba(14,18,24,.34) 76%,rgba(14,18,24,.72) 92%,var(--bg) 100%)}
.pick-bg::before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,rgba(14,18,24,.24) 0%,rgba(14,18,24,.32) 42%,rgba(14,18,24,.8) 70%,var(--bg) 92%);
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 46%,transparent 78%);
  mask-image:linear-gradient(to right,#000 0%,#000 46%,transparent 78%)}
.pick-hero-inner{position:relative;z-index:1}
.pick-hero .glance{border-bottom:none}
.lamp{position:absolute;width:16%;height:22%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,220,140,.85) 0%,rgba(255,200,80,.42) 40%,transparent 72%);
  mix-blend-mode:screen;filter:blur(1.4cqw);animation:lampglow 6s ease-in-out infinite}
.lamp.l1{left:68%;top:2%}
.lamp.l2{left:14%;top:0%;animation-delay:-2.6s}
@keyframes lampglow{0%,100%{opacity:.6}50%{opacity:1}}
:root[data-theme="light"] .pick-bg::after{background:linear-gradient(to bottom,rgba(253,252,249,.5) 0%,rgba(253,252,249,.38) 50%,rgba(253,252,249,.46) 76%,rgba(253,252,249,.8) 92%,var(--bg) 100%)}
:root[data-theme="light"] .pick-bg::before{background:linear-gradient(to bottom,rgba(253,252,249,.26) 0%,rgba(253,252,249,.38) 42%,rgba(253,252,249,.8) 70%,var(--bg) 92%)}
:root[data-theme="light"] .lamp{display:none}
/* Solid top behind the popup wording, scene fading in below it */
.pickup-bg::after{background:linear-gradient(to bottom,var(--bg) 0%,var(--bg) 16%,rgba(5,7,11,.72) 26%,rgba(5,7,11,.12) 44%,rgba(5,7,11,.2) 62%,rgba(5,7,11,.66) 100%)}
@media (prefers-reduced-motion:reduce){.lamp{animation:none}}

@media (prefers-color-scheme: light){
:root:not([data-theme]) .pick-bg::after{background:linear-gradient(to bottom,rgba(253,252,249,.5) 0%,rgba(253,252,249,.38) 50%,rgba(253,252,249,.46) 76%,rgba(253,252,249,.8) 92%,var(--bg) 100%)}
:root:not([data-theme]) .pick-bg::before{background:linear-gradient(to bottom,rgba(253,252,249,.26) 0%,rgba(253,252,249,.38) 42%,rgba(253,252,249,.8) 70%,var(--bg) 92%)}
:root:not([data-theme]) .lamp{display:none}
}

/* ================= 9/21: booking-flow fixes ================= */
/* Sticky Book bar — phones only */
.sticky-book{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:500px;z-index:30;
  display:flex;align-items:center;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom)) 18px;
  background:rgba(var(--bg-rgb),.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--rule-2);transition:transform .28s ease,opacity .28s ease}
.sticky-book.tucked{transform:translate(-50%,110%);opacity:0;pointer-events:none}
.sticky-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sticky-lbl{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--coral)}
.sticky-when{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:var(--accent-ink);border:0;cursor:pointer;
  font-family:'Archivo Black',sans-serif;font-size:14.5px;letter-spacing:-.2px;padding:12px 16px;border-radius:12px;text-decoration:none}
.sticky-btn svg{width:15px;height:15px}
body.has-sticky .page{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
@media (min-width:900px){.sticky-book{display:none}body.has-sticky .page{padding-bottom:0}}

/* Heads-up above Square's booking box */
.handoff{font-size:12.5px;line-height:1.5;color:var(--ink-2);margin:-2px 0 12px}

/* Reviews */
.reviews{margin:28px 22px 0}
.review-list{display:flex;flex-direction:column;gap:10px}
.review{margin:0;background:var(--bg-2);border:1px solid var(--rule-2);border-radius:14px;padding:14px 16px}
.review .stars{color:var(--honey);font-size:13px;letter-spacing:2px;margin-bottom:6px}
.review blockquote{margin:0;font-size:14px;line-height:1.55;color:var(--ink)}
.review figcaption{margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-3)}
.reviews-more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:13px;font-weight:700;color:var(--accent);text-decoration:none}
.reviews-more svg{width:13px;height:13px}

/* First visit */
.first-visit{margin:28px 22px 0}
.first-visit .map{position:relative;width:100%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid var(--rule-2);background:var(--bg-2)}
.first-visit .map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:invert(.9) hue-rotate(180deg) saturate(.7)}
.directions{display:flex;align-items:center;gap:8px;margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--bg-2);border:1px solid var(--rule-2);text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:600}
.directions svg{width:14px;height:14px;color:var(--accent);flex-shrink:0}
.directions span:nth-of-type(1){flex:1;min-width:0}
.directions .go{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-weight:700;white-space:nowrap}
.fv-list{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.fv-t{font-weight:700;font-size:14px;margin-bottom:2px}
.fv-d{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
:root[data-theme="light"] .first-visit .map iframe{filter:none}
@media (prefers-color-scheme: light){:root:not([data-theme]) .first-visit .map iframe{filter:none}}

/* Computers: new home sections span the page, soonest card centered */
@media (min-width:900px){
  .surface.home > .soonest,.surface.home > .reviews,.surface.home > .first-visit{grid-column:1 / -1;width:100%;max-width:760px;margin-left:auto;margin-right:auto}
  .surface.home > .soonest{margin-top:26px}
  .review-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .first-visit{display:grid;grid-template-columns:1.2fr 1fr;column-gap:24px;align-items:start}
  .first-visit .eyebrow{grid-column:1 / -1}
  .first-visit .map{grid-row:2 / span 3}
  .first-visit .directions{margin-top:0}
}

/* ================= In-page booking ================= */
.bb{background:var(--bg-2);border:2px solid var(--accent);border-radius:18px;padding:16px;box-shadow:0 0 0 6px rgba(26,216,156,.08)}
.bb-loading,.bb-msg{font-size:14px;color:var(--ink-2);padding:18px 4px;line-height:1.5}
.bb-msg a{color:var(--accent);font-weight:700}
.bb-head{display:flex;align-items:center;gap:8px;margin:0 0 14px}
.bb-back{width:34px;height:34px;flex:0 0 auto;border-radius:10px;border:1px solid var(--rule-2);background:var(--bg);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.bb-back svg{width:16px;height:16px}
.bb-title{font-family:'Archivo Black',sans-serif;font-size:17px;letter-spacing:-.3px;line-height:1.2;display:flex;flex-direction:column}
.bb-sub{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;color:var(--ink-3);letter-spacing:0;margin-top:2px}
.bb-var{color:var(--ink-2)}
.bb-list{display:flex;flex-direction:column;gap:8px}
.bb-svc{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--bg);border:1px solid var(--rule-2);border-radius:12px;padding:13px 14px;color:var(--ink);cursor:pointer;font:inherit}
.bb-svc:hover{border-color:var(--accent)}
.bb-svc svg{width:16px;height:16px;color:var(--ink-3);flex:0 0 auto}
.bb-svc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bb-svc-n{font-weight:700;font-size:14.5px}
.bb-svc-m{font-size:12.5px;color:var(--ink-3)}
.bb-tag{color:var(--coral);font-weight:700}
.bb-soonest{display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--coral);color:#1a0d06;border:0;border-radius:14px;padding:14px 16px;cursor:pointer;font:inherit;text-align:left;margin-bottom:14px}
.bb-soonest svg{width:18px;height:18px}
.bb-soon-l{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;opacity:.75}
.bb-soon-t{display:block;font-family:'Archivo Black',sans-serif;font-size:18px;letter-spacing:-.4px}
.bb-days{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.bb-day{background:var(--bg);border:1px solid var(--rule-2);border-radius:10px;padding:8px 4px;color:var(--ink);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;line-height:1.2}
.bb-day small{font-weight:500;font-size:11px;color:var(--ink-3)}
.bb-day.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.bb-day.on small{color:var(--accent-ink);opacity:.75}
.bb-times{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.bb-time{background:var(--bg);border:1px solid var(--rule-2);border-radius:10px;padding:11px 4px;color:var(--ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.bb-time:hover{border-color:var(--accent);color:var(--accent)}
.bb-summary{background:var(--bg);border:1px solid var(--rule-2);border-left:3px solid var(--accent);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.bb-sum-t{font-family:'Archivo Black',sans-serif;font-size:17px;letter-spacing:-.3px}
.bb-sum-s{font-size:13px;color:var(--ink-2);margin-top:2px}
.bb-form{display:flex;flex-direction:column;gap:11px}
.bb-form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.bb-form input,.bb-form textarea{font:inherit;font-size:16px;font-weight:500;color:var(--ink);background:var(--bg);border:1px solid var(--rule-2);border-radius:10px;padding:11px 12px;width:100%;resize:vertical}
.bb-form input:focus,.bb-form textarea:focus{outline:none;border-color:var(--accent)}
.bb-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bb-opt{font-weight:500;color:var(--ink-3)}
.bb-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.bb-err{font-size:13px;font-weight:600;color:var(--coral)}
.bb-go{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--accent-ink);border:0;border-radius:14px;padding:16px;font-family:'Archivo Black',sans-serif;font-size:16px;cursor:pointer}
.bb-go svg{width:17px;height:17px}
.bb-go:disabled{opacity:.6;cursor:default}
.bb-fine{font-size:11.5px;color:var(--ink-3);text-align:center;line-height:1.5}
.bb-done{text-align:center;padding:14px 6px 8px}
.bb-check{width:58px;height:58px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.bb-check svg{width:28px;height:28px}
.bb-done-t{font-family:'Archivo Black',sans-serif;font-size:24px;letter-spacing:-.6px}
.bb-done-w{font-family:'Archivo Black',sans-serif;font-size:17px;color:var(--accent);margin-top:6px}
.bb-done-s{font-size:14px;color:var(--ink-2);margin-top:2px}
.bb-done-n{font-size:12.5px;color:var(--ink-3);margin-top:14px;line-height:1.5}
@media (min-width:900px){ .surface.pro > .book-inline .bb{max-height:calc(100vh - 150px);overflow:auto} .bb-days{grid-template-columns:repeat(7,1fr)} .bb-times{grid-template-columns:repeat(4,1fr)} }
/* Booking v2: descriptions, options, calendar, usual */
.bb-svc-d{font-size:12.5px;color:var(--ink-2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bb-desc{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:-4px 0 14px}
.bb-usual{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:rgba(26,216,156,.10);border:1.5px solid var(--accent);border-radius:14px;padding:14px 16px;color:var(--ink);cursor:pointer;font:inherit;margin-bottom:12px}
.bb-usual svg{width:18px;height:18px;color:var(--accent);flex:0 0 auto}
.bb-usual-txt{flex:1;display:flex;flex-direction:column;gap:1px}
.bb-usual-l{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent)}
.bb-usual-t{font-family:'Archivo Black',sans-serif;font-size:17px;letter-spacing:-.3px}
.bb-usual-s{font-size:13px;color:var(--ink-2)}
.bb-forget{margin-top:12px;font-size:12px;color:var(--ink-3);text-align:center}
.bb-forget button{background:none;border:0;color:var(--ink-2);text-decoration:underline;font:inherit;cursor:pointer;padding:0}
.bb-days{grid-template-columns:repeat(4,1fr)}
.bb-times-h{font-size:12.5px;font-weight:700;color:var(--ink-2);margin:2px 0 8px}
.bb-cal-toggle,.bb-again{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;padding:12px;border-radius:12px;border:1px dashed var(--rule-2);background:transparent;color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.bb-cal-toggle svg,.bb-again svg{width:16px;height:16px;color:var(--accent)}
.bb-again{border-style:solid;border-color:var(--accent);color:var(--ink);margin-top:18px}
.bb-cal{margin-top:10px;background:var(--bg);border:1px solid var(--rule-2);border-radius:14px;padding:12px}
.bb-cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.bb-cal-t{font-weight:800;font-size:14.5px}
.bb-cal-nav{width:32px;height:32px;border-radius:9px;border:1px solid var(--rule-2);background:var(--bg-2);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.bb-cal-nav svg{width:14px;height:14px}
.bb-cal-nav:disabled{opacity:.3;cursor:default}
.bb-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.bb-cal-w{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:var(--ink-3);text-align:center;padding:4px 0}
.bb-cal-d{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:9px;font-size:13px;color:var(--ink-dim);border:1px solid transparent;background:none;font-family:inherit;padding:0}
.bb-cal-d.open{color:var(--ink);font-weight:700;border-color:rgba(26,216,156,.45);cursor:pointer}
.bb-cal-d.open:hover{background:rgba(26,216,156,.12)}
.bb-cal-d.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.bb-remember{flex-direction:row!important;align-items:center;gap:9px!important;font-weight:600!important;cursor:pointer}
.bb-remember input{width:18px;height:18px;accent-color:var(--accent);flex:0 0 auto;padding:0}
@media (min-width:900px){ .bb-days{grid-template-columns:repeat(8,1fr)} }
.bb-desc{white-space:pre-line;line-height:1.65;font-size:14px}
.bb-svc-d{white-space:pre-line;-webkit-line-clamp:3}

/* Your barber + Find a time (inside the soonest card) */
.usual-line{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border-radius:12px;background:rgba(26,216,156,.10);border:1px solid rgba(26,216,156,.45)}
.ul-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.ul-l{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent)}
.ul-t{font-weight:700;font-size:14px}
.usual-line .pill{background:var(--accent);color:var(--accent-ink)}
.find-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin-top:14px;padding:11px 0 0;border:0;border-top:1px solid var(--rule-2);background:none;color:var(--ink-2);font:inherit;font-size:13px;cursor:pointer;text-align:left}
.find-toggle span{display:inline-flex;align-items:center;gap:4px;color:var(--coral);font-weight:700;white-space:nowrap}
.find-toggle svg{width:13px;height:13px;transition:transform .2s}
.find-toggle.open svg{transform:rotate(90deg)}
.find{margin-top:12px}
.find-l{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-3);margin:10px 0 7px}
.find-days,.find-parts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.find-day,.find-part,.find-date{background:var(--bg);border:1px solid var(--rule-2);border-radius:10px;padding:8px 4px;color:var(--ink);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2;text-align:center}
.find-day small{font-weight:500;font-size:11px;color:var(--ink-3)}
.find-date small{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;opacity:.7;letter-spacing:.04em;text-transform:uppercase}
.find-cal{margin:10px 0 2px}
.find-day.on,.find-part.on,.find-date.on{background:var(--coral);border-color:var(--coral);color:#1a0d06}
.find-day.on small{color:#1a0d06;opacity:.7}
.find-res{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.find-msg{font-size:13px;color:var(--ink-2);line-height:1.5}
.find-also{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.find-row{background:var(--bg);border:1px solid var(--rule-2);border-radius:12px;padding:11px 12px}
.find-row.mine{border-color:var(--accent);background:rgba(26,216,156,.06)}
.find-who{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.find-av{width:36px;height:36px;border-radius:50%;background:#111 center/cover;border:2px solid var(--accent);flex:0 0 auto}
.find-who > span:last-child{display:flex;flex-direction:column}
.find-nm{font-weight:800;font-size:14px}
.find-nm em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent);margin-left:6px}
.find-svc{font-size:12px;color:var(--ink-3)}
.find-times{display:flex;flex-wrap:wrap;gap:6px}
.find-t{background:var(--bg-2);border:1px solid var(--rule-2);border-radius:9px;padding:8px 11px;color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.find-t:hover{border-color:var(--accent);color:var(--accent)}
.find-more{align-self:center;font-size:12.5px;font-weight:700;color:var(--accent);text-decoration:none;padding:0 4px}
/* Service type chips on the soonest card */
.soon-types{display:flex;gap:6px;margin:2px 0 12px;flex-wrap:wrap}
.soon-types button{background:transparent;border:1px solid var(--rule-2);color:var(--ink-2);border-radius:999px;padding:5px 11px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.soon-types button.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
/* Who? row in Find a time */
.find-who-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.find-anyone,.find-pick{background:var(--bg);border:1px solid var(--rule-2);border-radius:10px;padding:7px 2px 6px;color:var(--ink);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:62px}
.find-anyone{font-size:12.5px}
.find-pick-av{width:30px;height:30px;border-radius:50%;background:#111 center/cover;display:block}
.find-pick-n{line-height:1}
.find-anyone.on,.find-pick.on{border-color:var(--coral);box-shadow:inset 0 0 0 1px var(--coral);background:rgba(255,138,91,.10)}
.find-meet{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:700;color:var(--accent);text-decoration:none}
.find-link{background:none;border:0;padding:0;font:inherit;color:var(--accent);font-weight:700;text-decoration:underline;cursor:pointer}
html{scroll-behavior:smooth}
#meet{scroll-margin-top:80px}
[hidden]{display:none!important}
.bb-hand-why{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:0 0 10px}
.bb-hand-steps{margin:0 0 16px;padding-left:20px;font-size:14px;line-height:1.8;color:var(--ink)}
.bb-hand-steps strong{color:var(--accent)}
a.bb-go{text-decoration:none}

/* ================= Livelier look (preview pages: body.fx) ================= */
/* Words ease in */
@keyframes fx-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fx .subpage-title>*,.fx .shop-hero>*,.fx .home .actions>*{animation:fx-rise .7s cubic-bezier(.2,.7,.2,1) both}
.fx .subpage-title>*:nth-child(1),.fx .shop-hero>*:nth-child(1){animation-delay:.15s}
.fx .subpage-title>*:nth-child(2),.fx .shop-hero>*:nth-child(2){animation-delay:.3s}
.fx .subpage-title>*:nth-child(3),.fx .shop-hero>*:nth-child(3){animation-delay:.45s}
.fx .shop-hero>*:nth-child(4){animation-delay:.6s}
.fx .shop-hero>*:nth-child(5){animation-delay:.72s}
.fx .home .actions>*{animation-delay:.85s}
.fx .glance .eyebrow{animation:fx-rise .6s .55s both}

/* Lights come on (Book a chair page) */
@keyframes fx-room{from{filter:brightness(.25) saturate(.6)}to{filter:none}}
@keyframes fx-lampon{0%{opacity:0}8%{opacity:.9}12%{opacity:.1}20%{opacity:1}26%{opacity:.25}40%,100%{opacity:.8}}
.fx .pick-bg img{animation:fx-room 1.6s .25s ease-out both}
.fx .lamp{animation:fx-lampon 1.4s .35s both,lampglow 6s 1.9s ease-in-out infinite}

/* Quick select: easier to read, photos flip over on arrival */
.fx .glance .eyebrow{font-size:12px;color:var(--ink);letter-spacing:1.6px}
.fx .glance .eyebrow::before{background:var(--accent)}
.fx .glance-row{perspective:700px}
@keyframes fx-flip{from{opacity:0;transform:rotateY(-180deg)}55%{opacity:1}to{opacity:1;transform:none}}
.fx .g-item{animation:fx-flip .75s cubic-bezier(.3,.7,.3,1) both;animation-delay:calc(.7s + var(--i,0) * 90ms);transform-style:preserve-3d}

/* Next available: small tab on the screen edge that slides a panel out */
.na-tab{position:fixed;z-index:40;top:46%;right:max(0px,calc((100vw - 500px) / 2));writing-mode:vertical-rl;transform:rotate(180deg);
  display:flex;align-items:center;gap:8px;padding:14px 8px;background:var(--accent);color:var(--accent-ink);border:0;
  border-radius:0 12px 12px 0;font:700 12.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.4px;cursor:pointer;box-shadow:-6px 0 22px rgba(0,0,0,.45)}
.na-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-ink);animation:na-pulse 1.8s ease-in-out infinite}
@keyframes na-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes na-nudge{0%,100%{transform:rotate(180deg) translateX(0)}30%{transform:rotate(180deg) translateX(9px)}55%{transform:rotate(180deg) translateX(0)}75%{transform:rotate(180deg) translateX(4px)}}
.na-tab.nudge{animation:na-nudge .9s ease-in-out}
.na-tab.gone{opacity:0;pointer-events:none}
.na-shade{position:fixed;inset:0;z-index:41;background:rgba(0,0,0,.5);animation:fx-fade .25s both}
@keyframes fx-fade{from{opacity:0}to{opacity:1}}
.na-panel{position:fixed;z-index:42;top:0;bottom:0;right:max(0px,calc((100vw - 500px) / 2));width:min(90vw,440px);
  background:var(--bg);border-left:1px solid var(--rule-2);box-shadow:-24px 0 50px rgba(0,0,0,.55);
  transform:translateX(105%);visibility:hidden;transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s .32s;overflow-y:auto;
  padding:calc(14px + env(safe-area-inset-top,0px)) 0 calc(24px + env(safe-area-inset-bottom,0px))}
.na-panel.open{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.na-top{display:flex;align-items:center;justify-content:space-between;padding:4px 20px 0}
.na-ttl{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent)}
.na-x{width:34px;height:34px;border-radius:50%;border:1px solid var(--rule-2);background:none;color:var(--ink-2);font-size:14px;cursor:pointer}
.na-panel .soonest{margin:14px 16px 0}

@media (prefers-reduced-motion:reduce){
  .fx .subpage-title>*,.fx .shop-hero>*,.fx .home .actions>*,.fx .glance .eyebrow,.fx .pick-bg img,.fx .g-item,.na-tab.nudge,.na-dot,.na-shade{animation:none}
  .fx .lamp{animation:none;opacity:.8}
  .na-panel,.na-panel.open{transition:none}
}

/* Next available as a slim fold-down bar under Quick select (preview) */
.na-fold{margin:14px 20px 0;border:1px solid var(--rule-2);border-radius:12px;background:rgba(255,255,255,.02);overflow:hidden}
.na-bar{width:100%;display:flex;align-items:center;gap:8px;padding:10px 12px;background:none;border:0;color:var(--ink-2);font:500 13px/1.2 'Inter',system-ui,sans-serif;cursor:pointer;text-align:left}
.na-bar .na-dot{background:var(--accent);box-shadow:0 0 0 3px rgba(26,216,156,.15)}
.na-l{color:var(--ink);font-weight:600}
.na-t{flex:1;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.na-chev{width:14px;height:14px;flex:0 0 auto;color:var(--ink-3);transition:transform .25s}
.na-fold.open .na-chev{transform:rotate(180deg)}
.na-fold.open{border-color:rgba(26,216,156,.35)}
.na-body .soonest{margin:0;border:0;border-top:1px solid var(--rule);border-radius:0;background:transparent}
.na-body .soonest .ribbon{display:none}
@keyframes na-bob{0%,100%{transform:none}40%{transform:translateY(3px)}}
.na-fold:not(.open) .na-chev.bob{animation:na-bob .6s ease-in-out 2}
.fx .na-fold{animation:fx-rise .6s 1.3s both}
@media (prefers-reduced-motion:reduce){.fx .na-fold,.na-chev.bob{animation:none}.na-chev{transition:none}}

/* Soonest available bar: orange outline with a soft glow */
.na-fold{border-color:rgba(255,138,91,.7);box-shadow:0 0 0 1px rgba(255,138,91,.18),0 0 18px rgba(255,138,91,.22)}
.na-fold.open{border-color:var(--coral);box-shadow:0 0 0 1px rgba(255,138,91,.25),0 0 24px rgba(255,138,91,.3)}
.na-bar .na-dot{background:var(--coral);box-shadow:0 0 0 3px rgba(255,138,91,.18)}
.na-chev{color:var(--coral)}
@keyframes na-glow{0%,100%{box-shadow:0 0 0 1px rgba(255,138,91,.18),0 0 14px rgba(255,138,91,.18)}50%{box-shadow:0 0 0 1px rgba(255,138,91,.3),0 0 26px rgba(255,138,91,.38)}}
.na-fold:not(.open){animation:fx-rise .6s 1.3s both,na-glow 3.2s 2s ease-in-out infinite}
:root[data-theme="light"] .na-fold{box-shadow:0 0 12px rgba(214,90,42,.18)}

/* Barber pages: same arrival touches */
@keyframes fx-pop{from{opacity:0;transform:rotateY(-160deg) scale(.9)}60%{opacity:1}to{opacity:1;transform:none}}
.fx .pro-hero{perspective:700px}
.fx .pro-hero .txt>*{animation:fx-rise .7s cubic-bezier(.2,.7,.2,1) both}
.fx .pro-hero .txt>*:nth-child(1){animation-delay:.2s}
.fx .pro-hero .txt>*:nth-child(2){animation-delay:.35s}
.fx .pro-hero .avatar{animation:fx-pop .8s .45s cubic-bezier(.3,.7,.3,1) both}
.fx .pro-body>*{animation:fx-rise .6s cubic-bezier(.2,.7,.2,1) both}
.fx .pro-body>*:nth-child(1){animation-delay:.55s}
.fx .pro-body>*:nth-child(2){animation-delay:.65s}
.fx .pro-body>*:nth-child(3){animation-delay:.75s}
.fx .pro-body>*:nth-child(n+4){animation-delay:.85s}
.fx .interior img.bg{animation:fx-room 1.4s .1s ease-out both}
@media (prefers-reduced-motion:reduce){
  .na-fold:not(.open){animation:none}
  .fx .pro-hero .txt>*,.fx .pro-hero .avatar,.fx .pro-body>*,.fx .interior img.bg{animation:none}
}

/* A simple green line under each name that stretches out when you're on that tile */
.pole-line{display:block;height:3px;border-radius:3px;background:var(--accent);box-shadow:0 0 10px rgba(26,216,156,.35);
  transition:width .45s cubic-bezier(.2,.7,.2,1)}
.barber-card .rl.pole-line{width:26px;margin:8px 0 10px}
.barber-card:hover .rl.pole-line,.barber-card:focus-visible .rl.pole-line,.barber-card.in-view .rl.pole-line{width:110px}
.role.pole-line{width:34px;margin:14px 0 0;gap:0}
.role.pole-line::before{content:none}
/* Barber page: short dash that stretches out once as the page opens, then settles back; stretches again on hover */
@keyframes line-grow{0%{width:0}30%{width:34px}55%,70%{width:120px}100%{width:34px}}
.fx .pro-hero .txt>.pole-line{animation:line-grow 2.4s .5s cubic-bezier(.2,.7,.2,1) backwards}
.pro-hero:hover .role.pole-line{width:120px}
@media (prefers-reduced-motion:reduce){.pole-line{transition:none}.fx .pro-hero .txt>.pole-line{animation:none}}

/* How many people? (same service back to back) */
.bb-qty{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--rule-2);border-radius:12px;background:var(--bg-2)}
.bb-qty-l span{display:block;font-weight:600;color:var(--ink);font-size:14px}
.bb-qty-l small{display:block;color:var(--ink-3);font-size:12px;margin-top:2px}
.bb-qty-c{display:flex;align-items:center;gap:10px}
.bb-qty-c span{min-width:18px;text-align:center;font:700 17px/1 'Inter',system-ui,sans-serif;color:var(--ink);font-variant-numeric:tabular-nums}
.bb-qty-c button{width:36px;height:36px;border-radius:50%;border:1px solid var(--rule-2);background:var(--bg);color:var(--ink);font-size:18px;line-height:1;cursor:pointer}
.bb-qty-c button:not(:disabled):hover{border-color:var(--accent);color:var(--accent)}
.bb-qty-c button:disabled{opacity:.35;cursor:default}
.bb-qty-note{margin:-6px 0 14px;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,138,91,.45);background:rgba(255,138,91,.08);color:var(--ink-2);font-size:13px;line-height:1.45;animation:qty-pop .35s cubic-bezier(.2,.8,.3,1.2) both}
.bb-qty-note strong{color:var(--coral)}
@keyframes qty-pop{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bb-qty-note{animation:none}}

/* "Add to your visit" (shop products, pay at the shop) */
.bb-shop{margin:4px 0 14px;border:1px solid var(--rule-2);border-radius:12px;overflow:hidden;background:var(--bg-2)}
.bb-shop-h{padding:11px 14px;border-bottom:1px solid var(--rule)}
.bb-shop-h span{display:block;font-weight:700;color:var(--ink);font-size:14px}
.bb-shop-h small{display:block;color:var(--ink-3);font-size:12px;margin-top:2px}
.bb-prod{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid var(--rule)}
.bb-prod:first-of-type{border-top:0}
.bb-prod.on{background:rgba(26,216,156,.06)}
.bb-prod-n{display:block;color:var(--ink);font-size:14px;font-weight:600}
.bb-prod-m{display:block;color:var(--ink-3);font-size:12.5px}
.bb-prod-m em{font-style:normal;color:var(--coral)}
.bb-prod-add{border:1px solid var(--accent);color:var(--accent);background:none;border-radius:99px;padding:6px 14px;font:600 13px/1 'Inter',system-ui,sans-serif;cursor:pointer}
.bb-prod-c button{width:32px;height:32px;font-size:16px}
.bb-done-i{margin:10px auto 0;max-width:420px;padding:10px 12px;border-radius:10px;background:rgba(26,216,156,.08);border:1px solid rgba(26,216,156,.3);color:var(--ink-2);font-size:13.5px}
.bb-done-i strong{color:var(--accent)}
.bb-forgot{margin:14px auto 0;max-width:460px;text-align:left}
.bb-forgot-b{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;background:none;border:1px dashed var(--rule-2);color:var(--ink-2);border-radius:12px;padding:12px 14px;font:500 14px/1.2 'Inter',system-ui,sans-serif;cursor:pointer}
.bb-forgot-b span{display:flex;align-items:center;gap:4px;color:var(--accent);font-weight:600}
.bb-forgot-b svg{width:14px;height:14px}
.bb-prod-g{flex-direction:column;align-items:stretch;gap:8px}
.bb-opts{display:flex;flex-wrap:wrap;gap:6px}
.bb-opt{border:1px solid var(--rule-2);background:var(--bg);color:var(--ink-2);border-radius:99px;padding:6px 12px;font:600 12.5px/1 'Inter',system-ui,sans-serif;cursor:pointer}
.bb-opt.on{border-color:var(--accent);color:var(--accent-ink);background:var(--accent)}
.bb-opt em{font-style:normal;color:var(--coral);font-weight:500}
.bb-opt.on em{color:var(--accent-ink)}
.bb-after{margin-top:6px}
.bb-shop{max-height:none}

/* "This time is held for you" clock (8 min, like Square's own page) */
.bb-hold{display:flex;align-items:center;gap:8px;margin:-4px 0 14px;padding:9px 12px;border-radius:10px;background:rgba(26,216,156,.08);border:1px solid rgba(26,216,156,.3);color:var(--ink-2);font-size:13px}
.bb-hold b{color:var(--accent);font-variant-numeric:tabular-nums;font-weight:700}
.bb-hold-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:na-pulse 1.8s ease-in-out infinite;flex:0 0 auto}
.bb-hold.low{background:rgba(255,138,91,.1);border-color:rgba(255,138,91,.5)}
.bb-hold.low b{color:var(--coral)}.bb-hold.low .bb-hold-dot{background:var(--coral)}
@media (prefers-reduced-motion:reduce){.bb-hold-dot{animation:none}}

/* Upcoming visit (this phone booked with "Remember me") */
.bb-visit{margin:0 0 14px;padding:12px 14px;border-radius:12px;border:1px solid rgba(26,216,156,.35);background:rgba(26,216,156,.06)}
.bb-visit-l{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--accent)}
.bb-visit-w{display:block;color:var(--ink);font-weight:600;font-size:14px;margin:2px 0 10px}
.bb-visit .bb-forgot{margin:0;max-width:none}
.visit-bar{display:flex;align-items:center;gap:8px;padding:9px 16px;background:rgba(26,216,156,.08);border-bottom:1px solid rgba(26,216,156,.25);color:var(--ink-2);text-decoration:none;font-size:13px}
.visit-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.visit-txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.visit-go{color:var(--accent);font-weight:600;white-space:nowrap}

/* Shelf pop-up after booking (live shop products) */
.pickup .product{cursor:pointer}
.pickup .product.has-opts{cursor:default;align-items:start}
.pickup .product .bb-opts{margin-top:8px}
.pickup .bb-opt{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
.pickup .bb-opt.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pickup .product.has-opts .ptick{margin-top:12px}
.pickup-msg{position:relative;z-index:1;margin:8px 16px 0;padding:9px 12px;border-radius:10px;background:rgba(8,11,16,.78);border:1px solid rgba(255,138,91,.5);color:#ffd9c7;font-size:13px}
.pickup-msg small{opacity:.6}
.pickup .hold-bar .pill[disabled]{opacity:.45;cursor:default}
.pickup .hold-bar .pill svg{width:14px;height:14px}
.pickup-inner > .hold-bar.inline{margin-top:auto}.pickup-inner > .pickup-body + .pickup-msg + .hold-bar.inline,.pickup-inner > .pickup-body + .hold-bar.inline{margin-top:0}

/* ================= 9/21: light-mode art gets its lights too ================= */
.interior .s5{display:none}
:root[data-theme="light"] .sconce{display:block;mix-blend-mode:multiply;filter:blur(6px);background:radial-gradient(ellipse at center,rgba(255,196,96,.55) 0%,rgba(255,206,120,.28) 38%,transparent 70%);width:9%;height:34%}
:root[data-theme="light"] .interior.barber .s1{left:21.7%;top:10%}:root[data-theme="light"] .interior.barber .s2{left:55%;top:10%}:root[data-theme="light"] .interior.barber .s3{left:81.2%;top:10%}:root[data-theme="light"] .interior.barber .s4,:root[data-theme="light"] .interior.barber .s5{display:none}
:root[data-theme="light"] .interior.salon .s1{left:17.5%;top:18%}:root[data-theme="light"] .interior.salon .s2{left:34.5%;top:18%}:root[data-theme="light"] .interior.salon .s3{left:53%;top:18%}:root[data-theme="light"] .interior.salon .s4{left:63%;top:18%}:root[data-theme="light"] .interior.salon .s5{display:block;left:81%;top:18%}
:root[data-theme="light"] .lamp{display:block;mix-blend-mode:multiply;background:radial-gradient(ellipse at center,rgba(255,196,96,.5) 0%,rgba(255,210,130,.22) 42%,transparent 72%)}
:root[data-theme="light"] .lamp.l1{left:66%;top:6%}:root[data-theme="light"] .lamp.l2{left:15%;top:6%}
@media (prefers-color-scheme: light){
:root:not([data-theme]) .sconce{display:block;mix-blend-mode:multiply;filter:blur(6px);background:radial-gradient(ellipse at center,rgba(255,196,96,.55) 0%,rgba(255,206,120,.28) 38%,transparent 70%);width:9%;height:34%}
:root:not([data-theme]) .interior.barber .s1{left:21.7%;top:10%}:root:not([data-theme]) .interior.barber .s2{left:55%;top:10%}:root:not([data-theme]) .interior.barber .s3{left:81.2%;top:10%}:root:not([data-theme]) .interior.barber .s4,:root:not([data-theme]) .interior.barber .s5{display:none}
:root:not([data-theme]) .interior.salon .s1{left:17.5%;top:18%}:root:not([data-theme]) .interior.salon .s2{left:34.5%;top:18%}:root:not([data-theme]) .interior.salon .s3{left:53%;top:18%}:root:not([data-theme]) .interior.salon .s4{left:63%;top:18%}:root:not([data-theme]) .interior.salon .s5{display:block;left:81%;top:18%}
:root:not([data-theme]) .lamp{display:block;mix-blend-mode:multiply;background:radial-gradient(ellipse at center,rgba(255,196,96,.5) 0%,rgba(255,210,130,.22) 42%,transparent 72%)}
:root:not([data-theme]) .lamp.l1{left:66%;top:6%}:root:not([data-theme]) .lamp.l2{left:15%;top:6%}
}

/* Directions after booking / after setting a product aside */
.bb-dir{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--bg-2);border:1px solid var(--rule-2);color:var(--ink);text-decoration:none;font-weight:600;font-size:14px}
.bb-dir svg,.bb-dir-pill svg{width:15px;height:15px;color:var(--accent);flex-shrink:0}
.bb-dir-pill{display:inline-flex;align-items:center;gap:6px;text-decoration:none;margin-left:auto;margin-right:6px}
.first-visit .hours{margin-top:12px}

/* Computers: storefront and video melt into the page instead of sitting as two hard boxes */
@media (min-width:900px){
  .surface.home .building,.surface.home .behind{border-radius:0;border:0;box-shadow:none;-webkit-mask-composite:source-in;mask-composite:intersect}
  .surface.home .building{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 2.5%,#000 97.5%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 2.5%,#000 97.5%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%)}
  .surface.home .behind{padding-left:14px;padding-right:14px;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 92%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 92%,transparent 100%)}
  .surface.home{gap:0 12px}
}

/* ---- Home-screen app ---- */
@media (display-mode: standalone){ .head{padding-top:calc(14px + env(safe-area-inset-top))} }
.app-slot:empty{display:none}
.app-slot{margin:14px 22px 0}
.bb .app-slot{margin:12px 0 0}
.app-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--bg-2);border:1px solid var(--rule-2);text-align:left}
.app-card img,.app-sheet-p img{border-radius:11px;flex-shrink:0;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.app-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--ink-2);line-height:1.35}
.app-txt b{color:var(--ink);font-size:14px}
.app-btns{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0}
.app-btns .pill{padding:8px 16px;font-size:13px}
.app-no{background:none;border:0;color:var(--ink-3);font:inherit;font-size:11.5px;cursor:pointer;padding:2px}
.app-link-wrap{text-align:center;padding-top:18px}
.app-link{background:none;border:0;color:var(--accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.app-sheet{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center}
.app-sheet-p{position:relative;width:100%;max-width:460px;background:var(--bg-2);border-top-left-radius:20px;border-top-right-radius:20px;padding:22px 22px calc(22px + env(safe-area-inset-bottom));animation:fx-rise .3s ease both}
.app-t{font-family:'Archivo Black',sans-serif;font-size:19px;margin:12px 0 8px;color:var(--ink)}
.app-sheet-p ol{margin:0 0 16px;padding-left:20px;color:var(--ink-2);font-size:14.5px;line-height:1.6}
.app-sheet-p ol svg{width:17px;height:17px;vertical-align:-3px;color:var(--accent)}
.app-hint{display:block;font-size:12.5px;color:var(--ink-3)}
.app-sheet-p .pill{width:100%;justify-content:center}
.app-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:99px;border:1px solid var(--rule-2);background:none;color:var(--ink-2);cursor:pointer}
.app-card .pill,.app-sheet-p .pill{background:var(--accent);color:#052017;border:0;font-weight:700}

/* ================= Shop page (pay online, pickup at the shop) ================= */
.shop-btn{margin-top:10px}
.shop-pickup{display:flex;align-items:center;gap:8px;margin:4px 22px 14px;padding:12px 14px;border-radius:12px;background:var(--honey-bg,rgba(245,166,35,.08));border:1px solid var(--honey-bord,rgba(245,166,35,.3));color:var(--ink);text-decoration:none;font-size:13.5px}
.shop-pickup svg{width:15px;height:15px;color:var(--honey);flex-shrink:0}
.shop-pickup > span:nth-of-type(1){flex:1;min-width:0}
.shop-pickup .go{display:inline-flex;align-items:center;gap:3px;color:var(--accent);font-weight:700;white-space:nowrap}
.shop-app{padding:0 16px 110px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.sp{background:var(--bg-2);border:1px solid var(--rule-2);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s}
.sp.in{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,216,156,.12)}
.sp-img{position:relative;aspect-ratio:1/1;background:#f4f2ed;display:flex;align-items:center;justify-content:center}
.sp-img img{width:100%;height:100%;object-fit:cover;display:block}
.sp-noimg{font:700 54px/1 'Archivo Black',sans-serif;color:#b9b4a6}
.sp-low{position:absolute;top:10px;left:10px;background:var(--coral,#ff8a5b);color:#1a0c05;font-size:11px;font-weight:700;padding:4px 9px;border-radius:99px}
.sp-body{padding:13px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.sp-t{font-weight:700;font-size:15.5px;color:var(--ink);line-height:1.25}
.sp-size{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-3)}
.sp-d{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.45}
.sp-tags{display:flex;flex-wrap:wrap;gap:5px}
.sp-tags span{font-size:11px;color:var(--ink-2);border:1px solid var(--rule-2);border-radius:99px;padding:3px 8px}
.sp-opts{margin-top:2px}
.sp-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:6px}
.sp-price{font-weight:800;font-size:18px;color:var(--ink)}
.sp-add{padding:9px 18px;font-size:13.5px;background:var(--accent);color:#052017;border:0;font-weight:700}
.sp-add[disabled]{background:var(--bg-3);color:var(--ink-3)}
.sp-qty{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--accent);border-radius:99px;padding:3px}
.sp-qty button{width:32px;height:32px;border-radius:99px;border:0;background:var(--bg-3);color:var(--ink);font-size:18px;cursor:pointer}
.sp-qty b{min-width:14px;text-align:center}
.sp-incart{font-size:12.5px;color:var(--accent)}
.sp-clear{background:none;border:0;color:var(--ink-3);text-decoration:underline;font:inherit;font-size:12px;cursor:pointer}
.shop-bar{position:fixed;left:50%;bottom:0;transform:translate(-50%,110%);width:100%;max-width:560px;z-index:40;display:flex;align-items:center;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(var(--bg-rgb),.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--rule-2);transition:transform .3s ease}
.shop-bar.on{transform:translate(-50%,0)}
.shop-bar .hold-count{flex:1}
.shop-bar .pill{background:var(--accent);color:#052017;border:0;font-weight:700}
.shop-co .pickup-panel{max-width:520px}
.co-body{padding-bottom:8px}
.co-lines{background:var(--bg);border:1px solid var(--rule-2);border-radius:12px;padding:10px 12px;margin-bottom:14px}
.co-l{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--ink);padding:4px 0}
.co-sub{color:var(--ink-3);font-size:13px}
.co-tot{border-top:1px solid var(--rule-2);margin-top:4px;padding-top:8px;font-weight:800;font-size:16px}
.co-f{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.co-f label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.co-f label em{font-weight:400;color:var(--ink-3);font-style:normal}
.co-f input{font:inherit;font-size:16px;padding:11px 12px;border-radius:12px;border:1px solid var(--rule-2);background:var(--bg);color:var(--ink)}
.co-f input:focus{outline:none;border-color:var(--accent)}
.co-f .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.co-card-l{font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.co-card{min-height:90px}
.co-secure{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.co-receipt{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-weight:700;text-decoration:none;font-size:14px}
.co-receipt svg,.shop-bar svg{width:14px;height:14px}
.shop-co .hold-bar .pill{background:var(--accent);color:#052017;border:0;font-weight:700}
.shop-co .hold-bar .pill.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule-2)}
.shop-link-card{display:flex;align-items:center;gap:12px;margin:18px 22px 0;padding:12px 14px;border-radius:14px;background:var(--bg-2);border:1px solid var(--rule-2);color:var(--ink);text-decoration:none}
.slc-imgs{display:flex;flex-shrink:0}
.slc-imgs img{width:40px;height:40px;border-radius:10px;border:2px solid var(--bg-2);object-fit:cover;margin-left:-10px}
.slc-imgs img:first-child{margin-left:0}
.slc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--ink-3)}
.slc-txt b{font-size:15px;color:var(--ink)}
.shop-link-card > svg{width:16px;height:16px;color:var(--accent);flex-shrink:0}
.pickup .thumb.has-img{background:#f4f2ed;overflow:hidden;padding:0}
.pickup .thumb.has-img img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:900px){ .surface.shop{display:block;padding:24px 32px 0} .shop-app{padding:0 22px 110px} .surface.pick .shop-link-card{max-width:720px;margin-left:auto;margin-right:auto} }
@media (min-width:900px){ .surface.shop .counter{height:300px;overflow:hidden;border-radius:18px} .surface.shop .counter img{width:100%;height:100%;object-fit:cover;object-position:center 60%} .shop-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} }
@media (max-width:599px){
  .shop-grid{gap:10px}
  .sp{flex-direction:row}
  .sp-img{width:118px;min-width:118px;aspect-ratio:auto;align-self:stretch}
  .sp-img img{position:absolute;inset:0;object-fit:contain;padding:6px}
  .sp-body{padding:11px 12px 12px;gap:5px}
  .sp-t{font-size:14.5px}
  .sp-d{font-size:12.5px}
  .sp-tags span{font-size:10.5px;padding:2px 7px}
  .sp-low{top:6px;left:6px;font-size:10px;padding:3px 7px}
  .sp-price{font-size:16px}
}

/* ---- No-show protection (card saved in the barber's Square) ---- */
.bb-ns{margin:6px 0 4px;padding:14px;border-radius:14px;background:var(--bg);border:1px solid var(--honey-bord,rgba(245,166,35,.3))}
.bb-ns-t{font-weight:800;font-size:15px;color:var(--ink);margin-bottom:6px}
.bb-ns-l{margin:0 0 12px;padding-left:18px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.bb-ns-l li{margin:3px 0}
.bb-ns-l b{color:var(--ink)}
.bb-ns-l a{color:var(--accent);font-weight:700}
.bb-ns-card-l{font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.bb-ns-card{min-height:90px}
.bb-ns-agree{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px;margin:8px 0 6px;font-size:13.5px!important;color:var(--ink)!important;font-weight:600;line-height:1.4}
.bb-ns-agree input{width:20px;height:20px;flex:0 0 auto;margin-top:1px;accent-color:var(--accent)}

.pickup-btns{display:flex;gap:8px;align-items:center;flex-shrink:0}
.pickup-btns .pill.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--rule-2)}
@media (max-width:420px){.pickup-btns .pill{padding:9px 12px;font-size:13px}}
.pickup .hold-bar.inline:has(.pickup-btns){flex-wrap:wrap;row-gap:10px}
.pickup .hold-bar.inline:has(.pickup-btns) .hold-count{flex:1 1 100%;flex-direction:row;align-items:baseline;gap:8px}
.pickup-btns{width:100%}
.pickup-btns .pill{justify-content:center;white-space:nowrap}
.pickup-btns .pill:last-child{flex:1}

.app-p{margin:0 0 16px;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.app-sheet-btns{display:flex;gap:8px}
.app-sheet-btns .pill{justify-content:center}
.app-sheet-btns .pill:last-child{flex:1;background:var(--accent);color:#052017;border:0;font-weight:700}
.app-sheet-btns .pill.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--rule-2)}

/* ---- 9/22 cleanup ---- */
.av-col{display:flex;flex-direction:column;align-items:center;gap:14px}
.ig-mini{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--accent);background:var(--bg);color:var(--accent);cursor:pointer;text-decoration:none;transition:color .15s,border-color .15s}
.ig-mini svg{width:21px;height:21px}
.ig-mini:hover,.ig-mini:focus-visible{color:var(--coral,#ff8a5b);border-color:var(--coral,#ff8a5b)}
.pro-hero .av-col{gap:16px}
.pro-hero .av-col .ig-mini{margin-top:4px}
.line-link{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit}
.line-link > span:first-of-type{flex:1;min-width:0}
.line-link .go{display:inline-flex;align-items:center;gap:3px;color:var(--accent);font-weight:700;font-size:13px;white-space:nowrap}
.line-link .go svg{width:12px;height:12px}
.first-visit .hours{font-size:11.5px;margin:16px 0 2px}
/* Shop products button: the orange style */
.btn.secondary.shop-btn,:root[data-theme="light"] .btn.secondary.shop-btn{background:var(--coral,#ff8a5b);color:#1a0c05;border:0;box-shadow:0 6px 22px rgba(255,138,91,.28)}
.btn.secondary.shop-btn .sub{color:rgba(26,12,5,.72)}
.btn.secondary.shop-btn svg{color:#1a0c05}
@media (prefers-color-scheme: light){:root:not([data-theme]) .btn.secondary.shop-btn{background:var(--coral,#ff8a5b);color:#1a0c05;border:0}}

/* Questions? block */
.help{margin:28px 22px 0}
.help-text{display:flex;align-items:center;gap:12px;margin-top:10px;padding:14px 16px;border-radius:14px;background:var(--bg-2);border:1px solid var(--rule-2);color:var(--ink);text-decoration:none}
.help-text > svg:first-child{width:22px;height:22px;color:var(--accent);flex-shrink:0}
.help-text > svg:last-child{width:16px;height:16px;color:var(--accent);flex-shrink:0}
.help-text .ht{flex:1;display:flex;flex-direction:column;gap:1px}
.help-text .ht b{font-size:15px}
.help-text .ht span{font-size:12.5px;color:var(--ink-3)}
.help-call{margin:12px 2px 0;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.help-call a{color:var(--accent);font-weight:700}
.help-find{display:inline-flex;align-items:center;gap:6px;margin:10px 2px 0;font-size:13.5px;color:var(--ink-2);text-decoration:none}
.help-find b{color:var(--coral,#ff8a5b)}
.help-find svg{width:13px;height:13px;color:var(--coral,#ff8a5b)}
@media (min-width:900px){ .surface.home > .help{grid-column:1 / -1;width:100%;max-width:760px;margin-left:auto;margin-right:auto} .surface.pro > .help{grid-column:1} }
.help-find{display:block}
.ig-cta svg{width:16px;height:16px}

/* small "text the shop" phone icon */
.txt-ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--rule-2);background:transparent;color:var(--ink-3);cursor:pointer;padding:0;flex-shrink:0;margin-left:auto;transition:color .15s,border-color .15s}
.txt-ico svg{width:15px;height:15px}
.txt-ico:hover,.txt-ico:focus-visible{color:var(--accent);border-color:var(--accent)}
.bb-head .txt-ico{margin-left:auto}
.soon-types .txt-ico{margin-left:auto;align-self:center}
.app-sheet-btns a.pill{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.txt-soon{color:var(--coral,#ff8a5b);font-weight:700;text-decoration:none}
/* Group booking in the soonest card */
.grp-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 12px;font-size:12.5px;color:var(--ink-3)}
.grp-row span{margin-right:4px}
.grp-row button{width:30px;height:28px;border-radius:99px;border:1px solid var(--rule-2);background:transparent;color:var(--ink-2);font:inherit;font-weight:700;font-size:12.5px;cursor:pointer}
.grp-row button.on{border-color:var(--accent);color:var(--accent)}
.grp-h{font-weight:800;color:var(--ink);font-size:15px;margin:2px 0 8px}
.grp-msg{font-size:13.5px;color:var(--ink-2);padding:6px 0 10px}
.grp-list{display:flex;flex-direction:column;gap:8px}
.grp-opt{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;text-align:left;padding:11px 12px;border-radius:12px;border:1px solid var(--rule-2);background:var(--bg);color:var(--ink);font:inherit;cursor:pointer}
.grp-opt:hover{border-color:var(--accent)}
.grp-when{font-weight:700;font-size:14.5px}
.grp-who{grid-column:1;font-size:12.5px;color:var(--ink-3)}
.grp-opt svg{grid-row:1 / span 2;grid-column:2;width:14px;height:14px;color:var(--accent)}
.grp-note{font-size:12px;color:var(--ink-3);margin:8px 2px 4px}
.grp-back{background:none;border:0;color:var(--accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:0;margin-bottom:6px}
.grp-form{margin-top:6px}
.grp-row-done{font-size:14px;color:var(--ink-2)}
.grp-done .bb-done-t{font-size:20px;margin-bottom:8px}
[data-solo][hidden]{display:none!important}

.soon-types .txt-ico{width:30px;height:30px;padding:0;border-radius:50%;background:transparent;border:1px solid var(--rule-2);color:var(--ink-3);display:inline-flex;align-items:center;justify-content:center;margin-left:auto}
.txt-ico svg{width:15px!important;height:15px!important;display:block;flex-shrink:0}
.grp-row{flex-wrap:nowrap}
.grp-row span{white-space:nowrap}
.grp-optl{font-style:normal;font-weight:400;color:var(--ink-3);font-size:12px;margin-left:4px}
.grp-form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:10px}
.grp-form input{font:inherit;font-size:16px;padding:10px 12px;border-radius:12px;border:1px solid var(--rule-2);background:var(--bg);color:var(--ink)}

/* Product categories + best-seller badges (shop page and the after-booking shelf) */
.shop-tabs,.shelf-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.shelf-tabs{margin:2px 0 12px}
.shop-tab{font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);background:transparent;border:1px solid var(--rule-2);border-radius:99px;padding:7px 14px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.shop-tab:hover{color:var(--ink);border-color:var(--ink-2)}
.shop-tab.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.sp-top{position:absolute;top:10px;right:10px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;padding:4px 9px;border-radius:99px}
.shelf-h{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:2px 0 8px}
.shelf-h.alt{margin:16px 0 8px}
.product.top .pname{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ptop{font-size:10.5px;font-weight:700;letter-spacing:.04em;background:var(--accent);color:var(--accent-ink);border-radius:99px;padding:2px 8px}
@media (max-width:560px){ .shop-tab{font-size:12px;padding:6px 11px} .sp-top{top:6px;right:6px;font-size:10px;padding:3px 7px} }

/* "Booking for more than one?" — the group size only appears when it's asked for */
.grp-ask{display:block;width:100%;text-align:left;font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);background:transparent;border:0;border-top:1px solid var(--rule);padding:11px 2px 3px;margin-top:4px;cursor:pointer}
.grp-ask:after{content:' \203a';color:var(--accent);font-weight:700}
.grp-ask:hover{color:var(--ink)}
.grp-row .grp-none{margin-left:auto;font-size:12px;opacity:.8}

/* The product pop-up: room to breathe on a phone, and long names that wrap
   instead of running into the price */
.pickup .product .pinfo{min-width:0}
.pickup .product .pname{overflow-wrap:anywhere;line-height:1.25}
.pickup .shelf-h{padding:0 20px}
.pickup .shelf-tabs{padding:0 20px;margin:2px 0 10px}
.pickup .pickup-btns{gap:10px}
@media (max-width:420px){
  .pickup{padding:10px 10px calc(12px + env(safe-area-inset-bottom))}
  .pickup-head{padding:20px 18px 10px}
  .pickup-body .products,.pickup .shelf-h,.pickup .shelf-tabs{padding-left:16px;padding-right:16px}
  .pickup .product{padding:11px 13px;gap:11px}
  .hold-bar.inline{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .pickup-t{font-size:19px}
}

/* Made-to-order apparel: a link out to the print shop's own store */
.apparel-link{margin-top:20px}
.apparel-link svg{width:16px;height:16px;color:var(--accent);flex-shrink:0}

/* ==========================================================================
   Look and feel pass - 23 Sep
   Light mode was flat: the drawings are good but the page washed them out,
   the "meet them below" link had nothing behind it, and the arrow on the
   Soonest bar read as "look further down the page" rather than "open this".
   ========================================================================== */

/* --- 1. Depth on the drawings -------------------------------------------
   The artwork is line art, so in light mode it sat as pale outlines on a pale
   page with nothing to separate it. Rather than repaint the files, each one
   gets a little more contrast and colour (which is what brings the green in
   the plants back) and sits under a soft corner shading, so it reads as a
   room with light falling through it instead of a flat sketch. */
:root[data-theme="light"] .light-only,
:root:not([data-theme]) .light-only { }

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .pick-bg img.light-only,
  :root:not([data-theme]) .interior img.light-only,
  :root:not([data-theme]) .building img.light-only,
  :root:not([data-theme]) .counter img.light-only { filter: contrast(1.14) saturate(1.75) brightness(.965); }
}
:root[data-theme="light"] .pick-bg img.light-only,
:root[data-theme="light"] .interior img.light-only,
:root[data-theme="light"] .building img.light-only,
:root[data-theme="light"] .counter img.light-only { filter: contrast(1.14) saturate(1.75) brightness(.965); }

/* Corner shading: darker at the edges, open in the middle, so the drawing has
   somewhere to recede to. Sits above the picture, below the wording. */
/* Its own element on purpose: these containers already use ::after for the
   fade into the page below them, and borrowing it here wiped that fade out. */
.art-shade{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(120% 90% at 50% 34%, transparent 42%, rgba(38,32,24,.16) 88%, rgba(30,25,18,.24) 100%),
    linear-gradient(to bottom, rgba(24,20,14,.10) 0%, transparent 26%);
  opacity:0}
:root[data-theme="light"] .art-shade{opacity:1}
@media (prefers-color-scheme: light){:root:not([data-theme]) .art-shade{opacity:1}}

/* --- 2. Less white over the room on the booking page --------------------
   The scrim that keeps the heading readable was heavy enough to grey the
   whole picture out. Pulled back where it isn't doing any work, kept where
   text actually sits on top. */
:root[data-theme="light"] .pick-bg::after{background:linear-gradient(to bottom,rgba(253,252,249,.16) 0%,rgba(253,252,249,.04) 50%,rgba(253,252,249,.20) 76%,rgba(253,252,249,.70) 92%,var(--bg) 100%)}
:root[data-theme="light"] .pick-bg::before{background:linear-gradient(to bottom,rgba(253,252,249,.04) 0%,rgba(253,252,249,.16) 42%,rgba(253,252,249,.70) 70%,var(--bg) 92%)}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .pick-bg::after{background:linear-gradient(to bottom,rgba(253,252,249,.16) 0%,rgba(253,252,249,.04) 50%,rgba(253,252,249,.20) 76%,rgba(253,252,249,.70) 92%,var(--bg) 100%)}
  :root:not([data-theme]) .pick-bg::before{background:linear-gradient(to bottom,rgba(253,252,249,.04) 0%,rgba(253,252,249,.16) 42%,rgba(253,252,249,.70) 70%,var(--bg) 92%)}
}

/* Warm daylight through the window, replacing the lamp glow that light mode
   switches off - without it the room had no light source at all. */
:root[data-theme="light"] .pick-bg,
:root:not([data-theme]) .pick-bg{isolation:isolate}
.daylight{position:absolute;left:2%;top:-6%;width:46%;height:70%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 22% 30%, rgba(255,241,214,.55) 0%, rgba(255,236,198,.22) 46%, transparent 74%);
  mix-blend-mode:screen;opacity:0}
:root[data-theme="light"] .daylight{opacity:1}
@media (prefers-color-scheme: light){:root:not([data-theme]) .daylight{opacity:1}}

/* --- 3. "or meet them below" --------------------------------------------
   It was an outlined link floating straight on the artwork. Now it's a solid
   chip in both themes, so it reads as a button and stays legible whatever is
   behind it. */
.glance-meet{background:var(--accent);color:var(--accent-ink);border-color:transparent;
  padding:6px 13px;box-shadow:0 2px 10px rgba(0,0,0,.28)}
.glance-meet:hover,.glance-meet:focus-visible{background:var(--accent-ink);color:var(--accent);border-color:var(--accent)}
:root[data-theme="light"] .glance-meet{background:#12181f;color:#fff;box-shadow:0 2px 10px rgba(18,24,31,.28)}
:root[data-theme="light"] .glance-meet:hover,:root[data-theme="light"] .glance-meet:focus-visible{background:var(--accent);color:#0e1218}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .glance-meet{background:#12181f;color:#fff;box-shadow:0 2px 10px rgba(18,24,31,.28)}
  :root:not([data-theme]) .glance-meet:hover,:root:not([data-theme]) .glance-meet:focus-visible{background:var(--accent);color:#0e1218}
}

/* --- 4. The Soonest available bar ---------------------------------------
   A bit bigger so it carries the weight it deserves, "across the shop" to say
   it covers everyone, and a plus-in-a-circle instead of a down arrow so it
   reads as "open this" rather than "look below". */
.na-bar{padding:13px 14px;font-size:13.5px;gap:9px}
.na-l{font-size:14.5px;font-weight:700}
.na-across{color:var(--ink-3);font-size:12px;font-weight:600;white-space:nowrap}
.na-t{flex:1;text-align:right;padding-right:2px}
.na-open{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,138,91,.14);border:1px solid rgba(255,138,91,.45);transition:background .2s}
.na-fold.open .na-open{background:rgba(255,138,91,.26)}
.na-chev{width:13px;height:13px;transition:transform .25s}
.na-fold.open .na-chev{transform:none}
.na-fold.open .na-chev .na-v{opacity:0;transition:opacity .2s}   /* plus becomes minus when open */
.na-chev .na-v{transition:opacity .2s}
@media (max-width:360px){.na-across{display:none}}
@media (prefers-reduced-motion:reduce){.na-chev,.na-chev .na-v,.na-open{transition:none}}

/* --- 5. Shading on the storefront ---------------------------------------
   The drawing is clean line art, which in light mode left the building
   looking like a blueprint - no sense that the awning sticks out or that the
   windows are set back. These are soft shadows laid over the picture at the
   places a real shopfront would have them: under the sign, under the awning,
   down both sides, and where the building meets the pavement. Percentages,
   so they stay put at every screen size. Dark mode already has its lamp
   glows doing this job, so they only show in light. */
.facade .shade{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .4s}
:root[data-theme="light"] .facade .shade{opacity:1}
@media (prefers-color-scheme: light){:root:not([data-theme]) .facade .shade{opacity:1}}

.facade .shade i{position:absolute;display:block}
/* under the sign board */
.facade .shade .s-cornice{left:5%;right:5%;top:32.4%;height:5%;
  background:linear-gradient(to bottom,rgba(40,34,26,.20),transparent)}
/* the awning casting down over the glass - the big one */
.facade .shade .s-awning{left:6%;right:6%;top:41.5%;height:17%;
  background:linear-gradient(to bottom,rgba(38,32,24,.26) 0%,rgba(38,32,24,.10) 45%,transparent 100%)}
/* the two side pilasters turning away from the light */
.facade .shade .s-left{left:0;top:30%;width:14%;height:60%;
  background:linear-gradient(to right,rgba(36,30,22,.20),transparent)}
.facade .shade .s-right{right:0;top:30%;width:14%;height:60%;
  background:linear-gradient(to left,rgba(36,30,22,.22),transparent)}
/* glass sitting back behind its frame */
.facade .shade .s-glassL{left:12.5%;top:42%;width:21%;height:36%;
  background:linear-gradient(135deg,rgba(40,44,52,.16),transparent 62%)}
.facade .shade .s-glassR{left:59.5%;top:42%;width:22.5%;height:36%;
  background:linear-gradient(135deg,rgba(40,44,52,.16),transparent 62%)}
/* where the building meets the pavement */
.facade .shade .s-ground{left:0;right:0;bottom:6%;height:9%;
  background:linear-gradient(to top,rgba(34,28,20,.26),transparent)}
/* one soft top-down ambient so nothing reads as perfectly evenly lit */
.facade .shade .s-amb{inset:0;
  background:radial-gradient(150% 96% at 50% 2%, transparent 58%, rgba(38,32,24,.10) 100%)}

/* --- 6. Framing the booking room on a phone -----------------------------
   The picture is twice as wide as it is tall, so on a phone the hero can only
   show a narrow slice of it - and dead centre is the one part with almost no
   greenery in it (the plants live at both far edges). Shifting the crop right
   on narrow screens puts the plant shelf and the tree in frame, which is what
   makes the room read as a room rather than a blueprint. Wider screens show
   enough of the picture that they don't need it. */
@media (max-width: 700px){
  .pick-bg img{object-position:78% 38%}
}

/* --- 7. The barber-page artwork melts into the page ---------------------
   It was ending on a hard line - a picture in a box - while every other
   picture on the site fades into whatever is under it. A taller fade, and no
   border ruling it off in light mode, so the room dissolves into the page
   the way the shopfront and the counter already do. */
.interior::after{height:120px;background:linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--bg) 55%,transparent) 48%,var(--bg) 100%)}
.counter::after{height:96px;background:linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--bg) 55%,transparent) 46%,var(--bg) 100%)}
:root[data-theme="light"] .interior{border-bottom:0}
@media (prefers-color-scheme: light){:root:not([data-theme]) .interior{border-bottom:0}}
/* on a wide screen it sits in a rounded card, so soften that too */
@media (min-width:760px){
  .surface.pro > .interior{border-radius:18px 18px 0 0}
  .interior::after{height:140px}
}

/* ==========================================================================
   Seasonal decorations on the storefront
   Everything here is invisible until site.js puts a season class on the page,
   which it works out from the shop's own calendar - so it comes on by itself
   on the right morning and goes off again afterwards. Nothing to deploy.
   Positions are percentages of the shopfront, so they hold at every size.
   ========================================================================== */
.season,.season-sky{position:absolute;inset:0;pointer-events:none;z-index:3}
.season .dec,.season-sky .dec{position:absolute;display:block;opacity:0;visibility:hidden;transition:opacity .6s}
.season .dec svg,.season-sky .dec svg{width:100%;height:100%;display:block;overflow:visible}

/* which set is showing */
:root.season-halloween .dec.hw,
:root.season-thanksgiving .dec.tg,
:root.season-christmas .dec.xm{opacity:1;visibility:visible}

/* ---- Halloween ---- */
.jol-body{fill:#e8791f}
.jol-rib{fill:#f08c33;opacity:.55}
.jol-stem{fill:#4a7a34}
.jol-cut{fill:#2a1206}
:root.season-halloween .jol-cut{fill:#ffd166;filter:drop-shadow(0 0 3px #ffb43f)}
.dec.jol-l{left:30.5%;top:78.6%;width:11%;height:9.8%}
.dec.jol-r{left:58.5%;top:78.6%;width:11%;height:9.8%}
.dec.jol-s{left:67.8%;top:81.4%;width:7.6%;height:6.8%}
.web-s{color:rgba(240,240,244,.75)}
.dec.web-1{left:12.6%;top:41.8%;width:9%;height:9%}
.dec.web-2{left:73.5%;top:41.8%;width:9%;height:9%}
@keyframes jol-flicker{0%,100%{opacity:1}45%{opacity:.72}70%{opacity:.92}}
:root.season-halloween .jol-cut{animation:jol-flicker 2.6s ease-in-out infinite}
:root.season-halloween .dec.jol-r .jol-cut{animation-delay:-1.1s}
:root.season-halloween .dec.jol-s .jol-cut{animation-delay:-1.9s}

/* bats drifting across the sky strip */
.bat-s{fill:#161a22}
:root[data-theme="dark"] .bat-s{fill:#0a0d13}
.season-sky .bat{width:8.5%;height:74%;top:12%}
@keyframes bat-fly{
  0%{transform:translateX(-14vw) translateY(0) scale(.85);opacity:0}
  8%{opacity:.9}
  50%{transform:translateX(45vw) translateY(-26%) scale(1)}
  92%{opacity:.9}
  100%{transform:translateX(112vw) translateY(10%) scale(.85);opacity:0}
}
@keyframes bat-flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.62)}}
:root.season-halloween .season-sky .bat{animation:bat-fly 15s linear infinite}
:root.season-halloween .season-sky .bat svg{animation:bat-flap .34s ease-in-out infinite}
.season-sky .bt1{animation-delay:-1s}
.season-sky .bt2{animation-delay:-6.5s;top:34%}
.season-sky .bt3{animation-delay:-11s;top:6%}

/* ---- Thanksgiving / fall: same gourds, no carved faces, leaves coming down ---- */
:root.season-thanksgiving .jol-cut{display:none}
:root.season-thanksgiving .jol-body{fill:#d9762a}
:root.season-thanksgiving .dec.gourd-r .jol-body{fill:#c8913a}
.dec.gourd-l{left:30.5%;top:78.6%;width:11%;height:9.8%}
.dec.gourd-r{left:59.5%;top:80.2%;width:9%;height:8.1%}
.dec.leaves{inset:0;width:100%;height:100%}
.dec.leaves i{position:absolute;top:-6%;width:1.8%;height:2.3%;border-radius:60% 10% 60% 10%;
  background:#c8722c;opacity:.85;animation:leaf-fall 12s linear infinite}
.dec.leaves i:nth-child(3n){background:#b4501f}
.dec.leaves i:nth-child(4n){background:#d9a13a}
@keyframes leaf-fall{
  0%{transform:translateY(0) rotate(0);opacity:0}
  8%{opacity:.9}
  100%{transform:translateY(108cqh) translateX(4cqw) rotate(420deg);opacity:0}
}

/* ---- Christmas / winter: lights on the awning, wreath on the door, snow ---- */
.dec.lights{left:6%;right:6%;top:41.2%;width:88%;height:3.2%}
.dec.lights i{position:absolute;top:0;width:2.3%;aspect-ratio:1;border-radius:50%;
  background:#ff5d5d;box-shadow:0 0 9px currentColor,0 0 18px currentColor;color:#ff5d5d;animation:bulb 2.4s ease-in-out infinite}
.dec.lights i:nth-child(3n+1){background:#4fd37e;color:#4fd37e}
.dec.lights i:nth-child(3n+2){background:#ffd166;color:#ffd166}
@keyframes bulb{0%,100%{opacity:1}50%{opacity:.4}}
.dec.wreath{left:43.6%;top:47.5%;width:11.8%;height:10.6%}
.wr-ring{fill:none;stroke:#2f6b3a;stroke-width:6}
.wr-ring2{fill:none;stroke:#3f8a4b;stroke-width:3;stroke-dasharray:5 6}
.wr-bow{fill:#c53030}
.wr-berry{fill:#d94a4a}
/* Bulbs wound round the two trees. The span sits exactly on top of the tree
   picture (same box, written into the page next to it) and sways with it, so
   the lights stay on the branches instead of sliding off. */
.dec.tl{transform-origin:50% 100%}
.dec.tl i{position:absolute;width:1.9cqw;height:1.9cqw;margin:-0.95cqw 0 0 -0.95cqw;border-radius:50%;
  background:#ffd166;color:#ffd166;box-shadow:0 0 7px currentColor,0 0 15px currentColor;
  animation:bulb 2.6s ease-in-out infinite}
.dec.tl i:nth-child(3n+1){background:#ff6b6b;color:#ff6b6b}
.dec.tl i:nth-child(3n+2){background:#6fe39a;color:#6fe39a}
:root.season-christmas .dec.tl.left{animation:sway 7s ease-in-out infinite}
:root.season-christmas .dec.tl.right{animation:sway 8.4s ease-in-out infinite -2.1s}

/* Snow banked along the ground, and a cap of it on the awning */
.dec.piles{left:0;right:0;top:83.4%;width:100%;height:6.6%;overflow:visible}
.dec.cap{left:5%;right:5%;top:39.9%;width:90%;height:1.5%}
/* the shadow along the top edge is what stops white snow vanishing into a
   white sidewalk */
.pile-s{width:100%;height:100%;display:block;fill:#f7fbff;
  filter:drop-shadow(0 -1.5px 2.5px rgba(88,116,150,.45))}
.pile-s .pile-hi{fill:#fff}
:root[data-theme="dark"] .pile-s{fill:#dce8f4}
:root[data-theme="dark"] .pile-s .pile-hi{fill:#eef5fc}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .pile-s{fill:#dce8f4}
  :root:not([data-theme]) .pile-s .pile-hi{fill:#eef5fc}
}

.dec.snow{inset:0;width:100%;height:100%}
.dec.snow i{position:absolute;top:-4%;width:1.3%;aspect-ratio:1;border-radius:50%;
  background:#fff;opacity:.9;box-shadow:0 0 3px rgba(255,255,255,.8);animation:snow-fall 11s linear infinite}
@keyframes snow-fall{
  0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:.95}
  100%{transform:translateY(110cqh) translateX(3cqw);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .season .dec,.season .dec *,.season-sky .dec,.season-sky .dec svg,.dec.snow i,.dec.leaves i,.dec.lights i{animation:none!important}
  .dec.snow,.dec.leaves{display:none}
}

/* ---- Halloween: a storm rolling through ------------------------------------
   Every so often the whole shopfront drops to night for a beat, the sky cracks
   with two or three quick flashes, and it comes back. In dark mode it is just
   the flashes, since it is already night. Halloween only, and it holds still
   entirely for anyone who has asked their device to reduce motion. */
.storm{position:absolute;inset:0;z-index:6;pointer-events:none;display:none;overflow:hidden}
:root.season-halloween .storm{display:block}
.storm i{position:absolute;inset:0;display:block;opacity:0}

/* the scene falling to night - light mode only, dark is already there */
.storm-dark{background:linear-gradient(to bottom,#060910 0%,#0a0f18 55%,#05070c 100%)}
:root.season-halloween .storm-dark{animation:storm-night 19s linear infinite}
:root[data-theme="dark"].season-halloween .storm-dark{animation:none;opacity:0}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]).season-halloween .storm-dark{animation:none;opacity:0}
}
@keyframes storm-night{
  0%,70.4%   {opacity:0}
  71%        {opacity:.82}
  78%        {opacity:.72}
  80%        {opacity:.86}
  84%        {opacity:.66}
  90%        {opacity:0}
  100%       {opacity:0}
}

/* the flash itself */
.storm-flash{background:radial-gradient(120% 70% at 62% -10%,rgba(255,255,255,.98) 0%,rgba(226,238,255,.72) 34%,rgba(180,205,255,.18) 62%,transparent 82%);
  mix-blend-mode:screen}
:root.season-halloween .storm-flash{animation:storm-strike 19s linear infinite}
@keyframes storm-strike{
  0%,71.4%  {opacity:0}
  71.8%     {opacity:1}
  72.4%     {opacity:.05}
  73%       {opacity:.85}
  73.6%     {opacity:0}
  79.2%     {opacity:0}
  79.6%     {opacity:.95}
  80.2%     {opacity:.08}
  80.8%     {opacity:.6}
  81.4%     {opacity:0}
  100%      {opacity:0}
}

/* the windows and sign glow a touch harder while the sky is lit */
@keyframes storm-lit{0%,71.4%{filter:none}72%{filter:brightness(1.35)}74%{filter:none}79.6%{filter:brightness(1.25)}81.4%{filter:none}100%{filter:none}}
:root.season-halloween .building .glow{animation:storm-lit 19s linear infinite}

@media (prefers-reduced-motion:reduce){
  :root.season-halloween .storm{display:none}
  :root.season-halloween .building .glow{animation:none}
}