/*! 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;

  /* 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;
}

/* --------------------------------------------------------------------------
   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: var(--hairline);
}
.section--dark .sect-head__eyebrow::after { background: var(--on-dark-line); }

/* 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; }

.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.

     The `minimal` layout is the exception, and an important one: it hides the
     full nav on purpose and the burger *is* its navigation. Hiding it there
     too left that layout with no way to reach any page at all. */
  html:not([data-mrd-header="minimal"]) .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: 90;
}
.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 {
  position: fixed; inset: 0; z-index: 80;
  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); }
.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);
}
.b-tier:hover { border-color: var(--accent); transform: translateY(-3px); }
.b-tier--feature { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.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);
  cursor: pointer;
}
.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; }

[data-mrd-header="minimal"] .nav { display: none; }
[data-mrd-header="minimal"] .nav-toggle { display: flex; }

/* ---- 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);
  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.
   -------------------------------------------------------------------------- */
.demobar {
  position: fixed; z-index: 300; left: 0; right: 0; bottom: 0;
  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; }
/* Keep the bar off the bottom of the page content */
body.has-demobar { padding-bottom: 4.5rem; }
@media (max-width: 600px) { body.has-demobar { padding-bottom: 7rem; } }
@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%; }
}