/* ==========================================================================
   Makeupbyroxx — preview stylesheet
   Palette: black & white, skewed toward black — near-black #0A0A0A,
   white #FFFFFF, plus two neutral greys standing in for the accent role.
   Photography (hero, portfolio, about) is deliberately NOT touched by this
   theme — real skin tone, lipstick and eyeshadow colour is what a bride is
   actually evaluating, so only the site's own chrome (backgrounds, text,
   buttons, dividers) goes monochrome. This replaced an earlier warm ivory/
   champagne/dusty-rose palette; variable NAMES below were kept as-is to
   minimise the diff, but every one now holds a grayscale value — read the
   value, not the name.

   Contrast note (recomputed for the new values): --champagne (#B3B3B3) on
   --ink measures ~9.5:1; --champagne-deep / --rose-deep (#404040, now the
   same grey) on white/--ivory measures ~10.4:1. Both comfortably clear
   WCAG AA (4.5:1) for normal text, so the light/dark split below (raw
   accent on dark backgrounds, "-deep" accent on light backgrounds) still
   applies for the same reason as before, just with grey instead of colour.
   ========================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }

:root {
  --ink: #0A0A0A;
  --ivory: #FFFFFF;
  --champagne: #B3B3B3;
  --champagne-deep: #404040;
  --rose-deep: #404040;
  --white: #FFFFFF;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --focus-color: var(--ink);
  --section-pad-y: clamp(4rem, 8vw, 7rem);
  --content-max: 1200px;

  color-scheme: light;
}

body {
  font-family: var(--font-body);
  background: var(--ivory);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 0.6em; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ivory); color: var(--ink); padding: 0.75em 1.25em;
}
.skip-link:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 3px; }

.section-inner { max-width: var(--content-max); margin: 0 auto; padding: var(--section-pad-y) 1.5rem; }
@media (min-width: 640px) { .section-inner { padding-left: 2.5rem; padding-right: 2.5rem; } }
@media (min-width: 1024px) { .section-inner { padding-left: 4rem; padding-right: 4rem; } }

.eyebrow {
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1em;
}

/* Sections on a dark ground get white body copy + the raw accent colors;
   sections on ivory get ink body copy + the "-deep" accent variants. */
.hero, .portfolio, .experience, .enquiry, .site-footer, .page-intro { background: var(--ink); color: var(--ivory); --focus-color: var(--ivory); }
.hero .eyebrow, .portfolio .eyebrow, .experience .eyebrow, .enquiry .eyebrow, .page-intro .eyebrow { color: var(--champagne); }
.about, .services, .page-content { background: var(--ivory); color: var(--ink); }
.about .eyebrow, .services .eyebrow, .page-content .eyebrow { color: var(--rose-deep); }

.cta-button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.9em 1.9em; border-radius: 999px; background: var(--ivory); color: var(--ink);
  font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em; white-space: nowrap;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.cta-button:hover { background: var(--white); transform: translateY(-1px); }
.cta-secondary {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em;
  border-bottom: 1px solid currentColor; padding-bottom: 0.2em;
}

/* ---------------------------------------------------------------------- */
/* Header                                                                  */
/* ---------------------------------------------------------------------- */
.site-header {
  /* position:fixed (not sticky) so the transparent header overlaps the
     dark hero underneath it rather than pushing the hero down — sticky
     elements still occupy their own space in normal flow until the page
     scrolls past them, which left this bar sitting on the plain ivory
     body background with invisible ivory-on-ivory text. */
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 0.75rem 0.75rem 0;
}
.header-inner {
  max-width: var(--content-max); margin: 0 auto; padding: 0.6rem 0.6rem 0.6rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  color: var(--ivory);
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.18);
  background: rgba(10, 10, 10, 0.32);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.08);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.site-header.is-scrolled .header-inner { background: rgba(10, 10, 10, 0.58); border-color: rgba(255,255,255,0.24); }
/* Floating, shrink-to-fit pill from 1200px up (matches the desktop-nav
   breakpoint below) rather than a bar stretched edge to edge. */
@media (min-width: 1200px) { .header-inner { width: fit-content; } }
/* 1200px, not the usual 1024px: measured overflow (~50px) with the full
   desktop nav + language pills + CTA all on one line right at 1024px — the
   header is fixed-position, so that overflow clipped content silently
   instead of showing up as document-level horizontal scroll. Below this,
   the (already-fixed-width-safe) mobile hamburger menu keeps handling
   navigation, including through the 1024px breakpoint the brief tests. */
.brand { font-family: var(--font-display); font-size: clamp(0.95rem, 4vw, 1.15rem); font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; flex-shrink: 0; }

.header-right { display: flex; align-items: center; gap: 1rem; }

/* Desktop inline nav: hidden on mobile, shown from 1024px. A compound
   selector (not just ".desktop-nav") so this reliably beats the later
   same-element ".primary-nav" display:flex rule below regardless of source
   order — two equal-specificity display rules on one element resolve by
   source order, which silently left this visible on mobile until it was
   made more specific. */
.primary-nav.desktop-nav { display: none; }

.header-cta { padding: 0.7em 1.4em; font-size: 0.8rem; flex-shrink: 0; }

/* Mobile hamburger disclosure: a real <details>, closed by default, native
   toggle, zero JS required. Hidden entirely from 1024px, where the plain
   .desktop-nav above takes over. */
.nav-disclosure { position: relative; }
.nav-disclosure summary { list-style: none; cursor: pointer; display: flex; align-items: center; }
.nav-disclosure summary::-webkit-details-marker,
.nav-disclosure summary::marker { display: none; content: ''; }
.hamburger { display: inline-flex; flex-direction: column; gap: 5px; width: 22px; }
.hamburger span { display: block; height: 2px; background: currentColor; transition: transform 0.3s ease, opacity 0.3s ease; }
.nav-disclosure[open] .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-disclosure[open] .hamburger span:nth-child(2) { opacity: 0; }
.nav-disclosure[open] .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-panel {
  position: absolute; top: calc(100% + 0.75rem); right: 0; min-width: 240px;
  background: var(--ink); border: 1px solid rgba(255,255,255,0.12);
  padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem;
}
.primary-nav { display: flex; flex-direction: column; gap: 1rem; }
.primary-nav a { font-size: 0.95rem; letter-spacing: 0.02em; }
.primary-nav a:hover { color: var(--champagne); }
.primary-nav.desktop-nav { flex-direction: row; gap: 2rem; }

@media (min-width: 1200px) {
  .primary-nav.desktop-nav { display: flex; }
  .mobile-nav-only { display: none; }
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */
/* Full-bleed cinematic treatment, not the previous boxed-image-beside-copy
   split: photo fills the whole viewport behind a champagne glow orb and a
   dark vertical wash, with the copy centred on top — adapted from a
   reference video-hero component the project owner supplied for
   inspiration. There is no real hero video asset for this business (only
   the reference photography), so this stays image-based rather than
   hot-linking an unrelated stock/CDN clip. */
.hero {
  position: relative; overflow: hidden; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(6.5rem, 15vw, 9.5rem) 1.5rem 4rem; text-align: center;
}
@media (min-width: 1024px) { .hero { padding-left: 4rem; padding-right: 4rem; } }

.hero-bg { position: absolute; inset: 0; z-index: 0; }
/*
  object-position split by breakpoint, not one fixed value, because this is
  a portrait-orientation photo (1200x1600) behind a viewport that changes
  aspect ratio drastically: on a narrow mobile viewport, cover barely crops
  the photo's height at all (the crop is mostly off the sides), so a slightly
  higher focal point keeps hair from feeling cramped against the header. On
  a wide desktop viewport, cover crops away most of the photo's height and
  keeps only a thin horizontal band — 24% keeps that band centred on her
  face (verified against the source photo: face spans roughly 11%-39% of
  the image height) instead of drifting into hairline or shoulders as the
  viewport gets wider/shorter.
*/
.hero-bg-image { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
@media (min-width: 768px) { .hero-bg-image { object-position: 50% 24%; } }
.hero-glow {
  position: absolute; top: -12%; left: 50%; transform: translate(-50%, 0);
  width: min(900px, 85vw); aspect-ratio: 1 / 1; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16); filter: blur(110px); mix-blend-mode: screen;
}
/*
  Wash stops are heavy (72-90% opaque near-black) by design, not tuned to
  one specific photo's midtones: at this opacity range the underlying image
  barely affects composited contrast, so text stays reliably legible even
  after a hero photo swap (this wash has now sat behind two very different
  source photos without needing readjustment).
*/
.hero-wash {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.88) 0%,
    rgba(10, 10, 10, 0.8) 32%,
    rgba(10, 10, 10, 0.72) 70%,
    rgba(10, 10, 10, 0.9) 100%
  );
}

/* Iris/mask reveal — a circular wipe growing from the centre, adapted from
   the mask-reveal snippet supplied for this project. Reserved for the two
   "hero" portraits (hero image on load, About's primary portrait on
   scroll) rather than every image, so it reads as a considered opening
   flourish and not a repeated gimmick. As with .reveal-ready, the
   "hidden" state is added by JS only once confirmed running (see
   initScrollReveal in js/main.js) — with JS disabled these images are
   simply shown at full size immediately, never clipped away. */
.reveal-mask.reveal-ready {
  clip-path: circle(0% at 50% 50%);
  opacity: 1; transform: none;
  transition: clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 150%, not 100%: circle() percentages resolve against the box's
   normalized diagonal, so 100% undershoots the corners of a portrait-
   ratio (non-square) box and would leave them permanently clipped. */
.reveal-mask.reveal-ready.revealed { clip-path: circle(150% at 50% 50%); }
.hero-copy { position: relative; z-index: 2; max-width: 640px; display: flex; flex-direction: column; align-items: center; }
.hero-copy h1 { font-size: clamp(2rem, 4.2vw + 1rem, 3.75rem); color: var(--white); }
.hero-subcopy { font-size: 1rem; color: rgba(255,255,255,0.85); max-width: 46ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: center; margin: 1.75rem 0; }
.trust-points { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: center; font-size: 0.8rem; letter-spacing: 0.03em; color: rgba(255,255,255,0.75); }
.trust-points li::before { content: '—'; margin-right: 0.5em; color: var(--champagne); }

/* Planted feature pins — desktop/tablet flourish only; the existing
   trust-points row already covers "quick facts" on mobile, so these
   aren't duplicated as compact chips down there (unlike the reference). */
.hero-pins { position: absolute; inset: 0; z-index: 1; display: none; pointer-events: none; }
@media (min-width: 768px) { .hero-pins { display: block; } }
.hero-pin {
  position: absolute; bottom: 9%; height: var(--pin-h);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: auto; transform-origin: bottom center;
  transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-pin-short { --pin-h: 16%; }
.hero-pin-tall { --pin-h: 30%; }
@media (max-height: 820px) {
  .hero-pin-short { --pin-h: 12%; }
  .hero-pin-tall { --pin-h: 22%; }
}
.hero-pin-chip {
  display: inline-flex; align-items: center; white-space: nowrap; border-radius: 999px;
  padding: 0.5em 1em; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ivory);
  border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.06);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.hero-pin-chip::before { content: ''; width: 5px; height: 5px; margin-right: 0.6em; background: var(--champagne); transform: rotate(45deg); flex-shrink: 0; }
.hero-pin-line { width: 1px; flex: 1; background: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0.15), transparent); }
@media (hover: hover) and (pointer: fine) {
  .hero-pin:hover { height: calc(var(--pin-h) + 14px + var(--cursor-lift, 0px)); z-index: 3; }
  .hero-pin:hover .hero-pin-chip { background: rgba(255,255,255,0.95); border-color: rgba(255,255,255,0.95); color: var(--ink); }
  .hero-pin:hover .hero-pin-chip::before { background: var(--ink); }
}

/* Cinematic entrance, staggered — added by js/main.js (initHeroMotion) via
   body.motion-ready only once confirmed running and only when the visitor
   has no reduced-motion preference, mirroring the .reveal-ready/.reveal-
   mask convention used elsewhere: every element below is fully visible,
   un-animated, in its finished position by default. */
.hero-d1 { --hero-delay: 100ms; }
.hero-d2 { --hero-delay: 260ms; }
.hero-d3 { --hero-delay: 420ms; }
.hero-d4 { --hero-delay: 580ms; }
.hero-d5 { --hero-delay: 720ms; }
.hero-d6 { --hero-delay: 840ms; }
.hero-d7 { --hero-delay: 940ms; }
.hero-d8 { --hero-delay: 1040ms; }
.hero-d9 { --hero-delay: 1140ms; }

body.motion-ready .hero-enter {
  opacity: 0;
  animation: hero-rise 1.05s cubic-bezier(0.16, 1, 0.3, 1) var(--hero-delay, 0ms) both;
}
body.motion-ready .hero-glow {
  animation:
    hero-glow-enter 1.6s cubic-bezier(0.16, 1, 0.3, 1) 200ms both,
    hero-glow-breathe 9s ease-in-out 1.9s infinite;
}
body.motion-ready .hero-pin {
  opacity: 0;
  animation:
    hero-pin-enter 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--hero-delay, 700ms) both,
    hero-pin-float 5.6s ease-in-out calc(var(--hero-delay, 700ms) + 1.3s) infinite;
}
body.motion-ready .hero-pin-line {
  transform-origin: top center;
  animation: hero-line-grow 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--hero-delay, 700ms) both;
}
body.motion-ready .hero-pin:hover { animation-play-state: running, paused; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(20px); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes hero-glow-enter {
  from { opacity: 0; transform: translate(-50%, 0) scale(0.9); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes hero-glow-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }
@keyframes hero-pin-enter {
  from { opacity: 0; transform: translateY(18px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes hero-pin-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes hero-line-grow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

/* ---------------------------------------------------------------------- */
/* About                                                                   */
/* ---------------------------------------------------------------------- */
.about-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .about-grid { grid-template-columns: 0.85fr 1fr; gap: 4.5rem; } }
.about-images { position: relative; display: flex; justify-content: center; }
.about-portrait-primary { width: min(360px, 100%); border: 1px solid rgba(10,10,10,0.1); overflow: hidden; }
.about-portrait-secondary {
  width: min(180px, 45%); position: absolute; right: -0.5rem; bottom: -1.5rem;
  border: 4px solid var(--ivory); box-shadow: 0 8px 24px rgba(10,10,10,0.18);
}
.about-copy h2 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem); }
.about-copy p { max-width: 58ch; color: rgba(10,10,10,0.8); }

/* ---------------------------------------------------------------------- */
/* Portfolio                                                               */
/* ---------------------------------------------------------------------- */
.portfolio h2 { color: var(--white); font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem); }
.portfolio-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 2.5rem; }
.filter-pill {
  padding: 0.55em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25);
  font-size: 0.78rem; letter-spacing: 0.03em; color: rgba(255,255,255,0.85);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.filter-pill:hover { border-color: var(--champagne); }
.filter-pill.is-active { background: var(--champagne); border-color: var(--champagne); color: var(--ink); }

.portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 640px) { .portfolio-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
@media (min-width: 1024px) { .portfolio-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.portfolio-item { position: relative; aspect-ratio: 600 / 866; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.portfolio-grid > :nth-child(even) { margin-top: 1.5rem; }
@media (max-width: 639px) { .portfolio-grid > :nth-child(even) { margin-top: 0; } .portfolio-grid > :nth-child(2n+1):nth-child(n+3) { margin-top: 1rem; } }
.portfolio-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.portfolio-item:hover img { transform: scale(1.04); }
.portfolio-item[hidden] { display: none; }

/* Spotlight hover glow: cursor position tracked into --x/--y by
   js/main.js (initSpotlightHover), adapted from the mouse-follow-light
   snippet supplied for this project. Desktop pointer-only in effect
   (touch never fires mousemove here) and purely decorative, so it needs
   no reduced-motion guard beyond the opacity fade already being trivial. */
.portfolio-item::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(240px circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.35), transparent 70%);
}
.portfolio-item:hover::before { opacity: 1; }

/* ---------------------------------------------------------------------- */
/* Services                                                                */
/* ---------------------------------------------------------------------- */
.services h2 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem); }
.services-primary { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 768px) {
  /* Flex, not grid, from here up: lets the hovered card claim extra width
     from its siblings (below) for a magazine-spread feel — "asymmetrical
     editorial layouts" per the brief's Section 7 — adapted from the
     expanding-panels snippet supplied for this project. */
  .services-primary { display: flex; gap: 1.5rem; }
  .service-card { flex: 1 1 0; min-width: 0; transition: flex-grow 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
  .service-card:hover { flex-grow: 1.6; }
}
.service-card {
  position: relative; overflow: hidden;
  border: 1px solid rgba(10,10,10,0.12); padding: 1.75rem; display: flex; flex-direction: column;
  background: var(--white);
}
.service-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  transition: opacity 0.3s ease;
  /* Dark tint, not white: this card sits on a white background, so a white
     glow (used on the dark portfolio grid above) would be invisible here. */
  background: radial-gradient(240px circle at var(--x, 50%) var(--y, 50%), rgba(10,10,10,0.08), transparent 70%);
}
.service-card:hover::before { opacity: 1; }
.service-card > * { position: relative; z-index: 1; }
.service-card h3 { font-size: 1.3rem; }
.service-description { color: rgba(10,10,10,0.75); font-size: 0.92rem; }
.service-meta { display: flex; justify-content: space-between; font-size: 0.85rem; letter-spacing: 0.02em; border-top: 1px solid rgba(10,10,10,0.1); padding-top: 1em; margin-bottom: 1.25em; }
.service-price { font-weight: 600; }
.service-addons-heading { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rose-deep); margin-bottom: 0.5em; }
.service-addons { font-size: 0.85rem; margin-bottom: 1em; }
.service-addons li { margin-bottom: 0.35em; }
.service-note { font-size: 0.78rem; color: rgba(10,10,10,0.55); margin-bottom: 1.25em; }
.service-cta { margin-top: auto; font-size: 0.85rem; font-weight: 600; border-bottom: 1px solid currentColor; align-self: flex-start; padding-bottom: 0.15em; }
.service-cta:hover { color: var(--rose-deep); }

.services-secondary-heading { margin-top: 3rem; font-size: 1.1rem; }
.services-secondary { border-top: 1px solid rgba(10,10,10,0.12); }
.services-secondary li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem;
  padding: 1.1em 0; border-bottom: 1px solid rgba(10,10,10,0.12);
}
.secondary-name { font-weight: 600; flex: 1 1 220px; }
.secondary-meta { font-size: 0.85rem; color: rgba(10,10,10,0.6); }
.secondary-cta { font-size: 0.8rem; font-weight: 600; border-bottom: 1px solid currentColor; margin-left: auto; }
.secondary-cta:hover { color: var(--rose-deep); }
.price-note { margin-top: 2rem; font-size: 0.82rem; color: rgba(10,10,10,0.6); font-style: italic; }

/* ---------------------------------------------------------------------- */
/* Experience                                                              */
/* ---------------------------------------------------------------------- */
.experience h2 { color: var(--white); font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem); }
.experience-steps { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
@media (min-width: 768px) { .experience-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .experience-steps { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
.experience-steps li { border-top: 1px solid rgba(255,255,255,0.18); padding-top: 1.25rem; }
.step-number { font-family: var(--font-display); font-size: 1.6rem; color: var(--champagne); display: block; margin-bottom: 0.5em; }
.experience-steps h3 { color: var(--white); font-size: 1.15rem; }
.experience-steps p { color: rgba(255,255,255,0.75); font-size: 0.9rem; }

/* ---------------------------------------------------------------------- */
/* Dot list — reused by Terms clause sub-lists and every Prep List category */
/* ---------------------------------------------------------------------- */
.dot-list { margin-top: 0.75em; display: grid; gap: 0.6em; }
.dot-list li { font-size: 0.9rem; color: rgba(10,10,10,0.78); padding-left: 1.2em; position: relative; max-width: 66ch; }
.dot-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; background: var(--rose-deep); }

/* ---------------------------------------------------------------------- */
/* Enquiry form                                                            */
/* ---------------------------------------------------------------------- */
.enquiry h2 { color: var(--white); font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem); }
.form-intro { color: rgba(255,255,255,0.8); max-width: 60ch; }
#enquiryForm { display: grid; gap: 1.25rem; margin-top: 2rem; max-width: 760px; }
@media (min-width: 640px) { #enquiryForm { grid-template-columns: repeat(2, 1fr); } }
.form-row { display: flex; flex-direction: column; gap: 0.5em; }
.form-row-full { grid-column: 1 / -1; }
.form-row label { font-size: 0.8rem; letter-spacing: 0.03em; color: rgba(255,255,255,0.85); }
.form-row input, .form-row select, .form-row textarea {
  background: var(--ivory); color: var(--ink); border: 1px solid transparent;
  padding: 0.75em 0.9em; font-size: 0.92rem;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--champagne); }
.form-row textarea { resize: vertical; }
.form-submit { grid-column: 1 / -1; justify-self: start; margin-top: 0.5rem; }
.form-disclaimer { grid-column: 1 / -1; font-size: 0.82rem; color: rgba(255,255,255,0.7); max-width: 60ch; margin-top: -0.5rem; }
.form-fallback { grid-column: 1 / -1; font-size: 0.85rem; color: rgba(255,255,255,0.8); margin: 0; display: flex; flex-wrap: wrap; gap: 0.4em; }
.form-fallback a { text-decoration: underline; text-underline-offset: 3px; }
.form-fallback a:hover { color: var(--champagne); }

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */
.footer-inner { display: grid; gap: 2.5rem; padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 768px) { .footer-inner { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.footer-name { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 0.4em; }
.footer-descriptor { color: rgba(255,255,255,0.7); max-width: 40ch; }
.footer-brand a { display: inline-block; margin-right: 1.25rem; font-size: 0.9rem; color: rgba(255,255,255,0.85); }
.footer-brand a:hover { color: var(--champagne); }
.footer-social { margin-top: 0.75rem; display: flex; gap: 1.25rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-content: start; }
.footer-links a { font-size: 0.85rem; letter-spacing: 0.02em; color: rgba(255,255,255,0.8); }
.footer-links a:hover { color: var(--champagne); }
.footer-copyright { grid-column: 1 / -1; font-size: 0.78rem; letter-spacing: 0.02em; color: rgba(255,255,255,0.55); border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.5rem; }

/* ---------------------------------------------------------------------- */
/* Static pages — masterclass.html, prep-list.html, terms.html             */
/* Each is a real, separate .html document (not a same-page panel), so no  */
/* fixed/:target overlay mechanics are needed here — just normal document  */
/* flow reusing .page-intro (dark title band, plugged into the existing   */
/* dark-section selectors above) and .page-content (light body, plugged    */
/* into the existing light-section selectors above).                       */
/* ---------------------------------------------------------------------- */
.page-intro { padding-top: clamp(7rem, 16vw, 10rem); padding-bottom: 3rem; text-align: center; }
.page-intro h1 { font-size: clamp(1.9rem, 3vw + 1rem, 2.75rem); color: var(--white); }
.page-intro .page-lede { max-width: 60ch; margin: 0 auto; color: rgba(255,255,255,0.85); }

.legal-content h2 { font-size: clamp(1.5rem, 2vw + 1rem, 1.9rem); margin-top: 2em; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { font-size: 0.92rem; color: rgba(10,10,10,0.8); max-width: 68ch; }
.legal-content .dot-list { margin-bottom: 1.25em; }
.legal-note { margin-top: 3rem; padding: 1.25rem 1.5rem; border: 1px solid rgba(10,10,10,0.15); font-size: 0.85rem; font-style: italic; color: rgba(10,10,10,0.7); }

.prep-category { margin-bottom: 2.5rem; }
.prep-category:last-child { margin-bottom: 0; }
.prep-category h2 { font-size: 1.25rem; }

/* ---------------------------------------------------------------------- */
/* Masterclass page — reuses .service-card / .services-primary / .dot-list */
/* from Services and Terms above rather than inventing new card styles.    */
/* ---------------------------------------------------------------------- */
.pain-points { margin: 1em 0; display: grid; gap: 0.5em; }
.pain-points li { font-style: italic; color: rgba(10,10,10,0.7); }
.masterclass-standout { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; margin: 1em 0 0.4em; }

.section-subheading { font-size: clamp(1.4rem, 2vw + 1rem, 1.9rem); margin: 3rem 0 0.5em; }
.section-subheading:first-of-type { margin-top: 3.5rem; }

/* Grid, not .services-primary's flex-grow-on-hover layout: that pattern
   suits exactly 3 cards competing for width, but reads cramped with 6. */
.learn-grid { display: grid; gap: 1.5rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .learn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .learn-grid { grid-template-columns: repeat(3, 1fr); } }
.learn-grid .service-card h3 { font-size: 1.1rem; }

.reassurance { max-width: 68ch; margin: 3rem 0; }
.reassurance p { color: rgba(10,10,10,0.8); }

.payment-note { max-width: 62ch; margin: 3rem 0; padding: 1.5rem; border: 1px solid rgba(10,10,10,0.15); }
.payment-note-heading { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5em; }

.masterclass-closing { margin: 3.5rem 0 2.5rem; text-align: center; }
.masterclass-closing h2 { font-size: clamp(1.5rem, 2.2vw + 1rem, 2.1rem); }
.masterclass-closing p { max-width: 52ch; margin: 0 auto; color: rgba(10,10,10,0.75); }

#masterclassForm { display: grid; gap: 1.25rem; margin-top: 1rem; max-width: 480px; }
/* .form-row/.form-row input etc. (defined under Enquiry form, above) were
   authored for a DARK parent section (ivory-on-ink), so their invisible
   border and near-white label colour disappear entirely on this page's
   light .page-content background. Re-darken just the two colours that
   assumed a dark parent; everything else about the form styling still
   applies unchanged. */
.page-content .form-row label { color: rgba(10,10,10,0.7); }
.page-content .form-row input, .page-content .form-row select, .page-content .form-row textarea {
  background: var(--white); border-color: rgba(10,10,10,0.18);
}
.page-content .form-disclaimer, .page-content .form-fallback { color: rgba(10,10,10,0.65); }

/* Current-page nav indication, shared by the primary nav and footer links
   on every page (each page hardcodes aria-current="page" on its own link,
   since there is no routing layer to detect this automatically). */
.primary-nav a[aria-current="page"], .footer-links a[aria-current="page"] {
  text-decoration: underline; text-underline-offset: 4px;
}

/* ---------------------------------------------------------------------- */
/* Lightbox                                                                */
/* ---------------------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 150; background: rgba(10,10,10,0.96);
  display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox-image { max-width: min(90vw, 640px); max-height: 82vh; object-fit: contain; border: 1px solid rgba(255,255,255,0.15); }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; color: var(--ivory); font-size: 1.5rem;
  width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center;
}
.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); font-size: 2rem; }
.lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); font-size: 2rem; }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { color: var(--champagne); }
.lightbox-counter { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); font-size: 0.8rem; color: rgba(255,255,255,0.7); }

/* ---------------------------------------------------------------------- */
/* Scroll-reveal — progressive enhancement only.                          */
/* Elements are fully visible by default; js/main.js adds "reveal-ready"  */
/* (only once JS confirms it is running) and then "revealed" on scroll    */
/* into view. Content is never hidden when JavaScript is unavailable.     */
/* ---------------------------------------------------------------------- */
.reveal-ready { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-ready.revealed { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal-ready { opacity: 1; transform: none; }
  .reveal-mask.reveal-ready { clip-path: none; }
  .hero-enter, .hero-pin { opacity: 1 !important; transform: none !important; filter: none !important; }
}

html { scroll-behavior: smooth; }
:target { scroll-margin-top: 5.5rem; }