/* ---------------------------------------------------------------------------
Harry Grooms - the storefront.
NOT ONE LITERAL COLOUR IN THIS FILE. Every colour is a custom property, because
the dark theme is a swap of those properties and a swap only reaches colours
that were written as properties. The tokens and the reasoning are in ux.css;
the light palette is the :root block below.
Which token you want:
--paper/--bone/--bone-2 the page and its raised surfaces
--ink .. --ink-4 the text ladder, all four accessible on all grounds
--brass the accent: links, small caps, active state
--ox the pole. Loud on purpose, used sparingly
--invert-bg/--invert-fg a SMALL FILLED CONTROL (button, chosen slot, tag)
--panel-* a LARGE INVERTED SURFACE (footer, announce strip)
--scrim-rgb/--glass-rgb washes, as channels, used at a dozen alphas
--------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');
:root{
--paper:#ffffff; --bone:#f6f4f1; --bone-2:#eceae5;
/* The text ladder. Every step was measured before it was chosen, on all three
grounds, because the muted end is where accessibility quietly fails: it
carries prices, durations, captions and slot labels, so the smallest text on
a booking site is the text that matters most.
On --paper: 18.42 / 11.69 / 6.92 / 5.26. Worst case, --ink-4 on --bone-2: 4.37. */
--ink:#141414; --ink-2:#3a3835; --ink-3:#5e5954; --ink-4:#716b65;
/* Brass. 6.27 on --paper, 5.21 on --bone-2, so it can carry link text and the
small caps it is actually used on, not only a 1px border. */
--brass:#7d5a1c; --brass-lt:#8a6520; --brass-pale:#f4eee2;
/* Oxblood. The barber pole, and destructive actions. 8.19 on --paper. */
--ox:#8c2f2f; --ox-pale:#f7ebeb;
/* ---- the accent ON a panel ----
--brass is tuned for the PAGE, which is light in the light theme. Some
surfaces are dark in BOTH themes - the hero, the footer, the announcement
strip, the console sidebar, a filled --invert-bg control - and dark brass on
those measured between 2.70 and 3.48:1. The contrast gate found it 51 times
across 8 places on its first run.
This is exactly the reasoning behind --panel-* applied to the accent: "on a
panel" is a RELATIONSHIP to a surface, and a token that flips with the page
cannot express it. So this one does NOT invert - it is the bright brass in
both themes, because the thing under it is dark in both themes.
Measured: 8.86 on --panel-bg, 6.90 on the sidebar's active overlay,
9.57 on the console sidebar. */
--brass-panel:#d9ad61;
--mist:#d9d5d0; --line:#e5e2dd;
--ok:#2f6d4f; --ok-bg:#eaf3ee;
--warn:#8a5f14; --warn-bg:#f7f0e2;
--bad:#9b3232; --bad-bg:#f9ecec;
--info:#2f5d8a; --info-bg:#e9f0f7;
/* A small FILLED CONTROL - primary button, the chosen time slot, a tag. */
--invert-bg:#141414; --invert-fg:#f4f2ee;
/* A large INVERTED SURFACE - the footer, the announcement strip. Separate from
the pair above because "inverted" is a RELATIONSHIP to the page, and a token
that flips with the page cannot express one. */
--panel-bg:#141414; --panel-fg:#f4f2ee; --panel-fg-rgb:244,242,238;
--panel-mute:#c9c4bd;
--on-accent:#ffffff; /* text on a brass fill: 6.27 */
--scrim-rgb:246,244,241;
--glass-rgb:255,255,255;
--room-bg:#f2f0ec; --room-rgb:242,240,236;
--sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
--display:'Oswald','Inter',system-ui,sans-serif;
--wrap:1360px; --pad:clamp(20px,4vw,60px); --h:74px;
--ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);
font-size:15px;line-height:1.6;font-weight:400;overflow-x:hidden;
-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5{margin:0;font-family:var(--display);font-weight:600;line-height:1.03;
letter-spacing:-.005em;text-transform:uppercase}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
::selection{background:var(--brass);color:var(--on-accent)}
hr{border:0;border-top:1px solid var(--line);margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.eyebrow{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
color:var(--brass);font-weight:600;font-family:var(--sans)}
.muted{color:var(--ink-3)}
.tiny{font-size:12.5px;line-height:1.55}
.center{text-align:center}
.hide{display:none !important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
.stack>*+*{margin-top:var(--gap,14px)}
/* ---------- scroll progress + route veil ---------- */
#progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:300;
background:var(--brass);transform:scaleX(0);transform-origin:0 50%;
transition:transform .1s linear;pointer-events:none}
#veil{position:fixed;inset:0;z-index:290;background:var(--paper);opacity:0;
pointer-events:none;transition:opacity .18s ease}
#veil.on{opacity:1}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
padding:15px 32px;min-height:48px;
border:1px solid var(--invert-bg);background:var(--invert-bg);color:var(--invert-fg);
font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
font-weight:600;cursor:pointer;transition:background .25s var(--ease),
border-color .25s var(--ease),color .25s var(--ease),transform .2s var(--ease);
border-radius:0;text-align:center}
.btn:hover{background:var(--brass);border-color:var(--brass);color:var(--on-accent)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--invert-bg);color:var(--invert-fg);border-color:var(--invert-bg)}
.btn.brass{background:var(--brass);border-color:var(--brass);color:var(--on-accent)}
.btn.brass:hover{background:var(--ink);border-color:var(--ink);color:var(--invert-fg)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:var(--invert-fg)}
.btn.sm{padding:10px 20px;min-height:40px;font-size:10.5px;letter-spacing:.14em}
.btn.lg{padding:19px 42px;min-height:56px;font-size:12.5px}
.btn.wide{width:100%}
.btn:disabled{opacity:.38;cursor:not-allowed;pointer-events:none}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
.link-u{border-bottom:1px solid currentColor;padding-bottom:2px;color:var(--brass);
font-weight:500;transition:opacity .2s}
.link-u:hover{opacity:.7}
/* The same link inside a dark band needs the panel accent, not the page accent.
Measured 2.94:1 before this rule existed. */
.dark-band .link-u{color:var(--brass-panel)}
/* ---------- icon buttons ---------- */
.iconbtn{display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;border:0;background:none;color:inherit;cursor:pointer;
border-radius:50%;transition:background .2s;position:relative}
.iconbtn:hover{background:var(--bone-2)}
.iconbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
.badge{position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px;
background:var(--ox);color:var(--invert-fg);border-radius:9px;
font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;
font-family:var(--sans);line-height:1}
/* ---------- announcement strip ---------- */
.announce{background:var(--panel-bg);color:var(--panel-mute);overflow:hidden;
font-size:11px;letter-spacing:.19em;text-transform:uppercase;font-weight:500;
height:38px;display:flex;align-items:center}
.announce ul{display:flex;gap:56px;margin:0;padding:0;list-style:none;
white-space:nowrap;animation:marq 44s linear infinite;padding-left:56px}
.announce li{display:flex;align-items:center;gap:56px}
.announce li::after{content:'';width:3px;height:3px;background:var(--brass-panel);border-radius:50%}
@keyframes marq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.announce ul{animation:none}}
/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:200;height:var(--h);
background:rgba(var(--glass-rgb),.86);backdrop-filter:saturate(180%) blur(14px);
border-bottom:1px solid var(--line);transition:height .3s var(--ease),background .3s}
.hdr.shrunk{height:62px}
.hdr-in{height:100%;display:flex;align-items:center;gap:14px}
.brand{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:.10em;
line-height:1;display:flex;flex-direction:column;gap:3px;margin-right:auto;
text-transform:uppercase;white-space:nowrap}
.brand small{font-family:var(--sans);font-size:9px;letter-spacing:.24em;
color:var(--ink-3);font-weight:500;text-transform:uppercase}
.hdr.on-dark .brand small{color:var(--panel-mute)}
.nav{display:flex;align-items:center;gap:4px}
.nav>a,.navitem>a{padding:10px 13px;font-size:12px;letter-spacing:.1em;font-weight:500;
text-transform:uppercase;transition:color .2s;white-space:nowrap;display:inline-block}
.nav>a:hover,.navitem>a:hover{color:var(--brass)}
.nav a.on{color:var(--brass)}
.navhome{display:inline-flex;padding:10px 10px}
.navhome svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
.navitem{position:relative}
.mega{position:absolute;top:100%;left:-14px;background:var(--paper);
border:1px solid var(--line);padding:26px 30px;display:grid;gap:34px;
grid-template-columns:1fr 1fr 210px;min-width:600px;
opacity:0;visibility:hidden;transform:translateY(-8px);
transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
box-shadow:0 24px 60px rgba(0,0,0,.10);z-index:5}
.navitem:hover .mega,.navitem:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega h5{font-size:10px;letter-spacing:.24em;color:var(--ink-4);margin-bottom:13px;
font-family:var(--sans);font-weight:600}
.mega ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.mega ul a{font-size:13.5px;color:var(--ink-2);transition:color .2s;
display:block;padding:2px 0}
.mega ul a:hover{color:var(--brass)}
.mega figure{margin:0}
.mega figure .fig{aspect-ratio:4/5;background:var(--bone-2);position:relative;overflow:hidden}
.mega figcaption{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
margin-top:10px;font-weight:600;color:var(--brass)}
.hdr-act{display:flex;align-items:center;gap:2px}
.signin{display:inline-flex;align-items:center;gap:7px;padding:10px 12px;
font-size:12px;letter-spacing:.06em;font-weight:500;transition:color .2s;white-space:nowrap}
.signin:hover{color:var(--brass)}
.signin svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
.hdr .btn.book{margin-left:8px;padding:11px 22px;min-height:42px;font-size:10.5px}
.burger{display:none}
@media(max-width:1120px){
.nav>a,.navitem>a{padding:10px 9px;font-size:11.5px}
.signin span{display:none}
}
@media(max-width:980px){
.nav{display:none}
.burger{display:inline-flex}
.brand{margin-inline:auto;margin-right:auto}
}
@media(max-width:600px){
.brand{font-size:17px}
.hdr .btn.book{display:none}
}
/* ---------- mobile nav ---------- */
.mnav{position:fixed;inset:var(--h) 0 0;z-index:190;background:var(--paper);
padding:26px var(--pad) 60px;overflow-y:auto;display:none;flex-direction:column;gap:2px}
.mnav.on{display:flex}
.mnav a{padding:15px 0;border-bottom:1px solid var(--line);
font-family:var(--display);font-size:19px;text-transform:uppercase;letter-spacing:.04em;
min-height:48px;display:flex;align-items:center}
.mnav a.sub-a{font-family:var(--sans);font-size:14px;text-transform:none;
padding-left:18px;color:var(--ink-3);letter-spacing:0}
.mnav .btn{margin-top:22px}
/* ---------- hero ----------
The backdrop is a stripe field, not an illustration, and that is a decision
rather than a shortcut: the SVG marks used elsewhere are drawn in a 200x200
viewBox, and slicing one across a 1440px hero magnifies every shape about
seven times. The barber chair became three grey blobs. Stripes have no
intrinsic scale - they read identically at 390px and at 2560px - and a giant
barber pole is the one image that says "barbershop" without a photograph of
somebody who never agreed to be on this website. */
.hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:flex-end;
background:var(--panel-bg);color:var(--panel-fg);overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:-12% -10%;z-index:-2;background:var(--panel-bg)}
.hero-bg::before{content:'';position:absolute;inset:0;
background:repeating-linear-gradient(118deg,
var(--ox) 0 74px, transparent 74px 148px,
var(--brass-panel) 148px 222px, transparent 222px 296px);
opacity:.17}
/* A wash that keeps the stripes off the headline without flattening them into
grey. Read together with .hero::after, which carries the legibility scrim. */
.hero-bg::after{content:'';position:absolute;inset:0;
background:radial-gradient(120% 100% at 12% 46%,
var(--panel-bg) 0%, rgba(0,0,0,.55) 42%, transparent 78%)}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,rgba(var(--scrim-rgb),0) 0%,rgba(var(--scrim-rgb),0) 40%,
rgba(var(--scrim-rgb),.06) 100%),
linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.34) 46%,rgba(0,0,0,.12) 100%)}
.hero-in{padding:0 0 clamp(44px,7vw,84px);width:100%}
.hero h1{font-size:clamp(42px,8.4vw,104px);font-weight:700;letter-spacing:-.012em;
max-width:15ch;margin:16px 0 20px}
.hero p{font-size:clamp(15px,1.5vw,18px);max-width:52ch;color:var(--panel-mute);
margin-bottom:30px}
.hero .eyebrow{color:var(--brass-panel)}
.hero-act{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero .btn{background:var(--panel-fg);border-color:var(--panel-fg);color:var(--panel-bg)}
.hero .btn:hover{background:var(--brass);border-color:var(--brass);color:var(--on-accent)}
.hero .btn.ghost{background:transparent;color:var(--panel-fg);border-color:var(--panel-fg)}
.hero .btn.ghost:hover{background:var(--panel-fg);color:var(--panel-bg)}
/* The one number a barbershop home page should carry and almost none do. */
.hero-next{display:inline-flex;align-items:center;gap:10px;margin-top:26px;
padding:11px 18px;border:1px solid rgba(var(--panel-fg-rgb),.28);
font-size:12.5px;color:var(--panel-fg);background:rgba(var(--panel-fg-rgb),.06)}
.hero-next b{color:var(--brass-panel);font-weight:600}
.hero-next .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);
box-shadow:0 0 0 0 var(--ok);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}
@media(prefers-reduced-motion:reduce){.hero-next .dot{animation:none}}
/* ---------- the barber pole ---------- */
canvas.pole{display:block;width:100%;height:100%;
background:linear-gradient(135deg,var(--ox) 0 25%,var(--brass) 25% 50%,
var(--ox) 50% 75%,var(--brass) 75% 100%);background-size:28px 28px}
.pole-rail{position:absolute;left:0;top:0;bottom:0;width:14px;z-index:3}
@media(max-width:700px){.pole-rail{width:9px}}
.pole-strip{height:46px;margin:0}
/* ---------- generated figures ----------
No stock photography anywhere in this build. Every "image" is a CSS composition
over a token ground with a generated SVG mark on it, so the whole site is
self-contained, weighs nothing, themes correctly, and never ships a picture of
somebody who has not agreed to be on a barbershop's website. */
.fig{background:var(--bone-2);position:relative;overflow:hidden;isolation:isolate}
.fig::before{content:'';position:absolute;inset:0;
background:
radial-gradient(120% 80% at 20% 12%,rgba(var(--panel-fg-rgb),.10),transparent 62%),
repeating-linear-gradient(115deg,rgba(0,0,0,.05) 0 2px,transparent 2px 9px);
mix-blend-mode:multiply;opacity:.5}
.fig svg{position:absolute;inset:0;width:100%;height:100%}
.fig.dark{background:var(--panel-bg)}
.fig.brass{background:var(--brass-pale)}
/* ---------- sections ---------- */
.sec{padding:clamp(60px,8vw,116px) 0}
.sec.tight{padding:clamp(40px,5vw,68px) 0}
.sec.bone{background:var(--bone)}
.dark-band{background:var(--panel-bg);color:var(--panel-fg)}
.dark-band .muted,.dark-band p{color:var(--panel-mute)}
.dark-band h2,.dark-band h3{color:var(--panel-fg)}
.sec-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;
margin-bottom:clamp(28px,4vw,52px);flex-wrap:wrap}
.sec-hd h2{font-size:clamp(26px,3.7vw,46px);font-weight:600;max-width:19ch}
.sec-hd p{max-width:46ch;color:var(--ink-3);margin:10px 0 0;font-size:14.5px}
.dark-band .sec-hd p{color:var(--panel-mute)}
/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);
transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
[data-reveal]{opacity:1 !important;transform:none !important;transition:none}
}
/* ---------- service cards ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:clamp(14px,1.7vw,22px)}
.svc{border:1px solid var(--line);background:var(--paper);padding:24px 24px 22px;
display:flex;flex-direction:column;gap:9px;position:relative;
transition:border-color .25s,transform .35s var(--ease),box-shadow .35s var(--ease);
text-align:left;width:100%;font-family:var(--sans);cursor:pointer}
.svc:hover{border-color:var(--ink-3);transform:translateY(-3px);
box-shadow:0 14px 40px rgba(0,0,0,.07)}
.svc-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.svc h3{font-size:17px;font-weight:600;letter-spacing:.01em}
.svc .price{font-family:var(--display);font-size:19px;font-weight:600;white-space:nowrap;
color:var(--ink)}
.svc .mins{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-4);font-weight:600}
.svc p{font-size:13.5px;color:var(--ink-3);margin:0;line-height:1.6}
.svc .tag{position:absolute;top:-1px;right:22px;background:var(--brass);
color:var(--on-accent);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
padding:4px 9px;font-weight:700}
/* Chosen. A true inversion, so it cannot read as disabled in either theme. */
.svc.on{background:var(--invert-bg);border-color:var(--invert-bg);color:var(--invert-fg)}
.svc.on h3,.svc.on .price{color:var(--invert-fg)}
.svc.on p,.svc.on .mins{color:var(--panel-mute)}
.svc .tick{position:absolute;top:16px;right:16px;width:22px;height:22px;
border:1px solid var(--mist);border-radius:50%;display:flex;align-items:center;
justify-content:center;transition:.2s}
.svc.on .tick{background:var(--brass);border-color:var(--brass)}
.svc .tick svg{width:12px;height:12px;fill:none;stroke:var(--on-accent);stroke-width:2.6;
stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .2s}
.svc.on .tick svg{opacity:1}
/* ---------- barber cards ---------- */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
gap:clamp(16px,2vw,28px)}
.bb{text-align:left;border:0;background:none;padding:0;cursor:pointer;
font-family:var(--sans);width:100%;display:block}
.bb-fig{aspect-ratio:3/4;position:relative;overflow:hidden;background:var(--bone-2);
transition:transform .5s var(--ease)}
.bb:hover .bb-fig{transform:translateY(-4px)}
.bb-mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-family:var(--display);font-size:clamp(46px,7vw,68px);font-weight:700;
color:var(--panel-fg);letter-spacing:.02em;opacity:.92}
.bb h3{margin-top:15px;font-size:16px;font-weight:600}
.bb .role{font-size:11px;letter-spacing:.15em;text-transform:uppercase;
color:var(--brass);font-weight:600;margin-top:5px}
.bb .meta{font-size:12.5px;color:var(--ink-3);margin-top:7px;display:flex;
align-items:center;gap:8px;flex-wrap:wrap}
.stars{display:inline-flex;gap:2px;align-items:center;color:var(--brass)}
.stars svg{width:13px;height:13px;fill:currentColor;stroke:none}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.chip{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
padding:5px 10px;border:1px solid var(--line);color:var(--ink-3);background:var(--paper)}
/* ---------- the booking flow ----------
.bookgrid, not .book. A single generic word is a collision waiting to happen in
a stylesheet this size: `.book` also matched the header's ,
so a 60px Book button was being laid out as a 372px two-column page grid and
pushed the whole header 270px off the side of the viewport. Layout classes get
compound names. */
.bookgrid{display:grid;grid-template-columns:1fr 372px;gap:clamp(26px,4vw,58px);
align-items:start}
@media(max-width:1020px){.bookgrid{grid-template-columns:1fr}}
.steps{display:flex;gap:0;margin-bottom:clamp(26px,3.4vw,42px);
border-bottom:1px solid var(--line);flex-wrap:wrap}
.step{display:flex;align-items:center;gap:9px;padding:0 20px 15px 0;margin-right:20px;
font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
color:var(--ink-4);border-bottom:2px solid transparent;margin-bottom:-1px;
background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;
font-family:var(--sans);min-height:44px}
.step i{width:23px;height:23px;border-radius:50%;border:1px solid currentColor;
display:flex;align-items:center;justify-content:center;font-size:11px;font-style:normal;
font-weight:700;flex:none}
.step.on{color:var(--ink);border-bottom-color:var(--brass)}
.step.done{color:var(--brass)}
.step.done i{background:var(--brass);border-color:var(--brass);color:var(--on-accent)}
.step:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:700px){
.step{padding-right:12px;margin-right:12px;font-size:10.5px;letter-spacing:.05em}
.step span{display:none}
.step i{width:30px;height:30px;font-size:12px}
}
.bstep{display:none}
.bstep.on{display:block}
.bstep h2{font-size:clamp(21px,2.7vw,31px);margin-bottom:7px}
.bstep>p.lead{color:var(--ink-3);font-size:14.5px;margin-bottom:26px;max-width:60ch}
/* barber picker */
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:13px}
.pick{border:1px solid var(--line);background:var(--paper);padding:17px;cursor:pointer;
text-align:center;transition:border-color .22s,transform .3s var(--ease);
font-family:var(--sans);display:flex;flex-direction:column;align-items:center;gap:9px;
min-height:44px}
.pick:hover{border-color:var(--ink-3);transform:translateY(-2px)}
.pick.on{border-color:var(--brass);background:var(--brass-pale);box-shadow:inset 0 0 0 1px var(--brass)}
.pick .av{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;
justify-content:center;font-family:var(--display);font-weight:700;font-size:19px;
color:var(--panel-fg);letter-spacing:.02em}
.pick .nm{font-size:13.5px;font-weight:600}
.pick .rl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);
font-weight:600}
.pick .any{background:var(--bone-2);color:var(--ink-2)}
.pick.off{opacity:.42;cursor:not-allowed;pointer-events:none}
/* date strip */
.datestrip{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 14px;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.datestrip::-webkit-scrollbar{height:4px}
.datestrip::-webkit-scrollbar-thumb{background:var(--mist)}
.dcell{flex:0 0 auto;width:78px;padding:12px 6px;border:1px solid var(--line);
background:var(--paper);cursor:pointer;text-align:center;scroll-snap-align:start;
transition:border-color .2s,background .2s;font-family:var(--sans);min-height:78px}
.dcell:hover{border-color:var(--ink-3)}
.dcell .dw{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);
font-weight:600}
.dcell .dd{font-family:var(--display);font-size:22px;font-weight:600;margin:3px 0 4px}
.dcell .dn{font-size:10px;color:var(--ok);font-weight:600;letter-spacing:.04em}
.dcell.none{opacity:.44;cursor:not-allowed;pointer-events:none}
.dcell.none .dn{color:var(--ink-4)}
.dcell.on{background:var(--invert-bg);border-color:var(--invert-bg)}
.dcell.on .dw,.dcell.on .dd{color:var(--invert-fg)}
.dcell.on .dn{color:var(--brass-panel)}
/* slot grid */
.slotpart{margin-top:24px}
.slotpart h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);
margin-bottom:12px;font-family:var(--sans);font-weight:600}
.slotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.slot{padding:13px 8px;border:1px solid var(--line);background:var(--paper);cursor:pointer;
font-family:var(--display);font-size:14.5px;font-weight:500;letter-spacing:.02em;
transition:border-color .18s,background .18s,color .18s;min-height:46px;
display:flex;align-items:center;justify-content:center}
.slot:hover{border-color:var(--ink);background:var(--bone)}
.slot.on{background:var(--invert-bg);border-color:var(--invert-bg);color:var(--invert-fg)}
.slot .who{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.1em;
text-transform:uppercase;color:var(--ink-4);margin-top:2px}
.slot.on .who{color:var(--panel-mute)}
.empty{padding:38px 26px;border:1px dashed var(--mist);text-align:center;
color:var(--ink-3);font-size:14px;background:var(--bone)}
.empty b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:6px;
font-family:var(--display);text-transform:uppercase;letter-spacing:.03em}
/* summary panel */
.summary{border:1px solid var(--line);background:var(--bone);padding:26px;
position:sticky;top:calc(var(--h) + 18px)}
@media(max-width:1020px){.summary{position:static}}
.summary h3{font-size:13px;letter-spacing:.2em;text-transform:uppercase;
padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px;
font-family:var(--sans);font-weight:600;color:var(--ink-3)}
.sline{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:13.5px}
.sline .k{color:var(--ink-3)}
.sline .v{font-weight:500;text-align:right}
.sline.tot{border-top:1px solid var(--line);margin-top:12px;padding-top:14px;
font-size:16px;font-weight:600}
.sline.tot .v{font-family:var(--display);font-size:20px}
.sline.dep .v{color:var(--brass);font-weight:600}
.summary .btn{margin-top:20px}
.summary .note{font-size:12px;color:var(--ink-4);line-height:1.55;margin-top:14px}
.srm{background:none;border:0;color:var(--ink-4);cursor:pointer;padding:2px 4px;
font-size:15px;line-height:1}
.srm:hover{color:var(--bad)}
/* ---------- fields ---------- */
.field{margin-bottom:17px}
.field label{display:block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
color:var(--ink-3);margin-bottom:7px;font-weight:600}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;min-height:48px;
border:1px solid var(--mist);background:var(--paper);color:var(--ink);font-size:15px;
transition:border-color .2s;border-radius:0;font-family:var(--sans)}
.field textarea{min-height:104px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-4)}
.field .hint{font-size:12px;color:var(--ink-4);margin-top:6px;line-height:1.5}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.row2{grid-template-columns:1fr}}
.check{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);
line-height:1.55;cursor:pointer;padding:6px 0;min-height:44px}
.check input{width:19px;height:19px;min-height:0;flex:none;margin-top:1px;accent-color:var(--brass)}
/* ---------- confirmation ---------- */
.conf{max-width:660px;margin:0 auto;text-align:center}
.conf .tickbig{width:70px;height:70px;border-radius:50%;background:var(--ok-bg);
display:flex;align-items:center;justify-content:center;margin:0 auto 24px}
.conf .tickbig svg{width:32px;height:32px;fill:none;stroke:var(--ok);stroke-width:2.4;
stroke-linecap:round;stroke-linejoin:round}
.conf h1{font-size:clamp(27px,4vw,42px);margin-bottom:12px}
.refbox{border:1px solid var(--line);background:var(--bone);padding:24px;margin:26px 0;
text-align:left}
.refcode{font-family:var(--display);font-size:clamp(26px,4vw,38px);font-weight:700;
letter-spacing:.12em;color:var(--brass);margin:6px 0 4px}
.conf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:18px;text-align:left;margin-top:20px}
.conf-grid .k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-4);font-weight:600;margin-bottom:5px}
.conf-grid .v{font-size:15px;font-weight:500}
.conf-act{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
/* ---------- status pills ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;font-size:10.5px;
letter-spacing:.13em;text-transform:uppercase;font-weight:700;white-space:nowrap;
font-family:var(--sans)}
.pill.pending{background:var(--warn-bg);color:var(--warn)}
.pill.confirmed{background:var(--ok-bg);color:var(--ok)}
.pill.arrived{background:var(--info-bg);color:var(--info)}
.pill.in-chair{background:var(--brass-pale);color:var(--brass)}
.pill.done{background:var(--bone-2);color:var(--ink-3)}
.pill.cancelled{background:var(--bad-bg);color:var(--bad)}
.pill.no-show{background:var(--bad-bg);color:var(--bad)}
/* ---------- my booking / manage ----------
.mybk, not .appt. The console's diary blocks are also .appt, scoped as
.ad .appt - and that rule sets position and size but never sets `display`, so
an unscoped `.appt{display:grid}` in THIS file leaked straight through into
every block in the diary. Nothing in site.css may use a class name the console
also uses unless site.css sets every property the console relies on. */
.mybk{border:1px solid var(--line);background:var(--paper);padding:22px;
display:grid;grid-template-columns:76px 1fr auto;gap:20px;align-items:center}
@media(max-width:720px){.mybk{grid-template-columns:1fr;gap:14px}}
.mybk-when{text-align:center;border-right:1px solid var(--line);padding-right:18px}
@media(max-width:720px){.mybk-when{border-right:0;border-bottom:1px solid var(--line);
padding:0 0 12px;text-align:left;display:flex;gap:14px;align-items:baseline}}
.mybk-when .d{font-family:var(--display);font-size:29px;font-weight:600;line-height:1}
.mybk-when .m{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-4);font-weight:600;margin-top:3px}
.mybk-when .t{font-size:13px;color:var(--brass);font-weight:600;margin-top:5px}
.mybk h3{font-size:16.5px;font-weight:600}
.mybk .sub{font-size:13px;color:var(--ink-3);margin-top:5px}
.mybk-act{display:flex;gap:8px;flex-wrap:wrap}
/* ---------- reviews ---------- */
.revs{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.rev{border:1px solid var(--line);padding:24px;background:var(--paper);
display:flex;flex-direction:column;gap:11px}
.dark-band .rev{background:transparent;border-color:rgba(var(--panel-fg-rgb),.18)}
.rev p{font-size:14.5px;line-height:1.7;margin:0;color:var(--ink-2)}
.dark-band .rev p{color:var(--panel-fg)}
.rev .who{font-size:12px;color:var(--ink-4);display:flex;gap:8px;align-items:center;
margin-top:auto;padding-top:6px}
.dark-band .rev .who{color:var(--panel-mute)}
/* ---------- stat row ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:clamp(18px,3vw,44px)}
.stat .n{font-family:var(--display);font-size:clamp(32px,5vw,54px);font-weight:600;
line-height:1;color:var(--brass)}
.stat .l{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
margin-top:9px;font-weight:600}
.dark-band .stat .l{color:var(--panel-mute)}
/* ---------- locations ---------- */
.locs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.loc{border:1px solid var(--line);padding:26px;background:var(--paper);
display:flex;flex-direction:column;gap:10px}
.loc h3{font-size:19px}
.loc .addr{font-size:13.5px;color:var(--ink-3);line-height:1.65}
.loc dl{margin:8px 0 0;font-size:13px;display:grid;grid-template-columns:auto 1fr;
gap:5px 16px}
.loc dt{color:var(--ink-4);font-weight:500}
.loc dd{margin:0;text-align:right}
.loc .open{color:var(--ok);font-weight:600}
.loc .shut{color:var(--ink-4)}
/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.gal .fig{aspect-ratio:1;cursor:pointer;transition:transform .45s var(--ease)}
.gal .fig:hover{transform:scale(1.02)}
.gal .cap{position:absolute;left:0;right:0;bottom:0;padding:14px;
background:linear-gradient(0deg,rgba(0,0,0,.66),transparent);
color:var(--panel-fg);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
font-weight:600;z-index:2}
/* ---------- table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-4);font-weight:600;padding:11px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:13px 12px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.tbl tr:hover td{background:var(--bone)}
/* ---------- footer ---------- */
.ftr{background:var(--panel-bg);color:var(--panel-fg);padding:clamp(48px,6vw,80px) 0 30px;
position:relative}
.ftr-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(24px,4vw,56px);
padding-bottom:clamp(34px,5vw,54px);border-bottom:1px solid rgba(var(--panel-fg-rgb),.16)}
@media(max-width:900px){.ftr-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr-top{grid-template-columns:1fr}}
.ftr-brand b{font-family:var(--display);font-size:22px;letter-spacing:.1em;display:block;
margin-bottom:13px}
.ftr-brand p{font-size:13.5px;color:var(--panel-mute);max-width:38ch;line-height:1.7}
.ftr h4{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
color:var(--panel-mute);margin-bottom:15px;font-family:var(--sans);font-weight:600}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
/* inline-block with padding, not a bare inline . As inline text these measured
16px tall, which fails WCAG 2.5.8 (Target Size Minimum, AA) at 24x24 - and a
footer is exactly where somebody hunts for "Your booking" with a thumb. */
.ftr ul a{font-size:13.5px;color:var(--panel-fg);opacity:.82;
transition:opacity .2s,color .2s;display:inline-block;padding:5px 0;min-height:26px}
.ftr ul a:hover{opacity:1;color:var(--brass-panel)}
@media(max-width:900px){
.ftr ul{gap:0}
.ftr ul a{padding:11px 0;min-height:44px}
}
.sub{display:flex;gap:0;margin-top:20px;max-width:340px}
.sub input{flex:1;padding:13px 15px;min-height:46px;background:transparent;
border:1px solid rgba(var(--panel-fg-rgb),.32);color:var(--panel-fg);font-size:14px}
.sub input::placeholder{color:var(--panel-mute)}
.sub input:focus{outline:none;border-color:var(--brass-panel)}
.sub button{padding:0 22px;min-height:46px;background:var(--brass);border:1px solid var(--brass);
color:var(--on-accent);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
font-weight:600;cursor:pointer;transition:.2s}
.sub button:hover{background:var(--panel-fg);border-color:var(--panel-fg);color:var(--panel-bg)}
.ftr-bot{display:flex;justify-content:space-between;align-items:center;gap:18px;
padding-top:26px;font-size:12px;color:var(--panel-mute);flex-wrap:wrap}
.pays{display:flex;gap:9px}
.pays span{border:1px solid rgba(var(--panel-fg-rgb),.24);padding:4px 9px;font-size:9.5px;
letter-spacing:.1em;font-weight:600}
/* ---------- WhatsApp ---------- */
.wa{position:fixed;right:22px;bottom:26px;z-index:180;width:54px;height:54px;
border-radius:50%;background:var(--ok);color:var(--invert-fg);
display:flex;align-items:center;justify-content:center;
box-shadow:0 8px 28px rgba(0,0,0,.24);transition:transform .25s var(--ease)}
.wa:hover{transform:scale(1.07)}
.wa svg{width:27px;height:27px;fill:currentColor;stroke:none}
@media(max-width:700px){.wa{right:14px;bottom:16px;width:50px;height:50px}}
/* ---------- drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:210;opacity:0;
visibility:hidden;transition:opacity .3s,visibility .3s;backdrop-filter:blur(2px)}
.scrim.on{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);z-index:220;
background:var(--paper);transform:translateX(102%);transition:transform .42s var(--ease);
display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer-hd{display:flex;align-items:center;justify-content:space-between;
padding:22px 24px;border-bottom:1px solid var(--line)}
.drawer-hd b{font-family:var(--display);font-size:16px;letter-spacing:.09em;text-transform:uppercase}
.drawer-bd{flex:1;overflow-y:auto;padding:24px}
.drawer-ft{padding:22px 24px;border-top:1px solid var(--line);background:var(--bone)}
.x{background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--ink-3);
width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.x:hover{color:var(--ink)}
/* ---------- breadcrumb ---------- */
.crumb{font-size:12px;color:var(--ink-4);margin-bottom:20px;display:flex;gap:8px;
flex-wrap:wrap;align-items:center}
.crumb a:hover{color:var(--brass)}
.crumb span{opacity:.5}
/* ---------- page head ---------- */
.phead{padding:clamp(34px,5vw,64px) 0 clamp(24px,3vw,38px)}
.phead h1{font-size:clamp(30px,5vw,58px);font-weight:600;max-width:17ch}
.phead p{color:var(--ink-3);max-width:56ch;margin-top:14px;font-size:15px}
/* ---------- prose ---------- */
.prose{max-width:70ch;font-size:15px;line-height:1.78;color:var(--ink-2)}
.prose h2{font-size:23px;margin:38px 0 13px}
.prose h3{font-size:17px;margin:28px 0 10px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 1em}
.prose li{margin-bottom:8px}
.prose a{color:var(--brass);border-bottom:1px solid currentColor}
.prose strong{color:var(--ink);font-weight:600}
/* ---------- touch sizing ----------
.btn.sm and the theme toggle are 40px, which is a comfortable size for a mouse
and two pixels short of the 44px a thumb wants. Rather than making every small
button on every desktop chunkier, they grow only where the target is a finger.
"Book here" on a shop card is a primary action, so it gets the full 44 - the
audit measures this at 390px and will fail the build if it drifts back. */
@media(max-width:900px){
.btn.sm{min-height:44px;padding:12px 20px}
.iconbtn{width:44px;height:44px}
.srm{width:32px;height:32px}
}
/* .themebtn is deliberately NOT here. It is declared in ux.css, which owns the
theme toggle and loads after this file, so a rule for it here has equal
specificity, loses on source order, and silently does nothing. Its touch size
lives beside its own declaration. */
/* ---------- velocity weight ----------
Cards settle a fraction behind the scroll. Kept small: this is the difference
between a site that feels weighted and one that feels broken. */
:root{--vel:0}
.fig>.inner{transform:scale(calc(1 + var(--vel) * var(--vel) * 0.01));
transition:transform 1.1s var(--ease);position:absolute;inset:0}
@media(prefers-reduced-motion:reduce){.fig>.inner{transform:none !important}}