/* Hero actions as underlined text links (owner 2026-10-15, SYRX4HER_HERO_TEXT_LINKS_AND_FURNISHED_PERSPECTIVE_20): no boxes, fills or button padding.
   Same labels, order and destinations; Book a Consultation stays primary through weight and contrast; 44px hit areas; focus outline unchanged.
   The header Book a Consultation button is not affected. */
.page--fashion .fashion-hero--editorial .fashion-hero__actions { gap: 1rem 2.75rem; }
.page--fashion .fashion-hero--editorial .fashion-hero__actions a.fashion-cta {
  background: transparent; border: 0; border-radius: 0; padding: 0; min-height: 44px; gap: .9rem; justify-content: flex-start;
  font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .55em;
}
.page--fashion .fashion-hero--editorial .fashion-hero__actions a.fashion-cta.fashion-cta--primary { color: var(--soft); font-weight: 500; text-decoration-color: #c8cbd08c; }
.page--fashion .fashion-hero--editorial .fashion-hero__actions a.fashion-cta.fashion-cta--text { color: var(--paper); font-weight: 600; text-decoration-color: var(--paper); text-decoration-thickness: 1.5px; }
/* _21: no arrows. Restrained emphasis on hover/focus only: brighter text, slightly heavier and closer underline, soft neutral glow. One short
   transition; no pulse, no movement, no box; reduced motion switches the change instantly. The focus outline stays. */
.page--fashion .fashion-hero--editorial .fashion-hero__actions a.fashion-cta {
  transition: color .22s ease, text-decoration-color .22s ease, text-decoration-thickness .22s ease, text-underline-offset .22s ease, text-shadow .22s ease;
}
.page--fashion .fashion-hero--editorial .fashion-hero__actions a.fashion-cta:hover,
.page--fashion .fashion-hero--editorial .fashion-hero__actions a.fashion-cta:focus-visible {
  background: transparent; color: var(--paper); text-decoration-color: var(--paper);
  text-decoration-thickness: 2px; text-underline-offset: .45em; text-shadow: 0 0 14px rgba(247, 247, 245, .35);
}
@media (prefers-reduced-motion: reduce) {
  .page--fashion .fashion-hero--editorial .fashion-hero__actions a.fashion-cta { transition: none; }
}
/* SYRX4HER_HEADER_HERO_COMPOSITION_37: header and hero as one composition (replaces _34/_36's slot grid; visual acceptance pending).
   Shared horizontal grid: the wordmark, the hero copy and the section gutters all start at --pad-x, and the header's right group ends at the
   opposite gutter. Desktop hero: the copy column fills the area below the header (contain: size, so it never grows the hero) and centres
   ONE group: eyebrow, headline, support line and, --hero-action-gap below them, the two links. Phone: copy stacked under the photograph. */
.page--fashion .fashion-hero--editorial { --hero-action-gap: 8.5rem; }
.page--fashion .fashion-hero--editorial .fashion-hero__actions a.fashion-cta { font-size: .75rem; letter-spacing: .14em; }
@media (min-width: 761px) and (min-height: 620px) {
  .page--fashion .fashion-hero--editorial .fashion-hero__copy {
    align-self: stretch; display: flex; flex-direction: column; justify-content: center; contain: size;
  }
}
@media (min-width: 761px) {
  .page--fashion .fashion-hero--editorial .db-support { margin-bottom: 0; }
  .page--fashion .fashion-hero--editorial .fashion-hero__actions { margin-top: var(--hero-action-gap); }
}
@media (max-width: 760px) {
  .page--fashion .fashion-hero--editorial .db-support { margin-bottom: calc(1.4rem + 1.25rem + 24px); }
}
/* Header (desktop row, this page only): three columns, so the navigation is centred on the page axis rather than in the uneven space
   between the wordmark and the utilities; wordmark and utilities sit on the shared gutters. Labels, order, dots, dropdowns unchanged. */
@media (min-width: 1280px) {
  .page--fashion .nav.nav--global.nav--lifestyle .nav__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .page--fashion .nav.nav--global.nav--lifestyle .brand { justify-self: start; }
  .page--fashion .nav.nav--global.nav--lifestyle .nav__links { justify-self: center; margin: 0; }
  .page--fashion .nav.nav--global.nav--lifestyle .nav__right { justify-self: end; }
}

/* MGM preview photograph, kept for revert (owner 2026-10-15; MGM Models portfolio image, NO LICENCE, local preview only). Display-time only, pixels unmodified:
   a wider left fade and a bottom fade melt the night street into the page black, and a soft-light lift centred on the face makes it easier to
   see without changing structure, texture or the night mood. --face-x/--face-y follow the crop (_26: zoom 1.2 around the focal point, so the
   face sits higher and smaller than at 1.5; the lift's ellipse shrinks by the same 1.2/1.5 so its strength on the face is unchanged). */
.page--fashion .fashion-hero[data-trial-photo="mgm"] .fashion-hero__image { --face-x: 40%; --face-y: 23%; }
.page--fashion .fashion-hero[data-trial-photo="mgm"] .fashion-hero__image::before {
  background: linear-gradient(90deg, var(--black) 0%, #05060700 30%), linear-gradient(0deg, var(--black) 0%, #05060700 22%);
}
.page--fashion .fashion-hero[data-trial-photo="mgm"] .fashion-hero__image::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(ellipse 17.6% 14.4% at var(--face-x) var(--face-y), rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .12) 55%, rgba(255, 255, 255, 0) 100%);
}
@media (max-width: 760px) {
  .page--fashion .fashion-hero[data-trial-photo="mgm"] .fashion-hero__image { --face-x: 40%; --face-y: 23%; }
  .page--fashion .fashion-hero[data-trial-photo="mgm"] .fashion-hero__image::before { background: linear-gradient(0deg, var(--black) 0%, #05060700 26%); }
}
/* Aurélien night-lighting preview (owner 2026-10-15; AI edit of a campaign photograph, usage permission unverified, local preview only).
   Desktop: the existing "full-bleed" composition value. The photograph spans the whole hero behind the unchanged copy; the edit already falls
   to near-black on its left, and a display-time fade (black under the copy, clear from about 46%) plus a short bottom fade melt it into the page
   black. The man stays in the right third, uncovered. No face lift or tone change: the approved edit is shown as delivered. */
@media (min-width: 761px) {
  .page--fashion .fashion-hero--editorial[data-hero-composition="full-bleed"] .fashion-hero__image { grid-column: 1 / -1; grid-row: 1; }
  .page--fashion .fashion-hero--editorial[data-hero-composition="full-bleed"] .fashion-hero__copy { grid-column: 1; grid-row: 1; position: relative; inset: auto; z-index: 2; }
  .page--fashion .fashion-hero[data-trial-photo="aurelien"] .fashion-hero__image::before {
    background: linear-gradient(90deg, var(--black) 0%, #050607e6 20%, #05060700 46%), linear-gradient(0deg, var(--black) 0%, #05060700 16%);
  }
}
/* Phone: the stacked layout stays (the headline must not cross his face); the focal point keeps him in frame, head uncut, with the bottom fade. */
@media (max-width: 760px) {
  .page--fashion .fashion-hero[data-trial-photo="aurelien"] .fashion-hero__image::before { background: linear-gradient(0deg, var(--black) 0%, #05060700 24%); }
}
@media (max-width: 760px) {
  .page--fashion .fashion-hero--editorial .fashion-hero__actions { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .page--fashion .fashion-hero--editorial .fashion-hero__actions a.fashion-cta.fashion-cta--text { align-self: flex-start; min-height: 44px; }
}

/* hero-trial.html ONLY (owner 2026-10-15, SYRX4HER_HERO_ACTIONS_AND_TREATMENT_SPLIT_16; visual acceptance pending). index.html never loads this file.
   Section two: the existing treatment table on the right, the earlier hero portrait (assets/syr-portrait.jpg) on the left, on black.
   The table, its copy, rows, expanded content and links are the existing ones; only their placement changes. */
.page--fashion .fashion-treatments.fashion-treatments--split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: stretch;
  background: var(--black);
  border-top: 1px solid var(--hairline);
  padding: clamp(3rem, 6vw, 5.5rem) var(--pad-x);
}
/* Left column: the photograph fills the height the table needs (cover, never stretched; expanding rows grows the section), and the existing
   results note sits beneath it, outside the image (SYRX4HER_TREATMENT_COPY_AND_SPACING_17). */
.page--fashion .fashion-treatments__media { display: flex; flex-direction: column; min-width: 0; }
.page--fashion .fashion-treatments__portrait { position: relative; flex: 1 1 auto; margin: 0; min-height: 34rem; overflow: hidden; background: #140806; }
.page--fashion .fashion-treatments__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.page--fashion .fashion-treatments__media .fashion-treatment-note { margin: 1rem 0 0; max-width: 32rem; font-size: .78rem; line-height: 1.55; color: var(--soft); }
.page--fashion .fashion-treatments__body { align-self: center; min-width: 0; }
/* Candidate copy keeps its sentence-case source text; it is shown in capitals like the page's other section headings. */
.page--fashion .fashion-treatments--split .fashion-section-head h2 { text-transform: uppercase; }
/* The services link gets its own action area after the table, in normal flow: opened rows push it down. */
.page--fashion .fashion-treatments__action { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.page--fashion .fashion-treatments__action .fashion-section-cta { margin: 0; }
/* Perspective band (SYRX4HER_PERSPECTIVE_SECTION_18): copy on a black panel at left adjoining a wide lounge photograph at right; shorter and
   quieter than the hero. The photograph keeps its own light; only a short black fade softens the seam, so no text ever sits on the image. */
/* Revision _19: a taller architectural feature (about 640px at a 1512x861 viewport) so walls, windows and floor read together. */
.page--fashion .fashion-perspective-band {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  min-height: clamp(36rem, 75vh, 44rem); background: var(--black); border-top: 1px solid var(--hairline);
}
.page--fashion .fashion-perspective-band__copy { align-self: center; padding: clamp(2.5rem, 5vw, 4.5rem) var(--pad-x); }
.page--fashion .fashion-perspective-band__copy .eyeline { margin: 0 0 1rem; color: var(--soft); font-weight: 500; }
.page--fashion .fashion-perspective-band__copy .eyeline::after { content: ''; display: block; width: 5rem; height: 1px; margin-top: 1rem; background: var(--paper); }
.page--fashion .fashion-perspective-band__copy h2 {
  margin: 1.25rem 0 0; max-width: 17ch; font-family: var(--serif); font-weight: 500; text-transform: uppercase;
  font-size: clamp(2rem, 3.1vw, 3.1rem); line-height: 1.04; letter-spacing: .005em; color: var(--paper);
}
.page--fashion .fashion-perspective-band__image { position: relative; margin: 0; min-width: 0; overflow: hidden; background: #0d0806; }
.page--fashion .fashion-perspective-band__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
/* _27 (SYRX4HER_PERSPECTIVE_OPTION_B_DARKER_TREATMENT_27): a restrained display-time shade on Option B only, about 13% lower mean
   luminance; shadows stay open (darkest 1% at 14/255) and warm highlights keep their colour. Asset bytes untouched; set to 1 to revert. */
.page--fashion .fashion-perspective-band__image { --perspective-shade: .87; }
.page--fashion .fashion-perspective-band__image img { filter: brightness(var(--perspective-shade)); }
/* "Discover Our Philosophy": the existing owner philosophy copy, restored behind a restrained disclosure (no destination page exists). */
/* _28 (SYRX4HER_PHILOSOPHY_ACTION_LOWER_AND_VAULT_MOCK_RECOVERY_28): the action anchors to the foot of the black panel, one bottom padding
   above its edge. The column stretches to the band; two equal flexible rows sit above the eyebrow and between heading and action (never less
   than the earlier 3.5rem). Top padding is reduced by that 3.5rem, which places the eyebrow and heading exactly where the former centred
   layout put them. Normal flow: an opened disclosure takes space from the flexible rows first, then grows the band. */
.page--fashion .fashion-perspective-band__copy {
  align-self: stretch; display: grid; grid-template-rows: 1fr auto auto minmax(3.5rem, 1fr) auto;
  padding-top: calc(clamp(2.5rem, 5vw, 4.5rem) - 2.25rem);
}
/* Grid items do not collapse margins: the eyebrow's 1rem bottom margin previously collapsed into the heading's 1.25rem, so it is dropped here
   to keep the same 1.25rem step between them. */
.page--fashion .fashion-perspective-band__copy .eyeline { grid-row: 2; margin-bottom: 0; }
.page--fashion .fashion-perspective-band__copy h2 { grid-row: 3; }
.page--fashion .fashion-perspective-band__philosophy { grid-row: 5; margin-top: 0; max-width: 30rem; }
.page--fashion .fashion-perspective-band__philosophy > summary {
  display: inline-flex; align-items: center; gap: 1rem; min-height: 44px; cursor: pointer; list-style: none;
  font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--paper);
}
.page--fashion .fashion-perspective-band__philosophy > summary::-webkit-details-marker { display: none; }
.page--fashion .fashion-perspective-band__philosophy > summary:focus-visible { outline: 2px solid var(--paper); outline-offset: 6px; }
.page--fashion .fashion-perspective-band__arrow { display: inline-block; font-size: 1rem; transition: transform .2s ease; }
.page--fashion .fashion-perspective-band__philosophy[open] .fashion-perspective-band__arrow { transform: rotate(90deg); }
.page--fashion .fashion-perspective-band__text { padding-top: 1rem; border-top: 1px solid var(--hairline); margin-top: .75rem; }
.page--fashion .fashion-perspective-band__text p { margin: 0 0 .9rem; font-size: .9rem; line-height: 1.65; color: var(--soft); }
.page--fashion .fashion-perspective-band__text .fashion-perspective__lead { font-size: 1.02rem; color: var(--paper); }
.page--fashion .fashion-perspective-band__text .fashion-perspective__close span { display: block; }
@media (prefers-reduced-motion: reduce) { .page--fashion .fashion-perspective-band__arrow { transition: none; } }
.page--fashion .fashion-perspective-band__image::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--black) 0%, #05060700 14%);
}
@media (max-width: 760px) {
  .page--fashion .fashion-perspective-band { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  /* Phone (_26, _28): the copy is stacked above the photograph, so there is no panel foot to anchor to; plain block flow with a modest step
     (3rem -> 3.5rem below the heading) avoids a large blank gap, and 2.5rem beneath the action keeps it clear of the photograph. */
  .page--fashion .fashion-perspective-band__copy { display: block; align-self: auto; padding: 2.5rem var(--pad-x) 2.5rem; }
  .page--fashion .fashion-perspective-band__philosophy { margin-top: 3.5rem; }
  .page--fashion .fashion-perspective-band__image { height: min(68svh, 32rem); }
  .page--fashion .fashion-perspective-band__image img { object-position: 40% 55%; }
  .page--fashion .fashion-perspective-band__image::after { background: linear-gradient(180deg, var(--black) 0%, #05060700 16%); }
}
@media (max-width: 900px) {
  .page--fashion .fashion-treatments.fashion-treatments--split { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 2.5rem var(--pad-x) 3rem; }
  .page--fashion .fashion-treatments__portrait { flex: none; min-height: 0; height: min(62svh, 34rem); }
  .page--fashion .fashion-treatments__portrait img { object-position: 50% 18%; }
  .page--fashion .fashion-treatments__action { margin-top: 2.25rem; }
}