/* Owner-aligned homepage copy (2026-10-12 working draft). Loaded only by this local candidate.
   Supplied CTA roles: Explore Men’s Services is the primary hero action; Book a Consultation is secondary.
   The persistent header Book control is separate and unchanged. */

/* Revised editorial hero (2026-10-12 refinement): solid black text field, portrait right, text clear of the face. */
.page--fashion .fashion-hero--editorial { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
.page--fashion .fashion-hero--editorial .fashion-hero__copy {
  position: static; align-self: center; background: none; max-width: none;
  padding: clamp(2.5rem, 6vh, 4.5rem) clamp(2rem, 4.5vw, 5rem) clamp(2.5rem, 6vh, 4.5rem) var(--pad-x);
}
.page--fashion .fashion-hero--editorial h1 {
  position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
  margin: 0 0 1.6rem; font-family: var(--serif); font-weight: 500; letter-spacing: .005em;
  font-size: clamp(3rem, 4.8vw, 5.4rem); line-height: .98; color: var(--paper);
}
.page--fashion .db-descriptor {
  margin: 0 0 1.75rem; font-family: var(--sans); font-weight: 500; font-size: .7rem;
  line-height: 1.4; letter-spacing: .26em; text-transform: uppercase; color: var(--soft);
}
.page--fashion .db-support { margin: 0 0 2.6rem; max-width: 34rem; font-size: 1.08rem; line-height: 1.55; color: var(--paper); }
.page--fashion .fashion-hero--editorial .fashion-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.25rem; }
.page--fashion .fashion-hero--editorial .fashion-hero__image::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--black) 0%, #05060700 16%);
}
.page--fashion .fashion-hero--editorial .fashion-hero__image img { object-position: 50% 22%; }

/* Couple photograph: wider image column so both faces stay inside the frame and clear of the text. */
.page--fashion .fashion-hero--editorial:has(.fashion-hero__image--couple) { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }

/* CTA priority (owner direction 2026-10-12, matrix CTA / CTA-HERO-BOOK-BUTTON): Book a Consultation is the
   primary action, Explore Men's Services the secondary. Classes keep their copy-slot names (.fashion-cta--primary =
   copy.primary slot, first position; .fashion-cta--text = copy.secondary slot, second position, data-book); the
   established treatments are swapped: Book takes the filled primary treatment, Explore the outlined secondary
   (the earlier CTA-HIERARCHY / C2 outline). Positions and wording unchanged. */
.page--fashion .fashion-hero--editorial .fashion-hero__actions .fashion-cta--text {
  background: var(--paper); color: var(--black); border: 1px solid var(--paper); border-radius: 0; font-weight: 600;
  min-height: 64px; padding: 0 2rem; gap: 1.25rem; font-size: .8rem; letter-spacing: .16em; justify-content: center;
}
.page--fashion .fashion-hero--editorial .fashion-hero__actions .fashion-cta--text:hover { background: transparent; color: var(--paper); }
.page--fashion .fashion-hero__actions .fashion-cta--primary,
.page--fashion .fashion-studio__location .fashion-cta--primary {
  background: transparent; color: var(--paper); border: 1px solid #f7f7f58c; font-weight: 500;
  min-height: 48px; padding: 0 1.25rem; gap: 1.25rem; font-size: .74rem; letter-spacing: .16em;
}
.page--fashion .fashion-hero__actions .fashion-cta--primary:hover,
.page--fashion .fashion-studio__location .fashion-cta--primary:hover { border-color: var(--paper); }
.page--fashion .fashion-hero__actions .fashion-cta:focus-visible,
.page--fashion .fashion-studio__location .fashion-cta:focus-visible { outline: 2px solid var(--paper); outline-offset: 6px; }

@media (max-width: 760px) {
  .page--fashion .fashion-hero--editorial { display: flex; flex-direction: column; min-height: 100svh; }
  .page--fashion .fashion-hero--editorial .fashion-hero__image { order: 0; flex: none; min-height: 0; height: 40svh; }
  .page--fashion .fashion-hero--editorial .fashion-hero__image::before { background: linear-gradient(0deg, var(--black) 0%, #05060700 22%); }
  .page--fashion .fashion-hero--editorial .fashion-hero__image img { object-position: 50% 16%; }
  .page--fashion .fashion-hero--editorial .fashion-hero__copy { order: 1; padding: 1.25rem var(--pad-x) 1.75rem; }
  .page--fashion .fashion-hero--editorial h1 { font-size: clamp(2.3rem, 10.5vw, 2.9rem); margin-bottom: 1rem; }
  .page--fashion .db-descriptor { margin-bottom: 1rem; font-size: .62rem; letter-spacing: .2em; }
  .page--fashion .db-support { margin-bottom: 1.4rem; font-size: .92rem; max-width: 20rem; }
  .page--fashion .fashion-hero--editorial .fashion-hero__actions { flex-direction: column; align-items: stretch; gap: .75rem; }
  .page--fashion .fashion-hero--editorial .fashion-hero__actions .fashion-cta--text { align-self: stretch; min-height: 58px; }
  .page--fashion .fashion-hero__actions .fashion-cta--primary { align-self: flex-start; }
}


/* Section copy supplied by the owner draft. */
.page--fashion .fashion-section-head h2 { font-family: var(--serif); font-weight: 500; letter-spacing: .005em; font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1.04; }
.page--fashion .fashion-section-lede { max-width: 44rem; margin: .75rem 0 0; color: var(--soft); line-height: 1.6; }
.page--fashion .fashion-section-cta { margin: 1.75rem 0 0; }
.page--fashion .fashion-row__content > p { margin: 0 0 1rem; max-width: 44rem; color: var(--soft); line-height: 1.6; }
.page--fashion .fashion-row__content > div { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.page--fashion .fashion-team { padding: 6rem var(--pad-x) 0; }
.page--fashion .fashion-vault__intro p { max-width: 36rem; }
.page--fashion .fashion-vault__ledger small { color: var(--soft); font-size: .82rem; line-height: 1.5; }
.page--fashion .fashion-close .eyeline { margin: 0 0 1rem; }
.page--fashion .fashion-close__lede { max-width: 36rem; margin: .5rem auto 0; color: var(--soft); line-height: 1.6; }
.page--fashion .fashion-close .fashion-book { margin-top: 1.75rem; }

@media (max-width: 760px) {
  .page--fashion .fashion-team { padding-top: 4rem; }
}

/* Longer owner headings and introductions: stacked section heads, measured display sizes. */
.page--fashion .fashion-section-head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 0; }
.page--fashion .fashion-section-head > .eyeline { margin: 0 0 1rem; }
.page--fashion .fashion-section-head > p:last-child { justify-self: start; }
.page--fashion .fashion-vault { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.page--fashion .fashion-vault h2 { font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: 1.02; }
.page--fashion .fashion-vault__ledger > a > small { grid-column: 2 / -1; margin-top: -.5rem; white-space: normal; }
.page--fashion .fashion-close h2 { font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1.02; }
@media (max-width: 760px) {
  .page--fashion .fashion-vault { grid-template-columns: minmax(0, 1fr); }
  .page--fashion .fashion-vault h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .page--fashion .fashion-close h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
}

/* Candidate location entries (matrix HOME-STUDIO-LOCATIONS, pending): reuse .fashion-place; top-align the two entries. */
.page--fashion .fashion-place--entries { align-items: start; }

/* Candidate studio introduction (matrix HOME-STUDIO-LOCATIONS, pending): one photograph after the owner removed the 4Her
   room photo (2026-10-12). Copy and the SYR card share the existing two-column .fashion-studios__grid; the link pair
   reuses the treatment-row link group spacing (.fashion-row__content > div). */
.page--fashion .fashion-studios--intro .fashion-studios__grid { align-items: center; }
.page--fashion .fashion-studios--intro .fashion-section-head { margin-bottom: 0; }
.page--fashion .fashion-studio-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
@media (min-width: 761px) {
  .page--fashion .fashion-studios--intro .fashion-studio--syr { margin-right: 0; }
}

/* Compact White Plains studio section and New York City section (matrix HOME-STUDIO-LOCATIONS, pending; owner direction
   2026-10-13): fit one desktop viewport below the sticky header. Values reuse existing scales: the 2.6rem heading cap
   (.fashion-vault / .fashion-close phone h2), the phone caption padding (1.25rem), .fashion-place address type, and the
   .page--fashion h3 scale for the New York City heading. */
.page--fashion .fashion-studios--compact { padding: 3rem var(--pad-x) 3.5rem; }
.page--fashion .fashion-studios--compact .fashion-section-head h2 { font-size: clamp(2rem, 2.6vw, 2.6rem); }
.page--fashion .fashion-studios--compact .fashion-studio__image { aspect-ratio: 3 / 2; }
.page--fashion .fashion-studios--compact .fashion-studio__caption { padding-top: 1.25rem; }
.page--fashion .fashion-studios--compact .fashion-studio__wordmark { font-size: clamp(4.5rem, 6vw, 6.5rem); }

/* Location block (matrix HOME-STUDIO-LOCATIONS, pending; owner direction 2026-10-13, SYRX4HER_LOCATION_HIERARCHY_AND_SECTION3_CORRECTION_01):
   the small existing eyeline label "Location" (a proposed clarifying label) stacked above "Westchester" (an h3 at the intro serif scale, clamp(1.5rem, 2.2vw, 2rem)) and the existing
   View Location link, set apart from the two offering links by the section spacing. The full White Plains address stays in the footer. */
/* Location row (owner direction 2026-10-13, SYRX4HER_LOCATION_ROW_LAYOUT_01): "Location" over "Westchester" stay one text group on the left;
   the outlined View Location pill sits at the far right of the same row, centered on the Westchester line. It only stacks (pill under the
   text) when the column is too narrow to keep comfortable space between them, decided by the column's own width (container query). */
.page--fashion .fashion-studios--compact .fashion-section-head { container-type: inline-size; }
.page--fashion .fashion-studio__location { margin-top: 3.5rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; align-items: center; }
.page--fashion .fashion-studio__location .eyeline { grid-column: 1; grid-row: 1; margin: 0 0 .5rem; }
.page--fashion .fashion-studio__location .fashion-studio__place { grid-column: 1; grid-row: 2; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.1; margin: 0; }
.page--fashion .fashion-studio__location .fashion-cta--primary { grid-column: 2; grid-row: 2; }
@container (max-width: 21.25rem) {
  .page--fashion .fashion-studio__location { grid-template-columns: minmax(0, 1fr); }
  .page--fashion .fashion-studio__location .fashion-cta--primary { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 2rem; }
}

/* New York City section: presentation restored to its pre-2026-10-13 compact attempt (that attempt targeted the wrong
   section); text is the owner-corrected "610 West 26th Street". */
.page--fashion .fashion-place--nyc h2 { font-size: clamp(2.7rem, 4vw, 4.6rem); line-height: 1; letter-spacing: -.025em; margin: .75rem 0 1.25rem; }
/* Horizontally centered announcement (owner direction 2026-10-13, SYRX4HER_STUDIO_SCALE_LOCATION_LINK_AND_COMBINED_MOCK_01). */
.page--fashion .fashion-place--nyc { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; border-top: 0; }
/* Divider above the New York City announcement removed (owner direction 2026-10-13, SYRX4HER_WESTCHESTER_HIERARCHY_NYC_DIVIDER_01); wording, centering and spacing otherwise unchanged. */


/* Larger Westchester studio composition (owner direction 2026-10-13, SYRX4HER_STUDIO_SCALE_LOCATION_LINK_AND_COMBINED_MOCK_01):
   the composition scales up, not just its padding: a wider photograph column (5fr / 7fr), the section-heading scale back
   toward the default h2, and more section padding. Phones keep the existing single-column stack. */
@media (min-width: 761px) {
  .page--fashion .fashion-studios--compact { padding: 4rem var(--pad-x) 4.5rem; }
  .page--fashion .fashion-studios--compact .fashion-studios__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4vw; }
  /* Column swap (owner direction 2026-10-13, SYRX4HER_STUDIO_COLUMN_SWAP_01): the photograph sits LEFT and the text RIGHT so this
     section does not repeat the hero layout. Placement only; the DOM order, and so the phone stack, is unchanged. */
  .page--fashion .fashion-studios--compact .fashion-studio--syr { grid-column: 1; grid-row: 1; }
  .page--fashion .fashion-studios--compact .fashion-section-head { grid-column: 2; grid-row: 1; }
  .page--fashion .fashion-studios--compact .fashion-section-head h2 { font-size: clamp(2.4rem, 3.4vw, 3.4rem); }
}

/* Combined studio + locations alternative (matrix option PROP-STUDIO-LOCATIONS-COMBINED, not accepted): the New York City
   announcement sits inside the studio section, subordinate and centered (its divider was removed 2026-10-13). Reuses the eyeline,
   the .fashion-place address type and the compact h2 scale; no card, image or new decoration. */
.page--fashion .fashion-studios__nyc { margin-top: 3rem; padding-top: 2.5rem; text-align: center; }
.page--fashion .fashion-studios__nyc h3 { font-size: clamp(2rem, 2.6vw, 2.6rem); line-height: 1.1; letter-spacing: -.025em; margin: .5rem 0 .75rem; }
.page--fashion .fashion-studios__nyc address { font-style: normal; font-size: .9rem; line-height: 1.9; color: var(--soft); }

/* Studio text column spacing (owner direction 2026-10-13, SYRX4HER_STUDIO_CLIENT_HEADING_AND_SPACING_01): three clear groups —
   (1) heading, (2) Men's Studio / 4Her at SYR text links, (3) Location label + Westchester + the outlined View Location button.
   All values already exist in the design system: the 1rem/2.5rem link-group gap (.fashion-row__content > div in fashion.css), the 2rem
   section-link margin, 3.5rem section padding, .5rem label gap and the 2rem button breathing room. No divider, badge, colour or button style added. */
.page--fashion .fashion-studios--compact .fashion-studio-links { gap: 1rem 2.5rem; }
.page--fashion .fashion-studios--compact .fashion-section-head .fashion-section-cta { margin-top: 2rem; }

/* Location row bottom-aligned with the photograph (owner direction 2026-10-13, SYRX4HER_DROPDOWN_AUDIENCE_TREATMENTS_BOTTOM_ALIGN_01), desktop only;
   this replaces the earlier alignment to the center of the "SYR" lettering (SYRX4HER_LOCATION_ROW_ALIGN_WORDMARK_01). The text column stretches to the
   photograph's height and becomes a grid: an equal spacer above and below the heading + links group (which keeps the exact slot it had when the whole
   column was centered, because the old gap and row height are reserved under the links), and the Location / Westchester / View Location row sits at the
   bottom of the column, so the bottom of the pill row is level with the bottom edge of the photograph (the SYR caption area). Layout spacing only. */
@media (min-width: 1100px) {
  .page--fashion .fashion-studios--compact .fashion-section-head { align-self: stretch; contain: size; grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr); }
  .page--fashion .fashion-studios--compact .fashion-section-head > h2 { grid-row: 2; }
  .page--fashion .fashion-studios--compact .fashion-section-head > .fashion-studio-links { grid-row: 3; margin-bottom: calc(3.5rem + 1.04rem + .5rem + 48px); }
  .page--fashion .fashion-studios--compact .fashion-studio__location { grid-row: 4; align-self: end; margin-top: 0; margin-bottom: 0; }
}

/* ==== Text hierarchy + treatments table, owner direction 2026-10-13 (SYRX4HER_HIERARCHY_AND_MENU_REFERENCE_01) ==== */

/* Section 3 (section#treatments, "PRECISION. WITH A PERSONAL POINT OF VIEW.") adapted to the owner-supplied reference image
   (docs/owner-input/2026-10-13-treatments-reference.jpg, "THE MENU"): a small tracked label with a short bright rule beneath it; rows of
   all-caps tracked sans names at the left with the two-digit index right-aligned, separated by thin dark hairlines (no serif row titles);
   an unboxed tracked-caps closing link with a long thin arrow. Our content, destinations, medical note and the details/summary expand-collapse are
   unchanged; the existing "+" control is kept (quiet, at the far right) because the reference shows no expand affordance. Existing fonts and colours only. */
.page--fashion .fashion-treatments { padding: 2.5rem var(--pad-x) 3rem; }
.page--fashion .fashion-treatments .fashion-section-head { margin-bottom: 1.5rem; }
.page--fashion .fashion-treatments .fashion-section-head h2 { font-size: clamp(2rem, 2.6vw, 2.6rem); }
.page--fashion .fashion-treatments .fashion-section-head > .eyeline { color: var(--soft); font-weight: 500; }
.page--fashion .fashion-treatments .fashion-section-head > .eyeline::after { content: ''; display: block; width: 5rem; height: 1px; margin-top: 1rem; background: var(--paper); }
/* Intro text hierarchy (owner direction 2026-10-13, SYRX4HER_TREATMENTS_INTRO_HIERARCHY_01), four levels: (1) label — small, tracked, muted, short bright rule kept;
   (2) heading — largest and brightest; (3) lead sentence — medium, muted, clearly smaller than the heading; (4) supporting sentence — smaller, muted, held to a
   comfortable line length. The two sentences are grouped (tight gap) and sit a clearer gap under the heading. Existing type, greys and spacing only. */
.page--fashion .fashion-treatments .fashion-section-head h2 { margin-bottom: 1.5rem; }
.page--fashion .fashion-treatments .fashion-section-head > h2 + .fashion-section-lede { margin-top: 0; font-size: clamp(1.1rem, 1.35vw, 1.3rem); font-weight: 400; line-height: 1.4; color: var(--soft); }
.page--fashion .fashion-treatments .fashion-section-head > .fashion-section-lede + .fashion-section-lede { margin-top: .75rem; max-width: 34rem; text-wrap: balance; font-size: .85rem; font-weight: 400; line-height: 1.7; color: var(--soft); }
.page--fashion .fashion-treatments__rows { border-top: 1px solid var(--hairline); }
.page--fashion .fashion-treatments__rows details { border-bottom: 1px solid var(--hairline); }
.page--fashion .fashion-treatments__rows summary { grid-template-columns: minmax(0, 1fr) auto 2rem; gap: 1.5rem; min-height: 0; padding-block: clamp(1rem, calc(10.5vh - 4.25rem), 2rem); }
.page--fashion .fashion-treatments .fashion-row__title { grid-column: 1; grid-row: 1; font-family: inherit; font-size: clamp(.95rem, 1.2vw, 1.15rem); font-weight: 600; line-height: 1.25; letter-spacing: .12em; text-transform: uppercase; color: var(--paper); }
.page--fashion .fashion-treatments .fashion-row__number { grid-column: 2; grid-row: 1; justify-self: end; font-size: .9rem; font-weight: 400; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--soft); }
.page--fashion .fashion-treatments .fashion-row__plus { grid-column: 3; grid-row: 1; font-size: 1.25rem; font-weight: 300; color: var(--soft); }
.page--fashion .fashion-treatments .fashion-row__content { margin-left: 0; padding-bottom: 1.5rem; }
.page--fashion .fashion-treatments .fashion-row__content > p { font-size: .85rem; color: var(--soft); }
.page--fashion .fashion-treatments .fashion-section-cta { margin-top: 1.5rem; }
.page--fashion .fashion-treatments .fashion-section-cta .editorial-link { border-bottom: 0; gap: 1.25rem; font-size: .72rem; font-weight: 500; letter-spacing: .16em; }
.page--fashion .fashion-long-arrow { position: relative; display: inline-block; width: 3.5rem; height: 1px; background: currentColor; }
.page--fashion .fashion-long-arrow::after { content: ''; position: absolute; right: 2px; top: -3.5px; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.page--fashion .fashion-treatments .fashion-treatment-note { margin-top: 1rem; }
@media (max-width: 760px) {
  .page--fashion .fashion-treatments { padding: 3rem var(--pad-x); }
  .page--fashion .fashion-treatments .fashion-section-head { margin-bottom: 1.5rem; }
  .page--fashion .fashion-treatments__rows summary { grid-template-columns: minmax(0, 1fr) auto 1.5rem; gap: .75rem; padding-block: 1.1rem; }
  .page--fashion .fashion-treatments .fashion-row__title { font-size: .95rem; letter-spacing: .1em; }
  .page--fashion .fashion-treatments .fashion-row__content { margin-left: 0; padding-bottom: 1.25rem; }
}

/* Studio text column hierarchy: the heading is strongest; the brand links and the small Location label are quieter (existing muted colour, brand
   links brighten on hover/focus); Westchester is the second-strongest line; View Location keeps its existing outlined button treatment. */
.page--fashion .fashion-studios--compact .fashion-section-head .fashion-studio-links a { color: var(--soft); font-weight: 500; }
.page--fashion .fashion-studios--compact .fashion-section-head .fashion-studio-links a:hover,
.page--fashion .fashion-studios--compact .fashion-section-head .fashion-studio-links a:focus-visible { color: var(--paper); }
.page--fashion .fashion-studio__location .eyeline { color: var(--soft); font-size: .6rem; font-weight: 500; letter-spacing: .2em; }
.page--fashion .fashion-studio__location .fashion-studio__place { font-weight: 500; color: var(--paper); }

/* ==== "The Vault" as its own compact text-and-pricing section (owner clarification 2026-10-13, SYRX4HER_VAULT_SEPARATE_01). Reuses the existing .fashion-vault
   intro + ledger layout and its serif names and hairlines; the heading and padding use the compact scale already used by the other sections. Each portfolio
   row (details/summary) shows its client description and expands to its plan tiers with catalog-supported prices and the client's link. It deliberately
   differs from the sans-caps treatments table and carries no treatment lists. ==== */
.page--fashion .fashion-vault--compact { padding: 2.75rem var(--pad-x); gap: 2rem 4rem; align-items: start; }
.page--fashion .fashion-vault--compact h2 { font-size: clamp(1.8rem, 2.2vw, 2.3rem); line-height: 1.06; margin: .75rem 0 1rem; text-wrap: balance; }
.page--fashion .fashion-vault--compact .fashion-vault__intro > p:not(.eyeline) { max-width: 30rem; font-size: .9rem; line-height: 1.65; margin: 0; }
.page--fashion .fashion-vault--compact .fashion-vault__intro .editorial-link { margin-top: 1.25rem; }
.page--fashion .fashion-vault__ledger > details { border-bottom: 1px solid var(--hairline); }
.page--fashion .fashion-vault__ledger > details > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 2rem minmax(0, 1fr) 1.5rem; gap: 0 1rem; align-items: center; padding: .85rem 0; }
.page--fashion .fashion-vault__ledger > details > summary::-webkit-details-marker { display: none; }
.page--fashion .fashion-vault__ledger > details > summary > span:first-child { font-size: .7rem; color: var(--soft); }
.page--fashion .fashion-vault__ledger > details > summary strong { font-size: clamp(1.25rem, 1.6vw, 1.5rem); }
.page--fashion .fashion-vault__ledger > details > summary:hover strong { font-style: italic; }
.page--fashion .fashion-vault__plus { justify-self: end; font-size: 1.25rem; font-weight: 300; color: var(--soft); transition: transform .2s; }
.page--fashion .fashion-vault__ledger > details[open] .fashion-vault__plus { transform: rotate(45deg); }
.page--fashion .fashion-vault__plan { margin-left: 3rem; padding: 0 0 1rem; }
.page--fashion .fashion-vault__desc { font-size: .82rem; line-height: 1.55; color: var(--soft); margin: 0 0 .75rem; max-width: 30rem; }
.page--fashion .fashion-vault__plan > .eyeline { color: var(--soft); font-size: .6rem; font-weight: 500; letter-spacing: .2em; margin: 0 0 .25rem; }
.page--fashion .fashion-vault__unit { font-size: .74rem; line-height: 1.4; color: var(--soft); margin: 0 0 .25rem; }
.page--fashion .fashion-vault-list { list-style: none; margin: 0; padding: 0; }
.page--fashion .fashion-vault-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto 4.5rem; align-items: baseline; gap: .75rem; padding: .45rem 0; border-top: 1px solid var(--hairline); }
.page--fashion .fashion-vault-item__name { font-size: .9rem; font-weight: 500; line-height: 1.35; color: var(--paper); }
.page--fashion .fashion-vault-item__meta { font-size: .78rem; font-weight: 400; color: var(--soft); text-align: right; }
.page--fashion .fashion-vault-item__price { font-size: .9rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--paper); text-align: right; }
.page--fashion .fashion-vault__plan > .editorial-link { margin-top: .6rem; }
.page--fashion .fashion-vault--compact .fashion-vault__ledger > p { font-size: .75rem; margin: 1rem 0 0; line-height: 1.6; }
@media (max-width: 760px) {
  .page--fashion .fashion-vault--compact { padding: 2.25rem var(--pad-x); gap: 1.5rem; }
  .page--fashion .fashion-vault__ledger > details > summary { grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem; gap: 0 .75rem; padding: .8rem 0; }
  .page--fashion .fashion-vault__plan { margin-left: 2.25rem; }
  .page--fashion .fashion-vault-list li { grid-template-columns: minmax(0, 1fr) auto 3.9rem; gap: .5rem; }
}


/* ==== Vault CONCEPT (vault-concept.html only; proposal, not accepted). Scoped to .fashion-vault--concept / .vc. Desktop: exactly two columns. LEFT: heading, then the
   introduction, which hands over to the selected portfolio's details (name, description, starting price, tiers, link) in the SAME space, so nothing moves. RIGHT: one vault
   photograph; on request it gives way to a ring of six cards that rotates (adapted from codrops/3DCarousel, MIT; see vault-carousel.js). Prices and details are never on
   the cards. Square controls, hairlines, serif names and the tier-list rules are reused. ==== */
.page--fashion .fashion-vault--concept { display: block; padding: 2.25rem var(--pad-x); }
.vc { --vc-box: clamp(22rem, calc(100vh - 21rem), 30rem); --vc-h: calc(var(--vc-box) * .7); --vc-w: calc(var(--vc-h) * .72); --vc-R: calc(var(--vc-w) * 1);
  display: grid; grid-template-columns: 30rem 1fr; gap: 2rem 2.5rem; align-items: center; max-width: 72rem; margin-inline: auto; }
/* opening state: the (still empty) details column is collapsed so the wide photograph owns the width; it opens as the ring reveals (grid tracks interpolate: length to length, fr to fr) */
.vc.is-ready { transition: grid-template-columns .9s cubic-bezier(.22, .7, .2, 1), column-gap .9s cubic-bezier(.22, .7, .2, 1); }
.vc.is-ready[data-state="intro"] { grid-template-columns: 0px 1fr; column-gap: 0; }
.vc.is-ready[data-state="intro"] .vc__left { display: none; }
.vc__visual { grid-column: 2; }
.vc__head { grid-column: 1 / -1; text-align: center; }
.vc__head p { max-width: 38rem; margin: .5rem auto 0; font-size: .98rem; line-height: 1.6; color: var(--soft); }
.vc__head h2 + p { margin-top: 1rem; color: var(--paper); }
.vc__left, .vc__visual { min-width: 0; }
.page--fashion .fashion-vault--concept h2 { font-size: clamp(2rem, 2.9vw, 2.9rem); line-height: 1.05; margin: 0; text-wrap: balance; }
.vc__swap { margin-top: 0; }
.vc__panel { padding: 1.1rem 0; border-top: 1px solid var(--hairline); }
.vc__panel h3 { font-family: var(--serif); font-size: clamp(1.45rem, 1.9vw, 1.8rem); font-weight: 500; line-height: 1.15; margin: 0 0 .4rem; }
.vc__desc { font-size: .92rem; line-height: 1.6; color: var(--soft); margin: 0 0 1.15rem; max-width: none; }
.vc__from { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem 1rem; margin: 0 0 1.1rem; }
.vc__from .eyeline { flex: 0 0 100%; color: var(--soft); font-size: .6rem; font-weight: 500; letter-spacing: .2em; margin: 0; }
.vc__from strong { font-family: var(--serif); font-size: 2rem; font-weight: 500; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.vc__from-q { font-size: .85rem; line-height: 1.45; color: var(--soft); }
.vc__panel .fashion-vault-list { margin-bottom: 0; }
.vc__panel .fashion-vault-list li { padding: .6rem 0; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto 5.25rem; }
.vc__panel .fashion-vault-item__name { font-size: .95rem; }
.vc__panel .fashion-vault-item__meta { font-size: .82rem; }
.vc__panel .fashion-vault-item__price { font-size: .95rem; }
.vc__panel .fashion-vault__unit { font-size: .74rem; line-height: 1.4; color: var(--soft); margin: 0 0 .2rem; }
.vc__panel .editorial-link { margin-top: 1.25rem; }
/* the right column: photograph first */
.vc__visual { position: relative; }
.vc__box { position: relative; height: var(--vc-box); }
.vc__hero { position: absolute; inset: 0; margin: 0; display: flex; justify-content: center; align-items: stretch; }
.vc__hero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; border: 1px solid var(--hairline); filter: saturate(.65) contrast(1.03); }
.vc__btn { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: transparent; color: var(--paper); border: 1px solid var(--soft); border-radius: 0; font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.vc__btn:hover:not(:disabled) { background: var(--paper); color: var(--black); }
.vc__btn--text { width: auto; padding: 0 1.4rem; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; background: rgba(5, 6, 7, .8); }
.vc__hero .vc__btn--text { position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%); white-space: nowrap; transition: background .2s, color .2s, opacity .3s; }
.vc__btn:focus-visible, .vc__card:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.vc__btn:disabled { opacity: 0; pointer-events: none; }
/* enhanced state only (vault-carousel.js adds .is-ready): the introduction and the six panels share one grid cell, so the left column keeps one height */
.vc.is-ready .vc__swap { display: grid; }
.vc.is-ready .vc__details { grid-area: 1 / 1; min-width: 0; }
.vc.is-ready .vc__details { display: grid; }
.vc.is-ready .vc__panel { grid-area: 1 / 1; border-top: 0; padding: 0; }
.vc.is-ready .vc__panel.is-off { visibility: hidden; opacity: 0; pointer-events: none; }
.vc.is-ready .vc__bar { display: grid; grid-template-columns: 2.75rem 6rem 2.75rem; align-items: center; justify-content: center; gap: .5rem; position: absolute; left: 0; right: 0; bottom: 0; visibility: hidden; opacity: 0; }
.vc.is-ready[data-state="open"] .vc__bar { visibility: visible; opacity: 1; transition: opacity .5s ease; }
.vc__count { text-align: center; font-size: .75rem; letter-spacing: .14em; color: var(--soft); font-variant-numeric: tabular-nums; }
.vc.is-ready[data-state="open"] .vc__hero { visibility: hidden; }
/* the ring: cell i at rotateY(i * 60deg) translateZ(R); the ring is pushed back by R so the front card sits at the screen plane (codrops/3DCarousel) */
.vc__scene { position: absolute; inset: 0; perspective: 900px; overflow: hidden; visibility: hidden; touch-action: pan-y; user-select: none; }
.vc[data-state="revealing"] .vc__scene, .vc[data-state="open"] .vc__scene { visibility: visible; }
.vc__ring { position: absolute; left: 50%; top: 50%; width: var(--vc-w); height: var(--vc-h); margin: calc(var(--vc-h) / -2) 0 0 calc(var(--vc-w) / -2);
  transform-style: preserve-3d; transform: translateZ(calc(var(--vc-R) * -1)) rotateY(var(--turn, 0deg)); transition: transform 1.1s cubic-bezier(.22, .7, .2, 1); will-change: transform; }
.vc__card { --k: 0; position: absolute; inset: 0; display: flex; flex-direction: column; padding: 0; text-align: left; text-decoration: none; cursor: pointer; overflow: hidden;
  background: #000; color: #fff; border: 1px solid var(--hairline); border-radius: 0; font: inherit; backface-visibility: hidden; filter: brightness(.72);
  transform: rotateY(calc(var(--i) * 60deg)) translateZ(var(--vc-R)); transition: filter .6s ease, border-color .3s ease; }
.vc__card[aria-current="true"] { filter: none; border-color: var(--soft); }
/* image-led card: the picture above, a solid black caption below with the bright portfolio name; the card is one button (or, for “See all portfolios”, one link) */
.vc__card-img { display: block; position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #111417; }
.vc__card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vc__card-arrow { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.6rem; font-weight: 300; color: var(--soft); }
.vc__card-cap { display: flex; flex: 0 0 auto; flex-direction: column; gap: .3rem; padding: .85rem 1rem 1rem; background: #000; border-top: 1px solid var(--hairline); }
.vc__card-idx { font-size: .7rem; letter-spacing: .14em; color: var(--soft); }
.vc__card-idx:empty { display: none; }
.vc__card strong { font-family: var(--serif); font-size: 1.45rem; font-weight: 500; line-height: 1.12; color: #fff; }
/* reduced motion: the same states, flat, no 3D movement */
.vc--flat .vc__scene { perspective: none; opacity: 0; transition: opacity .4s ease; }
.vc--flat[data-state="revealing"] .vc__scene, .vc--flat[data-state="open"] .vc__scene { opacity: 1; }
.vc--flat[data-state="revealing"] .vc__hero { opacity: 0; transition: opacity .4s ease; }
.vc--flat .vc__ring { transform: none; transition: none; }
.vc--flat .vc__card { filter: none; backface-visibility: visible; transform: translateX(calc(var(--k) * var(--vc-w) * .78)); transition: none; opacity: max(0, calc(1 - var(--k) * var(--k) * .45)); z-index: calc(10 - var(--k) * var(--k)); }
@media (prefers-reduced-motion: reduce) { .vc.is-ready { transition: none; } .vc__btn { transition: none; } .vc__card { transition: none; } }
@media (max-width: 900px) {
  .page--fashion .fashion-vault--concept { padding: 2.5rem var(--pad-x); }
  .vc, .vc.is-ready, .vc.is-ready[data-state="intro"], .vc.is-ready[data-state="revealing"], .vc.is-ready[data-state="open"] { --vc-box: 21rem; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; column-gap: 0; transition: none; }
  .vc__visual { grid-column: auto; }
  .vc.is-ready[data-state="intro"] .vc__left { display: contents; }
  .vc.is-ready[data-state="intro"] .vc__swap { display: none; }
  .vc__left, .vc__visual { display: contents; }
  .vc__box { order: 2; }
  .vc.is-ready .vc__bar { order: 3; position: static; justify-content: center; margin-top: -.25rem; }
  .vc__swap { order: 4; margin-top: 0; }
  .vc.is-ready .vc__swap, .vc.is-ready .vc__details { display: block; }
  .vc.is-ready .vc__panel.is-off { display: none; }
  .vc.is-ready:not([data-state="open"]) .vc__bar { display: none; }
  .vc__card-cap { padding: .6rem .75rem .75rem; gap: .2rem; }
  .vc__card strong { font-size: 1.1rem; }
}
@media (max-width: 560px) {
  .vc__from strong { font-size: 1.8rem; }
  .vc__panel .fashion-vault-list li { grid-template-columns: minmax(0, 1fr) auto 4.4rem; gap: .6rem; }
  .vc__panel .fashion-vault-item__name { font-size: .92rem; }
}

/* ==== Offering section (#about): photography first. The heading and lead sentence stay in the main composition; the longer philosophy paragraph and closing lines sit behind an accessible
   disclosure (native details/summary; label and presentation are implementation PROPOSALS). The SYR and 4Her cards use the existing .fashion-studios grid, card, wordmark, arrow and caption styles at a
   large size (owner direction 2026-10-13: the cards had become too small; the men’s photograph is the one the owner likes, so it is the larger). ==== */
.page--fashion .fashion-studios--offering { padding: 3rem clamp(1.5rem, 2.5vw, 2.5rem) 3.5rem; display: grid; grid-template-columns: minmax(0, clamp(20rem, 29vw, 28rem)) minmax(0, 1fr); gap: .75rem 2.5vw; align-items: center; }
.page--fashion .fashion-studios--offering .fashion-section-head { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
.page--fashion .fashion-studios--offering .fashion-section-head > .eyeline { color: var(--soft); font-weight: 500; }
.page--fashion .fashion-studios--offering .fashion-section-head > .eyeline::after { content: ''; display: block; width: 5rem; height: 1px; margin-top: 1rem; background: var(--paper); }
.page--fashion .fashion-studios--offering .fashion-section-head h2 { font-size: clamp(1.7rem, 2vw, 2.2rem); line-height: 1.1; margin: 0 0 1.25rem; }
.page--fashion .fashion-perspective__s { display: inline-block; max-width: 100%; }
.page--fashion .fashion-perspective__s:first-child { margin-right: .3em; }
.page--fashion .fashion-perspective__lead { margin: 0; max-width: 26rem; font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.5; color: var(--paper); }
.page--fashion .fashion-perspective__more { margin-top: 1.5rem; max-width: 26rem; }
.page--fashion .fashion-perspective__more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; padding: 0 1rem; border: 1px solid var(--soft); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--paper); transition: background .2s, color .2s; }
.page--fashion .fashion-perspective__more > summary::-webkit-details-marker { display: none; }
.page--fashion .fashion-perspective__more > summary:hover { background: var(--paper); color: var(--black); }
.page--fashion .fashion-perspective__more > summary:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.page--fashion .fashion-perspective__plus { font-size: 1.1rem; font-weight: 300; line-height: 1; transition: transform .2s; }
.page--fashion .fashion-perspective__more[open] .fashion-perspective__plus { transform: rotate(45deg); }
.page--fashion .fashion-perspective__body { margin: 1rem 0 0; font-size: .88rem; line-height: 1.7; color: var(--soft); }
.page--fashion .fashion-perspective__close { margin: 1rem 0 0; font-size: .88rem; line-height: 1.6; font-weight: 500; color: var(--paper); }
.page--fashion .fashion-perspective__close span { display: block; }
.page--fashion .fashion-studios--offering .fashion-studios__grid { grid-column: 2; grid-row: 1; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.page--fashion .fashion-studios--offering .fashion-studio--syr { margin-right: 0; }
.page--fashion .fashion-studios--offering .fashion-studio--4her { margin-top: 3rem; }
.page--fashion .fashion-studios--offering .fashion-studio__caption { padding-top: 1rem; }
.page--fashion .fashion-studios--offering .fashion-studio__wordmark { left: 1.25rem; font-size: clamp(4.5rem, 6.5vw, 7rem); }
.page--fashion .fashion-studios--offering .fashion-studio__arrow { right: 1.25rem; top: 1.25rem; }
.page--fashion .fashion-studios--offering .fashion-studio--4her img { object-position: 50% 30%; }
.page--fashion .fashion-studios--offering > .fashion-section-cta { grid-column: 2; grid-row: 2; margin: 0; }
@media (max-width: 900px) {
  .page--fashion .fashion-studios--offering { grid-template-columns: minmax(0, 1fr); padding: 2.5rem var(--pad-x) 3rem; gap: 1.75rem; }
  .page--fashion .fashion-studios--offering .fashion-section-head { grid-row: auto; }
  .page--fashion .fashion-studios--offering .fashion-section-head h2 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .page--fashion .fashion-perspective__lead, .page--fashion .fashion-perspective__more { max-width: none; }
  .page--fashion .fashion-studios--offering .fashion-studios__grid { grid-column: 1; grid-row: auto; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .page--fashion .fashion-studios--offering .fashion-studio--syr { margin-right: 1.25rem; }
  .page--fashion .fashion-studios--offering .fashion-studio--4her { margin-top: 0; margin-left: 1.25rem; }
  .page--fashion .fashion-studios--offering .fashion-studio__wordmark { left: 1rem; font-size: clamp(4rem, 20vw, 6rem); }
  .page--fashion .fashion-studios--offering .fashion-studio__arrow { right: 1rem; top: 1rem; }
  .page--fashion .fashion-studios--offering > .fashion-section-cta { grid-column: 1; grid-row: auto; }
}

/* ==== Meet SYR introduction (proposed shorter copy, owner arrangement 2026-10-13): small muted label, heading, quieter founder line; existing typography, colours and link only.
   Desktop (owner direction 2026-10-13, pending visual acceptance): LEFT the introduction group — label, heading and the founder line directly beneath it — RIGHT the team link, vertically
   centred on that group, on the shared gutters, with compact spacing; phones stack. ==== */
.page--fashion .fashion-team--short { padding: 3rem var(--pad-x) 2.75rem; display: block; }
.page--fashion .fashion-team--short .eyeline { color: var(--soft); font-weight: 500; margin: 0 0 .85rem; }
.page--fashion .fashion-team--short h2 { margin: 0; font-family: var(--serif); font-weight: 500; letter-spacing: .005em; font-size: clamp(2rem, 2.6vw, 2.6rem); line-height: 1.16; text-wrap: balance; }
.page--fashion .fashion-team--short .fashion-team__row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 2.5rem; row-gap: .5rem; margin: 1rem 0 0; }
.page--fashion .fashion-team--short .fashion-team__founder { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--soft); max-width: none; }
.page--fashion .fashion-team--short .fashion-team__action { margin: 0; }
@media (max-width: 900px) {
  .page--fashion .fashion-team--short { padding: 2.5rem var(--pad-x) 2.5rem; }
  .page--fashion .fashion-team--short .fashion-team__row { column-gap: 1.75rem; }
}

/* Closing consultation section: gap to the footer (owner direction 2026-10-13). The footer itself lives in mock/global-footer-fashion.css. */
.page--fashion .fashion-close { padding-bottom: 4.5rem; }
@media (max-width: 900px) {
  .page--fashion .fashion-close { padding-bottom: 3.5rem; }
}

/* ==== Owner moodboard direction (2026-10-13; pending visual acceptance). Philosophy band and 4Her band: text-only bands on the existing section rhythm, type and rules. ==== */
.page--fashion .fashion-studios--philosophy { padding-bottom: 4rem; }
.page--fashion .fashion-fourher { padding: 4.5rem var(--pad-x) 4.5rem; border-top: 1px solid var(--hairline); }
.page--fashion .fashion-fourher .eyeline { color: var(--soft); font-weight: 500; margin: 0 0 .85rem; }
.page--fashion .fashion-fourher h2 { margin: 0; font-family: var(--serif); font-weight: 500; letter-spacing: .005em; font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1.12; }
.page--fashion .fashion-fourher .fashion-perspective__lead { margin: 1.1rem 0 0; max-width: 40rem; color: var(--soft); }
.page--fashion .fashion-fourher .fashion-section-cta { margin: 1.5rem 0 0; }
@media (max-width: 900px) { .page--fashion .fashion-fourher { padding: 3rem var(--pad-x); } }