/* HO2 Barber Shop · shared tokens
   60 / 30 / 10 (by area):
   60  charcoal grounds   --ink #0E0F11, --coal #17181B
   30  steel + LED white  --steel #24262B, --led #F5F5F2 (type, rules, panels)
   10  the pole           --red #E3101A fills (CTA, open sign) + --blue #0A3AB2 (stripes, accents)
   Red is TWO values on purpose: --red is the fill (white text on it = 4.8:1),
   --red-ink is for red TEXT on dark grounds (#FF4A3D = 5.7:1 on --ink). Do not merge them.
   --blue is never small text on dark (2.9:1). It is stripe, rule and fill only. */
:root{
  --ink:#0E0F11; --coal:#17181B; --steel:#24262B; --steel-2:#2E3036; --concrete:#8C8F94;
  --led:#F5F5F2; --muted:#B7B9BE; --dim:#7E8187;
  --red:#E3101A; --red-ink:#FF4A3D; --blue:#0A3AB2; --blue-lit:#5B82F0; --timber:#B07A4A;
  --display:"Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --body:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --neon:"Tilt Neon", "Arial Rounded MT Bold", system-ui, sans-serif; /* the header's OPEN sign only */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --gut:clamp(16px,4vw,56px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--led);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.01em;margin:0}
p{margin:0}
:focus-visible{outline:2px solid var(--led);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* tracked slab caps, after the "S H O P" in the logo */
.tag{font:600 12px/1 var(--display);letter-spacing:.42em;text-transform:uppercase;color:var(--muted)}
.tag b{color:var(--red-ink);font-weight:700}

/* the barber pole, as a stripe rule */
.stripe{height:6px;border-radius:3px;background:repeating-linear-gradient(-45deg,var(--red) 0 8px,#fff 8px 12px,var(--blue) 12px 20px,#fff 20px 24px)}

/* buttons */
.btn{--bg:var(--red);display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:54px;padding:0 28px;border:0;border-radius:999px;background:var(--bg);color:#fff;font:700 16px/1 var(--body);letter-spacing:.01em;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 12px 34px -10px rgba(227,16,26,.65);transition:transform .25s var(--ease-out),box-shadow .25s}
/* the sheen crosses once, left to right, on the way in. It snaps back unseen (no transition
   off hover), so it never runs backwards on mouse-out, and touch screens don't get it at all. */
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%)}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 18px 40px -10px rgba(227,16,26,.8)}
@media (hover:hover){.btn:hover::after{transform:translateX(120%);transition:transform .7s var(--ease-out)}}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.6;cursor:wait}
.btn.ghost{--bg:transparent;box-shadow:0 0 0 1.5px rgba(245,245,242,.5) inset}
.btn.ghost:hover{box-shadow:0 0 0 1.5px var(--led) inset}
.btn svg{width:18px;height:18px;flex:none}

/* forms */
.field{display:grid;gap:7px}
.field label,.legend{font:600 13px/1.2 var(--body);color:var(--muted);letter-spacing:.02em}
.field input,.field textarea{width:100%;min-height:52px;padding:13px 16px;border-radius:12px;border:1px solid #3A3D44;background:#111215;color:var(--led);font:500 17px/1.3 var(--body);transition:border-color .2s,background .2s}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--led);background:#15161A}
.field input::placeholder,.field textarea::placeholder{color:#6B6E75}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #3A3D44;color:var(--muted);font:600 14px/1 var(--body);cursor:pointer;transition:all .2s}
.seg input:checked+label{background:var(--led);border-color:var(--led);color:var(--ink)}
.seg input:focus-visible+label{outline:2px solid var(--led);outline-offset:3px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--muted);cursor:pointer}
.check input{appearance:none;flex:none;width:22px;height:22px;margin:1px 0 0;border-radius:6px;border:1.5px solid #555A62;background:#111215;display:grid;place-content:center;cursor:pointer}
.check input:checked{background:var(--red);border-color:var(--red)}
.check input:checked::after{content:"";width:10px;height:6px;border:2.5px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.fine{font-size:13px;color:var(--dim);line-height:1.5}
.form-done{padding:22px 24px;border-radius:16px;background:#14161A;border:1px solid #2F3238;font-size:17px;line-height:1.55}
.form-done strong{font-family:var(--display);font-size:24px;display:block;margin-bottom:6px;color:#fff}
.form-done .demo{display:inline-block;margin-top:12px;font:600 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:#E8C547;padding:6px 9px;border-radius:5px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}