/* =====================================================================
   URBANCUTS BARBERSHOP — design system
   Black + gold. Oswald display · Inter body · Poppins logo.
   ===================================================================== */
:root{
  --bg:#0a0a0b; --bg2:#0e0e10; --panel:#141416; --panel2:#17171a;
  --line:#242427; --line2:#2f2f33; --line3:#3a3a3f;
  --ink:#f6f5f2; --ink2:#e2e1dc; --mut:#9d9d9f; --mut2:#6d6d70;
  --gold:#e6a81e; --gold2:#f4c657; --gold-dim:#b7841a; --gold-soft:rgba(230,168,30,.12);
  --os:'Oswald',sans-serif; --in:'Sora',system-ui,sans-serif; --pp:'Oswald',sans-serif;
  --wrap:1180px; --hd:78px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ background:var(--bg); color:var(--ink2); font-family:var(--in); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--gold); color:#0a0a0a; }
svg{ display:block; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }
.gold{ color:var(--gold); }

/* ---------- typography helpers ---------- */
.eyebrow{ font-family:var(--os); font-weight:600; font-size:12px; letter-spacing:3.5px;
  text-transform:uppercase; color:var(--gold); display:inline-block; }
.eyebrow.mut{ color:var(--mut); }
.h-sec{ font-family:var(--os); font-weight:700; font-size:clamp(30px,4.4vw,46px); line-height:1.02;
  letter-spacing:.5px; text-transform:uppercase; color:var(--ink); }
.sub{ color:var(--mut); font-size:15px; line-height:1.7; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--os); font-weight:600; font-size:13px; letter-spacing:1.5px; text-transform:uppercase;
  padding:15px 26px; border:1.5px solid transparent; transition:.18s; white-space:nowrap; line-height:1; }
.btn svg{ width:16px; height:16px; }
.btn-gold{ background:var(--gold); color:#0a0a0a; border-color:var(--gold); }
.btn-gold:hover{ background:var(--gold2); border-color:var(--gold2); transform:translateY(-2px); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line3); }
.btn-outline:hover{ border-color:var(--gold); color:var(--gold); }
.btn-gold-out{ background:transparent; color:var(--gold); border-color:var(--gold); }
.btn-gold-out:hover{ background:var(--gold); color:#0a0a0a; }
.btn-block{ width:100%; }

/* ---------- header ---------- */
.uc-hd{ position:fixed; top:0; left:0; right:0; z-index:200; height:var(--hd);
  background:rgba(10,10,11,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06); transition:.3s; }
.uc-hd.scrolled{ background:rgba(8,8,9,.97); box-shadow:0 10px 30px rgba(0,0,0,.5); }
.uc-hd-in{ max-width:var(--wrap); margin:0 auto; padding:0 28px; height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:20px; }
.uc-logo{ display:flex; flex-direction:column; gap:2px; line-height:1; flex:0 0 auto; }
.uc-logo .w{ font-family:var(--pp); font-weight:800; font-size:24px; letter-spacing:-.5px; color:var(--gold); }
.uc-logo .w sup{ font-size:9px; top:-.9em; }
.uc-logo .s{ font-family:var(--os); font-weight:500; font-size:9.5px; letter-spacing:5px;
  text-transform:uppercase; color:var(--ink2); padding-left:2px; }
.uc-nav{ display:flex; align-items:center; gap:30px; margin-left:auto; }
.uc-nav a{ font-family:var(--os); font-weight:500; font-size:13.5px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ink2); position:relative; padding:6px 0; transition:.15s; }
.uc-nav a::after{ content:''; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--gold); transition:.22s; }
.uc-nav a:hover{ color:var(--gold); }
.uc-nav a.on{ color:var(--gold); }
.uc-nav a.on::after{ right:0; }
.uc-hd .uc-book{ flex:0 0 auto; margin-left:8px; padding:13px 22px; }
.uc-burger{ display:none; width:44px; height:44px; background:none; border:1px solid var(--line3); border-radius:8px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.uc-burger span{ width:20px; height:2px; background:var(--ink); transition:.25s; }
.uc-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.uc-burger.open span:nth-child(2){ opacity:0; }
.uc-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.uc-drawer{ position:fixed; inset:var(--hd) 0 0 0; z-index:190; background:rgba(8,8,9,.98);
  backdrop-filter:blur(10px); transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column; padding:26px 28px; gap:4px; }
.uc-drawer.open{ transform:translateX(0); }
.uc-drawer a{ font-family:var(--os); font-weight:500; font-size:20px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ink2); padding:15px 0; border-bottom:1px solid var(--line); }
.uc-drawer a.on{ color:var(--gold); }
.uc-drawer .btn{ margin-top:20px; }
.uc-drawer .dr-contact{ margin-top:auto; color:var(--mut); font-size:13px; line-height:1.9; }
.uc-drawer .dr-contact b{ color:var(--gold); font-weight:600; }

/* ---------- section frame ---------- */
main{ padding-top:var(--hd); }
.sect{ padding:74px 0; border-top:1px solid var(--line); }
/* Alternating tonal bands. A second hue would fight the single gold accent, so the
   separation is tonal (#0a0a0b vs #0e0e10) plus the hairline that was already there. */
.sect--alt{ background:var(--bg2); }
.sect--alt + .sect{ border-top-color:var(--line2); }
.sect.tight{ padding:56px 0; }
.sect-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:40px; flex-wrap:wrap; }
.sect-head .l .eyebrow{ margin-bottom:12px; }

/* ---------- HERO ---------- */
.hero{ position:relative; border-top:none; overflow:hidden; }
.hero::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url('assets/hero-bg.webp?v=2') right center/cover no-repeat; }
/* left region measures 9,10,12 — the scrim only guards narrow viewports where
   `cover` crops horizontally and the brass tools drift toward the copy */
.hero::after{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(95deg,var(--bg) 0,var(--bg) 30%,rgba(10,10,11,.82) 48%,rgba(10,10,11,.25) 68%,rgba(10,10,11,0) 88%); }
.hero .wrap{ position:relative; z-index:1; }
@media(max-width:820px){
  .hero::before{ background-image:url('assets/hero-bg-m.webp?v=2'); background-position:center top; }
  .hero::after{ background:linear-gradient(180deg,rgba(10,10,11,.72) 0,rgba(10,10,11,.66) 45%,rgba(10,10,11,.8) 100%); }
}
.hero-grid{ display:grid; grid-template-columns:minmax(0,620px); gap:20px; align-items:center;
  min-height:calc(100vh - var(--hd)); padding:40px 0; }
.hero-copy .eyebrow{ margin-bottom:18px; }
.hero-copy .eyebrow b{ color:var(--gold); font-weight:600; }
.hero-h1{ font-family:var(--os); font-weight:700; font-size:clamp(46px,7vw,88px); line-height:.92;
  letter-spacing:0px; text-transform:uppercase; color:var(--ink); margin-bottom:22px; }
.hero-h1 span{ color:var(--gold); }
.hero-lead{ font-family:var(--os); font-weight:500; font-size:clamp(18px,2vw,22px); letter-spacing:.5px;
  color:var(--ink2); line-height:1.35; margin-bottom:16px; }
.hero-p{ color:var(--mut); font-size:15px; line-height:1.75; max-width:430px; margin-bottom:30px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:nowrap; align-items:stretch; margin-bottom:26px; }
.hero-loc{ display:inline-flex; align-items:center; gap:10px; color:var(--ink2); font-size:14px; }
.hero-loc svg{ width:18px; height:18px; color:var(--gold); flex:0 0 auto; }
.hero-media{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:1.02/1;
  border:1px solid var(--line2); background:#000; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.35)); }
.hero-scroll{ position:absolute; right:6px; top:50%; transform:translateY(-50%) rotate(0deg); writing-mode:vertical-rl;
  font-family:var(--os); font-size:11px; letter-spacing:4px; text-transform:uppercase; color:var(--mut); display:flex; align-items:center; gap:10px; }
.hero-scroll::after{ content:''; width:1px; height:46px; background:linear-gradient(var(--gold),transparent); }

/* ---------- FEATURE STRIP (4 col with dividers) ---------- */
.fstrip{ display:grid; grid-template-columns:repeat(4,1fr); }
.fstrip .fc{ text-align:center; padding:14px 22px; border-left:1px solid var(--line); }
.fstrip .fc:first-child{ border-left:none; }
.fstrip .fc .ic{ color:var(--gold); display:flex; justify-content:center; margin-bottom:16px; }
.fstrip .fc .ic svg{ width:38px; height:38px; }
.fstrip .fc h4{ font-family:var(--os); font-weight:600; font-size:16px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink); margin-bottom:8px; }
.fstrip .fc p{ color:var(--mut); font-size:13.5px; line-height:1.5; }

/* ---------- ABOUT ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-copy .h-sec{ margin:14px 0 22px; }
.about-copy p{ color:var(--mut); font-size:14.5px; line-height:1.8; margin-bottom:16px; max-width:440px; }
.about-copy .btn{ margin-top:14px; }
.about-list .ab{ display:flex; gap:20px; padding:22px 0; border-top:1px solid var(--line); }
.about-list .ab:first-child{ border-top:none; padding-top:0; }
.about-list .ab .ic{ color:var(--gold); flex:0 0 auto; }
.about-list .ab .ic svg{ width:34px; height:34px; }
.about-list .ab h4{ font-family:var(--os); font-weight:600; font-size:15px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink); margin-bottom:7px; }
.about-list .ab p{ color:var(--mut); font-size:13.5px; line-height:1.6; }

/* ---------- SERVICES cards ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.svc{ position:relative; border:1px solid var(--line2); border-radius:12px; overflow:hidden; min-height:260px;
  display:flex; flex-direction:column; justify-content:flex-end; padding:24px 20px; transition:.2s; background:#0c0c0e; }
.svc img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; transition:.3s; }
.svc::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,8,9,.35) 0%,rgba(8,8,9,.9) 78%); }
.svc>*{ position:relative; z-index:2; }
.svc .ic{ color:var(--gold); margin-bottom:14px; }
.svc .ic svg{ width:34px; height:34px; }
.svc h4{ font-family:var(--os); font-weight:600; font-size:17px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink); margin-bottom:8px; }
.svc p{ color:var(--mut); font-size:13px; line-height:1.5; }
.svc:hover{ border-color:var(--gold); transform:translateY(-4px); }
.svc:hover img{ opacity:.68; }

/* ---------- WHY CHOOSE ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.why{ text-align:center; padding:20px; }
.why .ic{ color:var(--gold); display:flex; justify-content:center; margin-bottom:18px; }
.why .ic svg{ width:40px; height:40px; }
.why h4{ font-family:var(--os); font-weight:600; font-size:16px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink); margin-bottom:9px; }
.why p{ color:var(--mut); font-size:13.5px; line-height:1.55; }

/* ---------- PRICING ---------- */
.price-wrap{ display:grid; grid-template-columns:1fr 1fr 1fr 1.05fr; gap:16px; align-items:stretch; }
.pcard{ border:1px solid var(--line2); border-radius:12px; padding:30px 24px; text-align:center; background:var(--panel);
  display:flex; flex-direction:column; }
.pcard .pt{ font-family:var(--os); font-weight:600; font-size:15px; letter-spacing:2px; text-transform:uppercase; color:var(--ink2); margin-bottom:16px; }
.pcard .pp{ font-family:var(--os); font-weight:700; font-size:44px; color:var(--ink); line-height:1; margin-bottom:14px; }
.pcard .pd{ color:var(--mut); font-size:13px; line-height:1.55; }
.pcard.feat{ border-color:var(--gold); background:linear-gradient(180deg,rgba(230,168,30,.08),rgba(230,168,30,0)); position:relative; }
.pcard.feat .pp{ color:var(--gold); }
.pcard .pop{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--gold); color:#0a0a0a;
  font-family:var(--os); font-weight:600; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; padding:4px 14px; border-radius:2px; white-space:nowrap; }
.addons{ border:1px solid var(--line2); border-radius:12px; padding:24px; background:var(--panel); }
.addons .at{ font-family:var(--os); font-weight:600; font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.addons .arow{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px dashed var(--line2);
  font-size:13.5px; color:var(--ink2); }
.addons .arow:last-child{ border-bottom:none; }
.addons .arow b{ color:var(--gold); font-family:var(--os); font-weight:600; }

/* ---------- GALLERY strip ---------- */
.work-grid{ display:flex; align-items:center; gap:14px; }
.work-thumbs{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; flex:1; }
.work-thumbs a{ display:block; aspect-ratio:1; border-radius:8px; overflow:hidden; border:1px solid var(--line2); position:relative;
  background:radial-gradient(circle at 50% 42%, rgba(230,168,30,.14), transparent 62%), #101013; }
.work-thumbs img{ width:100%; height:100%; object-fit:cover; transition:.3s; }
.work-thumbs a:hover img{ transform:scale(1.08); }
.work-grid .gtitle{ flex:0 0 300px; }
.work-grid .gtitle .h-sec{ margin-top:12px; }

/* ---------- BOOKING BAND ---------- */
.book-band{ position:relative; border:1px solid var(--line2); border-radius:14px; overflow:hidden;
  display:flex; align-items:center; gap:24px; padding:34px 36px; background:var(--panel); }
.book-band img{ position:absolute; right:0; top:0; bottom:0; width:38%; height:100%; object-fit:cover; opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 55%); mask-image:linear-gradient(90deg,transparent,#000 55%); }
.book-band .bb-ic{ color:var(--gold); flex:0 0 auto; z-index:2; }
.book-band .bb-ic svg{ width:52px; height:52px; }
.book-band .bb-txt{ z-index:2; flex:1; }
.book-band .bb-txt h3{ font-family:var(--os); font-weight:700; font-size:clamp(22px,3vw,30px); letter-spacing:.5px; text-transform:uppercase; color:var(--ink); }
.book-band .bb-txt p{ color:var(--mut); font-size:14px; margin-top:4px; }
.book-band .btn{ z-index:2; flex:0 0 auto; }

/* ---------- FOOTER ---------- */
.uc-ft{ background:#08080a; border-top:1px solid var(--line); padding:44px 0 18px; }
.uc-ft-grid{ display:grid; grid-template-columns:1.4fr repeat(4,minmax(0,1fr)); gap:24px; align-items:start; }
/* every entry must hold ONE line — a wrapped item breaks the column rhythm */
.fcol a,.fcol .li{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:13px; line-height:1.95; color:var(--mut); text-decoration:none; transition:color .16s; }
.fcol a:hover{ color:var(--gold); }
.fcol .li.gold{ color:var(--gold); }
.fbrand p{ font-size:13px; line-height:1.7; color:var(--mut); margin:12px 0 0; }
@media(max-width:900px){ .uc-ft-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 20px; } }
@media(max-width:520px){ .uc-ft-grid{ grid-template-columns:1fr; } }
.uc-ft .fcol h5{ font-family:var(--os); font-weight:600; font-size:11.5px; letter-spacing:2px; text-transform:uppercase; color:var(--ink); margin:0 0 10px; }
.uc-ft .fcol a, .uc-ft .fcol .li{ display:block; color:var(--mut); font-size:13.5px; line-height:1; padding:7px 0; transition:.15s; }
.uc-ft .fcol a:hover{ color:var(--gold); }
.uc-ft .fbrand .uc-logo{ margin-bottom:16px; }
.uc-ft .fbrand p{ color:var(--mut); font-size:13px; line-height:1.7; max-width:230px; margin-bottom:18px; }
.uc-ft .socials{ display:flex; gap:10px; }
.uc-ft .socials a{ width:38px; height:38px; border:1px solid var(--line2); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--mut); padding:0; }
.uc-ft .socials a:hover{ border-color:var(--gold); color:var(--gold); }
.uc-ft .socials svg{ width:17px; height:17px; }
.uc-ft .cline{ display:flex; align-items:flex-start; gap:11px; color:var(--ink2); font-size:13.5px; padding:7px 0; line-height:1.5; }
.uc-ft .cline svg{ width:16px; height:16px; color:var(--gold); flex:0 0 auto; margin-top:3px; }
.uc-ft-bottom{ border-top:1px solid var(--line); margin-top:30px; padding-top:16px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  color:var(--mut2); font-size:12.5px; flex-wrap:wrap; }
.uc-ft-bottom .built b{ color:var(--gold); font-weight:500; }

/* ===================== RESPONSIVE ===================== */
@media (max-width:1080px){
  .hero-h1{ font-size:clamp(44px,9vw,72px); }
  .svc-grid{ grid-template-columns:repeat(3,1fr); }
  .work-thumbs{ grid-template-columns:repeat(6,1fr); }
}
@media (max-width:900px){
  :root{ --hd:66px; }
  .uc-nav, .uc-hd .uc-book{ display:none; }
  .uc-burger{ display:flex; }
  .hero-grid{ grid-template-columns:1fr; min-height:0; gap:34px; padding:30px 0 44px; }
  .hero-media{ aspect-ratio:1.3/1; order:-1; }
  .hero-scroll{ display:none; }
  .about-grid{ grid-template-columns:1fr; gap:40px; }
  .fstrip{ grid-template-columns:repeat(2,1fr); }
  .fstrip .fc{ padding:22px 16px; border-top:1px solid var(--line); }
  .fstrip .fc:nth-child(-n+2){ border-top:none; }
  .fstrip .fc:nth-child(odd){ border-left:none; }
  .why-grid{ grid-template-columns:repeat(2,1fr); gap:30px 20px; }
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .price-wrap{ grid-template-columns:1fr 1fr; }
  .work-grid{ flex-direction:column; align-items:stretch; }
  .work-grid .gtitle{ flex:none; }
  .work-thumbs{ grid-template-columns:repeat(3,1fr); }
  .book-band{ flex-direction:column; text-align:center; padding:30px 24px; }
  .book-band img{ display:none; }
  .uc-ft-grid{ grid-template-columns:1fr 1fr; gap:30px; }
  .uc-ft .fbrand{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .wrap, .uc-hd-in{ padding:0 18px; }
  .sect{ padding:52px 0; }
  .sect-head{ margin-bottom:28px; }
  .hero-h1{ font-size:clamp(40px,12vw,58px); }
  .hero-p{ max-width:100%; }
  /* both hero buttons stay ON ONE LINE */
  .hero-cta{ flex-wrap:nowrap; gap:10px; }
  .hero-cta .btn{ flex:1 1 0; min-width:0; padding:14px 10px; font-size:11.5px; letter-spacing:1px; }
  .hero-cta .btn svg{ width:14px; height:14px; }
  .price-wrap{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:1fr 1fr; gap:26px 16px; }
  .svc-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .work-thumbs{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .uc-ft-grid{ grid-template-columns:1fr 1fr; }
  .uc-ft-bottom{ justify-content:center; text-align:center; }
}
@media (max-width:380px){
  .fstrip{ grid-template-columns:1fr; }
  .fstrip .fc{ border-left:none !important; }
  .why-grid, .svc-grid{ grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   Urbancuts — MALACHITE layer.  Tokens: DESIGN.md §1.
   Malachite is a banded copper carbonate: near-black forest green
   through emerald to a chalky pale mint, laid down in concentric
   botryoidal rings.  The ramp below is those bands; the ring geometry
   is the pattern.  Metal is polished steel — the barber's own tools —
   not gold and not platinum.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* the seven bands, deepest to palest */
  --mal-1:#071510; --mal-2:#0f2f22; --mal-3:#1a5c42; --mal-4:#2b8a62;
  --mal-5:#4fc08d; --mal-6:#9fd8bd; --mal-7:#d6ecdf;
  /* ground — near-black carrying the same green bias, never neutral grey */
  --void-1:#050a08; --void-2:#0a1210; --void-3:#101a16; --void-4:#1d2b25;
  /* steel — shears, razor, clipper.  The metal of the trade. */
  --steel:#b8c2c0; --steel-lit:#e8eeec; --steel-deep:#6d7a77;
  --mal-ink:#04160f;          /* text on a malachite fill — 6.1:1 at worst */
  --ink:#f2f6f4; --ink-2:#c2cdc8; --ink-3:#86938e;
  --os:'Oswald',sans-serif;
  --bd:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --e:cubic-bezier(.22,.8,.28,1);
}

/* ── the rest of the site, re-keyed ─────────────────────────────────
   The original sheet drives every section off --bg/--panel/--line/--gold.
   Retune those five rather than restyle forty components: --gold becomes
   MALACHITE, so the nav underline, eyebrows, rules, wordmark and .btn-gold
   all follow in one place.  (This slot previously held platinum; the
   founder's direction is malachite.)                                   */
:root{
  --bg:#050a08; --bg2:#080f0c; --panel:#0a1210; --panel2:#101a16;
  --line:#152019; --line2:#1d2b25; --line3:#2b3d34;
  --ink2:#dbe5e0; --mut:#8f9d97; --mut2:#63706b;
  --gold:#4fc08d; --gold2:#9fd8bd; --gold-dim:#2b8a62;
  --gold-soft:rgba(79,192,141,.12);
}
body{background:var(--bg);font-family:var(--bd)}
::selection{background:var(--mal-5);color:var(--mal-ink)}

/* ── hero ───────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(96px,14vw,164px) clamp(72px,10vw,120px);
  background:var(--void-1)}

/* the photograph: barber's tools on polished malachite, right-weighted */
.hero::before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:url('assets/hero-mal.webp?v=1') right center/cover no-repeat!important}

/* the scrim holds the reading side dark and leaves the stone lit (§7) */
.hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(94deg, var(--void-1) 0%, var(--void-1) 30%,
                    rgba(5,10,8,.93) 48%, rgba(5,10,8,.6) 68%,
                    rgba(5,10,8,.1) 100%),
    radial-gradient(64% 92% at 4% 50%, rgba(5,10,8,.92) 0%, transparent 72%)!important}

/* ── the pattern: malachite's concentric banding ────────────────────
   Not a decorative flourish — botryoidal rings are how the mineral
   actually grows, and they are the one shape that reads as "malachite"
   without any colour at all.  Signature moment (§6): the rings stroke
   themselves in once on load. */
.hero-bands{position:absolute;left:0;top:0;z-index:-1;
  width:min(820px,68vw);height:100%;color:var(--mal-5);opacity:.26;
  -webkit-mask-image:radial-gradient(76% 84% at 16% 48%,#000 0%,rgba(0,0,0,.32) 54%,transparent 80%);
          mask-image:radial-gradient(76% 84% at 16% 48%,#000 0%,rgba(0,0,0,.32) 54%,transparent 80%);
  stroke-dasharray:1400;stroke-dashoffset:1400;
  animation:uc-draw 2.8s var(--e) .2s forwards}
@keyframes uc-draw{to{stroke-dashoffset:0}}
@media(max-width:900px){.hero-bands{width:100%;opacity:.16}}

/* The copy column stops at 38rem so it never runs past the scrim's dark
   half onto the lit stone — measured, not guessed (§7). */
.hero-in{display:grid;grid-template-columns:minmax(0,1fr)}
.hero-copy{max-width:38rem}

/* Scoped to .hero on purpose — `.eyebrow` is a site-wide inline-block
   helper used in five other sections; making it flex globally would turn
   each of those spans into a block and break their inline layout. */
.hero .eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 20px;
  font-family:var(--os);font-weight:500;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mal-6)}
.eyebrow-rule{display:block;width:46px;height:1px;flex:none;
  background:linear-gradient(90deg,var(--mal-5),transparent)}

.hero-h1{margin:0;font-family:var(--os);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.8rem,7.6vw,6rem);line-height:.92;letter-spacing:-.02em;
  color:var(--ink);text-wrap:balance}
.hero-h1 span{display:block}
/* An older sheet sets -webkit-text-fill-color on `.hero-h1 span`; that
   property beats `color` AND defeats background-clip:text, so it has to be
   set explicitly on every line here or the gradients paint flat. */
.hero-h1 .hero-h1-a{-webkit-text-fill-color:var(--ink);color:var(--ink)}
.hero-h1 .hero-h1-b{
  -webkit-text-fill-color:transparent;color:transparent;
  background:linear-gradient(92deg,var(--ink) 0%,var(--mal-6) 62%,var(--mal-5) 100%);
  -webkit-background-clip:text;background-clip:text}
/* The mark that closes the headline: one malachite band, not a full stop.
   Decorative, aria-hidden, and the sentence reads correctly without it. */
.hero-h1 .hero-stop{display:inline-block;width:.5em;height:.13em;
  margin-left:.12em;vertical-align:.06em;border-radius:1px;
  background:linear-gradient(90deg,var(--mal-3),var(--mal-5) 45%,var(--mal-7));
  box-shadow:0 0 18px rgba(79,192,141,.5)}

.hero .hero-lead{margin:24px 0 0;max-width:46ch;font-family:var(--bd);font-weight:400;
  font-size:clamp(1rem,1.6vw,1.16rem);line-height:1.65;color:var(--ink-2)}

/* ── buttons ────────────────────────────────────────────────────── */
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 22px;border-radius:2px;border:1px solid transparent;
  font-family:var(--os);font-weight:600;font-size:13.5px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:transform .2s var(--e),background-color .2s var(--e),
             border-color .2s var(--e),color .2s var(--e)}
.btn svg{width:17px;height:17px;transition:transform .2s var(--e)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--mal-6);outline-offset:2px}

/* polished malachite — a banded stone, never a flat fill */
.btn--mal{position:relative;overflow:hidden;
  background:linear-gradient(168deg,#63cf9c 0%,var(--mal-5) 48%,#3fa578 100%);
  color:var(--mal-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,
             0 14px 34px -16px rgba(79,192,141,.5)}
/* one pale band across its foot — the mineral's own signature */
.btn--mal::after{content:'';position:absolute;inset:auto 0 0 0;height:2px;
  background:linear-gradient(90deg,transparent,var(--mal-7),transparent);opacity:.9}
.btn--mal:hover{background:linear-gradient(168deg,#7ddcb0 0%,#63cf9c 48%,var(--mal-5) 100%)}
.btn--mal:hover svg{transform:translateX(3px)}
.btn--ghost{border-color:var(--void-4);color:var(--ink);
  background:rgba(10,18,16,.55);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:rgba(29,43,37,.85);border-color:var(--mal-3);color:var(--ink)}

/* .btn-gold is the site-wide CTA; same stone treatment so the two never
   read as different components. */
.btn-gold{background:linear-gradient(168deg,#63cf9c 0%,var(--mal-5) 48%,#3fa578 100%);
  color:var(--mal-ink);border-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset}
.btn-gold:hover{background:linear-gradient(168deg,#7ddcb0 0%,#63cf9c 48%,var(--mal-5) 100%);
  border-color:transparent}
.btn-gold-out:hover{background:var(--mal-5);color:var(--mal-ink)}

/* Two rules in the base sheet bake rgba(230,168,30,…) in rather than
   reading --gold, so retuning the token alone left a warm haze behind. */
.pcard.feat{background:linear-gradient(180deg,rgba(79,192,141,.09),rgba(79,192,141,0))}
.work-thumbs a{background:
  radial-gradient(circle at 50% 42%, rgba(79,192,141,.13), transparent 62%), var(--panel2)}

/* ── facts ──────────────────────────────────────────────────────── */
.hero-facts{display:flex;flex-wrap:wrap;gap:0;margin:40px 0 0;padding:20px 0 0;
  border-top:1px solid var(--void-4)}
.hero-facts>div{padding-right:28px;margin-right:28px;border-right:1px solid var(--void-4)}
.hero-facts>div:last-child{border-right:0;margin-right:0;padding-right:0}
.hero-facts dt{font-family:var(--os);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 3px}
.hero-facts dd{margin:0;font-family:var(--os);font-weight:600;font-size:1.05rem;color:var(--ink)}

@media(max-width:900px){
  .hero-facts>div{padding-right:20px;margin-right:20px}
  .hero{padding-bottom:clamp(150px,44vw,260px)}
  /* A 16:9 still life cropped to a phone's portrait viewport zooms so far in
     that the tools stop being readable as tools — it becomes noise. So on
     narrow screens the scene is NOT cropped: it spans the full width at its
     own aspect ratio and sits along the foot of the hero, with the copy on
     clean void above it. */
  .hero::before{background:url('assets/hero-mal-m.webp?v=2') center bottom / 100% auto no-repeat!important}
  .hero::after{background:
    linear-gradient(180deg,var(--void-1) 0%,var(--void-1) 40%,
                    rgba(5,10,8,.72) 58%,rgba(5,10,8,.34) 100%)!important}
}
@media(max-width:560px){
  .hero-cta{flex-wrap:nowrap;gap:10px}
  .hero-cta .btn{flex:1 1 0;min-width:0;padding:0 10px;font-size:11.5px;letter-spacing:.08em}
  .hero-cta .btn svg{width:14px;height:14px}
}

/* ── header utilities: language switcher + login ────────────────── */
/* These sit beside the burger, so they take the burger's exact shell —
   44x44, 1px --line3, 8px radius, transparent fill (urban.base.css:66).
   The language control is the one exception on width: it carries the
   current code beside the globe, so it keeps the height and border and
   grows sideways rather than cramming two glyphs into a 44px square. */
.uc-utils{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin:0 8px 0 4px}
.uc-ico{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  width:44px;height:44px;padding:0;border-radius:8px;
  border:1px solid var(--line3);background:none;color:var(--ink);
  font-family:var(--os);font-weight:500;font-size:11.5px;letter-spacing:.1em;
  cursor:pointer;transition:color .2s var(--e),background-color .2s var(--e),
                            border-color .2s var(--e)}
.uc-ico svg{width:20px;height:20px;flex:none}
.uc-lang-btn{width:auto;min-width:44px;padding:0 12px}
.uc-ico:hover{color:var(--mal-5);border-color:var(--mal-5);background:rgba(79,192,141,.08)}
.uc-ico:focus-visible{outline:2px solid var(--mal-6);outline-offset:2px}
.uc-lang{position:relative}
.uc-lang-cur{line-height:1}
.uc-lang-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;
  min-width:168px;margin:0;padding:6px;list-style:none;
  background:var(--panel2);border:1px solid var(--line2);border-radius:4px;
  box-shadow:0 24px 48px -18px rgba(0,0,0,.85)}
/* [hidden] is a UA rule at specificity (0,0,1) and loses to the author
   `display` above — it has to be forced or the menu sits open. */
.uc-lang-menu[hidden]{display:none!important}
.uc-lang-menu button{display:flex;align-items:center;gap:12px;width:100%;
  min-height:40px;padding:0 10px;border:0;border-radius:3px;background:transparent;
  color:var(--ink-2);font-family:var(--bd);font-size:14px;text-align:left;cursor:pointer}
.uc-lang-menu button span{font-family:var(--os);font-size:11px;letter-spacing:.1em;
  color:var(--ink-3);min-width:22px}
.uc-lang-menu button:hover{background:rgba(79,192,141,.1);color:var(--ink)}
.uc-lang-menu button[aria-selected="true"]{color:var(--mal-5)}
.uc-lang-menu button[aria-selected="true"] span{color:var(--mal-5)}
@media(max-width:900px){
  /* the burger appears here; keep the utilities beside it, not stacked,
     and at the burger's own 44px so the three read as one set.
     `.uc-hd-in` carries its own 20px flex gap, which lands BETWEEN the
     utils group and the burger — so the burger sat 28px away (20 gap +
     8 margin) while the two icons were 8px apart. Match the header gap
     to the utils gap here and drop the margin, so all three spaces are
     the same 8px. The 20px is left alone on desktop, where it separates
     nav / Book Now / utils. */
  .uc-hd-in{gap:8px}
  .uc-utils{margin:0 0 0 auto;gap:8px}
}

/* ── feature strip ──────────────────────────────────────────────────
   Two problems, one cause. The cells were centre-aligned with 22px of
   padding and no gap, so (a) neighbouring blocks sat ~44px apart with a
   hairline squeezed between them, and (b) nothing in the strip landed on
   the page's left axis — every other section starts its eyebrow and
   heading at the wrap's padding edge, while the strip floated its text
   in the middle of each column.

   Now: left-aligned like the rest of the page, and a real gutter with
   the divider centred inside it rather than hugging the next cell. */
.fstrip{--fgap:clamp(28px,3.6vw,56px);column-gap:var(--fgap);row-gap:34px}
.fstrip .fc{position:relative;text-align:left;padding:0;border:0}
.fstrip .fc::before{content:'';position:absolute;top:0;bottom:0;
  left:calc(var(--fgap) / -2);width:1px;background:var(--line)}
.fstrip .fc:first-child::before{content:none}
.fstrip .fc .ic{justify-content:flex-start;margin-bottom:18px}
.fstrip .fc h4{margin-bottom:10px}
.fstrip .fc p{line-height:1.6}
/* The strip drops to 2 columns at 900px, not 560 — so the divider rule
   has to change here, not in the phone block. On two columns the vertical
   rule belongs only between the pair; on cells 3 and 4 it would fall in
   the gutter to the LEFT of a new row, outside the grid. Row 2 takes a
   horizontal rule above it instead. */
@media (max-width:900px){
  .fstrip{row-gap:0}
  .fstrip .fc:nth-child(odd)::before{content:none}
  .fstrip .fc:nth-child(even)::before{content:''}
  .fstrip .fc:nth-child(n+3){border-top:1px solid var(--line);
    margin-top:26px;padding-top:26px}
}

/* ── bento: services & pricing ──────────────────────────────────────
   Equal tiles in a row give every service the same weight, which is not
   true — the haircut is the business and the €23 combo is the one to
   sell. Bento says so with geometry instead of a label: one tile carries
   four cells, the rest carry one.

   DOM order is fixed (Haircuts, Fades, Beard, Shaves, Styling / Haircut,
   Combo, Shave, Add-ons), so the wide tiles are placed explicitly rather
   than left to auto-flow, which would otherwise leave holes. */

/* SERVICES — 4 cols x 2 rows = 8 cells for 5 tiles; Haircuts takes 4. */
.svc-grid{grid-auto-flow:dense}
@media (min-width:1081px){
  .svc-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(210px,1fr)}
  .svc:first-child{grid-column:span 2;grid-row:span 2}
}
/* 3 cols: the feature still spans 2x2, the other four fill around it. */
@media (min-width:901px) and (max-width:1080px){
  .svc-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(200px,1fr)}
  .svc:first-child{grid-column:span 2;grid-row:span 2}
}
/* The feature tile earns bigger type — a 2x2 card set at the 1x1 size
   reads as an empty box, not as emphasis. */
@media (min-width:901px){
  .svc:first-child h4{font-size:24px}
  .svc:first-child p{font-size:14.5px;max-width:34ch}
  .svc:first-child .ic svg{width:42px;height:42px}
}

/* PRICING — the combo is the product; give it the four centre cells.
   [ combo 2x2 ][ haircut ][ shave ]
   [          ][ add-ons 2x1      ]                                    */
@media (min-width:901px){
  .price-wrap{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(0,auto);gap:16px}
  /* nth-child, not nth-of-type: every child here is a div, so of-type
     would count the feature card too and shift the placements by one. */
  .price-wrap>:nth-child(2){grid-column:1 / span 2;grid-row:1 / span 2;
    display:flex;flex-direction:column;justify-content:center}
  .price-wrap>:nth-child(1){grid-column:3;grid-row:1}
  .price-wrap>:nth-child(3){grid-column:4;grid-row:1}
  .price-wrap>:nth-child(4){grid-column:3 / span 2;grid-row:2}
  .pcard.feat .pp{font-size:64px}
  .pcard.feat .pt{font-size:17px}
  .pcard.feat .pd{font-size:14.5px;max-width:30ch;margin:0 auto}
  /* A 554x480 tile holding ~120px of content reads as a hole, so the
     hero's malachite banding comes down here to fill it. NOT overflow:
     hidden to clip it — the "Most Popular" badge sits at top:-12px,
     outside the card, and would be cut in half. border-radius:inherit
     on the pseudo does the containment instead. */
}

/* The feature tile's malachite banding, at every width — it is what marks
   the combo as the thing to buy, and mobile needs that signal most.
   Raising the children with `.pcard.feat>*{position:relative}` also hits
   `.pop`, which is position:absolute at top:-12px — it dropped into the
   flex flow and landed mid-card. Isolate the card and sink the pseudo to
   z-index:-1 instead, so nothing about the children changes. */
.pcard.feat{isolation:isolate}
.pcard.feat::before{content:'';position:absolute;inset:0;pointer-events:none;
  z-index:-1;border-radius:inherit;
  background:repeating-radial-gradient(circle at 50% 50%,
    transparent 0 13px, rgba(79,192,141,.09) 13px 14px);
  -webkit-mask-image:radial-gradient(72% 72% at 50% 50%,#000,transparent 78%);
          mask-image:radial-gradient(72% 72% at 50% 50%,#000,transparent 78%)}

/* ── mobile card grids ──────────────────────────────────────────────
   Founder spec: on phones the card blocks pair up instead of stacking —
   feature strip 2x2, about list 2x2, services 2x3 (five cards, so the
   last row carries one), why-choose 2x2, pricing 2x2 (three plans plus
   the add-ons box).  The base sheet collapsed all of these to a single
   column below 560/380px, which made the homepage roughly twice as long
   as it needed to be.

   Two-up on a 375px phone leaves ~160px per column, so type in these
   blocks steps down and the icon moves above the text rather than beside
   it — at that width a side-by-side icon would leave the paragraph about
   14 characters wide. */
@media (max-width:560px){
  /* Pricing keeps its bento on phones too — a flat 2x2 of equal boxes
     sat oddly next to the services block, which does lead with a feature
     tile. Same shape as services: feature full width, pair beneath,
     wide tile to close. Placement is explicit because DOM order is
     Haircut, Combo, Shave, Add-ons and the combo has to come first. */
  .price-wrap{grid-template-columns:1fr 1fr;gap:12px}
  .price-wrap>:nth-child(2){grid-column:1 / -1;grid-row:1}
  .price-wrap>:nth-child(1){grid-column:1;grid-row:2}
  .price-wrap>:nth-child(3){grid-column:2;grid-row:2}
  .price-wrap>:nth-child(4){grid-column:1 / -1;grid-row:3}
  .price-wrap>:nth-child(2) .pp{font-size:48px}
  .price-wrap>:nth-child(2) .pt{font-size:14px}
  .price-wrap>:nth-child(2) .pd{font-size:13px;max-width:30ch;margin:0 auto}
  .price-wrap>:nth-child(2){padding:28px 18px}
  .why-grid{grid-template-columns:1fr 1fr;gap:22px 14px}
  .fstrip{grid-template-columns:1fr 1fr}
  /* Five tiles in two columns would leave a lone orphan on the last row.
     Carrying the bento feature down to mobile solves it and hits the
     specified 2x3 exactly: Haircuts full width, then 2x2 beneath. */
  .svc-grid{grid-template-columns:1fr 1fr;gap:12px}
  .svc:first-child{grid-column:1 / -1;min-height:200px}

  /* about list: a stack of icon-beside-text rows becomes a 2x2 of
     icon-above-text cells.  The base sheet clears the top border on the
     first child only; in a grid the whole first ROW needs it cleared. */
  .about-list{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
  .about-list .ab{flex-direction:column;gap:12px;padding:20px 0}
  .about-list .ab:nth-child(-n+2){border-top:none;padding-top:0}
  .about-list .ab .ic svg{width:28px;height:28px}
  .about-list .ab h4{font-size:12.5px;letter-spacing:.08em;margin-bottom:6px}
  .about-list .ab p{font-size:12.5px;line-height:1.55}

  .why{padding:6px 2px}
  .why .ic{margin-bottom:12px}
  .why .ic svg{width:32px;height:32px}
  .why h4{font-size:12.5px;letter-spacing:.07em;margin-bottom:7px}
  .why p{font-size:12.5px;line-height:1.55}

  .fstrip{--fgap:20px}
  .fstrip .fc .ic{margin-bottom:14px}
  .fstrip .fc .ic svg{width:30px;height:30px}
  .fstrip .fc h4{font-size:12.5px;letter-spacing:.07em;margin-bottom:8px}
  .fstrip .fc p{font-size:12.5px;line-height:1.6}

  /* the tool photo is position:absolute, so min-height is the only thing
     giving it room — at 212px the longest caption landed 1px clear of the
     padding, which any font fallback would have pushed through. */
  .svc{min-height:240px;padding:18px 14px}
  .svc .ic svg{width:28px;height:28px}
  .svc h4{font-size:14px;letter-spacing:.07em}
  .svc p{font-size:12.5px}

  .pcard{padding:24px 12px}
  .pcard .pt{font-size:12.5px;letter-spacing:.1em;margin-bottom:12px}
  .pcard .pp{font-size:34px;margin-bottom:10px}
  .pcard .pd{font-size:12px;line-height:1.5}
  .addons{padding:20px 14px}
  .addons .at{font-size:11.5px;letter-spacing:.12em;margin-bottom:12px}
  /* "Design / Line Up" will not fit beside its price at this width, so let
     the label wrap and keep the price pinned right on the first line. */
  .addons .arow{align-items:flex-start;gap:8px;padding:9px 0;font-size:12px;line-height:1.4}
  .addons .arow b{flex:0 0 auto}
}

/* The base sheet drops these to one column on the narrowest phones; the
   spec is 2-up all the way down, so hold the grids and let the type shrink. */
@media (max-width:380px){
  .fstrip{grid-template-columns:1fr 1fr}
  .why-grid,.svc-grid{grid-template-columns:1fr 1fr}
  .wrap{padding:0 14px}
  .why-grid{gap:20px 10px}
  .svc-grid,.price-wrap{gap:10px}
  .about-list{gap:0 12px}
  .about-list .ab p,.why p,.fstrip .fc p,.svc p{font-size:12px}
  .pcard{padding:20px 9px}
  .pcard .pp{font-size:30px}
}

/* motion is a courtesy, not a requirement (DESIGN.md §6) */
@media(prefers-reduced-motion:reduce){
  .hero-bands{animation:none;stroke-dashoffset:0}
  .btn,.btn svg{transition-duration:.01ms}
}

/* Retired directions — the markup is gone, but stale rules in the base
   sheet above would still lay out an empty grid cell. */
.hero-ground,.hero-chair,.hero-meander,.hero-facets{display:none}