/* =====================================================================
   SITE STYLESHEET
   Tokens, reset, shared components, then sections in page order.
   Breakpoints: 1024px (tablet layout) and 767px (phone layout).
   ===================================================================== */


/* =========================================================
   TOKENS
   ========================================================= */
:root{
  /* Surfaces */
  --bg: #FFFFFF;
  --cream: #F6F8FB;
  --sand: #E8EEF6;
  --brown: #16294A;

  /* Navy and gold. --gold is the button fill and the accent on dark
     surfaces; the deeper golds pass WCAG AA on light surfaces. */
  --gold: #E3B556;
  --gold-hover: #EDC777;
  --gold-accent: #A8761A;
  --gold-deep: #7A5410;

  /* Text */
  --ink: #14213A;
  --ink-btn: #0F1A2E;
  --body: #5B6470;
  --body-warm: #566070;
  --on-dark: #F6F8FB;
  --on-dark-soft: rgba(246,248,251,.78);
  --foot-soft: #D6D6D6;

  /* Lines */
  --rule: rgba(0,0,0,.12);

  /* Type stacks. The "Fallback" faces are metric-matched to limit
     layout shift while the web fonts load. */
  --serif: "Playfair Display", "Playfair Fallback", Georgia, "Times New Roman", serif;
  --display: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sans: "DM Sans", "DM Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Layout */
  --maxw: 1440px;
  --gut: 90px;
  --sec-pad: 100px;
  --radius: 10px;
  /* Dark surfaces and the raw channel values used inside rgba() */
  --dark: #0F1F38;              /* dark bands, footer */
  --panel: #0B172B;             /* slide-in menu */
  --hero-rgb: 7,14,28;           /* hero base and photo scrims */
  --bar-rgb: 10,20,38;           /* solid header bar */
  --gold-rgb: 227,181,86;
  --ink-rgb: 20,33,58;
  --field-line: #93A0B4;        /* form field borders */
  --dot: #C3CBD8;               /* inactive slider dots */
  --hero-filter: grayscale(1) sepia(1) hue-rotate(178deg) saturate(1.5) brightness(.62);

  --header-h: 116px;        /* overlay header while transparent */
  --header-h-solid: 86px;   /* after it turns solid on scroll */
}

@font-face{
  font-family: "Playfair Fallback";
  src: local("Georgia");
  size-adjust: 90%;
}
@font-face{
  font-family: "DM Sans Fallback";
  src: local("Arial");
  size-adjust: 104%;
}


/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h-solid); }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; color: var(--ink); }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
blockquote, figure { margin: 0; }

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

.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 5px;
  background: var(--brown); color: #fff; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 16px; }

.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }


/* =========================================================
   LAYOUT + SHARED TYPE
   ========================================================= */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.section { padding-block: var(--sec-pad); }
/* Keeps off-screen starting positions of reveal animations from widening the page. */
main { overflow-x: clip; }
.bg-cream { background: var(--cream); }
.bg-sand  { background: var(--sand); }
.bg-white { background: var(--bg); }
.bg-brown { background: var(--brown); }
.center { text-align: center; }

.eyebrow {
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.h2 {
  font-size: 52px;
  line-height: 1.1;
  letter-spacing: -.2px;
}
/* The accent phrase takes its own line. */
.h2 em { display: block; color: var(--gold-accent); font-style: italic; }
.sec-head { margin-bottom: 56px; }
.micro-label {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.lead-text {
  max-width: 600px;
  margin: 0 0 30px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
}

/* Entrance animations.
   A .reveal block animates its children one after another once it scrolls
   into view; nested lists, paragraph groups, and star rows stagger their own
   items. Each kind of element gets its own effect. Keyframes only define the
   starting state and use the individual translate/scale properties, so they
   never fight an element's own transform or transitions, and nothing is
   left applied once they finish. Everything is skipped without JavaScript
   or when the visitor prefers reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  :root { --rv-ease: cubic-bezier(.22, .7, .2, 1); --rv-dur: .85s; }

  @keyframes rv-up    { from { opacity: 0; translate: 0 24px; } }
  @keyframes rv-left  { from { opacity: 0; translate: -26px 0; } }
  @keyframes rv-right { from { opacity: 0; translate: 30px 0; } }
  @keyframes rv-zoom  { from { opacity: 0; scale: .94; } }
  @keyframes rv-pop   { from { opacity: 0; scale: .82; } }
  @keyframes rv-rise  { from { opacity: 0; translate: 0 44px; scale: .97; } }
  @keyframes rv-blur  { from { opacity: 0; filter: blur(8px); translate: 0 10px; } }
  @keyframes rv-focus { from { opacity: 0; filter: blur(10px); scale: 1.05; } }
  @keyframes rv-wipe  { from { opacity: 0; clip-path: inset(0 100% 0 0); } }
  @keyframes rv-mask  { from { opacity: 0; clip-path: inset(0 0 100% 0); translate: 0 .4em; } }
  @keyframes rv-down  { from { opacity: 0; translate: 0 -14px; } }
  @keyframes rv-fade  { from { opacity: 0; } }
  @keyframes rv-settle { from { scale: 1.08; } }
  @keyframes rv-lift  { from { translate: 0 36px; } }

  /* Hidden until the block is revealed. */
  .js .reveal:not(.is-in) > *,
  .js .reveal:not(.is-in) :is(.learn-list, .about-facts, .hero-badges, .reach-list, .upcoming-facts,
    .footer-links, .footer-social, .about-body, .bio-belief, .stars, .ts-viewport) > *,
  .js .reveal:not(.is-in):is(.svc, .upcoming-card, .event-card) { opacity: 0; }

  /* Children of a revealed block, staggered by position. */
  .js .reveal.is-in > * {
    animation: var(--rv, rv-up) var(--rv-dur) var(--rv-ease) backwards;
    animation-delay: calc(var(--c, 0) * 130ms + var(--i, 0) * 90ms);
  }
  /* Items inside nested lists start after their parent list appears. */
  .js .reveal.is-in :is(.learn-list, .about-facts, .hero-badges, .reach-list, .upcoming-facts,
    .footer-links, .footer-social, .about-body, .bio-belief, .stars, .ts-viewport) > * {
    animation: var(--rv-item, rv-up) .7s var(--rv-ease) backwards;
    animation-delay: calc(var(--c, 0) * 130ms + var(--p, 0) * 90ms + 180ms + var(--i, 0) * 75ms);
  }
  .js :is(.learn-list, .about-facts, .hero-badges, .reach-list, .upcoming-facts,
    .footer-links, .footer-social, .about-body, .bio-belief, .stars, .ts-viewport) { --p: var(--i, 0); }

  /* Cards rise as a whole, then their contents follow. */
  .js .reveal.is-in:is(.svc, .upcoming-card, .event-card) {
    animation: rv-rise .9s var(--rv-ease) backwards;
    animation-delay: calc(var(--c, 0) * 130ms);
  }
  .js .reveal:is(.svc, .upcoming-card, .event-card) > * { --rv: rv-fade; }
  .js :is(.svc-grid, .upcoming-list, .event-grid) > :nth-child(2) { --c: 1; }
  .js :is(.svc-grid, .upcoming-list, .event-grid) > :nth-child(3) { --c: 2; }
  .js :is(.svc-grid, .upcoming-list, .event-grid) > :nth-child(4) { --c: 3; }
  .js :is(.svc-grid, .upcoming-list, .event-grid) > :nth-child(n+5) { --c: 4; }

  /* Stagger position. */
  .js .reveal > *, .js .reveal * > * { --i: 0; }
  .js :is(.reveal, .reveal *) > :nth-child(2) { --i: 1; }
  .js :is(.reveal, .reveal *) > :nth-child(3) { --i: 2; }
  .js :is(.reveal, .reveal *) > :nth-child(4) { --i: 3; }
  .js :is(.reveal, .reveal *) > :nth-child(5) { --i: 4; }
  .js :is(.reveal, .reveal *) > :nth-child(6) { --i: 5; }
  .js :is(.reveal, .reveal *) > :nth-child(7) { --i: 6; }
  .js :is(.reveal, .reveal *) > :nth-child(8) { --i: 7; }
  .js :is(.reveal, .reveal *) > :nth-child(n+9) { --i: 8; }

  /* Effect per kind of element. Direction variants set the default. */
  .js .reveal.from-right > * { --rv: rv-right; }
  .js .reveal.from-left > * { --rv: rv-left; }
  .js .reveal.zoom > * { --rv: rv-zoom; }
  .js .reveal > :is(.eyebrow, .micro-label, .footer-head) { --rv: rv-wipe; }
  .js .reveal > :is(h1, h2, h3, .h2, .mission-text, .ev-title) { --rv: rv-mask; }
  .js .reveal > :is(.about-lead, .lead-text, .signup-lead, .mission-note, blockquote, .bio-belief) { --rv: rv-blur; }
  .js .reveal > :is(.btn-lux, .about-more, .upcoming-action, .svc-num, .stars) { --rv: rv-pop; }
  .js .reveal > :is(picture, img, .about-frame, .about-place, .connect-art > *) { --rv: rv-focus; }
  .js .reveal:is(.book-art, .connect-art, .ev-panels) > * { --rv: rv-focus; }
  .js .reveal.ev-panels > * { --rv: rv-zoom; }
  .js .reveal > .ts-viewport { --rv: rv-fade; }

  .js :is(.learn-list, .reach-list, .footer-links) > * { --rv-item: rv-left; }
  .js :is(.hero-badges, .stars, .footer-social) > * { --rv-item: rv-pop; }
  .js .about-facts > * { --rv-item: rv-rise; }
  .js .ts-viewport > * { --rv-item: rv-right; }
  .js :is(.about-body, .bio-belief) > * { --rv-item: rv-blur; }

  /* Page load: header, home hero, inner-page heading, and 404. */
  /* Header pieces animate individually; moving the header itself would
     drag the fixed mobile menu panel with it. */
  .masthead > .brand { animation: rv-left .9s var(--rv-ease) backwards; }
  .nav-list > li { animation: rv-down .7s var(--rv-ease) backwards; }
  .nav-list > li:nth-child(2) { animation-delay: 60ms; }
  .nav-list > li:nth-child(3) { animation-delay: 120ms; }
  .nav-list > li:nth-child(4) { animation-delay: 180ms; }
  .nav-list > li:nth-child(n+5) { animation-delay: 240ms; }
  .masthead > :is(.nav-cta-bar, .nav-toggle) { animation: rv-pop .8s var(--rv-ease) .3s backwards; }
  .hero-bg img { animation: rv-settle 2.6s cubic-bezier(.2, .6, .2, 1) backwards; }
  .hero-portrait { animation: rv-lift 1.4s var(--rv-ease) backwards; }
  :is(.hero-inner, .page-hero .wrap, .notfound) > * {
    animation: rv-up .9s var(--rv-ease) backwards;
    animation-delay: calc(250ms + var(--i, 0) * 130ms);
  }
  :is(.hero-inner, .page-hero .wrap, .notfound) > :is(.hero-eyebrow, .eyebrow) { animation-name: rv-wipe; }
  :is(.hero-inner, .page-hero .wrap, .notfound) > :is(h1, .hero-title, .page-hero-title) { animation-name: rv-mask; animation-duration: 1.1s; }
  /* The inner-page title is the largest element on screen, so it starts right away. */
  .page-hero .wrap > .page-hero-title { animation-delay: 60ms; }
  .hero-inner > .hero-lede { animation-name: rv-blur; }
  :is(.hero-inner, .page-hero .wrap, .notfound) > :nth-child(2) { --i: 1; }
  :is(.hero-inner, .page-hero .wrap, .notfound) > :nth-child(3) { --i: 2; }
  :is(.hero-inner, .page-hero .wrap, .notfound) > :nth-child(4) { --i: 3; }
  :is(.hero-inner, .page-hero .wrap, .notfound) > :nth-child(5) { --i: 4; }
  .hero-actions > * { animation: rv-pop .8s var(--rv-ease) backwards; }
  .hero-actions > :first-child { animation-delay: .75s; }
  .hero-actions > :nth-child(2) { animation-delay: .87s; }
  .hero .hero-badges > li { animation: rv-pop .7s var(--rv-ease) backwards; }
  .hero .hero-badges > li:nth-child(1) { animation-delay: 1.05s; }
  .hero .hero-badges > li:nth-child(2) { animation-delay: 1.15s; }
  .hero .hero-badges > li:nth-child(3) { animation-delay: 1.25s; }
  .hero .hero-badges > li:nth-child(4) { animation-delay: 1.35s; }
  .hero-scroll { animation: rv-fade 1s ease 1.6s backwards; }
  @keyframes rv-mark { from { opacity: 0; translate: 6% 0; } }
  .page-hero::before { animation: rv-mark 1.8s var(--rv-ease) backwards; }
}


/* =========================================================
   HEADER / NAVIGATION
   Overlay header: transparent on top of the full-height hero, then a
   solid bar once the hero has scrolled past. Without JavaScript it is
   absolutely positioned and simply scrolls away with the hero.
   ========================================================= */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
}
.js .site-header { position: fixed; }
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(var(--gold-rgb),.8), transparent);
  opacity: 0;
  transition: opacity .35s ease;
}
/* The solid bar is painted on a pseudo-element. Putting the blur on the
   header itself would make it the containing block for the fixed menu
   panel, which then collapses to the header's height. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(var(--bar-rgb),.94);
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .35s ease;
}
@supports (backdrop-filter: blur(1px)) {
  .site-header::before { background: rgba(var(--bar-rgb),.8); backdrop-filter: saturate(140%) blur(14px); }
}
.site-header.is-solid::before { opacity: 1; }
.site-header.is-solid::after { opacity: 1; }
/* Pages without a hero use the solid bar from the start. */
.site-header.is-static, .js .site-header.is-static { position: sticky; }

.masthead {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: var(--maxw);
  margin: 0 auto;
  height: var(--header-h);
  padding: 0 40px;
  transition: height .35s ease;
}
.site-header.is-solid .masthead { height: var(--header-h-solid); }

/* Wordmark: name over a letterspaced role line justified to its width. */
.brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  margin-right: auto;
  color: #fff;
  font-size: clamp(22px, 1.9vw, 27px);
  text-decoration: none;
}
.brand-name {
  font-family: var(--serif);
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s ease;
}
.brand:hover .brand-name { color: var(--gold); }
/* Role line centered under the wordmark. The negative margin cancels the
   tracking after the final letter so the centering is optical. */
.brand-role {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .9em;
  margin-right: -.22em;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255,255,255,.76);
}
.brand-role > span[aria-hidden] { color: var(--gold); }

/* Desktop nav: quiet uppercase labels with an underline that draws in. */
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-list a {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  color: rgba(255,255,255,.85);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s ease;
}
.nav-list a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.nav-list a:hover, .nav-list a:focus-visible { color: #fff; }
.nav-list a:hover::after { transform: scaleX(1); }
.nav-list a[aria-current="page"] { color: #fff; }
.nav-list a[aria-current="page"]::after { transform: scaleX(1); }

/* Solid brand fill at the right end of the bar; hover wipes left to right. */
.nav-cta {
  position: relative;
  z-index: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--ink-btn);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .22s ease .14s;
}
.nav-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s cubic-bezier(.4,0,.2,1);
}
/* Shimmer: a soft band of light crosses the button, then rests until the next pass. */
.nav-cta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 45%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .nav-cta::after { animation: navCtaShimmer 6s ease-in-out 2s infinite; }
  @keyframes navCtaShimmer {
    0% { transform: translateX(-120%) skewX(-18deg); }
    18%, 100% { transform: translateX(345%) skewX(-18deg); }
  }
}
.nav-cta:hover::after, .nav-cta:focus-visible::after { opacity: 0; }
.nav-cta:hover::before, .nav-cta:focus-visible::before { transform: scaleX(1); }
.nav-cta:hover, .nav-cta:focus-visible { border-color: #fff; }
.nav-cta-panel { display: none; }

.nav-toggle { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 1240px) and (min-width: 1025px) {
  .masthead { padding: 0 24px; gap: 16px; }
  .nav-list a { padding: 0 9px; font-size: 10.5px; letter-spacing: .14em; }
  .nav-list a::after { left: 9px; right: 9px; }
  .nav-cta { padding: 0 14px; font-size: 10px; letter-spacing: .14em; }
}

/* Tablet and phone: wordmark plus a hamburger; the menu opens as a
   full-height dark panel. */
@media (max-width: 1024px) {
  .masthead { padding: 0 20px; gap: 12px; }
  .brand { font-size: 22px; }
  .brand-role { margin-right: -.17em; font-size: 9px; letter-spacing: .17em; }
  .nav-cta-bar { display: none; }
  .nav-cta-panel { display: flex; }

  .nav-toggle {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
  }
  .nav-toggle-bars { position: relative; width: 26px; height: 1.5px; background: currentColor; transition: background-color .2s ease; }
  .nav-toggle-bars::before, .nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 26px;
    height: 1.5px;
    background: currentColor;
    transition: transform .28s ease, top .28s ease;
  }
  .nav-toggle-bars::before { top: -8px; }
  .nav-toggle-bars::after { top: 8px; }
  .nav-open .nav-toggle-bars { background: transparent; }
  .nav-open .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
  .nav-open .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    padding: calc(var(--header-h) + 24px) 0 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--panel);
    box-shadow: -30px 0 60px rgba(0,0,0,.5);
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
  }
  /* The slide only animates once the menu has been used, so the panel
     cannot ghost into view when the window crosses this breakpoint. */
  .nav-ready .site-nav { transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease, visibility .3s ease; }
  .nav-open .site-nav { opacity: 1; visibility: visible; transform: none; }
  .nav-list { display: block; padding: 0 28px; }
  .nav-list li { border-bottom: 1px solid rgba(255,255,255,.1); }
  .nav-list a {
    height: auto;
    padding: 18px 0;
    color: #fff;
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: none;
  }
  .nav-list a::after { display: none; }
  .nav-list a:hover, .nav-list a[aria-current="page"] { color: var(--gold); }
  .nav-cta-panel { margin: 26px 28px 0; height: 48px; justify-content: center; }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0,0,0,.6);
    opacity: 0;
    visibility: hidden;
  }
  .nav-ready .nav-backdrop { transition: opacity .3s ease, visibility .3s ease; }
  .nav-open .nav-backdrop { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 400px) {
  .brand { font-size: 20px; }
  .brand-role { margin-right: -.14em; font-size: 8px; letter-spacing: .14em; }
}


/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: rgb(var(--hero-rgb));
}
.hero-bg { position: absolute; inset: 0; z-index: -3; }
.hero-bg picture, .hero-bg img { display: block; width: 100%; height: 100%; }
/* Dimmed so the portrait in front reads clearly against it. */
.hero-bg img { object-fit: cover; filter: var(--hero-filter); }
.hero-portrait {
  position: absolute;
  z-index: -2;
  right: max(24px, calc((100% - var(--maxw)) / 2 + 70px));
  bottom: 0;
  height: min(88%, 851px);
  margin: 0;
}
.hero-portrait picture { display: block; height: 100%; }
.hero-portrait img { width: auto; height: 100%; max-width: none; }
/* Side scrim keeps the copy readable; top and bottom bands seat the
   header and the foot of the section. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(var(--hero-rgb),.95) 0%, rgba(var(--hero-rgb),.86) 26%, rgba(var(--hero-rgb),.45) 52%, rgba(var(--hero-rgb),0) 74%),
    linear-gradient(to bottom, rgba(var(--hero-rgb),.75) 0%, rgba(var(--hero-rgb),0) 28%),
    linear-gradient(to top, rgba(var(--hero-rgb),.8) 0%, rgba(var(--hero-rgb),0) 30%);
}
.hero-inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(var(--header-h) + 16px) 40px clamp(52px, 9vh, 110px);
  color: #fff;
}
.hero-eyebrow {
  margin: 0 0 26px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.hero-eyebrow span + span::before { content: "|"; margin: 0 .9em 0 .6em; color: var(--gold); }
.hero-title {
  margin: 0 0 30px;
  font-size: clamp(47px, 5.8vw, 90px);
  white-space: nowrap;
  line-height: .98;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 6px 40px rgba(0,0,0,.55);
}
.hero-title em { font-weight: inherit; font-style: italic; color: var(--gold); }
.hero-lede {
  max-width: min(45.5vw, 640px);
  margin: 0 0 30px;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.6;
  color: rgba(255,255,255,.86);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; padding-bottom: 38px; }

/* Hover wipes a fill across the button from left to right. The fill is a
   pseudo-element behind the label, inside the button's own stacking context. */
.btn-lux {
  position: relative;
  z-index: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 30px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--ink-btn);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .22s ease .16s, border-color .22s ease .16s;
}
.btn-lux::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .42s cubic-bezier(.4,0,.2,1);
}
.btn-lux:hover::before, .btn-lux:focus-visible::before { transform: scaleX(1); }
.btn-lux:hover, .btn-lux:focus-visible { border-color: #fff; }
/* White button wipes in the brand color on hover. */
.btn-lux-white { background: #fff; border-color: #fff; }
.btn-lux-white::before { background: var(--gold); }
.btn-lux-white:hover, .btn-lux-white:focus-visible { border-color: var(--gold); }
/* Ghost button wipes in the brand color; its label darkens once covered. */
.btn-lux-ghost { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.btn-lux-ghost::before { background: var(--gold); }
.btn-lux-ghost:hover, .btn-lux-ghost:focus-visible { color: var(--ink-btn); border-color: var(--gold); }

.hero-creds { max-width: 560px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); }
.hero-creds-label {
  margin: 0 0 14px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.66);
}
.hero-badges { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 26px; }
.hero-badges li { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 104px; }
.hero-badges img { width: auto; height: 76px; }
.hero-badges span {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(255,255,255,.84);
}

.hero-scroll {
  position: absolute;
  right: 40px;
  bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.7);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-decoration: none;
}
.hero-scroll span { writing-mode: vertical-rl; }
.hero-scroll:hover { color: #fff; }
.hero-scroll i { display: block; width: 1px; height: 52px; background: linear-gradient(to bottom, var(--gold), rgba(255,255,255,0)); }
@media (prefers-reduced-motion: no-preference) {
  .hero-scroll i { animation: heroScroll 2.4s ease-in-out infinite; transform-origin: top; }
  @keyframes heroScroll { 0%, 100% { transform: scaleY(.45); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }
}
/* Marks the bottom of the hero; the header turns solid once it leaves view. */
.hero-sentinel { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; }

@media (max-width: 1024px) {
  /* Narrower viewports move the copy to the bottom over an upward gradient. */
  .hero { align-items: flex-end; }
  .hero-portrait { right: 0; height: min(80%, 760px); }
  .hero-scrim {
    background:
      linear-gradient(to bottom, rgba(var(--hero-rgb),.8) 0%, rgba(var(--hero-rgb),.25) 20%, rgba(var(--hero-rgb),0) 36%),
      linear-gradient(to top, rgba(var(--hero-rgb),.96) 0%, rgba(var(--hero-rgb),.88) 34%, rgba(var(--hero-rgb),.5) 56%, rgba(var(--hero-rgb),0) 74%);
  }
  .hero-inner { padding: calc(var(--header-h) + 24px) 28px 104px; }
  .hero-title { font-size: clamp(60px, 9vw, 90px); }
  .hero-lede { max-width: 52ch; }
  .hero-creds { max-width: none; }
  .hero-scroll { right: 28px; bottom: 26px; }
}
@media (max-width: 767px) {
  .hero-portrait {
    top: calc(var(--header-h) - 6px);
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(100%, 420px);
    height: auto;
    transform: translateX(-50%);
  }
  .hero-portrait picture { height: auto; }
  .hero-portrait img { width: 100%; height: auto; }
  .hero-inner { padding: calc(var(--header-h) + 24px) 20px 64px; }
  .hero-eyebrow { margin-bottom: 18px; font-size: 9.5px; letter-spacing: .24em; }
  /* Two lines on phones so the headline keeps its size. */
  .hero-title { margin-bottom: 20px; font-size: clamp(47px, 14.4vw, 77px); white-space: normal; }
  .hero-title em { display: block; }
  .hero-lede { max-width: none; margin-bottom: 28px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; padding-bottom: 32px; }
  .btn-lux { min-height: 50px; }
  .hero-creds { padding-top: 18px; }
  .hero-badges { gap: 14px 10px; justify-content: space-between; }
  .hero-badges li { width: 22%; gap: 8px; }
  .hero-badges img { height: 58px; }
  .hero-badges span { font-size: 8.5px; letter-spacing: .05em; }
  .hero-scroll { display: none; }
}


/* =========================================================
   ABOUT
   ========================================================= */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: center;
}
.split > * { padding: 10px; min-width: 0; }
/* Photo sits in a square-cornered panel with a thin outline offset behind
   it, echoing the frame in the picture. */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
}
.about-figure { position: relative; margin: 0 0 22px 46px; }
.about-frame { position: relative; background: #FDFDFB; }
.about-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 1px solid var(--gold-accent);
  transform: translate(-22px, 22px);
}
.about-frame picture { position: relative; z-index: 1; display: block; background: #FDFDFB; box-shadow: 0 18px 44px rgba(var(--ink-rgb),.16), 0 3px 10px rgba(var(--ink-rgb),.08); }
.about-frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* Variant for a transparent image shown whole inside the panel. */
.about-figure-full .about-frame img { aspect-ratio: 1200 / 1257; object-fit: contain; }
.about-figure-full .about-frame picture { padding-top: 16%; }
.about-place {
  position: absolute;
  bottom: 0;
  left: -46px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.about-copy .eyebrow { margin-bottom: 20px; }
.about-copy .h2 { margin: 0 0 30px; font-size: 52px; line-height: 1.1; letter-spacing: -.2px; }
.about-copy .h2 em { display: block; }
.about-lead {
  max-width: 600px;
  margin: 0 0 22px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
}
.about-body { max-width: 600px; }
.about-body p { margin: 0 0 16px; line-height: 1.7; }
.about-body p:last-child { margin-bottom: 0; }
.about-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: 600px;
  margin-top: 38px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.about-facts li {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--body);
}
.about-facts strong {
  display: block;
  margin-bottom: 10px;
  font-family: var(--serif);
  font-size: 34px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: lining-nums;
  color: var(--dark);
}
.about-facts strong span, .about-facts strong em { color: var(--gold-accent); }
/* The serif's plus sign is hairline thin even at 700, so thicken its strokes. */
.about-facts strong span { -webkit-text-stroke: .045em currentColor; }


/* =========================================================
   CALL-TO-ACTION BAND
   Dark split band: heading on the left, supporting line and button on
   the right behind a hairline divider.
   ========================================================= */
.cta-band { position: relative; overflow: hidden; padding-block: 84px; background: var(--dark); }
/* Faint monogram watermark in the lower right corner. */
.cta-band:not(.cta-band-light)::before {
  content: "MK";
  position: absolute;
  right: max(-14px, calc((100% - var(--maxw)) / 2 + 10px));
  bottom: -.2em;
  font-family: var(--serif);
  font-size: 260px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--gold);
  opacity: .05;
  pointer-events: none;
  user-select: none;
}
.cta-band .wrap { position: relative; }
.cta-band-grid {
  display: grid;
  /* Heading column hugs its text so the side block sits right beside it. */
  grid-template-columns: auto minmax(0, 700px);
  justify-content: start;
  gap: clamp(36px, 4.5vw, 64px);
  align-items: center;
}
.cta-band .eyebrow { margin-bottom: 18px; color: var(--gold); }
.cta-band .h2 { font-size: 52px; line-height: 1.1; letter-spacing: -.2px; color: var(--on-dark); }
.cta-band .h2 em { display: block; color: var(--gold); }
.cta-band-side { padding-left: clamp(28px, 4vw, 56px); border-left: 1px solid rgba(255,255,255,.16); }
.cta-band-side p { margin: 0 0 28px; font-size: 17px; line-height: 1.65; color: rgba(246,248,251,.82); text-wrap: balance; }
.cta-band .btn-lux { gap: 12px; }
.cta-band .btn-lux .icon { width: 14px; height: 14px; }
@media (max-width: 1024px) {
  .cta-band { padding-block: 64px; }
  .cta-band .h2 { font-size: 44px; }
}
@media (max-width: 767px) {
  .cta-band { padding-block: 52px; }
  .cta-band-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cta-band .h2 { font-size: 34px; }
  .cta-band:not(.cta-band-light)::before { right: -6px; font-size: 150px; }
  .cta-band-side { padding: 28px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }
  .cta-band-side p { font-size: 16px; }
  .cta-band .btn-lux { width: 100%; }
}


/* =========================================================
   BUTTON VARIANTS ON LIGHT SURFACES
   The wipe turns dark there, since a white wipe would vanish.
   ========================================================= */
.bg-cream .btn-lux::before, .bg-sand .btn-lux::before, .bg-white .btn-lux::before, .cta-band-light .btn-lux::before { background: var(--brown); }
.bg-cream .btn-lux:hover, .bg-sand .btn-lux:hover, .bg-white .btn-lux:hover, .cta-band-light .btn-lux:hover,
.bg-cream .btn-lux:focus-visible, .bg-sand .btn-lux:focus-visible, .bg-white .btn-lux:focus-visible, .cta-band-light .btn-lux:focus-visible { color: #fff; border-color: var(--brown); }
.btn-lux-outline { background: transparent; border-color: var(--brown); color: var(--brown); }
.btn-lux { gap: 12px; font-family: inherit; cursor: pointer; }
.btn-lux .icon { width: 14px; height: 14px; }

/* Photo or artwork in a square panel with a thin outline offset behind it. */
.frame-panel { position: relative; margin: 0 22px 22px 0; }
.frame-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--gold-accent);
  transform: translate(22px, 22px);
}
.frame-left { margin: 0 0 22px 22px; }
.frame-left::before { transform: translate(-22px, 22px); }
.frame-inner { position: relative; padding: clamp(28px, 4vw, 60px); background: #fff; }
.frame-inner img { width: 100%; }
/* Book covers sit directly on the section background. */
.book-art { margin: 0; }
.connect-art { margin: 0; }
.connect-art img { width: 100%; max-width: 520px; height: auto; margin-inline: auto; }
.book-art img { width: 100%; max-width: 560px; height: auto; margin-inline: auto; filter: drop-shadow(0 26px 30px rgba(var(--ink-rgb),.30)) drop-shadow(0 6px 10px rgba(var(--ink-rgb),.16)); }


/* =========================================================
   SERVICES
   Four columns on a shared top rule, divided by hairlines.
   ========================================================= */
.services .sec-head { text-align: center; }
.services .h2 em { display: inline; }
.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(var(--ink-rgb),.28);
}
.svc { position: relative; padding: 34px 28px 6px 0; }
.svc + .svc { padding-left: 28px; border-left: 1px solid rgba(var(--ink-rgb),.14); }
/* Short accent sitting on the top rule at the start of each column */
.svc::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--gold-accent);
}
.svc + .svc::before { left: 28px; }
.svc-num {
  display: block;
  margin-bottom: 44px;
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--gold-deep);
}
.svc h3 { margin: 0 0 14px; font-size: 23px; line-height: 1.2; }
.svc p { margin: 0; line-height: 1.65; color: var(--body-warm); }
/* Hover: a white panel rises behind the column, the accent bar runs the
   full width, and the number and text lift. Desktop pointer devices only. */
@media (hover: hover) and (min-width: 1025px) {
  .svc { z-index: 0; }
  .svc::after {
    content: "";
    position: absolute;
    inset: 0 0 -40px 0;
    z-index: -1;
    background: var(--bg);
    box-shadow: 0 26px 50px rgba(var(--ink-rgb),.14), 0 4px 12px rgba(var(--ink-rgb),.06);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1);
  }
  .svc:first-child::after { left: -28px; }
  .svc:last-child::after { right: -28px; }
  .svc::before { transition: left .45s cubic-bezier(.2,.7,.2,1), width .45s cubic-bezier(.2,.7,.2,1), background-color .3s ease; }
  .svc > * { transition: transform .45s cubic-bezier(.2,.7,.2,1), color .3s ease; }
  .svc-num { transform-origin: left center; }
  .svc:hover::after { opacity: 1; transform: none; }
  .svc:hover::before { left: 0; width: 100%; background: var(--gold); }
  .svc:first-child:hover::before { left: -28px; width: calc(100% + 28px); }
  .svc:last-child:hover::before { width: calc(100% + 28px); }
  .svc:hover > * { transform: translateY(-8px); }
  .svc:hover .svc-num { transform: translateY(-8px) scale(1.45); color: var(--gold-accent); }
  .svc:hover p { color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .svc::before, .svc::after, .svc > * { transition: none; }
}


/* =========================================================
   FREE RESOURCE (guide book)
   ========================================================= */
.guide-grid, .contact-grid {
  display: grid;
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
}
.guide-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.guide-copy .h2 { margin-bottom: 28px; }
.guide-copy .h2 em { display: inline; }
.learn-list { max-width: 560px; }
.learn-list li {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}
.learn-list li:last-child { border-bottom: 1px solid var(--rule); }
.learn-list li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: .55em;
  background: var(--gold-accent);
}
.guide-note { max-width: 560px; margin: 26px 0 34px; line-height: 1.7; }


/* =========================================================
   MISSION
   ========================================================= */
.mission { position: relative; overflow: hidden; padding-block: 124px 96px; background: var(--dark); text-align: center; }
/* Faint word watermark in the upper left corner. */
.mission::before {
  content: "Mission";
  position: absolute;
  top: -.14em;
  left: max(-10px, calc((100% - var(--maxw)) / 2 + 30px));
  font-family: var(--serif);
  font-size: clamp(92px, 17vw, 250px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--gold);
  opacity: .035;
  pointer-events: none;
  user-select: none;
}
/* Floating dot field. Each dot is its own element so it drifts independently.
   Position, size, opacity, blur, drift waypoints, duration, and phase are set
   per dot as custom properties in the markup. Negative delays start every dot
   partway through its cycle, and drift and twinkle run on separate clocks. */
.mission-dots {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  --slow: 1.4;   /* scales every dot's drift duration; higher is slower */
}
.mission-dots i {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: rgba(255,255,255,var(--o));
  filter: blur(var(--b));
  animation:
    missionFloat calc(var(--dur) * var(--slow)) ease-in-out infinite var(--delay),
    missionTwinkle var(--tw) ease-in-out infinite var(--twd);
}
@keyframes missionFloat {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(var(--x1), var(--y1), 0); }
  50%  { transform: translate3d(var(--x2), var(--y2), 0); }
  75%  { transform: translate3d(var(--x3), var(--y3), 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes missionTwinkle {
  0%, 100% { opacity: .25; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mission-dots i { animation: none; }
}
.mission .wrap { position: relative; }
.mission-text {
  max-width: 1120px;
  margin-inline: auto;
  font-size: clamp(30px, 3.5vw, 50px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -.2px;
  color: var(--on-dark);
  text-wrap: balance;
}
.mission-text em { font-style: italic; color: var(--gold); }
/* Short centered divider above the note */
.mission-note::before {
  content: "";
  display: block;
  width: 160px;
  height: 1px;
  margin: 0 auto 28px;
  background: rgba(255,255,255,.08);
}
.mission-note {
  margin: 40px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(246,248,251,.78);
  text-wrap: balance;
}


/* =========================================================
   CALL-TO-ACTION BAND, LIGHT VERSION
   ========================================================= */
.cta-band-light { background: var(--cream); }
.cta-band-light .eyebrow { color: var(--gold-deep); }
.cta-band-light .h2 { color: var(--ink); }
.cta-band-light .h2 em { display: inline; color: var(--gold-accent); }
.cta-band-light .cta-band-side { border-left-color: rgba(var(--ink-rgb),.18); }
.cta-band-light .cta-band-side p { color: var(--body-warm); }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 14px; }


/* =========================================================
   COMMUNITY EVENTS
   Four photo panels side by side. The active one is wide and shows its
   details; the rest are narrow with the title running up the side.
   Hover, focus, or tap makes a panel active. On phones every panel is
   a full card with its details showing.
   ========================================================= */
.events .h2 em { display: inline; }
/* Stepper above the panels: thin arrows either side of a counter, with a
   four-part track underneath whose gold segment slides to the open panel. */
.ev-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.ev-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 14px;
}
.ev-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  transition: color .25s ease, transform .3s cubic-bezier(.4,0,.2,1);
}
.ev-arrow svg { width: 30px; height: 30px; fill: currentColor; }
.ev-prev:hover { color: var(--gold-accent); transform: translateX(-6px); }
.ev-next:hover { color: var(--gold-accent); transform: translateX(6px); }
.ev-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 92px;
  justify-content: center;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--body);
  font-variant-numeric: lining-nums tabular-nums;
}
.ev-count b {
  font-family: var(--serif);
  font-size: 38px;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--gold-accent);
}
.ev-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rule); }
.ev-progress i {
  display: block;
  width: 25%;
  height: 100%;
  background: var(--gold-accent);
  transform: translateX(calc(var(--ev-index, 0) * 100%));
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.ev-panels { display: flex; gap: 10px; height: 500px; }
.ev {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: var(--dark);
  transition: flex .55s cubic-bezier(.4,0,.2,1);
}
.ev.is-active { flex: 4.2; }
.ev picture, .ev img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ev img { object-fit: cover; }
/* Scrim so the white text reads on any photo */
.ev::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--hero-rgb),.9) 0%, rgba(var(--hero-rgb),.4) 48%, rgba(var(--hero-rgb),.28) 100%);
}
.ev-side {
  position: absolute;
  left: 22px;
  bottom: 26px;
  z-index: 1;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  transform: rotate(180deg);
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  transition: opacity .25s ease;
}
.ev-info {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 30px;
  z-index: 1;
  color: #fff;
  opacity: 0;
  transition: opacity .35s ease;
}
.ev-title { margin: 0 0 6px; font-size: 34px; line-height: 1.15; color: #fff; white-space: nowrap; }
.ev-sub { margin: 0; color: rgba(255,255,255,.86); white-space: nowrap; }
.ev.is-active .ev-side { opacity: 0; }
.ev.is-active .ev-info { opacity: 1; transition-delay: .18s; }
/* Invisible button over the whole panel carries hover, focus, and tap */
.ev-row {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
}
.ev-row:focus-visible { outline-offset: -4px; }

@media (max-width: 1024px) {
  .ev-panels { height: 420px; gap: 8px; }
  .ev.is-active { flex: 3.6; }
  .ev-side { left: 16px; font-size: 18px; }
  .ev-info { left: 24px; right: 24px; bottom: 24px; }
  .ev-title { font-size: 26px; white-space: normal; }
  .ev-sub { white-space: normal; }
}
@media (max-width: 767px) {
  .ev-panels { flex-direction: column; height: auto; gap: 14px; }
  .ev, .ev.is-active { flex: none; aspect-ratio: 4 / 3; }
  .ev-side { display: none; }
  .ev-info { left: 20px; right: 20px; bottom: 18px; opacity: 1; }
  .ev-title { font-size: 24px; }
  .ev-row { display: none; }
  .ev-nav { display: none; }
}


/* =========================================================
   LEGACY (long bio + community photos)
   ========================================================= */
.legacy { padding-block: 110px; background: var(--brown); }
.legacy-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
/* Heading stays in view beside the long bio */
.legacy-head { position: sticky; top: calc(var(--header-h-solid) + 40px); }
.legacy .eyebrow { color: var(--gold); }
.legacy .h2 { color: #fff; }
.legacy-lead {
  max-width: 380px;
  margin: 28px 0 0;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.18);
  font-family: var(--serif);
  font-size: 23px;
  font-style: italic;
  line-height: 1.45;
  color: rgba(255,255,255,.92);
}
.bio p { margin: 0 0 18px; font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.82); }
.bio p:last-child { margin-bottom: 0; }
.bio strong { font-weight: 700; color: #fff; }
.bio .micro-label { margin-bottom: 18px; font-size: 11px; line-height: 1.5; color: var(--gold); }
.bio .micro-label.gap { margin-top: 44px; padding-top: 34px; border-top: 1px solid rgba(255,255,255,.14); }
.bio-belief { margin: 30px 0; padding: 4px 0 4px 26px; border-left: 2px solid var(--gold); }
.bio-belief p { margin-bottom: 8px; }
.bio-belief .belief-line {
  margin: 0;
  font-family: var(--serif);
  font-size: 26px;
  font-style: italic;
  line-height: 1.35;
  color: #fff;
}
.passions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 84px;
  padding-top: 48px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.passion img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.passion figcaption {
  margin-top: 18px;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.3;
  color: #fff;
}
.passion figcaption span {
  display: block;
  margin-bottom: 8px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}


/* =========================================================
   TESTIMONIALS
   The track is a native scroll-snap container; site.js adds the
   arrows, dots, and autoplay.
   ========================================================= */
.ts-head { text-align: center; }
.ts-head .h2 em { display: inline; }
.ts-stage { position: relative; }
/* Square buttons that sit half over the outer edges of the card row */
.ts-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-top: -28px;
  padding: 0;
  border: 0;
  background: var(--dark);
  color: #fff;
  box-shadow: 0 10px 26px rgba(var(--ink-rgb),.22);
  transition: background-color .25s ease, color .25s ease, transform .3s cubic-bezier(.4,0,.2,1);
}
.ts-arrow svg { width: 26px; height: 26px; }
.ts-prev { left: -28px; }
.ts-next { right: -28px; }
.ts-arrow:hover { background: var(--gold); color: var(--ink-btn); }
.ts-prev:hover { transform: translateX(-4px); }
.ts-next:hover { transform: translateX(4px); }
.ts-viewport {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ts-viewport::-webkit-scrollbar { display: none; }
.ts-slide { flex: 0 0 calc(50% - 12px); display: flex; scroll-snap-align: start; }
.tcard {
  width: 100%;
  padding: 40px 40px 38px;
  border-top: 2px solid var(--gold-accent);
  background: var(--cream);
}
.stars { display: flex; gap: 6px; margin-bottom: 24px; color: var(--gold-accent); font-size: 14px; }
.tcard blockquote p {
  margin: 0;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.62;
  color: var(--ink);
}
.ts-dots { display: flex; justify-content: center; gap: 2px; margin: 26px 0 0; }
.ts-dots button { width: 24px; height: 24px; padding: 0; border: 0; background: none; }
.ts-dots button::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: auto;
  background: var(--dot);
  transition: background-color .2s;
}
.ts-dots button[aria-current="true"]::before { background: var(--gold-accent); }


/* =========================================================
   CONTACT (guide book request form)
   ========================================================= */
.contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 4.5vw, 72px); }
.contact .h2 { margin-bottom: 36px; font-size: 46px; }

/* Wrapper for the provider form embed. */
.qf-embed { max-width: 620px; }
.qf-embed iframe { display: block; width: 100%; min-height: 320px; border: 0; background: transparent; }


/* =========================================================
   FOOTER
   Brand block plus four link columns, then a base row with the
   copyright, round social buttons, and the site credit.
   ========================================================= */
.site-footer { padding-top: clamp(56px, 7vw, 88px); background: var(--dark); color: rgba(255,255,255,.78); }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: 48px clamp(28px, 3.5vw, 56px);
  padding-bottom: clamp(48px, 6vw, 72px);
}
.site-footer .brand { display: inline-flex; margin-right: 0; gap: 6px; font-size: 20px; }
.site-footer .brand-role { margin-right: -.16em; font-size: 8px; letter-spacing: .16em; }
.footer-brand p { max-width: 30ch; margin: 22px 0 0; font-size: 15px; line-height: 1.6; }
.footer-head {
  margin: 0 0 18px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.footer-col { font-size: 15px; line-height: 1.6; }
.footer-col p { margin: 0; color: #fff; }
.footer-col .footer-note { margin-top: 6px; font-size: 14px; color: rgba(255,255,255,.7); }
.footer-links { margin-top: -5px; }
.footer-links li + li { margin-top: 2px; }
.footer-links a { display: inline-block; padding-block: 5px; color: rgba(255,255,255,.88); text-decoration: none; }
.footer-links a:hover, .footer-base p a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.footer-links a[aria-current="page"] { color: #fff; }
.footer-base {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px 24px;
  padding-block: 24px 32px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 14px;
  color: rgba(255,255,255,.7);
}
.footer-base > p { grid-column: 1; grid-row: 1; margin: 0; }
.footer-base p a { color: inherit; text-decoration: none; }
.footer-social { grid-column: 2; grid-row: 1; display: flex; gap: 12px; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  color: #fff;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink-btn); }
.footer-social svg { width: 18px; height: 18px; }
.footer-credit { grid-column: 3; grid-row: 1; justify-self: end; display: inline-flex; }
.footer-credit a { display: inline-flex; opacity: .75; transition: opacity .2s ease; }
.footer-credit a:hover { opacity: 1; }
.footer-credit img { width: auto; height: 22px; }

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .footer-grid { gap: 36px 24px; }
  .footer-base { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .footer-social { grid-column: 1; grid-row: 1; }
  .footer-base > p { grid-column: 1; grid-row: 2; }
  .footer-credit { grid-column: 1; grid-row: 3; justify-self: center; }
}


/* =========================================================
   ABOUT PAGE
   ========================================================= */
/* Longer watermark words are set smaller so the whole word stays in view. */
.page-hero[data-mark="Events"]::before { font-size: clamp(130px, 24vw, 360px); }
.page-hero[data-mark="Coaching"]::before,
.page-hero[data-mark="Resources"]::before { font-size: clamp(96px, 17vw, 250px); }

/* Coaching page: heading on the left, supporting copy on the right. */
.approach-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: start;
}
.approach-head { position: sticky; top: calc(var(--header-h-solid) + 40px); }
.approach-more { margin-top: 30px; }

/* Upcoming events: one row per event with the details and a sign-up button. */
.upcoming .h2 em { display: inline; }
.upcoming .lead-text { max-width: none; margin: 24px 0 0; }
.upcoming-list { display: grid; gap: clamp(40px, 5vw, 64px); }
.upcoming-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: 40px clamp(24px, 3.4vw, 48px);
  border-top: 2px solid var(--gold-accent);
  background: var(--cream);
}
.upcoming-tag { margin: 0 0 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); }
.upcoming-card h3 { margin: 0 0 14px; font-size: 34px; line-height: 1.15; }
.upcoming-desc { max-width: none; margin: 0 0 20px; line-height: 1.65; }
.upcoming-facts { display: grid; gap: 8px; margin: 0; }
.upcoming-facts div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
.upcoming-facts dt { padding-top: 3px; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); }
.upcoming-facts dd { margin: 0; color: var(--ink); }
.upcoming-action { text-align: center; }
.signup {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 64px);
  padding: 48px clamp(24px, 3.4vw, 48px);
  border-top: 2px solid var(--gold-accent);
  background: var(--cream);
}
.signup .h2 { margin: 0 0 18px; }
.signup-lead { max-width: 420px; margin: 0 0 26px; line-height: 1.65; }
.signup .qf-embed { max-width: none; }
.upcoming-via { margin: 12px 0 0; font-size: 12px; color: var(--body); }
@media (max-width: 1024px) {
  .signup { grid-template-columns: minmax(0, 1fr); }
  .upcoming-card { grid-template-columns: minmax(0, 1fr); }
  .upcoming-action { text-align: left; }
}
@media (max-width: 767px) {
  .upcoming-card { gap: 22px; padding: 28px 22px 30px; }
  .upcoming-card h3 { font-size: 26px; }
  .signup { padding: 28px 22px 30px; }
  .upcoming-facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Contact page: ways to connect on the left, message form on the right. */
.page-hero[data-mark="Contact"]::before { font-size: clamp(110px, 20vw, 300px); }
.reach-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: start;
}
.reach .h2 { margin-bottom: 30px; font-size: 46px; }
.reach .h2 em { display: inline; }
.reach-list > li { padding: 26px 0; border-top: 1px solid var(--rule); }
.reach-list > li:last-child { padding-bottom: 0; }
.reach-list .micro-label { margin-bottom: 10px; color: var(--gold-deep); }
.reach-list p { margin: 0 0 6px; line-height: 1.65; }
.reach-list .btn-lux { margin-top: 14px; }
.reach-place { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--ink); }
.reach-form { padding: clamp(28px, 3.6vw, 52px); border-top: 2px solid var(--gold-accent); background: var(--bg); box-shadow: 0 18px 44px rgba(var(--ink-rgb),.10), 0 3px 10px rgba(var(--ink-rgb),.06); }
.reach-form .qf-embed { max-width: none; }
.reach-guide { margin: 26px 0 0; font-size: 15px; }
.reach-guide a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold-accent); text-underline-offset: 4px; }
@media (max-width: 1024px) {
  .reach-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .reach .h2 { font-size: 40px; }
}
@media (max-width: 767px) {
  .reach .h2 { font-size: 32px; }
}

/* Events page: two-column grid of photo cards. */
.events-intro { max-width: none; }
.events-intro .h2 em { display: inline; }
.events-intro .lead-text { max-width: none; margin: 24px 0 0; }
.event-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 40px; }
.event-card { display: flex; flex-direction: column; background: var(--bg); box-shadow: 0 18px 44px rgba(var(--ink-rgb),.10), 0 3px 10px rgba(var(--ink-rgb),.06); }
.event-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.event-body { padding: 30px 34px 34px; border-top: 2px solid var(--gold-accent); }
.event-meta { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.event-num { font-family: var(--serif); font-size: 18px; font-style: italic; font-variant-numeric: lining-nums; color: var(--gold-deep); }
.event-tag { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); }
.event-card h3 { margin: 0 0 8px; font-size: 30px; line-height: 1.15; }
.event-sub { margin: 0; color: var(--body); }
@media (max-width: 1024px) {
  .approach-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .approach-head { position: static; }
}
@media (max-width: 767px) {
  .event-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .event-body { padding: 24px 22px 26px; }
  .event-card h3 { font-size: 24px; }
}

/* Featured testimonial: one quote set large, with its opening word as a
   display line and an oversized quotation mark behind it. */
.spotlight { position: relative; overflow: hidden; text-align: center; }
.spotlight::before {
  content: "\201C";
  position: absolute;
  top: -.06em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: clamp(260px, 34vw, 520px);
  font-weight: 700;
  line-height: 1;
  color: var(--gold-accent);
  opacity: .07;
  pointer-events: none;
}
.spotlight-inner { position: relative; margin-block: 0; }
.spotlight .eyebrow { margin: -14px 0 8px; font-family: var(--sans); }
.spotlight .stars { justify-content: center; margin-bottom: 20px; font-size: 18px; }
.spotlight blockquote { max-width: 1220px; margin-inline: auto; }
.spotlight blockquote p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(21px, 2.3vw, 31px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: balance;
}
.spotlight-lead {
  display: block;
  margin-bottom: .28em;
  font-family: var(--display);
  font-size: clamp(34px, 4.4vw, 60px);
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--gold-accent);
}

/* Dark page heading that sits under the overlay header. The faint word
   in the corner comes from the data-mark attribute. */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--header-h) + 84px) 96px;
  background: var(--dark);
}
.page-hero::before {
  content: attr(data-mark);
  position: absolute;
  right: max(-10px, calc((100% - var(--maxw)) / 2 + 30px));
  bottom: -.2em;
  font-family: var(--serif);
  font-size: clamp(150px, 27vw, 400px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--gold);
  opacity: .036;
  pointer-events: none;
}
.page-hero .wrap { position: relative; }
.page-hero .eyebrow { color: var(--gold); }
.page-hero-title {
  font-size: clamp(48px, 6vw, 92px);
  line-height: 1;
  letter-spacing: .01em;
  color: #fff;
}
.page-hero-title em { font-weight: 400; font-style: italic; color: var(--gold); }
.page-hero-lead {
  max-width: 560px;
  margin: 30px 0 0;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
  line-height: 1.45;
  color: rgba(255,255,255,.92);
}

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: start;
}
/* Photo stays in view beside the long bio */
.story-figure { position: sticky; top: calc(var(--header-h-solid) + 40px); }
.bio-light p { color: var(--body); }
.bio-light strong { color: var(--ink); }
.bio-light .micro-label { color: var(--gold-deep); }
.bio-light .micro-label.gap { border-top-color: var(--rule); }
.bio-light .bio-belief { border-left-color: var(--gold-accent); }
.bio-light .bio-belief .belief-line { color: var(--ink); }

.creds-strip { padding-block: 64px; }
.creds-strip .eyebrow { margin-bottom: 30px; text-align: center; }
.creds-list { justify-content: center; gap: 24px 64px; }
.creds-list li { width: 150px; gap: 14px; }
.creds-list img { height: 104px; }
.creds-list span { font-size: 11px; color: var(--ink); }

/* Text link with an arrow that slides on hover */
.about-more { margin: 30px 0 0; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gold-accent);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.text-link .icon { width: 22px; height: 22px; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.text-link:hover { color: var(--gold-deep); }
.text-link:hover .icon { transform: translateX(6px); }

@media (max-width: 1024px) {
  .page-hero { padding-block: calc(var(--header-h) + 56px) 72px; }
  .story-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .story-figure { position: relative; top: 0; max-width: 460px; }
}
@media (max-width: 767px) {
  .page-hero { padding-block: calc(var(--header-h) + 40px) 56px; }
  .page-hero-lead { font-size: 20px; }
  .creds-strip { padding-block: 48px; }
  .creds-list { gap: 22px 12px; justify-content: space-between; }
  .creds-list li { width: 46%; }
  .creds-list img { height: 84px; }
}


/* =========================================================
   SIMPLE PAGES (privacy policy, 404)
   ========================================================= */
.page-head { padding-block: 70px 60px; background: var(--brown); }
.page-head .eyebrow { margin-bottom: 14px; color: var(--gold); }
.page-head a { color: var(--gold); text-decoration: none; }
.page-head a:hover { text-decoration: underline; }
.page-head h1 { font-size: 48px; line-height: 58px; letter-spacing: 1.2px; color: var(--on-dark); }
.doc { max-width: 820px; padding-block: 60px 90px; color: #3F4958; font-size: 17px; line-height: 1.65; }
.doc h2 { margin: 40px 0 12px; font-size: 26px; line-height: 1.25; }
.doc p, .doc ul { margin: 0 0 16px; }
.doc ul { padding-left: 22px; list-style: disc; }
.doc li { margin-bottom: 6px; }
.doc a { color: var(--gold-deep); text-underline-offset: 3px; }
.notfound { padding-block: 120px; text-align: center; }
.notfound h1 { font-size: 64px; line-height: 1.1; margin-bottom: 20px; }
.notfound p { max-width: 520px; margin: 0 auto 32px; font-size: 18px; color: var(--body-warm); }


/* =========================================================
   TABLET (<= 1024px)
   ========================================================= */
@media (max-width: 1024px){
  :root{ --gut: 20px; --sec-pad: 64px; --header-h: 80px; --header-h-solid: 70px; }

  .h2 { font-size: 44px; }
  .sec-head { margin-bottom: 44px; }

  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .about-figure { max-width: 460px; }
  .about-lead, .about-body, .about-facts { max-width: 720px; }

  /* Services: two columns, rows divided by the top rule */
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; }
  .svc { padding: 30px 24px 34px 0; border-top: 1px solid rgba(var(--ink-rgb),.28); }
  .svc + .svc { padding-left: 24px; }
  .svc:nth-child(odd) { padding-left: 0; border-left: 0; }
  .svc:nth-child(odd)::before { left: 0; }
  .svc + .svc::before { left: 24px; }
  .svc:nth-child(odd)::before { left: 0; }
  .svc-num { margin-bottom: 30px; }

  .guide-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .frame-panel { max-width: 560px; }

  .legacy { padding-block: 72px; }
  .mission { padding-block: 98px 72px; }

  .legacy-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .legacy-head { position: static; }
  .legacy-lead { max-width: 560px; }
  .passions { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 60px; padding-top: 40px; }

  .contact .h2 { font-size: 40px; }
  .ts-arrow { width: 48px; height: 48px; margin-top: -24px; }
  .ts-prev { left: -14px; }
  .ts-next { right: -14px; }
}


/* =========================================================
   PHONE (<= 767px)
   ========================================================= */
@media (max-width: 767px){
  :root{ --sec-pad: 52px; }

  .eyebrow { font-size: 11px; margin-bottom: 14px; }
  .h2, .contact .h2 { font-size: 32px; }
  .sec-head { margin-bottom: 34px; }
  .lead-text { font-size: 17px; }

  .about-grid { gap: 44px; }
  .about-figure { margin: 0 0 16px 30px; }
  .about-frame::before { transform: translate(-14px, 14px); }
  .about-place { left: -30px; font-size: 9px; }
  .about-copy .h2 { margin-bottom: 22px; font-size: 30px; }
  .about-lead { font-size: 17px; }
  .about-body p { font-size: 15px; }
  .about-facts { gap: 16px; margin-top: 30px; padding-top: 24px; }
  .about-facts li { font-size: 9.5px; letter-spacing: .1em; }
  .about-facts strong { font-size: 25px; }

  .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .svc, .svc + .svc { padding: 26px 0 30px; border-left: 0; }
  .svc + .svc::before { left: 0; }
  .svc-num { margin-bottom: 20px; }
  .svc h3 { font-size: 21px; }

  .frame-panel { margin: 0 14px 14px 0; }
  .frame-panel::before { transform: translate(14px, 14px); }
  .frame-left { margin: 0 0 14px 14px; }
  .frame-left::before { transform: translate(-14px, 14px); }
  .guide-grid, .contact-grid { gap: 44px; }
  .guide-copy .btn-lux { width: 100%; }

  .legacy { padding-block: 56px; }
  .mission { padding-block: 78px 52px; }
  .mission-note { margin-top: 30px; font-size: 14.5px; }
  .mission-note::before { width: 96px; margin-bottom: 22px; }

  .cta-band-actions { flex-direction: column; }

  .legacy-lead { font-size: 20px; }
  .bio p { font-size: 16px; }
  .bio-belief { padding-left: 18px; }
  .bio-belief .belief-line { font-size: 21px; }
  .passions { gap: 28px 16px; margin-top: 48px; padding-top: 34px; }
  .passion figcaption { margin-top: 14px; font-size: 17px; }

  .ts-arrow { display: none; }
  .ts-slide { flex-basis: 100%; }
  .tcard { padding: 30px 24px; }
  .tcard blockquote p { font-size: 17px; }



  .page-head { padding-block: 44px 40px; }
  .page-head h1 { font-size: 34px; line-height: 42px; }
  .notfound h1 { font-size: 42px; }
}


/* =========================================================
   MOTION PREFERENCES
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .ts-arrow { transition: none; }
  .ev, .ev-side, .ev-info, .ev-arrow, .ev-progress i { transition: none !important; }
  .site-header::before, .masthead, .site-nav, .nav-list a::after, .nav-cta, .nav-cta::before, .btn-lux, .btn-lux::before { transition: none !important; }
}