/* Kept refinement layer: contemporary, editorial, quiet. Loaded after site.css and motion.css.
   Smaller radii, lighter type, muted palette, no clip-art. */

/* ---------- button colors per side: the hot accent is the call to action ---------- */
:root { --cta: #FF4A1C; --on-cta: #0E0E0E; --cta-hover: #FF6A43; --hbtn-bg: #FF4A1C; --hbtn-fg: #0E0E0E; }
:root[data-side="brand"] { --hbtn-bg: #FF4A1C; --hbtn-fg: #0E0E0E; }
:root[data-side="barber"] { --cta: #2D46F5; --on-cta: #fff; --cta-hover: #4A60FF; --hbtn-bg: #5B70FF; --hbtn-fg: #fff; }
:root[data-side="beauty"] { --cta: #6A3DF0; --on-cta: #fff; --cta-hover: #8460FF; --hero: #1A0B2E; --hbtn-bg: #9B7BFF; --hbtn-fg: #12081F; }
:root[data-side="jr"] { --cta: #C6F135; --on-cta: #0E1A08; --cta-hover: #D6FF55; --hero: #0E1A08; --hbtn-bg: #C6F135; --hbtn-fg: #0E1A08; }
:root[data-side="household"] { --cta: #FF9F1C; --on-cta: #1E1409; --cta-hover: #FFB347; --hbtn-bg: #FF9F1C; --hbtn-fg: #1E1409; }

body { font-size: 16.5px; font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { letter-spacing: -.03em; font-weight: 500; }
h2 { font-weight: 500; letter-spacing: -.035em; }
h3 { font-weight: 600; letter-spacing: -.02em; font-size: 20px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; }
.lede { font-weight: 400; }

/* ---------- controls ---------- */
.btn { border-radius: var(--radius-sm); border-width: 1px; font-weight: 600; font-size: 15px; padding: 12px 22px; letter-spacing: -.005em; }
.btn:hover { transform: none; }
.btn:active { transform: scale(.985); }
.btn.sm { padding: 8px 14px; font-size: 14px; }
.seg { border-radius: calc(var(--radius-sm) + 4px); padding: 3px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.seg button { border-radius: calc(var(--radius-sm) + 1px); font-weight: 600; font-size: 14px; }
.seg button i { width: 8px; height: 8px; }
.chips span { border-radius: 4px; font-weight: 500; font-size: 13px; padding: 5px 11px; background: transparent; letter-spacing: .01em; }
.skip { border-radius: 6px; }
:focus-visible { outline-width: 2px; }

/* ---------- remove cartoon decoration ---------- */
.deco, .pole, .hero-pole, .hero .prop, .pros .pro-prop { display: none !important; }

/* ---------- hero: dark ink, architecture instead of props ---------- */
.hero { background: radial-gradient(120% 90% at 78% 18%, color-mix(in srgb, var(--accent) 22%, var(--hero)) 0%, var(--hero) 58%); }
.hero-mark.ghost { opacity: .05; }
.hero-mark.solid { opacity: calc(var(--wipe, 0) * .1); }
.hero h1 { font-weight: 500; letter-spacing: -.05em; line-height: .98; font-size: clamp(46px, 8.4vw, 116px); max-width: 12ch; }
.hero-copy p.sub { color: color-mix(in srgb, var(--hero-ink) 78%, transparent); font-weight: 400; }
.hero-copy .eyebrow { opacity: .7; }
.hero .arch { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 999px 999px 0 0;
  border: 1px solid color-mix(in srgb, var(--hero-ink) 20%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent) 4%, transparent) 70%);
  will-change: transform; transform: translate3d(0, calc(var(--p, 0) * var(--d) * var(--parallax) * -380px), 0); }
.hero .arch.a2 { background: linear-gradient(180deg, color-mix(in srgb, var(--hero-ink) 14%, transparent), transparent 75%); }
.hero .arch.a3 { background: none; }
.hero .hl { position: absolute; left: 0; right: 0; top: var(--y); height: 1px; background: color-mix(in srgb, var(--hero-ink) 12%, transparent); transform: translate3d(0, calc(var(--p, 0) * var(--d) * var(--parallax) * -160px), 0); }
.hero .btn.ghost { border-color: color-mix(in srgb, var(--hero-ink) 40%, transparent); }
.hero-after p { font-weight: 500; letter-spacing: -.035em; }
.scroll-hint { font-weight: 600; letter-spacing: .2em; font-size: 11px; }
.scroll-hint i { width: 1px; }

/* ---------- picker / header ---------- */
.site-head { border-bottom-color: var(--line); }
.picker { border-bottom: 1px solid var(--line); }
.glow-sw { border-radius: 6px; }

/* ---------- door art: line drawing ---------- */
.art-house .wall { fill: none; stroke: var(--fg); stroke-width: 1.5; }
.art-house .roof { fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-linejoin: miter; }
.art-house .dr { fill: var(--accent); }
.art-house .win { fill: none; stroke: var(--fg); stroke-width: 1.25; }
.route-bg { stroke-width: 1.5; stroke-dasharray: 3 8; }
.route-fg { stroke-width: 2.5; }
.car-body { fill: var(--accent); stroke: var(--bg); stroke-width: 3; }
.car-halo { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.door-bubble rect { fill: var(--fg); } .door-bubble text { fill: var(--bg); font: 600 15px var(--body); letter-spacing: .01em; }
.door-steps h3 { font-weight: 500; }

/* ---------- cards, pay card, final ---------- */
.card, .cfg, .pay-card, .wl, .stage { border-radius: var(--radius); }
.pay-card { background: var(--hero); border: 1px solid color-mix(in srgb, var(--hero-ink) 14%, transparent); color: var(--hero-ink); }
.pay-card .big { font-weight: 500; color: color-mix(in srgb, var(--accent) 70%, #fff); letter-spacing: -.04em; }
.pay-card dt { font-weight: 600; color: color-mix(in srgb, var(--accent) 70%, #fff); }
.pay-card .eyebrow { color: color-mix(in srgb, var(--accent) 70%, #fff) !important; }
.final { background: radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--accent) 24%, var(--hero)), var(--hero) 70%); }
.final .mark { opacity: .05; }
.final h2 { font-weight: 500; letter-spacing: -.05em; }
.pros-roles span, .city-list li, .kinds button { border-radius: 4px; }
.look-grid button, .look-grid .chip { border-radius: var(--radius-sm); }
.site-foot { border-top: 1px solid var(--line); }

/* ---------- motion layer: quieter ---------- */
:root.mo .fx-holder { display: none !important; }
:root.mo .mprog { height: 2px; }
.tk-row { font-weight: 500; letter-spacing: -.035em; font-size: clamp(34px, 6vw, 80px); }
.tk-row:nth-child(2) span { -webkit-text-stroke: 1px var(--tk-ink); }
.tk-row b { font-weight: 500; }
.chapters a span { border-radius: 4px; font-weight: 500; }

/* ---------- side panels: editorial color fields with arches instead of clip-art ---------- */
.panel[data-s="barber"] { --pbg: #14232B; --pfx: #8DBAD0; --pa: #EAF1F4; --pt: #3F6B83; }
.panel[data-s="beauty"] { --pbg: #3E232D; --pfx: #E7B7C3; --pa: #F8ECEC; --pt: #A6566E; }
.panel[data-s="jr"] { --pbg: #22392B; --pfx: #A9D1B5; --pa: #EEF4EC; --pt: #5C8A6B; }
.panel[data-s="household"] { --pbg: #2B2119; --pfx: #E0B574; --pa: #F4EBDD; --pt: #B67A3A; }
.panel { background: radial-gradient(110% 90% at 85% 20%, color-mix(in srgb, var(--pt) 38%, var(--pbg)), var(--pbg) 62%); }
.panel h3 { font-weight: 500; letter-spacing: -.045em; line-height: .98; }
.panel .who { font-weight: 600; letter-spacing: .18em; font-size: 12px; }
.panel .from { font-weight: 500; letter-spacing: -.02em; }
.panel .from b { font-weight: 600; }
.panel ul.svc li { border-bottom: 1px solid rgba(255, 255, 255, .16); font-weight: 500; }
.panel .btn { background: var(--pa); color: var(--pbg); border-color: var(--pa); }
.panel-bg, .panel[data-s] .panel-bg { background: none !important; opacity: 1; background-image: linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) !important; background-size: 25% 100% !important; }
.panel .art svg { display: none; }
.panel .art::before, .panel .art::after { content: ""; position: absolute; border-radius: 999px 999px 0 0; border: 1px solid rgba(255, 255, 255, .22); will-change: transform; }
.panel .art::before { left: 10%; top: 8%; width: 46%; height: 78%; background: linear-gradient(180deg, color-mix(in srgb, var(--pt) 55%, transparent), color-mix(in srgb, var(--pt) 6%, transparent) 80%); transform: translate3d(0, calc((1 - var(--t, 0)) * 220px), 0); }
.panel .art::after { left: 50%; top: 30%; width: 38%; height: 62%; background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 80%); transform: translate3d(0, calc((1 - var(--t, 0)) * 340px), 0); }
:root[data-motion="off"] .panel .art::before, :root[data-motion="off"] .panel .art::after { transform: none; }
.side-dots i, .door-dots i { border-radius: 2px; }

/* =====================================================================
   MAGAZINE LAYER: Didone serif display, italic accents, numbered sections,
   hairline rules, square corners, tracked small caps.
   ===================================================================== */
:root { --serif: var(--display); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; font-optical-sizing: auto; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; letter-spacing: -.03em; color: var(--accent-ink); }
.hero h1 em, .final h2 em { color: color-mix(in srgb, var(--accent) 60%, #fff); }
h2 { font-size: clamp(36px, 5.6vw, 74px); line-height: 1; letter-spacing: -.03em; font-weight: 400; }
h3 { font-size: 24px; font-weight: 500; letter-spacing: -.01em; }
body { counter-reset: sec; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 600 11px/1 var(--body); letter-spacing: .24em; counter-increment: sec; }
.eyebrow::before { content: "Nº " counter(sec, decimal-leading-zero); letter-spacing: .12em; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 14px; text-transform: none; }
.eyebrow::after { content: ""; width: 38px; height: 1px; background: currentColor; opacity: .5; }
.lede { font-size: clamp(17px, 1.8vw, 19px); line-height: 1.6; }

/* issue bar above the header, like the strip on a magazine's first page */
.issue-bar { display: flex; justify-content: space-between; gap: 16px; padding: 7px max(16px, calc((100vw - 1180px) / 2)); background: var(--fg); color: var(--bg); font: 500 10.5px/1 var(--body); letter-spacing: .24em; text-transform: uppercase; }
.issue-bar span:nth-child(2) { opacity: .7; }
@media (max-width: 760px) { .issue-bar span:nth-child(3) { display: none; } }

/* header + controls: square, tracked */
.site-head { border-bottom: 1px solid var(--fg); background: var(--bg); backdrop-filter: none; }
.nav a:not(.btn) { font: 500 12px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; }
.btn { border-radius: 0; text-transform: uppercase; letter-spacing: .16em; font-size: 11.5px; font-weight: 600; padding: 15px 26px; border-width: 1px; }
.btn.sm { padding: 11px 16px; font-size: 11px; }
.seg, .seg button, .glow-sw, .chips span, .look-grid button, .kinds button, .pros-roles span, .city-list li, .card, .cfg, .pay-card, .wl, .stage, .chip, input, select, textarea { border-radius: 0 !important; }
.seg { background: transparent; border: 1px solid var(--fg); padding: 0; gap: 0; }
.seg button { font: 500 11.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; padding: 12px 16px; }
.seg button[aria-checked="true"], .seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.chips span { font: 500 11px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; padding: 8px 12px; }
.glow-sw { font: 500 11.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.picker { border-bottom: 1px solid var(--fg); }
.pk-label { font: 600 10.5px/1 var(--body); letter-spacing: .22em; }

/* hero: cover */
.hero h1 { font-weight: 400; letter-spacing: -.045em; line-height: .92; font-size: clamp(54px, 9.6vw, 142px); max-width: 9.5ch; }
.hero h1 em { display: block; }
.hero-copy .eyebrow { color: var(--hero-ink); opacity: .8; }
.hero-copy p.sub { font-size: clamp(16px, 1.7vw, 19px); max-width: 40ch; }
.hero .arch { border-radius: 0; border-color: color-mix(in srgb, var(--hero-ink) 30%, transparent); }
.hero .arch.a1 { border-radius: 999px 999px 0 0; }
.hero .arch .plate { position: absolute; left: 12px; bottom: 12px; font: 500 9.5px/1.5 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--hero-ink); }
.hero .arch .plate i { font: italic 400 13px/1.3 var(--serif); letter-spacing: 0; text-transform: none; opacity: .85; }
.hero .hl { background: color-mix(in srgb, var(--hero-ink) 18%, transparent); }
.hero-after p { font-family: var(--serif); font-weight: 400; font-style: italic; }
.hero-mark.ghost { opacity: .035; }

/* ticker: serif marquee */
.ticker { border-block: 1px solid var(--fg); }
.tk-row { font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: -.03em; font-size: clamp(40px, 7vw, 104px); }
.tk-row:nth-child(2) span { font-style: italic; -webkit-text-stroke: 0; color: color-mix(in srgb, var(--tk-ink) 72%, transparent); }
.tk-row b { font-family: var(--body); font-size: .16em; letter-spacing: .3em; font-weight: 500; opacity: .6; }

/* door steps, panels, cards: rules not boxes */
.door-steps .n, .door-steps span.n { font: italic 400 15px var(--serif); letter-spacing: 0; text-transform: none; color: var(--accent-ink); }
.door-steps h3 { font-family: var(--serif); font-size: clamp(26px, 3vw, 36px); font-weight: 400; letter-spacing: -.02em; }
.panel h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.05em; font-size: clamp(48px, 8.4vw, 120px); line-height: .92; }
.panel .who { font: 600 11px/1 var(--body); letter-spacing: .26em; }
.panel .from { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 24px; }
.panel .from b { font-style: normal; font-weight: 400; }
.panel ul.svc li { font-family: var(--body); font-size: 14px; letter-spacing: .02em; }
.panel .art::before, .panel .art::after { border-radius: 0; }
.panel .art::before { border-radius: 999px 999px 0 0; }
.pay-card .big { font-family: var(--serif); font-weight: 400; }
.final h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 13vw, 190px); letter-spacing: -.055em; }
.final h2 em { font-style: italic; }
.site-foot h4 { font: 600 11px/1 var(--body); letter-spacing: .24em; text-transform: uppercase; }
.site-foot .foot-note { font-size: 12px; }
.card, .cfg .card { box-shadow: none; border: 1px solid var(--fg); background: transparent; }
.band { background: var(--surface); border-block: 1px solid var(--fg); }
.band .card { background: var(--bg); }
.look-grid button, .stage { border: 1px solid var(--fg); }

/* ---------- fashion plates: fine-line croquis inside frames ---------- */
.hero .arch .croq { position: absolute; inset: 6% 4% 14%; width: 92%; height: 80%; color: color-mix(in srgb, var(--hero-ink) 88%, transparent); overflow: visible; }
.hero .arch.a2 .croq { inset: 10% 14% 16%; width: 72%; color: color-mix(in srgb, var(--accent) 60%, #fff); }
.croq .dot { fill: currentColor; stroke: none; }
.hero h1 em { white-space: nowrap; }
@media (max-width: 560px) { .hero h1 em { white-space: normal; } }
.panel .art { aspect-ratio: 3/4; width: min(100%, 440px); }
.panel .art .croq { display: block; position: absolute; inset: 8% 8% 6%; width: 84%; height: 86%; color: var(--pa); opacity: .92; overflow: visible; transform: translate3d(0, calc((1 - var(--t, 0)) * 120px), 0); }
.panel .art .croq .dot { fill: var(--pfx); }
.panel .art::before { left: 6%; top: 2%; width: 88%; height: 96%; border-radius: 999px 999px 0 0; }
.panel .art::after { display: none; }
:root[data-motion="off"] .panel .art .croq { transform: none; }

/* ---------- manifesto page ---------- */
.manifesto { position: relative; padding-block: clamp(90px, 14vw, 200px); background: var(--bg); border-bottom: 1px solid var(--fg); z-index: 1; }
.manifesto .wrap { display: grid; gap: 34px; }
.manifesto .man-t { font-size: clamp(40px, 7.6vw, 120px); line-height: .98; letter-spacing: -.045em; max-width: 14ch; transform: translate3d(0, calc((var(--p, .5) - .5) * -40px * var(--parallax)), 0); }
.man-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); max-width: 880px; margin-left: auto; padding-top: 22px; border-top: 1px solid var(--fg); }
.man-cols p { font-size: 16px; line-height: 1.7; color: var(--muted); }
.man-cols p:first-child::first-letter { font: 400 4.4em/.8 var(--serif); float: left; padding: 6px 10px 0 0; color: var(--fg); }
@media (max-width: 700px) { .man-cols { grid-template-columns: 1fr; } }


/* =====================  HOT MAGAZINE: color-blocked plates, black line art  ===================== */
.hero { background: var(--hero); }
.hero .arch.a1 { background: var(--accent); border-color: var(--accent); }
.hero .arch.a1 .croq { color: #0E0E0E; }
.hero .arch.a1 .plate { color: #0E0E0E; }
.hero .arch.a2 { background: var(--hero-ink); border-color: var(--hero-ink); }
.hero .arch.a2 .croq { color: #0E0E0E; }
.hero .arch.a2 .plate { color: #0E0E0E; }
.hero .arch.a3 { border-color: color-mix(in srgb, var(--hero-ink) 40%, transparent); }
.hero h1 em, .final h2 em { color: var(--accent); }
.final { background: var(--hero); }
.final .btn { background: var(--hbtn-bg); color: var(--hbtn-fg); border-color: var(--hbtn-bg); }
.hero-mark.ghost { opacity: .06; }
.panel { background: var(--hero-bg, var(--pbg)); }
.panel[data-s="barber"] { --pbg: #0B0F2E; --pfx: #8D9CFF; --pa: #F1F3FF; --pt: #2D46F5; --pink-on: #fff; }
.panel[data-s="beauty"] { --pbg: #1A0B2E; --pfx: #B7A0FF; --pa: #F4F0FF; --pt: #7B4DFF; }
.panel[data-s="jr"] { --pbg: #0E1A08; --pfx: #C6F135; --pa: #F3FBE0; --pt: #C6F135; }
.panel[data-s="household"] { --pbg: #1E1409; --pfx: #FF9F1C; --pa: #FBF1DE; --pt: #FF9F1C; }
.panel { background: var(--pbg); }
.panel .art::before { background: var(--pt); border-color: var(--pt); }
.panel .art .croq { color: #0E0E0E; opacity: 1; }
.panel[data-s="barber"] .art .croq, .panel[data-s="beauty"] .art .croq { color: #fff; }
.panel .art .croq .dot { fill: currentColor; }
.panel .who { color: var(--pfx); }
.panel .btn { background: var(--pt); border-color: var(--pt); color: #0E0E0E; }
.panel[data-s="barber"] .btn, .panel[data-s="beauty"] .btn { color: #fff; }
.panel ul.svc li b { color: var(--pfx); }
.pay-card { background: #0E0E0E; }
.pay-card .big, .pay-card dt, .pay-card .eyebrow { color: var(--accent) !important; }
.eyebrow::after { opacity: 1; }
.seg button[aria-checked="true"], .seg button[aria-pressed="true"] { background: var(--cta); color: var(--on-cta); }
.band { background: var(--surface); }
.split .w { margin-right: .14em; }
:root.mo .split .w:last-child { margin-right: 0; }

/* =====================================================================
   NUMÉRO-INSPIRED PASS: white paper, black ink, big masthead, slim caps menu,
   "Hot Now!" card strip, grotesque headlines with Didone italic accents.
   ===================================================================== */
:root { --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif; --hot: #D92B12; }
h1, h2, h3, h4, .panel h3, .door-steps h3, .final h2, .tk-row, .pay-card .big, .man-t, .hero h1 { font-family: var(--display); font-weight: 500; letter-spacing: -.045em; }
h1 em, h2 em, h3 em, .hero h1 em, .final h2 em, .man-t em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.03em; color: var(--accent-ink); }
h2 { font-size: clamp(34px, 5vw, 66px); line-height: .98; }
.hero h1 { font-size: clamp(54px, 9.2vw, 136px); line-height: .9; }

/* masthead + slim sticky menu */
.masthead { background: var(--bg); color: var(--fg); position: relative; z-index: 61; }
.mh-util { display: flex; justify-content: space-between; align-items: center; padding: 9px max(16px, calc((100vw - 1180px) / 2)); font: 500 10.5px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.mh-r { display: flex; gap: 22px; } .mh-r a { text-decoration: none; } .mh-r a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mh-logo { display: block; text-align: center; text-decoration: none; color: var(--fg); font-family: var(--serif); font-weight: 600; font-size: clamp(96px, 23vw, 330px); line-height: .8; letter-spacing: -.05em; text-transform: uppercase; padding: clamp(18px, 3vw, 40px) 0 clamp(8px, 1.6vw, 20px); }
.mh-sub { text-align: center; font: 500 10.5px/1 var(--body); letter-spacing: .32em; text-transform: uppercase; padding: 0 16px 18px; }
.site-head { background: var(--bg); border-top: 1px solid var(--fg); border-bottom: 1px solid var(--fg); }
.brand .wm { font-family: var(--serif); font-weight: 600; font-size: 28px; letter-spacing: -.04em; text-transform: uppercase; line-height: 1; }
.nav a:not(.btn) { font: 500 11px/1 var(--body); letter-spacing: .2em; }
.nav a:not(.btn):hover { background: none; text-decoration: underline; text-underline-offset: 6px; }
.nav a[aria-current="page"] { color: var(--hot); }
.site-head .motion-sw { border-radius: 0; }

/* buttons: black, square */
:root, :root[data-side] { --cta: #000; --on-cta: #fff; --cta-hover: #2a2a2a; --hbtn-bg: #000; --hbtn-fg: #fff; }
.final, .pay-card { --hbtn-bg: #fff; --hbtn-fg: #000; }
.final .btn.ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.btn:hover { background: var(--cta-hover); border-color: var(--cta-hover); }
.hero .btn:hover { background: #2a2a2a; border-color: #2a2a2a; }

/* hero: white cover */
.hero { --hero: var(--bg); --hero-ink: var(--fg); background: var(--bg); color: var(--fg); }
.hero-mark.ghost { opacity: .045; }
.hero h1 em { color: var(--accent-ink); }
.hero .btn.ghost { color: var(--fg); border-color: var(--fg); background: transparent; }
.hero .btn.ghost:hover { background: var(--fg); color: var(--bg); }
.hero .arch { border-color: color-mix(in srgb, var(--fg) 25%, transparent); }
.hero .arch.a1 { background: var(--accent); border-color: var(--accent); }
.hero .arch.a1 .croq, .hero .arch.a1 .plate { color: var(--on-accent); }
.hero .arch.a2 { background: var(--fg); border-color: var(--fg); }
.hero .arch.a2 .croq, .hero .arch.a2 .plate { color: var(--bg); }
.hero .hl { background: color-mix(in srgb, var(--fg) 14%, transparent); }
.hero .chips span { border-color: color-mix(in srgb, var(--fg) 40%, transparent); color: var(--fg); }
.scroll-hint { color: var(--fg); }

/* hot now strip */
.hotnow { position: relative; z-index: 1; background: var(--bg); padding-block: clamp(56px, 8vw, 110px); }
.hn-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border-bottom: 1px solid var(--fg); padding-bottom: 14px; margin-bottom: clamp(20px, 3vw, 34px); }
.hn-head h2 { font-size: clamp(40px, 7vw, 104px); line-height: .85; letter-spacing: -.05em; }
.hot { color: var(--hot); }
.seeall { font: 600 11px/1 var(--body); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--fg); border-bottom: 1px solid var(--fg); padding-bottom: 4px; white-space: nowrap; }
.hn-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 28px); }
@media (max-width: 980px) { .hn-grid { grid-template-columns: repeat(2, 1fr); } }
.hn-card { display: block; text-decoration: none; color: var(--fg); }
.hn-card[data-s="barber"] { --pt: #2D46F5; --pi: #fff; } .hn-card[data-s="beauty"] { --pt: #7B4DFF; --pi: #fff; }
.hn-card[data-s="jr"] { --pt: #C6F135; --pi: #0E1A08; } .hn-card[data-s="household"] { --pt: #FF9F1C; --pi: #1E1409; }
.hn-img { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--pt); }
.hn-img .croq { position: absolute; inset: 12% 6% 0; width: 88%; height: 88%; color: var(--pi); transition: transform .9s var(--ease); overflow: visible; }
.hn-img .croq .dot { fill: currentColor; stroke: none; }
.hn-card:hover .croq { transform: translateY(-8px) scale(1.04); }
.hn-img .no { position: absolute; left: 12px; top: 10px; font: italic 400 16px var(--serif); color: var(--pi); }
.hn-meta { display: flex; gap: 12px; align-items: center; margin: 14px 0 8px; font: 500 10.5px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; }
.hn-meta b { color: var(--hot); font-weight: 600; }
.hn-card h3 { font-family: var(--display); font-size: clamp(20px, 2.1vw, 28px); font-weight: 500; letter-spacing: -.035em; line-height: 1.04; }
.hn-card:hover h3 { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* sections */
.eyebrow { color: var(--fg); }
.eyebrow::before { color: var(--hot); }
.card, .cfg .card { border: 0 !important; border-top: 1px solid var(--fg) !important; background: transparent; }
.band .card { background: transparent; }
.look-grid button, .stage { border: 1px solid var(--line); }
.tk-row:nth-child(2) span { font-family: var(--serif); }
.manifesto { border-bottom: 1px solid var(--fg); }
.site-foot { background: #000; color: #f1f1ef; border-top: 0; }
.site-foot a { color: #f1f1ef; } .site-foot .foot-note, .site-foot p { color: #bdbdb8; }
.foot-wm { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(64px, 9vw, 110px); letter-spacing: -.05em; line-height: .85; text-transform: uppercase; margin-bottom: 14px; color: #fff; }
.site-foot h4 { color: #fff; }
@media (max-width: 640px) { .mh-util span:first-child { display: none; } .mh-util { justify-content: flex-end; } }

/* =====================================================================
   QUIET-LUXURY PASS (Gucci / Cucinelli cues): lighter weights, more air,
   underlined text links, greige neutrals, centered caps menu.
   ===================================================================== */
:root { --surface: #F4F3F0; --line: #E4E2DD; --muted: #6A6A66; }
h1, h2, h3, h4, .panel h3, .door-steps h3, .final h2, .tk-row, .pay-card .big, .man-t, .hero h1, .hn-card h3, .hn-head h2 { font-weight: 400; letter-spacing: -.045em; }
.hero h1 { letter-spacing: -.055em; }
body { font-weight: 400; }
.lede, .hero-copy p.sub, .man-cols p { font-weight: 400; color: var(--muted); }
.hero-copy p.sub { color: color-mix(in srgb, var(--fg) 70%, transparent); }
.s { padding-block: clamp(80px, 11vw, 160px); }
.manifesto { padding-block: clamp(110px, 16vw, 230px); }
.hotnow { padding-block: clamp(70px, 10vw, 140px); }

/* ghost buttons become underlined text links */
.btn.ghost, .hero .btn.ghost { background: transparent !important; border: 0 !important; border-bottom: 1px solid currentColor !important; padding: 15px 2px 8px !important; min-height: 0; color: var(--fg); }
.btn.ghost:hover, .hero .btn.ghost:hover { background: transparent !important; color: var(--fg); opacity: .6; }
.final .btn.ghost { color: #fff; }
.btn { letter-spacing: .2em; font-weight: 500; font-size: 11px; padding: 16px 30px; }
.btn.sm { padding: 11px 18px; }

/* centered caps menu, Gucci style: brand left, links centered, CTA right */
.nav { margin-left: auto; margin-right: auto; }
.site-head .wrap { gap: 28px; }
.nav a:not(.btn) { font-size: 10.5px; letter-spacing: .24em; padding: 8px 10px; }
.site-head { border-top-color: var(--line); border-bottom-color: var(--line); }
.masthead .mh-util { border-bottom-color: var(--line); }
.mh-logo { font-weight: 500; }

/* chips / seg / cards: hairline, lighter */
.chips span, .seg { border-color: var(--line); }
.chips span { color: var(--fg); }
.card, .cfg .card { border-top-color: var(--line) !important; }
.hn-head, .manifesto, .man-cols { border-color: var(--fg); }
.hn-meta { font-weight: 500; letter-spacing: .24em; color: var(--muted); }
.hn-meta b { letter-spacing: .24em; }
.panel h3 { letter-spacing: -.055em; }
.eyebrow { font-weight: 500; letter-spacing: .26em; }
.hero-mark.ghost { opacity: .025; }
.hero-mark.solid { opacity: calc(var(--wipe, 0) * .05); }
.final .mark { opacity: .06; }

/* pros: black spread */
.pros { background: #000; color: #f4f4f2; }
.pros h2 { color: #fff; }
.pros h2 em { color: var(--accent); }
.pros .eyebrow { color: #fff; } .pros .eyebrow::before { color: var(--accent); }
.pros .lede { color: #bdbdb8; }
.pros .btn { background: #fff; color: #000; border-color: #fff; }
.pros .btn.ghost { color: #fff; }
.pros-roles span { background: transparent; border: 1px solid rgba(255,255,255,.3); color: #fff; font: 500 10.5px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; padding: 9px 13px; }
.pay-card { background: transparent; border-color: rgba(255,255,255,.3); }
.pay-card .big { color: #fff !important; } .pay-card dt, .pay-card .eyebrow { color: var(--accent) !important; }
.cfg-out .btn { background: var(--cta); color: var(--on-cta); border-color: var(--cta); }
.stage { background: #E9E6E0; }
.stage .still { background: linear-gradient(180deg, #F0EDE7, #D9D4CA); }
.stage .still { place-items: end center; }
.stage .still .still-art { width: 74%; height: auto; margin-bottom: 0; }
:root { --on-dark: #FF4A1C; }
:root[data-side="barber"] { --on-dark: #8D9CFF; } :root[data-side="beauty"] { --on-dark: #B7A0FF; }
:root[data-side="jr"] { --on-dark: #C6F135; } :root[data-side="household"] { --on-dark: #FFB347; }
.cfg-out, :root[data-side="household"] .cfg-out { background: #0E0E0E; color: #fff; }
.cfg-out .stat > span, :root[data-side] .cfg-out .stat > span { color: var(--on-dark); font-weight: 400; }
.cfg-out .btn { background: var(--on-dark); color: #0E0E0E; border-color: var(--on-dark); }
.blob, .pt, [data-deco], .deco * { display: none !important; }
.stage .still .still-art { width: auto; height: 90%; max-width: 100%; }
:root.mo section.s::before { display: none; }
.brand .wm { width: auto; height: 42px; aspect-ratio: 299 / 144; display: block; font-size: 0; color: var(--fg); }
.brand:hover .wm { color: var(--accent); }

.art-house .wall, .art-house .roof, .art-house .chim, .art-house .lawn, .art-house .step, .art-house .bush { fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.art-house .chim { fill: var(--bg); }
.art-house .dr-arch { fill: var(--accent); stroke: var(--accent); stroke-width: 1.5; }
.art-house .knob { fill: #fff; }
.art-house .win { fill: none; stroke: var(--fg); stroke-width: 1.25; } .art-house .win rect { fill: none; stroke: var(--fg); stroke-width: 1.25; } .art-house .win path { stroke: var(--fg); stroke-width: 1; fill: none; }
.art-house .bush { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke-width: 1.2; }
.route-bg, .route-fg { stroke-linecap: round; stroke-linejoin: round; }
svg.foot-wm { width: clamp(190px, 26vw, 330px); height: auto; aspect-ratio: 299 / 144; font-size: 0; color: #fff; display: block; margin-bottom: 14px; }

/* picker bar: one tidy row on desktop, two balanced rows below */
.picker .wrap { max-width: 1440px; gap: 10px 16px; justify-content: center; }
.picker .seg button, .picker .seg label { padding-inline: 16px; letter-spacing: .14em; white-space: nowrap; }
.picker .pk-label { white-space: nowrap; letter-spacing: .18em; }
.picker .pk-go { margin-left: 8px; white-space: nowrap; }
@media (max-width: 1320px) {
  .picker .wrap { justify-content: flex-start; }
  .picker .pk-go { margin-left: auto; }
}
@media (max-width: 1000px) {
  .picker .pk-go { margin-left: 0; flex: 0 0 auto; }
  .picker #pk-side-l, .picker #pk-tier-l { display: none; }
  .picker #pk-sides { flex: 1 1 100%; }
  .picker #pk-tiers { flex: 1 1 0; min-width: 0; }
  .picker .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .picker .seg::-webkit-scrollbar { display: none; }
}
.picker .pk-plan { appearance: none; -webkit-appearance: none; min-width: 230px; height: 42px; padding: 0 40px 0 16px; border: 1px solid var(--line); background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E0E0E' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px; color: var(--fg); font: 600 12px var(--body); letter-spacing: .14em; text-transform: uppercase; border-radius: 0; cursor: pointer; }
.picker .pk-plan:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 1000px) { .picker .pk-plan { width: 100%; min-width: 0; } }
@media (max-width: 1500px) { .picker .pk-label { display: none; } .picker .wrap { justify-content: center; } .picker .pk-go { margin-left: 0; } }

/* ---- real photography: black and white, tinted to the side color (multiply = black stays black, white becomes the color) ---- */
.ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--oy, 20%); mix-blend-mode: multiply; filter: contrast(1.08); transition: transform 1.1s var(--ease); }
.hn-img { isolation: isolate; }
.hn-card:hover .ph { transform: scale(1.04); }
.hero .arch { overflow: hidden; isolation: isolate; }
.hero .arch .ph { object-position: 50% var(--oy, 10%); }
.hero .arch.a1 { background: var(--accent); }
.hero .arch.a2 { background: var(--hero-ink, #fff); }
.hero .arch .plate { z-index: 2; mix-blend-mode: normal; }
.hn-img .no { z-index: 2; }
.hero .arch.a2 { background: color-mix(in srgb, var(--accent) 30%, #ECE9E3); border-color: transparent; }
.hero .arch.a2 .plate { color: #0E0E0E; }

/* ---- picker bar, organized: one row when it fits, otherwise a grid (sides on top, plan + glow + button below) ---- */
.picker .wrap { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 12px 16px; }
.picker .seg, .picker #pk-tiers { flex: 0 0 auto; }
@media (max-width: 1240px) {
  .picker .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; justify-content: stretch; padding-block: 12px; }
  .picker .pk-label { display: none; }
  .picker #pk-sides { grid-column: 1 / -1; width: 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; display: flex; }
  .picker #pk-sides button, .picker #pk-sides label { flex: 1 1 auto; justify-content: center; }
  .picker #pk-tiers { grid-column: 1; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .picker .pk-plan { width: 100%; min-width: 0; }
  .picker .glow-sw, .picker .pk-go { grid-row: 2; margin: 0; height: 100%; min-height: 42px; }
  .picker .glow-sw { grid-column: 2; } .picker .pk-go { grid-column: 3; }
}
@media (max-width: 560px) {
  .picker .wrap { grid-template-columns: 1fr 1fr; }
  .picker #pk-tiers { grid-column: 1 / -1; grid-row: 2; }
  .picker .glow-sw { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; }
}
@media (max-width: 560px) {
  .picker #pk-sides { display: grid; grid-template-columns: repeat(5, auto); overflow: visible; }
  .picker #pk-sides button, .picker #pk-sides label { padding: 0 6px; letter-spacing: .04em; font-size: 10px; gap: 5px; min-width: 0; }
}

/* ---- sides scene + try-on still: real photos in the arches ---- */
.panel .art::before, .panel .art::after { content: none; }
.panel .art .pa { position: absolute; overflow: hidden; border-radius: 999px 999px 0 0; isolation: isolate; will-change: transform; }
.panel .art .pa1 { left: 10%; top: 8%; width: 46%; height: 78%; background: var(--pt); transform: translate3d(0, calc((1 - var(--t, 0)) * 220px), 0); }
.panel .art .pa2 { left: 50%; top: 30%; width: 38%; height: 62%; background: var(--pa); transform: translate3d(0, calc((1 - var(--t, 0)) * 340px), 0); }
:root[data-motion="off"] .panel .art .pa { transform: none; }
.stage .still { overflow: hidden; }
.stage .still .still-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; mix-blend-mode: multiply; filter: contrast(1.06); }

/* ---- one control height everywhere: buttons, toggles, segmented pickers, selects ---- */
:root { --ctl: 44px; }
.btn, .btn.sm, .motion-sw, .glow-sw, .picker .seg button, .picker .seg label, .picker .pk-plan, .nav .btn, header .btn { box-sizing: border-box; min-height: var(--ctl); height: var(--ctl); padding-block: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1; }
.btn.sm { padding-inline: 18px; font-size: 11.5px; }
.picker .seg { height: var(--ctl); align-items: stretch; }
.picker .pk-plan { display: block; }
.motion-sw { padding-inline: 14px; font-size: 13px; }
.panel .btn, .btn.block { width: auto; }

/* ---- phone picker: robust at any font width ---- */
@media (max-width: 560px) {
  .picker .pk-go { display: none !important; }
  .picker #pk-sides { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); height: auto; overflow: visible; }
  .picker #pk-sides > * { grid-column: span 2; min-width: 0; padding: 0 4px; letter-spacing: .02em; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
  .picker #pk-sides > :nth-child(4), .picker #pk-sides > :nth-child(5) { grid-column: span 3; }
  .picker #pk-sides .dot, .picker #pk-sides i { flex: none; }
}

/* ---- Glow Club section ---- */
.glowclub { background: color-mix(in srgb, #7B4DFF 7%, var(--bg)); }
.gc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .gc-grid { grid-template-columns: 1fr; } .gc-photos { order: -1; } }
.gc-table { margin: 22px 0 10px; border-top: 1px solid var(--fg); }
.gc-row { display: grid; grid-template-columns: minmax(0, 1.6fr) .8fr .9fr .9fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--fg) 18%, transparent); align-items: baseline; font-size: 15px; }
.gc-row.gc-h { font: 600 10.5px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.gc-row b { font-weight: 600; } .gc-row .was { opacity: .55; text-decoration: line-through; }
.gc-photos { position: relative; aspect-ratio: 4 / 5; }
.gc-ph { position: absolute; overflow: hidden; border-radius: 999px 999px 0 0; isolation: isolate; }
.gc-ph.a { left: 0; top: 0; width: 62%; height: 86%; background: #7B4DFF; }
.gc-ph.b { right: 0; bottom: 0; width: 46%; height: 62%; background: #ECE9E3; }
.gc-copy .btn{margin-top:16px}.gc-copy .fine{margin:0}

/* ---- phone: slim sticky picker (two short rows) and no sideways reveal ---- */
@media (max-width: 560px) {
  .picker .wrap { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; padding-block: 8px; }
  .picker #pk-sides { grid-template-columns: repeat(5, minmax(0, 1fr)); height: 38px; }
  .picker #pk-sides > *, .picker #pk-sides > :nth-child(4), .picker #pk-sides > :nth-child(5) { grid-column: auto; position: relative; min-height: 38px; height: 38px; padding: 0 2px; font-size: 9.5px; letter-spacing: .04em; justify-content: center; }
  .picker #pk-sides button i { position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: 3px; border-radius: 0; }
  .picker #pk-tiers { grid-column: 1; grid-row: 2; }
  .picker .pk-plan { height: 38px; min-height: 38px; font-size: 11px; }
  .picker .glow-sw { grid-column: 2; grid-row: 2; height: 38px; min-height: 38px; padding: 0 10px; gap: 8px; font-size: 10px; white-space: nowrap; }
  :root[data-side="barber"] .reveal { transform: translate3d(0, 28px, 0); }
}
@media (max-width: 380px) { .picker #pk-sides > * { font-size: 8.5px; letter-spacing: .01em; } }
@media (max-width: 560px) { .picker #pk-tiers { height: auto; border: 0; padding: 0; } .picker .glow-sw { align-self: stretch; } }