/* Fade LA Barbershop — one stylesheet, no third-party requests.
   Palette contrast-verified against the darkest and lightest grounds it is used on;
   every value below carries its measured ratio. */

:root{
  color-scheme: dark;                 /* or native selects/dates paint light-on-light */

  --ink:    #08080a;                  /* page ground */
  --ink-2:  #0d0d10;                  /* alternating band */
  --card:   #131317;                  /* card ground */
  --line:   #23232a;
  --line-2: rgba(192,155,82,.22);

  --cream:  #f2eee7;                  /* body text      17.6:1 on --ink */
  --ash:    #a8a29a;                  /* secondary text  7.9:1 on --ink */
  --mute:   #949089;                  /* tertiary text   6.3:1 on --ink, 5.9:1 on --card */
  --gold:   #c09b52;                  /* accent + link   7.7:1 on --ink */
  --gold-2: #d9bd80;                  /* hover           10.5:1 on --ink */

  /* Type scale. 13px is the FLOOR, used only for letterspaced uppercase eyebrows.
     Nothing else is allowed to sit on it. */
  --t-eyebrow: 13px;
  --t-sm:      14px;
  --t-body:    16px;
  --t-md:      17px;
  --t-lg:      20px;

  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1080px;
  --pad: 24px;
  --nav-h: 66px;
}
@media (min-width:900px){ :root{ --pad:40px; --nav-h:80px; } }

@font-face{
  font-family:'Cormorant Garamond';
  src:url('../assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
  font-weight:300 400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FEFF,U+FFFD;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--ink); color:var(--cream);
  font-family:var(--ui); font-size:var(--t-body); line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;                  /* body.scrollWidth still lies — sweep elements, not body */
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--gold); text-decoration:none; }
a:hover{ color:var(--gold-2); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
::selection{ background:var(--gold); color:var(--ink); }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:var(--pad); top:8px; z-index:400; background:var(--gold); color:var(--ink); padding:10px 16px; font-size:var(--t-sm); font-weight:600; }

/* ── type ─────────────────────────────────────────────── */
.eyebrow{
  display:block; font-size:var(--t-eyebrow); font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
}
.d1,.d2,.d3{ font-family:var(--serif); font-weight:300; line-height:1.06; letter-spacing:-.005em; color:var(--cream); }
.d1{ font-size:clamp(2.9rem,9vw,5.6rem); }
.d2{ font-size:clamp(2.1rem,5.4vw,3.4rem); }
.d3{ font-size:clamp(1.5rem,3.4vw,2rem); line-height:1.15; }
.d1 em,.d2 em,.d3 em{ font-style:italic; color:var(--gold); }
.lede{ font-size:var(--t-md); color:var(--ash); max-width:60ch; }
.body p{ margin-bottom:1.05em; color:var(--ash); }
.body p:last-child{ margin-bottom:0; }
.rule{ width:34px; height:1px; background:var(--gold); border:0; margin:22px 0; }
.rule.c{ margin-inline:auto; }
.center{ text-align:center; }
.center .lede{ margin-inline:auto; }

/* ── nav ──────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:300; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-inline:var(--pad);
  background:#08080a;                 /* solid: a backdrop-filter here costs a repaint per scroll frame */
  border-bottom:1px solid var(--line);
}
/* The wordmark is deliberately the ONE thing on the page that is not Cormorant. A
   900-weight condensed system sans against a 300-weight serif is the biggest contrast
   available here without a second font file -- and this site still makes no font
   request beyond its own woff2. */
.nav-brand{
  font-family:var(--ui); font-weight:900; font-style:normal;
  font-size:clamp(1.25rem,2.6vw,1.75rem); line-height:1;
  letter-spacing:-.02em; text-transform:uppercase; color:var(--cream);
  white-space:nowrap;
}
.nav-brand span{ color:var(--gold); margin-left:.16em; }
.nav-brand:hover{ color:var(--cream); }
.nav-brand:hover span{ color:var(--gold-2); }
.nav-links{ display:none; gap:30px; list-style:none; }
.nav-links a{
  font-size:var(--t-body); letter-spacing:.01em; color:var(--ash);
  transition:color .2s ease;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{ color:var(--gold); }
.nav-right{ display:flex; align-items:center; gap:10px; }
/* Two calls to action in the bar. Below 560px the phone keeps Book and drops Inquire
   -- the mobile menu carries both, and a bar that overflows is worse than a bar with
   one button in it.

   SCOPED TO .nav-right ON PURPOSE. `.btn-inq` alone is (0,1,0) and so is `.btn`, which
   sets display:inline-block sixty lines further down -- equal specificity, later rule
   wins, and the button never hid. That is the second time today the same trap has
   shipped a defect in this file. (0,2,0) does not care where it sits. */
.nav-right .btn-inq{ display:none; }
@media (min-width:560px){ .nav-right .btn-inq{ display:inline-block; } }
.burger{
  display:flex; flex-direction:column; gap:5px; width:34px; height:34px;
  align-items:center; justify-content:center;
  background:none; border:1px solid var(--line); cursor:pointer; padding:0;
}
.burger span{ display:block; width:16px; height:1.5px; background:var(--gold); transition:transform .25s,opacity .25s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.menu{
  position:fixed; inset:var(--nav-h) 0 0 0; z-index:290; background:var(--ink);
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:var(--pad); overflow-y:auto;
}
.menu[data-open]{ display:flex; }
.menu a{ font-family:var(--serif); font-size:clamp(1.6rem,7vw,2.2rem); font-weight:300; color:var(--cream); padding:8px 4px; }
.menu a:hover{ color:var(--gold); }
.menu .btn{ margin-top:18px; font-family:var(--ui); font-size:var(--t-sm); font-weight:600; letter-spacing:.1em; }
/* `.menu a` (0,1,1) outranks `.btn-g` (0,1,0) whatever the order, so the menu's
   Book button rendered cream-on-gold at 2.26:1. Restated at matching weight. */
.menu a.btn-g{ color:var(--ink); }
.menu a.btn-g:hover{ color:var(--ink); }
@media (min-width:900px){
  .nav-links{ display:flex; }
  .burger{ display:none; }
  .menu{ display:none !important; }
}

/* ── buttons ──────────────────────────────────────────── */
.btn{
  display:inline-block; text-align:center; font-family:var(--ui);
  font-size:var(--t-sm); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:13px 22px; border:1px solid transparent; cursor:pointer;
  white-space:normal;                 /* nowrap here overflows a 390px page by a few px */
  min-height:44px; line-height:1.3;
  transition:background-color .18s,border-color .18s,color .18s;
}
.btn-g{ background:var(--gold); color:var(--ink); }        /* 7.7:1 */
.btn-g:hover{ background:var(--gold-2); color:var(--ink); }
.btn-o{ border-color:var(--line-2); color:var(--gold); }
.btn-o:hover{ border-color:var(--gold); color:var(--gold-2); }
.btn-row{ display:flex; flex-wrap:wrap; gap:10px; }
.btn-row.c{ justify-content:center; }

/* ── sections ─────────────────────────────────────────── */
.sec{ padding:clamp(64px,10vw,116px) 0; }
.sec-alt{ background:var(--ink-2); border-block:1px solid var(--line); }
.sec-head{ margin-bottom:clamp(34px,5vw,54px); }

/* ── hero ─────────────────────────────────────────────── */
.hero{
  /* Tuned against the fold, not chosen: at 1440x1000 this puts the top of "Two shops.
     One standard." at ~700px, so the join between the hero and the locations block is
     already showing when the page lands. */
  padding-top:calc(var(--nav-h) + clamp(44px,7vw,76px));
  /* The tabs now finish the hero, and the connector below carries the eye into the
     locations section, so the old 110px of dead air under the copy is not needed. */
  padding-bottom:clamp(24px,3vw,38px);
  position:relative;
}
/* A single static gradient, painted once. No filter(), no blur, no animation:
   the whole framerate deficit on the last build was one filter on a hero layer. */
.hero::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 78% at 50% 0%, rgba(192,155,82,.13), transparent 62%);
}
.hero .d1{ margin:18px 0 20px; }

/* ── grids ────────────────────────────────────────────── */
.grid{ display:grid; gap:16px; }
.g2{ grid-template-columns:1fr; }
.g3{ grid-template-columns:1fr; }
.g4{ grid-template-columns:1fr 1fr; }
@media (min-width:640px){ .g3{ grid-template-columns:1fr 1fr; } }
@media (min-width:860px){ .g2{ grid-template-columns:1fr 1fr; } .g3{ grid-template-columns:repeat(3,1fr); } .g4{ grid-template-columns:repeat(4,1fr); } }

.card{ background:var(--card); border:1px solid var(--line); padding:clamp(22px,3.4vw,34px); }
.card h3{ font-family:var(--serif); font-weight:400; font-size:var(--t-lg); color:var(--cream); }
.card p{ color:var(--mute); font-size:var(--t-sm); margin-top:8px; }

/* ── shop card ────────────────────────────────────────── */
.shop{ display:flex; flex-direction:column; }
.shop-n{ font-family:var(--serif); font-size:var(--t-lg); color:var(--gold); letter-spacing:.1em; }
.shop h3{ margin:6px 0 2px; font-size:clamp(1.35rem,3.2vw,1.7rem); }
.shop .where{ font-size:var(--t-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:var(--mute); }
.meta{ list-style:none; margin:20px 0 22px; display:grid; gap:9px; }
.meta li{ font-size:var(--t-sm); color:var(--ash); display:flex; gap:10px; align-items:baseline; }
.meta b{ color:var(--gold); font-weight:600; font-size:var(--t-eyebrow); letter-spacing:.14em; text-transform:uppercase; min-width:76px; flex:none; }
.meta a{ color:var(--ash); border-bottom:1px solid var(--line-2); }
.meta a:hover{ color:var(--gold); }
.shop .btn-row{ margin-top:auto; }

/* ── price list ───────────────────────────────────────── */
.prices{ list-style:none; display:grid; gap:0; }
.prices li{
  display:flex; align-items:baseline; gap:12px;
  padding:15px 0; border-bottom:1px solid var(--line);
}
.prices li:last-child{ border-bottom:0; }
.prices .nm{ font-size:var(--t-md); color:var(--cream); }
.prices .tm{ font-size:var(--t-eyebrow); letter-spacing:.1em; text-transform:uppercase; color:var(--mute); white-space:nowrap; }
.prices .dot{ flex:1; border-bottom:1px dotted var(--line); transform:translateY(-4px); min-width:14px; }
.prices .pr{ font-family:var(--serif); font-size:var(--t-lg); color:var(--gold); white-space:nowrap; }
.note{ font-size:var(--t-sm); color:var(--mute); margin-top:18px; }

/* ── team ─────────────────────────────────────────────── */
/* No photographs, and no monogram standing in where a face should be: the panel IS
   the name. The tab uses var(--ui), not the serif -- Cormorant Garamond is declared
   `font-weight:300 400`, so a bold serif name would be a browser-synthesised fake.
   The UI stack is the only real 800 this site loads.
   `.barber .tab` is (0,2,0) and beats `.card h3` at (0,1,1). That ordering is the
   whole point: this site has already been bitten once by a two-class selector
   quietly outranking a one-class one. */
.barber{ text-align:left; padding:0; overflow:hidden; }
.barber .tab{
  display:inline-block; max-width:100%;
  font-family:var(--ui); font-weight:800;
  font-size:clamp(1.5rem,4.6vw,2.1rem); line-height:1.12;
  letter-spacing:-.015em; text-transform:uppercase;
  color:var(--ink); background:var(--gold);        /* 7.7:1 -- same pair as gold on ink */
  padding:10px 16px 9px; border-radius:0 0 12px 0;
  overflow-wrap:break-word;
}
.barber .in{ padding:clamp(16px,2.6vw,22px) clamp(18px,3vw,26px) clamp(20px,3.2vw,28px); }
.barber .role{ font-size:var(--t-eyebrow); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-top:0; }
.barber .bio{ font-size:var(--t-sm); color:var(--mute); margin-top:12px; }
.barber blockquote{ font-family:var(--serif); font-style:italic; font-size:var(--t-md); color:var(--ash); margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }

/* ── rating ───────────────────────────────────────────── */
/* Two stacked rows of five glyphs, the gold one clipped to a percentage, so a 4.7
   shows as 4.7 and is not rounded up to a fifth star. The glyphs are aria-hidden;
   the number is in the wrapper's aria-label. */
.rating{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0 2px; }
.stars{ position:relative; display:inline-block; font-size:17px; line-height:1; letter-spacing:.08em; }
.stars .s-off{ color:var(--line-2); }
.stars .s-on{ position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; color:var(--gold); }
.rate-v{ font-family:var(--serif); font-size:var(--t-lg); color:var(--cream); line-height:1; }
.rate-src{ font-size:var(--t-sm); color:var(--mute); }

/* ── faq ──────────────────────────────────────────────── */
.faq{ max-width:760px; margin-inline:auto; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:20px 0; cursor:pointer; list-style:none;
  font-size:var(--t-md); color:var(--cream); min-height:44px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; color:var(--gold); font-size:var(--t-lg); flex:none; }
.faq details[open] summary::after{ content:'−'; }
.faq details[open] summary{ color:var(--gold); }
.faq .ans{ padding:0 0 22px; color:var(--ash); font-size:var(--t-sm); max-width:66ch; }

/* ── form ─────────────────────────────────────────────── */
/* Status line. --ash is 7.9:1 on --ink and gold is 7.7:1, both already in the
   palette table; nothing new to measure. */
.cf-status{ font-size:var(--t-sm); color:var(--ash); min-height:1.4em; }
.cf-status[data-state="good"]{ color:var(--gold-2); }
.cf-status[data-state="bad"]{ color:var(--gold); }
.form{ display:grid; gap:14px; max-width:520px; }
.field{ display:grid; gap:7px; }
.field label{ font-size:var(--t-eyebrow); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.field input,.field select,.field textarea{
  font-family:var(--ui); font-size:var(--t-body); color:var(--cream);
  background:var(--card); border:1px solid var(--line);
  padding:12px 13px; min-height:46px; width:100%;
}
.field select,.field option{ background:var(--card); color:var(--cream); }  /* engines that ignore color-scheme */
.field textarea{ min-height:120px; resize:vertical; }
.field :is(input,select,textarea):focus{ border-color:var(--gold); outline:none; }
.static-note{
  font-size:var(--t-sm); color:var(--mute);
  border-left:2px solid var(--gold); padding:10px 0 10px 14px; margin-bottom:20px;
}

/* ── areas ────────────────────────────────────────────── */
.chips{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; }
.chips a{
  display:inline-block; font-size:var(--t-sm); color:var(--ash);
  border:1px solid var(--line); padding:8px 14px; min-height:38px; line-height:1.5;
}
.chips a:hover{ border-color:var(--gold); color:var(--gold); }

/* ── footer ───────────────────────────────────────────── */
.foot{ background:var(--ink-2); border-top:1px solid var(--line); padding:clamp(52px,7vw,76px) 0 34px; }
.foot h4{ font-size:var(--t-eyebrow); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.foot p,.foot li{ font-size:var(--t-sm); color:var(--mute); }
.foot ul{ list-style:none; display:grid; gap:7px; }
/* `.foot ul` is (0,1,1) and `.chips` is (0,1,0), so the grid above was winning and the
   ten area links rendered ONE PER ROW -- a screen of list where a chip row belongs.
   This is the fix; it is specificity, not order. */
.foot .chips{ display:flex; flex-wrap:wrap; gap:8px; }
.foot-grid{ display:grid; gap:30px 26px; grid-template-columns:1fr; }
@media (min-width:480px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
/* The page list is five short words; stacked one per line it cost 179px of phone for
   nothing. Wrapped inline it costs 50. */
.foot-pages ul{ display:flex; flex-wrap:wrap; gap:6px 16px; }
@media (min-width:960px){ .foot-pages ul{ display:grid; gap:7px; } }
@media (min-width:960px){ .foot-grid{ grid-template-columns:1.5fr 1fr 1fr .8fr; } }
.foot-blurb{ margin-top:14px; max-width:34ch; }
.foot-ig{ margin-top:14px; }
.foot-links{ display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:2px; }
.foot-areas{ margin-top:clamp(30px,4vw,42px); }
.foot a{ color:var(--ash); }
.foot a:hover{ color:var(--gold); }
.foot-brand{ font-family:var(--serif); font-size:var(--t-lg); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.foot-bot{ margin-top:40px; padding-top:22px; border-top:1px solid var(--line); font-size:var(--t-sm); color:var(--mute); display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; }

/* ── crumbs ───────────────────────────────────────────── */
.crumbs{ font-size:var(--t-sm); color:var(--mute); padding-top:calc(var(--nav-h) + 26px); }
.crumbs a{ color:var(--ash); }
.crumbs a:hover{ color:var(--gold); }

/* ── hero video ───────────────────────────────────────── */
/* Only rendered when data.mjs carries HERO_VIDEO. It sits behind the copy and behind
   the existing gradient, is muted/looped/playsinline so iOS plays it inline instead of
   going fullscreen, and is aria-hidden because it says nothing a screen reader needs.
   Reduced motion gets the poster frame and no playback. */
.hero{ position:relative; overflow:hidden; }
.hero-v{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; opacity:.34;
}
/* The remote source is in colour and cannot be re-encoded, so the grading happens
   here. Drop this class the moment the hero points at assets/hero-bw-1080.mp4, which
   is already desaturated in the file -- a filter on a 4K surface is a per-frame GPU
   pass, and one filter on a hero layer has cost 18fps on another project here. */
.hero-v.bw{ filter:grayscale(1) contrast(1.06); }
.hero-in{ position:relative; z-index:2; }
.hero::before{ z-index:1; }
/* A scrim, only when there is footage to scrim. The copy sits on --cream, which is
   17.6:1 on the page ground but on nothing at all once a moving 4K frame is behind it:
   a contrast audit reads the computed background, not the pixels a video is painting.
   Rather than trust a frame, darken every frame. Heaviest at the bottom, where the
   tabs sit on the brightest part of this particular clip. */
.hero:has(.hero-v)::before{
  background:
    radial-gradient(120% 78% at 50% 0%, rgba(192,155,82,.15), transparent 62%),
    linear-gradient(180deg, rgba(8,8,10,.62) 0%, rgba(8,8,10,.40) 42%, rgba(8,8,10,.88) 100%);
}
@media (prefers-reduced-motion:reduce){ .hero-v{ display:none; } }

/* ── location tabs ────────────────────────────────────── */
.tabs-label{
  font-size:var(--t-eyebrow); letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute); margin-bottom:14px;
}
.loc-tabs{ display:grid; gap:12px; max-width:640px; margin-inline:auto; }
@media (min-width:620px){ .loc-tabs{ grid-template-columns:1fr 1fr; } }
.loc-tab{
  display:flex; align-items:center; gap:12px; text-align:left;
  padding:15px 18px; min-height:60px;
  background:var(--card); border:1px solid var(--line-2); color:var(--cream);
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.loc-tab:hover{ border-color:var(--gold); color:var(--cream); transform:translateY(-2px); }
.loc-tab.on{ border-color:var(--gold); background:#191a1f; }
.loc-tab .lt-n{ font-family:var(--serif); font-size:var(--t-lg); color:var(--gold); line-height:1; }
.loc-tab .lt-name{ flex:1; font-size:var(--t-sm); }
.loc-tab .lt-go{ color:var(--gold); font-size:var(--t-md); line-height:1; }
/* The line that walks the eye from the tabs down to the cards they scroll to. */
.connector{ display:block; width:1px; height:clamp(22px,3vw,34px); margin:clamp(16px,2.2vw,24px) auto 0;
  background:linear-gradient(var(--gold),transparent); }
/* The connector already spans the join, so this section does not also need a full
   section's worth of padding above it. */
#locations{ padding-top:clamp(22px,2.6vw,34px); }

/* The card the tabs point at. Both stay visible -- the point of two cards side by
   side is comparing the hours, so hiding one behind a tab would remove the answer. */
.loc-grid .shop{
  scroll-margin-top:calc(var(--nav-h) + 20px);
  transition:border-color .25s ease, background .25s ease;
  cursor:pointer;
}
.loc-grid .shop:hover{ border-color:var(--line-2); }
.loc-grid .shop.on{ border-color:var(--gold); background:#17171c; cursor:default; }
/* Anything inside the card that is genuinely clickable keeps its own cursor -- the
   card's pointer must not imply that a paragraph is a link. */
.loc-grid .shop :is(a,button){ cursor:pointer; }

/* ── roster, inside the locations block ───────────────── */
.roster{ margin-top:clamp(44px,6vw,70px); }
.roster-head{ margin-bottom:clamp(24px,3.6vw,34px); }
/* Switching shops REMOVES the barbers who do not work at that shop -- it does not dim
   them. A greyed-out name still reads as "works here, unavailable", which is a
   different and wrong claim.

   A barber whose data-shops is EMPTY is shown at both, because empty means the client
   has not said where they work; see data.mjs. `~=` never matches an empty attribute,
   so the :not([data-shops=""]) guard is what keeps unknown from meaning excluded. */
#locations[data-shop="sherman-oaks"] .barber[data-shops]:not([data-shops=""]):not([data-shops~="sherman-oaks"]),
#locations[data-shop="north-hollywood"] .barber[data-shops]:not([data-shops=""]):not([data-shops~="north-hollywood"]){
  display:none;
}
/* The grid is sized by how many are left, so two barbers do not sit in a four-wide
   grid with two holes in it. */
.roster .grid{ justify-content:center; }
.roster-for{ font-size:var(--t-sm); color:var(--mute); margin-top:10px; }

/* ── form on the home page ────────────────────────────── */
.form-wrap{ display:flex; justify-content:center; }
.form-wrap .form{ width:100%; max-width:560px; }

/* ── reveal ───────────────────────────────────────────── */
.rv{ opacity:0; transform:translateY(14px); transition:opacity .5s ease,transform .5s ease; }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ── team page, grouped by shop ───────────────────────
   Who cuts where is the point of the page, so each shop is its own block with a
   heading and a count rather than one undifferentiated grid. */
.team-shop{ margin-top:clamp(34px,4.6vw,54px); }
.team-shop:first-of-type{ margin-top:0; }
.team-shop-h{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin:0 0 clamp(16px,2.4vw,22px); padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.team-shop-n{
  font-family:var(--ui); font-size:var(--t-eyebrow); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); font-style:normal;
}