/* Self-hosted copy of the exact Google Fonts CSS v4 linked (same faces, unicode-range, font-display). */

/* https://fonts.googleapis.com/css2?family=Pinyon+Script&family=Marcellus&display=block */
/* latin-ext */
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("https://fonts.zemi-cdn.com/26/r3-232bbd354041/assets/fonts/marcellus_v14_weo_ebrok8hqldviaf81wpok7es.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("https://fonts.zemi-cdn.com/26/r3-232bbd354041/assets/fonts/marcellus_v14_weo_ebrok8hqldviaf81vvok.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Pinyon Script';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("https://fonts.zemi-cdn.com/26/r3-232bbd354041/assets/fonts/pinyonscript_v24_6xkpdsjbl9-e9luoeqidrqr8woraorbh.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Pinyon Script';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("https://fonts.zemi-cdn.com/26/r3-232bbd354041/assets/fonts/pinyonscript_v24_6xkpdsjbl9-e9luoeqidrqr8wovaorbh.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Pinyon Script';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("https://fonts.zemi-cdn.com/26/r3-232bbd354041/assets/fonts/pinyonscript_v24_6xkpdsjbl9-e9luoeqidrqr8woxaog.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;0,500;0,600;1,400&display=swap */
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.zemi-cdn.com/26/r3-232bbd354041/assets/fonts/jost_v20_92zjtbhpnqw73ohh7bbqp4-b6xlrzu0fbi4knshl.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.zemi-cdn.com/26/r3-232bbd354041/assets/fonts/jost_v20_92zjtbhpnqw73ohh7bbqp4-b6xlrzu0fbiqknshl.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.zemi-cdn.com/26/r3-232bbd354041/assets/fonts/jost_v20_92zjtbhpnqw73ohh7bbqp4-b6xlrzu0fbiokng.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.zemi-cdn.com/26/r3-232bbd354041/assets/fonts/jost_v20_92zatbhpnqw73odd4iyl.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.zemi-cdn.com/26/r3-232bbd354041/assets/fonts/jost_v20_92zatbhpnqw73ord4iyl.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.zemi-cdn.com/26/r3-232bbd354041/assets/fonts/jost_v20_92zatbhpnqw73otd4g.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://fonts.zemi-cdn.com/26/r3-232bbd354041/assets/fonts/jost_v20_92zatbhpnqw73odd4iyl.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://fonts.zemi-cdn.com/26/r3-232bbd354041/assets/fonts/jost_v20_92zatbhpnqw73ord4iyl.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://fonts.zemi-cdn.com/26/r3-232bbd354041/assets/fonts/jost_v20_92zatbhpnqw73otd4g.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://fonts.zemi-cdn.com/26/r3-232bbd354041/assets/fonts/jost_v20_92zatbhpnqw73odd4iyl.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://fonts.zemi-cdn.com/26/r3-232bbd354041/assets/fonts/jost_v20_92zatbhpnqw73ord4iyl.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://fonts.zemi-cdn.com/26/r3-232bbd354041/assets/fonts/jost_v20_92zatbhpnqw73otd4g.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Pretty Little Studio · v4
   Palette (see BRAND-PALETTE.md): Ink #151313 · Cocoa #151313 · Clay #151313 · Honey #e9e1d3 · Blush #efe9df
   Type: Pinyon Script (copperplate, matches the logo) for h1/h2 + Jost body (see TYPE.md). One scale, tokens below.
   No eyebrows, no kickers, no section numbers, no heading periods, no forced heading breaks. */

:root {
  --ink: #151313;   /* the one black: text, header, bands, buttons, overlays (rgb 21,19,19). Softened, never pure #000 */
  --cream: #efe9df; /* page cream */
  --white: #f8f5ef; /* warm white */
  --cream-light: #e9e1d3; /* accent on black (was honey) */
  /* legacy token names, kept so components don't break; all map onto black / cream now (no brown) */
  --cocoa: var(--ink);
  --clay: var(--ink);
  --honey: var(--cream-light);
  --blush: var(--cream);
  --blush-2: var(--white);
  --blush-3: #e4ddd1;
  --ink-soft: rgba(21, 19, 19, 0.7);
  --ink-mute: rgba(21, 19, 19, 0.66); /* 0930: ≥4.99:1 on blush (site audit) */
  --clay-ink: var(--ink); /* small text labels: black on cream */
  --line: rgba(21, 19, 19, 0.14);
  --line-light: rgba(239, 233, 223, 0.22);
  --scrim-rgb: 21, 19, 19;

  /* Type (TYPE.md). Display = the logo's own copperplate script. Monsieur La Doulaise is the closest free match to
     the Mangomint logo trace (shots/v4/type-match.png). Body/UI = Jost, a clean geometric sans with the open, even
     rhythm copperplate is traditionally set with. Script is for h1/h2 and one accent line only: never all caps,
     never for prices, numbers, names in lists, nav or labels. */
  --font-script: "Pinyon Script", "Snell Roundhand", cursive; /* 10:55 PM audit: Monsieur La Doulaise swash caps were unreadable ("Ashley" read "Gshley"); Pinyon is the same copperplate family, legible */
  --font-display: var(--font-script);
  /* 0930 type system: script (brand, selective) + Marcellus (secondary headings + labels) + Jost (body/UI). TYPE.md */
  --font-head: "Marcellus", Georgia, serif;
  --font-body: "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  /* one scale: 390px → 1440px. The script's x-height is ~half of Jost's, so h1/h2 sit a step larger to read at the same weight. */
  --fs-h1: clamp(2.875rem, 1.9rem + 4.4vw, 5.5rem);      /* 46 → 88 script hero h1 (Robert 0930: 72–96 / 44–56) */
  --fs-h2-script: clamp(2.5rem, 1.9rem + 2.2vw, 3.75rem); /* 40 → 60 key script section headings */
  --fs-h2: clamp(1.625rem, 1.4rem + .9vw, 2.25rem);      /* 26 → 36 Marcellus section headings */
  --fs-h3: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem);   /* 19 → 22 Marcellus */
  --fs-h4: 1.125rem;                                      /* 18: item names, prices */
  --fs-lead: clamp(1.0625rem, 1.03rem + .1vw, 1.125rem); /* 17 → 18 */
  --fs-body: clamp(1rem, .96rem + .15vw, 1.0625rem);     /* 16 → 17 */
  --fs-small: .9375rem;                                   /* 15 */
  --fs-nav: .8125rem;                                     /* 13, uppercase */
  --fs-meta: .75rem;                                      /* 12, uppercase labels + buttons */
  --fs-micro: .6875rem;                                   /* 11, tags */
  --fw-head: 400; --fw-h3: 500; --fw-body: 400; --fw-ui: 500; --fw-strong: 500; --fw-accent: 400;
  --ls-head: 0.01em; --ls-body: 0; --ls-meta: 0.14em; --ls-nav: 0.1em;
  --lh-head: 1.2; --lh-body: 1.6;
  --measure: 66ch;
  /* aliases for components written against a step scale (Runtime reviews) */
  --step--1: var(--fs-small); --step-0: var(--fs-body); --step-1: var(--fs-h4); --step-2: var(--fs-h3); --step-3: var(--fs-h2); --step-4: var(--fs-h1); --step-5: var(--fs-h1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --header-h: 4.75rem;
  --header-h-scrolled: 4.25rem; /* header height once .is-scrolled; sticky bars key off this */
  --max: 76rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  /* vertical rhythm: three tiers (64/80 mobile → 96/128/160 desktop). Neighbouring bands never share a tier. */
  /* One section step (reference study): 52 phone → 104 desktop. Only the closing booking section is larger. */
  --sy-std: clamp(3.25rem, 2rem + 5.1vw, 6.5rem);    /* 52 → 104 */
  --sy-tight: var(--sy-std);                          /* kept as an alias: one step only */
  --sy-feature: clamp(4.5rem, 2.8rem + 7vw, 9rem);   /* 72 → 144, close CTA only */
  --section-y: var(--sy-std);
  --gap-s: .75rem; --gap-m: 1.5rem; --gap-l: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --track: 0.12em;
  --radius-btn: 999px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--blush);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-weight: 400; margin: 0; text-wrap: balance; }
/* script: hero h1s + the few key headings marked .h-script. Script needs size, air between lines for the swashes, and a hair of tracking */
h1, .h-script { font-family: var(--font-script); line-height: 1.22; letter-spacing: .012em; word-spacing: .04em; }
h1 { font-size: var(--fs-h1); }
.h-script.h-script { font-size: var(--fs-h2-script); line-height: 1.22; letter-spacing: .012em; }
/* secondary: every other heading */
h2:not(.h-script), h3 { font-family: var(--font-head); line-height: 1.2; letter-spacing: .02em; }
h2:not(.h-script) { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
/* a script has no italic: accents inside script headings stay upright; accents in Jost copy use Jost italic */
h1 em, h2 em, .display em { font-style: normal; color: inherit !important; } /* no coloured accent words (audit S16) */
h3 em, p em { font-style: italic; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 200; background: var(--ink); color: var(--blush); padding: .7rem 1rem; border-radius: 999px; transition: top .2s; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 4px; }
.section-cocoa :focus-visible, .site-header :focus-visible, .nav-drawer :focus-visible, .close-cta :focus-visible, .hero :focus-visible, .page-hero :focus-visible, .team-hero :focus-visible, .site-footer :focus-visible { outline-color: var(--honey); }
.muted { color: var(--ink-mute); }
.center { text-align: center; }

/* ——— Buttons ——— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 2.9rem; padding: 0 1.45rem 0 calc(1.45rem + var(--track));
  border-radius: var(--radius-btn); border: 1px solid transparent;
  font-size: var(--fs-meta); font-weight: var(--fw-ui); letter-spacing: var(--ls-meta); text-transform: uppercase; line-height: 1; white-space: nowrap;
  cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
  transition: color .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
/* editorial fill sweep */
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateY(101%); transition: transform .45s var(--ease); border-radius: inherit; }
.btn:hover::before { transform: none; }
.btn-ink { background: var(--ink); color: var(--blush); }
.btn-ink::before { background: var(--cocoa); }
.btn-blush { background: var(--blush); color: var(--ink); }
.btn-blush::before { background: var(--honey); }
.btn-ghost { border-color: rgba(21, 19, 19,.32); color: var(--ink); }
.btn-ghost::before { background: var(--ink); }
.btn-ghost:hover { color: var(--blush); border-color: var(--ink); }
.btn-ghost-light { border-color: rgba(239, 233, 223,.55); color: var(--blush); }
.btn-ghost-light::before { background: var(--blush); }
.btn-ghost-light:hover { color: var(--ink); border-color: var(--blush); }
.btn-ghost-honey { border-color: rgba(233, 225, 211,.7); color: var(--blush); }
.btn-ghost-honey::before { background: var(--honey); }
.btn-ghost-honey:hover { color: var(--ink); border-color: var(--honey); }
.btn-wide { width: 100%; min-height: 3.25rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.hero-ctas.left { justify-content: flex-start; align-items: center; }
.u-link { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size .35s var(--ease); }
.u-link:hover { background-size: 0 1px; background-position: 100% 100%; }
.ig-icon { flex: none; }
.ig-cta { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-small); letter-spacing: .02em; }
.ig-cta span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.ig-cta:hover span { background-size: 100% 1px; }

/* ——— Header ——— */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 70; height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem;
  padding: 0 var(--gutter); color: var(--blush);
  background: linear-gradient(180deg, rgba(var(--scrim-rgb), .38), rgba(var(--scrim-rgb), 0));
  transition: background-color .45s var(--ease), box-shadow .45s var(--ease), height .45s var(--ease);
}
.site-header::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: rgba(233, 225, 211,.35); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.site-header.is-scrolled { background-color: rgba(21, 19, 19, .96); box-shadow: 0 10px 30px rgba(21, 19, 19,.18); --header-h: var(--header-h-scrolled); }
.site-header.is-scrolled::after { transform: scaleX(1); }
@supports (backdrop-filter: blur(1px)) { .site-header.is-scrolled { background-color: rgba(21, 19, 19, .9); backdrop-filter: blur(14px) saturate(1.1); } }
.site-header.menu-open { background: transparent; box-shadow: none; backdrop-filter: none; }
.site-header.menu-open::after { transform: scaleX(0); }

.brand { justify-self: start; display: inline-flex; align-items: center; color: var(--blush); padding: .35rem 0; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.brand-logo { height: clamp(2.35rem, 3.1vw, 2.9rem); width: auto; overflow: visible; }
.brand-logo .lw, .footer-logo .lw, .hero-logo-svg .lw { transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes word-bounce { 0% { transform: none; } 40% { transform: translateY(-4%); } 100% { transform: none; } }
.brand:hover .lw, .brand:focus-visible .lw, .footer-brand:hover .lw { animation: word-bounce .5s var(--ease) both; }
.brand:hover .lw-little, .brand:focus-visible .lw-little, .footer-brand:hover .lw-little { animation-delay: .08s; }
.brand:hover .lw-studio, .brand:focus-visible .lw-studio, .footer-brand:hover .lw-studio { animation-delay: .16s; }
/* home: the big hero logo owns the brand until the header state change, then hands off */
.page-home .site-header:not(.is-scrolled):not(.menu-open) .brand { opacity: 0; transform: translateY(6px); pointer-events: none; }

.nav-links { display: flex; align-items: center; gap: clamp(1.4rem, 2.6vw, 2.5rem); font-size: var(--fs-nav); font-weight: var(--fw-ui); letter-spacing: var(--ls-nav); text-transform: uppercase; }
.nav-center { justify-self: center; }
.nav-links a { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding-left: var(--track); opacity: .88; transition: opacity .25s; }
.nav-links a::after { content: ""; position: absolute; left: var(--track); right: 0; bottom: .62rem; height: 1px; background: var(--honey); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.header-ctas { justify-self: end; display: flex; gap: .6rem; }
.header-ctas .btn { min-height: 2.75rem; }
/* Book Now shows on first load (nav, 0930 site audit); Call Salon slides in with the scroll state */
.header-ctas .btn { opacity: 0; transform: translateY(-8px); visibility: hidden; transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s, color .35s, border-color .35s, background-color .35s; }
.header-ctas .btn:first-child, .site-header.is-scrolled .header-ctas .btn { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.site-header.is-scrolled .header-ctas .btn + .btn { transition-delay: .06s; }

/* toggle (scissors, from header kit) */
.menu-toggle { display: none; justify-self: end; width: 2.9rem; height: 2.9rem; margin-right: -.55rem; align-items: center; justify-content: center; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; border-radius: 50%; }
.snip { width: 28px; height: 28px; overflow: visible; }
.snip line, .snip circle { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.snip .snip-pivot { fill: currentColor; stroke: none; }
.snip-m { transition: opacity .25s var(--ease); }
.menu-toggle[aria-expanded="true"] .snip-m { opacity: 0; }
.snip-rings { opacity: 0; transform-origin: 12px 16px; transform: scale(.4); transition: opacity .3s var(--ease), transform .35s var(--ease); }
.menu-toggle[aria-expanded="true"] .snip-rings { opacity: 1; transform: none; }

.nav-drawer {
  position: fixed; inset: 0; z-index: 65; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem;
  padding: calc(var(--header-h) + 2rem) var(--gutter) calc(2.5rem + env(safe-area-inset-bottom));
  background: radial-gradient(120% 60% at 50% 0%, rgba(21, 19, 19,.28), transparent 60%), var(--cocoa);
  color: var(--blush); text-align: center;
  opacity: 0; visibility: hidden; clip-path: inset(0 0 100% 0);
  transition: opacity .38s var(--ease), clip-path .55s var(--ease), visibility 0s linear .55s;
}
.nav-drawer.is-open { opacity: 1; visibility: visible; clip-path: inset(0); transition: opacity .38s var(--ease), clip-path .55s var(--ease), visibility 0s; }
.drawer-links { display: grid; gap: .9rem; }
.drawer-links a { font-family: var(--font-body); font-weight: var(--fw-body); font-size: var(--fs-h2); line-height: 1.05; transform: translateY(14px); opacity: 0; transition: transform .6s var(--ease), opacity .6s var(--ease), color .2s; }
.nav-drawer.is-open .drawer-links a { transform: none; opacity: 1; }
.nav-drawer.is-open .drawer-links a:nth-child(2) { transition-delay: .05s; }
.nav-drawer.is-open .drawer-links a:nth-child(3) { transition-delay: .1s; }
.nav-drawer.is-open .drawer-links a:nth-child(4) { transition-delay: .15s; }
.drawer-links a[aria-current="page"] { font-style: italic; color: var(--honey); }
.drawer-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; width: min(100%, 22rem); }
.drawer-ig { display: inline-flex; gap: .5rem; align-items: center; font-size: var(--fs-small); opacity: .8; }
html.menu-locked, html.menu-locked body { overflow: hidden; }

/* ——— Scrims (cocoa-tinted, never flat black) ——— */
.scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.scrim-hero { background: linear-gradient(180deg, rgba(var(--scrim-rgb), .42) 0%, rgba(var(--scrim-rgb), .12) 32%, rgba(var(--scrim-rgb), .28) 60%, rgba(var(--scrim-rgb), .78) 100%); }
.scrim-band { background: radial-gradient(80% 70% at 50% 50%, rgba(21, 19, 19,.55), rgba(var(--scrim-rgb), .72)); }
.scrim-close { background: rgba(21, 19, 19,.48); } /* same flat overlay as the heroes; the old radial left the script white-on-blonde (audit S5) */

/* ——— Photo hero overlay (all 5 pages) ———
   One flat black layer between photo and text: rgba(21, 19, 19,.45), deepening to ~.5 at the bottom where the type sits.
   A plain ::before on the hero itself (no transform/filter on the section, so Runtime's fixed backgrounds keep working). Older per-hero gradient scrims are switched off so the two never stack into mud. */
:is(.hero, .page-hero, .team-hero, .ab-hero):has(.hero-media)::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(21, 19, 19,0) 55%, rgba(21, 19, 19,.09) 100%), rgba(21, 19, 19,.70); } /* 1001 Robert: .70 is the minimum hero overlay on every page */
/* solid heroes (Services, Contact) get no overlay: it turned cocoa into near-black */
:is(.hero, .page-hero, .team-hero, .ab-hero, .ct-hero) > .scrim { display: none; }
/* 1001 Robert: Home hero is the one exception at .60 (every other photo hero stays at .70) */
.hero:has(.hero-media)::before { background: linear-gradient(180deg, rgba(21, 19, 19,0) 55%, rgba(21, 19, 19,.09) 100%), rgba(21, 19, 19,.60); }
/* 1001 Robert: Team hero a little darker (.45 to .56) */
.team-hero:has(.hero-media)::before { background: linear-gradient(180deg, rgba(21, 19, 19,0) 55%, rgba(21, 19, 19,.09) 100%), rgba(21, 19, 19,.70); }
/* 1001 Robert: Contact hero is the crewneck photo, same .56 overlay as Team, same 42svh size; crop keeps the embroidered name in frame */
.ct-hero:has(.hero-media)::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(21, 19, 19,0) 55%, rgba(21, 19, 19,.09) 100%), rgba(21, 19, 19,.70); }
.ct-hero .page-hero-content { position: relative; z-index: 2; }
.ct-hero-media { inset: 0; will-change: auto; }
.ct-hero-media img { object-position: 50% 45%; }
:is(.hero, .page-hero, .team-hero, .ab-hero, .ct-hero) :is(h1, p, .hero-logo) { text-shadow: none; }

/* ——— Home hero ——— */
.hero, .team-hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; overflow: hidden; color: var(--blush); }
.hero-media { position: absolute; inset: -4% 0 0; z-index: 0; will-change: transform; }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .hero-media img { object-position: 50% 30%; }
/* 1250 (Robert): logo + tagline are one lockup, centred on the hero; Runtime's lift moves the whole lockup */
.hero-lockup { position: absolute; z-index: 3; left: 50%; top: 44%; width: min(100% - 2 * var(--gutter), 46rem); transform: translate(-50%, -50%); text-align: center; will-change: transform, opacity; }
.hero-logo { width: clamp(18rem, 46vw, 40rem); margin: 0 auto; color: var(--blush); filter: drop-shadow(0 6px 30px rgba(var(--scrim-rgb), .35)); }
.hero-logo-svg { width: 100%; height: auto; overflow: visible; }
.hero-content { position: relative; z-index: 3; width: min(100% - 2 * var(--gutter), var(--max)); margin: 0 auto; padding: 0 0 clamp(3rem, 9vh, 5.5rem); text-align: center; }
.hero-title.hero-title { font-family: var(--font-head); font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); line-height: 1.25; letter-spacing: .06em; margin: clamp(.35rem, .8vw, .75rem) auto 0; max-width: none; color: var(--white); } /* Marcellus subline, not script (Robert 12:48) */
.lede { max-width: 60ch; margin: 0 auto 1.6rem; color: rgba(239, 233, 223,.9); font-size: var(--fs-lead); }

/* ——— Hero heights (Robert, 3:43 PM): home full viewport; inner pages shorter and tighter.
   About ~70svh (components/codex), Team ~60svh, Services ~52svh (.page-hero), Contact has no photo hero. */
.team-hero { min-height: max(22rem, 60vh); min-height: max(22rem, 60svh); }
.ct-hero { position: relative; min-height: 42vh; min-height: 42svh; display: grid; align-items: end; overflow: hidden; color: var(--blush); background: var(--cocoa); }

/* ——— Inner page hero (photo) ——— */
.page-hero { position: relative; min-height: 52vh; min-height: 52svh; display: grid; align-items: end; overflow: hidden; color: var(--blush); }
.page-hero-content { position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), var(--max)); margin: 0 auto; padding: calc(var(--header-h) + 2rem) 0 clamp(2.75rem, 7vh, 4.5rem); text-align: center; }
.page-hero h1, .team-hero h1 { font-size: var(--fs-h1); margin: 0 auto; }
.page-hero .lede { margin-bottom: 1.6rem; }
.team-hero .page-hero-content { padding-bottom: clamp(2.75rem, 7vh, 4.5rem); }
.team-hero h1 { margin-bottom: 0; }
.team-hero .hero-media img { object-position: 50% 45%; }

/* ——— Sections ——— */
.section { padding: var(--section-y) var(--gutter); position: relative; }
.section-inner { width: min(100%, var(--max)); margin: 0 auto; }
.section-blush { background: var(--blush); }
.section-paper { background: var(--blush-2); }
.section-cocoa { background: var(--cocoa); color: var(--blush); }
.display { max-width: 26ch; }
/* 0930: a heading that heads a section is centred on the page, and so is its content block */
.section-inner > .display, .section-inner > h2 { margin-inline: auto; text-align: center; }
.display-sm { font-size: var(--fs-h3); }
.center .display { margin-inline: auto; }
.head-row { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3rem); }


/* home: under the hero. Asymmetric: heading holds the narrow left column, the booking ledger runs wide on the right */
.intro { padding-block: var(--sy-std); }
.team-tease { padding-block: var(--sy-tight); }
.team-tease-foot { margin-top: var(--gap-m); text-align: center; }
.reviews { padding-block: var(--sy-std); }
.gallery-sec { padding-block: var(--sy-tight); }
.intro-grid { display: grid; grid-template-columns: minmax(0, 40rem); justify-content: center; gap: clamp(1.25rem, 2vw, 1.75rem); text-align: center; } /* one sparse centred column (0930) */
.intro-head { max-width: none; }
.intro-body > p { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 44ch; margin-inline: auto; }
.book-ledger { margin-top: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--ink); }
.book-ledger li { border-bottom: 1px solid var(--line); }
.book-ledger a { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline; padding: 1.05rem 0; text-align: left; }
.bl-what { font-size: var(--fs-h4); font-weight: var(--fw-body); transition: transform .45s var(--ease); }
.bl-how { font-size: var(--fs-meta); font-weight: var(--fw-ui); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--clay-ink); white-space: nowrap; }
.bl-how::after { content: " \2192"; display: inline-block; transition: transform .45s var(--ease); }
.book-ledger a:hover .bl-what, .book-ledger a:focus-visible .bl-what { transform: translateX(.4rem); }
.book-ledger a:hover .bl-how::after, .book-ledger a:focus-visible .bl-how::after { transform: translateX(.25rem); }
.intro-menu { display: inline-block; margin-top: 1.5rem; font-size: var(--fs-small); }

/* photo band */
.band { position: relative; min-height: clamp(26rem, 72vh, 44rem); display: grid; place-items: center; overflow: hidden; color: var(--blush); text-align: center; }
.band-media { position: absolute; inset: -12% 0; z-index: 0; will-change: transform; }
.band-media img { width: 100%; height: 100%; object-fit: cover; }
.band-content { position: relative; z-index: 2; padding: 3rem var(--gutter); }
.band-kicker-line { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-head); line-height: var(--lh-head); letter-spacing: var(--ls-head); }

/* split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.split-rev .split-media { order: 2; }
.split-media { margin: 0; overflow: hidden; aspect-ratio: 4/5; background: var(--blush-3); }
.split-media img { width: 100%; height: 115%; object-fit: cover; }
.split-copy > * + * { margin-top: 1.3rem; }
.split-copy p { color: var(--ink-soft); max-width: var(--measure); }

/* team drift names */
.cs-name { display: block; margin-top: .6rem; font-family: var(--font-body); font-size: var(--fs-h4); font-weight: var(--fw-h3); line-height: 1.2; }
.cs-role { display: block; font-size: var(--fs-micro); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--ink-mute); line-height: 1.3; margin-top: .15rem; }


/* gallery: four real work photos on the container grid. First column wider so it is not an equal 4-up */
.gallery-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: var(--gap-s); margin-top: var(--gap-l); align-items: stretch; }
.gallery-grid .g-tile:first-child { aspect-ratio: auto; } /* shares the row height: no stagger notch (audit S13) */
.gallery-grid .g-tile:first-child img { position: absolute; inset: 0; }
.gallery-grid .g-tile:not(:first-child) { align-self: start; }
.g-tile { display: block; position: relative; overflow: hidden; aspect-ratio: 4/5; background: var(--blush-3); }
.g-tile img { width: 100%; height: 100%; object-fit: cover; }
.g-tile span { position: absolute; left: .7rem; bottom: .6rem; z-index: 1; font-size: var(--fs-micro); letter-spacing: .04em; color: var(--blush); opacity: 0; transition: opacity .3s var(--ease); text-shadow: 0 1px 8px rgba(21, 19, 19,.45); }
.g-tile:hover span, .g-tile:focus-visible span { opacity: 1; }
.gallery-foot { margin-top: var(--gap-m); display: flex; justify-content: center; }
/* 1001 Robert: shorter section bottom, bigger IG icon + handle, icon bounces on handle hover */
.gallery-sec { padding-bottom: max(2rem, calc(var(--sy-tight) * .55)); }
.gallery-foot .ig-cta { font-size: 1.0625rem; gap: .6rem; }
.gallery-foot .ig-icon { width: 22px; height: 22px; }
@keyframes ig-bounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } 55% { transform: translateY(0); } 75% { transform: translateY(-2px); } }
.gallery-foot .ig-cta:hover .ig-icon, .gallery-foot .ig-cta:focus-visible .ig-icon { animation: ig-bounce .6s var(--ease, ease) 1; }
@media (prefers-reduced-motion: reduce) { .gallery-foot .ig-cta:hover .ig-icon, .gallery-foot .ig-cta:focus-visible .ig-icon { animation: none; } }
@media (max-width: 700px) { .gallery-grid { grid-template-columns: 1fr 1fr; } .gallery-grid .g-tile:first-child { aspect-ratio: 4/5; } .g-tile span { opacity: 1; } }

/* close CTA with photo */
.close-cta { position: relative; overflow: hidden; color: var(--blush); padding: var(--sy-feature) var(--gutter); }
.close-inner { position: relative; z-index: 2; width: min(100%, var(--max)); margin: 0 auto; }
.close-inner { text-align: center; }
.close-inner > * { max-width: 40rem; margin-inline: auto; }
.close-cta .hero-ctas { justify-content: center; }
.close-cta h2 { margin-bottom: 1.1rem; }
.close-cta p { color: rgba(239, 233, 223,.86); max-width: 60ch; margin: 0 auto 2rem; }


/* ——— Footer ——— */
.site-footer { background: var(--ink); color: rgba(239, 233, 223,.86); padding: clamp(3.5rem, 8vw, 5.5rem) var(--gutter) calc(1.75rem + env(safe-area-inset-bottom)); }
.footer-top { display: grid; justify-items: center; gap: .8rem; margin-bottom: clamp(2.5rem, 6vw, 4rem); text-align: center; }
.footer-brand { color: var(--blush); display: inline-block; }
.footer-logo { width: clamp(15rem, 30vw, 22rem); height: auto; overflow: visible; }
.footer-tag { font-family: var(--font-script); color: var(--honey); font-size: var(--fs-h3); letter-spacing: var(--ls-head); }
.footer-grid { width: min(100%, var(--max)); margin: 0 auto 2.75rem; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; } /* 0930: Book column removed (header + mobile bar carry it) */
.footer-grid h2 { font-family: var(--font-body); font-size: var(--fs-meta); font-weight: var(--fw-ui); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--honey); margin-bottom: .9rem; }
.footer-grid p + p { margin-top: .8rem; }
.footer-grid li + li { margin-top: 0; }
.footer-grid a { display: inline-flex; align-items: center; min-height: 44px; } /* 44px tap targets */
.footer-grid a:hover { color: var(--blush); }
.footer-muted { color: rgba(239, 233, 223,.68); font-size: var(--fs-small); }
.footer-ig { display: inline-flex; align-items: center; gap: .5rem; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; max-width: 15rem; white-space: nowrap; }
.hours li span:first-child { color: rgba(239, 233, 223,.72); }
.reach .hours li span:first-child { color: var(--ink-mute); }
.footer-bottom { width: min(100%, var(--max)); margin: 0 auto; padding-top: 1.5rem; border-top: 1px solid var(--line-light); display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; justify-content: space-between; align-items: center; font-size: var(--fs-micro); letter-spacing: .02em; color: rgba(239, 233, 223,.5); }

/* mobile sticky bar */
.mobile-cta-bar { display: none; position: fixed; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 60; gap: .4rem; padding: .3rem; background: rgba(21, 19, 19,.94); backdrop-filter: blur(12px); border-radius: 999px; box-shadow: 0 12px 30px rgba(21, 19, 19,.3); transform: translateY(140%); transition: transform .5s var(--ease); }
.mobile-cta-bar.is-on { transform: none; }
.mobile-cta-bar .btn { flex: 1; min-height: 3.1rem; padding-inline: .5rem calc(.5rem - var(--track)); }

/* ——— Contact ——— */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.reach > * + * { margin-top: 1.5rem; }
.reach-list { display: grid; gap: 1.25rem; margin: 0; }
.reach-list dt { font-size: var(--fs-meta); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--clay-ink); margin-bottom: .25rem; }
.reach-list dd { margin: 0; }
.map-frame { margin: 0; aspect-ratio: 16/10; overflow: hidden; border: 1px solid var(--line); background: var(--blush-3); }
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.85) sepia(.25) hue-rotate(-12deg) contrast(.95); transition: filter .5s; }
.map-frame:hover iframe { filter: none; }

/* ——— Reveal ——— */
.js .reveal { opacity: 0; }
.js .reveal.is-in { opacity: 1; transition: opacity .4s var(--ease); }

/* ——— Responsive ——— */
@media (max-width: 1080px) {
  .site-header { grid-template-columns: 1fr auto; }
  .nav-center, .header-ctas { display: none; }
  .menu-toggle { display: inline-flex; }
  .brand-logo { height: 2.25rem; }
}
@media (min-width: 1081px) { .nav-drawer { display: none !important; } }
@media (max-width: 900px) {
  .intro-grid { grid-template-columns: 1fr; }
  .intro-head { max-width: 20ch; }
  .split, .contact-grid { grid-template-columns: 1fr; }
  .split-rev .split-media { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .mobile-cta-bar { display: flex; }
  main { padding-bottom: 0; }
  .site-footer { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  }
@media (max-width: 600px) {
  .hero-logo { width: 82vw; }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 2rem; text-align: left; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .head-row { align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ═════════ Home: Meet the team drift carousel (integrator) ═════════ */
.drift { display: flex; overflow: hidden; gap: .9rem; margin: var(--gap-l) calc(-1 * var(--gutter)) 0; padding: 0 0 .5rem; } /* full bleed: tiles run off both viewport edges, no mask fade, no hard clip at the gutter (audit S10) */
.drift-track { display: flex; gap: .9rem; flex: none; animation: drift 48s linear infinite; }
.drift:hover .drift-track, .drift:focus-within .drift-track { animation-play-state: paused; }
@keyframes drift { to { transform: translateX(calc(-100% - .9rem)); } }
.drift-track li { flex: none; width: clamp(9.5rem, 15vw, 13rem); }
.drift-track a { display: block; }
.drift-track img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
/* home strip: handle label is its own Instagram link (1001) */
.drift-track a.cs-role { text-decoration: none; color: var(--ink-mute); }
.cs-name .cs-owner, .cs-owner { font-size: var(--fs-micro); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--ink-mute); font-weight: 400; margin-left: .3em; vertical-align: baseline; }
.drift-track a.cs-role:hover, .drift-track a.cs-role:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
@media (prefers-reduced-motion: reduce) { .drift { overflow-x: auto; } .drift-track[aria-hidden="true"] { display: none; } }


/* ═════════ Pinned photo backgrounds (Runtime) ═════════
   Hook: data-pin + style="--pin:url ('assets/photos/x.webp')" on a full-bleed photo layer (.hero-media, .band-media, .ab-bg).
   The layer is pinned to the viewport; the section's content scrolls over it. Home hero is NOT pinned (logo lift runs there).
   Rule: nothing on a pinned layer or its ancestors may carry transform / filter / will-change / contain / perspective. */
[data-pin] { inset: 0 !important; transform: none !important; will-change: auto !important; }
/* Desktop, mouse: a real fixed background on the layer itself, no JS. Scrims/washes stay in the layer's ::after (no transform). */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
  [data-pin] { background: var(--pin) center / cover no-repeat fixed; }
  [data-pin] > img { display: none !important; }
}
/* Touch / iOS / narrow: background-attachment: fixed is unreliable, so clip a position: fixed image to the layer */
@media not all and (hover: hover) and (pointer: fine) and (min-width: 769px) {
  [data-pin] { clip-path: inset(0); -webkit-clip-path: inset(0); }
  [data-pin] > img { position: fixed !important; top: 0; left: 0; width: 100vw !important; height: 100vh !important; height: 100lvh !important; max-width: none; object-fit: cover; }
}
/* Tori has no public photos yet: solid tile, no reused headshot (Robert: no photo appears twice) */
.drift-track .cs-solid { display: block; width: 100%; aspect-ratio: 4/5; background: var(--cocoa); }

/* ——— 0930: centred type system (TYPE.md, REFERENCE-NOTES.md) ——— */
/* Team hero (Robert 12:49): h1 in the vertical + horizontal middle of the hero (below the header bar), and the pinned
   photo shifted up (anchored to its bottom edge) so the ring of faces fills the hero. Position only: no transform on the photo layer. */
.team-hero { align-items: center; }
.team-hero .page-hero-content { padding-top: var(--header-h); padding-bottom: 0; }
.team-hero [data-pin] { background-position: 50% 100%; }
.team-hero [data-pin] > img { object-position: 50% 100%; }
.team-tease > .section-inner:first-child { text-align: center; }
.gallery-sec .display { margin-bottom: 0; }

/* 0930 (Critiquito): every stand-alone link/button reaches a 44×44px hit area without moving its underline or the layout */
.footer-grid a { min-width: 44px; }
:is(.intro-menu, .team-tease-foot a, .gallery-foot a, .rv-actions a, .footer-ig, .ab-link, .ab-ig, .ct-phone, .ct-nap-links a, .fg-card-ig, .fg-lb-ig) { position: relative; }
:is(.intro-menu, .team-tease-foot a, .gallery-foot a, .rv-actions a, .footer-ig, .ab-link, .ab-ig, .ct-phone, .ct-nap-links a, .fg-card-ig, .fg-lb-ig)::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }

/* ——— 1250: mobile home hero (Robert) ———
   Shorter than the viewport, sized to the photo: the pinned image is ~124vw wide at its natural aspect (1800×1286),
   offset so the seven girls sit centred with only a sliver cropped at the edges. It stays position: fixed (Runtime's pin). */
@media (max-width: 768px) {
  .hero { min-height: calc(var(--header-h) + 124vw * 1286 / 1800); min-height: calc(var(--header-h) + 88.6vw); }
  .hero [data-pin] { background: var(--ink); }
  .hero [data-pin] > img { top: var(--header-h) !important; left: -9vw !important; width: 124vw !important; height: 88.6vw !important; object-fit: cover; object-position: 50% 30%; }
  .hero-lockup { top: calc(var(--header-h) + 44.3vw); }
}

/* ——— 1001 Robert: desktop home hero framing ———
   hero-team-centered.webp = the same photo with 240px of matching backdrop added on the left, so Ashley sits on the
   centre line. Slight zoom (108vw), and the group is lowered so the tallest hair clears the header bar by ~24px. Legs stay in frame. */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
  .hero [data-pin] {
    /* 1001 c: centred on Ashley (face at 50.2% of the photo width), group centred vertically between the header and the fold.
       Slight zoom (110vw) unless the group would get too tall for the window, never smaller than cover. */
    --hw: max(101vw, 158.6vh, min(117vw, (100vh - 56px) * 2.06));
    /* 1001 r: balanced copy has 120px more matching backdrop on the right (2160 wide), so the group can sit evenly between
       the left and right edges at the same size (no extra zoom). --hw still measures the original 2040px photo. */
    background-image: url("https://static.zemi-cdn.com/sites/26/r3-232bbd354041/assets/images/hero-team-balanced.webp");
    background-size: calc(var(--hw) * 2160 / 2040) auto;
    background-position: max(calc(50vw - var(--hw) * .527), calc(100vw - var(--hw) * 2160 / 2040)) calc((var(--header-h) + 100vh) / 2 - var(--hw) * .326);
  }
}

/* ——— 1400: mobile Book/Call bar never covers content ———
   header.js hides the bar over the booking ledger (all three Home rows), the hero, booking links and ~96px before the footer.
   Focus/anchor scrolling keeps targets clear of the bar, and the bar respects the iPhone home indicator. */
@media (max-width: 900px) {
  html { scroll-padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
  .mobile-cta-bar { bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); }
}

/* ——— 1400: About brand ticker (item 9) ———
   One real set plus three aria-hidden copies (one set is narrower than the strip); the track moves exactly one set width (-25%), so the seam never jumps.
   Edges fade out with a mask (works on any section background). Pauses on hover and keyboard focus. Monochrome ink logos. */
.tk { position: relative; z-index: 1; width: min(100%, 72rem); margin: 0 auto; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.tk-track { display: flex; width: max-content; animation: tk-scroll var(--tk-dur, 32s) linear infinite; }
.tk-set { display: flex; flex: none; align-items: center; gap: var(--tk-gap, 5.5rem); padding-right: var(--tk-gap, 5.5rem); margin: 0; list-style: none; }
.tk-set li { flex: none; display: grid; place-items: center; height: 4rem; }
.tk-set img { width: auto; opacity: .86; transition: opacity .4s var(--ease); }
.tk-set li:hover img { opacity: 1; }
.tk:hover .tk-track, .tk:focus-within .tk-track { animation-play-state: paused; }
@keyframes tk-scroll { to { transform: translateX(-25%); } }
.tk:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
@media (max-width: 768px) {
  .tk { --tk-dur: 40s; --tk-gap: 3rem; }
  .tk-set li { height: 3rem; }
  .tk-set .lg-kovi { height: 2.1rem; }
  .tk-set .lg-pulp { height: 2rem; }
  .tk-set .lg-k18 { height: 1.75rem; }
  .tk-set .lg-bb { width: 8rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  .tk { -webkit-mask-image: none; mask-image: none; }
  .tk-track { animation: none; width: auto; justify-content: center; }
  .tk-set { flex-wrap: wrap; justify-content: center; gap: 2rem 3rem; padding-right: 0; }
  .tk-set[aria-hidden="true"] { display: none; }
}

/* ——— 1758: Home girls strip driven by components/drift/drift.js (rAF drift + wheel + chevrons + touch drag) ———
   The CSS animation stays as the no-JS fallback; .is-js hands the offset to JS. Chevrons match the Team stage arrows. */
.drift { position: relative; }
.drift.is-js { touch-action: pan-y; overscroll-behavior-x: contain; }
.drift.is-js .drift-track { animation: none; }
.drift-chev { display: none; }
.drift.is-js .drift-chev { position: absolute; z-index: 2; top: calc(clamp(9.5rem, 15vw, 13rem) * .625); width: 2.75rem; height: 2.75rem; margin-top: -1.375rem; padding: 0; border: 0; border-radius: 50%;
  background: rgba(248, 245, 239, .78); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background-color .3s var(--ease); }
.drift.is-js .drift-chev:hover { background: var(--white); }
.drift-chev:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.drift-prev { left: max(.75rem, var(--gutter)); }
.drift-next { right: max(.75rem, var(--gutter)); }
@media (prefers-reduced-motion: reduce) {
  .drift.is-js { overflow-x: hidden; }
  .drift.is-js .drift-track[aria-hidden="true"] { display: flex; }
  .drift-chev { transition: none !important; }
}

/* ═════════ 1001 mobile pass (Robert) — phones/tablets only; desktop (≥1081 menu, ≥769 heroes) untouched ═════════ */
/* Mobile menu: same language as the site (ink, cream hairlines like the service rows, Marcellus items, Jost small text, site pills) */
@media (max-width: 1080px) {
  .nav-drawer {
    justify-content: center; justify-content: safe center; gap: clamp(1.5rem, 4.5vh, 2.25rem); overflow-y: auto; overscroll-behavior: contain;
    padding: calc(var(--header-h) + 1rem) var(--gutter) calc(1.75rem + env(safe-area-inset-bottom));
    background: var(--ink); color: var(--cream); cursor: default;
    clip-path: none; transform: translateY(-.5rem);
    transition: opacity .32s var(--ease), transform .32s var(--ease), visibility 0s linear .32s;
  }
  .nav-drawer.is-open { clip-path: none; transform: none; transition: opacity .32s var(--ease), transform .32s var(--ease), visibility 0s; }
  .drawer-links { width: min(100%, 22rem); gap: 0; border-top: 1px solid rgba(239, 233, 223, .16); }
  .drawer-links a { display: flex; align-items: center; justify-content: center; min-height: 3.6rem; border-bottom: 1px solid rgba(239, 233, 223, .16);
    font-family: var(--font-head); font-weight: 400; font-size: clamp(1.375rem, 1.2rem + .9vw, 1.75rem); line-height: 1.2; letter-spacing: .04em; color: var(--cream);
    transform: translateY(8px); transition: transform .45s var(--ease), opacity .45s var(--ease), color .2s; }
  .drawer-links a:hover { color: var(--white); }
  .drawer-links a[aria-current="page"] { font-style: normal; color: var(--white); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em; }
  .drawer-ctas { width: min(100%, 22rem); gap: .6rem; }
  .drawer-ctas .btn { min-height: 2.9rem; }
  .drawer-ig { min-height: 44px; font-family: var(--font-body); font-size: var(--fs-small); letter-spacing: .02em; color: rgba(239, 233, 223, .78); opacity: 1; }
  .drawer-ig:hover { color: var(--cream); }
  .drawer-ig svg { width: 1.05rem; height: 1.05rem; }
}
/* No sideways scroll: Chrome/Safari on phones widen the layout viewport for any overflow even with body overflow-x clip
   (About intro was 12px too wide during its slide-in, making every fixed layer 402px at 390). */
@media (max-width: 900px) { main { overflow-x: clip; } }
/* Mobile heroes: shorter, static (no pinned/fixed image), each photo framed on its subject */
@media (max-width: 768px) {
  body :is(.page-hero, .team-hero, .ab-hero, .ct-hero) [data-pin] > img,
  body .ct-hero .hero-media > img { position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; }
  body .hero [data-pin] > img { position: absolute !important; }
  body .ab-hero { min-height: 58svh; }
  body .ab-hero .hero-media img { object-position: 62% 18%; }
  body .team-hero { min-height: max(20rem, 48svh); }
  body .team-hero [data-pin] > img { object-position: 50% 88%; }
  body .page-hero { min-height: 38svh; }
  body .page-hero .hero-media img { object-position: 50% 40%; }
  body .ct-hero { min-height: 36svh; }
  body .ct-hero .hero-media img { object-position: 50% 46%; }
}
/* 1001 mobile pass 2: 44px hit areas on the small text links still under 44 (invisible ::before, no layout change) */
@media (max-width: 900px) {
  :is(.ab-intro-copy a, .fg-cta, .pf-a .pf-a-dir) { position: relative; }
  :is(.ab-intro-copy a, .fg-cta, .pf-a .pf-a-dir)::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
  .drift { padding-bottom: 1.75rem; }
  .drift-track a.cs-role { position: relative; }
  .drift-track a.cs-role::before { content: ""; position: absolute; left: 0; right: 0; top: -.25rem; height: 44px; } /* grows downward only, so it never steals taps from the portrait link above */
  .ab-intro-cta { min-height: 44px; }
}
/* 1001 mobile pass 2: About intro stacks to one column on phones, so centre it like every other single-column intro on the site */
@media (max-width: 900px) {
  body .ab-intro .ab-intro-inner { text-align: center; }
  body .ab-intro .ab-intro-title.h-script { text-align: center; margin-inline: auto; }
  body .ab-intro .ab-intro-copy p { margin-inline: auto; }
}

/* Site footer (promoted from footer option A, 1001). Markup: <footer class="site-footer pf pf-a">.
   Source: components/footer-options/footer-options.css (.pf base + .pf-a), copied verbatim except the bottom row (.pf-a-base),
   which is now ONE row: copyright truly centred, "Built by" + Performance One mark at the far right (grid 1fr auto 1fr).
   1001 owner pass: whole footer ~13% smaller than option A (type, logo, spacing ×≈.87) and vertical rhythm tightened further
   (top/bottom padding, row gaps). Credit "Built by" + mark ~20%/25% smaller than A. Mobile bar clearance (--pf-bar) unchanged.
   Keeps .site-footer so header.js still moves the mobile Book/Call bar aside before the footer.
   Palette: ink #151313, white #f8f5ef, cream #efe9df. Type: logo script SVG, Marcellus, Jost. */
.pf { --pf-line-d: rgba(239, 233, 223, .16); --pf-line-l: rgba(21, 19, 19, .14); --pf-bar: 0rem; text-align: center; }
@media (max-width: 900px) { .pf { --pf-bar: 1rem; } } /* 1001: was 4.75rem (full bar height). header.js already hides the bar ~96px before the footer
   enters (and it is off without JS), so the bar never overlaps the footer; only a small cushion is kept. */
.pf svg.pf-logo { width: 100%; height: auto; overflow: hidden; } /* clip to the viewBox: the trace's outer knockout leaves a hairline seam under "Pretty" when overflow is visible */
.pf .pf-credit { display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; font-size: .75rem; letter-spacing: .04em; }
.pf .pf-credit img { height: 1.75rem; width: auto; }
.pf address { font-style: normal; }
.pf .pf-hours { display: inline-grid; grid-template-columns: auto auto; gap: .3rem 1.4rem; text-align: left; font-size: var(--fs-small); }
.pf .pf-hours li { display: contents; }
.pf a.pf-tap { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }

/* ——— Footer (option A, scaled ≈.87 + tightened) ——— */
.site-footer.pf-a { background: var(--ink); color: rgba(239, 233, 223, .84);
  padding: clamp(2.75rem, 5vw, 4rem) var(--gutter) calc(1.25rem + var(--pf-bar) + env(safe-area-inset-bottom)); }
.pf-a .pf-a-brand { display: block; width: clamp(14.8rem, 28.7vw, 23.5rem); margin: 0 auto; color: var(--white); } /* A: clamp(17rem, 33vw, 27rem) */
.pf-a .pf-a-nav { margin-top: clamp(.9rem, 1.8vw, 1.4rem); display: flex; flex-wrap: wrap; justify-content: center; gap: 0 clamp(1.5rem, 3vw, 2.6rem); }
.pf-a .pf-a-nav a { font-family: var(--font-head); font-size: .925rem; letter-spacing: .06em; color: var(--cream); }
.pf-a .pf-a-nav a:hover { color: var(--white); }
.pf-a .pf-a-info { width: min(100%, 54rem); margin: clamp(1.4rem, 2.8vw, 2.1rem) auto 0; display: grid; grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--pf-line-d); }
.pf-a .pf-a-cell { padding: clamp(1.2rem, 2.1vw, 1.6rem) 1.3rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; }
.pf-a .pf-a-cell + .pf-a-cell { border-left: 1px solid var(--pf-line-d); }
.pf-a address { font-family: var(--font-head); font-size: .98rem; line-height: 1.5; color: var(--white); letter-spacing: .01em; }
.pf-a .pf-a-dir { font-size: .82rem; color: rgba(239, 233, 223, .78); }
.pf-a .pf-a-dir:hover { color: var(--white); }
.pf-a .pf-hours { font-size: .82rem; gap: .26rem 1.2rem; }
.pf-a .pf-hours dt, .pf-a .pf-hours span:first-child { color: rgba(239, 233, 223, .6); }
.pf-a .pf-hours span:last-child { color: var(--white); }
.pf-a .pf-a-tel { font-family: var(--font-head); font-size: 1.2rem; letter-spacing: .02em; color: var(--white); min-height: 44px; display: inline-flex; align-items: center; }
.pf-a .btn { min-height: 2.75rem; font-size: calc(var(--fs-meta) * .87); padding: 0 1.25rem 0 calc(1.25rem + var(--track)); }
/* Bottom row: one row, 3-col grid. Col 2 = copyright (truly page-centred, side columns are equal 1fr), col 3 = credit flush right. */
.pf-a .pf-a-base { margin-top: clamp(.6rem, 1.2vw, .9rem); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 1.25rem; }
.pf-a .pf-a-copy { grid-column: 2; text-align: center; white-space: nowrap; font-size: .71rem; letter-spacing: .04em; color: rgba(239, 233, 223, .6); }
.pf-a .pf-credit { grid-column: 3; justify-self: end; white-space: nowrap; gap: .5rem; font-size: .6rem; color: rgba(239, 233, 223, .6); } /* A: .75rem text, .75rem gap */
.pf-a .pf-credit img { height: 1.3rem; } /* A: 1.75rem */
.pf-a .pf-credit:hover { color: var(--cream); }
/* Too narrow for the credit beside a centred copyright: copyright stays centred, credit sits directly below, flush right. */
@media (max-width: 499px) {
  .pf-a .pf-a-base { grid-template-columns: 1fr; row-gap: 0; }
  .pf-a .pf-a-copy { grid-column: 1; justify-self: center; padding-top: .6rem; }
  .pf-a .pf-credit { grid-column: 1; justify-self: end; }
}
@media (max-width: 760px) {
  .site-footer.pf-a { padding-top: 3rem; }
  .pf-a .pf-a-info { grid-template-columns: 1fr; width: min(100%, 19.5rem); margin-top: 1.4rem; }
  .pf-a .pf-a-cell { padding: 1.25rem 0; }
  .pf-a .pf-a-cell + .pf-a-cell { border-left: 0; border-top: 1px solid var(--pf-line-d); }
  .pf-a .pf-a-nav { gap: 0 1.2rem; }
  .pf-a .pf-a-nav a { font-size: .9rem; }
}
/* Tablet: three cells are narrow, keep the address on its two intended lines (no orphaned "109") */
@media (min-width: 761px) and (max-width: 1023px) {
  .pf-a .pf-a-cell { padding-inline: .6rem; }
  .pf-a address { font-size: .9rem; white-space: nowrap; }
}
/* 1001 mobile pass: phones follow the option A prototype at 390 (logo 17rem, A's type sizes, 22rem info column)
   with tighter vertical spacing than A, centred copyright and the smaller "Built by" + mark flush right */
@media (max-width: 760px) {
  .site-footer.pf-a { padding-top: 3.5rem; }
  .pf-a .pf-a-brand { width: 17rem; }
  .pf-a .pf-a-nav { margin-top: 1.4rem; gap: 0 1.4rem; }
  .pf-a .pf-a-nav a { font-size: 1rem; }
  .pf-a .pf-a-info { width: min(100%, 22rem); margin-top: 2rem; }
  .pf-a .pf-a-cell { padding: 1.5rem 0; gap: .75rem; }
  .pf-a address { font-size: 1.125rem; white-space: normal; }
  .pf-a .pf-a-dir, .pf-a .pf-hours { font-size: var(--fs-small); }
  .pf-a .pf-hours { gap: .3rem 1.4rem; }
  .pf-a .pf-a-tel { font-size: 1.375rem; }
  .pf-a .btn { font-size: var(--fs-meta); padding: 0 1.45rem 0 calc(1.45rem + var(--track)); min-height: 2.9rem; }
  .pf-a .pf-a-base { margin-top: 1.25rem; }
  .pf-a .pf-a-copy { font-size: .8125rem; }
  .pf-a .pf-credit { font-size: .65rem; gap: .55rem; }
  .pf-a .pf-credit img { height: 1.4rem; }
}
@media (max-width: 900px) { .pf-a a.pf-tap { min-width: 44px; } } /* "Team" was 43px wide */

/* Forge · Team page (team.html). Shared tokens from styles.css :root; no shared rules edited. */

/* Hero: full-bleed photo, heading only. Height is owned by shared CSS (.team-hero). */
.fg-hero .hero-media img:where(body.css-team, body.css-team *) { object-position: 50% 42%; }

/* Stage */
.fg-team:where(body.css-team, body.css-team *) { --cw: 15rem; --ph: clamp(24rem, calc(100svh - 7rem), 44rem); background: var(--blush); padding: var(--section-y) var(--gutter); scroll-margin-top: var(--header-h); }
.fg-stage:where(body.css-team, body.css-team *) { width: min(100%, var(--max)); margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 34rem); justify-content: center; gap: 0; align-items: start; } /* 0930: photo + name/grid block balanced on the page centre */
.fg-visual:where(body.css-team, body.css-team *) { grid-column: 1; grid-row: 1; }
.fg-info:where(body.css-team, body.css-team *) { grid-column: 2; grid-row: 1; padding-left: clamp(2rem, 4vw, 4rem); }
.fg-info:where(body.css-team, body.css-team *) { display: flex; flex-direction: column; justify-content: center; min-height: var(--ph); position: relative; z-index: 0; transition: padding-left .7s var(--ease); } /* name, role and grid as one block, centred on the photo */
.fg-name:where(body.css-team, body.css-team *) { line-height: 1.15; }
.fg-role:where(body.css-team, body.css-team *) { margin: .55rem 0 0; font-size: var(--fs-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); max-width: 34ch; min-height: 1.3em; }
.fg-thumbs:where(body.css-team, body.css-team *) { margin-top: 2.25rem; padding-top: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 6.5rem)); gap: 2.1rem .9rem; padding-bottom: 1.4rem; } /* audit S3: the selector fills the right column instead of 50px chips */
.fg-thumb:where(body.css-team, body.css-team *) { position: relative; padding: 0; border: 0; background: var(--blush-3); cursor: pointer; aspect-ratio: 4 / 5; border-radius: 2px; }
.fg-thumb img:where(body.css-team, body.css-team *) { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; border-radius: inherit; transition: opacity .4s var(--ease); } /* audit S14: full colour, no grayscale */
.fg-thumb:where(body.css-team, body.css-team *)::before { content: ""; position: absolute; left: 0; right: 0; top: -.45rem; height: 2px; background: var(--clay); transform: scaleX(0); transition: transform .5s var(--ease); }
.fg-thumb:where(body.css-team, body.css-team *)::after { content: attr(aria-label); position: absolute; left: 0; top: calc(100% + .45rem); font-size: var(--fs-micro); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; pointer-events: none; }
.fg-thumb:hover img:where(body.css-team, body.css-team *), .fg-thumb:focus-visible img:where(body.css-team, body.css-team *) { opacity: .88; }

.fg-thumb[aria-pressed="true"] img:where(body.css-team, body.css-team *) { opacity: 1; }
.fg-thumb[aria-pressed="true"]:where(body.css-team, body.css-team *)::before { transform: scaleX(1); }

.fg-visual:where(body.css-team, body.css-team *) { position: relative; z-index: 2; }
.fg-photo:where(body.css-team, body.css-team *) { position: relative; z-index: 2; margin: 0; height: var(--ph); aspect-ratio: 4 / 5; overflow: hidden; background: var(--blush-3); }
.fg-img:where(body.css-team, body.css-team *) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

/* card tucked behind the photo; slides out to the right */
.fg-card:where(body.css-team, body.css-team *) { position: absolute; z-index: 1; top: 50%; left: calc(100% - var(--cw)); width: var(--cw); transform: translate(0, -50%); opacity: 0; visibility: hidden;
  display: grid; gap: .85rem; padding: 1.5rem 1.35rem 1.35rem 1.9rem; background: var(--blush-2); border: 1px solid var(--line); box-shadow: 0 24px 48px -30px rgba(21, 19, 19,.45);
  transition: transform .7s var(--ease), opacity .35s var(--ease), visibility 0s linear .7s; }
.fg-visual.is-open .fg-card:where(body.css-team, body.css-team *) { transform: translate(calc(var(--cw) - 1px), -50%); opacity: 1; visibility: visible; transition: transform .7s var(--ease), opacity .3s var(--ease), visibility 0s; }
.fg-card-name:where(body.css-team, body.css-team *) { font-size: var(--fs-h3); font-style: italic; font-weight: 400; }
.fg-card-actions:where(body.css-team, body.css-team *) { display: grid; gap: .5rem; }
.fg-card-actions .btn:where(body.css-team, body.css-team *) { width: 100%; }
.fg-card-ig:where(body.css-team, body.css-team *) { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-small); color: var(--ink-soft); }
.fg-card-ig span:where(body.css-team, body.css-team *) { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease); }
.fg-card-ig:hover:where(body.css-team, body.css-team *) { color: var(--ink); }
.fg-card-ig:hover span:where(body.css-team, body.css-team *), .fg-card-ig:focus-visible span:where(body.css-team, body.css-team *) { background-size: 100% 1px; }
.fg-card-ig[hidden]:where(body.css-team, body.css-team *) { display: none; }

.fg-chev:where(body.css-team, body.css-team *) { position: absolute; z-index: 3; top: 50%; right: -1.4rem; width: 2.8rem; height: 2.8rem; margin-top: -1.4rem; border: 0; border-radius: 50%; background: var(--ink); color: var(--blush); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 10px 24px rgba(21, 19, 19,.3); transition: transform .7s var(--ease), background-color .3s; }
.fg-chev svg:where(body.css-team, body.css-team *) { transition: transform .6s var(--ease); animation: fg-nudge 2.6s var(--ease-io) 1.2s 3; }
.fg-chev:hover:where(body.css-team, body.css-team *) { background: var(--cocoa); }
.fg-visual.is-open .fg-chev:where(body.css-team, body.css-team *) { transform: translateX(var(--cw)); }
.fg-visual.is-open .fg-chev svg:where(body.css-team, body.css-team *) { transform: rotate(180deg); animation: none; }
@keyframes fg-nudge { 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(3px); } }

/* Lightbox */
.fg-lb:where(body.css-team, body.css-team *) { width: min(100% - 2rem, 62rem); max-width: none; max-height: calc(100vh - 2rem); padding: 0; border: 0; background: transparent; color: var(--blush); overflow: visible; }
.fg-lb:where(body.css-team, body.css-team *)::backdrop { background: rgba(21, 19, 19,.9); }
.fg-lb:not([open]):where(body.css-team, body.css-team *) { display: none; }
.fg-lb-inner:where(body.css-team, body.css-team *) { display: grid; gap: 1rem; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .3s var(--ease), transform .5s var(--ease); }
.fg-lb.is-open .fg-lb-inner:where(body.css-team, body.css-team *) { opacity: 1; transform: none; }
.fg-lb-head:where(body.css-team, body.css-team *) { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.fg-lb-title:where(body.css-team, body.css-team *) { font-size: var(--fs-h2); }
.fg-lb-title em:where(body.css-team, body.css-team *) { color: var(--honey); }
.fg-lb-close:where(body.css-team, body.css-team *) { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgba(239, 233, 223,.4); background: none; color: var(--blush); display: grid; place-items: center; cursor: pointer; transition: background-color .3s, color .3s; }
.fg-lb-close:hover:where(body.css-team, body.css-team *) { background: var(--blush); color: var(--ink); }
.fg-lb :focus-visible:where(body.css-team, body.css-team *) { outline-color: var(--honey); }
.fg-lb-track:where(body.css-team, body.css-team *) { display: flex; justify-content: safe center; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; scrollbar-width: thin; }
.fg-lb-track figure:where(body.css-team, body.css-team *) { margin: 0; flex: 0 0 min(72vw, 20rem); aspect-ratio: 4 / 5; max-height: calc(100vh - 11rem); scroll-snap-align: start; overflow: hidden; background: rgba(239, 233, 223,.08); }
.fg-lb-track img:where(body.css-team, body.css-team *) { width: 100%; height: 100%; object-fit: cover; } /* 1001 igwork: 20rem tiles so a 3-photo set fits the 62rem dialog exactly; 4 scroll-snap */
.fg-lb.is-open .fg-lb-track figure:where(body.css-team, body.css-team *) { animation: fg-rise .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
.fg-lb-track.is-empty:where(body.css-team, body.css-team *) { justify-content: flex-start; padding: 1.5rem 0 .5rem; }
.fg-lb-note:where(body.css-team, body.css-team *) { margin: 0; max-width: 26ch; font-family: var(--font-display); font-style: italic; font-size: var(--fs-h3); line-height: 1.25; color: rgba(239, 233, 223,.9); }
.fg-lb-ig:where(body.css-team, body.css-team *) { display: inline-flex; gap: .5rem; align-items: center; justify-self: start; font-size: var(--fs-small); color: var(--honey); }
.fg-lb-ig:hover:where(body.css-team, body.css-team *) { color: var(--blush); }
.fg-lb-ig[hidden]:where(body.css-team, body.css-team *) { display: none; }
@keyframes fg-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }


/* "Book with the girls": compact full-bleed photo band, one CTA, content on the container's left edge */
.fg-band:where(body.css-team, body.css-team *) { position: relative; overflow: hidden; color: var(--blush); padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter); }
.fg-band-media:where(body.css-team, body.css-team *) { position: absolute; inset: 0; z-index: 0; background-color: var(--cocoa); }
.fg-band-media img:where(body.css-team, body.css-team *) { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.fg-band:where(body.css-team, body.css-team *)::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(var(--scrim-rgb), .78) 0%, rgba(21, 19, 19,.55) 55%, rgba(var(--scrim-rgb), .35) 100%); }
.fg-band-inner:where(body.css-team, body.css-team *) { position: relative; z-index: 2; width: min(100%, var(--max)); margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; } /* 0930: centred */
.fg-band h2:where(body.css-team, body.css-team *) { color: var(--blush); }
.fg-band :focus-visible:where(body.css-team, body.css-team *) { outline-color: var(--honey); }

/* the open card takes the left of the right column; the name/role/grid block moves over so nothing is covered */
@media (min-width: 901px) {
  .fg-stage:has(.fg-visual.is-open) .fg-info:where(body.css-team, body.css-team *) { padding-left: calc(var(--cw) + clamp(2rem, 3vw, 3rem)); }
}

/* Mobile / tablet */
@media (max-width: 900px) {
  .fg-team:where(body.css-team, body.css-team *) { --ph: auto; padding-top: 1rem; }
  .fg-stage:where(body.css-team, body.css-team *) { grid-template-columns: 1fr; gap: 1rem; }
  .fg-info:where(body.css-team, body.css-team *) { padding-left: 0; }
  .fg-info:where(body.css-team, body.css-team *) { display: contents; }
  .fg-name:where(body.css-team, body.css-team *) { order: 1; text-align: center; }
  .fg-role:where(body.css-team, body.css-team *) { order: 2; margin: -.55rem auto 0; text-align: center; }
  .fg-visual:where(body.css-team, body.css-team *) { order: 3; margin-right: 0; display: flex; flex-direction: column; grid-column: auto; grid-row: auto; }
  .fg-photo:where(body.css-team, body.css-team *) { order: 1; height: auto; width: 100%; aspect-ratio: 4 / 4.5; }
  .fg-thumbs:where(body.css-team, body.css-team *) { order: 4; margin-top: .35rem; padding-top: 0; padding-bottom: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; } /* 0930: 4 across so every thumb clears 44px */
  .fg-thumb:where(body.css-team, body.css-team *)::after { display: none; }
  .fg-thumb:where(body.css-team, body.css-team *)::before { top: auto; bottom: -.35rem; }
  .fg-chev:where(body.css-team, body.css-team *) { top: auto; bottom: -1.4rem; right: 1rem; margin-top: 0; }
  .fg-chev svg:where(body.css-team, body.css-team *) { transform: rotate(90deg); animation: none; }
  .fg-visual.is-open .fg-chev:where(body.css-team, body.css-team *) { transform: none; }
  .fg-visual.is-open .fg-chev svg:where(body.css-team, body.css-team *) { transform: rotate(-90deg); }
  .fg-card:where(body.css-team, body.css-team *) { order: 2; position: relative; top: auto; left: auto; width: auto; transform: none; opacity: 1; visibility: hidden; max-height: 0; overflow: hidden; padding: 0 1.1rem; border-top: 0;
    transition: max-height .6s var(--ease), padding .6s var(--ease), visibility 0s linear .6s; }
  .fg-visual.is-open .fg-card:where(body.css-team, body.css-team *) { transform: none; visibility: visible; max-height: 22rem; padding: 2rem 1.1rem 1.25rem; transition: max-height .6s var(--ease), padding .6s var(--ease), visibility 0s; }
  .fg-card-actions:where(body.css-team, body.css-team *) { grid-template-columns: 1fr 1fr; }
  .fg-card-actions [data-fg-work]:where(body.css-team, body.css-team *) { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .fg-card:where(body.css-team, body.css-team *), .fg-chev:where(body.css-team, body.css-team *), .fg-chev svg:where(body.css-team, body.css-team *), .fg-lb-inner:where(body.css-team, body.css-team *), .fg-thumb img:where(body.css-team, body.css-team *) { transition: none !important; animation: none !important; }
  .fg-lb.is-open .fg-lb-track figure:where(body.css-team, body.css-team *) { animation: none; }
}

/* 1251 (Robert): two thin chevrons on the photo edges (previous / next girl) + "Full profile →" at the foot of the photo,
   which opens the same slide-out card the old single arrow did. 44px+ hit areas. */
.fg-arrow:where(body.css-team, body.css-team *) { position: absolute; z-index: 3; top: 50%; width: 2.75rem; height: 2.75rem; margin-top: -1.375rem; padding: 0; border: 0; border-radius: 50%;
  background: rgba(248, 245, 239, .78); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background-color .3s var(--ease); }
.fg-arrow:hover:where(body.css-team, body.css-team *) { background: var(--white); }
.fg-prev:where(body.css-team, body.css-team *) { left: .75rem; }
.fg-next:where(body.css-team, body.css-team *) { right: .75rem; }
.fg-profile:where(body.css-team, body.css-team *) { position: absolute; z-index: 3; left: 50%; bottom: 1rem; transform: translateX(-50%); min-height: 2.75rem; padding: 0 1.1rem; border: 0; border-radius: 999px;
  background: rgba(248, 245, 239, .86); color: var(--ink); font: 500 var(--fs-meta) / 1 var(--font-body); letter-spacing: var(--ls-meta); text-transform: uppercase; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; transition: background-color .3s var(--ease); }
.fg-profile:hover:where(body.css-team, body.css-team *) { background: var(--white); }
.fg-profile-arrow:where(body.css-team, body.css-team *) { display: inline-block; font-size: 1rem; letter-spacing: 0; transition: transform .5s var(--ease); }
.fg-visual.is-open .fg-profile-arrow:where(body.css-team, body.css-team *) { transform: rotate(180deg); }
@media (max-width: 900px) { .fg-visual.is-open .fg-profile-arrow:where(body.css-team, body.css-team *) { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { .fg-profile-arrow:where(body.css-team, body.css-team *) { transition: none; } }

/* PLS v4 · Mobile elastic tier slider (App). Mobile only (≤900px); desktop markup is untouched.
   Uses shared tokens from styles.css :root only. See README.md. */

@property --ts-accent { syntax: "<color>"; inherits: true; initial-value: #e9e1d3; }

/* per-tier accent: Tier 1 honey · Tier 2 clay · Tier 3 cocoa (decorative only, text stays ink/blush) */
.ts-scope:where(body.css-tier-slider, body.css-tier-slider *) { --ts-accent: var(--honey); transition: --ts-accent .55s var(--ease); }
.ts-scope[data-ts-tier="1"]:where(body.css-tier-slider, body.css-tier-slider *) { --ts-accent: var(--clay); }
.ts-scope[data-ts-tier="2"]:where(body.css-tier-slider, body.css-tier-slider *) { --ts-accent: var(--cocoa); }

.ts:where(body.css-tier-slider, body.css-tier-slider *), .ts-price:where(body.css-tier-slider, body.css-tier-slider *), .ts-addon-tier:where(body.css-tier-slider, body.css-tier-slider *) { display: none; }

@media (max-width: 900px) {
  .ts-scope .tier-tabs:where(body.css-tier-slider, body.css-tier-slider *) { display: none; }
  .ts:where(body.css-tier-slider, body.css-tier-slider *) { display: block; margin: 0 0 1.4rem; }

  .ts-track:where(body.css-tier-slider, body.css-tier-slider *) {
    position: relative; display: grid; grid-template-columns: repeat(var(--ts-n, 3), 1fr);
    padding: .3rem; border-radius: 999px; background: var(--blush-3); isolation: isolate;
    touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  }
  .ts-track:focus:where(body.css-tier-slider, body.css-tier-slider *) { outline: none; }
  .ts-track:focus-visible:where(body.css-tier-slider, body.css-tier-slider *) { outline: 2px solid var(--clay); outline-offset: 3px; }

  .ts-fill:where(body.css-tier-slider, body.css-tier-slider *) {
    position: absolute; z-index: 0; top: .3rem; bottom: .3rem; left: .3rem; width: 0;
    border-radius: 999px; background: color-mix(in srgb, var(--ts-accent) 30%, transparent);
    pointer-events: none;
  }
  .ts-thumb:where(body.css-tier-slider, body.css-tier-slider *) {
    position: absolute; z-index: 1; top: .3rem; bottom: .3rem; left: .3rem; width: calc((100% - .6rem) / var(--ts-n, 3));
    border-radius: 999px; background: var(--ink); transform-origin: 0 50%; will-change: transform;
    box-shadow: 0 0 0 2px var(--ts-accent), 0 6px 16px rgba(21, 19, 19,.2);
    pointer-events: none;
  }

  .ts-stop:where(body.css-tier-slider, body.css-tier-slider *) {
    position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 2.9rem; padding: 0 .4rem; font-size: var(--fs-meta); font-weight: 600; letter-spacing: var(--track);
    text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; pointer-events: none;
    transition: color .3s var(--ease);
  }
  .ts-stop.is-on:where(body.css-tier-slider, body.css-tier-slider *) { color: var(--blush); }
  .ts-label:where(body.css-tier-slider, body.css-tier-slider *) { padding-left: var(--track); }

  /* tier icon: one, two, three dots */
  .ts-icon:where(body.css-tier-slider, body.css-tier-slider *) { position: relative; display: inline-flex; flex-direction: column; gap: 2px; }
  .ts-icon i:where(body.css-tier-slider, body.css-tier-slider *) { display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; }
  .ts-stop.is-on .ts-icon i:where(body.css-tier-slider, body.css-tier-slider *) { opacity: 1; background: color-mix(in srgb, var(--ts-accent) 60%, var(--blush)); }
  .ts-icon:where(body.css-tier-slider, body.css-tier-slider *)::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border-radius: 50%; border: 1.5px solid var(--ts-accent); opacity: 0; pointer-events: none;
  }
  .ts-icon.is-pulse:where(body.css-tier-slider, body.css-tier-slider *) { animation: ts-pulse .42s var(--ease); }
  .ts-icon.is-pulse:where(body.css-tier-slider, body.css-tier-slider *)::after { animation: ts-ring .55s var(--ease); }

  /* prices: odometer roll + accent tick */
  .ts-scope .rows-tiered .tier-cell:where(body.css-tier-slider, body.css-tier-slider *), .ts-scope .rows-tiered .tier-cell.is-shown:where(body.css-tier-slider, body.css-tier-slider *) { display: none; }
  .ts-scope .addon-price > .roll:where(body.css-tier-slider, body.css-tier-slider *), .ts-scope .addon-price > .addon-tier:where(body.css-tier-slider, body.css-tier-slider *) { display: none; }
  .ts-price:where(body.css-tier-slider, body.css-tier-slider *), .ts-addon-tier:where(body.css-tier-slider, body.css-tier-slider *) { display: inline-block; }
  .ts-price:where(body.css-tier-slider, body.css-tier-slider *) { position: relative; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; padding-bottom: .3rem; }
  .rows-tiered .ts-price:where(body.css-tier-slider, body.css-tier-slider *) { font-family: var(--font-body); font-size: var(--fs-h4); text-align: right; justify-self: end; }
  .ts-price:where(body.css-tier-slider, body.css-tier-slider *)::after {
    content: ""; position: absolute; right: 0; bottom: 0; width: 1.1rem; height: 2px; border-radius: 2px;
    background: var(--ts-accent);
  }
  .addon-price .ts-price:where(body.css-tier-slider, body.css-tier-slider *)::after { width: .8rem; height: 1.5px; }
  .ts-addon-tier:where(body.css-tier-slider, body.css-tier-slider *) { font-family: var(--font-body); font-size: var(--fs-micro); color: var(--ink-mute); }
  .ts-odo:where(body.css-tier-slider, body.css-tier-slider *) { display: inline-flex; align-items: baseline; }
  .ts-dg:where(body.css-tier-slider, body.css-tier-slider *) { display: inline-block; height: 1.2em; line-height: 1.2em; overflow: hidden; vertical-align: bottom; }
  .ts-col:where(body.css-tier-slider, body.css-tier-slider *) { display: block; text-align: center; transform: translateY(calc(var(--d, 0) * -1.2em)); transition: transform .62s var(--ease); }
  .ts-ch:where(body.css-tier-slider, body.css-tier-slider *) { display: inline-block; line-height: 1.2em; }
  .ts-still .ts-col:where(body.css-tier-slider, body.css-tier-slider *) { transition: none; }
}

@keyframes ts-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes ts-ring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.9); } }

@media (prefers-reduced-motion: reduce) {
  .ts-scope:where(body.css-tier-slider, body.css-tier-slider *) { transition: none; }
  .ts-stop:where(body.css-tier-slider, body.css-tier-slider *), .ts-col:where(body.css-tier-slider, body.css-tier-slider *) { transition: none !important; }
  .ts-icon.is-pulse:where(body.css-tier-slider, body.css-tier-slider *), .ts-icon.is-pulse:where(body.css-tier-slider, body.css-tier-slider *)::after { animation: none; }
}

/* Forge · Services & pricing (services.html), v3 (audit 2230): one price table on hairlines, left edge = the shared container.
   Type comes only from the shared scale in styles.css. Hero height is owned by shared CSS (.page-hero 52svh). */

/* hero: plain cocoa ground, heading only, on the container's left edge (no overlay: solid heroes skip it) */
.fg-svc-hero:where(body.css-services, body.css-services *) { background: var(--cocoa); }
.fg-svc-hero h1:where(body.css-services, body.css-services *) { margin-bottom: 0; }

.fg-menu:where(body.css-services, body.css-services *) { background: var(--blush); padding: var(--section-y) var(--gutter); }
.fg-menu-inner:where(body.css-services, body.css-services *) { width: min(100%, var(--max)); margin: 0 auto; }

/* the one table */
.fg-table:where(body.css-services, body.css-services *) { max-width: 60rem; border-top: 1px solid var(--ink); }
.fg-cat:where(body.css-services, body.css-services *) { scroll-margin-top: calc(var(--header-h-scrolled) + 1rem); }
.fg-cat-head:where(body.css-services, body.css-services *) { padding: 2.75rem 0 1rem; display: grid; gap: .5rem; }
.fg-cat:first-child .fg-cat-head:where(body.css-services, body.css-services *) { padding-top: 2rem; }
.fg-cat-head h2:where(body.css-services, body.css-services *) { font-size: var(--fs-h2); }
.fg-note:where(body.css-services, body.css-services *), .fg-tier-note:where(body.css-services, body.css-services *) { font-size: var(--fs-small); color: var(--ink-soft); max-width: 62ch; }
.fg-cta:where(body.css-services, body.css-services *) { font-weight: var(--fw-ui); color: var(--ink); white-space: nowrap; margin-left: .35rem; }

.fg-list:where(body.css-services, body.css-services *) { list-style: none; margin: 0; padding: 0; }
.fg-row:where(body.css-services, body.css-services *) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; align-items: center; min-height: 3.25rem; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.fg-list > .fg-row:first-child:where(body.css-services, body.css-services *) { border-top: 1px solid var(--line); }
.fg-name:where(body.css-services, body.css-services *) { font-size: var(--fs-body); font-weight: var(--fw-body); line-height: 1.35; }
.fg-sub:where(body.css-services, body.css-services *) { display: block; font-size: var(--fs-small); color: var(--ink-mute); }
.fg-p:where(body.css-services, body.css-services *), .fg-tp:where(body.css-services, body.css-services *) { font-size: var(--fs-body); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; text-align: right; }

/* colour: three tier columns, labels once */
.fg-cat-tiered .fg-row:where(body.css-services, body.css-services *) { grid-template-columns: minmax(0, 1fr) repeat(3, 6.5rem); }
.fg-cat-tiered .fg-row:not(.fg-row-tiered):not(.fg-thead):not(.fg-subhead) .fg-p:where(body.css-services, body.css-services *) { grid-column: 2 / -1; } /* flat add-on prices right-aligned under Tier 3 without spilling ("+$15 per bowl") */
.fg-tcells:where(body.css-services, body.css-services *) { display: contents; }
.fg-thead:where(body.css-services, body.css-services *) { min-height: 0; padding: .5rem 0; font-size: var(--fs-meta); font-weight: var(--fw-ui); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--ink-mute); }
.fg-thead span:where(body.css-services, body.css-services *) { text-align: right; }
.fg-subhead:where(body.css-services, body.css-services *) { display: block; min-height: 0; padding: 2rem 0 .6rem; border-bottom: 1px solid var(--line); }
.fg-subhead h3:where(body.css-services, body.css-services *) { font-size: var(--fs-h4); font-weight: var(--fw-h3); }
.fg-tm:where(body.css-services, body.css-services *), .fg-slot:where(body.css-services, body.css-services *) { display: none; }

.fg-menu-foot:where(body.css-services, body.css-services *) { margin-top: 2rem; font-size: var(--fs-small); color: var(--ink-mute); max-width: 60rem; }

@media (max-width: 900px) {
  .fg-slot:where(body.css-services, body.css-services *) { display: block; margin-top: .75rem; }
  .fg-thead:where(body.css-services, body.css-services *) { display: none; }
  .fg-cat-tiered .fg-row:where(body.css-services, body.css-services *) { grid-template-columns: minmax(0, 1fr) auto; }
  .fg-cat-tiered .fg-row:not(.fg-row-tiered):not(.fg-thead):not(.fg-subhead) .fg-p:where(body.css-services, body.css-services *) { grid-column: auto; }
  .ts-scope .fg-tp:where(body.css-services, body.css-services *) { display: none; }
  .ts-scope .fg-tm:where(body.css-services, body.css-services *) { display: block; text-align: right; font-size: var(--fs-body); }
}

/* 0930: the table, its headings and notes sit on the page centre */
.fg-table:where(body.css-services, body.css-services *) { margin-inline: auto; }
.fg-cat-head:where(body.css-services, body.css-services *) { justify-items: center; text-align: center; }
.fg-menu-foot:where(body.css-services, body.css-services *) { margin-inline: auto; text-align: center; }
@media (max-width: 900px) { .fg-slot:where(body.css-services, body.css-services *) { width: 100%; } }

/* Codex · Contact page (contact.html), audit 2230: 42svh solid hero, then the original simple form
   (name, email, phone, stylist, message) beside Find the studio. Left edge = the shared container. Shared tokens only. */

.ct-hero h1:where(body.css-contact, body.css-contact *) { font-size: var(--fs-h1); margin: 0; }

.ct-inquire:where(body.css-contact, body.css-contact *) { background: var(--blush-2); padding: var(--section-y) var(--gutter); }
.ct-inquire-inner:where(body.css-contact, body.css-contact *) { width: min(100%, 66rem); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }

/* form: plain labels above fields, hairline inputs */
.ct-form:where(body.css-contact, body.css-contact *) { display: grid; gap: 1.35rem; max-width: 36rem; }
.ct-field:where(body.css-contact, body.css-contact *) { position: relative; display: grid; gap: .35rem; }
.ct-field label:where(body.css-contact, body.css-contact *) { font-size: var(--fs-meta); font-weight: var(--fw-ui); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--ink-soft); }
.ct-field input:where(body.css-contact, body.css-contact *), .ct-field select:where(body.css-contact, body.css-contact *), .ct-field textarea:where(body.css-contact, body.css-contact *) {
  width: 100%; border: 0; border-bottom: 1px solid rgba(21, 19, 19,.28); border-radius: 0; background: transparent;
  padding: .55rem 0; font-size: var(--fs-body); color: var(--ink); appearance: none; -webkit-appearance: none;
  transition: border-color .35s var(--ease);
}
.ct-field select:where(body.css-contact, body.css-contact *) { padding-right: 1.5rem; cursor: pointer; }
.ct-field textarea:where(body.css-contact, body.css-contact *) { resize: vertical; min-height: 6.5rem; line-height: 1.5; }
.ct-field input:focus:where(body.css-contact, body.css-contact *), .ct-field select:focus:where(body.css-contact, body.css-contact *), .ct-field textarea:focus:where(body.css-contact, body.css-contact *) { outline: none; border-bottom-color: var(--clay); }
.ct-field input:focus-visible:where(body.css-contact, body.css-contact *), .ct-field select:focus-visible:where(body.css-contact, body.css-contact *), .ct-field textarea:focus-visible:where(body.css-contact, body.css-contact *) { box-shadow: 0 1px 0 0 var(--clay); }
.ct-select:where(body.css-contact, body.css-contact *)::after { content: ""; position: absolute; right: .35rem; bottom: 1.05rem; width: .42rem; height: .42rem; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg); pointer-events: none; }
.ct-field.is-invalid input:where(body.css-contact, body.css-contact *), .ct-field.is-invalid select:where(body.css-contact, body.css-contact *) { border-bottom-color: var(--clay); }
.ct-field.is-invalid label:where(body.css-contact, body.css-contact *) { color: var(--clay); }
.ct-submit:where(body.css-contact, body.css-contact *) { display: grid; gap: .9rem; margin-top: .4rem; justify-items: start; }
.ct-submit .btn:where(body.css-contact, body.css-contact *) { min-height: 3.1rem; padding-inline: 2.25rem calc(2.25rem - var(--track)); }
.ct-note:where(body.css-contact, body.css-contact *) { font-size: var(--fs-small); color: var(--ink-soft); }
.ct-note:empty:where(body.css-contact, body.css-contact *) { display: none; }

/* Find the studio */
.ct-nap .display-sm:where(body.css-contact, body.css-contact *) { font-size: var(--fs-h2); margin-bottom: 1.25rem; }
.ct-address:where(body.css-contact, body.css-contact *) { font-style: normal; font-size: var(--fs-body); line-height: var(--lh-body); }
.ct-address strong:where(body.css-contact, body.css-contact *) { font-weight: var(--fw-strong); }
.ct-phone:where(body.css-contact, body.css-contact *) { display: inline-block; margin-top: 1rem; font-size: var(--fs-h4); font-weight: var(--fw-h3); border-bottom: 1px solid rgba(21, 19, 19,.3); transition: border-color .3s, color .3s; }
.ct-phone:hover:where(body.css-contact, body.css-contact *) { color: var(--cocoa); border-color: var(--clay); }
.ct-hours:where(body.css-contact, body.css-contact *) { margin-top: 1.5rem; max-width: 19rem; border-top: 1px solid var(--line); }
.ct-hours li:where(body.css-contact, body.css-contact *) { display: flex; justify-content: space-between; gap: 1.5rem; padding: .6rem 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ct-hours li span:first-child:where(body.css-contact, body.css-contact *) { color: var(--ink-soft); }
.ct-nap-links:where(body.css-contact, body.css-contact *) { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.ct-map:where(body.css-contact, body.css-contact *) { margin: 2rem 0 0; aspect-ratio: 16/10; overflow: hidden; background: var(--blush-3); border: 1px solid var(--line); }
.ct-map iframe:where(body.css-contact, body.css-contact *) { width: 100%; height: 100%; border: 0; }

@media (max-width: 900px) {
  .ct-inquire-inner:where(body.css-contact, body.css-contact *) { grid-template-columns: 1fr; }
}

/* 0930: hero heading centred; form + Find the studio balanced on the page centre (66rem block) */
.ct-hero .page-hero-content:where(body.css-contact, body.css-contact *) { text-align: center; }
.ct-muted:where(body.css-contact, body.css-contact *) { color: var(--ink-soft); }
.ct-nap .display-sm:where(body.css-contact, body.css-contact *) { font-size: var(--fs-h2); }

@media (max-width: 900px) {
  .ct-reach:where(body.css-contact, body.css-contact *) { text-align: center; }
  .ct-hours:where(body.css-contact, body.css-contact *) { margin-inline: auto; }
  .ct-nap-links:where(body.css-contact, body.css-contact *) { justify-content: center; }
}

/* 1400 · today's row (set by contact.js on America/New_York time): subtle, ink on cream */
.ct-hours li.is-today:where(body.css-contact, body.css-contact *) { font-weight: var(--fw-ui, 500); box-shadow: inset 2px 0 0 var(--ink); padding-inline: .75rem; margin-inline: -.75rem; }
.ct-hours li.is-today span:first-child:where(body.css-contact, body.css-contact *) { color: var(--ink); }

/* Codex · About page (about.html). Uses shared tokens only. */

/* shared photo-background layer for Codex sections */
.ab-bg:where(body.css-about, body.css-about *), .ct-bg:where(body.css-about, body.css-about *) { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ab-bg img:where(body.css-about, body.css-about *), .ct-bg img:where(body.css-about, body.css-about *) { width: 100%; height: 100%; object-fit: cover; }
.ab-bg:where(body.css-about, body.css-about *)::after, .ct-bg:where(body.css-about, body.css-about *)::after { content: ""; position: absolute; inset: 0; }
/* light: the photo stays readable as a photo, washed toward blush so ink copy holds AA */
.ab-bg-light img:where(body.css-about, body.css-about *), .ct-bg-light img:where(body.css-about, body.css-about *) { filter: saturate(.75) blur(8px); transform: scale(1.08); }
.ab-bg-light:where(body.css-about, body.css-about *)::after, .ct-bg-light:where(body.css-about, body.css-about *)::after { background: linear-gradient(180deg, rgba(248, 245, 239,.86), rgba(239, 233, 223,.9)); }
/* dark: cocoa scrim over a softened photo, blush copy */
.ab-bg-dark img:where(body.css-about, body.css-about *), .ct-bg-dark img:where(body.css-about, body.css-about *) { filter: saturate(.85); }
.ab-bg-dark:where(body.css-about, body.css-about *)::after, .ct-bg-dark:where(body.css-about, body.css-about *)::after { background: linear-gradient(90deg, rgba(var(--scrim-rgb), .55) 0%, rgba(21, 19, 19,.62) 45%, rgba(var(--scrim-rgb), .86) 70%); }

/* ——— Hero: full viewport, one title ——— */
.ab-hero:where(body.css-about, body.css-about *) { position: relative; min-height: 70vh; min-height: 70svh; /* Integrator: Robert's varied hero heights */ display: grid; align-items: end; overflow: hidden; color: var(--blush); }
.ab-hero .hero-media img:where(body.css-about, body.css-about *) { object-position: 64% 0%; } /* 1250: her face fully in frame (portrait photo, face top-right) */
.ab-hero [data-pin]:where(body.css-about, body.css-about *) { background-position: 50% 30%; } /* face lands ~170–350px down, below the header, at 1440 and 1280 */
.ab-hero-scrim:where(body.css-about, body.css-about *) { background: radial-gradient(120% 70% at 0% 100%, rgba(var(--scrim-rgb), .78) 0%, rgba(var(--scrim-rgb), .35) 45%, rgba(var(--scrim-rgb), 0) 70%), linear-gradient(180deg, rgba(var(--scrim-rgb), .45) 0%, rgba(var(--scrim-rgb), 0) 22%, rgba(var(--scrim-rgb), 0) 55%, rgba(var(--scrim-rgb), .55) 100%); }
.ab-hero-title:where(body.css-about, body.css-about *) { position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), var(--max)); margin: 0 auto; padding: 0 0 clamp(2.75rem, 7vh, 4.5rem); } /* container left edge (audit S6) */
.ab-hero h1:where(body.css-about, body.css-about *) { font-size: var(--fs-h1); line-height: var(--lh-head); letter-spacing: var(--ls-head); max-width: 15em; }
.ab-hero h1 .nb:where(body.css-about, body.css-about *) { white-space: nowrap; } /* each sentence stays whole: no "It's / polished" break (audit S12) */
.ab-hero h1 em:where(body.css-about, body.css-about *) { color: var(--honey); }

/* ——— Story: asymmetric editorial grid ——— */
.ab-story:where(body.css-about, body.css-about *), .ab-owner:where(body.css-about, body.css-about *), .ab-trust:where(body.css-about, body.css-about *) { position: relative; overflow: hidden; isolation: isolate; }
.ab-story:where(body.css-about, body.css-about *) { padding: var(--section-y) var(--gutter); }
.ab-story-grid:where(body.css-about, body.css-about *) {
  position: relative; z-index: 1; width: min(100%, var(--max)); margin: 0 auto;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.2vw, 2rem); row-gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-areas:
    "head head head head head head head duo  duo  duo  duo  duo"
    "copy copy copy copy copy .    .    duo  duo  duo  duo  duo"
    "backs backs backs backs neon neon neon duo duo duo duo duo"
    "backs backs backs backs neon neon neon team team team team team"
    ".    .    .    .    .    .    .    tcopy tcopy tcopy tcopy tcopy";
}
.ab-story-head:where(body.css-about, body.css-about *) { grid-area: head; align-self: end; }
.ab-story-head .display:where(body.css-about, body.css-about *) { font-size: var(--fs-h2); max-width: 22ch; }
.ab-story-head .display em:where(body.css-about, body.css-about *) { color: var(--clay); }
.ab-story-copy:where(body.css-about, body.css-about *) { grid-area: copy; }
.ab-story-copy p:where(body.css-about, body.css-about *) { color: var(--ink-soft); max-width: 40ch; }
.ab-story-copy p + p:where(body.css-about, body.css-about *) { margin-top: 1.1rem; }
.ab-lead:where(body.css-about, body.css-about *) { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink) !important; }

.ab-fig:where(body.css-about, body.css-about *) { margin: 0; overflow: hidden; background: var(--blush-3); } /* flat photos: no drop-shadow lift (audit S8) */
.ab-fig img:where(body.css-about, body.css-about *) { width: 100%; height: 100%; object-fit: cover; }
.ab-fig[data-parallax] img:where(body.css-about, body.css-about *) { height: 112%; }
.ab-fig-duo:where(body.css-about, body.css-about *) { grid-area: duo; aspect-ratio: 4/5.4; }
.ab-fig-duo img:where(body.css-about, body.css-about *) { object-position: 50% 30%; }
.ab-fig-backs:where(body.css-about, body.css-about *) { grid-area: backs; aspect-ratio: 3/4; }
.ab-fig-neon:where(body.css-about, body.css-about *) { grid-area: neon; aspect-ratio: 3/4; align-self: start; } /* aligned tops, no scatter offsets (audit S8) */
.ab-fig-neon img:where(body.css-about, body.css-about *) { object-position: 20% 30%; }
.ab-pull:where(body.css-about, body.css-about *) { grid-area: pull; margin: clamp(1rem, 3vw, 2.5rem) 0 0; align-self: start; }
.ab-pull p:where(body.css-about, body.css-about *) { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.15; color: var(--cocoa); max-width: 22ch; }
.ab-pull em:where(body.css-about, body.css-about *) { color: var(--clay); }
.ab-fig-team:where(body.css-about, body.css-about *) { grid-area: team; aspect-ratio: 640/565; align-self: end; }
.ab-team-copy:where(body.css-about, body.css-about *) { grid-area: tcopy; align-self: start; }
.ab-team-copy h3:where(body.css-about, body.css-about *) { font-size: var(--fs-h3); margin-bottom: 1rem; max-width: 12ch; }
.ab-team-copy h3 em:where(body.css-about, body.css-about *) { color: var(--clay); }
.ab-team-copy p:where(body.css-about, body.css-about *) { color: var(--ink-soft); max-width: 34ch; margin-bottom: 1.25rem; }
.ab-link:where(body.css-about, body.css-about *) { font-size: var(--fs-meta); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; }

/* ——— Owner ——— */
.ab-owner:where(body.css-about, body.css-about *) { color: var(--blush); padding: var(--section-y) var(--gutter); }
.ab-owner .ab-bg img:where(body.css-about, body.css-about *) { object-position: 50% 30%; }
.ab-owner-grid:where(body.css-about, body.css-about *) { position: relative; z-index: 1; width: min(100%, var(--max)); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.2vw, 2rem); align-items: center; }
.ab-fig-owner:where(body.css-about, body.css-about *) { grid-column: 1 / span 5; aspect-ratio: 4/5; }
.ab-fig-owner img:where(body.css-about, body.css-about *) { object-position: 50% 25%; }
.ab-owner-copy:where(body.css-about, body.css-about *) { grid-column: 7 / span 5; }
.ab-owner-name:where(body.css-about, body.css-about *) { font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: var(--ls-head); color: var(--blush); } /* inside its column, no overhang onto the photo (audit S7) */
.ab-owner-role:where(body.css-about, body.css-about *) { margin-top: 1.2rem; font-size: var(--fs-meta); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--honey); }
.ab-owner-copy > p:not(.ab-owner-role):not(.ab-owner-line):where(body.css-about, body.css-about *) { margin-top: 1.4rem; max-width: 34ch; color: rgba(239, 233, 223,.86); font-size: var(--fs-body); }
.ab-owner-line:where(body.css-about, body.css-about *) { margin-top: 2rem; font-family: var(--font-display); font-size: var(--fs-h3); color: var(--blush); }
.ab-owner-line em:where(body.css-about, body.css-about *) { color: var(--honey); }
.ab-ig:where(body.css-about, body.css-about *) { margin-top: 1.75rem; color: var(--blush); }

/* ——— Trust bar: logos only ——— */
.ab-trust:where(body.css-about, body.css-about *) { padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter); }
.ab-bg-trust img:where(body.css-about, body.css-about *) { object-position: 50% 42%; filter: saturate(.8) blur(1.5px); transform: scale(1.03); }
.ab-bg-trust:where(body.css-about, body.css-about *)::after { background: linear-gradient(90deg, rgba(248, 245, 239,.84), rgba(239, 233, 223,.72) 50%, rgba(248, 245, 239,.84)); }
.ab-logos:where(body.css-about, body.css-about *) { position: relative; z-index: 1; width: min(100%, 64rem); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; justify-items: center; gap: 2.5rem 1.5rem; }
.ab-logos li:where(body.css-about, body.css-about *) { display: grid; place-items: center; height: 4rem; width: 100%; }
.ab-logos img:where(body.css-about, body.css-about *) { width: auto; max-width: 100%; opacity: .86; transition: opacity .4s var(--ease); }
.ab-logos li:hover img:where(body.css-about, body.css-about *) { opacity: 1; }
.lg-kovi:where(body.css-about, body.css-about *) { height: clamp(2.5rem, 3.8vw, 3.3rem); }
.lg-pulp:where(body.css-about, body.css-about *) { height: clamp(2.4rem, 3.6vw, 3.1rem); }
.lg-k18:where(body.css-about, body.css-about *) { height: clamp(2.1rem, 3.2vw, 2.7rem); }
.lg-bb:where(body.css-about, body.css-about *) { height: auto; width: clamp(9rem, 15vw, 12.5rem) !important; }

/* ——— Close ——— */
.ab-close .band-media img:where(body.css-about, body.css-about *) { object-position: 50% 12%; }
.ab-close:where(body.css-about, body.css-about *) { padding-block: clamp(8rem, 18vw, 13rem); }

/* ——— Responsive ——— */
@media (max-width: 900px) {
  .ab-story-grid:where(body.css-about, body.css-about *) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "head head head head head head"
      "duo  duo  duo  duo  duo  duo"
      "copy copy copy copy copy copy"
      "backs backs backs neon neon neon"
      "team team team team team team"
      "tcopy tcopy tcopy tcopy tcopy tcopy";
  }
  .ab-fig-duo:where(body.css-about, body.css-about *) { margin-top: 0; aspect-ratio: 4/5; margin-right: calc(-1 * var(--gutter)); }
  .ab-fig-backs:where(body.css-about, body.css-about *) { margin-top: 0; }
  .ab-fig-neon:where(body.css-about, body.css-about *) { margin-top: 0; }
  .ab-fig-team:where(body.css-about, body.css-about *) { margin: 0 0 0 calc(-1 * var(--gutter)); }
  .ab-owner-grid:where(body.css-about, body.css-about *) { grid-template-columns: 1fr; row-gap: 2rem; }
  .ab-fig-owner:where(body.css-about, body.css-about *) { grid-column: 1; width: 82%; }
  .ab-owner-copy:where(body.css-about, body.css-about *) { grid-column: 1; }
  .ab-owner-name:where(body.css-about, body.css-about *) { margin: 0; }
  .ab-fig-owner:where(body.css-about, body.css-about *) { justify-self: start; }
  .ab-logos:where(body.css-about, body.css-about *) { grid-template-columns: repeat(2, 1fr); row-gap: 2.75rem; }
}
@media (max-width: 480px) {
  .ab-hero h1:where(body.css-about, body.css-about *) { font-size: var(--fs-h1); }
  .ab-story-head .display:where(body.css-about, body.css-about *) { font-size: var(--fs-h2); }
}
.ab-story-head .display:where(body.css-about, body.css-about *), .ab-team-copy h3:where(body.css-about, body.css-about *), .ab-pull p:where(body.css-about, body.css-about *), .ct-intro .display:where(body.css-about, body.css-about *), .close-cta.ab-close h2:where(body.css-about, body.css-about *) { text-wrap: balance; }

/* audit 2230 (S7, S17): solid beds instead of ghosted / blurred photo beds */
.ab-bg-solid-dark:where(body.css-about, body.css-about *) { background: var(--ink); }
.ab-bg-solid-light:where(body.css-about, body.css-about *) { background: var(--blush-2); }
.ab-bg-solid-dark:where(body.css-about, body.css-about *)::after, .ab-bg-solid-light:where(body.css-about, body.css-about *)::after { content: none; }

/* ——— 0930: centred ——— */
.ab-hero-title:where(body.css-about, body.css-about *) { text-align: center; }
.ab-hero h1:where(body.css-about, body.css-about *) { max-width: none; margin-inline: auto; line-height: 1.22; letter-spacing: .012em; }
/* story: centred heading, then three equal portraits on one row, the team shot centred under them */
.ab-story-grid:where(body.css-about, body.css-about *) { width: min(100%, 64rem); grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(.75rem, 2vw, 1.5rem);
  grid-template-areas: "head head head" "backs duo neon" "team team team" "tcopy tcopy tcopy"; }
.ab-story-head:where(body.css-about, body.css-about *) { text-align: center; }
.ab-story-head .display:where(body.css-about, body.css-about *) { margin-inline: auto; }
.ab-fig-duo:where(body.css-about, body.css-about *), .ab-fig-backs:where(body.css-about, body.css-about *), .ab-fig-neon:where(body.css-about, body.css-about *) { aspect-ratio: 4 / 5; align-self: stretch; }
.ab-fig-team:where(body.css-about, body.css-about *) { justify-self: center; width: min(100%, 40rem); align-self: start; }
.ab-team-copy:where(body.css-about, body.css-about *) { text-align: center; }
/* owner: text only (no photo of Ashley that isn't already used elsewhere) */
.ab-owner-grid:where(body.css-about, body.css-about *) { display: block; max-width: 40rem; text-align: center; }
.ab-owner-copy:where(body.css-about, body.css-about *) { grid-column: auto; }
.ab-owner-copy > p:not(.ab-owner-role):not(.ab-owner-line):where(body.css-about, body.css-about *) { max-width: 44ch; margin-inline: auto; }
.ab-ig:where(body.css-about, body.css-about *) { justify-content: center; }
@media (max-width: 900px) {
  .ab-story-grid:where(body.css-about, body.css-about *) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "head head" "duo duo" "backs neon" "team team" "tcopy tcopy"; }
  .ab-fig-duo:where(body.css-about, body.css-about *) { margin-right: 0; }
  .ab-fig-team:where(body.css-about, body.css-about *) { margin: 0; }
}

/* 1251: the studio merch joins the portrait row (4 across desktop, 2×2 on phones); no new section */
.ab-story-grid:where(body.css-about, body.css-about *) { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "head head head head" "backs duo neon merch" "team team team team" "tcopy tcopy tcopy tcopy"; width: min(100%, 72rem); }
.ab-fig-merch:where(body.css-about, body.css-about *) { grid-area: merch; aspect-ratio: 4 / 5; align-self: stretch; }
.ab-fig-merch img:where(body.css-about, body.css-about *) { object-position: 50% 45%; }
@media (max-width: 900px) {
  .ab-story-grid:where(body.css-about, body.css-about *) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "head head" "backs duo" "neon merch" "team team" "tcopy tcopy"; }
}

/* ——— 1001 About rebuild: story intro, gallery, black / white / cream only ——— */
/* palette: every About surface is ink, white or cream; no brown accents */
.ab-hero:where(body.css-about, body.css-about *) { color: var(--white); }
.ab-hero h1 em:where(body.css-about, body.css-about *), .ab-story-head .display em:where(body.css-about, body.css-about *) { color: inherit; }
.ab-bg-solid-cream:where(body.css-about, body.css-about *) { background: var(--cream); }
.ab-story .ab-bg-light:where(body.css-about, body.css-about *)::after { background: var(--cream); }
.ab-fig:where(body.css-about, body.css-about *) { background: #e4ddd1; }

/* story intro: centred script heading, short copy on white */
.ab-intro:where(body.css-about, body.css-about *) { position: relative; background: var(--white); color: var(--ink); padding: var(--section-y) var(--gutter); }
.ab-intro-inner:where(body.css-about, body.css-about *) { width: min(100%, 44rem); margin: 0 auto; text-align: center; }
.ab-intro-title.h-script:where(body.css-about, body.css-about *) { font-size: clamp(2.2rem, 1.52rem + 2.56vw, 3.8rem); line-height: 1.18; margin: 0 auto clamp(1.75rem, 3vw, 2.5rem); max-width: 16ch; }
.ab-intro-copy p:where(body.css-about, body.css-about *) { font-family: var(--font-body); font-size: var(--fs-lead); line-height: 1.7; color: rgba(21, 19, 19, .82); max-width: 40rem; margin: 0 auto; }
.ab-intro-copy p + p:where(body.css-about, body.css-about *) { margin-top: 1.15rem; }
.ab-intro-copy a:where(body.css-about, body.css-about *) { color: var(--ink); }

/* made-to-feel: crewneck slot now holds Carly at the chair */
.ab-fig-merch img:where(body.css-about, body.css-about *) { object-position: 50% 35%; }
.ab-story-head .display:where(body.css-about, body.css-about *) { color: var(--ink); }

/* gallery: centred 4-up grid, uniform 4:5 tiles, no hover effects */
.ab-gallery:where(body.css-about, body.css-about *) { position: relative; background: var(--white); padding: var(--section-y) var(--gutter); }
.ab-gallery-inner:where(body.css-about, body.css-about *) { width: min(100%, 72rem); margin: 0 auto; }
.ab-gallery-title:where(body.css-about, body.css-about *) { text-align: center; margin: 0 auto clamp(2rem, 4vw, 3rem); color: var(--ink); }
.ab-gal:where(body.css-about, body.css-about *) { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.5rem, 1.2vw, 1rem); }
.ab-gal-item:where(body.css-about, body.css-about *) { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #e4ddd1; }
.ab-gal-item img:where(body.css-about, body.css-about *) { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
@media (max-width: 900px) { .ab-gal:where(body.css-about, body.css-about *) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ab-gal:where(body.css-about, body.css-about *) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 1001d: About products ticker on ink, logos in white */
.ab-trust:where(body.css-about, body.css-about *) { background: var(--ink); color: var(--white); }
.ab-trust .tk-set img:where(body.css-about, body.css-about *) { filter: brightness(0) invert(1); opacity: 1; }
.ab-trust .tk:focus-visible:where(body.css-about, body.css-about *) { outline-color: var(--cream); }

/* 1001f: story as a basic two-column section (photo left, heading + copy right) */
.ab-intro:where(body.css-about, body.css-about *) { padding: var(--section-y) var(--gutter); }
.ab-intro-grid:where(body.css-about, body.css-about *) { width: min(100%, 1100px); margin: 0 auto; display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.ab-intro-fig:where(body.css-about, body.css-about *) { margin: 0; overflow: hidden; background: #e4ddd1; }
.ab-intro-fig img:where(body.css-about, body.css-about *) { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; object-position: 50% 40%; }
.ab-intro-inner:where(body.css-about, body.css-about *) { width: auto; margin: 0; text-align: left; }
.ab-intro-title.h-script:where(body.css-about, body.css-about *) { font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3rem); line-height: 1.2; max-width: none; margin: 0 0 1.25rem; text-align: left; }
.ab-intro-copy p:where(body.css-about, body.css-about *) { font-size: 1rem; line-height: 1.7; max-width: 520px; margin: 0; }
.ab-intro-copy p + p:where(body.css-about, body.css-about *) { margin-top: 1rem; }
@media (max-width: 860px) {
  .ab-intro-grid:where(body.css-about, body.css-about *) { grid-template-columns: 1fr; gap: 2rem; }
  .ab-intro-fig img:where(body.css-about, body.css-about *) { max-height: 320px; width: 100%; }
}

/* 1001f: one photo section, "An experience made to feel like you" + 12-photo grid + Meet the girls */
.ab-gallery:where(body.css-about, body.css-about *) { background: var(--cream); }
.ab-gallery-title:where(body.css-about, body.css-about *) { font-size: var(--fs-h2); }
.ab-gal-link:where(body.css-about, body.css-about *) { text-align: center; margin: clamp(2rem, 4vw, 2.75rem) 0 0; }
.ab-gal-item img:where(body.css-about, body.css-about *) { transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ab-gal-item:hover img:where(body.css-about, body.css-about *) { transform: scale(1.04); }
  .js .ab-gal-item.reveal:where(body.css-about, body.css-about *) { transform: translateY(14px); }
  .js .ab-gal-item.reveal.is-in:where(body.css-about, body.css-about *) { transform: none; transition: opacity .6s var(--ease), transform .8s var(--ease); }
}
@media (prefers-reduced-motion: reduce) { .ab-gal-item img:where(body.css-about, body.css-about *) { transition: none; } }
.ab-intro-cta:where(body.css-about, body.css-about *) { margin-top: 1.75rem; }
.ab-gallery:where(body.css-about, body.css-about *) { padding-top: var(--section-y); }
/* 1001h: Meet the girls sits on the group photo, centred near the bottom */
.ab-intro-fig:where(body.css-about, body.css-about *) { position: relative; }
.ab-intro-cta:where(body.css-about, body.css-about *) { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0; z-index: 1; white-space: nowrap; }
/* 1001i: faint translucent pill */
.ab-intro-cta:where(body.css-about, body.css-about *) { display: inline-flex; align-items: center; padding: .5rem 1.1rem; border-radius: 999px; background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .45); color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: background-color .4s var(--ease); }
.ab-intro-cta:hover:where(body.css-about, body.css-about *), .ab-intro-cta:focus-visible:where(body.css-about, body.css-about *) { background: rgba(255, 255, 255, .3); }
.ab-intro-cta:focus-visible:where(body.css-about, body.css-about *) { outline: 2px solid #fff; outline-offset: 3px; }
.ab-intro-cta:where(body.css-about, body.css-about *) { text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }

/* 1001j: About motion. Hidden states only under html.ab-anim (added by about-motion.js, never under reduced motion) */
.ab-intro-fig img:where(body.css-about, body.css-about *) { transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ab-intro-fig:hover img:where(body.css-about, body.css-about *) { transform: scale(1.04); }
}
.ab-anim [data-ab-slide]:where(body.css-about, body.css-about *), .ab-anim [data-ab-rise]:where(body.css-about, body.css-about *) { opacity: 0; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.ab-anim [data-ab-slide="left"]:where(body.css-about, body.css-about *) { transform: translateX(-32px); }
.ab-anim [data-ab-slide="right"]:where(body.css-about, body.css-about *) { transform: translateX(32px); transition-delay: 120ms; }
.ab-anim [data-ab-rise]:where(body.css-about, body.css-about *) { transform: translateY(16px); transition-delay: var(--ab-delay, 0ms); }
.ab-anim [data-ab-slide].ab-in:where(body.css-about, body.css-about *), .ab-anim [data-ab-rise].ab-in:where(body.css-about, body.css-about *) { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-ab-slide]:where(body.css-about, body.css-about *), [data-ab-rise]:where(body.css-about, body.css-about *) { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ab-intro-fig img:where(body.css-about, body.css-about *), .ab-gal-item img:where(body.css-about, body.css-about *) { transition: none; }
}
/* 1001k: the one visible gallery heading, Marcellus, centered */
.ab-gal-title:where(body.css-about, body.css-about *) { font-family: "Marcellus", var(--font-display, serif); font-weight: 400; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.2; letter-spacing: .01em; color: var(--ink); text-align: center; margin: 0 auto clamp(1.75rem, 1.2rem + 1.5vw, 2.75rem); }

/* Retired: pinned backgrounds now live in styles.css ("Pinned photo backgrounds", [data-pin]). Kept empty so existing <link>s don't 404. */

/* PLS v4 · Runtime · hero logo lift
   Big white logo over the hero (inline SVG, currentColor), no disc behind it.
   Header logo on body.page-home is driven by --rt-brand-o (set by hero-logo.js) once the header is .is-scrolled. */
.page-home .hero-logo:where(body.css-hero-logo, body.css-hero-logo *) { color: #fff; filter: drop-shadow(0 4px 24px rgba(var(--scrim-rgb), .28)); transform-origin: 50% 50%; }
.page-home .site-header.is-scrolled:not(.menu-open) .brand:where(body.css-hero-logo, body.css-hero-logo *) { opacity: var(--rt-brand-o, 1); transition: transform .5s var(--ease); }
.page-home .site-header.is-scrolled:not(.menu-open) .brand[data-rt-off]:where(body.css-hero-logo, body.css-hero-logo *) { pointer-events: none; }

/* Reduced motion / no GSAP: static logo, simple fade handoff on the header state change */
.page-home .hero-lockup.rt-static:where(body.css-hero-logo, body.css-hero-logo *) { transition: opacity .5s var(--ease); }
html.past-hero .page-home .hero-lockup.rt-static:where(body.css-hero-logo, body.css-hero-logo *) { opacity: 0; }

/* PLS v4 · Runtime · Google review widget (renders components/reviews/reviews.json)
   Hierarchy, top to bottom: (1) stars + rating, (2) review count, (3) the quote, (4) reviewer, quiet.
   Solid cocoa section (no photo). Fonts and sizes come from shared tokens; the type-scale names below are
   ASSUMED (--step--1 … --step-5, Utopia-style) until the integrator lands them, each with a fallback. */
.rv:where(body.css-reviews, body.css-reviews *) { --rv-text: var(--blush); --rv-quiet: color-mix(in srgb, var(--blush) 78%, var(--cocoa));
  display: grid; gap: 1.25rem; font-family: var(--font-body); color: var(--rv-text); }

/* Compact band (Sep 29 resize, from REFERENCE-NOTES.md): rating blocks on the reference salon sites run ~260px of
   content inside a ~590px band. This one has no heading, so it gets tight padding and a two-column layout on
   desktop: summary on the left, the rotating quote on the right. Overrides the shared .reviews padding (styles.css). */
.section.reviews:where(body.css-reviews, body.css-reviews *) { padding-block: clamp(2.5rem, 1.9rem + 2.4vw, 4rem); }
@media (min-width: 761px) {
  .rv:where(body.css-reviews, body.css-reviews *) { grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "sum main" "act main"; column-gap: 0; row-gap: .9rem; align-items: start; }
  .rv-summary:where(body.css-reviews, body.css-reviews *) { grid-area: sum; }
  .rv-actions:where(body.css-reviews, body.css-reviews *) { grid-area: act; }
  .rv-main:where(body.css-reviews, body.css-reviews *), .rv > .rv-empty:where(body.css-reviews, body.css-reviews *) { grid-area: main; padding-left: clamp(2rem, 4vw, 3.5rem); border-left: 1px solid var(--line-light); }
}

/* (1) + (2) summary */
.rv-summary:where(body.css-reviews, body.css-reviews *) { display: grid; gap: .5rem; justify-items: start; }
.rv-score:where(body.css-reviews, body.css-reviews *) { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .75rem; margin: 0; }
/* number in the body face (the script's numerals read as a signature, not a score), first, sized to ~2.2x the stars */
.rv-num:where(body.css-reviews, body.css-reviews *) { order: -1; font-family: var(--font-body); font-size: clamp(2.25rem, 1.9rem + 1.2vw, 3rem); font-weight: 500; line-height: 1; letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; }
.rv-stars:where(body.css-reviews, body.css-reviews *) { --size: clamp(1.1rem, .95rem + .45vw, 1.375rem); position: relative; display: inline-flex; gap: .2rem; color: color-mix(in srgb, var(--blush) 30%, var(--cocoa)); line-height: 0; }
.rv-stars svg:where(body.css-reviews, body.css-reviews *) { width: var(--size); height: var(--size); fill: currentColor; flex: none; }
.rv-stars .rv-fill:where(body.css-reviews, body.css-reviews *) { position: absolute; inset: 0 auto 0 0; display: inline-flex; gap: .2rem; overflow: hidden; color: #FBBC04; width: calc(var(--rating, 5) / 5 * 100%); }
.rv-count:where(body.css-reviews, body.css-reviews *) { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: var(--fs-small, .9375rem); font-weight: 500; line-height: 1.3; }
.rv-count b:where(body.css-reviews, body.css-reviews *) { font-weight: 700; font-variant-numeric: tabular-nums; }
.rv-g:where(body.css-reviews, body.css-reviews *) { width: 1.25rem; height: 1.25rem; flex: none; background: #fff; border-radius: 50%; padding: .25rem; box-sizing: border-box; }
.rv-g svg:where(body.css-reviews, body.css-reviews *) { width: 100%; height: 100%; }

/* (3) quote + (4) reviewer */
.rv-stage:where(body.css-reviews, body.css-reviews *) { position: relative; display: grid; }
.rv-quote:where(body.css-reviews, body.css-reviews *) { grid-area: 1 / 1; margin: 0; display: grid; align-content: start; gap: .75rem; opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease), visibility 0s linear .6s; }
.rv-quote.is-on:where(body.css-reviews, body.css-reviews *) { opacity: 1; visibility: visible; transition-delay: .1s, 0s; }
.rv-quote blockquote:where(body.css-reviews, body.css-reviews *) { margin: 0; }
.rv-quote blockquote p:where(body.css-reviews, body.css-reviews *) { max-width: 62ch; } /* ≈ 60–70 characters per line at quote size */
.rv-quote blockquote p:where(body.css-reviews, body.css-reviews *) { font-family: var(--font-body); font-size: var(--fs-lead, clamp(1.0625rem, 1rem + .25vw, 1.1875rem)); font-weight: 400; line-height: 1.55; letter-spacing: 0; color: var(--rv-text); text-wrap: pretty; }
.rv-quote blockquote p:where(body.css-reviews, body.css-reviews *)::before { content: "\201C"; }
.rv-quote blockquote p:where(body.css-reviews, body.css-reviews *)::after { content: "\201D"; }
.rv-quote figcaption:where(body.css-reviews, body.css-reviews *) { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; font-size: var(--fs-small, .9375rem); line-height: 1.5; color: var(--rv-quiet); }
.rv-quote .rv-who:where(body.css-reviews, body.css-reviews *) { font-weight: 600; color: var(--rv-quiet); }
.rv-quote .rv-sep:where(body.css-reviews, body.css-reviews *) { opacity: .7; }
.rv-stars-sm:where(body.css-reviews, body.css-reviews *) { --size: .85rem; align-self: center; }
.rv-quote a:where(body.css-reviews, body.css-reviews *) { color: var(--honey); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.rv-quote a:hover:where(body.css-reviews, body.css-reviews *) { text-decoration-thickness: 2px; }

/* rotation controls */
.rv-nav:where(body.css-reviews, body.css-reviews *) { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; }
.rv-dots:where(body.css-reviews, body.css-reviews *) { display: flex; gap: .15rem; }
.rv-dot:where(body.css-reviews, body.css-reviews *) { position: relative; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.rv-dot:where(body.css-reviews, body.css-reviews *)::before, .rv-dot:where(body.css-reviews, body.css-reviews *)::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: color-mix(in srgb, var(--blush) 35%, var(--cocoa)); }
.rv-dot:where(body.css-reviews, body.css-reviews *)::after { background: var(--honey); transform: scaleX(0); transform-origin: left; }
.rv-dot[aria-current="true"]:where(body.css-reviews, body.css-reviews *)::after { animation: rv-prog var(--rv-dur, 8s) linear forwards; }
.rv.is-paused .rv-dot[aria-current="true"]:where(body.css-reviews, body.css-reviews *)::after { animation-play-state: paused; }
@keyframes rv-prog { to { transform: scaleX(1); } }
.rv-arrow:where(body.css-reviews, body.css-reviews *) { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--honey) 70%, var(--cocoa)); background: none; color: var(--blush); cursor: pointer; display: inline-grid; place-items: center; transition: border-color .3s, background-color .3s; }
.rv-arrow:hover:where(body.css-reviews, body.css-reviews *) { border-color: var(--honey); background: color-mix(in srgb, var(--honey) 14%, transparent); }
.rv-arrow svg:where(body.css-reviews, body.css-reviews *) { width: 1rem; height: 1rem; }

.rv-actions:where(body.css-reviews, body.css-reviews *) { display: flex; flex-wrap: wrap; gap: .6rem; }

/* reduced motion: static list, every captured review visible */
.rv.is-static .rv-stage:where(body.css-reviews, body.css-reviews *) { gap: 1.25rem; }
.rv.is-static .rv-quote:where(body.css-reviews, body.css-reviews *) { grid-area: auto; opacity: 1; visibility: visible; transition: none; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line-light); }
.rv.is-static .rv-quote:last-child:where(body.css-reviews, body.css-reviews *) { padding-bottom: 0; border-bottom: 0; }
.rv.is-static .rv-nav:where(body.css-reviews, body.css-reviews *) { display: none; }

.rv-empty:where(body.css-reviews, body.css-reviews *) { font-size: var(--fs-lead, 1.125rem); line-height: 1.5; }

@media (max-width: 760px) {
  .rv-summary:where(body.css-reviews, body.css-reviews *) { padding-bottom: 1.25rem; border-bottom: 1px solid var(--line-light); }
  .rv-quote blockquote p:where(body.css-reviews, body.css-reviews *) { line-height: 1.5; }
  .rv-arrow:where(body.css-reviews, body.css-reviews *) { width: 2.75rem; height: 2.75rem; } /* 44px tap target */
  .rv-actions .btn:where(body.css-reviews, body.css-reviews *) { flex: 1 1 auto; }
}

/* 0930: the band is centred on the page (summary + quote as one balanced block); on phones everything stacks on the centre line */
.rv:where(body.css-reviews, body.css-reviews *) { max-width: 60rem; margin-inline: auto; }
@media (max-width: 760px) {
  .rv:where(body.css-reviews, body.css-reviews *) { text-align: center; }
  .rv-summary:where(body.css-reviews, body.css-reviews *) { justify-items: center; }
  .rv-score:where(body.css-reviews, body.css-reviews *), .rv-count:where(body.css-reviews, body.css-reviews *), .rv-nav:where(body.css-reviews, body.css-reviews *), .rv-actions:where(body.css-reviews, body.css-reviews *), .rv-quote figcaption:where(body.css-reviews, body.css-reviews *) { justify-content: center; }
  .rv-quote blockquote p:where(body.css-reviews, body.css-reviews *) { margin-inline: auto; }
}

/* PLS v4 · round 1400 motion (COMPETITOR-GAPS M1, M2, M4, M6). Text/SVG only: nothing here touches a [data-pin] layer.
   Every effect is JS-gated (html.mo-on) and skipped for prefers-reduced-motion. */

/* M2 pen-stroke headings: words stay real, selectable text; each word is clipped open left to right */
.mo-w { display: inline-block; }
html.mo-on .mo-pen .mo-w { clip-path: polygon(0 0, 0 0, 0 0); } /* hidden until its turn */
html.mo-on .mo-pen.mo-done .mo-w { clip-path: none; }

/* M4 price count-up (desktop tier cells): an aria-hidden counter sits over the real price, which stays in the DOM */
.fg-tp.mo-counting { position: relative; color: transparent; }
.fg-tp .mo-count { position: absolute; inset: 0; color: var(--ink); text-align: right; pointer-events: none; }

/* M1 home hero silk settle: canvas sits over the pinned photo, under the 45% overlay (z-index 1) */
.mo-silk { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
/* mobile: plain fade from ink (a veil above the photo fades out; the photo itself is untouched) */
.mo-veil { position: absolute; inset: 0; z-index: 0; background: var(--ink); pointer-events: none; transition: opacity 1.2s var(--ease); }
.mo-veil.is-out { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html.mo-on .mo-pen .mo-w { clip-path: none; }
  .mo-silk, .mo-veil { display: none; }
}

/* PLS v4 · 1001 scissors doodle pattern (services.html only), REVERSIBLE MOCKUP.
   Remove the single <link rel="stylesheet" href="components/scissors/scissors.css"> line in services.html to revert.
   A still, tiled scissors texture sits behind the cream price menu (.fg-menu) only: never on the hero photo, header or footer.
   How it stays still: the section clips (clip-path: inset(0)) a position: fixed ::before layer, the same technique
   Runtime uses for [data-pin] on touch. It works on iOS (where background-attachment: fixed is ignored), is a single
   composited layer (no scroll repaint), and nothing here sets transform / filter / will-change on any ancestor. */
.fg-menu:where(body.css-scissors, body.css-scissors *) {
  position: relative;
  isolation: isolate;               /* keeps the layer's z-index:-1 inside the section: above its cream, below the text */
  clip-path: inset(0);
  -webkit-clip-path: inset(0);
}
.fg-menu:where(body.css-scissors, body.css-scissors *)::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100vh; height: 100lvh;   /* largest viewport, so iOS toolbar collapse never shows an edge */
  z-index: -1;
  pointer-events: none;
  background: url("https://static.zemi-cdn.com/sites/26/r3-232bbd354041/assets/images/scissors-tile.svg") 0 0 / 480px 480px repeat;
  opacity: .07;                     /* ink at 7% (1001: a touch lighter than 8%; 6% was too faint) */
}
@media (max-width: 600px) {
  .fg-menu:where(body.css-scissors, body.css-scissors *)::before { background-size: 400px 400px; }   /* phones: same density feel, slightly tighter tile */
}
@media print { .fg-menu:where(body.css-scissors, body.css-scissors *)::before { display: none; } }

/* zemi:managed start */
/* zemi:managed end */