/* ==========================================================================
   DESIGN TEST, Swiss/grid-led direction
   Same palette, same Degular type family as the live site. Everything else
   here is new: a locked column grid, hard corners throughout, rule-and-
   whitespace structure instead of bordered cards, and slower, softer motion
   (0.5s floor, 1s ceiling on every transition and animation in this file).
   ========================================================================== */

/* ==========================================================================
   DESIGN TEST, Swiss/grid-led direction, v2
   Now using the full Degular Display, Text, and Mono families with real
   italic cuts, replacing the earlier weight-contrast workaround with
   genuine italics for emphasis - the same convention the reference set
   uses, done properly rather than approximated. Display carries headlines,
   Text carries body copy (a face actually drawn for reading at small
   sizes, not the display cut stretched down), Mono carries indices, dates,
   and labels - a deliberate, technical accent against two humanist faces.
   ========================================================================== */

@font-face { font-family: 'Degular Display'; src: url('fonts-v2/DegularDisplay-Thin.woff2') format('woff2'), url('fonts-v2/DegularDisplay-Thin.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Degular Display'; src: url('fonts-v2/DegularDisplay-Light.woff2') format('woff2'), url('fonts-v2/DegularDisplay-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Degular Display'; src: url('fonts-v2/DegularDisplay-LightItalic.woff2') format('woff2'), url('fonts-v2/DegularDisplay-LightItalic.otf') format('opentype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Degular Display'; src: url('fonts-v2/DegularDisplay-Regular.woff2') format('woff2'), url('fonts-v2/DegularDisplay-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Degular Display'; src: url('fonts-v2/DegularDisplay-RegularItalic.woff2') format('woff2'), url('fonts-v2/DegularDisplay-RegularItalic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Degular Display'; src: url('fonts-v2/DegularDisplay-Medium.woff2') format('woff2'), url('fonts-v2/DegularDisplay-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Degular Display'; src: url('fonts-v2/DegularDisplay-Semibold.woff2') format('woff2'), url('fonts-v2/DegularDisplay-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Degular Display'; src: url('fonts-v2/DegularDisplay-Bold.woff2') format('woff2'), url('fonts-v2/DegularDisplay-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Degular Display'; src: url('fonts-v2/DegularDisplay-BoldItalic.woff2') format('woff2'), url('fonts-v2/DegularDisplay-BoldItalic.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Degular Display'; src: url('fonts-v2/DegularDisplay-Black.woff2') format('woff2'), url('fonts-v2/DegularDisplay-Black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }

@font-face { font-family: 'Degular Text'; src: url('fonts-v2/DegularText-Thin.woff2') format('woff2'), url('fonts-v2/DegularText-Thin.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Degular Text'; src: url('fonts-v2/DegularText-Light.woff2') format('woff2'), url('fonts-v2/DegularText-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Degular Text'; src: url('fonts-v2/DegularText-LightItalic.woff2') format('woff2'), url('fonts-v2/DegularText-LightItalic.otf') format('opentype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Degular Text'; src: url('fonts-v2/DegularText-Regular.woff2') format('woff2'), url('fonts-v2/DegularText-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Degular Text'; src: url('fonts-v2/DegularText-RegularItalic.woff2') format('woff2'), url('fonts-v2/DegularText-RegularItalic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Degular Text'; src: url('fonts-v2/DegularText-Medium.woff2') format('woff2'), url('fonts-v2/DegularText-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Degular Text'; src: url('fonts-v2/DegularText-Semibold.woff2') format('woff2'), url('fonts-v2/DegularText-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Degular Text'; src: url('fonts-v2/DegularText-Bold.woff2') format('woff2'), url('fonts-v2/DegularText-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Degular Text'; src: url('fonts-v2/DegularText-Black.woff2') format('woff2'), url('fonts-v2/DegularText-Black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }

@font-face { font-family: 'Degular Text'; src: url('fonts-v2/DegularText-MediumItalic.woff2') format('woff2'), url('fonts-v2/DegularText-MediumItalic.otf') format('opentype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Degular Text'; src: url('fonts-v2/DegularText-BoldItalic.woff2') format('woff2'), url('fonts-v2/DegularText-BoldItalic.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; }

@font-face { font-family: 'Degular Mono'; src: url('fonts-v2/DegularMono-Thin.woff2') format('woff2'), url('fonts-v2/DegularMono-Thin.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Degular Mono'; src: url('fonts-v2/DegularMono-Light.woff2') format('woff2'), url('fonts-v2/DegularMono-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Degular Mono'; src: url('fonts-v2/DegularMono-Regular.woff2') format('woff2'), url('fonts-v2/DegularMono-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Degular Mono'; src: url('fonts-v2/DegularMono-Medium.woff2') format('woff2'), url('fonts-v2/DegularMono-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Degular Mono'; src: url('fonts-v2/DegularMono-Semibold.woff2') format('woff2'), url('fonts-v2/DegularMono-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Degular Mono'; src: url('fonts-v2/DegularMono-Bold.woff2') format('woff2'), url('fonts-v2/DegularMono-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --black:      #FAFAF8;
  --surface:    #F1F0EC;
  --border:     #E2E0D9;
  --border-mid: #C7C4B8;
  --pink:       #E8005A;
  --pink-dim:   rgba(232, 0, 90, 0.06);
  --text:       #131210;
  --text-mid:   #160109;
  --text-dim:   #66614F;
  --pink-text:  #E10057;
  --danger:     #B3003C;
  --fs-2xs: 0.64rem; --fs-xs: 0.72rem; --fs-sm: 0.85rem; --fs-md: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.75rem; --fs-2xl: 2.5rem;
  --success:    #3A6B4A;   /* a muted, editorial green, kept quiet rather than bright */

  /* Spacing scale - an 8px base, Swiss-style consistent steps rather than
     ad hoc rem values per section. Every margin/padding in this system
     pulls from this scale. */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-5: 40px;
  --sp-7: 56px;
  --sp-8: 64px;
  --sp-9: 72px;
  --sp-10: 80px;
  --sp-11: 88px;
  --sp-12: 96px;
  --sp-16: 128px;

  /* Motion - floor and ceiling per the brief: nothing faster than 0.5s,
     nothing slower than 1s. Soft ease-out throughout, no bounce/overshoot. */
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-fast: 0.5s;
  --dur-slow: 1s;

  /* Locked grid - a 12-column system with a fixed max width and gutter,
     the same grid underlies every page in this test. */
  --grid-max: 1280px;
  --grid-gutter: 24px;
  --grid-margin: 48px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --black: #131210; --surface: #1E1D1A; --border: #2E2C27; --border-mid: #46443C;
    --pink-dim: rgba(232, 0, 90, 0.14); --text: #FAFAF8; --text-mid: #FBF1F5; --text-dim: #8C8878;
  }
}
:root[data-theme="dark"] {
  --black: #131210; --surface: #1E1D1A; --border: #2E2C27; --border-mid: #46443C;
  --pink-dim: rgba(232, 0, 90, 0.14); --text: #FAFAF8; --text-mid: #FBF1F5; --text-dim: #8C8878;
}
:root[data-theme="light"] {
  --black: #FAFAF8; --surface: #F1F0EC; --border: #E2E0D9; --border-mid: #C7C4B8;
  --pink-dim: rgba(232, 0, 90, 0.06); --text: #131210; --text-mid: #160109; --text-dim: #66614F;
}

.nav-theme-row {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--border); padding: 0.75rem 1rem; cursor: pointer;
  margin-bottom: 1.75rem; transition: border-color var(--dur-fast) var(--ease);
}
.nav-theme-row:hover { border-color: var(--pink); }
.nav-theme-row span { font-size: 0.9rem; color: var(--text); }
.nav-theme-row svg { width: 1.1rem; height: 1.1rem; color: var(--text-mid); }
.nav-theme-row .icon-sun { display: none; }
.nav-theme-row.showing-sun .icon-sun { display: block; }
.nav-theme-row.showing-sun .icon-moon { display: none; }

* { box-sizing: border-box; }
html { font-size: 15px; scroll-behavior: smooth; }
@media (min-width: 900px) { html { font-size: 17px; } }

body {
  background: var(--black);
  color: var(--text);
  font-family: 'Degular Text', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300;
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

body { opacity: 0; pointer-events: none; }
body.fonts-ready { opacity: 1; pointer-events: auto; transition: opacity 0.6s ease; }

a { color: var(--pink-text); transition: color 0.14s ease, opacity 0.14s ease; }

/* Every corner in this system is hard. No exceptions - buttons, inputs,
   images, containers. */
* { border-radius: 0 !important; }

img { display: block; max-width: 100%; height: auto; }

/* ---- Locked grid container -------------------------------------------- */
.grid-container {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter);
}

@media (max-width: 900px) {
  :root { --grid-margin: 24px; }
  .grid-12 { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Type scale --------------------------------------------------------
   A fixed, limited scale rather than a size invented per section - Swiss
   typography leans on a small set of decisive jumps, not fine gradation. */
.t-display  { font-family: 'Degular Display', sans-serif; font-weight: 900; font-size: clamp(2.75rem, 5vw, 5rem); line-height: 1.05; letter-spacing: 0.005em; text-transform: uppercase; margin: 0; }
.t-h1       { font-family: 'Degular Display', sans-serif; font-weight: 900; font-size: clamp(2.1rem, 7vw, 3.4rem); line-height: 1.05; letter-spacing: 0.005em; text-transform: uppercase; margin: 0; }
.t-h2       { font-family: 'Degular Display', sans-serif; font-weight: 900; font-size: 1.6rem; line-height: 1.25; letter-spacing: -0.005em; text-transform: uppercase; margin: 0; }
.t-eyebrow  { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--pink-text); margin: 0; }

/* ---- Editorial layer -----------------------------------------------------
   Deliberate scale contrast: very small quiet meta text against large display
   type, with little in between. This is what carries the editorial feel when
   the typeface itself is a grotesque rather than a high-contrast serif.
   Additive only - existing classes above are untouched. */
.t-meta {
  font-family: 'Degular Mono', monospace; font-weight: 300;
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim); line-height: 1.4; margin: 0;
}
.t-index {
  font-family: 'Degular Mono', monospace; font-weight: 300;
  font-size: 0.62rem; letter-spacing: 0.1em; color: var(--text-dim);
  line-height: 1; margin: 0 0 8px;
}
/* True italic - confirmed available across all weights in the licensed set. */
.t-em { font-style: italic; }
.t-attrib { font-style: italic; font-size: 0.85rem; color: var(--text-mid); margin: 2px 0 0; }

/* ---- Editorial look pass -------------------------------------------------
   The reference set's feel comes from three things, not from its serif:
   extreme scale contrast (tiny meta vs huge display, little in between),
   whitespace confidence, and near-monochrome restraint letting the
   photography carry all the colour. Applied globally here so the whole
   site shifts together rather than page by page. */

/* 1. Headlines get materially bigger and tighter - the top of the contrast. */
.full-page-header .t-display,
.full-page-header .t-h1 {
  font-size: clamp(2.6rem, 8.5vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.split-page-header .t-display,
.split-page-header .t-h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

/* 2. Eyebrows drop to a quiet mono meta-mark - the bottom of the contrast. */
.full-page-header .t-eyebrow,
.split-page-header .t-eyebrow {
  font-family: 'Degular Mono', monospace;
  font-weight: 300;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--text-dim);
}

/* 3. Standfirst sits lighter and looser beneath the headline. */
.full-page-header .t-body-mid,
.split-page-header .t-body-mid {
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-mid);
}

/* 4. Header breathing room - confidence comes from the space around it. */
.full-page-header { padding: 90px 1.5rem 72px; }
@media (min-width: 900px) { .full-page-header { padding: 120px 1.5rem 96px; } }

/* 5. Section labels stop shouting - mono, dim, not bold pink. */
.section-label {
  font-family: 'Degular Mono', monospace;
  font-weight: 300;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--text-dim);
}

/* 6. Section rhythm opens up. */
.section { padding: var(--sp-10) 0; }
@media (min-width: 900px) { .section { padding: var(--sp-12) 0; } }

/* 7. No image anywhere carries a border - the reference set is absolute
      about this, and it was the single most repeated note. */
.testimonial-img-wrap,
.hub-card > div,
.look-tile,
.pose-tile { border: none !important; }

/* 8. Card titles: larger, lighter, sentence case - editorial not shouty. */
.testimonial-name,
.guide-hub-card-title {
  font-size: 1.15rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

/* ---- Rhythm: Header > 100px > Line > 100px > Content ---------------------
   One fixed vertical rhythm everywhere, so no page invents its own spacing.
   Applies equally to content break rules. */
.full-page-header { padding: 90px 1.5rem 100px; border-bottom: 1px solid var(--border); }
@media (min-width: 900px) { .full-page-header { padding: 120px 1.5rem 100px; } }
.full-page-header + * { padding-top: 100px; }

.split-page-header { padding-bottom: 100px; border-bottom: 1px solid var(--border); }
.split-page-header + * { padding-top: 100px; }

.rule { border: none; border-top: 1px solid var(--border); margin: 100px 0; height: 0; }

/* Mono is only ever pink or light grey - never near-black. */
.section-label, .t-meta, .t-index, .idx,
.full-page-header .t-eyebrow, .split-page-header .t-eyebrow {
  font-family: 'Degular Mono', monospace;
  font-weight: 300;
  color: var(--text-dim);
}
.section-label { color: var(--pink-text); }

/* Headers are always centre-aligned and never move off that axis. */
.full-page-header { text-align: center; }
.full-page-header-inner { margin-left: auto; margin-right: auto; }
.full-page-header .t-body-mid,
.split-page-header .t-body-mid { margin-left: auto; margin-right: auto; }

/* Headlines are capped to two lines - never three. */
.full-page-header .t-display,
.full-page-header .t-h1,
.split-page-header .t-display,
.split-page-header .t-h1 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: min(100%, 1100px); margin-left: auto; margin-right: auto;
}

/* Below 1024px the split-page image is too small to hold its half, so the
   layout collapses and the header switches to the same centred treatment
   as every other page, using the centred logo. */
@media (max-width: 1023px) {
  .split-page-header { text-align: center; padding-left: 1.5rem; padding-right: 1.5rem; }
  .split-page-header .brand-logo-link { margin-left: auto; margin-right: auto; }
  .split-page-header .t-eyebrow { text-align: center; }
}

/* ---- Peek rail (scroller) ------------------------------------------------
   Horizontal scroller that deliberately cuts the last card at the right edge,
   signalling "more here" without arrows or instructions. Snap points keep it
   feeling deliberate rather than loose. Especially useful on mobile, where a
   long vertical wall of images is tiring to scroll. */
/* ---- Explore rail (mobile only) ------------------------------------------
   Four curated cards is exactly the size the reference set uses a rail for.
   Below 768px this becomes a snap-scrolling row that cuts the last card at
   the edge, signalling more without arrows. Desktop keeps the 4-up grid,
   since there the whole set is already visible at once. */
@media (max-width: 767px) {
  .grid-12.explore-grid {
    display: flex !important; gap: var(--sp-2);
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .grid-12.explore-grid::-webkit-scrollbar { display: none; }
  .grid-12.explore-grid > * {
    scroll-snap-align: start; flex: 0 0 auto;
    width: 74%; max-width: 300px; grid-column: auto !important;
  }
}

.peek-rail {
  display: flex; gap: var(--sp-2); overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px;
}
.peek-rail::-webkit-scrollbar { display: none; }
.peek-rail > * { scroll-snap-align: start; flex: 0 0 auto; }
.peek-rail-item { width: 70%; max-width: 300px; }
@media (min-width: 768px) { .peek-rail-item { width: 34%; } }
@media (min-width: 1024px) { .peek-rail-item { width: 25%; } }

/* Quiet progress track under a rail - position, no chrome. */
.rail-progress { height: 1px; background: var(--border); margin-top: var(--sp-2); position: relative; }
.rail-progress-bar { position: absolute; top: 0; left: 0; height: 1px; background: var(--text); transition: width 0.2s linear, transform 0.2s linear; }

/* Sticky rotated side label - wayfinding while content scrolls past. */
.side-label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: 'Degular Mono', monospace; font-weight: 300;
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim); white-space: nowrap; align-self: start;
  position: sticky; top: var(--sp-6);
}
.t-body     { font-size: 1rem; line-height: 1.75; color: var(--text); margin: 0; }
.t-body-mid { font-size: 1.05rem; line-height: 1.65; color: var(--text-mid); margin: 0; }
.t-list li { font-size: 0.95rem; line-height: 1.6; color: var(--text); }
.t-small    { font-size: 0.88rem; color: var(--text-mid); margin: 0; }

/* ---- Rule lines, used instead of bordered cards to separate content ---- */
.rule       { border: none; border-top: 1px solid var(--border); margin: 0; }
.rule-mid   { border: none; border-top: 1px solid var(--border-mid); margin: 0; }

/* ---- Header / nav -------------------------------------------------------
   Left-aligned lockup rather than the centered logo-title-subtitle stack -
   the single biggest visual change from the live site's header pattern. */
.site-header {
  border-bottom: 1px solid var(--border);
  padding: var(--sp-4) 0;
}
.site-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.brand-mark { height: 28px; display: block; }
.brand-mark img { height: 100%; width: auto; display: block; }

/* ---- Full-page centered header - matches the real site's own guide/
   content-page header exactly: a fixed circular menu button (not a bar),
   and a fully centered logo + eyebrow + title + description block. ---- */
.nav-trigger-fixed {
  position: fixed; top: 1rem; right: 1rem; z-index: 600;
  width: 40px; height: 40px; border-radius: 0 !important;
  border: 1px solid var(--border-mid); background: var(--surface); color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.nav-trigger-fixed:hover { border-color: var(--pink); }
.nav-trigger-fixed svg { width: 1.15rem; height: 1.15rem; }

/* ---- Split-page container - matches the real site's actual .container
   exactly: left-aligned, NOT the generic centered/capped grid-container,
   and used ONCE around the whole page's content rather than per-section. */
.split-container {
  max-width: 580px; margin: 0 auto; padding: 2.5rem 1.25rem 5rem;
}
@media (min-width: 900px) {
  .split-container { max-width: 820px; padding: 3.5rem 2.5rem 8rem; }
}
@media (min-width: 1440px) {
  .split-container { max-width: 1200px; padding: 4rem 3rem 9rem; }
}
/* Inside the half-page split layout specifically, the container fills the
   full width of its own pane instead of using the standalone max-widths
   above - it's already constrained by the 40/60 split itself. */
.half-page-content .split-container {
  max-width: 100%; margin: 0; padding: 2.5rem 3rem 4rem;
}

.split-page-header {
  max-width: 100%; padding: 70px 3rem 2rem;
  text-align: left; border-bottom: 1px solid var(--border);
}
.split-page-header .brand-logo-link { display: block; width: fit-content; margin: 0 0 1.25rem; line-height: 0; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.split-page-header .brand-logo-link:hover { opacity: 0.78; transform: translateY(-1px); }
.split-page-header .brand-logo { width: 200px; height: auto; display: block; }

.full-page-header {
  padding: 70px 1.5rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.full-page-header-inner { max-width: 580px; margin: 0 auto; }
.full-page-header .brand-logo-link {
  display: block; width: fit-content; margin: 0 auto 1.25rem; line-height: 0;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.full-page-header .brand-logo-link:hover { opacity: 0.78; transform: translateY(-1px); }
.full-page-header .brand-logo { display: block; width: 200px; max-width: 60vw; height: auto; margin: 0; }
.full-page-header .t-eyebrow { display: inline-block; }
.full-page-header .t-display,
.full-page-header .t-h1 { margin-top: var(--sp-2); }
.full-page-header .t-body-mid { margin: var(--sp-2) auto 0; }

.nav-inline { display: flex; gap: var(--sp-3); align-items: center; }
.nav-inline a {
  font-size: 0.85rem;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-mid);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-inline a:hover { color: var(--pink-text); border-color: var(--pink); }

.menu-btn {
  border: 1px solid var(--border-mid);
  background: none;
  color: var(--text);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 18px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.menu-btn:hover { border-color: var(--pink); color: var(--pink-text); }

@media (min-width: 780px) {
  .menu-btn { display: none; }
}
@media (max-width: 779px) {
  .nav-inline { display: none; }
}

/* Mobile drawer - same function as the live site, restyled: hard corners,
   left-aligned type, slower reveal. */
.nav-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: 100%;
  max-width: 360px;
  background: var(--black);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 800;
  overflow-y: auto;
  padding: 1.25rem 1.5rem 2.5rem;
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer a {
  display: block;
  font-family: 'Degular Display', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--pink-text) !important;
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}
.nav-drawer a:hover { opacity: 0.8; }
.nav-links { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 2rem; }
.nav-links:first-of-type { margin-top: 3.25rem; }
.nav-divider { border-top: 1px solid var(--border); margin: 1.5rem 0; }
.nav-row-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.75rem; }
.nav-social-links { display: flex; flex-direction: column; gap: 0.4rem; }
a.nav-social-link {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--border); padding: 0.5rem 0.75rem; font-size: 0.78rem;
  color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
a.nav-social-link:hover { border-color: var(--pink); color: var(--pink-text); }
.nav-drawer-close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  border: 1px solid var(--border-mid);
  background: none;
  width: 40px;
  height: 40px;
  cursor: pointer;
  color: var(--text);
}
.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease);
  z-index: 700;
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }

/* ---- Buttons ------------------------------------------------------------ */
.cta-sub { margin-top: 0.875rem; font-size: 0.85rem; color: var(--text-dim); }
.cta-sub a { color: var(--pink-text); }
.btn {
  display: inline-block;
  background: var(--pink);
  color: #fff;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 12px 24px;
  border: 1px solid var(--pink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { background: transparent; color: var(--pink); transform: translateY(-1px); }
.btn-outline {
  display: inline-block;
  background: none;
  color: var(--text);
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 12px 24px;
  border: 1px solid var(--border-mid);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-outline:hover { border-color: var(--pink); color: var(--pink); transform: translateY(-1px); }

/* ---- Sections ------------------------------------------------------------ */
.section { padding: var(--sp-12) 0; }
.rule { border: none; border-top: 1px solid var(--border); margin: 22px 0; height: 0; }
.section-tight { padding: var(--sp-8) 0; }

/* Asymmetric split - used for hero and feature moments. Deliberately NOT
   dramatic: a steady 7/5 or 5/7 column split, everything still reads in a
   plain top-to-bottom, left-to-right order. The point is off-centre, not
   unreadable. */
.split-7-5 { grid-column: span 7; }
.split-5-7 { grid-column: span 5; }
.split-8-4 { grid-column: span 8; }
.split-4-8 { grid-column: span 4; }
@media (max-width: 900px) {
  .split-7-5, .split-5-7, .split-8-4, .split-4-8 { grid-column: span 4; }
}

/* Full-bleed image, no frame, no radius, no shadow - fills its column
   completely. */
.bleed-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Content blocks (replace bordered "cards") --------------------------
   Separation comes from a rule line and generous padding, not a box. */
.block { padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.block + .block { margin-top: var(--sp-4); }

/* Where a contained rectangle genuinely helps (FAQ items, guide tiles),
   it's a hairline border, hard corner, no shadow - never a floating card. */
.tile {
  border: 1px solid var(--border);
  padding: var(--sp-3);
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease);
}
.tile:hover { border-color: var(--pink); }

/* ---- Motion: entrance fade, matching the real site's actual timing ------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .fade-in { animation: fadeUp 1.17s var(--ease) both; }
  .fade-in-delay-1 { animation: fadeUp 1.17s var(--ease) 0.195s both; }
  .fade-in-delay-2 { animation: fadeUp 1.17s var(--ease) 0.39s both; }
}

/* ---- Numbered indices - used on every grid item, not just decorative --- */
.idx { font-family: 'Degular Mono', monospace; font-weight: 300; font-size: 0.62rem; color: var(--text-dim); letter-spacing: 0.1em; margin-bottom: var(--sp-1); display: block; }

/* ---- Italic emphasis, the real thing now rather than the weight-contrast
   workaround used before this font pack arrived. Same convention as the
   reference set: emphasis words in italic within an otherwise upright
   headline or line of body copy. Weight-contrast classes kept too, since
   both are legitimate emphasis tools and the homepage rebuild uses both. */
.em-it { font-family: 'Degular Display', sans-serif; font-style: italic; font-weight: 300; }
.wt-light { font-family: 'Degular Display', sans-serif; font-weight: 300; }
.wt-black { font-family: 'Degular Display', sans-serif; font-weight: 900; }

/* ---- Mono accent - indices, dates, small labels. Deliberately technical
   against the two humanist faces above. --------------------------------- */
.mono { font-family: 'Degular Mono', monospace; }

/* ---- Staggered asymmetric image collage - three images at deliberately
   uneven heights and a slight vertical offset, not a uniform row. This is
   the single most repeated device in the reference set. */
.collage {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: var(--sp-2);
  align-items: end;
}
.collage img { width: 100%; object-fit: cover; display: block; }
.collage .c-left  { height: 60%; }
.collage .c-mid   { height: 100%; }
.collage .c-right { height: 45%; }
@media (max-width: 700px) {
  .collage { grid-template-columns: 1fr 1.4fr 1fr; }
}

/* ---- Vertical rotated micro-label, used as a quiet side accent next to a
   grid rather than a heading above it. ------------------------------------ */
.vert-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.85rem;
  color: var(--text-mid);
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .vert-label { display: none; }
}

/* ---- Pull-quote: a genuine editorial quote, not a callout box. --------- */
.pull-quote {
  text-align: center;
  max-width: 42ch;
  margin: 0 auto;
}
.pull-quote-text {
  font-family: 'Degular Display', sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.35;
  margin: 0 0 var(--sp-3);
}
.pull-quote-attr { font-size: 0.88rem; color: var(--text-dim); }

/* ---- Small-caps label/value list, for credits, specs, or a summary. ---- */
.kv-list { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); }
.kv-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.kv-value { font-size: 0.92rem; color: var(--text); }

/* ---- Booking form elements ---------------------------------------------- */
.form-section { padding: var(--sp-6) 0; border-top: 1px solid var(--border); }
.form-section:first-of-type { border-top: none; }
.section-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.section-label { font-family: 'Degular Mono', monospace; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink-text); white-space: nowrap; }
.section-line { flex: 1; border-top: 1px solid var(--border); }
.field { margin-bottom: var(--sp-4); }
.field-label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mid); margin-bottom: var(--sp-1); }
.field-sub { font-size: 0.85rem; color: var(--text-dim); margin: 0 0 var(--sp-2); }
.required-mark { color: var(--pink-text); }
.field-input, .field-textarea, select.field-input {
  display: block; width: 100%; background: transparent;
  border: none; border-bottom: 1px solid var(--border-mid);
  color: var(--text); font-family: 'Degular Text', sans-serif; font-size: 1.08rem; font-weight: 300;
  padding: 0.7rem 0; outline: none; appearance: none; -webkit-appearance: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.field-input::placeholder, .field-textarea::placeholder { color: var(--text-dim); }
.field-input:focus, .field-textarea:focus { outline: none; border-color: var(--pink); }
.field-textarea { min-height: 88px; resize: vertical; }
.field-err { display: none; color: var(--pink-text); font-size: 0.85rem; margin-top: 0.375rem; }
.field-err.show { display: block; }
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); }
.field-full { grid-column: 1 / -1; }
@media (max-width: 700px) { .details-grid { grid-template-columns: 1fr; } }

.looks-grid { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.look-check { border: 1px solid var(--border-mid); padding: 8px 14px; font-size: 0.88rem; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.look-check:hover { transform: translateY(-1px); border-color: var(--border-mid); }
.look-check input { margin-right: 6px; }
.look-check:has(input:checked) { border-color: var(--pink); color: var(--pink-text); }

.check-row { display: flex; gap: var(--sp-2); align-items: flex-start; margin-bottom: var(--sp-3); }
.check-row input { margin-top: 4px; flex-shrink: 0; }
.check-text { font-size: 0.98rem; color: var(--text-mid); line-height: 1.6; }
.check-text a { color: var(--pink-text); text-decoration: none; }

.slot-tile { border: 1px solid var(--border); padding: var(--sp-3); cursor: pointer; display: block; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.slot-tile:hover { border-color: var(--border-mid); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(19,18,16,0.06); }
.slot-tile:has(input:checked) { border-color: var(--pink); }
.slot-tile input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.slot-tile input:focus-visible ~ * { outline: 2px solid var(--pink); outline-offset: 2px; }
.slot-tile:has(input:focus-visible) { outline: 2px solid var(--pink); outline-offset: 2px; }

.booking-summary { border: 1px solid var(--border); padding: var(--sp-4); margin: var(--sp-3) 0; }
.booking-summary-row { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) 0; font-size: 0.9rem; }
.booking-summary-row span:first-child { color: var(--text-dim); }

/* ---- Half-page split template (About, How It Works on the live site) --
   A pinned, full-height image on one side, independently scrolling
   content on the other. Hidden on mobile in favour of a plain single
   column - the split only makes sense once there's room for both. */
.half-page-image {
  display: none;
}
.half-page-content { }
@media (min-width: 1024px) {
  body.half-page { display: grid; grid-template-columns: 40% 60%; }
  .half-page-image {
    display: block;
    position: fixed;
    top: 0; left: 0;
    width: 40%; height: 100vh;
    background: var(--text);
    overflow: hidden;
  }
  .half-page-image img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 20%;
    display: block;
  }
  .half-page-content {
    grid-column: 2;
    overflow-y: auto;
    height: 100vh;
    scroll-behavior: smooth;
  }
}

/* ---- Slot type / status badges - matches the real site's own indicators */
.slot-tile { position: relative; }
.slot-type-badge-corner {
  position: absolute; top: var(--sp-1); right: var(--sp-1);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 8px; border: 1px solid var(--border-mid); color: var(--text-dim);
}
.slot-type-outdoor { color: var(--text-mid); }
.slot-type-studio { color: var(--pink-text); border-color: var(--pink); }
.slot-tile-booked .slot-type-badge-corner { top: calc(var(--sp-1) + 1.8rem); }
.slot-tile-booked { opacity: 0.55; cursor: not-allowed; }
.slot-tile-booked input { pointer-events: none; }
/* ---- FAQ accordion -------------------------------------------------------- */
.faq-item { border-bottom: 1px solid var(--border); transition: border-color var(--dur-fast) var(--ease); }
.faq-item:hover { border-color: var(--pink); }
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  background: none;
  border: none;
  text-align: left;
  font-family: 'Degular Text', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  padding: var(--sp-3) 0;
  cursor: pointer;
}
.faq-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  position: relative;
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  background: var(--text);
  transition: transform var(--dur-fast) var(--ease);
}
.faq-icon::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.faq-icon::after { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.faq-item.open .faq-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease);
}
.faq-item.open .faq-a { max-height: 400px; }
.faq-a-inner { padding: 0 0 var(--sp-3); font-size: 0.95rem; color: var(--text-mid); line-height: 1.65; }

/* ---- Footer ---------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border); padding: var(--sp-8) 0 var(--sp-4); }
.footer-col-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pink-text); margin: 0 0 var(--sp-2); }
.footer-bottom { font-size: 0.8rem; letter-spacing: 0.05em; }
.footer-col a { display: block; font-size: 0.92rem; color: var(--text-mid); text-decoration: none; padding: 4px 0; transition: color var(--dur-fast) var(--ease); }
.footer-col a:hover { color: var(--pink-text); }

/* ==========================================================================
   FINAL OVERRIDES - must sit last to win against earlier definitions.
   ========================================================================== */

/* Rhythm: Header > 100px > Line > 100px > Content, everywhere. */
.full-page-header { padding: 60px 1.5rem 30px !important; border-bottom: 1px solid var(--border); text-align: center; }
@media (min-width: 900px) { .full-page-header { padding: 80px 1.5rem 30px !important; } }
.split-page-header { padding-bottom: 30px !important; border-bottom: 1px solid var(--border); }
.full-page-header + *, .split-page-header + * { padding-top: 30px !important; }
.rule { margin: 30px 0 !important; }

/* Mono is only ever pink or light grey. */
.t-meta, .t-index, .idx,
.full-page-header .t-eyebrow, .split-page-header .t-eyebrow {
  font-family: 'Degular Mono', monospace !important; font-weight: 300 !important; color: var(--text-dim) !important;
}
.section-label { font-family: 'Degular Mono', monospace !important; font-weight: 300 !important; color: var(--pink-text) !important; }

/* Headers centred, never more than two lines. */
.full-page-header-inner { margin-left: auto !important; margin-right: auto !important; }
.full-page-header .t-display, .full-page-header .t-h1,
.split-page-header .t-display, .split-page-header .t-h1 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: min(100%, 1100px); margin-left: auto; margin-right: auto;
}
.full-page-header .t-body-mid, .split-page-header .t-body-mid { margin-left: auto; margin-right: auto; }

/* Split pages collapse to the centred treatment once the image can't hold
   its half of the screen. */
@media (max-width: 1023px) {
  .split-page-header { text-align: center !important; padding-left: 1.5rem; padding-right: 1.5rem; }
  .split-page-header .brand-logo-link { margin-left: auto !important; margin-right: auto !important; }
}

/* ==========================================================================
   EDITORIAL HEADER - applied to all full-page headers.
   British-modern retail logic (Burberry / John Lewis): the feel comes from
   corner meta marks, extreme scale contrast, a single italic accent and
   large empty areas - not from decoration or image overlays. Headers stay
   perfectly centred per the agreed spec; asymmetry lives in the meta row.
   ========================================================================== */
.eh-corner {
  display: flex; justify-content: space-between; align-items: baseline;
  width: 100%; max-width: var(--grid-max); margin: 0 auto 40px;
  padding: 0 1.5rem;
}
.eh-corner p {
  font-family: 'Degular Mono', monospace; font-weight: 300;
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim); margin: 0; line-height: 1.4;
}
.eh-corner p:last-child { text-align: right; }

/* The section kicker: the one pink mark on the page. */
.full-page-header .t-eyebrow {
  color: var(--pink-text) !important;
  font-size: 0.62rem !important; letter-spacing: 0.18em !important;
  margin-bottom: 28px !important;
}

/* Display headline: bigger, tighter, with room to breathe beneath. */
.full-page-header .t-display,
.full-page-header .t-h1 {
  font-size: clamp(2.4rem, 6vw, 5rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.015em !important;
  max-width: 16ch;
}
/* A single italic word carries the editorial accent - true Degular italic. */
.full-page-header .t-display em,
.full-page-header .t-h1 em { font-style: italic; font-weight: 300; }

.full-page-header .t-body-mid {
  margin-top: 36px !important;
  font-weight: 300; font-size: 1rem; line-height: 1.75;
  max-width: 52ch;
}

/* No double lines: a header already carries its own bottom border, so any
   rule immediately following one is redundant and gets removed. */
.full-page-header + hr.rule,
.split-page-header + hr.rule { display: none !important; }

/* Intro action pair - primary scrolls to the slots, secondary goes to the
   full walkthrough. Centred on small screens where the row would wrap. */
.intro-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.intro-actions .btn, .intro-actions .btn-outline { text-align: center; }
@media (max-width: 599px) {
  .intro-actions { justify-content: center; }
  .intro-actions .btn, .intro-actions .btn-outline { flex: 1 1 100%; }
}

/* Rotating testimonial - quiet and editorial, no carousel chrome. */
.quote-rotator { text-align: center; }
.quote-meta { margin-bottom: 28px; }
.quote-block { margin: 0 auto; max-width: 34ch; }
.quote-text {
  font-family: 'Degular Display', sans-serif; font-weight: 300; font-style: italic;
  font-size: clamp(1.35rem, 3vw, 2.1rem); line-height: 1.25; margin: 0;
  transition: opacity 0.5s var(--ease); min-height: 3.8em;
}
.quote-name {
  font-family: 'Degular Mono', monospace; font-weight: 300;
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim); margin-top: 20px;
  transition: opacity 0.5s var(--ease);
}
.quote-rotator.fading .quote-text, .quote-rotator.fading .quote-name { opacity: 0; }
.quote-dots { display: flex; gap: 10px; justify-content: center; margin-top: 32px; }
.quote-dots button {
  width: 7px; height: 7px; padding: 0; border: 1px solid var(--border-mid);
  background: none; cursor: pointer; flex: 0 0 auto;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.quote-dots button[aria-current="true"] { background: var(--pink); border-color: var(--pink); }

/* ==========================================================================
   UNIVERSAL LINE RULE: every divider on the site, whatever draws it, gets
   exactly 30px of clear space above and below. Covers <hr>, section
   border-tops, guide pagers, the numbered guide sections and the footer
   divider - so no component can invent its own spacing.
   ========================================================================== */
.rule { margin: 30px 0 !important; }

.about-section { padding: 30px 0 !important; border-top: 1px solid var(--border); }
.about-section:first-of-type { border-top: none; padding-top: 0 !important; }

.guide-pager { padding: 30px 0 !important; border-top: 1px solid var(--border); margin-top: 0 !important; }
.guide-section { padding: 30px 0 !important; }

/* Footer divider */
.site-footer .grid-container[style*="border-top"],
.site-footer .split-container[style*="border-top"] {
  margin-top: 30px !important; padding-top: 30px !important;
}

/* ==========================================================================
   NO DOUBLE LINES - anywhere. Any divider immediately following another
   divider, or following an element that already draws a bottom border,
   is suppressed. Covers every combination site-wide.
   ========================================================================== */
hr.rule + hr.rule,
.full-page-header + hr.rule,
.split-page-header + hr.rule,
hr.rule + .about-section,
hr.rule + .guide-section,
hr.rule + .guide-pager { border-top: none !important; }
hr.rule + hr.rule { display: none !important; }
.full-page-header + hr.rule,
.split-page-header + hr.rule { display: none !important; }
.about-section + .about-section { border-top: 1px solid var(--border); }
section + hr.rule:first-child { display: none !important; }
/* A section whose first child is a rule, directly after a bordered header */
.full-page-header + * > hr.rule:first-child,
.split-page-header + * > hr.rule:first-child { display: none !important; }

/* Header spacing: tighter, no wasted vertical run. */
.full-page-header { padding: 40px 1.5rem 30px !important; }
@media (min-width: 900px) { .full-page-header { padding: 56px 1.5rem 30px !important; } }
.eh-corner { margin: 0 auto 32px !important; }
.full-page-header .t-eyebrow { margin-bottom: 18px !important; }
.full-page-header .t-body-mid { margin-top: 24px !important; }

/* Tracking: tighten the wide mono marks. */
.t-meta, .t-index, .idx, .eh-corner p,
.full-page-header .t-eyebrow, .split-page-header .t-eyebrow,
.section-label, .quote-meta, .quote-name {
  letter-spacing: 0.08em !important;
}

/* ==========================================================================
   TIER 1 ELEVATION
   ========================================================================== */

/* 1. Grain - stops the off-white reading as flat digital white and gives it
   the texture of paper. Sits above the ground, below everything else, and
   never intercepts a click. Lifted off the lightbox so photography stays
   clean, and dropped entirely for reduced-motion/low-data preferences. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
@media (prefers-reduced-motion: reduce) { body::before { display: none; } }
.lb-scrim { z-index: 950; }

/* 3. Focus states - brand pink, never the default blue ring. Keyboard users
   must always be able to see where they are. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--pink) !important;
  outline-offset: 3px !important;
}
.slot-tile:has(input:focus-visible),
.look-check:has(input:focus-visible) {
  outline: 2px solid var(--pink); outline-offset: 3px;
}

/* 4. Image load discipline - fade in rather than snapping, so slow
   connections feel considered instead of broken. */
/* Loading placeholder sits on the photo wrapper, never on the image itself -
   transparent PNGs (client logos, the brand mark) must not pick up a grey
   backing. */
.hub-card > div, .testimonial-img-wrap, .look-tile, .lb-photos {
  background-color: var(--surface);
}
.brand-strip-cell, .brand-strip-cell img, .brand-logo { background: none !important; }
.js-fade .hub-card img, .js-fade .testimonial-img-wrap img,
.js-fade .pose-tile img, .js-fade .look-tile img {
  opacity: 0; transition: opacity 0.6s var(--ease), transform 0.4s var(--ease);
}
.hub-card img.loaded, .testimonial-img-wrap img.loaded,
.pose-tile img.loaded, .look-tile img.loaded { opacity: 1; }

/* 2. Caption system - one quiet Mono Light treatment for every image
   caption on the site. */
.img-caption {
  font-family: 'Degular Mono', monospace; font-weight: 300;
  font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); margin: 10px 0 0; line-height: 1.4;
}

/* 13. Skip link - first tab stop, invisible until focused. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--pink); color: #fff; padding: 12px 20px;
  font-size: 0.85rem; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Page hero - the single centred photograph beneath the header, replacing
   the old split-page layout. Same treatment on every page that has one. */
.page-hero { margin: 0 auto; max-width: 620px; line-height: 0; }
.page-hero img { width: 100%; height: auto; display: block; }

/* The header inner was capped at 580px, which forced long headlines onto a
   third line and triggered the two-line clamp to cut words off. The headline
   gets room to breathe; the standfirst keeps a readable measure of its own. */
.full-page-header-inner { max-width: 1100px !important; }
.full-page-header .t-body-mid { max-width: 56ch; }
.full-page-header .intro-actions { justify-content: center; }

/* ---- Individual look pages -----------------------------------------------
   Each style is a real page with its own URL, so it gets room the lightbox
   never had: full-width hero, generous sections, its own pager. */
.look-hero { margin: 0 auto; max-width: 720px; line-height: 0; }
.look-hero img { width: 100%; height: auto; display: block; }
.look-hero figcaption { text-align: center; }
.look-section { max-width: 74ch; margin: 0 auto; padding: 30px 0; }
.look-section .section-label { display: block; margin-bottom: 18px; }
.look-cols { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 700px) { .look-cols { grid-template-columns: 1fr 1fr; gap: 48px; } }
.look-col-label { font-weight: 700; font-size: 0.95rem; margin: 0 0 12px; }

/* Cross-page transition - a short fade in on arrival so moving between
   looks feels continuous rather than a hard cut. */
@media (prefers-reduced-motion: no-preference) {
  .page-fade { animation: pageIn 0.45s var(--ease) both; }
}
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }



/* ==== Round 2 - item 6: one card/subheader title system, matched exactly
   to the drawer nav links - Degular Text, 400, 0.02em, uppercase.
   Covers testimonial names, Notes hub cards, Before You Book cards,
   outfit guide card titles and posing subheaders. ==== */
.testimonial-name, .guide-hub-card-title, .look-tile-title, .pose-title,
.location-name {
  font-family: 'Degular Display', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}
.explore-grid .guide-hub-card-title { font-size: 1.15rem; margin: 0 0 6px; }
/* Posing subheaders at the same size as Testimonials names. */
.pose-title { font-size: 1.15rem !important; line-height: 1.25; margin: 0 0 6px; color: var(--text); }

/* ==== Round 2 - item 10: style picker as a true 4-column grid.
   Every option is the same size regardless of label length. The tick box
   stays neutral (never pink) and sits vertically centred on its label;
   selection is shown by the border and label turning pink. ==== */
.looks-grid {
  display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: var(--sp-2);
}
@media (max-width: 899px) { .looks-grid { grid-template-columns: repeat(2, 1fr); } }
.look-check {
  display: flex !important; align-items: center; gap: 10px;
  min-height: 52px; padding: 10px 14px !important;
  font-size: 0.88rem; line-height: 1.25;
  border: 1px solid var(--border-mid); background: none; cursor: pointer;
}
.look-check input {
  appearance: none; -webkit-appearance: none; margin: 0 !important;
  flex: 0 0 16px; width: 16px; height: 16px;
  border: 1px solid var(--border-mid); background: var(--black);
  display: grid; place-content: center; cursor: pointer;
}
.look-check input::before {
  content: ''; width: 9px; height: 9px;
  transform: scale(0); transition: transform 0.12s var(--ease);
  background: var(--text);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.look-check input:checked::before { transform: scale(1); }
.look-check:has(input:checked) { border-color: var(--pink); color: var(--pink-text); }
.look-check:has(input:checked) input { border-color: var(--text); }

/* ==== Round 2 - items 12/13: wider, slower, eased crossfade. Out and in
   use the same curve and duration, so it never snaps back in. ==== */
.quote-block { max-width: 58ch !important; display: flex; flex-direction: column; justify-content: center; }
.quote-text, .quote-name {
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), transform 0.9s cubic-bezier(0.4, 0, 0.2, 1) !important;
  min-height: 0 !important;
}
.quote-rotator.fading .quote-text, .quote-rotator.fading .quote-name { opacity: 0; transform: translateY(6px); }
.quote-dots { display: none !important; }

/* ==== Round 2 - items 14-16: style pages ==== */
.look-hero-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1100px; margin: 0 auto; }
.look-hero-pair .look-hero { max-width: none; margin: 0; }
.look-hero-pair img { aspect-ratio: 2 / 3; object-fit: cover; }
.look-caption { text-align: center; margin-top: 14px; }
@media (max-width: 599px) { .look-hero-pair { gap: 8px; } }

/* Persistent route back to the guide, same corner language as the menu
   button so it reads as part of the site furniture. */
.back-to-guide {
  position: fixed; right: 20px; bottom: 20px; z-index: 600;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; background: var(--black); color: var(--text);
  border: 1px solid var(--border-mid); text-decoration: none;
  font-family: 'Degular Text', sans-serif; font-size: 0.85rem; font-weight: 400;
  letter-spacing: 0.02em; text-transform: uppercase;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.back-to-guide:hover { border-color: var(--pink); color: var(--pink-text); }

/* ==== Round 2 - item 18: portfolio grid, 5 across like Outfit Guide,
   uncapped width with 2rem padding. Lightbox is borderless: the image
   sits directly on the dark ground, height-driven, never cropped. ==== */
/* Unlike Outfit Guide's grid, which sits directly under <main>, this
   section is nested inside the page's shared .grid-container (the whole
   booking form is one structural block), so max-width:none on its own
   does nothing - a child can never exceed its parent's content box. It
   has to break out of that parent to reach the same width Outfit Guide
   gets for free, then apply the same 2rem side padding. */
.section.pf-section {
  width: 100vw !important; max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box; padding-left: 2rem !important; padding-right: 2rem !important;
}
.pf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .pf-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .pf-grid { grid-template-columns: repeat(5, 1fr); } }
.pf-tile { display: block; padding: 0; margin: 0; border: none !important; background: var(--surface);
  cursor: zoom-in; overflow: hidden; aspect-ratio: 2 / 3; line-height: 0; }
.pf-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease); }
.pf-tile:hover img { transform: scale(1.04); }

.pf-lb { position: fixed; inset: 0; z-index: 960; background: rgba(10,10,10,0.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease); }
.pf-lb.open { opacity: 1; pointer-events: auto; }
.pf-lb-img { max-height: 90vh; max-width: 86vw; width: auto; height: auto;
  object-fit: contain; border: none !important; outline: none; display: block; background: none !important; }
.pf-lb-close, .pf-lb-nav { position: absolute; background: none; border: none; color: #fff;
  cursor: pointer; font-size: 1.8rem; line-height: 1; padding: 14px; opacity: 0.8;
  transition: opacity var(--dur-fast) var(--ease); }
.pf-lb-close:hover, .pf-lb-nav:hover { opacity: 1; }
.pf-lb-close { top: 12px; right: 12px; }
.pf-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.pf-next { right: 12px; top: 50%; transform: translateY(-50%); }
/* Break the portfolio out of the 1280px container so it spans edge to edge
   with 2rem padding, exactly like the Outfit Guide grid. */

html, body { overflow-x: clip; }


/* ==== Round 3: headers and category labels match the sidebar exactly.
   The sidebar is Degular Display 400, 0.02em, caps - so group headers
   such as "Understanding the Industry" now use that same face and
   tracking instead of wide-tracked Mono. ==== */
.section-label {
  font-family: 'Degular Display', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  font-size: 1rem !important;
  color: var(--pink-text) !important;
}

/* ==========================================================================
   STYLE BRIEF PAGES - laid out as a briefing sheet, not an article.
   Modelled on the product-detail pattern from the reference set: images on
   one side, the concept and a short spec list on the other, then paired
   blocks so related information sits side by side instead of stacking.
   Every text role maps to an existing style:
     section-label  - Degular Display 400, 0.02em, caps, pink (as sidebar)
     bf-sub         - Degular Display 400, 0.02em, caps (as card titles)
     bf-lead        - Degular Text 400, the standfirst voice
     bf-text / list - Degular Text 300, body copy
   ========================================================================== */
.bf-hero { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 30px 0; }
@media (min-width: 900px) { .bf-hero { grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; } }
.bf-images { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bf-images figure { margin: 0; line-height: 0; }
.bf-images img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
@media (min-width: 900px) { .bf-brief { position: sticky; top: 32px; } }

.bf-block { padding: 30px 0; }
.bf-pair { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 800px) { .bf-pair { grid-template-columns: 1fr 1fr; gap: 56px; } }

.section-label { display: block; margin: 0 0 18px; }

.bf-sub {
  font-family: 'Degular Display', sans-serif; font-weight: 400;
  font-size: 1.15rem; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--text); margin: 0 0 12px; line-height: 1.25;
}
.bf-lead {
  font-family: 'Degular Text', sans-serif; font-weight: 400;
  font-size: 1.15rem; line-height: 1.5; color: var(--text); margin: 0 0 16px;
}
.bf-text { font-weight: 300; font-size: 1rem; line-height: 1.75; color: var(--text-mid); margin: 0 0 16px; }

.bf-list { list-style: none; margin: 0; padding: 0; }
.bf-list li {
  font-weight: 300; font-size: 1rem; line-height: 1.65; color: var(--text-mid);
  padding: 10px 0 10px 22px; border-top: 1px solid var(--border); position: relative;
}
.bf-list li:last-child { border-bottom: 1px solid var(--border); }
.bf-list li::before { content: ''; position: absolute; left: 0; top: 1.3em; width: 10px; height: 1px; background: var(--border-mid); }
.bf-yes li::before { background: var(--pink); }
.bf-no li::before { background: var(--text-dim); }

.bf-card { border: 1px solid var(--border); padding: 24px; }

.bf-spec { margin: 24px 0 0; border-top: 1px solid var(--border); }
.bf-spec-row { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.bf-spec dt {
  font-family: 'Degular Display', sans-serif; font-weight: 400;
  font-size: 0.85rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-dim);
}
.bf-spec dd { margin: 0; font-weight: 300; font-size: 1rem; color: var(--text); }

.bf-named-list { display: grid; gap: 0; }
.bf-named { padding: 12px 0; border-top: 1px solid var(--border); }
.bf-named:last-child { border-bottom: 1px solid var(--border); }
.bf-named .bf-sub { font-size: 0.95rem; margin: 0 0 4px; }
.bf-named .bf-text { margin: 0; }

/* ==== Round 4 ==== */

/* Kickers ("Choose your slot", "Two ways to wear it", "Accessories"...)
   in Degular Mono, sized down so Mono's wider letterforms sit at the same
   visual weight the Display version had. The hub's category headers are
   exempted on that page and keep the sidebar treatment. */
.section-label {
  font-family: 'Degular Mono', monospace !important;
  font-weight: 400 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--pink-text) !important;
}

/* Buttons: every word capitalised, tighter tracking. */
.btn, .btn-outline, .admin-btn, button.btn {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Floating route back to the guide - smaller so it overlaps less. */
.back-to-guide {
  right: 16px !important; bottom: 16px !important;
  padding: 7px 11px !important; gap: 6px !important;
  font-size: 0.72rem !important;
}

/* Two ways to wear it: no boxes, lines only, matching the rest. */
.bf-card { border: none !important; padding: 0 !important; }

/* Images run the full height of the brief column, down to the last spec
   line. The brief column sets the height; images fill it and crop to fit. */
@media (min-width: 900px) {
  .bf-hero { align-items: stretch !important; }
  .bf-brief { position: static !important; }
  .bf-images { height: 100%; }
  .bf-images figure { height: 100%; }
  .bf-images img { height: 100%; aspect-ratio: auto !important; object-fit: cover; }
}

/* Testimonials enter from the left and leave to the right. */
.quote-text, .quote-name {
  transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1), transform 0.8s cubic-bezier(0.4,0,0.2,1) !important;
}
.quote-rotator.leaving .quote-text, .quote-rotator.leaving .quote-name { opacity: 0; transform: translateX(40px); }
.quote-rotator.entering .quote-text, .quote-rotator.entering .quote-name { opacity: 0; transform: translateX(-40px); transition: none !important; }
.quote-rotator.fading .quote-text, .quote-rotator.fading .quote-name { transform: translateX(40px); }

/* Homepage hero fills the visible screen, everything from logo to buttons
   centred on both axes. svh = the height actually visible on phones (plain
   vh would hide the buttons behind the browser bar). It is a minimum, so
   on short screens the hero grows instead of clipping the buttons. */
.home-hero {
  min-height: 100svh; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-top: 40px !important; padding-bottom: 40px !important; box-sizing: border-box;
}
@supports (min-height: 100svh) { .home-hero { min-height: 100svh; } }
.home-hero .full-page-header-inner { width: 100%; }

/* Outfit breakdown: three across for the clothes, paired for the rest, so
   the grid itself varies down the page rather than repeating one shape. */
.bf-trio { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 900px) { .bf-trio { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.bf-col .bf-sub { margin-bottom: 12px; }

/* Take it further - numbered, set apart, the only list with pink numerals. */
.bf-further .bf-lead { max-width: 52ch; margin-bottom: 20px; }
.bf-further-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.bf-further-list li {
  display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: baseline;
  padding: 16px 0; border-top: 1px solid var(--border);
  font-weight: 300; font-size: 1.05rem; line-height: 1.6; color: var(--text);
}
.bf-further-list li:last-child { border-bottom: 1px solid var(--border); }
.bf-num { font-family: 'Degular Mono', monospace; font-weight: 300; font-size: 1.4rem; color: var(--pink-text); line-height: 1; }

/* ==== Round 5 ==== */
/* No slots open - the live site's notify panel, restored. */
.no-slots { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 40px 0; text-align: center; }
.no-slots-title { font-family: 'Degular Display', sans-serif; font-weight: 400; letter-spacing: 0.02em;
  text-transform: uppercase; font-size: 1.4rem; margin: 0 0 12px; color: var(--text); }
.no-slots-body { font-weight: 300; line-height: 1.7; color: var(--text-mid); max-width: 52ch; margin: 0 auto 24px; }
.no-slots-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.no-slots-form .field-input { flex: 1; }
.no-slots-done { color: var(--pink-text); margin: 16px 0 0; }
.no-slots-mode .grid-12:has(.slot-tile),
.no-slots-mode .form-section ~ .form-section,
.no-slots-mode .submit-area, .no-slots-mode .consent-block { display: none !important; }
.safety-note { border-top: 1px solid var(--border); padding-top: 24px; margin-top: 30px; }
.safety-text { font-weight: 300; font-size: 0.95rem; line-height: 1.7; color: var(--text-mid); max-width: none; margin: 0; }
.safety-text a { color: var(--pink-text); }

/* ==========================================================================
   HOME HERO - three rows: corner marks top, content centred, what-you-get
   strip bottom. Built as a flex column (not absolute positioning) so the
   rows can never collide, whatever the screen height. Imagery sits behind
   in its own layer, in one of two workshop directions.
   ========================================================================== */
.home-hero {
  position: relative; overflow: hidden; isolation: isolate;
  justify-content: space-between !important;
  padding: 28px 0 0 !important;
}
.home-hero .hero-corner { position: relative; z-index: 3; margin: 0 auto !important; }
.home-hero .hero-inner { position: relative; z-index: 3; margin: auto; padding: 40px 1.5rem; }

/* Path - the order someone would naturally prepare in */
.hero-path { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 12px; margin-top: 26px; }
.hero-path-label { font-family: 'Degular Mono', monospace; font-weight: 400; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-right: 4px; }
.hero-path a { font-family: 'Degular Display', sans-serif; font-weight: 400; font-size: 0.9rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.hero-path a:hover { color: var(--pink-text); border-color: var(--pink); }
.hero-path-arrow { color: var(--text-dim); font-size: 0.85rem; }

/* What you get - said from the jump */
.hero-gets { position: relative; z-index: 3; list-style: none; margin: 0 auto; padding: 0 1.5rem;
  width: 100%; max-width: var(--grid-max); box-sizing: border-box;
  display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); }
.hero-gets li { padding: 20px 20px 26px 0; }
.hero-gets li + li { padding-left: 20px; border-left: 1px solid var(--border); }
.hg-k { display: block; font-family: 'Degular Display', sans-serif; font-weight: 400; font-size: 0.95rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); margin-bottom: 6px; }
.hg-v { display: block; font-weight: 300; font-size: 0.85rem; line-height: 1.5; color: var(--text-mid); }
@media (max-width: 899px) { .hero-gets { grid-template-columns: 1fr 1fr; } .hero-gets li:nth-child(3) { border-left: none; padding-left: 0; } }

/* Load-in: each piece rises into place in sequence */
.hero-in { opacity: 0; transform: translateY(14px);
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
  transition-delay: calc(var(--d, 0) * 110ms + 150ms); }
.hero-ready .hero-in { opacity: 1; transform: none; }

/* Only the active direction's layer is shown */
.hero-bg, .hero-floats { display: none; }

/* ---- Direction A: full-bleed background ---- */
.hero-a .hero-bg { display: block; position: absolute; inset: 0; z-index: 1; }
.hero-a .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%;
  transform: scale(1.08); transition: transform 14s cubic-bezier(0.22,1,0.36,1); }
.hero-a.hero-ready .hero-bg img { transform: scale(1); }
.hero-a .hero-bg::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.35) 40%, rgba(10,10,10,0.72) 100%); }
.hero-a .t-display, .hero-a .t-body-mid, .hero-a .hg-k, .hero-a .hero-path a { color: #fff !important; }
.hero-a .hg-v, .hero-a .eh-corner p, .hero-a .hero-path-label, .hero-a .hero-path-arrow { color: rgba(255,255,255,0.72) !important; }
.hero-a .hero-gets, .hero-a .hero-gets li + li { border-color: rgba(255,255,255,0.22); }
.hero-a .btn-outline { color: #fff; border-color: rgba(255,255,255,0.6); background: transparent; }
.hero-a .full-page-header-inner .t-eyebrow { color: #fff !important; }
.hero-a { border-bottom: none !important; }

/* ---- Direction B: floating images around the centred text ---- */
.hero-b .hero-floats { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hf { position: absolute; margin: 0; line-height: 0; opacity: 0; transform: translateY(30px) scale(0.96);
  transition: opacity 1.1s cubic-bezier(0.22,1,0.36,1), transform 1.1s cubic-bezier(0.22,1,0.36,1); }
.hf img { width: 100%; height: auto; display: block; }
.hero-ready .hf { opacity: 1; transform: none; }
.hf-1 { width: 19vw; left: 2.5vw; top: 16%; transition-delay: 0.3s; }
.hf-2 { width: 10.5vw; right: 4vw; top: 12%; transition-delay: 0.55s; }
.hf-3 { width: 12.5vw; right: 8vw; bottom: 22%; transition-delay: 0.75s; }
.hf-4 { width: 8.5vw; left: 9vw; bottom: 24%; transition-delay: 0.95s; }
.hf-2 img, .hf-3 img, .hf-4 img { aspect-ratio: 2 / 3; object-fit: cover; }
/* After arriving, each drifts very slowly on its own timing */
@keyframes hfDrift { from { translate: 0 0; } to { translate: 0 -12px; } }
.hero-ready .hf-1 { animation: hfDrift 9s ease-in-out 1.5s infinite alternate; }
.hero-ready .hf-2 { animation: hfDrift 11s ease-in-out 1.8s infinite alternate; }
.hero-ready .hf-3 { animation: hfDrift 10s ease-in-out 2.1s infinite alternate; }
.hero-ready .hf-4 { animation: hfDrift 12s ease-in-out 2.4s infinite alternate; }
@media (max-width: 1099px) { .hf-1, .hf-4 { display: none; } .hf-2 { width: 14vw; } .hf-3 { width: 15vw; } }
@media (max-width: 899px) { .hero-floats { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .hero-in, .hf { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .hero-a .hero-bg img { transform: none !important; transition: none !important; }
}
/* No-slots panel sits under the section line already - no borders of its
   own, so it never stacks into a double line. */
.no-slots { border: none !important; padding: 24px 0 8px !important; }

/* ==== Round 6: hero direction A, finalised ==== */
.hero-a .hero-bg img { object-position: 30% 40%; transform-origin: 40% 30%; }
/* Darker, and weighted to the bottom so the strip sits on solid ground */
.hero-a .hero-bg::after {
  background: linear-gradient(180deg, rgba(10,10,10,0.66) 0%, rgba(10,10,10,0.50) 42%, rgba(10,10,10,0.84) 100%) !important;
}
/* Pink kicker reads better than white against the photograph */
.hero-a .full-page-header-inner .t-eyebrow { color: var(--pink-text) !important; }

/* What you get: full boxes, more space beneath */
.hero-gets { border-top: none !important; gap: 12px; padding-bottom: 56px !important; margin-top: 8px; }
.hero-gets li, .hero-gets li + li {
  padding: 22px 22px 24px !important;
  border: 1px solid var(--border) !important;
}
.hero-a .hero-gets li, .hero-a .hero-gets li + li {
  border-color: rgba(250,250,248,0.24) !important;
  background: rgba(10,10,10,0.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero-a .btn-outline:hover { border-color: var(--pink); color: #fff; background: rgba(232,0,90,0.18); }
.hero-a .hero-path a:hover { color: var(--pink-text) !important; border-color: var(--pink); }
/* Safety net: if JavaScript fails, the hero content must still show. */
html:not(.js) .hero-in { opacity: 1 !important; transform: none !important; }

/* Kicker over the photo: off-white, the pink was lost against skin tones */
.hero-a .full-page-header-inner .t-eyebrow { color: rgba(250,250,248,0.82) !important; }

/* Corner marks never slide under the fixed menu button */
@media (max-width: 1399px) { .home-hero .hero-corner { padding-right: calc(1.5rem + 60px) !important; } }

/* Photo fades up from black rather than popping in */
.hero-a .hero-bg { background: #0a0a0a; }
.hero-a .hero-bg img { opacity: 0; transition: opacity 1.4s cubic-bezier(0.22,1,0.36,1), transform 14s cubic-bezier(0.22,1,0.36,1) !important; }
.hero-a .hero-bg img.is-loaded { opacity: 1; }
html:not(.js) .hero-a .hero-bg img { opacity: 1; }
.hero-a .hero-inner, .hero-a .hero-gets { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .hero-a .hero-bg img { opacity: 1 !important; } }

/* ==== Dark mode: lift the pink for small text ====
   The brand pink reaches only 4.08:1 against the dark ground, under the
   4.5 minimum for small text. Same hue, lifted, at 5.26:1. Applied to
   small pink text only; buttons and large display pink are unaffected. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pink-text: #FF2E74;
  }
  :root:not([data-theme="light"]) .section-label,
  :root:not([data-theme="light"]) .t-eyebrow,
  :root:not([data-theme="light"]) .cta-sub a,
  :root:not([data-theme="light"]) .safety-text a,
  :root:not([data-theme="light"]) .bf-num,
  :root:not([data-theme="light"]) .guide-pager-label,
  :root:not([data-theme="light"]) .quote-name { color: var(--pink-text) !important; }
}
:root[data-theme="dark"] {
  --pink-text: #FF2E74;
}
:root[data-theme="dark"] .section-label,
:root[data-theme="dark"] .t-eyebrow,
:root[data-theme="dark"] .cta-sub a,
:root[data-theme="dark"] .safety-text a,
:root[data-theme="dark"] .bf-num,
:root[data-theme="dark"] .guide-pager-label,
:root[data-theme="dark"] .quote-name { color: var(--pink-text) !important; }

/* ==========================================================================
   TOUCH TARGETS
   On touch devices every real control gets at least 44x44px, the
   accessibility minimum, without changing how anything looks on desktop.
   Scoped to pointer:coarse so mouse users keep the tighter styling.
   Inline text links are deliberately excluded: the guidance does not
   expect words inside a sentence to be 44px tall.
   ========================================================================== */
@media (pointer: coarse) {
  .nav-drawer-close, .lb-close, .lb-nav-btn, .pf-lb-close, .pf-lb-nav {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .nav-social-link, .brand-logo-link { display: inline-flex; align-items: center; min-height: 44px; }
  .btn, .btn-outline, .admin-btn, .suggestion-chip, .guide-pager-link, .back-to-guide {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .guide-pager-link { flex-direction: column; align-items: flex-start; justify-content: center; }
  .guide-pager-next { align-items: flex-end; }
  /* The tick box itself stays small, but the whole label is the target */
  .look-check { min-height: 48px; }
  .slot-tile { min-height: 64px; }
  /* Quote dots are tiny by design: pad the hit area without changing the dot */
  .quote-dots button { position: relative; }
  .quote-dots button::after { content: ''; position: absolute; inset: -18px; }
}
/* Corner marks clear the fixed menu button on every page, not just the
   homepage, at any width where the two would otherwise collide. */
@media (max-width: 1399px) { .eh-corner { padding-right: calc(1.5rem + 60px) !important; } }

/* ==========================================================================
   SCROLL REVEALS
   Content arrives as you reach it rather than being present on load.
   Deliberately small and one-directional. Never applied to the booking
   form or anything above the fold, and the class is only added by script,
   so if JavaScript fails everything is simply visible.
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   PRINT
   People genuinely print or save the terms and the guides. Without this
   they print with the nav drawer, footer and buttons attached.
   ========================================================================== */
@media print {
  @page { margin: 18mm; }
  body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  body::before { display: none !important; }
  .nav-drawer, .drawer-scrim, #menuBtn, .menu-btn, .site-footer, .back-to-guide,
  .guide-pager, .btn, .btn-outline, .cta-sub, .skip-link, .eh-corner,
  .hero-bg, .hero-gets, .intro-actions, .hero-path, .quote-dots,
  .pf-lb, .lb-scrim, #adminToasts { display: none !important; }
  a { color: #000 !important; text-decoration: none !important; }
  /* Show link targets so a printed page stays useful */
  .guide-section a[href^="http"]::after, .privacy-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .full-page-header { padding: 0 0 12pt !important; border-bottom: 1px solid #000 !important; }
  .t-display, .t-h1 { font-size: 22pt !important; color: #000 !important; }
  .t-h2, .bf-sub { font-size: 13pt !important; }
  .section-label { color: #000 !important; font-size: 9pt !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  img { max-width: 100% !important; page-break-inside: avoid; }
  .guide-section, .bf-block, .faq-item, .about-section { page-break-inside: avoid; }
  h1, h2, .bf-sub { page-break-after: avoid; }
  .rule { margin: 12pt 0 !important; }
}

/* ==========================================================================
   SLOT CARDS
   This is the moment the whole site exists for, so it gets a proper
   hierarchy: date leads, time supports, location sits quiet underneath.
   Styled purely through structure, no markup or value changes, so the
   live version rendered from the backend picks this up unchanged.
   ========================================================================== */
.slot-tile { padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + 4px); }
.slot-tile .idx { margin-bottom: 10px; }
/* date */
.slot-tile p:nth-of-type(1) {
  font-family: 'Degular Display', sans-serif !important; font-weight: 400 !important;
  font-size: 1.35rem !important; letter-spacing: 0.02em !important; text-transform: uppercase;
  color: var(--text) !important; margin: 0 0 2px !important; line-height: 1.15;
}
/* time */
.slot-tile p:nth-of-type(2) {
  font-weight: 300 !important; font-size: 1rem !important; color: var(--text-mid) !important;
  margin: 0 0 8px !important;
}
/* location */
.slot-tile p:nth-of-type(3) {
  font-family: 'Degular Mono', monospace !important; font-weight: 400 !important;
  font-size: 0.72rem !important; letter-spacing: 0.06em !important; text-transform: uppercase;
  color: var(--text-dim) !important; margin: 0 !important;
}
/* Selected state reads clearly, not just a border tint */
.slot-tile:has(input:checked) {
  border-color: var(--pink) !important; background: var(--pink-dim);
  box-shadow: inset 0 0 0 1px var(--pink);
}
.slot-tile:has(input:checked) p:nth-of-type(1) { color: var(--pink-text) !important; }
.slot-tile:has(input:checked)::after {
  content: 'Selected'; position: absolute; left: var(--sp-3); bottom: -9px;
  background: var(--pink); color: #fff; font-family: 'Degular Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px;
}
/* Booked slots read as unavailable rather than merely faded */
.slot-tile-booked { opacity: 0.55; cursor: not-allowed; }
.slot-tile-booked:hover { transform: none; box-shadow: none; border-color: var(--border); }
/* A booked slot only needs to say it is booked. Showing the location type
   as well stacked two badges in the corner and read as clutter. */
.slot-tile-booked .slot-type-badge-corner { display: none !important; }

/* ==========================================================================
   SUCCESS VIEW
   The emotional peak of the whole site, and previously the plainest screen
   on it. Given room, a clear headline and three concrete next steps.
   ========================================================================== */
.success-view { text-align: center; padding: var(--sp-8) 0 var(--sp-6); }
.success-view .t-eyebrow { margin-bottom: 18px; }
.success-title { font-size: clamp(2.2rem, 5vw, 3.6rem) !important; line-height: 1 !important; margin: 0 auto; }
.success-lead { max-width: 52ch; margin: 22px auto 0; }
.success-steps { list-style: none; max-width: 640px; margin: 40px auto 0; padding: 0; text-align: left; }
.success-steps li {
  display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: baseline;
  padding: 18px 0; border-top: 1px solid var(--border);
  font-weight: 300; font-size: 1rem; line-height: 1.6; color: var(--text-mid);
}
.success-steps li:last-child { border-bottom: 1px solid var(--border); }
.success-steps strong { font-weight: 400; color: var(--text); }
.success-steps a { color: var(--pink-text); }
.success-safety { max-width: 52ch; margin: 24px auto 0; font-size: 0.9rem; color: var(--text-dim); }
#resetBtn { margin-top: 28px; }

/* ==========================================================================
   THE BOOKING FLOW
   The same hierarchy the slot cards got, applied end to end: numbered
   steps so progress is visible, Display subheads, Mono for quiet meta,
   lines instead of boxes, and a clear focus state. Styling only, no
   markup, names or values changed.
   ========================================================================== */

/* Numbered steps. The form sections are the spine of the page, so they
   carry a numeral the same way the guide and brief pages do. */
#bookingForm { counter-reset: step; }
#bookingForm .form-section { counter-increment: step; padding: var(--sp-6) 0 var(--sp-5); }
#bookingForm .section-head { align-items: baseline; gap: 14px; margin-bottom: var(--sp-3); }
#bookingForm .section-head::before {
  content: counter(step, decimal-leading-zero);
  font-family: 'Degular Mono', monospace; font-weight: 300; font-size: 1.3rem;
  color: var(--pink-text); line-height: 1; flex: 0 0 auto;
}
#bookingForm .section-label { font-size: 0.8rem !important; letter-spacing: 0.08em !important; }

/* Field labels read as subheads, matching the brief pages */
.field-label {
  font-family: 'Degular Display', sans-serif !important; font-weight: 400 !important;
  font-size: 1.05rem !important; letter-spacing: 0.02em !important; text-transform: uppercase;
  color: var(--text) !important; margin-bottom: 6px !important;
}
.field-sub { font-size: 0.92rem; font-weight: 300; line-height: 1.6; color: var(--text-mid); margin: 0 0 var(--sp-2); }
.required-mark { color: var(--pink-text); margin-left: 4px; }

/* Inputs: taller, calmer, with a focus state that is obvious */
.field-input, .field-textarea, select.field-input {
  font-size: 1rem; padding: 12px 0; transition: border-color var(--dur-fast) var(--ease);
}
.field-input:focus, .field-textarea:focus, select.field-input:focus {
  border-bottom-color: var(--pink); outline: none;
}
.field { margin-bottom: var(--sp-4); }

/* The styling note becomes a quiet aside rather than a boxed callout */
#bookingForm .field > p.t-small[style*="border-left"] {
  background: none !important; border: none !important;
  border-left: 2px solid var(--pink) !important;
  padding: 2px 0 2px 16px !important;
  font-weight: 300; font-size: 0.92rem; line-height: 1.7; color: var(--text-mid);
}

/* Consent rows sit on lines, like every other list on the site */
.check-row { padding: 14px 0; border-top: 1px solid var(--border); margin-bottom: 0 !important; align-items: flex-start; }
.check-row:last-of-type { border-bottom: 1px solid var(--border); }
.check-text { font-size: 0.95rem; font-weight: 300; line-height: 1.65; }

/* Review summary: a spec sheet, matching the brief pages */
.booking-summary { border: none !important; padding: 0 !important; margin: var(--sp-3) 0 !important; }
.booking-summary-row {
  display: grid !important; grid-template-columns: 150px 1fr; gap: 16px;
  padding: 12px 0 !important; border-top: 1px solid var(--border); font-size: 1rem !important;
}
.booking-summary-row:last-child { border-bottom: 1px solid var(--border); }
.booking-summary-row span:first-child {
  font-family: 'Degular Display', sans-serif; font-weight: 400;
  font-size: 0.85rem; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--text-dim) !important;
}
.booking-summary-row span:last-child { font-weight: 300; color: var(--text); }

/* Errors read as errors without shouting */
.field-err { color: var(--pink-text); font-size: 0.85rem; margin-top: 6px; }

/* ==========================================================================
   ROUND 7
   ========================================================================== */

/* Dark mode: small pink text was still hard to read against the dark
   ground, so kickers and labels go white there instead. Pink is kept for
   larger elements and buttons where it reads fine. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .section-label,
  :root:not([data-theme="light"]) .t-eyebrow,
  :root:not([data-theme="light"]) .chip-label,
  :root:not([data-theme="light"]) .quote-name,
  :root:not([data-theme="light"]) .guide-pager-label,
  :root:not([data-theme="light"]) #bookingForm .section-head::before {
    color: var(--text) !important;
  }
}
:root[data-theme="dark"] .section-label,
:root[data-theme="dark"] .t-eyebrow,
:root[data-theme="dark"] .chip-label,
:root[data-theme="dark"] .quote-name,
:root[data-theme="dark"] .guide-pager-label,
:root[data-theme="dark"] #bookingForm .section-head::before { color: var(--text) !important; }

/* Dark mode uses the white mark so it never sits pink on near-black */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .full-page-header .brand-logo { content: url('logo-white-center.png'); }
}
:root[data-theme="dark"] .full-page-header .brand-logo { content: url('logo-white-center.png'); }

/* Homepage: logo and kicker sit at the top like every other page, rather
   than centred in the middle of the photograph, so they stay clear of the
   image and match the rest of the site. */
.home-hero .hero-inner { margin: 0 auto auto !important; padding-top: 0 !important; }
.home-hero .hero-topmark { position: relative; z-index: 3; text-align: center; padding-top: 8px; }
.home-hero .hero-topmark .brand-logo { display: block; margin: 0 auto 14px; width: 200px; max-width: 60vw; }
.home-hero .hero-inner .brand-logo-link { display: none; }
.home-hero .hero-inner .t-eyebrow { display: none; }

/* Smoother rescaling: the background eases into its new crop instead of
   jumping when the window is resized. */
.hero-a .hero-bg img {
  transition: opacity 1.4s cubic-bezier(0.22,1,0.36,1),
              transform 16s cubic-bezier(0.22,1,0.36,1),
              object-position 0.45s cubic-bezier(0.22,1,0.36,1) !important;
}

/* Form sections: the first one had generous space above its line and the
   rest did not. All four now match it. */
#bookingForm .form-section { padding-top: var(--sp-7) !important; }
#bookingForm .form-section:first-of-type { padding-top: var(--sp-5) !important; }

/* Slower, more deliberate arrival: each element waits a little longer and
   takes a little longer, so the page feels considered rather than snapped
   into place. */
.hero-in {
  transition: opacity 1.1s cubic-bezier(0.22,1,0.36,1), transform 1.1s cubic-bezier(0.22,1,0.36,1);
  transition-delay: calc(var(--d, 0) * 170ms + 450ms);
}
/* Starts further in and eases out more slowly */
.hero-a .hero-bg img { transform: scale(1.12); }
.hero-a.hero-ready .hero-bg img { transform: scale(1); }

/* Outfit guide footer note: centred, narrower, and no rule above it since
   there is nothing above it to divide from. */
.fit-note { text-align: center; max-width: 60ch; margin: 0 auto; }
.fit-note-title { margin-bottom: 10px; }
.fit-note-body { margin: 0 auto; }

/* Locations: the recommendation label is a quiet kicker, not a heading */
.chip-label { font-size: 0.72rem !important; color: var(--pink-text) !important; letter-spacing: 0.08em !important; }

/* The route back to the guide sticks to the viewport, so it is reachable
   at any point on the page rather than only at the very bottom. */
.back-to-guide { position: fixed !important; z-index: 700; }

/* Terms shown in full before confirming, rather than only referred to.
   Scrollable so it does not bury the confirm button, and focusable so it
   can be read and scrolled by keyboard. */
.terms-block { margin: var(--sp-4) 0 var(--sp-3); }
.terms-scroll {
  max-height: 260px; overflow-y: auto; border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); padding: 18px 0; margin-bottom: 12px;
}
.terms-scroll:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.terms-h {
  font-family: 'Degular Display', sans-serif; font-weight: 400; font-size: 0.95rem;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); margin: 0 0 6px;
}
.terms-h + .terms-p { margin-top: 0; }
.terms-p { font-weight: 300; font-size: 0.92rem; line-height: 1.65; color: var(--text-mid); margin: 0 0 18px; }
.terms-p:last-child { margin-bottom: 0; }
.terms-p a, .terms-links a { color: var(--pink-text); }
.terms-links { font-size: 0.85rem; color: var(--text-dim); margin: 0; }

/* One consistent section rhythm. Competing rules had left .section with
   30px above and 96px below; both now match. */
.section { padding: var(--sp-7) 0 !important; }
@media (min-width: 900px) { .section { padding: var(--sp-9) 0 !important; } }
/* All four booking steps get identical space above their line */
#bookingForm .form-section, #bookingForm .form-section:first-of-type { padding-top: var(--sp-7) !important; }
/* The kicker moved into the top mark, so the light-on-photo rule needs to
   follow it there. */
.hero-a .hero-topmark .t-eyebrow { color: rgba(250,250,248,0.82) !important; }
.home-hero .hero-topmark .t-eyebrow { display: block !important; }

/* Focal point: no easing until after the first placement, so the image
   never slides in from its default crop on load. */
.hero-a .hero-bg img {
  transition: opacity 1.4s cubic-bezier(0.22,1,0.36,1),
              transform 16s cubic-bezier(0.22,1,0.36,1) !important;
}
.hero-a .hero-bg img.focal-eased {
  transition: opacity 1.4s cubic-bezier(0.22,1,0.36,1),
              transform 16s cubic-bezier(0.22,1,0.36,1),
              object-position 0.45s cubic-bezier(0.22,1,0.36,1) !important;
}

/* Header mark sits exactly where it does on every other page */
.home-hero { padding-top: 0 !important; }
.home-hero .hero-topmark { padding-top: 60px; }
@media (min-width: 900px) { .home-hero .hero-topmark { padding-top: 80px; } }
.home-hero .hero-topmark .brand-logo { margin-bottom: 18px; }
.home-hero .hero-topmark .t-eyebrow { margin: 0 !important; }

/* The headline block through to the path is centred on the screen in its
   own right, rather than hanging off the header. */
@media (min-width: 900px) and (min-height: 700px) {
  .home-hero { position: relative; }
  .home-hero .hero-inner {
    position: absolute; top: 50%; left: 0; right: 0;
    transform: translateY(-50%);
    margin: 0 auto !important;   /* auto keeps it horizontally centred */
  }
}

/* The corner marks are a flex child too, so space-between was spreading
   them, the logo and the strip evenly down the screen. On taller screens
   the strip is pinned to the bottom instead and the rest stacks from the
   top, so the logo lands at the same height as every other page. */
@media (min-width: 900px) and (min-height: 700px) {
  .home-hero { justify-content: flex-start !important; padding-bottom: 0 !important; }
  .home-hero .hero-gets { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; }
}
/* Match the header stack to every other page exactly: same top padding on
   the header, and the mark following the corner marks with no extra
   padding of its own. */
.home-hero { padding-top: 40px !important; }

.home-hero .hero-topmark { padding-top: 0 !important; }
/* The hero corner had its bottom margin zeroed earlier, which pulled the
   mark up. Restored to the same 32px every other page uses. */
.home-hero .hero-corner { margin: 0 auto 19px !important; }
/* Corner marks and page content share one container geometry, so the mark
   sits directly above the text column on every page. */
.eh-corner {
  width: 100%; max-width: var(--grid-max); margin-left: auto; margin-right: auto;
  padding-left: 1.5rem; box-sizing: border-box;
}
/* The header centres its children, which made the corner mark shrink to
   its own content width. Stretching it makes it span the page so the mark
   sits at the true left edge, above the text column. */
.full-page-header .eh-corner { align-self: stretch; }

/* ==========================================================================
   MANAGE YOUR BOOKING
   Reached from confirmation emails. The logic is ported from the live
   site; this brings its controls into the site's own language.
   ========================================================================== */
.manage-view { text-align: center; padding: var(--sp-8) 0 var(--sp-6); }
.manage-view .success-title { font-size: clamp(2rem, 4vw, 3rem) !important; margin-bottom: 14px; }
.manage-view .admin-btn {
  font-family: 'Degular Text', sans-serif; font-size: 0.9rem; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  padding: 12px 20px; border: 1px solid var(--border-mid); background: none;
  color: var(--text); cursor: pointer; border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.manage-view .admin-btn:hover { border-color: var(--pink); color: var(--pink-text); }
.manage-view .admin-btn-primary { background: var(--pink); border-color: var(--pink); color: #fff; }
.manage-view .admin-btn-primary:hover { background: #C70049; color: #fff; }
.manage-view .admin-btn-danger { border-color: #8E0036; color: #8E0036; }
.manage-view .admin-btn-danger:hover { background: #8E0036; color: #fff; }
.manage-view .admin-btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* Action row centred, and stacked on phones so nothing is cramped */
.manage-view > div[style*="display:flex"], .manage-view div[style*="gap:0.75rem"] { justify-content: center; flex-wrap: wrap; }
#cancelBookingDetail, #cancelDetails { border: 1px solid var(--border) !important; padding: var(--sp-3) !important; max-width: 640px; margin: 0 auto var(--sp-3) !important; }
.manage-view textarea, .manage-view input[type="text"] { width: 100%; }
#outfitEditWrap, #rescheduleWrap, #selfCancelReasonWrap { max-width: 640px; margin-left: auto; margin-right: auto; text-align: left; }

/* Manage view classes, replacing the inline styling the ported block
   arrived with, so it uses the same system as every other page. */
.manage-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: var(--sp-3); }
.manage-panel { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.manage-panel[hidden] { display: none; }
.manage-note { font-size: 0.92rem; font-weight: 300; line-height: 1.65; color: var(--text-mid); margin: 0 0 var(--sp-2); }
.manage-group { margin: 0 0 var(--sp-2); }
.manage-note-box { margin-top: var(--sp-2); padding: 14px 16px; border: 1px solid var(--border); font-size: 0.92rem; font-weight: 300; color: var(--text-mid); }
.manage-link-btn { text-decoration: none; display: inline-flex; align-items: center; }
.manage-warning { margin-bottom: var(--sp-2); padding: 14px 16px; background: var(--pink-dim); border-left: 2px solid var(--pink-deep); }
.manage-warning[hidden] { display: none; }
.manage-warning-title { margin: 0; font-family: 'Degular Display', sans-serif; font-weight: 400; font-size: 0.95rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--pink-deep); }
.manage-warning-body { margin: 6px 0 0; font-size: 0.92rem; font-weight: 300; line-height: 1.6; color: var(--text); }
.btn-danger { background: var(--pink-deep) !important; border-color: var(--pink-deep) !important; color: #fff !important; }
.btn-danger:hover { background: #6E0029 !important; }
:root { --pink-deep: #8E0036; }
/* The ported block's buttons were falling back to the browser default
   font, and its title used the body face rather than Display. */
.manage-view .btn, .manage-view .btn-outline, .manage-view button {
  font-family: 'Degular Text', sans-serif !important;
}
.manage-view .success-title, .success-view .success-title {
  font-family: 'Degular Display', sans-serif !important;
  letter-spacing: 0.02em; text-transform: uppercase;
}

/* Reschedule slot list uses the same cards as the booking page, rather
   than bare radios. The location badge is positioned against its own
   card; without this it escaped to the corner of the page. */
#rescheduleSlotList { display: grid; grid-template-columns: 1fr; gap: 10px; margin: var(--sp-2) 0 var(--sp-3); }
@media (min-width: 700px) { #rescheduleSlotList { grid-template-columns: 1fr 1fr; } }
#rescheduleSlotList label {
  position: relative; display: block; border: 1px solid var(--border);
  padding: var(--sp-3); cursor: pointer; text-align: left;
  transition: border-color var(--dur-fast) var(--ease);
}
#rescheduleSlotList label:hover { border-color: var(--border-mid); }
#rescheduleSlotList label:has(input:checked) {
  border-color: var(--pink); background: var(--pink-dim); box-shadow: inset 0 0 0 1px var(--pink);
}
#rescheduleSlotList input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
#rescheduleSlotList .slot-type-badge-corner { position: absolute; top: var(--sp-1); right: var(--sp-1); }
#rescheduleSlotList .slot-day, #rescheduleSlotList .slot-date {
  display: block; font-family: 'Degular Display', sans-serif; font-weight: 400;
  font-size: 1.15rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text);
}
#rescheduleSlotList .slot-time { display: block; font-weight: 300; color: var(--text-mid); margin: 4px 0 6px; }
#rescheduleSlotList .slot-location {
  display: block; font-family: 'Degular Mono', monospace; font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim);
}

/* Invite and channel links */
.channel-banner {
  border-left: 2px solid var(--pink); padding: 12px 16px; margin-bottom: var(--sp-3);
  font-weight: 300; font-size: 0.95rem; line-height: 1.6; color: var(--text-mid);
}
.channel-banner[hidden] { display: none; }
.invite-loading { font-weight: 300; color: var(--text-mid); }
.invite-loading[hidden] { display: none; }
.invite-note {
  align-self: center; margin: 0; font-weight: 300; font-size: 0.95rem;
  line-height: 1.6; color: var(--text-mid);
}
/* Privacy notice inside the pre-confirmation terms panel */
.terms-section {
  font-family: 'Degular Display', sans-serif; font-weight: 400; font-size: 1.1rem;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--text);
  margin: 26px 0 14px; padding-top: 18px; border-top: 1px solid var(--border);
}
.terms-scroll > .terms-section:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.terms-list { margin: 0 0 18px; padding-left: 18px; }
.terms-list li { font-weight: 300; font-size: 0.92rem; line-height: 1.65; color: var(--text-mid); margin-bottom: 8px; }
.terms-list strong { font-weight: 400; color: var(--text); }
.terms-list a { color: var(--pink-text); }

/* Privacy notice at the foot of the booking page, matching the site's
   type roles rather than the ported inline styling. */
.privacy-wrap { max-width: 74ch; margin: 0 auto; }
.privacy-label {
  font-family: 'Degular Mono', monospace !important; font-weight: 400 !important;
  font-size: 0.8rem !important; letter-spacing: 0.08em !important;
  text-transform: uppercase !important; color: var(--pink-text) !important;
  display: block; margin: 0 0 var(--sp-3) !important;
}
.privacy-body {
  font-weight: 300; font-size: 0.95rem; line-height: 1.75;
  color: var(--text-mid); margin: 0 0 20px;
}
.privacy-body strong {
  display: block; font-family: 'Degular Display', sans-serif; font-weight: 400;
  font-size: 1rem; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--text); margin-bottom: 6px;
}
.privacy-body a { color: var(--pink-text); }
/* Counter for the pose viewer */
.pf-lb-counter {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  font-family: 'Degular Mono', monospace; font-size: 0.72rem; letter-spacing: 0.08em;
  color: rgba(250,250,248,0.7); margin: 0;
}
/* Style suggestions for the chosen location */
.style-hint { border-left: 2px solid var(--pink); padding: 14px 0 14px 16px; margin-bottom: var(--sp-3); }
.style-hint[hidden] { display: none; }
.style-hint .section-label { margin-bottom: 10px !important; text-transform: none !important; }
.style-hint-links { display: flex; flex-wrap: wrap; gap: 8px; }
.style-hint-link {
  font-family: 'Degular Text', sans-serif; font-size: 0.8rem; font-weight: 400;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--text);
  text-decoration: none; border: 1px solid var(--border-mid); padding: 6px 12px;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.style-hint-link:hover { border-color: var(--pink); color: var(--pink-text); }

/* ==========================================================================
   NOTES PAGE IMAGE
   The guide's own image sits in a fixed box to the right, with the body
   text wrapping around it, while everything stays left aligned to the
   page. Below tablet it becomes a normal full width image above the text.
   ========================================================================== */
.guide-figure { margin: 0 0 var(--sp-3); line-height: 0; }
.guide-figure img { width: 100%; height: auto; display: block; }

@media (min-width: 900px) {
  .guide-figure {
    float: right;
    width: 230px;
    margin: 6px 0 var(--sp-3) var(--sp-4);
    shape-margin: var(--sp-3);
  }
  .guide-figure img { aspect-ratio: 2 / 3; object-fit: cover; }
  /* The figure lives inside the text column, so the paragraphs beside it
     wrap naturally. The column itself must not create its own formatting
     context, or it would clear the float instead of flowing around it. */
  .guide-section > div { overflow: visible; }
}
@media (min-width: 1300px) {
  .guide-figure { width: 270px; }
}

/* Notes pages: the numeral sits hard left, level with the corner mark
   above it, so one line runs down the page. */
@media (min-width: 900px) {
  .guide-section { margin-left: -56px; }
  .guide-section > div { padding-right: 0; }
}

/* ==========================================================================
   MOBILE CLEAN UP
   ========================================================================== */

/* Headlines were clamped to two lines at every size. On a phone that cut
   the end off longer titles, so below tablet they may run to three. The
   two-line rule still holds on desktop where there is room. */
@media (max-width: 699px) {
  .full-page-header .t-display,
  .full-page-header .t-h1,
  .split-page-header .t-display,
  .split-page-header .t-h1 {
    -webkit-line-clamp: 3 !important;
    font-size: clamp(1.9rem, 8.5vw, 2.6rem) !important;
    max-width: 100% !important;
  }
}

/* Small type was dropping to 9px on phones, which is below comfortable
   reading. Nothing goes under 11px on a small screen. */
@media (max-width: 699px) {
  .t-eyebrow, .eh-corner p, .t-meta, .t-index, .idx,
  .footer-col-label, .nav-row-label, .img-caption,
  .section-label, .quote-meta, .quote-name, .slot-tile p:nth-of-type(3) {
    font-size: 0.72rem !important;   /* 11px at the 15px root */
  }
  .nav-social-link, .cta-sub, .field-sub, .safety-text, .terms-p, .privacy-body {
    font-size: 0.92rem !important;
  }
  /* Body copy stays at a comfortable reading size */
  .t-body, .bf-list li, .success-steps li { font-size: 1rem !important; }
}

/* Breathing room: tighter side padding on phones, but never edge to edge */
@media (max-width: 480px) {
  .grid-container, .section { padding-left: 1.25rem; padding-right: 1.25rem; }
  .bf-trio, .bf-pair { gap: 28px; }
}
/* The header eyebrow is set by a more specific rule, so the mobile
   minimum has to match that specificity to win. */
@media (max-width: 699px) {
  .full-page-header .t-eyebrow,
  .split-page-header .t-eyebrow,
  .home-hero .hero-topmark .t-eyebrow,
  .full-page-header .eh-corner p { font-size: 0.72rem !important; }
}

/* ==========================================================================
   FLOATING CONTROLS
   The menu and back-to-guide buttons are fixed, so they sit over whatever
   is being read. They now step out of the way while you scroll down and
   return the moment you stop or scroll back up, so they never cover text
   you are actually reading.
   ========================================================================== */
.nav-trigger-fixed, .back-to-guide {
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.ui-away .nav-trigger-fixed { opacity: 0; transform: translateY(-14px) scale(0.94); pointer-events: none; }
.ui-away .back-to-guide     { opacity: 0; transform: translateY(14px)  scale(0.94); pointer-events: none; }
/* Opaque backgrounds so they never read as sitting on top of words */
.back-to-guide { background: var(--black) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.10); }
@media (prefers-reduced-motion: reduce) {
  .nav-trigger-fixed, .back-to-guide { transition: none; }
}

/* Phones and small tablets stack the hero in normal flow. Absolute
   centring collided with the bottom strip once the content was taller
   than the screen, which put the buttons behind the boxes. */
@media (max-width: 899px) {
  .home-hero { min-height: 0 !important; justify-content: flex-start !important;
    padding-bottom: var(--sp-6) !important; }
  .home-hero .hero-inner { position: static !important; transform: none !important;
    margin: var(--sp-5) auto var(--sp-4) !important; }
  .home-hero .hero-gets { position: static !important; margin-top: var(--sp-4); }
  .home-hero .hero-topmark { padding-top: 8px; }
}

/* ==========================================================================
   LOADING BAR
   Used on the manage-booking flow (view, cancel, reschedule, unsubscribe)
   and mirrored on the homepage slot loader. This was referenced in markup
   with no CSS anywhere, so it rendered as plain text with no visible
   progress at all.
   ========================================================================== */
.loading-wrap { padding: 6px 0 18px; }
.loading-label { font-size: 0.95rem; color: var(--text-dim); margin-bottom: 12px; }
.loading-track {
  position: relative; width: 100%; max-width: 260px; height: 4px;
  background: var(--border); overflow: hidden;
}
.loading-fill {
  position: absolute; top: 0; left: -35%; width: 35%; height: 100%;
  background: var(--pink); animation: loadingSlide 1.1s ease-in-out infinite;
}
@keyframes loadingSlide { 0% { left: -35%; } 100% { left: 100%; } }
.success-view .loading-track { margin: 0 auto; }

/* The homepage slot loader uses the same visible bar as everywhere else,
   shown from page load until #slotsGrid.innerHTML is replaced with real data. */

/* Style pages: the top section (the two photographs and the brief) is wider
   than the rest of the page and the photographs are larger. Below it the
   sections keep the normal reading width, centred. Both photographs always
   show as true 2:3 portraits, top-aligned with the brief. */
.bf-page { max-width: none; }
.bf-page > *:not(.bf-hero) {
  max-width: calc(var(--grid-max) - 2 * var(--grid-margin));
  margin-left: auto; margin-right: auto;
}
/* The site fixes the rule's vertical margins with !important; only the
   horizontal centring is added here so that spacing rule stays untouched. */
.bf-page > hr.rule { margin-left: auto !important; margin-right: auto !important; }
.bf-hero { max-width: 1600px; margin-left: auto; margin-right: auto; }

/* Phones: the pair runs edge to edge with a hairline between, which makes
   each photograph about a sixth larger than inside the page margins. */
@media (max-width: 899px) {
  .bf-images { margin-left: calc(-1 * var(--grid-margin)); margin-right: calc(-1 * var(--grid-margin)); gap: 4px; }
}

@media (min-width: 900px) {
  .bf-hero { grid-template-columns: 1.55fr 1fr; gap: 32px; align-items: start !important; }
  .bf-images { height: auto; position: sticky; top: var(--sp-4); }
  .bf-images figure { height: auto; }
  .bf-images img { height: auto; aspect-ratio: 2 / 3 !important; }
}
@media (min-width: 1200px) {
  .bf-hero { grid-template-columns: 1.7fr 1fr; gap: 56px; }
  .bf-images { gap: 16px; }
}

/* The small colour-coded status label on the manage-your-session page
   (reached from the link in every application email). Same colours as the
   matching status badges in the admin, so the same status always reads the
   same way wherever it is seen: pink for pending, the muted green for
   confirmed, a deeper red for a closed, not-proceeding outcome. */
.status-pill {
  display: inline-block; font-family: 'Degular Mono', monospace; font-size: 0.72rem;
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 10px; border: 1px solid currentColor; margin-bottom: var(--sp-2);
}
.status-pill-pending   { color: var(--pink-text); }
.status-pill-confirmed { color: var(--st-green); }
.status-pill-closed    { color: #B3003C; }


/* ---- Slot availability on the public booking grid ---------------------------
   Every slot says where it stands: Available (green), In Review (orange, held by
   someone whose application is still being looked at) or Booked (red, confirmed).
   The availability sits on top in the corner with the location type directly
   below it. Studio and Outdoors share one dark grey, as they always did for
   Outdoors, so colour on a slot only ever means availability. Each colour has a
   lighter version for dark mode so it stays readable on a dark background. */
:root { --st-green: #3A6B4A; --st-orange: #B85500; --st-red: #C0271D; }
@media (prefers-color-scheme: dark) {
  :root { --st-green: #6DBE8C; --st-orange: #F29A3D; --st-red: #F06A5F; }
}
:root[data-theme="dark"]  { --st-green: #6DBE8C; --st-orange: #F29A3D; --st-red: #F06A5F; }
:root[data-theme="light"] { --st-green: #3A6B4A; --st-orange: #B85500; --st-red: #C0271D; }

.slot-corner {
  position: absolute; top: var(--sp-1); right: var(--sp-1);
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.slot-corner .slot-type-badge-corner { position: static; }
.slot-state {
  font-family: 'Degular Mono', monospace; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.3;
  padding: 3px 8px; border: 1px solid currentColor;
}
.slot-state-available { color: var(--st-green); }
.slot-state-review    { color: var(--st-orange); }
.slot-state-booked    { color: var(--st-red); }
.slot-state-taken     { color: var(--text-dim); }

/* Studio and Outdoors: the same dark grey, everywhere the badge is used. */
.slot-type-outdoor, .slot-type-studio { color: var(--text-mid); border-color: var(--border-mid); }

/* A held slot used to fade the whole tile, which also faded its badge. Only the
   details fade now, so the colour that says why it is unavailable stays clear,
   and the location type stays visible beneath it. */
.slot-tile-booked { opacity: 1; }
.slot-tile-booked > .idx, .slot-tile-booked > p { opacity: 0.55; }
.slot-tile-booked .slot-corner .slot-type-badge-corner { display: inline-block !important; }

/* ---- Booking form helpers: hint, permanent examples, warning, suggestion (items 6, 7, 10, 18, 21) ---- */
.field-hint { font-size: 0.9rem; line-height: 1.55; color: var(--text); margin: 0 0 var(--sp-2); }
.field-example { font-size: 0.82rem; line-height: 1.5; color: var(--text-dim); margin: 6px 0 0; }
.field-warn { display: none; font-size: 0.85rem; line-height: 1.5; color: var(--st-orange); margin: 6px 0 0; }
.field-warn.show { display: block; }
.field-suggest { font-size: 0.85rem; line-height: 1.5; color: var(--text); margin: 6px 0 0; }
.field-suggest[hidden] { display: none; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--pink-text); text-decoration: underline; cursor: pointer; }
.form-clear { text-align: center; margin: var(--sp-2) 0 0; font-size: 0.8rem; }
.form-clear .link-btn { color: var(--text-dim); }

/* ---- Slots grouped by location, with a filter (item 19) ---- */
.slot-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--sp-3); }
.slot-filter-btn { font: inherit; font-size: 0.85rem; padding: 10px 14px; min-height: 44px; background: transparent; color: var(--text); border: 1px solid var(--border-mid); cursor: pointer; }
.slot-filter-btn[aria-pressed="true"] { border-color: var(--pink); color: var(--pink-text); }
.slot-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: var(--sp-2) 0 6px; border-bottom: 1px solid var(--border); margin-top: var(--sp-2); }
.slot-group-name { font-family: 'Degular Mono', monospace; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.slot-group-count { font-size: 0.8rem; color: var(--text-dim); }
/* ---- Review screen meeting point (item 20) ---- */
.review-meet { font-size: 0.95rem; line-height: 1.6; margin: 0 0 var(--sp-3); padding: 12px 14px; border-left: 3px solid var(--pink); background: var(--surface); }
.review-meet[hidden] { display: none; }
/* ---- Manage page (items 27, 28, 47, 51) ---- */
.manage-essentials { text-align: left; border: 1px solid var(--border); padding: 16px; margin: var(--sp-3) 0; }
.manage-essentials[hidden] { display: none; }
.manage-ess-label { font-family: 'Degular Mono', monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin: 0; }
.manage-ess-value { font-size: 1rem; margin: 2px 0 12px; color: var(--text); }
.manage-ess-actions { justify-content: flex-start; margin-top: 4px; }
.slot-maps-link { display: inline-block; margin-left: 0.6rem; font-size: 0.85rem; color: var(--pink-text); text-decoration: underline; }
#cancelConfirmWrap .success-body, #cancelConfirmWrap .manage-note-box, .manage-panel .manage-note { text-align: left; }


/* ==== Release 2026-10-12: accessibility, phones and new page elements ==== */
/* 43: 44px tap targets in the menu */
.nav-drawer .nav-links a { display: flex; align-items: center; min-height: 44px; }
.nav-drawer-close { min-width: 44px; min-height: 44px; }
/* 45: the "New here?" links over the hero photo, readable */
.hero-path a, .hero-path-label { color: rgba(255,255,255,0.94); }   /* colour only: the row fades in on its turn with the rest of the hero */
/* 80: the plain facts line under the hero headline */
.hero-fact { font-size: var(--fs-sm); letter-spacing: 0.02em; margin: 0 auto var(--sp-2); max-width: 46ch; color: rgba(255,255,255,0.94); }
/* 73: one set of button states everywhere */
.btn:focus-visible, .btn-outline:focus-visible, .admin-btn:focus-visible, .link-btn:focus-visible, .slot-filter-btn:focus-visible { outline: 2px solid var(--pink-text); outline-offset: 2px; }
.btn:disabled, .btn-outline:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
/* 78/88: In short summaries; 39: related guide links; 85: jump links and Show more */
.in-short { margin: var(--sp-3) 0 0; padding: 12px 14px; border-left: 3px solid var(--pink); background: var(--surface); font-size: var(--fs-md); line-height: 1.6; }
.related-guide { margin: var(--sp-4) auto var(--sp-2); font-size: var(--fs-md); }
.related-guide a { color: var(--pink-text); }
.jump-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: var(--sp-3) auto; font-size: var(--fs-sm); }
.jump-links a { color: var(--text); text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
.tm-hidden { display: none !important; }
.tm-more-wrap { text-align: center; margin: var(--sp-4) 0; }
.tm-more-wrap[hidden] { display: none; }
/* 87: sticky Book bar on phones (merged with All styles on style pages) */
.sticky-bar { display: none; }
@media (max-width: 760px) {
  .sticky-bar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--black); border-top: 1px solid var(--border); }
  .sticky-bar a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: var(--fs-sm); text-decoration: none; }
  .sticky-bar-book { background: var(--pink); color: #FFFFFF; }
  .sticky-bar-alt { border: 1px solid var(--border-mid); color: var(--text); }
  body:has(.sticky-bar) { padding-bottom: 72px; }
  body:has(.sticky-bar) .back-to-guide { display: none; }
}
/* 84: comfortable 16px body text on phones */
@media (max-width: 640px) {
  /* The root is 15px on phones, so this is set in px rather than rem. */
  main p:not(.t-small):not(.idx):not([class*="label"]):not([class*="eyebrow"]):not(.slot-group-count):not(.bf-lead), main li, .t-body, .t-body-mid, .faq-a-inner, .guide-body p, .bf-text { font-size: 16px; }
  .t-small { font-size: max(0.875rem, 14px); }
  /* 86: posing in one column on phones */
  .pose-tile { grid-column: 1 / -1 !important; }
}

/* 35: 404 page */
.notfound { padding: var(--sp-6) 0; }
.notfound-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.notfound-links { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.notfound-links a { min-height: 44px; display: inline-flex; align-items: center; }

/* 74: repeated inline styles from the booking page, now named classes */
.u-s1 { display:none; }
.u-s2 { margin-bottom: 0.4rem; }

/* ==========================================================================
   Release 2026-10-14: the island menu, and the visual changes that go with it
   ========================================================================== */

/* ---- The island: a floating pill that expands downward into the menu ---- */
.nav-trigger-fixed.island {
  position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; right: auto;
  transform: translateX(-50%); z-index: 720;
  width: auto; height: 44px; padding: 0 16px 0 14px; gap: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #0B0B0B; color: #FFFFFF; border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px !important; box-shadow: 0 6px 24px rgba(0,0,0,0.28); cursor: pointer;
  transition: transform .45s var(--ease), opacity .3s var(--ease), border-color .2s var(--ease);
}
.nav-trigger-fixed.island:hover { border-color: var(--pink); }
.nav-trigger-fixed.island svg.island-icon { width: 18px; height: 18px; }
.island-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); animation: islandPulse 2.6s ease-out infinite; }
@keyframes islandPulse { 0% { box-shadow: 0 0 0 0 rgba(232,0,90,.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(232,0,90,0); } }
.island-label, .island-head-label { font-family: 'Degular Mono', monospace; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; }
.ui-away .nav-trigger-fixed.island { opacity: 0; transform: translate(-50%, -72px); pointer-events: none; }
.nav-trigger-fixed.island[aria-expanded="true"] { opacity: 0; transform: translateX(-50%) scale(.9); pointer-events: none; }

.nav-drawer {
  position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; right: auto; bottom: auto;
  width: min(92vw, 400px); max-width: none; height: auto; max-height: calc(100dvh - 24px);
  display: flex; flex-direction: column; overflow: hidden; padding: 0;
  background: #0B0B0B; color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 28px;
  box-shadow: 0 28px 80px rgba(0,0,0,0.55);
  transform: translateX(-50%); z-index: 730;
  /* closed: clipped to the size of the pill, so opening grows out of it */
  clip-path: inset(0 calc(50% - 56px) calc(100% - 44px) calc(50% - 56px) round 22px);
  opacity: 0; visibility: hidden;
  transition: clip-path .55s cubic-bezier(.22,1,.36,1), opacity .18s linear, visibility 0s linear .55s;
}
.nav-drawer.open {
  transform: translateX(-50%); opacity: 1; visibility: visible;
  clip-path: inset(0 0 0 0 round 28px);
  transition: clip-path .55s cubic-bezier(.22,1,.36,1), opacity .12s linear, visibility 0s;
}
.drawer-scrim { z-index: 710; background: rgba(8,8,8,0.45); }
.island-head { position: relative; flex: 0 0 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(255,255,255,0.08); }
.island-head-label { color: #FFFFFF; opacity: .9; }
.nav-drawer .nav-drawer-close { position: absolute; top: 0; right: 4px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.nav-drawer .nav-drawer-close:hover { color: var(--pink); }
.nav-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 8px 20px 22px; }
.nav-drawer .nav-links { margin: 0; gap: 0; }
.nav-drawer .nav-links:first-of-type { margin-top: 0; }
.nav-drawer .nav-links a { display: flex; align-items: center; min-height: 48px; padding: 0 2px; font-size: 1.15rem; color: #FFFFFF; border-bottom: 1px solid rgba(255,255,255,0.07); }
.nav-drawer .nav-links a:last-child { border-bottom: 0; }
.nav-drawer .nav-links a:hover, .nav-drawer .nav-links a:focus-visible { color: var(--pink); opacity: 1; }
.nav-drawer .nav-links a[aria-current="page"] { color: var(--pink); }
.nav-drawer .nav-divider { margin: .75rem 0; border-top: 1px solid rgba(255,255,255,0.12); }
.nav-drawer .nav-row-label { color: rgba(255,255,255,0.62); }
.nav-drawer .nav-social-links { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.nav-drawer a.nav-social-link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; font-family: inherit; font-size: .8rem; letter-spacing: 0; text-transform: none; color: #FFFFFF; border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; }
.nav-drawer a.nav-social-link:hover { border-color: var(--pink); color: var(--pink); }
.nav-drawer .nav-theme-row { min-height: 44px; padding: 0 18px; margin-bottom: 0; border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; }
.nav-drawer .nav-theme-row span, .nav-drawer .nav-theme-row svg { color: #FFFFFF; }
/* the menu's contents settle in one after another */
.nav-drawer .nav-scroll > * { opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .4s var(--ease); }
.nav-drawer.open .nav-scroll > * { opacity: 1; transform: none; transition-delay: calc(var(--n, 0) * 28ms + 140ms); }
html.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-trigger-fixed.island, .nav-drawer .nav-scroll > * { transition: none !important; }
  .island-dot { animation: none; }
}
/* room for the island above every page header */
.full-page-header, .split-page-header { padding-top: 72px !important; }
.home-hero { padding-top: 72px !important; }

/* ---- Slots: rise in gently, ordered by location or by day ---- */
@keyframes slotRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
#slotsGrid:not(.slots-static) .slot-tile, #slotsGrid:not(.slots-static) .slot-group-head { animation: slotRise .6s var(--ease) backwards; animation-delay: calc(min(var(--i, 0), 14) * 55ms); }
@media (prefers-reduced-motion: reduce) { #slotsGrid:not(.slots-static) .slot-tile, #slotsGrid:not(.slots-static) .slot-group-head { animation-name: noSlotsFade !important; animation-duration: .45s !important; animation-timing-function: ease !important; } }
.slot-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0 0 var(--sp-3); }
.slot-controls .slot-filter { margin: 0; }
.slot-view { display: inline-flex; align-items: center; gap: 0; }
.slot-view-label { font-family: 'Degular Mono', monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-right: 12px; }
.slot-view-btn { font: inherit; font-size: 0.85rem; min-height: 44px; padding: 0 16px; background: transparent; color: var(--text); border: 1px solid var(--border-mid); cursor: pointer; }
.slot-view-btn + .slot-view-btn { border-left: 0; }
.slot-view-btn[aria-pressed="true"] { background: var(--text); color: var(--bg, #FAFAF8); border-color: var(--text); }
/* Subscribe stays available while slots are open, as a quiet line under them */
.no-slots.no-slots-compact { margin-top: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border); background: var(--surface); }
.no-slots.no-slots-compact .no-slots-title { font-size: 1.05rem; }

/* ---- Outfit details copy, in short paragraphs ---- */
.field-sub + .field-sub { margin-top: .85rem; }
.field-sub-block { display: flex; flex-direction: column; gap: .85rem; margin-bottom: var(--sp-3); }
.field-sub-block .field-sub { margin: 0; }

/* ---- Notes for the New Face: the section links are buttons ---- */
.jump-links { gap: 10px; }
.jump-links a.btn-outline { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; text-decoration: none; font-size: .9rem; }

/* ---- Blogs: 10% wider, one width everywhere (74ch -> 81ch) ---- */
.guide-body { max-width: 81ch; margin: 0 auto; }

/* ---- 404: one centred block, logo included ---- */
.notfound-main { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 88px 1.5rem 48px; text-align: center; }
.notfound-main .notfound-inner { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.notfound-main .brand-logo-link { display: block; margin: 0 auto var(--sp-3); }
.notfound-main .brand-logo { display: block; width: 200px; max-width: 60vw; height: auto; margin: 0 auto; }
:root[data-theme="dark"] .notfound-main .brand-logo { content: url('logo-white-center.png'); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .notfound-main .brand-logo { content: url('logo-white-center.png'); } }
.notfound-main h1 { margin: 0; }
.notfound-main p { margin: 0; }
.notfound-main .notfound-links { margin-top: var(--sp-3); }

/* ---- Island menu fixes: the site's blanket square-corner rule needs overriding, and links stay white ---- */
.island-dot { border-radius: 50% !important; }
.nav-drawer .nav-drawer-close { border-radius: 50% !important; }
.nav-drawer a.nav-social-link, .nav-drawer .nav-theme-row { border-radius: 999px !important; }
.nav-drawer .nav-links a { color: #FFFFFF !important; }
.nav-drawer .nav-links a:hover, .nav-drawer .nav-links a:focus-visible, .nav-drawer .nav-links a[aria-current="page"] { color: var(--pink) !important; }
.nav-drawer a.nav-social-link { color: #FFFFFF !important; }
.nav-drawer a.nav-social-link:hover { color: var(--pink) !important; }
.nav-drawer:focus { outline: none; }

/* Blogs: exactly 10% wider than the old 74ch column */
.guide-body { max-width: 81.4ch; }


/* ==========================================================================
   Release 2026-10-15: kickers either side of the island, and an island that
   follows light and dark mode
   ========================================================================== */

/* ---- The kickers share the island's row: one flush left, one flush right ----
   (An old rule still reserved 60px on the right for the previous square menu
   button, which left the right kicker stranded well inside the page edge.) */
.full-page-header, .split-page-header, .home-hero { position: relative; }
.eh-corner, .home-hero .hero-corner {
  position: absolute !important; top: max(12px, env(safe-area-inset-top)); left: 0; right: 0;
  width: 100%; max-width: var(--grid-max); margin: 0 auto !important; height: 44px;
  padding: 0 1.5rem !important; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  pointer-events: none; z-index: 5; align-self: auto;
}
.eh-corner p { max-width: calc(50vw - 66px - 1.5rem); line-height: 1.3; }
.eh-corner p:first-child { text-align: left !important; }
.eh-corner p:last-child { text-align: right !important; }
/* the row no longer takes up space in the page, so the content starts a little lower than the island */
.full-page-header, .split-page-header, .home-hero { padding-top: 88px !important; }

/* ---- The island follows the theme: light on light mode, dark on dark mode ---- */
:root {
  --island-bg: #FFFFFF; --island-fg: #131210; --island-muted: rgba(19,18,16,0.62);
  --island-line: rgba(19,18,16,0.12); --island-border: rgba(19,18,16,0.2);
  --island-shadow: 0 6px 24px rgba(19,18,16,0.16); --island-panel-shadow: 0 28px 80px rgba(19,18,16,0.3);
  --island-accent: #E10057; --island-scrim: rgba(19,18,16,0.3);
}
:root[data-theme="dark"] {
  --island-bg: #0B0B0B; --island-fg: #FFFFFF; --island-muted: rgba(255,255,255,0.62);
  --island-line: rgba(255,255,255,0.12); --island-border: rgba(255,255,255,0.16);
  --island-shadow: 0 6px 24px rgba(0,0,0,0.4); --island-panel-shadow: 0 28px 80px rgba(0,0,0,0.6);
  --island-accent: #FF5C93; --island-scrim: rgba(8,8,8,0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --island-bg: #0B0B0B; --island-fg: #FFFFFF; --island-muted: rgba(255,255,255,0.62);
    --island-line: rgba(255,255,255,0.12); --island-border: rgba(255,255,255,0.16);
    --island-shadow: 0 6px 24px rgba(0,0,0,0.4); --island-panel-shadow: 0 28px 80px rgba(0,0,0,0.6);
    --island-accent: #FF5C93; --island-scrim: rgba(8,8,8,0.55);
  }
}
.nav-trigger-fixed.island { background: var(--island-bg); color: var(--island-fg); border-color: var(--island-border); box-shadow: var(--island-shadow); }
.nav-trigger-fixed.island:hover { border-color: var(--pink); }
.nav-drawer { background: var(--island-bg); color: var(--island-fg); border-color: var(--island-border); box-shadow: var(--island-panel-shadow); }
.drawer-scrim { background: var(--island-scrim); }
.island-head { border-bottom-color: var(--island-line); }
.island-head-label { color: var(--island-fg); }
.nav-drawer .nav-drawer-close { color: var(--island-fg); }
.nav-drawer .nav-drawer-close:hover { color: var(--island-accent); }
.nav-drawer .nav-links a { color: var(--island-fg) !important; border-bottom-color: var(--island-line); }
.nav-drawer .nav-links a:hover, .nav-drawer .nav-links a:focus-visible, .nav-drawer .nav-links a[aria-current="page"] { color: var(--island-accent) !important; }
.nav-drawer .nav-divider { border-top-color: var(--island-line); }
.nav-drawer .nav-row-label { color: var(--island-muted); }
.nav-drawer a.nav-social-link { color: var(--island-fg) !important; border-color: var(--island-border); }
.nav-drawer a.nav-social-link:hover { color: var(--island-accent) !important; border-color: var(--island-accent); }
.nav-drawer .nav-theme-row { border-color: var(--island-border); }
.nav-drawer .nav-theme-row span, .nav-drawer .nav-theme-row svg { color: var(--island-fg); }
.nav-drawer .nav-theme-row:hover { border-color: var(--island-accent); }

/* ---- Photos load onto black, not cream. ----
   ONLY the picture area is painted, never a card or tile that also holds text:
   the guide cards and the pose tiles keep their own backgrounds. (An earlier
   version painted whole cards, which turned their text invisible on light mode.)
   Older surface-colour rules sit later in this file, so these take priority. */
.hero-bg, .hub-card > div, .testimonial-img-wrap, .look-tile, .about-portrait, .guide-figure, .pf-tile { background-color: #0B0B0B !important; }
.hero-bg img, .hub-card > div img, .testimonial-img-wrap img, .pose-pic img, .look-tile img, .pf-tile img, .guide-figure img, .about-portrait img, main figure > img { background-color: #0B0B0B !important; }

/* Pose tiles: the picture gets its own wrapper to paint black while it loads (the picture itself is held
   invisible until it arrives, so its own background could never show). The caption beside it is untouched. */
.pose-pic { background-color: #0B0B0B !important; line-height: 0; }

/* ---- Outfit guide cards slide up one after another, in reading order ----
   A keyframe animation (like the booking slots) so it always plays. The cards are only hidden while script
   is running, so without JavaScript every card is simply visible. Each card's turn comes from --stagger,
   set by the script. */
@keyframes cardRise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
.js .reveal[data-stagger] { transition: none; }
.js .reveal[data-stagger].in { opacity: 1; transform: none; animation: cardRise .75s var(--ease) backwards; animation-delay: var(--stagger, 0ms); }
/* Reduce motion (a setting on Mac, Windows, iOS and Android): no movement at all, but the cards still come in
   one after another as a gentle fade, so the order is still there. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal[data-stagger] { opacity: 0 !important; transform: none !important; transition: opacity .6s ease !important; }
  .js .reveal[data-stagger].in { opacity: 1 !important; animation: none !important; transition-delay: var(--stagger, 0ms) !important; }
}


/* ==========================================================================
   Header rhythm: room for the island, and one matching gap either side of the line
   ========================================================================== */
:root {
  --header-gap: 4rem;      /* the space above AND below the line under every page header */
  --island-clear: 56px;    /* breathing room between the island and the logo */
}
.full-page-header, .split-page-header, .home-hero { padding-top: calc(56px + var(--island-clear)) !important; }   /* 56px is the island's bottom edge */
/* The line spacing is for the inner pages. The home page's photo hero has no line and keeps its own spacing. */
.full-page-header:not(.home-hero), .split-page-header {
  padding-bottom: var(--header-gap) !important;               /* intro text to the line */
  margin-bottom: var(--header-gap) !important;                /* the line to the content */
}
/* Whatever follows the header starts exactly one gap below the line. Each page used to add its own
   extra on top (a section's 56px, a block's further 30px), which is why the space below the line
   ranged from 30px to over 100px. Buttons and links keep their own padding. */
.full-page-header:not(.home-hero) + *, .split-page-header + * { padding-top: 0 !important; margin-top: 0 !important; }
/* The three blocks that added their own top spacing below the line (each is the first block on its page). */
.guide-body > .guide-section:first-child { padding-top: 0 !important; }
.bf-page > .bf-hero:first-child { padding-top: 0 !important; }
.full-page-header + main > .grid-container > section.section:first-child { padding-top: 0 !important; }
/* On short screens the home hero has no room to spare, so it keeps its original top spacing there. */
@media (max-height: 780px) and (max-width: 600px) { .home-hero { padding-top: 88px !important; } }

/* ---- No slots open right now: rises in like the slot cards (after them when slots are open) ---- */
.no-slots:not([hidden]) { animation: slotRise .6s var(--ease) backwards; animation-delay: .15s; }
.no-slots.no-slots-compact:not([hidden]) { animation-delay: .5s; }
@keyframes noSlotsFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .no-slots:not([hidden]) { animation: noSlotsFade .5s ease backwards; } }
/* ---- Previous / Next: the style or guide names show on phones too, on two lines if needed ---- */
@media (max-width: 560px) {
  .guide-pager { align-items: stretch; padding: 1.5rem 0 !important; gap: 12px; }
  .guide-pager-link { min-height: 64px; flex: 1 1 0; min-width: 0; }
  .guide-pager-title { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1rem; line-height: 1.25; }
}

/* ---- Related styles on each style page ---- */
.related-styles .section-label { margin-bottom: var(--sp-3); }
.related-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.related-card { display: flex; flex-direction: column; text-decoration: none; color: var(--text); }
.related-img { display: block; background-color: #0B0B0B; aspect-ratio: 2 / 3; overflow: hidden; line-height: 0; }
.related-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.related-card:hover .related-img img { transform: scale(1.03); }
.related-meta { display: flex; flex-direction: column; gap: 4px; padding: 12px 2px 4px; }
.related-num, .related-fam { font-family: 'Degular Mono', monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.related-name { font-family: 'Degular Display', sans-serif; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.02em; }
.related-why { font-size: 0.95rem; color: var(--text-mid, var(--text)); line-height: 1.45; }
.related-cta { margin-top: 4px; font-size: 0.85rem; color: var(--pink-text); }
.related-all { margin: var(--sp-3) 0 0; text-align: center; }
.related-all .btn-outline { min-height: 44px; display: inline-flex; align-items: center; padding: 0 22px; }
@media (max-width: 700px) {
  .related-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .related-card { flex: 0 0 72%; scroll-snap-align: start; }
}
/* ---- What works here, and what doesn't (outfit guide) ---- */
.what-works .what-works-lead { margin-top: var(--sp-2); }
.what-works-title { font-family: 'Degular Display', sans-serif; font-size: 1.6rem; text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 8px; }
.what-works-lead { color: var(--text-dim); margin: 0 0 var(--sp-4, 32px); }
.what-works-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.what-works-sub { font-family: 'Degular Display', sans-serif; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 10px; }
.what-works-box { border: 1px solid var(--border-mid); padding: 16px 18px; margin-bottom: 24px; }
.what-works-box .bf-list { margin: 0; }
.what-works-foot { margin: var(--sp-4, 32px) 0 0; }
@media (max-width: 760px) { .what-works-cols { grid-template-columns: 1fr; gap: 8px; } }
/* What works: the same side margins as every other section; related cards kept small on wide screens */
@media (min-width: 701px) { .related-row { max-width: 860px; margin-left: auto; margin-right: auto; } }
/* ---- Outfit guide: style finder ---- */
.finder { margin: 0 0 var(--sp-4, 32px); padding: 20px; border: 1px solid var(--border); background: var(--surface); }
.finder-title { font-family: 'Degular Display', sans-serif; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.02em; margin: 0; }
.finder-lead { margin: 6px 0 14px; color: var(--text-dim); }
.finder-chips, .filter-chips, .finder-fams { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: inherit; font-size: 0.85rem; min-height: 40px; padding: 0 14px; background: transparent; color: var(--text); border: 1px solid var(--border-mid); border-radius: 999px !important; cursor: pointer; }
.chip:hover { border-color: var(--pink); }
.chip[aria-pressed="true"] { background: var(--text); color: var(--bg, #FAFAF8); border-color: var(--text); }
.finder-form { display: flex; gap: 8px; margin-top: 14px; }
.finder-form input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; font: inherit; font-size: 16px; border: 1px solid var(--border-mid); background: var(--bg, #FAFAF8); color: var(--text); }
.finder-go { min-height: 44px; white-space: nowrap; }
.finder-out:empty { display: none; }
.finder-out { margin-top: 18px; }
.finder-note { padding: 10px 14px; border-left: 3px solid var(--pink); background: var(--bg, #FAFAF8); margin: 0 0 12px; }
.finder-msg, .finder-based { margin: 0 0 12px; color: var(--text-dim); }
.finder-tag { display: inline-block; padding: 2px 10px; border: 1px solid var(--border-mid); border-radius: 999px !important; color: var(--text); font-size: 0.85rem; }
.finder-fams { margin-bottom: 14px; }
.finder-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 760px; }
.finder-card { animation: cardRise .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
.finder-clear-wrap { margin: 10px 0 0; }
@media (max-width: 700px) {
  .finder-results { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .finder-results .finder-card { flex: 0 0 64%; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .finder-card { animation: noSlotsFade .4s ease backwards; animation-delay: calc(var(--i, 0) * 90ms); } }
/* ---- Outfit guide: filters ---- */
.style-filters { margin: 0 0 var(--sp-3, 24px); }
.filter-toggle { display: none; min-height: 44px; padding: 0 18px; }
.filter-panel { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.filter-group { display: flex; flex-direction: column; gap: 8px; }
.filter-label { font-family: 'Degular Mono', monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.filter-panel-foot { display: none; }
.filter-status { margin: 14px 0 0; color: var(--text-dim); font-size: 0.9rem; }
.filter-empty { margin: 10px 0 0; }
.link-btn { font: inherit; background: none; border: 0; padding: 0 4px; color: var(--pink-text); text-decoration: underline; cursor: pointer; min-height: 44px; }
@media (max-width: 760px) {
  .filter-toggle { display: inline-flex; align-items: center; }
  .filter-panel { display: none; margin-top: 12px; padding: 16px; border: 1px solid var(--border); background: var(--surface); }
  .filter-panel.open { display: flex; flex-direction: column; }
  .filter-panel-foot { display: block; }
}
/* While filters are on, the grid switches to an even layout, since the alternating rows need all 21 cards */
.looks-hub-grid.is-filtered > .look-tile { flex-basis: calc((100% - var(--hub-gap)) / 2 - 0.02px) !important; }
@media (min-width: 640px) { .looks-hub-grid.is-filtered > .look-tile { flex-basis: calc((100% - 2 * var(--hub-gap)) / 3 - 0.02px) !important; } }
@media (min-width: 1000px) { .looks-hub-grid.is-filtered > .look-tile { flex-basis: calc((100% - 3 * var(--hub-gap)) / 4 - 0.02px) !important; } }
@media (min-width: 1400px) { .looks-hub-grid.is-filtered > .look-tile { flex-basis: calc((100% - 4 * var(--hub-gap)) / 5 - 0.02px) !important; } }
.looks-hub-grid > .look-tile[hidden], .looks-hub-grid > .look-note-tile[hidden] { display: none !important; }
/* Screen-reader-only text (the finder's label): read aloud, never shown */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
/* Phones: finder chips in one row that scrolls sideways */
@media (max-width: 700px) {
  .finder-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin-right: -20px; padding-right: 20px; }
  .finder-chips .chip { flex: 0 0 auto; }
}
/* ---- Glossary ---- */
.glossary-group { padding-top: var(--sp-4, 32px); scroll-margin-top: 80px; }
.glossary-group .t-h2 { margin-bottom: var(--sp-2, 16px); }
.glossary-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; margin: 0; }
.glossary-item { padding: 14px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 80px; }
.glossary-item dt { font-weight: 700; color: var(--text); }
.glossary-item dd { margin: 4px 0 0; color: var(--text-mid, var(--text)); line-height: 1.55; }
.glossary-item:target { background: var(--surface); }
.glossary-more { color: var(--pink-text); white-space: nowrap; }
.glossary-find { margin: var(--sp-3, 24px) auto 0; }
.glossary-find-label { display: block; font-family: 'Degular Mono', monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.glossary-find input { width: 100%; max-width: 420px; min-height: 44px; padding: 0 14px; font: inherit; font-size: 16px; border: 1px solid var(--border-mid); background: var(--bg, #FAFAF8); color: var(--text); }
.glossary-none { margin: 10px 0 0; }
@media (max-width: 760px) { .glossary-list { grid-template-columns: 1fr; } }
/* ---- Selling line and trust row, opening the booking section ---- */
.booking-intro { margin: 0 0 var(--sp-4, 32px); }
.booking-sell { font-family: 'Degular Display', sans-serif; font-size: 1.35rem; line-height: 1.3; max-width: 34ch; margin: 0 0 14px; color: var(--text); }
.trust-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.trust-row li { font-family: 'Degular Mono', monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); padding-left: 14px; position: relative; }
.trust-row li::before { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50% !important; background: var(--pink); }
@media (max-width: 600px) { .trust-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; } }
/* ---- Reading paths: Start here (guides hub) and Read next (stages page) ---- */
.start-here { margin: var(--sp-3, 24px) auto 0; }
.start-here-label, .read-next-label { display: block; font-family: 'Degular Mono', monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; }
.start-here-links, .read-next-links { display: flex; flex-wrap: wrap; gap: 10px; }
.start-here-links .btn-outline, .read-next-links .btn-outline { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; text-decoration: none; }
.read-next { margin-top: var(--sp-3, 24px); }
@media (max-width: 600px) { .start-here-links { display: grid; grid-template-columns: 1fr 1fr; } .start-here-links .btn-outline { justify-content: center; } }
#stage-aspiring, #stage-development, #stage-new-face, #stage-working { scroll-margin-top: 80px; }
.age-note { padding: 12px 14px; border: 1px solid var(--border-mid); }

/* ---- Booking form help links (open in a new tab so the form isn't lost) ---- */
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.label-row .field-label { margin-bottom: 0; }
.label-help { font-size: 0.82rem; color: var(--pink-text); text-decoration: underline; text-underline-offset: 3px; }
.finder-help { display: inline-block; margin: 0 0 var(--sp-2) 12px; }
.label-row + .field-input, .label-row + select { margin-top: 8px; }

@media (max-width: 600px) { .finder-help { display: block; margin: 0 0 var(--sp-2); } }

.warn-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ---- Round 3: buttons are rectangles (the menu island keeps its pill) and sit centred when the row fits ---- */
.chip, .finder-tag { border-radius: 0 !important; }
:where(div, p, nav, section):has(> :is(a.btn, a.btn-outline, button.btn, button.btn-outline)):not(:has(> :not(a.btn, a.btn-outline, button.btn, button.btn-outline, br))):not(.sticky-bar, .filter-panel, .filter-chips, .filter-status, .style-filters, .finder-form, .od-filter, .label-row, form) {
  display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 10px;
}
.start-here-label, .read-next-label { text-align: center; }
/* ---- Testimonial quotes: easier to read on phones (the mono text is unchanged) ---- */
@media (max-width: 600px) { .quote-text { font-size: 18px !important; line-height: 1.55 !important; } }
/* ---- Related styles on phones: a swipe hint and position dots ---- */
.related-hint, .related-dots { display: none; }
@media (max-width: 700px) {
  .related-hint { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin: 0 0 10px; font-family: 'Degular Mono', monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
  .related-dots { display: flex; justify-content: center; gap: 4px; margin-top: 10px; }
  .related-dots button { width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
  .related-dots button span { width: 8px; height: 8px; border-radius: 50% !important; background: var(--border-mid); transition: background .2s; }
  .related-dots button[aria-current="true"] span { background: var(--pink); }
}
/* ---- Outfit guide: drill-down filter (left-aligned, rectangles) ---- */
.style-filter { margin: 0 0 var(--sp-4, 32px); padding: 20px; border: 1px solid var(--border); background: var(--surface); text-align: left; }
.sf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sf-title { font-family: 'Degular Display', sans-serif; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.02em; margin: 0; }
.sf-count { margin: 0; font-family: 'Degular Mono', monospace; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.sf-prompt { margin: 10px 0 12px; color: var(--text-dim); }
.sf-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.sf-sep { color: var(--text-dim); }
.sf-options { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
.sf-opt, .sf-step, .sf-back, .sf-more { font: inherit; font-size: 0.88rem; min-height: 40px; padding: 0 14px; border-radius: 0 !important; cursor: pointer; text-transform: none; }
.sf-opt, .sf-back, .sf-more { background: transparent; color: var(--text); border: 1px solid var(--border-mid); }
.sf-opt:hover, .sf-back:hover, .sf-more:hover { border-color: var(--pink); }
.sf-facet { font-weight: 600; }
.sf-step { background: var(--text); color: var(--bg, #FAFAF8); border: 1px solid var(--text); }
.sf-reset { font: inherit; font-size: 0.88rem; background: none; border: 0; padding: 0 6px; min-height: 40px; color: var(--pink-text); text-decoration: underline; cursor: pointer; }
.sf-back { color: var(--text-dim); }
.sf-empty { margin: 12px 0 0; }
.look-tile .look-match { display: block; margin-top: 6px; font-family: 'Degular Mono', monospace; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pink-text); }
/* ---- Booking form: age and guardian ---- */
.age-options { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.age-opt { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--border-mid); cursor: pointer; }
.age-opt:has(input:checked) { border-color: var(--text); }
.age-opt input { accent-color: var(--pink); }
.guardian-fields { padding: 16px; border: 1px solid var(--border-mid); background: var(--surface); }
.guardian-fields .details-grid { margin: 12px 0 16px; }
/* ---- Guardian approval page ---- */
.guardian-page { max-width: 760px; }
.guardian-details { margin: 20px 0; display: grid; gap: 10px; }
.guardian-details div { padding: 12px 0; border-bottom: 1px solid var(--border); }
.guardian-details dt { font-family: 'Degular Mono', monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.guardian-details dd { margin: 4px 0 0; }
.guardian-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }
/* ---- Preview mode banner (only in Metty's browser) ---- */
.preview-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 9999; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; background: #111; color: #fff; font-size: 0.85rem; box-shadow: 0 4px 20px rgba(0,0,0,.25); }
.preview-bar button { font: inherit; font-size: 0.8rem; min-height: 36px; padding: 0 12px; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 0; cursor: pointer; }
.preview-bar button[aria-pressed="true"] { background: #fff; color: #111; }
.admin-preview-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 0; }
.admin-preview-note { font-size: 0.82rem; color: var(--text-dim); }
/* ---- Booking form: a style's tagline appears once it's ticked ---- */
.look-check .look-desc { display: none; }
.look-check:has(input:checked) .look-desc { display: block; flex-basis: 100%; margin-top: 4px; font-size: 0.8rem; line-height: 1.4; color: var(--text-dim); }
/* ---- Terms of Collaboration: sentence-case headings, numbered clauses ---- */
.terms-v3 .in-short ul { margin: 8px 0 0; padding-left: 1.2em; }
.terms-v3 .in-short li { margin: 4px 0; }
.terms-jump { margin: var(--sp-4, 32px) 0; }
.terms-h2 { font-family: 'Degular Display', sans-serif; font-weight: 600; font-size: 1.3rem; letter-spacing: 0; text-transform: none; margin: var(--sp-5, 48px) 0 var(--sp-2, 16px); scroll-margin-top: 80px; }
.terms-p { margin: 0 0 14px; line-height: 1.7; }
.terms-n { display: inline-block; min-width: 2.6em; font-family: 'Degular Mono', monospace; font-size: 0.85em; color: var(--text-dim); }
.terms-v3 .terms-p { text-transform: none !important; letter-spacing: normal !important; font-family: 'Degular Text', sans-serif; font-weight: 300; font-size: 1rem; color: var(--text); }
.terms-v3 .terms-p strong { font-weight: 600; }
/* ---- Filter, round 4: quieter, closer to the rest of the site ---- */
.style-filter { background: transparent; border: 0; border-top: 1px solid var(--border-mid); border-bottom: 1px solid var(--border-mid); padding: 22px 0; }
.sf-title { font-family: 'Degular Mono', monospace; font-weight: 400; font-size: 0.75rem; letter-spacing: 0.14em; color: var(--pink-text); }
.sf-count { font-size: 0.72rem; }
.sf-prompt { font-size: 0.95rem; margin: 8px 0 16px; }
.sf-options { gap: 6px; }
.sf-opt, .sf-back, .sf-more { min-height: 38px; padding: 0 12px; font-size: 0.86rem; border-color: var(--border); display: inline-flex; align-items: center; gap: 8px; transition: border-color .2s, background .2s; }
.sf-opt:hover, .sf-more:hover { border-color: var(--text); }
.sf-facet { font-weight: 400; font-family: 'Degular Display', sans-serif; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.82rem; }
.sf-n { font-family: 'Degular Mono', monospace; font-size: 0.68rem; color: var(--text-dim); }
.sf-back { border-color: transparent; padding-left: 0; }
.sf-more { border-style: dashed; }
.sf-step { min-height: 34px; font-size: 0.82rem; padding: 0 10px; }
.sf-path { margin: 4px 0 6px; }
.look-tile .look-match { font-size: 0.64rem; color: var(--text-dim); }
/* ---- Review step: terms first, then one agreement ---- */
.terms-summary { margin-top: var(--sp-3, 24px); padding: 18px 20px; border: 1px solid var(--border-mid); }
.terms-short { margin: 8px 0 14px; padding-left: 1.2em; }
.terms-short li { margin: 4px 0; line-height: 1.5; }
.terms-summary .terms-p { color: var(--text-mid, var(--text)); font-size: 0.92rem; text-transform: none; }
.final-agree { margin-top: var(--sp-3, 24px); padding: 14px 16px; border: 1px solid var(--text); }
/* Filter heading centred (count sits under it) */
.sf-head { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.sf-prompt { text-align: center; }
.sf-path { justify-content: center; }
/* Tier labels on filtered cards */
.look-tile .look-match[data-tier="2"] { color: var(--text-dim); }
.look-tile .look-match[data-tier="3"] { color: var(--text-dim); font-style: italic; }
/* Outfit guide filter: option buttons centred, like every other button row */
.sf-options { justify-content: center !important; }
.sf-path { justify-content: center; }

.style-filter .sf-count { font-size: 0.72rem !important; letter-spacing: 0.1em; }

.sf-widen { border-style: dashed; }
.sf-widen .sf-n { color: var(--pink-text); }

/* ==========================================================================
   Round 4: the kickers are gone, so the menu island is the one mark at the top.
   It is wider (phone, then tablet, then desktop) and laid out in three even
   places: dot on the left, label in the middle, icon on the right.
   ========================================================================== */
.nav-trigger-fixed.island {
  width: 156px; padding: 0 18px; gap: 0;
  display: grid; grid-template-columns: 18px 1fr 18px; align-items: center; justify-content: normal;
}
.nav-trigger-fixed.island .island-dot { justify-self: start; }
.nav-trigger-fixed.island .island-label { text-align: center; padding-left: 0.16em; }
.nav-trigger-fixed.island .island-icon { justify-self: end; }
@media (min-width: 640px)  { .nav-trigger-fixed.island { width: 204px; } }
@media (min-width: 1024px) { .nav-trigger-fixed.island { width: 264px; } }

/* ---- Menu: everything centred ---- */
.nav-drawer .nav-links a { justify-content: center; text-align: center; }
.nav-drawer .nav-row-label { text-align: center; }
.nav-drawer .nav-social-links { justify-content: center; }
.nav-drawer .nav-theme-row { display: flex; align-items: center; justify-content: center; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; gap: 10px; }

/* ---- Desktop: the menu button is as wide as the open menu (400px), so the
   panel simply grows downward out of it. The closed panel is clipped to the
   button's exact size at every width, so opening always starts from the pill. ---- */
@media (min-width: 1024px) { .nav-trigger-fixed.island { width: 400px; } }
.nav-drawer:not(.open) { clip-path: inset(0 calc(50% - 78px) calc(100% - 44px) calc(50% - 78px) round 22px); }
@media (min-width: 640px)  { .nav-drawer:not(.open) { clip-path: inset(0 calc(50% - 102px) calc(100% - 44px) calc(50% - 102px) round 22px); } }
@media (min-width: 1024px) { .nav-drawer:not(.open) { clip-path: inset(0 0 calc(100% - 44px) 0 round 22px); } }