/*! Meridian — (c) 2026 With Love Creative. All rights reserved. */
/* ==========================================================================
   MERIDIAN — Design System
   A fine-art photography theme. Shared verbatim between the standalone
   PHP build and the WordPress theme so both render identically.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   Palette is "limestone + ink + eucalypt": a cool-leaning pale ground so
   warm-toned photography sits forward off the page, a blue-black ink (never
   brown-black, which muddies against skin tones), and a single desaturated
   eucalypt accent used only for interaction states.
   -------------------------------------------------------------------------- */
:root {
  /* Ground */
  --paper:        #F7F6F3;
  --paper-mist:   #EDEAE4;
  --paper-deep:   #E2DED6;

  /* Ink */
  --ink:          #16171A;
  --ink-soft:     #5C5F63;
  --ink-faint:    #9A9C9E;
  --hairline:     #D6D2CA;

  /* Accent — eucalypt */
  --accent:       #6E7A63;
  --accent-deep:  #55604B;
  --accent-pale:  #C9CFC2;

  /* Premium accent — brass. Used sparingly and only as a finishing touch:
     the eyebrow rule, the wordmark's mark, dividers, numerals. It is not a
     second primary colour, so no component should lean on it for its main
     identity — that would fight the restraint the rest of the palette is
     built on. */
  --gold:         #B08D57;
  --gold-deep:    #8C6D3F;
  --gold-pale:    #E6D9BE;

  /* Scheme 2 — the contrasting surface used by dark sections, the footer and
     the featured pricing tier. Kept as its own token set rather than assumed
     to be "white on black", so a style kit can invert it (a bone panel on a
     charcoal ground) without any rule needing to change. */
  --dark:         #16171A;
  --dark-soft:    #202226;
  --on-dark:      #F7F6F3;   /* primary text on scheme 2   */
  --on-dark-soft: #B9BBBE;   /* secondary text on scheme 2 */
  --on-dark-line: rgba(255,255,255,0.16);  /* rules and borders  */
  --on-dark-mute: rgba(255,255,255,0.40);  /* ghost button edges */

  /* Type */
  --display: "Fraunces", "Georgia", "Times New Roman", serif;
  --body:    "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Type scale — fluid, 1.25 minor-third at small sizes opening to 1.333 */
  --t-xs:   0.6875rem;                                  /* 11px  labels    */
  --t-sm:   0.8125rem;                                  /* 13px  captions  */
  --t-base: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);  /* body            */
  --t-lg:   clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);   /* lead            */
  --t-xl:   clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);      /* section head    */
  --t-2xl:  clamp(2.2rem, 1.6rem + 2.8vw, 4rem);        /* page head       */
  --t-3xl:  clamp(2.8rem, 1.7rem + 5.2vw, 6.5rem);      /* hero            */

  /* Tracking — wide letterspacing on uppercase utility text is the
     structural signature of editorial photography layouts */
  --track-label: 0.24em;
  --track-nav:   0.16em;

  /* The navigation face. Deliberately outside the kit system: see .nav__link.
     A widely-available grotesque so it renders identically before webfonts
     load, which also removes the menu reflowing on first paint. */
  --nav-face: "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --track-lead:  0.01em;

  /* Rhythm */
  --gut:      clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --section:  clamp(4.5rem, 3rem + 7vw, 10rem);
  --maxw:     1680px;
  --measure:  62ch;

  /* Motion */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur:       0.6s;
  --dur-slow:  1.1s;

  /* Elevation — warm-tinted, never pure black */
  --shadow-sm: 0 2px 10px rgba(22, 23, 26, 0.06);
  --shadow-md: 0 14px 40px rgba(22, 23, 26, 0.10);
  --shadow-lg: 0 24px 70px rgba(22, 23, 26, 0.16);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: var(--track-lead);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul, ol { list-style: none; padding: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

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

::selection { background: var(--accent-pale); color: var(--ink); }

.skip-link {
  position: absolute; top: -100%; left: 1rem; z-index: 999;
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1.25rem; font-size: var(--t-xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
}
.skip-link:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   Fraunces is set at a low optical size with soft terminals and minimal
   "wonk" — it keeps the warmth of a bookface without the theatrics of a
   high-contrast didone, which would compete with the photographs.
   -------------------------------------------------------------------------- */
.display, h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--display);
  font-weight: 300;
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 84;
  line-height: 1.06;
  letter-spacing: -0.018em;
  font-optical-sizing: auto;
}

.h-hero   { font-size: var(--t-3xl); line-height: 0.98; letter-spacing: -0.03em; }
.h-page   { font-size: var(--t-2xl); }
.h-sect   { font-size: var(--t-xl);  line-height: 1.12; }
.h-card   { font-size: var(--t-lg);  line-height: 1.2; letter-spacing: -0.01em; }

.italic { font-style: italic; font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 84; }

/* Utility label — the small wide-tracked uppercase mark used for eyebrows,
   nav, captions and metadata. Does the structural signposting. */
.label {
  font-family: var(--body);
  font-size: var(--t-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  line-height: 1;
  color: var(--ink-soft);
}
.label--accent { color: var(--accent); }

/* Labels sitting over a photograph or a dark panel inherit their parent's
   colour instead of the ink default. Without this the hero counter renders
   dark grey on a dark scrim — 3.35:1, which fails AA for small text. */
.hero .label,
.b-statement .label,
.hero__count .label,
.demobar .label { color: inherit; }

/* A muted variant that is still legible. Replaces inline opacity, which
   compounded against the background and dropped this to 2.34:1. */
.label--muted { color: var(--ink-soft); opacity: 1; }
.section--dark .label--muted,
.b-tier--feature .label--muted { color: var(--on-dark-soft); }
.label--index  { font-variant-numeric: tabular-nums; }

.lead {
  font-size: var(--t-lg);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.35em; }
.prose h2 { font-size: var(--t-xl); margin: 2.2em 0 0.6em; }
.prose h3 { font-size: var(--t-lg); margin: 1.8em 0 0.5em; }
.prose a  { border-bottom: 1px solid var(--hairline); }
.prose a:hover { color: var(--accent); border-color: var(--accent); }
.prose blockquote {
  margin: 2em 0; padding-left: 1.5rem;
  border-left: 1px solid var(--accent);
  font-family: var(--display); font-size: var(--t-lg);
  font-style: italic; color: var(--ink);
}
.prose img { margin: 2.5em 0; }
.prose ul, .prose ol { margin: 1.35em 0; padding-left: 1.2rem; }
.prose ul li { list-style: none; position: relative; padding-left: 1rem; margin-bottom: 0.5em; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: 0.75em;
  width: 12px; height: 1px; background: var(--accent);
}
.prose ol { list-style: decimal; }
.prose ol li { margin-bottom: 0.5em; padding-left: 0.35rem; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.6rem + 3vw, 4.5rem);
}
.wrap--narrow { max-width: 1080px; }
.wrap--text   { max-width: 780px; }
.bleed { width: 100%; }

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.55); }
.section--flush-top { padding-top: 0; }
.section--dark {
  background: var(--dark);
  color: var(--paper);
}
.section--dark .label { color: var(--accent-pale); }
.section--dark .lead  { color: var(--on-dark-soft); }
.section--mist { background: var(--paper-mist); }

.rule { height: 1px; background: var(--hairline); border: 0; }
.section--dark .rule { background: var(--on-dark-line); }

/* Section header: eyebrow + title, separated by a hairline that runs to the
   page edge. The rule length encodes hierarchy, not decoration. */
.sect-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.sect-head__eyebrow {
  display: flex; align-items: center; gap: 1rem;
}
.sect-head__eyebrow::after {
  content: ""; flex: 1; height: 1px; background: linear-gradient(to right, var(--gold-pale), var(--hairline) 70%);
}
.section--dark .sect-head__eyebrow::after { background: linear-gradient(to right, rgba(176,141,87,0.45), var(--on-dark-line) 70%); }

/* Centred headings get a short symmetrical tick either side rather than a rule
   running off to one edge, which reads as a mistake. */
.u-center .sect-head__eyebrow { justify-content: center; }
.u-center .sect-head__eyebrow::before,
.u-center .sect-head__eyebrow::after {
  content: ""; height: 1px; background: var(--hairline);
  flex: 0 0 clamp(26px, 5vw, 58px);
}
.section--dark.u-center .sect-head__eyebrow::before,
.u-center .section--dark .sect-head__eyebrow::before { background: var(--on-dark-line); }
.sect-head__title { max-width: 22ch; }
.sect-head__body  { max-width: var(--measure); }

@media (min-width: 900px) {
  .sect-head--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 3rem 4rem;
    align-items: end;
  }
  .sect-head--split .sect-head__eyebrow { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   5. SIGNATURE — THE MERIDIAN RAIL
   A fixed hairline down the left edge carrying the current section name
   rotated to the vertical, plus a progress tick that tracks scroll depth.
   It is wayfinding, not ornament: it answers "where am I" continuously.
   Hidden below 1100px where the viewport can't spare the column.
   -------------------------------------------------------------------------- */

@media (min-width: 1100px) {
}

/* --------------------------------------------------------------------------
   6. HEADER + NAV
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1rem, 0.7rem + 0.9vw, 1.6rem) clamp(1.25rem, 0.6rem + 3vw, 4.5rem);
  max-width: var(--maxw);
  margin-inline: auto;
}

/* Over the hero the header is transparent with light type; once scrolled it
   solidifies to paper. */
.site-header--over { color: var(--paper); }
.site-header--solid {
  background: rgba(247, 246, 243, 0.92);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--hairline);
  color: var(--ink);
}
.site-header--hidden { transform: translateY(-101%); }

.brand {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.brand__mark { display: block; max-height: 34px; width: auto; }

/* An uploaded logo. Capped by height rather than width, because the header
   row's height is the constraint that matters and logos arrive at every
   aspect ratio there is — a width cap would let a tall one push the header
   open. 64px on desktop, less on a phone where the whole bar is shorter.
   
   .brand keeps its own typography rules for the no-logo case; they simply do
   not apply to an <img>. */
.brand--mark { line-height: 0; }
.brand__img {
  display: block;
  max-height: 44px;
  width: auto;
  max-width: min(60vw, 240px);
  object-fit: contain;
  object-position: left center;
}
@media (min-width: 900px) {
  .brand__img { max-height: 64px; }
}

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: clamp(1.25rem, 0.4rem + 1.6vw, 2.5rem); }
/* Navigation text is chrome, not content, and it is pinned.

   The menu is anchored to the right edge, so its total width decides where
   *every* item sits. Left to the kit, that width was set by eight different
   body typefaces and a per-kit letter-spacing ranging from 0.08em to 0.2em —
   so previewing kits made the whole menu slide back and forth by fifty-odd
   pixels, which reads as the page being unstable rather than as a design
   choice.

   Fixed face, fixed size, fixed tracking means the same words measure the
   same in every kit, so nothing moves. The kit still governs the header's
   colour, and every typeface below the header is untouched — this is the one
   element where consistency is worth more than character. */
.nav__link {
  font-family: var(--nav-face);
  font-size: 0.6875rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-feature-settings: "kern" 1;
  position: relative;
  padding-block: 0.35rem;
  white-space: nowrap;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.nav__cta {
  font-family: var(--nav-face);
  font-size: 0.6875rem; text-transform: uppercase;
  letter-spacing: 0.16em;
  border: 1px solid currentColor;
  padding: 0.7rem 1.35rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__cta:hover { background: currentColor; }
.site-header--over .nav__cta:hover { color: var(--ink); }
.site-header--solid .nav__cta:hover { color: var(--paper); }

@media (min-width: 1000px) {
  .nav { display: block; }
  /* The burger has no job on desktop where the full menu is visible — showing
     both is the classic "two navigations" mistake.

     This is unconditional. It previously carried an exception for the
     `minimal` header, which hid the full nav and used the burger as its only
     navigation. That layout has been removed (see Kits::layoutOptions), so
     every remaining header keeps its menu visible at desktop width and the
     burger is strictly a mobile control. If a `minimal`-style layout is ever
     reintroduced, it needs its own answer for desktop navigation rather than
     an exception here. */
  .nav-toggle { display: none !important; }
}

/* Burger */
.nav-toggle {
  display: flex; flex-direction: column; justify-content: center;
  gap: 5px; width: 30px; height: 30px; position: relative; z-index: 410;
}
.nav-toggle span {
  display: block; width: 100%; height: 1px; background: currentColor;
  transition: transform var(--dur) var(--ease), opacity 0.25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  /* Above the demo bar, which sits at 300.
  
     The bar is a notice about the demo; the menu is the visitor navigating
     it. While the menu is open it should be the only thing on screen —
     covering the bar rather than leaving a black band across the top of an
     otherwise full-page menu, which reads as the menu failing to open
     properly. The bar comes back the moment the menu closes. */
  position: fixed; inset: 0; z-index: 400;
  background: var(--paper);
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 6rem clamp(1.5rem, 6vw, 4rem) 3rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.75s var(--ease-out);
  visibility: hidden;
}
.drawer.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
/* The drawer's own close. Sits top-right, clear of the header's burger so the
   two are never mistaken for each other, and inside the safe area on phones
   with a notch. */
.drawer__close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + clamp(1rem, 3vw, 1.75rem));
  right: clamp(1rem, 4vw, 2.5rem);
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: none; border: 0; padding: 0.5rem;
  /* A 44px target — smaller is genuinely hard to hit one-handed. */
  min-width: 44px; min-height: 44px;
  /* The drawer sits on --paper, so this takes ink — not the on-dark tokens,
     which would render it invisible against a light panel. */
  color: var(--ink); cursor: pointer; font: inherit;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.3s 0.15s, transform 0.3s 0.15s var(--ease-out), color 0.2s;
}
.drawer.is-open .drawer__close { opacity: 0.7; transform: none; }
.drawer__close:hover,
.drawer__close:focus-visible { opacity: 1; color: var(--accent-deep); }
.drawer__close .label { letter-spacing: var(--track-label); }

@media (max-width: 420px) {
  /* Below this the label crowds the panel; the cross is unambiguous alone. */
  .drawer__close .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
}

.drawer__list { display: flex; flex-direction: column; gap: 0.35rem; }
.drawer__link {
  font-family: var(--display);
  font-size: clamp(2rem, 1.2rem + 4.5vw, 3.5rem);
  font-weight: 300; line-height: 1.15;
  display: block; padding-block: 0.15em;
  opacity: 0; transform: translateY(18px);
}
.drawer.is-open .drawer__link {
  animation: rise 0.7s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 60ms + 180ms);
}
.drawer__link:hover { color: var(--accent); font-style: italic; }
.drawer__meta { margin-top: 3rem; display: grid; gap: 0.5rem; }

@keyframes rise { to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--dark);
  isolation: isolate;
}
.hero--short { min-height: 68svh; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide picture { display: block; width: 100%; height: 100%; }
.hero__slide img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  animation: drift 14s linear infinite alternate;
}
@keyframes drift { to { transform: scale(1.14); } }

.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(10,11,13,0.62) 0%, rgba(10,11,13,0.12) 42%, rgba(10,11,13,0.30) 100%);
}
.hero__inner {
  position: relative;
  color: var(--paper);
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
  width: 100%;
}
.hero__eyebrow { color: rgba(255,255,255,0.72); margin-bottom: 1.5rem; }
.hero__title { max-width: 18ch; }
.hero__title .italic { color: var(--accent-pale); }
.hero__foot {
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
  display: flex; flex-wrap: wrap; gap: 1.5rem 3rem;
  align-items: center; justify-content: space-between;
}

/* Scroll cue */
.scroll-cue {
  display: inline-flex; align-items: center; gap: 0.9rem;
  color: rgba(255,255,255,0.8);
}
.scroll-cue__line {
  display: block; width: 54px; height: 1px; background: currentColor;
  position: relative; overflow: hidden;
}
.scroll-cue__line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--accent-pale);
  animation: sweep 2.4s var(--ease) infinite;
}
@keyframes sweep {
  0%   { transform: translateX(-100%); }
  60%,100% { transform: translateX(100%); }
}

/* Hero slide counter */
.hero__count { display: flex; gap: 0.5rem; align-items: center; color: rgba(255,255,255,0.8); }
.hero__dots { display: flex; gap: 0.4rem; }
.hero__dot {
  width: 22px; height: 1px; background: rgba(255,255,255,0.35);
  transition: background var(--dur) var(--ease);
}
.hero__dot.is-active { background: #fff; }

/* --------------------------------------------------------------------------
   8. FIGURES + REVEAL
   The curtain wipe originates from the leading edge, tying the reveal motion to
   the signature element rather than being a generic fade-up.
   -------------------------------------------------------------------------- */
.fig { position: relative; overflow: hidden; background: var(--paper-mist); }
/* <picture> is a wrapper, not a box.
   
   The reset above gives every picture height:auto, and .fig img asks for
   height:100% — a percentage that resolves against its parent, which is the
   <picture>. With that parent auto-height there is nothing to be 100% of, so
   the browser falls back to the image's natural height: the photograph sits
   at the top of the frame at its own aspect ratio, and the rest of the
   4:5 box shows as background. It looks exactly like object-fit:contain,
   which is why it read as the fit setting misbehaving.
   
   display:contents removes the picture from the layout entirely, so the img
   becomes a direct child of .fig and its percentage height has the
   aspect-ratio box to measure against. Every image in a fixed-ratio frame
   depended on this and it was never there. */
.fig picture { display: contents; }

.fig img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.fig--ratio-3-4  { aspect-ratio: 3 / 4; }
.fig--ratio-4-5  { aspect-ratio: 4 / 5; }
.fig--ratio-1-1  { aspect-ratio: 1 / 1; }
.fig--ratio-3-2  { aspect-ratio: 3 / 2; }
.fig--ratio-16-9 { aspect-ratio: 16 / 9; }
.fig--ratio-2-3  { aspect-ratio: 2 / 3; }
a.fig:hover img, .fig-link:hover .fig img { transform: scale(1.045); }

.fig__cap {
  margin-top: 0.9rem;
  display: flex; gap: 1rem; justify-content: space-between; align-items: baseline;
}

/* Reveal.

   The curtain wipe is applied to the children rather than to the observed
   element itself. An element clipped to zero area reports an intersection
   ratio of zero, so observing a fully-clipped element deadlocks: it can never
   be revealed because it is hidden, and it is hidden until it is revealed.
   Opacity is safe to set on the element — it does not affect intersection —
   so the fade stays here and only the clip moves down a level. */
.js [data-reveal]:not([data-reveal="up"]) {
  opacity: 0;
  transition: opacity 0.5s linear;
}
[data-reveal]:not([data-reveal="up"]).is-in { opacity: 1; }

.js [data-reveal]:not([data-reveal="up"]) > * {
  --wipe: 100%;
  clip-path: inset(0 0 0 var(--wipe));
  transition: clip-path 1.05s var(--ease-out);
}
[data-reveal]:not([data-reveal="up"]).is-in > * { clip-path: inset(0 0 0 0); }

.js [data-reveal="up"] {
  clip-path: none; opacity: 0; transform: translateY(26px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}
[data-reveal="up"].is-in { opacity: 1; transform: none; }

[data-reveal-delay="1"], [data-reveal-delay="1"] > * { transition-delay: 0.09s; }
[data-reveal-delay="2"], [data-reveal-delay="2"] > * { transition-delay: 0.18s; }
[data-reveal-delay="3"], [data-reveal-delay="3"] > * { transition-delay: 0.27s; }
[data-reveal-delay="4"], [data-reveal-delay="4"] > * { transition-delay: 0.36s; }

/* Blur-up placeholder */
.fig img[data-lazy] { filter: blur(14px); transform: scale(1.03); }
.fig img.is-loaded  { filter: none; }

/* --------------------------------------------------------------------------
   9. BLOCKS — the flex layout primitives shared by both builds
   -------------------------------------------------------------------------- */

/* 9a. Offset pair — asymmetric two-up where the second image drops below the
   first. The offset is the whole point; do not "fix" it to align. */
.b-pair { display: grid; gap: var(--gut); }
@media (min-width: 760px) {
  .b-pair { grid-template-columns: 1.25fr 1fr; align-items: start; }
  .b-pair > :nth-child(2) { margin-top: clamp(3rem, 8vw, 9rem); }
  .b-pair--flip { grid-template-columns: 1fr 1.25fr; }
  .b-pair--flip > :nth-child(1) { margin-top: clamp(3rem, 8vw, 9rem); }
  .b-pair--flip > :nth-child(2) { margin-top: 0; }
  .b-pair--even { grid-template-columns: 1fr 1fr; }
  .b-pair--even > :nth-child(2) { margin-top: 0; }
}

/* 9b. Grid */
.b-grid { display: grid; gap: var(--gut); grid-template-columns: repeat(2, 1fr); }
.b-grid--1 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .b-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .b-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .b-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .b-grid--5 { grid-template-columns: repeat(5, 1fr); }
}

/* 9c. Mosaic — editorial 12-col arrangement */
.b-mosaic { display: grid; gap: var(--gut); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) {
  .b-mosaic { grid-template-columns: repeat(12, 1fr); align-items: center; }
  .b-mosaic > *:nth-child(1) { grid-column: 1 / 6;  }
  .b-mosaic > *:nth-child(2) { grid-column: 7 / 13; margin-top: clamp(2rem, 6vw, 6rem); }
  .b-mosaic > *:nth-child(3) { grid-column: 2 / 7;  margin-top: clamp(1rem, 3vw, 3rem); }
  .b-mosaic > *:nth-child(4) { grid-column: 8 / 12; }
}

/* 9d. Full-bleed statement image with overlaid text */
.b-statement {
  position: relative; min-height: clamp(420px, 62vh, 760px);
  display: grid; place-items: center; overflow: hidden;
  background: var(--dark); isolation: isolate;
}
.b-statement img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.b-statement::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(12,13,15,0.34);
}
.b-statement__inner { text-align: center; color: var(--paper); padding: 3rem 1.5rem; max-width: 34ch; }

/* 9e. Split — image beside text */
.b-split { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
@media (min-width: 860px) {
  .b-split { grid-template-columns: 1fr 1fr; }
  .b-split--wide-media { grid-template-columns: 1.35fr 1fr; }
  .b-split--flip > .b-split__media { order: 2; }
}
.b-split__body > * + * { margin-top: 1.25rem; }

/* 9f. Marquee — slow horizontal drift of a photo strip */
.b-marquee { overflow: hidden; position: relative; }
.b-marquee__track {
  display: flex; gap: var(--gut); width: max-content;
  animation: marquee 60s linear infinite;
}
.b-marquee:hover .b-marquee__track { animation-play-state: paused; }
.b-marquee__item { width: clamp(220px, 26vw, 420px); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* 9g. Horizontal scroll strip */
.b-strip {
  display: flex; gap: var(--gut);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1.5rem;
  scrollbar-width: thin; scrollbar-color: var(--hairline) transparent;
}
.b-strip__item { flex: none; width: clamp(260px, 34vw, 460px); scroll-snap-align: start; }
.b-strip::-webkit-scrollbar { height: 2px; }
.b-strip::-webkit-scrollbar-thumb { background: var(--hairline); }

/* 9h. Quote / testimonial */
.b-quote { text-align: center; max-width: 46rem; margin-inline: auto; }
.b-quote__text {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.4rem, 1rem + 1.7vw, 2.35rem);
  line-height: 1.32; letter-spacing: -0.015em; font-style: italic;
}
.b-quote__attr { margin-top: 2rem; }

/* Testimonial rotator */
.b-testi { position: relative; }
.b-testi__slide { display: none; }
.b-testi__slide.is-active { display: block; animation: fadeIn 0.7s var(--ease-out); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.b-testi__nav { display: flex; justify-content: center; gap: 1.5rem; align-items: center; margin-top: 2.5rem; }
.b-testi__btn { padding: 0.5rem; color: var(--ink-soft); transition: color var(--dur) var(--ease); }
.b-testi__btn:hover { color: var(--accent); }
.section--dark .b-testi__btn { color: var(--accent-pale); }

/* 9i. Numbered process — order genuinely carries meaning for a booking flow */
.b-steps { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 800px) { .b-steps { grid-template-columns: repeat(3, 1fr); } }
.b-step { border-top: 1px solid var(--hairline); padding-top: 1.5rem; }
.section--dark .b-step { border-color: var(--on-dark-line); }
.b-step__n { display: block; margin-bottom: 1rem; font-variant-numeric: tabular-nums; }
.b-step__t { margin-bottom: 0.6rem; }
.b-step__d { color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.75; }
.section--dark .b-step__d { color: var(--on-dark-soft); }

/* 9j. Investment / pricing */
.b-tiers { display: grid; gap: var(--gut); }
@media (min-width: 850px) { .b-tiers { grid-template-columns: repeat(3, 1fr); } }
.b-tier {
  border: 1px solid var(--hairline);
  padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  display: flex; flex-direction: column;
  background: var(--paper);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.b-tier:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.b-tier--feature { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.b-tier--feature:hover { box-shadow: var(--shadow-lg); }
.b-tier--feature .b-tier__list li { border-color: var(--on-dark-line); }
.b-tier--feature .label { color: var(--accent-pale); }
.b-tier__price { font-family: var(--display); font-size: var(--t-xl); margin: 1.25rem 0; font-weight: 300; }
.b-tier__list { margin: 1.5rem 0 2rem; flex: 1; }
.b-tier__list li {
  padding: 0.75rem 0; border-bottom: 1px solid var(--hairline);
  font-size: var(--t-sm); color: inherit;
}
.b-tier__list li:last-child { border-bottom: 0; }

/* 9k. Logo / press row */
.b-logos { display: flex; flex-wrap: wrap; gap: clamp(2rem, 5vw, 5rem); align-items: center; justify-content: center; }
.b-logos li { font-family: var(--display); font-size: var(--t-lg); font-weight: 300; opacity: 0.55; letter-spacing: 0.06em; }

/* 9l. Spacer + divider blocks */
.b-space { display: block; }
.b-divider { display: flex; align-items: center; gap: 1.5rem; }
.b-divider::before, .b-divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

/* --------------------------------------------------------------------------
   10. PORTFOLIO
   -------------------------------------------------------------------------- */
.pf-grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 640px) { .pf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .pf-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.pf-card { display: block; position: relative; }
.pf-card__media { overflow: hidden; background: var(--paper-mist); }
.pf-card__media img { transition: transform 1.5s var(--ease-out), filter 0.8s var(--ease); }
.pf-card:hover .pf-card__media img { transform: scale(1.05); }
.pf-card__body { margin-top: 1.1rem; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.pf-card__title { font-family: var(--display); font-size: var(--t-lg); font-weight: 300; letter-spacing: -0.01em; }
.pf-card:hover .pf-card__title { font-style: italic; }
.pf-card__meta { color: var(--ink-faint); white-space: nowrap; }

/* Filters */
.pf-filter { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; align-items: center; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.pf-filter__btn {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--ink-faint); padding-block: 0.4rem; position: relative;
  transition: color var(--dur) var(--ease);
}
.pf-filter__btn::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.pf-filter__btn:hover { color: var(--ink); }
.pf-filter__btn.is-active { color: var(--ink); }
.pf-filter__btn.is-active::after { transform: scaleX(1); }

.pf-item.is-hidden { display: none; }

/* Gallery masonry (CSS columns — no JS layout thrash) */
.gal-masonry { columns: 1; column-gap: var(--gut); }
@media (min-width: 640px)  { .gal-masonry { columns: 2; } }
@media (min-width: 1100px) { .gal-masonry--3 { columns: 3; } }
.gal-masonry > * { break-inside: avoid; margin-bottom: var(--gut); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(14,15,17,0.97);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__stage {
  max-width: min(92vw, 1400px); max-height: 84svh;
  display: grid; place-items: center;
}
.lightbox__img {
  max-width: 100%; max-height: 84svh; width: auto; height: auto;
  object-fit: contain;
  animation: lbIn 0.5s var(--ease-out);
}
@keyframes lbIn { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
.lightbox__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 1.5rem clamp(1.25rem, 4vw, 3rem);
  color: rgba(255,255,255,0.75);
}
.lightbox__close {
  position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  color: #fff; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--track-label); padding: 0.75rem;
}
.lightbox__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: #fff; padding: 1.5rem 1rem; opacity: 0.6;
  transition: opacity var(--dur) var(--ease);
}
.lightbox__arrow:hover { opacity: 1; }
.lightbox__arrow--prev { left: 0.5rem; }
.lightbox__arrow--next { right: 0.5rem; }

/* --------------------------------------------------------------------------
   11. JOURNAL
   -------------------------------------------------------------------------- */
.jr-list { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
@media (min-width: 800px) { .jr-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1250px) { .jr-list--3 { grid-template-columns: repeat(3, 1fr); } }
.jr-card__media { overflow: hidden; margin-bottom: 1.35rem; background: var(--paper-mist); }
.jr-card__media img { transition: transform 1.5s var(--ease-out); }
.jr-card:hover .jr-card__media img { transform: scale(1.05); }
.jr-card__meta { display: flex; gap: 1rem; align-items: center; margin-bottom: 0.85rem; }
.jr-card__meta::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.jr-card__title { font-family: var(--display); font-size: var(--t-lg); font-weight: 300; line-height: 1.25; }
.jr-card:hover .jr-card__title { color: var(--accent-deep); }
.jr-card__excerpt { margin-top: 0.75rem; color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.7; }

/* --------------------------------------------------------------------------
   12. FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.75rem; }
.form__row { display: grid; gap: 1.75rem; }
@media (min-width: 700px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { position: relative; display: grid; gap: 0.6rem; }
.field__label {
  font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--track-label); color: var(--ink-soft);
}
.field__req { color: var(--accent); }
.field input, .field textarea, .field select {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--hairline);
  padding: 0.75rem 0;
  font-size: var(--t-base); font-weight: 300;
  border-radius: 0;
  transition: border-color var(--dur) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-bottom-color: var(--accent);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 12px) calc(50% + 2px), calc(100% - 7px) calc(50% + 2px);
  background-size: 5px 5px; background-repeat: no-repeat;
  padding-right: 2rem;
}
.field__error { font-size: var(--t-sm); color: #A2453C; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-bottom-color: #A2453C; }

/* Honeypot */
.hp { position: absolute !important; left: -9999px; opacity: 0; height: 0; width: 0; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.85rem;
  font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--track-label);
  padding: 1.05rem 2rem;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  position: relative; overflow: hidden;
  transition: color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  cursor: pointer;
}
.btn:hover { box-shadow: var(--shadow-sm); }
.btn::before {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  transform: translateY(101%); transition: transform 0.5s var(--ease-out); z-index: -1;
}
.btn { isolation: isolate; }
.btn:hover::before { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { color: var(--paper); }
.section--dark .btn--ghost { color: var(--on-dark); border-color: var(--on-dark-mute); }

/* Text link with animated rule */
.link-line {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-label);
  padding-bottom: 0.35rem; position: relative;
}
.link-line::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform-origin: right; transform: scaleX(1);
  transition: transform 0.45s var(--ease);
}
.link-line:hover::after { transform: scaleX(0); }
.link-line__arrow { transition: transform 0.45s var(--ease); }
.link-line:hover .link-line__arrow { transform: translateX(5px); }

/* Alerts */
.alert {
  padding: 1.1rem 1.4rem; font-size: var(--t-sm);
  border-left: 2px solid var(--accent); background: var(--paper-mist);
}
.alert--error { border-color: #A2453C; }
.alert--ok { border-color: var(--accent); }

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
/* The footer takes the *second* dark tone, not the same one as .section--dark.
   A closing call-to-action is almost always the last block on a page, and when
   both used --dark the two ran together into one undifferentiated black slab
   with no edge between them. --dark-soft is derived from each kit's own panel
   colour, so the two surfaces stay distinguishable in every style — including
   the inverted ones, where "soft" is darker rather than lighter. */
.site-footer {
  background: var(--dark-soft);
  color: var(--on-dark);
  padding-block: clamp(3.5rem, 2rem + 5vw, 7rem) 2.5rem;
}

/* A visible edge where a dark section meets the footer, for kits whose two
   tones sit close together. */
.section--dark + .site-footer { border-top: 1px solid var(--on-dark-line); }
.footer__top { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
@media (min-width: 900px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__brand { font-family: var(--display); font-size: var(--t-xl); font-weight: 300; letter-spacing: 0.02em; }
.footer__tag { color: #A6A8AB; margin-top: 1rem; max-width: 34ch; font-size: var(--t-sm); line-height: 1.75; }
.footer__col-t { margin-bottom: 1.5rem; color: var(--accent-pale); }
.footer__links { display: grid; gap: 0.85rem; }
.footer__links a { font-size: var(--t-sm); color: #C4C6C8; }
.footer__links a:hover { color: var(--on-dark); }
/* The closing bar: a hairline above the credit line, nothing more. It belongs
   to the footer and should read as part of it. */
.footer__bottom {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--on-dark-line);
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem;
  justify-content: space-between; align-items: center;
  /* Still keeps clear of the back-to-top button, which is fixed bottom-right
     and was otherwise overlapping the last words of the credit line. */
  padding-right: 4rem;
}
@media (max-width: 700px) {
  .footer__bottom { padding-right: 0; padding-bottom: 4.5rem; }
}
.footer__bottom, .footer__bottom a { color: var(--on-dark-soft); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.footer__bottom a:hover { color: var(--on-dark); }

/* Newsletter inline */
.nl { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.nl input {
  flex: 1; min-width: 180px; background: transparent; border: 0;
  border-bottom: 1px solid var(--on-dark-mute); color: var(--on-dark);
  padding: 0.6rem 0; border-radius: 0;
}
.nl input:focus { outline: none; border-bottom-color: var(--accent-pale); }
.nl input::placeholder { color: #7C7E81; }

/* --------------------------------------------------------------------------
   14. UTILITIES
   -------------------------------------------------------------------------- */
.u-center { text-align: center; }
.u-center .lead, .u-center .sect-head__title { margin-inline: auto; }
.u-mt-s { margin-top: 1rem; }
.u-mt-m { margin-top: 2rem; }
.u-mt-l { margin-top: 3.5rem; }
.u-hide { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.u-stack > * + * { margin-top: 1.25rem; }

/* Page intro used on interior pages */
.page-intro { padding-top: clamp(7rem, 5rem + 6vw, 11rem); padding-bottom: clamp(2.5rem, 4vw, 4.5rem); }
.page-intro__title { margin-top: 1.5rem; max-width: 20ch; }

/* Breadcrumb */
.crumb { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.crumb a:hover { color: var(--accent); }
.crumb__sep { color: var(--ink-faint); }

/* Pagination */
.pager { display: flex; gap: 2rem; justify-content: center; align-items: center; margin-top: 4rem; }
.pager__num { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   15. ACCESSIBILITY / MOTION / PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-reveal] > * { clip-path: none !important; opacity: 1 !important; transform: none !important; }
  .hero__slide img { animation: none; transform: none; }
  .b-marquee__track { animation: none; }
}

@media print {
  .site-header, .site-footer, .lightbox, .drawer, .scroll-cue { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { min-height: auto; }
}

/* --------------------------------------------------------------------------
   16. STYLE KITS — layout personality switches

   The kit itself only supplies custom properties, so it needs no CSS here.
   These rules implement the independent switches (header, rhythm, reveal,
   labels) that sit on top of any kit. Each keys off an attribute on
   <html>, which means switching one is a single attribute change with no
   stylesheet swap and no effect on content.
   -------------------------------------------------------------------------- */

/* Display face responds to the kit's weight and style tokens */
.display, .h-hero, .h-page, .h-sect {
  font-weight: var(--display-weight, 300);
  font-style:  var(--display-style, normal);
}

/* ---- Header ---- */
[data-mrd-header="center"] .site-header__inner {
  display: grid; justify-items: center; gap: 0.9rem; text-align: center;
}
[data-mrd-header="center"] .brand { grid-row: 1; }
[data-mrd-header="center"] .nav   { grid-row: 2; }
[data-mrd-header="center"] .nav__list { justify-content: center; }
[data-mrd-header="center"] .nav-toggle { position: absolute; right: var(--gut); top: 50%; transform: translateY(-50%); }

[data-mrd-header="stacked"] .site-header__inner {
  display: grid; justify-items: start; gap: 0.7rem;
}
[data-mrd-header="stacked"] .nav__list { justify-content: flex-start; padding-left: 0; }


/* ---- Rhythm ---- */
[data-mrd-rhythm="compact"]  { --section: clamp(3rem, 2rem + 4.5vw, 6.5rem); }
[data-mrd-rhythm="generous"] { --section: clamp(6rem, 4rem + 9vw, 13rem); }

/* ---- Small labels ---- */
[data-mrd-labels="title"] .label {
  text-transform: none; letter-spacing: 0.02em; font-size: var(--t-sm);
}
[data-mrd-labels="italic"] .label {
  text-transform: none; letter-spacing: 0.01em;
  font-family: var(--display); font-style: italic; font-size: var(--t-sm);
}


/* ---- Image entrance ----
   Each style redefines what the hidden state means. The wipe keeps the clip on
   the children (see section 9) because a fully clipped element reports a zero
   intersection ratio and would never be observed as visible. */
.js[data-mrd-reveal="rise"] [data-reveal] {
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.js[data-mrd-reveal="rise"] [data-reveal].is-in { transform: none; }
.js[data-mrd-reveal="rise"] [data-reveal] > * { clip-path: none !important; }

.js[data-mrd-reveal="fade"] [data-reveal] { transition: opacity 1s linear; }
.js[data-mrd-reveal="fade"] [data-reveal] > * { clip-path: none !important; }

.js[data-mrd-reveal="none"] [data-reveal],
.js[data-mrd-reveal="none"] [data-reveal] > * {
  opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
}

/* ---- Kit-specific grace notes ----
   Small structural touches that give a kit its character beyond colour. */

/* Press sets its section heads as numbered magazine furniture. */
[data-mrd-kit="press"] .sect-head__eyebrow { color: var(--accent); }
[data-mrd-kit="press"] .b-step__n { color: var(--accent); }
[data-mrd-kit="press"] .fig { border: 1px solid var(--hairline); }

/* Atlas removes the serif italic flourish — the face has no true italic. */
[data-mrd-kit="atlas"] .italic { font-style: normal; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

/* Sable lifts photographs off the dark ground with a faint edge. */
[data-mrd-kit="sable"] .fig { box-shadow: 0 0 0 1px rgba(255,255,255,0.06); }
[data-mrd-kit="sable"] .hero__scrim { background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0.6) 100%); }

/* Linen softens the corners very slightly — the only kit that does. */
[data-mrd-kit="linen"] .fig, [data-mrd-kit="linen"] .btn, [data-mrd-kit="linen"] .b-tier { border-radius: 2px; }

/* --------------------------------------------------------------------------
   17. KIT PREVIEW BAR
   Only ever rendered for a signed-in studio account trying a kit before
   committing to it. Fixed to the foot of the window so it never obscures the
   header, and set in system type so it reads as chrome rather than as part of
   the design being evaluated.
   -------------------------------------------------------------------------- */
.kit-preview {
  position: fixed; z-index: 200; left: 50%; bottom: clamp(0.75rem, 2vw, 1.5rem);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
  max-width: min(94vw, 640px);
  padding: 0.7rem 0.95rem;
  background: #16171A; color: #F7F6F3;
  box-shadow: 0 8px 34px rgba(0,0,0,0.28);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.8125rem; line-height: 1.3;
}
.kit-preview__label {
  font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6;
}
.kit-preview__name { font-weight: 500; }
.kit-preview__mood { opacity: 0.6; font-size: 0.75rem; }
.kit-preview__actions { margin-left: auto; }
.kit-preview__apply {
  border: 0; cursor: pointer; padding: 0.5rem 0.9rem;
  background: #F7F6F3; color: #16171A; font: inherit; font-weight: 500;
}
.kit-preview__apply:hover { background: #fff; }
.kit-preview__exit { color: rgba(255,255,255,0.66); text-decoration: underline; text-underline-offset: 0.2em; }
.kit-preview__exit:hover { color: #fff; }
@media print { .kit-preview { display: none; } }

/* --------------------------------------------------------------------------
   18. FAQ / SESSIONS / GUIDE / PERSONAL INTRO
   -------------------------------------------------------------------------- */

/* ---- FAQ ---------------------------------------------------------------- */
.b-faq--aside {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .b-faq--aside { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); align-items: start; }
}
.b-faq__intro {
  color: var(--ink-soft); font-size: var(--t-lg); line-height: 1.6;
  max-width: 46ch; margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.b-faq__item { border-bottom: 1px solid var(--hairline); }
.b-faq__item:first-of-type { border-top: 1px solid var(--hairline); }

.b-faq__q {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: baseline;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) 0;
  cursor: pointer; list-style: none;
}
.b-faq__q::-webkit-details-marker { display: none; }
.b-faq__n { color: var(--accent); }
.b-faq__qt { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); line-height: 1.35; }
.b-faq__item:hover .b-faq__qt { color: var(--accent-deep); }

/* Plus that becomes a minus, drawn rather than typed so it stays optical */
.b-faq__mark { position: relative; width: 13px; height: 13px; flex: 0 0 auto; align-self: center; }
.b-faq__mark::before,
.b-faq__mark::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  background: var(--ink-faint); transition: transform 0.3s var(--ease-out), background 0.2s;
}
.b-faq__mark::before { width: 13px; height: 1px; }
.b-faq__mark::after  { width: 1px; height: 13px; }
.b-faq__item[open] .b-faq__mark::after { transform: scaleY(0); }
.b-faq__item[open] .b-faq__mark::before { background: var(--accent); }

.b-faq__a {
  padding: 0 0 clamp(1.2rem, 2.5vw, 1.9rem) calc(2ch + 1rem);
  max-width: 62ch; color: var(--ink-soft); line-height: 1.75;
}
.section--dark .b-faq__item,
.section--dark .b-faq__item:first-of-type { border-color: var(--on-dark-line); }
.section--dark .b-faq__a, .section--dark .b-faq__intro { color: var(--on-dark-soft); }
.section--dark .b-faq__mark::before, .section--dark .b-faq__mark::after { background: var(--on-dark-mute); }

/* ---- Sessions ----------------------------------------------------------- */
.b-svc {
  display: grid; gap: clamp(1.5rem, 3.5vw, 2.75rem);
  grid-template-columns: repeat(auto-fit, minmax(clamp(220px, 26vw, 300px), 1fr));
}
.b-svc__card { display: flex; flex-direction: column; }
.b-svc__media { margin-bottom: 1.25rem; }
.b-svc__body { display: flex; flex-direction: column; flex: 1; }
.b-svc__name {
  font-family: var(--display); font-weight: var(--display-weight, 300);
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem); line-height: 1.15;
}
.b-svc__dur { color: var(--accent); margin-top: 0.55rem; }
.b-svc__text {
  margin-top: 0.85rem; color: var(--ink-soft); font-size: var(--t-sm);
  line-height: 1.7; flex: 1;
}
.b-svc__price {
  margin-top: 1.1rem; font-family: var(--display);
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem); line-height: 1;
}
.b-svc__card .btn { margin-top: 1.1rem; align-self: flex-start; }
.section--dark .b-svc__text { color: var(--on-dark-soft); }

/* ---- Guide download ----------------------------------------------------- */
.b-guide {
  display: grid; gap: clamp(1.75rem, 5vw, 4rem); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .b-guide { grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr); }
}
.b-guide__body { max-width: 52ch; }
.b-guide__note { margin-top: 1rem; color: var(--ink-faint); }
.section--dark .b-guide__note { color: var(--on-dark-soft); }

/* ---- Personal intro ----------------------------------------------------- */
.b-intro {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .b-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
  .b-intro__media { order: 2; }
  .b-intro--flip .b-intro__media { order: 0; }
}
.b-intro__body { max-width: 56ch; }
.b-intro__title { margin-top: 0.6rem; }
.b-intro__tagline {
  margin-top: 1rem; font-family: var(--display); font-style: italic;
  font-size: var(--t-lg); color: var(--accent-deep); line-height: 1.4;
}
.section--dark .b-intro__tagline { color: var(--accent-pale); }

/* ---- Back to top -------------------------------------------------------- */
.to-top {
  position: fixed; right: clamp(1rem, 3vw, 2.25rem); bottom: clamp(1rem, 3vw, 2.25rem);
  /* Below the drawer on purpose: a back-to-top button floating over an open
     full-page menu is a button that does nothing anyone wants. */
  z-index: 90; width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  border: 0; cursor: pointer; opacity: 0; pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s;
}
.to-top.is-on { opacity: 0.85; pointer-events: auto; transform: none; }
.to-top:hover { opacity: 1; }
@media print { .to-top { display: none; } }

/* --------------------------------------------------------------------------
   19. TWO-LEVEL NAVIGATION
   Opens on hover for pointers and on click/focus for everything else, so it
   works on touch and by keyboard rather than hover alone.
   -------------------------------------------------------------------------- */
.nav__item { position: relative; }
.nav__link--sub {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem; color: inherit;
}
.nav__caret { transition: transform 0.22s var(--ease-out); opacity: 0.65; }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }

.nav__sub {
  position: absolute; top: calc(100% + 0.7rem); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 12rem; padding: 0.5rem 0;
  background: var(--paper); border: 1px solid var(--hairline);
  box-shadow: 0 10px 34px rgba(0,0,0,0.09);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s var(--ease-out), visibility 0.2s;
  z-index: 60;
}
.nav__item.is-open .nav__sub {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* A hover bridge, so the pointer can cross the gap without the menu closing */
.nav__item--has-sub::after {
  content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 0.8rem;
}
.nav__sublink {
  display: block; padding: 0.5rem 1.1rem;
  font-size: var(--t-xs); letter-spacing: var(--track-nav); text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap;
}
.nav__sublink:hover { color: var(--ink); background: var(--paper-mist); }

/* Over a hero the header is light, so the panel must not be */
.site-header:not(.site-header--solid) .nav__sub {
  background: rgba(20,20,22,0.92); border-color: rgba(255,255,255,0.14);
  backdrop-filter: blur(8px);
}
.site-header:not(.site-header--solid) .nav__sublink { color: rgba(255,255,255,0.78); }
.site-header:not(.site-header--solid) .nav__sublink:hover { color: #fff; background: rgba(255,255,255,0.08); }

.drawer__sub { margin: 0.4rem 0 0 1.25rem; display: grid; gap: 0.3rem; }
.drawer__sublink {
  font-size: var(--t-sm); color: var(--ink-soft);
  letter-spacing: 0.02em; text-transform: none;
}
.drawer__sublink:hover { color: var(--ink); }

/* ---- Link cards --------------------------------------------------------- */
.b-links {
  display: grid; gap: clamp(1.25rem, 3vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 24vw, 280px), 1fr));
}
.b-links__card { display: block; }
.b-links__media { overflow: hidden; }
.b-links__media .fig img { transition: transform 1.1s var(--ease-out); }
.b-links__card:hover .fig img { transform: scale(1.035); }
.b-links__body {
  margin-top: 1rem; display: grid; gap: 0.35rem; justify-items: center; text-align: center;
}
.b-links__title {
  font-family: var(--display); font-weight: var(--display-weight, 300);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1.2;
}
.b-links__sub { font-size: var(--t-sm); color: var(--ink-soft); }
.b-links__cta {
  margin-top: 0.5rem; color: var(--accent);
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.b-links__card:hover .b-links__cta { color: var(--accent-deep); }
.section--dark .b-links__sub { color: var(--on-dark-soft); }
.section--dark .b-links__cta { color: var(--accent-pale); }

/* --------------------------------------------------------------------------
   20. FILM / INSTAGRAM / RESOURCES / DATES / CAROUSEL
   -------------------------------------------------------------------------- */

/* ---- Film ---------------------------------------------------------------- */
.b-video { position: relative; overflow: hidden; background: var(--paper-deep); cursor: pointer; }
.b-video .fig { position: absolute; inset: 0; }
.b-video .fig img { width: 100%; height: 100%; object-fit: cover; }
.b-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.b-video__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(56px, 7vw, 82px); aspect-ratio: 1;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.75); border-radius: 50%;
  background: rgba(0,0,0,0.22); color: #fff; cursor: pointer;
  transition: background 0.25s, transform 0.35s var(--ease-out);
  backdrop-filter: blur(2px);
}
.b-video:hover .b-video__play { background: rgba(0,0,0,0.42); transform: translate(-50%,-50%) scale(1.06); }
.b-video.is-playing .b-video__play { display: none; }

/* ---- Instagram ----------------------------------------------------------- */
.b-ig__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.b-ig { display: grid; gap: clamp(0.3rem, 0.8vw, 0.7rem); grid-template-columns: repeat(3, 1fr); }
@media (min-width: 700px) {
  .b-ig--4 { grid-template-columns: repeat(4, 1fr); }
  .b-ig--5 { grid-template-columns: repeat(5, 1fr); }
  .b-ig--6 { grid-template-columns: repeat(6, 1fr); }
}
.b-ig__tile { overflow: hidden; }
.b-ig__tile .fig img { transition: transform 0.9s var(--ease-out), opacity 0.3s; }
.b-ig__tile a:hover .fig img { transform: scale(1.06); opacity: 0.86; }

/* ---- Resources & dates --------------------------------------------------- */
.b-res__intro { max-width: 52ch; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); color: var(--ink-soft); }
.section--dark .b-res__intro { color: var(--on-dark-soft); }

.b-res { list-style: none; }
.b-res__item {
  display: grid; gap: 0.4rem 1.25rem; align-items: baseline;
  grid-template-columns: auto 1fr;
  padding: clamp(1.1rem, 2.4vw, 1.7rem) 0;
  border-bottom: 1px solid var(--hairline);
}
.b-res__item:first-child { border-top: 1px solid var(--hairline); }
@media (min-width: 700px) { .b-res__item { grid-template-columns: auto 1fr auto; } }
.b-res__n { color: var(--accent); }
.b-res__body { display: grid; gap: 0.3rem; }
.b-res__title { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); }
.b-res__text { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.6; max-width: 56ch; }
.b-res__meta { color: var(--ink-faint); }
.b-res__cta { grid-column: 2; justify-self: start; }
@media (min-width: 700px) { .b-res__cta { grid-column: 3; align-self: center; } }
.section--dark .b-res__item, .section--dark .b-res__item:first-child { border-color: var(--on-dark-line); }
.section--dark .b-res__text { color: var(--on-dark-soft); }

.b-dates { list-style: none; }
.b-dates__row { border-bottom: 1px solid var(--hairline); }
.b-dates__row:first-child { border-top: 1px solid var(--hairline); }
.b-dates__row > *, .b-dates__link {
  display: grid; gap: 0.35rem 1.5rem; align-items: baseline;
  padding: clamp(1rem, 2.2vw, 1.5rem) 0;
}
@media (min-width: 700px) {
  .b-dates__row, .b-dates__link { grid-template-columns: 1fr auto auto; }
  .b-dates__link { display: grid; }
}
.b-dates__place {
  font-family: var(--display); font-weight: var(--display-weight, 300);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
}
.b-dates__when { color: var(--ink-soft); }
.b-dates__status { color: var(--accent); }
.b-dates__link:hover .b-dates__place { color: var(--accent-deep); }
.section--dark .b-dates__row, .section--dark .b-dates__row:first-child { border-color: var(--on-dark-line); }
.section--dark .b-dates__when { color: var(--on-dark-soft); }
.section--dark .b-dates__status { color: var(--accent-pale); }

/* ---- Card carousel ------------------------------------------------------- */
.b-carousel {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 76vw, 320px);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1rem; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
  scrollbar-width: thin;
}
@media (min-width: 900px) { .b-carousel { grid-auto-columns: clamp(280px, 28vw, 360px); } }
.b-carousel__card { scroll-snap-align: start; display: block; }
.b-carousel__media { margin-bottom: 1rem; overflow: hidden; }
.b-carousel__media .fig img { transition: transform 1s var(--ease-out); }
.b-carousel__card:hover .fig img { transform: scale(1.04); }
.b-carousel__title {
  font-family: var(--display); font-weight: var(--display-weight, 300);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); line-height: 1.2;
}
.b-carousel__text { margin-top: 0.55rem; font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.65; }
.b-carousel__cta { display: inline-block; margin-top: 0.75rem; color: var(--accent); border-bottom: 1px solid currentColor; }
.section--dark .b-carousel__text { color: var(--on-dark-soft); }

/* --------------------------------------------------------------------------
   21. DEMO BAR
   Only ever rendered on the public demo installation. Set in system type so it
   reads as chrome rather than as part of the design being evaluated, and
   pinned to the bottom so it never covers the header being demonstrated.
   -------------------------------------------------------------------------- */
/* The demo bar sits at the very top, above the site's own fixed header, and
   the page is pushed down by its height so it covers nothing.
   
   It was fixed to the bottom, where it overlapped the footer and — on a phone,
   next to the browser chrome — was easy to miss entirely. The point of it is
   to be read, and the top is where a notice belongs. */
/* In the flow, not over it.
   
   The bar was fixed, which meant everything below had to be pushed down by
   its height — and its height is not a number anyone can write down: the
   sentence wraps and the buttons drop to their own row, so on a phone it is
   three times what it is on a desktop. Every attempt to guess it left the
   site header sliced in half, with its menu button unreachable.
   
   A block at the top of the document needs no offset at all. It scrolls away
   with the page, which is the right behaviour anyway: it is a notice about
   the demo, not a toolbar, and once read it has no reason to occupy a third
   of a phone screen for the rest of the visit. */
.demobar {
  position: relative; z-index: 300;
  background: #16171A; color: #F7F6F3;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.8125rem; line-height: 1.4;
}
.demobar__in {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  width: min(100% - 2rem, 1400px); margin-inline: auto; padding: 0.7rem 0;
}
.demobar__tag {
  font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase;
  background: #6E7A63; color: #fff; padding: 0.25rem 0.55rem; flex: 0 0 auto;
}
.demobar__text { margin: 0; flex: 1 1 260px; color: rgba(255,255,255,0.86); }
.demobar__text strong { color: #fff; font-weight: 500; }
.demobar__acts { display: flex; align-items: center; gap: 0.85rem; flex: 0 0 auto; }
.demobar__btn {
  background: #F7F6F3; color: #16171A; padding: 0.5rem 0.95rem;
  font-weight: 500; white-space: nowrap;
}
.demobar__btn:hover { background: #fff; }
.demobar__link {
  background: none; border: 0; cursor: pointer; font: inherit; padding: 0;
  color: rgba(255,255,255,0.7); text-decoration: underline; text-underline-offset: 0.2em;
  white-space: nowrap;
}
.demobar__link:hover { color: #fff; }

/* No padding-bottom here.
   
   There used to be 4.5rem of it — 7rem on a phone — reserving room at the
   foot of every page for a bar that was fixed to the bottom. The bar moved to
   the top and the reservation stayed, so every demo page ended in a band of
   empty white above the footer, on the exact screens where it was widest.
   
   The offset the bar needs now is padding-*top*, and it is set further down
   alongside the :has() rules that measure the bar's real height, rather than
   here where it would be a second place to keep the number in step. */
@media print { .demobar { display: none; } }

/* --------------------------------------------------------------------------
   22. WORDPRESS ADMIN BAR
   The admin bar is position:fixed at the top of the viewport, and a sticky
   site header at top:0 slides underneath it — so the studio name and the
   first row of navigation are hidden from the only people who are logged in:
   the site owner and anyone they show it to.

   WordPress sets .admin-bar on <body> when the bar is present, and the bar is
   32px on desktop and 46px on mobile (it switches at 782px, not at any of our
   breakpoints, so these two rules must key off that width).
   -------------------------------------------------------------------------- */
body.admin-bar .site-header { top: 32px; }
body.admin-bar .drawer      { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
  body.admin-bar .drawer      { top: 46px; }
}

/* The bar becomes non-fixed under 600px, so the offset has to come off again
   or the header floats away from the top of the page. */
@media screen and (max-width: 600px) {
  body.admin-bar .site-header { top: 0; }
  body.admin-bar .drawer      { top: 0; }
}

/* A full-height hero measured in vh does not know about the bar either. */
body.admin-bar .hero--full { min-height: calc(100svh - 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .hero--full { min-height: calc(100svh - 46px); }
}

/* --------------------------------------------------------------------------
   23. MOBILE OVERFLOW
   Long unbroken words — a domain, an email address, a hashtag — push a block
   wider than the viewport, and once one element overflows the whole page
   scrolls sideways. These rules stop that at the source rather than hiding it
   with overflow-x: hidden, which would also clip legitimate content.
   -------------------------------------------------------------------------- */
html, body { overflow-x: clip; }

/* Anything that carries arbitrary text can break mid-word if it has to. */
.lead, .prose, .prose p, .prose li,
.b-res__text, .b-carousel__text, .b-links__sub,
.footer__tag, .footer__bottom, .b-svc__text,
.b-faq__a, .b-guide__body, .b-intro__body,
.b-quote__text, .b-tier__summary {
  overflow-wrap: anywhere;
}

/* Long links and code are the usual culprits. */
.prose a, .prose code, .b-res__cta, .footer__links a { word-break: break-word; }

/* Headlines break only as a last resort — hyphenating a display serif mid-word
   looks worse than a slightly narrow line, so they get the gentler rule. */
.h-hero, .h-sect, .display, .hero__title,
.b-statement__t, .b-intro__title { overflow-wrap: break-word; }

@media (max-width: 600px) {
  /* Wide-tracked uppercase labels are the most common overflow: the letter
     spacing multiplies with the character count and no wrapping is possible
     inside a single word. */
  .label, .eyebrow { letter-spacing: 0.12em; }
  .footer__bottom { flex-direction: column; align-items: flex-start; text-align: left; }
  .footer__bottom span { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   PREMIUM FINISHING
   Small editorial touches applied once here so they land identically on the
   standalone build, the WordPress theme and every style kit. Each is a
   default a kit can override rather than a fixed decoration — the kits set
   colour and type, this sets the finish.
   -------------------------------------------------------------------------- */

/* Photographs settle rather than pop: a barely-there lift that reads as
   weight on paper. Kept off kits that deliberately sit flat (sable already
   uses a hairline ring instead — see its override above). */
.fig { box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) var(--ease); }
.fig:hover { box-shadow: var(--shadow-md); }
.fig--flush, .b-hero .fig, .hero .fig { box-shadow: none; }

/* Editorial numerals. Tabular so a column of prices or a stat row aligns on
   the decimal, oldstyle nowhere — lining figures read as more deliberate at
   display sizes. */
.b-stat__n, .b-tier__price, .stat, .label--index, .b-steps__n {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* A gold hairline under section eyebrows carries the brand's one metallic
   note through every page without ever becoming a second accent colour. */
.b-intro__eyebrow::after, .b-statement__eyebrow::after {
  content: ""; display: block; width: 2.25rem; height: 1px;
  background: var(--gold-deep); margin-top: 0.9rem;
}
.section--dark .b-intro__eyebrow::after,
.section--dark .b-statement__eyebrow::after { background: var(--gold); }

/* Pull quotes get a brass mark rather than a giant grey glyph. */
.b-quote__text::before {
  content: ""; display: block; width: 1.75rem; height: 2px;
  background: var(--gold-deep); margin: 0 0 1.5rem;
}
.section--dark .b-quote__text::before { background: var(--gold); }
.u-center .b-quote__text::before { margin-inline: auto; }

/* Focus is visible, on brand, and never a browser default blue halo. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}
.section--dark a:focus-visible, .section--dark button:focus-visible {
  outline-color: var(--gold);
}

/* Text selection picks up the accent instead of the OS blue. */
::selection { background: var(--accent-pale); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .fig, .fig:hover { transition: none; }
}

/* --------------------------------------------------------------------------
   CUSTOM SECTION
   The one open-ended block. Structure is the customer's; look stays the
   kit's — every value below resolves through the same tokens as the rest of
   the theme, so a custom section cannot introduce a colour, typeface or
   spacing step the kit does not already use.
   -------------------------------------------------------------------------- */
.b-section {
  display: grid;
  grid-template-columns: 1fr;      /* mobile default; never four-up on a phone */
  gap: var(--sect-gap, clamp(1.5rem, 1rem + 2vw, 3rem));
}
.b-section[data-gap="tight"]   { --sect-gap: clamp(0.85rem, 0.6rem + 1vw, 1.5rem); }
.b-section[data-gap="wide"]    { --sect-gap: clamp(2.5rem, 1.5rem + 4vw, 6rem); }

.b-section[data-align="center"] { text-align: center; }
.b-section[data-align="center"] .b-section__col { align-items: center; }

.b-section__col { display: flex; flex-direction: column; min-width: 0; }
.b-section__media { margin-bottom: 1.1rem; }
.b-section__media:last-child { margin-bottom: 0; }

@media (min-width: 720px) {
  .b-section[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
  .b-section[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
  /* Four columns go two-up at tablet width and only four-up on a wide screen —
     four 22%-wide columns on an iPad is unreadable. */
  .b-section[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }

  .b-section[data-cols="2"][data-ratio="wide-left"]  { grid-template-columns: 2fr 1fr; }
  .b-section[data-cols="2"][data-ratio="wide-right"] { grid-template-columns: 1fr 2fr; }
  .b-section[data-cols="3"][data-ratio="wide-left"]  { grid-template-columns: 2fr 1fr 1fr; }
  .b-section[data-cols="3"][data-ratio="wide-right"] { grid-template-columns: 1fr 1fr 2fr; }
  .b-section[data-cols="3"][data-ratio="narrow-mid"] { grid-template-columns: 1fr 0.7fr 1fr; }

  .b-section[data-valign="middle"] .b-section__col { justify-content: center; }
  .b-section[data-valign="bottom"] .b-section__col { justify-content: flex-end; }
}

@media (min-width: 1100px) {
  .b-section[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
}

/* Vertical padding. Overrides the section default rather than adding to it,
   so "none" really means flush against the block above. */
.b-section--pad-none     { padding-block: 0; }
.b-section--pad-tight    { padding-block: clamp(1.75rem, 1rem + 2.5vw, 3.5rem); }
.b-section--pad-generous { padding-block: clamp(5rem, 3rem + 8vw, 11rem); }

/* Per-breakpoint behaviour for the custom section.
   The default — one column on a phone, full arrangement above 720px — is right
   for almost everything. These are for the cases it is not: a row of four
   small logos or three short stats reads fine side by side on a tablet, and
   forcing it to stack throws away the width. */
.b-section[data-mcols="2"] { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 719px) {
  .b-section[data-stack="never"][data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
  .b-section[data-stack="never"][data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
  .b-section[data-stack="never"][data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
  /* Anything kept side by side on a phone needs its gap and type to come down
     with it, or it is technically not stacked and practically unreadable. */
  .b-section[data-stack="never"] { --sect-gap: 0.6rem; }
  .b-section[data-stack="never"] .b-section__col { font-size: 0.875rem; }
}

@media (min-width: 720px) and (max-width: 1023px) {
  .b-section[data-stack="tablet"] { grid-template-columns: 1fr; }
}


/* Nothing is allowed to hide behind the demo bar.
   
   Driven by .has-demobar, which layout.php puts on <body> from PHP whenever
   MRD_DEMO is on. That is the reliable signal: it needs no script, so the
   Content Security Policy's ban on inline scripts is irrelevant to it, and it
   works in every browser rather than only those with :has().
   
   The :has() selectors are kept beside it as a backstop for any page that
   renders the bar without the class. They used to carry this alone, which
   left Safari 15 and older Firefox with the bar overlapping the header. */
/* Nothing below the bar needs an offset any more — it is a block in the
   document, so the header simply follows it.
   
   The header keeps its own sticky behaviour: it slides up with the bar, then
   pins to the top of the viewport once the bar has scrolled past. Both are
   visible at rest, neither covers the other, and no measurement is involved. */
body.has-demobar .site-header,
body:has(.demobar) .site-header {
  position: sticky;
  top: 0;
}

/* The drawer and the lightbox cover the viewport, and by the time either is
   open the bar has usually scrolled away. Left at inset:0 rather than offset
   below a bar that may not be on screen. */

/* No :has() caveat any more — the class above carries this everywhere. */

/* ------------------------------------------------------------ hero extras */

/* 90% of the viewport. Between full screen and three-quarter, and the height
   most studios actually want for an opening image: tall enough to fill the
   screen, short enough that the strip of the next section showing underneath
   tells a visitor there is more below. A full-screen hero looks, on a phone,
   exactly like a page with nothing after it. */
.hero--tall { min-height: 90vh; min-height: 90dvh; }

/* A mark centred over the photograph, with the words beneath it. */
.hero--marked .hero__inner { align-items: center; text-align: center; }
.hero--marked .hero__title,
.hero--marked .hero__eyebrow { text-align: center; }

.hero__mark {
  /* --mark-w is set per block from the editor, as a share of the screen. */
  width: var(--mark-w, 40%);
  max-width: 42rem;
  margin: 0 auto 1.5rem;
}
.hero__mark img { display: block; width: 100%; height: auto; }

.hero__marktext {
  text-align: center;
  color: var(--on-dark, #fff);
  margin: 0 auto;
}

/* A mark set to 40% of a phone screen is a postage stamp, and one set to 90%
   touches both edges. On a narrow screen the share is widened and then
   capped, which keeps a small setting legible and a large one off the edges. */
@media (max-width: 700px) {
  .hero__mark { width: min(calc(var(--mark-w, 40%) * 1.8), 78%); }
}

/* -------------------------------------------------- statement text width */

/* How far the words run over the picture. A heading set across a 2560px
   photograph is unreadable — the eye loses its place returning to the next
   line — but the right measure depends on the words, so it is a choice. */
.b-statement__inner--narrow { max-width: 32rem; }
.b-statement__inner--text   { max-width: 46rem; }
.b-statement__inner--wide   { max-width: 68rem; }
.b-statement__inner--full   { max-width: none; }

/* ---------------------------------------------------------------- buttons */

/* Solid and outline, and a colour a studio can set per button.
   
   The outline button fills with --accent on hover, which in most kits is a
   soft grey — correct as a default, and not what a brand with its own colour
   wants. Both variants read --btn-bg and --btn-fg when a block sets them,
   and fall back to the kit when it does not, so nothing changes on a site
   that has never touched them.
   
   Set as inline custom properties rather than inline colours: an invalid
   value simply makes the property invalid, the fallback applies, and nothing
   a customer types can break the page. */
.btn--solid {
  background: var(--btn-bg, var(--ink));
  border-color: var(--btn-bg, var(--ink));
  color: var(--btn-fg, var(--paper));
}
/* A solid button already is the fill, so it darkens slightly rather than
   sliding a second one up behind itself. */
.btn--solid::before { display: none; }
.btn--solid:hover { filter: brightness(1.12); color: var(--btn-fg, var(--paper)); }

/* The outline: border and text in the chosen colour, filling with it. */
.btn--ghost { border-color: var(--btn-bg, var(--ink)); color: var(--btn-fg, var(--ink)); }
.btn--ghost::before { background: var(--btn-bg, var(--accent)); }
.btn--ghost:hover { color: var(--btn-on, var(--paper)); }

/* On a dark section the kit's own on-dark colours still win unless a block
   has set one, which is why these are fallbacks rather than overrides. */
.section--dark .btn--ghost { color: var(--btn-fg, var(--on-dark)); border-color: var(--btn-bg, var(--on-dark-mute)); }

/* ------------------------------------------------------------- no header */

/* With the header off there is nothing fixed at the top, so an anchor link no
   longer needs to leave room for it — 5rem of scroll padding would drop the
   heading you jumped to well below the top of the screen. */
body.no-header { scroll-padding-top: 1rem; }