/* =========================================================================
   Frontend stylesheet.

   Every colour, font and size comes from the CSS custom properties that the
   admin panel generates in <style id="theme-vars"> — nothing here is a
   hard-coded brand value, so changing a setting re-skins the whole site.

   The visual language is BPK Academy's: squared-off edges, hairline rules,
   a serif display face over uppercase micro-type, and shadows that are wide,
   low and almost invisible rather than dark and close.
   ========================================================================= */

/* Two rhythm values the whole page leans on. They are plain numbers rather
   than theme tokens because they describe proportion, not brand. */
:root {
  --rule: 1px;
  --hairline: rgba(var(--rgb-heading), .1);
  --hairline-soft: rgba(var(--rgb-heading), .06);
  --micro: .18em;
  /* the container gutter, shared so full-bleed children can cancel it */
  --gut: clamp(20px, 5vw, 48px);
  --lift: cubic-bezier(.16, .84, .44, 1);
  /* A wide, low, barely-there shadow. Objects look lifted off cream paper
     rather than dropped onto it. */
  --shadow-lift: 0 46px 78px -56px rgba(var(--rgb-heading), calc(.55 * var(--shadow-strength)));
  --shadow-lift-lg: 0 60px 96px -60px rgba(var(--rgb-heading), calc(.62 * var(--shadow-strength)));
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h, 76px) + 12px);
  /* Decorative elements (hero glows, the overlapping about image) can poke past
     the right edge, so horizontal overflow is clipped here rather than on body.
     Putting it on body turns body into its own scroll container, which caps how
     far the page can scroll and leaves the end of the page unreachable. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--base-font-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--sec-heading, var(--color-heading));
  font-weight: var(--heading-weight);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: var(--heading-transform);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(var(--h1-size-mobile), 4.4vw + .9rem, var(--h1-size)); }
h2 { font-size: clamp(var(--h2-size-mobile), 2.6vw + .8rem, var(--h2-size)); }
h3 { font-size: var(--h3-size); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--color-link); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--color-link-hover); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }

strong, b { font-weight: 600; }

/* The display face carries the headings; body copy stays quiet, so bold inside
   a paragraph is a colour shift rather than a weight jump. */
.lead strong, .section__intro strong, .prose__body strong { color: var(--sec-heading, var(--color-heading)); }

::selection { background: var(--color-blush); color: var(--color-heading); }

/* focus visibility — never removed, only restyled */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 2000;
  background: var(--color-heading); color: var(--color-bg);
  padding: 12px 18px; border-radius: 0;
  font-size: .7rem; font-weight: 600; letter-spacing: var(--micro); text-transform: uppercase;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; color: var(--color-bg); }

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

/* ----------------------------------------------------------------- layout */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gut);
  max-width: calc(var(--container-width) + 2 * var(--gut));
}
.container--narrow { max-width: calc(820px + 2 * var(--gut)); }
.container--wide   { max-width: calc(var(--container-width) + 180px + 2 * var(--gut)); }
/* Redefining the gutter rather than the padding keeps full-bleed children,
   which cancel --gut to reach the viewport edge, in step with it. */
.container--full   { max-width: 100%; --gut: clamp(16px, 3vw, 32px); }

.section {
  position: relative;
  padding-top: var(--section-pt, var(--section-padding));
  padding-bottom: var(--section-pb, var(--section-padding));
  isolation: isolate;
  --sec-heading: var(--color-heading);
  --sec-text: var(--color-text);
  --sec-muted: var(--color-muted);
  --sec-card: var(--color-card);
  --sec-card-border: var(--color-card-border);
  --sec-border: var(--color-border);
  color: var(--sec-text);
}

.section.tone-light {
  --sec-heading: var(--color-bg);
  --sec-text: rgba(253, 249, 248, .8);
  --sec-muted: rgba(253, 249, 248, .55);
  --sec-card: rgba(253, 249, 248, .05);
  --sec-card-border: rgba(253, 249, 248, .14);
  --sec-border: rgba(253, 249, 248, .16);
}
/* On espresso the display face gets a hair more tracking — the cream-on-dark
   reversal makes the letterforms read tighter than they are. */
.section.tone-light h1, .section.tone-light h2, .section.tone-light h3 { letter-spacing: -.008em; }
.section.tone-dark {
  --sec-heading: var(--color-heading);
  --sec-text: var(--color-text);
  --sec-muted: var(--color-muted);
}

/* background layers */
.section__bg, .section__overlay, .section__video {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
}
.section__bg img, .section__video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.section__bg.is-parallax { inset: -12% 0; will-change: transform; }
.section__bg.is-kenburns img { animation: kenburns 26s ease-in-out infinite alternate; transform-origin: center; }
.section__overlay { z-index: -1; }
.section__video { z-index: -2; }

@keyframes kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -1.5%, 0); }
}

.section__divider {
  position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: 1; pointer-events: none;
}
.section__divider svg { width: 100%; height: clamp(40px, 6vw, 96px); display: block; fill: var(--color-bg); }

.section__head { margin-bottom: clamp(44px, 5.5vw, 72px); }
.section__head.align-center { text-align: center; max-width: 62ch; margin-inline: auto; }
.section__head.align-left   { text-align: left; max-width: 58ch; }
.section__title { margin-bottom: .38em; }
.section__intro { color: var(--sec-text); font-size: 1.04em; max-width: 56ch; }
.section__head.align-center .section__intro { margin-inline: auto; }
.align-center { text-align: center; }
.align-left   { text-align: left; }

/* A hairline rule, then the label — the one piece of ornament the design uses,
   so it stays thin and long rather than short and heavy. */
.eyebrow {
  font-size: var(--eyebrow-size);
  line-height: 1.4;
  letter-spacing: var(--eyebrow-spacing);
  text-transform: var(--eyebrow-transform);
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 1.35em;
  display: flex; align-items: center; gap: 1rem;
}
.section__head.align-center .eyebrow { justify-content: center; }
.eyebrow::before {
  content: ""; width: clamp(28px, 4vw, 54px); height: 1px; border-radius: 0;
  background: currentColor; opacity: .6; flex: none;
}
/* On espresso the rose reads muddy — the blush is what BPK uses there. */
.tone-light .eyebrow { color: var(--color-blush); }

.hl { color: var(--color-accent); font-style: normal; }
.tone-light .hl { color: var(--color-blush); }
.lead { font-size: 1.1em; color: var(--sec-heading, var(--color-heading)); }
.empty-note {
  text-align: center; color: var(--sec-muted); border: 1px dashed var(--sec-border);
  padding: 40px 20px; border-radius: 0;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
}

/* ---------------------------------------------------------------- buttons */
/* Buttons do not change colour on hover — a fill wipes up from the bottom
   edge behind the label. The label sits on z-index 1 so it survives the wipe. */
.btn {
  --btn-bg: var(--color-btn);
  --btn-fg: var(--color-btn-text);
  --btn-bd: var(--color-btn);
  --btn-fill: var(--color-btn-hover);
  --btn-fill-fg: var(--color-btn-hover-text);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--font-button);
  font-size: var(--button-size);
  font-weight: var(--button-weight);
  letter-spacing: var(--button-letter-spacing);
  text-transform: var(--button-transform);
  line-height: 1;
  padding: 1.15em 2.1em;
  border-radius: var(--radius-button);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: none;
  transition: color .45s var(--lift), border-color .45s var(--lift), transform .45s var(--lift);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--btn-fill);
  transform: translateY(101%);
  transition: transform .5s var(--lift);
}
.btn > span, .btn > svg { position: relative; z-index: 1; }
.btn:hover {
  color: var(--btn-fill-fg);
  border-color: var(--btn-fill);
  transform: translateY(-2px);
  box-shadow: none;
}
.btn:hover::after { transform: none; }
.btn:active { transform: translateY(0); }

/* Blush button: the wipe goes to white, because blush-on-blush has nowhere
   to go and the label has to stay ink either way. */
.btn--secondary {
  --btn-bg: var(--color-btn2); --btn-fg: var(--color-btn2-text); --btn-bd: var(--color-btn2);
  --btn-fill: #fff; --btn-fill-fg: var(--color-heading);
}
.btn--secondary:hover { border-color: #fff; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--sec-heading, var(--color-heading));
  --btn-bd: var(--sec-border, var(--hairline));
  --btn-fill: var(--color-heading);
  --btn-fill-fg: var(--color-bg);
}
.tone-light .btn--ghost { --btn-fill: var(--color-blush); --btn-fill-fg: var(--color-heading); }

/* Not a button at all — a small uppercase label over a rule, with an arrow
   that steps forward. */
.btn--link {
  --btn-bg: transparent; --btn-fg: var(--sec-heading, var(--color-heading)); --btn-bd: transparent;
  padding: 0 0 .45em; overflow: visible;
  border: 0; border-bottom: 1px solid var(--sec-border, var(--hairline));
  border-radius: 0;
  transition: color .4s var(--lift), border-color .4s var(--lift), gap .4s var(--lift);
}
.btn--link::after { content: none; }
.btn--link > span::after {
  content: " \2192"; display: inline-block; margin-left: .55em;
  transition: transform .4s var(--lift);
}
.btn--link:hover {
  color: var(--color-primary); border-color: var(--color-primary);
  transform: none;
}
.btn--link:hover > span::after { transform: translateX(4px); }

.btn--sm { padding: .95em 1.6em; font-size: calc(var(--button-size) - .5px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.35rem; }
.align-center .btn-row, .section__head.align-center + * .btn-row { justify-content: center; }
.services .btn-row, .gallery .btn-row { justify-content: center; margin-top: 3rem; }

/* ------------------------------------------------------------- animations */
[data-anim] { --d: var(--anim-duration); --delay: 0ms; }

html.anim-ready [data-anim] {
  opacity: 0;
  transition:
    opacity var(--d) var(--anim-easing) var(--delay),
    transform var(--d) var(--anim-easing) var(--delay),
    filter var(--d) var(--anim-easing) var(--delay),
    clip-path var(--d) var(--anim-easing) var(--delay);
  will-change: opacity, transform;
}
html.anim-ready [data-anim="fade-up"]    { transform: translate3d(0, var(--anim-distance), 0); }
html.anim-ready [data-anim="fade-down"]  { transform: translate3d(0, calc(-1 * var(--anim-distance)), 0); }
html.anim-ready [data-anim="fade-left"]  { transform: translate3d(calc(-1 * var(--anim-distance) * 1.6), 0, 0); }
html.anim-ready [data-anim="fade-right"] { transform: translate3d(calc(var(--anim-distance) * 1.6), 0, 0); }
html.anim-ready [data-anim="zoom-in"]    { transform: scale(.9); }
html.anim-ready [data-anim="zoom-out"]   { transform: scale(1.08); }
html.anim-ready [data-anim="blur-in"]    { filter: blur(14px); transform: scale(1.02); }
html.anim-ready [data-anim="flip-up"]    { transform: perspective(900px) rotateX(14deg) translate3d(0, var(--anim-distance), 0); transform-origin: bottom; }
html.anim-ready [data-anim="reveal-up"]  { opacity: 1; clip-path: inset(100% 0 0 0); }
html.anim-ready [data-anim="reveal-left"]{ opacity: 1; clip-path: inset(0 100% 0 0); }
html.anim-ready [data-anim^="reveal"] .media__inner > *,
html.anim-ready [data-anim^="reveal"] > .media__inner img { transform: scale(1.16); transition: transform calc(var(--d) * 1.4) var(--anim-easing) var(--delay); }

html.anim-ready [data-anim].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}
html.anim-ready [data-anim].is-visible .media__inner > *,
html.anim-ready [data-anim].is-visible > .media__inner img { transform: scale(1); }

/* stop reserving compositor memory once the animation has played */
html.anim-ready [data-anim].anim-done { will-change: auto; transition: none; }

.page-fade { animation: pageIn .7s var(--anim-easing) both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------ media */
/* A <picture> wrapper must not introduce an inline box, or the height:100%
   images inside cover-cropped frames lose their containing block. */
.section__bg picture, .gallery__frame picture, .card__image picture,
.member__photo picture, .quote__avatar picture, .video picture,
.shape-circle .media__inner picture {
  display: block; width: 100%; height: 100%;
}

.media { margin: 0; position: relative; }
.media__inner {
  display: block; overflow: hidden;
  border-radius: var(--radius-base);
  position: relative;
}
.media img, .media picture { width: 100%; display: block; }
.media--hero .media__inner { box-shadow: 0 40px 80px rgba(0, 0, 0, calc(.35 * var(--shadow-strength))); }

.shape-rounded .media__inner, .shape-rounded { border-radius: var(--radius-base); }
.shape-soft .media__inner    { border-radius: calc(var(--radius-base) * 2.2); }
.shape-square .media__inner  { border-radius: 0; }
.shape-arch .media__inner    { border-radius: 50vw 50vw var(--radius-base) var(--radius-base); }
.shape-circle .media__inner  { border-radius: 50%; aspect-ratio: 1; }
.shape-circle .media__inner img { height: 100%; object-fit: cover; }

/* ----------------------------------------------------------------- header */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 900;
  padding: 18px 0;
  transition: background-color .35s ease, box-shadow .35s ease, padding .35s ease, backdrop-filter .35s ease;
  --hdr-fg: var(--color-header-text);
}
.site-header.is-sticky { position: fixed; }
.site-header.is-transparent { background: transparent; --hdr-fg: var(--color-header-text-top); }
.site-header:not(.is-transparent) { background: var(--color-header); box-shadow: 0 1px 0 rgba(var(--rgb-heading), .08); }

/* Over the hero the bar is a soft fade rather than a hard edge, so the
   photograph is never cut by a line. It only becomes a surface once scrolled. */
.site-header.is-transparent:not(.is-scrolled) {
  background: linear-gradient(to bottom,
    rgba(var(--rgb-heading), .28), rgba(var(--rgb-heading), .1) 55%, transparent);
}
.site-header.is-scrolled {
  background: var(--color-header);
  background: color-mix(in srgb, var(--color-header) 86%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  --hdr-fg: var(--color-header-text);
  box-shadow: 0 1px 0 var(--hairline-soft), 0 14px 40px -28px rgba(var(--rgb-heading), calc(.45 * var(--shadow-strength)));
}
.site-header.has-border.is-scrolled { box-shadow: 0 1px 0 var(--hairline), 0 14px 40px -28px rgba(var(--rgb-heading), calc(.45 * var(--shadow-strength))); }
.site-header.can-shrink.is-scrolled { padding: 10px 0; }

@supports not (backdrop-filter: blur(1px)) {
  .site-header.is-scrolled { background: var(--color-header); }
}

.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--hdr-fg); }
.brand:hover { color: var(--hdr-fg); opacity: .85; }
.brand__logo { height: var(--logo-height); width: auto; display: block; transition: height .3s ease; }
.brand__logo--mobile, .brand__logo--light { display: none; }
.site-header.has-light-logo.is-transparent:not(.is-scrolled) .brand__logo--light { display: block; }
.site-header.has-light-logo.is-transparent:not(.is-scrolled) .brand__logo--desktop { display: none; }
.brand__text {
  font-family: var(--font-heading); font-weight: var(--heading-weight);
  font-size: 1.32rem; letter-spacing: -.01em; line-height: 1;
}
.brand__accent { color: var(--color-accent); }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(10px, 2.2vw, 28px); list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative;
  display: inline-block;
  font-family: var(--font-nav);
  font-size: var(--nav-size);
  font-weight: var(--nav-weight);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: var(--nav-transform);
  color: var(--hdr-fg);
  padding: 10px 4px;
  opacity: .85;
  transition: opacity .2s ease, color .2s ease;
}
.nav__link::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 1px;
  background: var(--color-primary); border-radius: 0;
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--lift);
}
.nav__link:hover { opacity: 1; color: var(--hdr-fg); }
.nav__link.is-active { opacity: 1; color: var(--color-primary); }
.site-header.is-transparent:not(.is-scrolled) .nav__link.is-active { color: var(--hdr-fg); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link--button {
  background: var(--color-heading); color: var(--color-btn-text); opacity: 1;
  padding: .8em 1.4em; border-radius: var(--radius-button);
}
.nav__link--button::after { display: none; }

.header__actions { display: flex; align-items: center; gap: 14px; }
.site-header.is-transparent:not(.is-scrolled) .header__cta { box-shadow: none; }

.burger {
  display: none; width: 44px; height: 44px; border: 0; background: transparent;
  cursor: pointer; padding: 11px; border-radius: 0; color: var(--hdr-fg);
}
.burger span {
  display: block; height: 1.5px; border-radius: 0; background: currentColor; margin: 5px 0;
  transition: transform .45s var(--lift), opacity .3s ease, width .3s ease;
}
.burger span:nth-child(2) { width: 70%; }
.burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* mobile navigation */
.mobile-nav {
  position: fixed; inset: 0; z-index: 890;
  background: var(--color-bg);
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .45s var(--lift), transform .55s var(--lift);
}
.mobile-nav.is-open { transform: none; }
.mobile-nav.is-open { opacity: 1; pointer-events: auto; }
.mobile-nav__panel { width: min(560px, 88vw); text-align: center; padding: 80px 0 40px; }
.mobile-nav__list { list-style: none; margin: 0 0 32px; padding: 0; }
.mobile-nav__list li { opacity: 0; transform: translateY(18px); }
.mobile-nav.is-open .mobile-nav__list li {
  animation: mobileItem .5s var(--anim-easing) forwards;
  animation-delay: calc(90ms + var(--i) * 60ms);
}
@keyframes mobileItem { to { opacity: 1; transform: none; } }
.mobile-nav__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--font-heading); font-size: clamp(24px, 7vw, 34px);
  font-weight: var(--heading-weight); letter-spacing: -.015em;
  color: var(--color-heading); padding: 14px 4px;
  border-bottom: 1px solid var(--hairline-soft);
  transition: color .35s var(--lift);
}
.mobile-nav__list a svg { width: 20px; height: 20px; opacity: .3; transition: transform .35s var(--lift), opacity .25s ease; }
.mobile-nav__list a:hover { color: var(--color-primary); }
.mobile-nav__list a:hover svg { transform: translateX(5px); opacity: 1; }
.mobile-nav__cta { width: 100%; }
.mobile-nav__social { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }
.mobile-nav__social a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--hairline); color: var(--color-heading); opacity: 1;
  transition: background-color .4s var(--lift), color .4s var(--lift), border-color .4s var(--lift), transform .4s var(--lift);
}
.mobile-nav__social a:hover {
  background: var(--color-heading); color: var(--color-bg);
  border-color: var(--color-heading); transform: translateY(-3px);
}
.mobile-nav__social svg { width: 18px; height: 18px; }

body.nav-open { overflow: hidden; }

/* scroll progress */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 950;
  background: transparent; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; width: 0;
  background: var(--color-primary);
  transition: width .1s linear;
}

/* ------------------------------------------------------------------- hero */
.hero {
  display: flex; align-items: center;
  overflow: hidden;
  padding-top: calc(var(--header-h, 76px) + clamp(48px, 8vw, 96px));
  padding-bottom: clamp(64px, 9vw, 120px);
}
.hero--h-full   { min-height: 100svh; }
.hero--h-large  { min-height: 85svh; }
.hero--h-medium { min-height: 70svh; }
.hero--h-auto   { min-height: 0; }

.hero__inner { width: 100%; display: grid; gap: clamp(40px, 6vw, 80px); align-items: center; }
.hero--split .hero__inner, .hero--split-alt .hero__inner { grid-template-columns: 1.05fr .95fr; }
.hero--split-alt .hero__content { order: 2; }
.hero--centered .hero__content { max-width: 900px; margin-inline: auto; }
.hero--left .hero__content { max-width: 760px; }

.hero__badge {
  display: inline-flex; align-items: center; gap: .75em;
  padding: .8em 1.25em; border-radius: 0;
  background: rgba(253, 249, 248, .9);
  border: 0;
  color: var(--color-heading);
  font-size: .65rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  margin: 0 0 1.7em;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.tone-dark .hero__badge, .hero:not(.tone-light) .hero__badge {
  background: var(--color-blush-soft);
  color: var(--color-heading);
}
/* A rose lozenge, not a blinking status light — this is an accreditation
   label, so it should sit still. */
.hero__badge-dot {
  width: 6px; height: 6px; border-radius: 0; background: var(--color-primary);
  transform: rotate(45deg);
}

.hero__title { margin-bottom: .38em; }
.hero__subtitle {
  font-family: var(--font-body); font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sec-muted); opacity: 1; margin-bottom: 1.4em;
}
.hero__text { font-size: clamp(16px, 1.2vw, 19px); color: var(--sec-text); max-width: 56ch; }
.hero--centered .hero__text { margin-inline: auto; }
.hero--centered .btn-row { justify-content: center; }

.hero__decor { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero__glow { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .55; }
.hero__glow--1 {
  width: 52vw; height: 52vw; left: -16vw; top: -18vw;
  background: radial-gradient(circle, rgba(var(--rgb-blush), .85), transparent 68%);
  animation: floatGlow 18s ease-in-out infinite alternate;
}
.hero__glow--2 {
  width: 40vw; height: 40vw; right: -12vw; bottom: -18vw;
  background: radial-gradient(circle, rgba(var(--rgb-primary), .3), transparent 70%);
  animation: floatGlow 22s ease-in-out infinite alternate-reverse;
}
@keyframes floatGlow {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4%, 6%, 0) scale(1.12); }
}

.hero__scroll {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  color: var(--sec-heading); font-size: 10px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  opacity: .8; transition: opacity .3s ease, color .4s var(--lift);
}
.hero__scroll:hover { opacity: 1; color: var(--color-primary); }
.hero__scroll-line { width: 1px; height: 56px; background: currentColor; opacity: .3; position: relative; overflow: hidden; }
/* A short travelling tick rather than a full bar wiping past — quieter, and it
   reads as a direction instead of a progress meter. */
.hero__scroll-line::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 20px;
  background: currentColor;
  animation: scrollLine 2.4s var(--anim-easing) infinite;
}
@keyframes scrollLine {
  0%        { transform: translateY(-100%); }
  60%, 100% { transform: translateY(280%); }
}

/* ------------------------------------------------- split hero, full bleed */
/* Below 1025px the split collapses to one column (see the responsive block),
   so all of this is scoped above that. */
@media (min-width: 1025px) {
  /* The section gives up its own vertical padding and hands it to the copy
     column, which lets the photograph run the whole height of the hero. */
  .hero--split, .hero--split-alt { padding-block: 0; }
  .hero--split .hero__inner,
  .hero--split-alt .hero__inner { gap: clamp(40px, 5vw, 72px); align-items: stretch; }

  .hero--split .hero__content,
  .hero--split-alt .hero__content {
    display: flex; flex-direction: column; justify-content: center;
    padding-block: calc(var(--header-h, 76px) + clamp(48px, 8vw, 96px)) clamp(64px, 9vw, 120px);
  }

  .hero--split .hero__media,
  .hero--split-alt .hero__media { align-self: stretch; position: relative; }

  /* Run the frame out to the viewport edge. The distance from the container's
     content box to that edge is whichever is larger: half the leftover width
     once the container has hit its max, or the container gutter while it has
     not. Overshoot from a scrollbar-inclusive 100vw is clipped by .hero. */
  .hero--split .hero__media {
    margin-right: calc(-1 * max((100vw - var(--container-width)) / 2, var(--gut)));
  }
  .hero--split-alt .hero__media {
    margin-left: calc(-1 * max((100vw - var(--container-width)) / 2, var(--gut)));
  }

  /* <picture> is a shrink-to-fit inline box by default, which would break the
     height:100% on the <img> inside it — same fix the stats backdrop needs. */
  .hero--split .media--hero,
  .hero--split-alt .media--hero { height: 100%; margin: 0; }
  .hero--split .media--hero .media__inner,
  .hero--split-alt .media--hero .media__inner { display: block; height: 100%; }
  .hero--split .media--hero picture,
  .hero--split-alt .media--hero picture { display: block; width: 100%; height: 100%; }
  .hero--split .media--hero img,
  .hero--split-alt .media--hero img { height: 100%; object-fit: cover; }

  /* A full-bleed photograph has no edge to cast from, so the lifted-card
     shadow goes. */
  .hero--split .media--hero .media__inner,
  .hero--split-alt .media--hero .media__inner { box-shadow: none; }

  /* Centre would put the cue on top of the photograph — move it into the
     gutter on whichever side the copy sits. */
  .hero--split .hero__scroll {
    left: var(--gut); right: auto; transform: none; align-items: flex-start;
  }
  .hero--split-alt .hero__scroll {
    left: auto; right: var(--gut); transform: none; align-items: flex-start;
  }
}

/* ------------------------------------------------------------------ about */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.about__grid--single { grid-template-columns: 1fr; max-width: 820px; margin-inline: auto; }
.about--image-right .about__media { order: 2; }
.about--stacked .about__grid { grid-template-columns: 1fr; }
.about--stacked .about__media { max-width: 100%; }

.about__media { position: relative; }
.media--about .media__inner { box-shadow: var(--shadow-lift); }
/* A hairline of the page colour separates the two frames instead of a thick
   white mount, which would read as a photo print. */
.media--about-2 {
  position: absolute; right: -6%; bottom: -8%;
  width: 44%; z-index: 2;
}
.media--about-2 .media__inner {
  border: 6px solid var(--color-bg);
  box-shadow: var(--shadow-lift);
}

/* The years-in-the-industry plate: cream card, display-face numeral, sitting
   just off the bottom-right corner of the photograph. */
.about__badge {
  position: absolute; right: -3%; bottom: -5%; left: auto; top: auto; z-index: 3;
  background: var(--color-bg); color: var(--color-heading);
  padding: 20px 24px; border-radius: 0;
  box-shadow: var(--shadow-lift-lg);
  text-align: left; min-width: 132px;
}
.about__badge-value {
  display: block; font-family: var(--font-heading); font-size: clamp(2.3rem, 4vw, 3.1rem);
  font-weight: var(--heading-weight); line-height: 1; letter-spacing: -.03em;
  color: var(--color-primary);
}
.about__badge-label {
  display: block; font-size: .65rem; font-weight: 500; opacity: 1; margin-top: 10px;
  letter-spacing: .17em; text-transform: uppercase; color: var(--color-muted);
}

.about__body .eyebrow { margin-bottom: 1.35em; }
.about__text + .about__text { margin-top: 1.35em; }

/* A ruled list, two up where there is room — closer to a credentials table
   than a bulleted list. */
.checklist {
  list-style: none; padding: 1px 0 0; margin: 2rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0 2rem; border-top: 1px solid var(--hairline-soft);
}
.checklist li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: .7rem 0; border-bottom: 1px solid var(--hairline-soft);
  color: var(--sec-heading, var(--color-heading));
  font-size: .84rem; line-height: 1.55;
}
.icon--check {
  flex: none; width: 16px; height: 16px; border-radius: 0;
  background: transparent; color: var(--color-primary);
  display: grid; place-items: center; margin-top: 4px;
}
.icon--check svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------------ cards */
.cards {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}
.cards--2 { --cols: 2; }
.cards--3 { --cols: 3; }
.cards--4 { --cols: 4; }

.card {
  position: relative;
  border-radius: var(--radius-base);
  background: var(--sec-card);
  border: 1px solid transparent;
  overflow: hidden;
  transition: transform .35s var(--anim-easing), box-shadow .35s ease, border-color .3s ease;
  display: flex; flex-direction: column;
}
/* Cards sit flat on the page until touched, then lift on a wide, low shadow.
   No resting shadow at all — that is what keeps the surface looking like paper. */
.cards--elevated .card { box-shadow: none; border-color: var(--sec-card-border); }
.cards--elevated .card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lift); }
.cards--bordered .card { border-color: var(--sec-card-border); background: transparent; }
.cards--bordered .card:hover { border-color: var(--color-primary); transform: translateY(-4px); }
.cards--minimal .card { background: transparent; }
.cards--minimal .card:hover { transform: translateY(-4px); }
/* The numbered variant is a column under a rule that fills in from the left. */
.cards--numbered .card {
  background: transparent; border: 0; border-top: 1px solid var(--sec-border);
  border-radius: 0; position: relative;
}
.cards--numbered .card::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 1px;
  background: var(--color-primary); transition: width .6s var(--lift);
}
.cards--numbered .card:hover::before { width: 100%; }
.cards--image-top .card { box-shadow: none; border-color: var(--sec-card-border); }
.cards--image-top .card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lift); }

.card__body { padding: clamp(24px, 2.4vw, 36px); display: flex; flex-direction: column; height: 100%; }
.cards--minimal .card__body, .cards--numbered .card__body { padding-inline: 0; }

/* A square crop, which is the proportion the training tiles are shot at.
   Deliberately no gradient scrim over the image: these tiles carry their own
   titles, and cards set to show them uncropped would letterbox against any
   tint we painted behind them. */
.card__image { overflow: hidden; aspect-ratio: 1 / 1; position: relative; }
.card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--lift); }
.card:hover .card__image img { transform: scale(1.04); }

.card__icon {
  width: 44px; height: 44px; border-radius: calc(var(--radius-base) * .8);
  display: grid; place-items: center; margin-bottom: 24px;
  transition: transform .5s var(--lift), background-color .4s ease, color .4s ease;
}
.card__icon svg { width: 26px; height: 26px; }
/* "Soft" is the default and, on paper, the quietest thing it can be is no
   plate at all — just the rose glyph. */
.icon-style--soft   { background: transparent; color: var(--color-primary); width: 40px; height: 40px; }
.icon-style--filled { background: var(--color-primary); color: #fff; }
.icon-style--plain  { background: transparent; color: var(--color-primary); width: auto; height: auto; }
.icon-style--circle { background: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); border-radius: 50%; }
.card:hover .card__icon { transform: translateY(-3px); }
.card:hover .icon-style--soft { background: transparent; color: var(--color-link-hover); }
.icon--glyph { font-size: 26px; line-height: 1; }

.card__number {
  display: block; font-family: var(--font-body); font-size: .7rem; font-weight: 600;
  color: var(--color-primary); opacity: 1; line-height: 1; margin-bottom: 26px;
  letter-spacing: .24em;
}
.card__title { font-size: var(--h3-size); margin-bottom: .55em; line-height: 1.25; }
.card__text { color: var(--sec-text); margin-bottom: 1.5em; font-size: .94em; }
/* Same shape as .btn--link: a label over a rule that changes colour, with the
   arrow stepping forward. */
.card__link {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: auto; align-self: flex-start; width: fit-content; padding-bottom: .45em;
  color: var(--sec-heading, var(--color-heading));
  font-size: var(--button-size); font-weight: 600;
  letter-spacing: var(--micro); text-transform: uppercase;
  border-bottom: 1px solid var(--sec-border);
  transition: color .4s var(--lift), border-color .4s var(--lift);
}
.card__link svg { width: 15px; height: 15px; transition: transform .4s var(--lift); }
.card__link:hover { color: var(--color-primary); border-color: var(--color-primary); }
.card__link:hover svg { transform: translateX(4px); }

/* Whole-card link.
   The photograph is the thing people aim at, not the small label underneath, so
   the card's existing link is stretched over the entire card instead of adding
   a second anchor around the image. One link in the DOM means a screen reader
   announces the destination once rather than twice, and the tab order picks up
   one stop per card rather than two.
   The overlay sits above .card__image, which is positioned, so it needs a
   z-index to win. */
.card--linked .card__link::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
/* Hovering anywhere on the card should light the label up, or the hit area and
   the affordance disagree. */
.card--linked:hover .card__link { color: var(--color-primary); border-color: var(--color-primary); }
.card--linked:hover .card__link svg { transform: translateX(4px); }

/* The overlay swallows pointer events, so the focus ring has to come from the
   link itself for keyboard users - draw it around the whole card. */
.card--linked:focus-within { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.card--linked .card__link:focus-visible { outline: none; }

/* ------------------------------------------------- standalone page header */
/* Pages borrow the whole homepage design; the only genuinely new pieces are
   this header, the back link, and the detail list used by "Key details". */
.pagehead {
  background:
    radial-gradient(120% 90% at 8% 0%, var(--color-blush-soft) 0%, transparent 58%),
    var(--color-bg);
  padding-top: calc(var(--header-h, 76px) + clamp(36px, 5vw, 64px));
  padding-bottom: clamp(48px, 6vw, 88px);
  overflow: hidden;
}
.pagehead__grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
.pagehead--media .pagehead__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.pagehead__title {
  font-size: clamp(var(--h1-size-mobile), 3.4vw + .9rem, calc(var(--h1-size) * .82));
  margin-bottom: .38em;
}
.pagehead__lead { max-width: 56ch; }
.media--pagehead .media__inner { box-shadow: var(--shadow-lift); }

/* The back link doubles as the page's only navigation affordance, so it gets
   the same uppercase micro-type as the buttons rather than looking like body
   copy with an arrow stuck on it. */
.pagehead__back {
  display: inline-flex; align-items: center; gap: .7em;
  margin-bottom: clamp(28px, 4vw, 48px);
  color: var(--color-muted);
  font-size: var(--button-size); font-weight: 600;
  letter-spacing: var(--micro); text-transform: uppercase;
  transition: color .4s var(--lift), gap .4s var(--lift);
}
.pagehead__back svg { width: 16px; height: 16px; transition: transform .4s var(--lift); }
.pagehead__back:hover { color: var(--color-primary); }
.pagehead__back:hover svg { transform: translateX(-4px); }

.pagefoot {
  background: var(--color-bg);
  padding-block: clamp(36px, 5vw, 64px);
  border-top: 1px solid var(--hairline-soft);
}
.pagefoot .pagehead__back { margin-bottom: 0; }

@media (max-width: 900px) {
  .pagehead--media .pagehead__grid { grid-template-columns: 1fr; }
  .pagehead__media { max-width: 560px; }
}

/* Page blocks reuse the homepage classes; these only tune the two lists that
   sit on their own rather than inside an About or Contact column. */
.checklist--page { margin-top: 0; }
.page-block--list .checklist,
.page-block--details .factlist { max-width: 62rem; }

/* "Duration / Location / Price / Deposit" — a ruled label-and-value table. */
.factlist {
  display: grid; gap: 0;
  border-top: 1px solid var(--sec-border);
  max-width: 62rem;
}
.factlist > div {
  display: grid; gap: .35rem .5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.factlist dt {
  font-size: .62rem; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--color-primary);
}
.factlist dd { font-size: .98em; color: var(--sec-heading, var(--color-heading)); }
@media (min-width: 640px) {
  .factlist > div { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); align-items: baseline; }
}

/* The steps list is the homepage timeline without the connecting rule, which
   would otherwise dangle past a short four-step sequence. */
.timeline__list--page { max-width: 62rem; }
.timeline__list--page::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 27px; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--sec-border) 8%, var(--sec-border) 92%, transparent);
}

/* ---------------------------------------------------------------- gallery */
.gallery__grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.cols-2 { --cols: 2; } .cols-3 { --cols: 3; } .cols-4 { --cols: 4; } .cols-5 { --cols: 5; } .cols-1 { --cols: 1; }
.gap-none { gap: 0; } .gap-sm { gap: 10px; } .gap-md { gap: var(--grid-gap); } .gap-lg { gap: calc(var(--grid-gap) * 1.8); }

.gallery__item { margin: 0; position: relative; }
.gallery__frame {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  position: relative; overflow: hidden; border-radius: var(--radius-base);
  aspect-ratio: var(--tile-ratio, 4 / 3);
}
.gallery__frame .media__inner { display: block; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; }
.gallery__frame { background: var(--color-blush-soft); }
.gallery__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--lift), filter .5s ease; }

.hover-zoom .gallery__frame:hover img { transform: scale(1.055); }
.hover-lift .gallery__item { transition: transform .5s var(--lift), box-shadow .5s ease; }
.hover-lift .gallery__item:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.hover-tint .gallery__frame::after {
  content: ""; position: absolute; inset: 0; background: var(--color-primary);
  opacity: 0; mix-blend-mode: multiply; transition: opacity .35s ease;
}
.hover-tint .gallery__frame:hover::after { opacity: .35; }

.gallery__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 26px 22px 20px; text-align: left;
  background: linear-gradient(to top, rgba(6, 16, 31, .88), rgba(6, 16, 31, 0));
  color: #fff;
  transform: translateY(12px); opacity: 0;
  transition: opacity .35s ease, transform .45s var(--anim-easing);
}
.gallery__frame:hover .gallery__caption,
.gallery__frame:focus-visible .gallery__caption { opacity: 1; transform: none; }
.hover-none .gallery__caption, .hover-tint .gallery__caption { opacity: 1; transform: none; }
/* Captions are set as micro-type, not as small headings — the photograph is
   the content and the words are a label on it. */
.gallery__caption-title {
  display: block; font-family: var(--font-body); font-weight: 600;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
}
.gallery__caption-text {
  display: block; font-size: .74rem; letter-spacing: .1em; opacity: .78; margin-top: 6px;
}

/* masonry + mosaic variants */
.gallery--masonry { display: block; column-count: var(--cols, 3); column-gap: var(--grid-gap); }
.gallery--masonry .gallery__item { break-inside: avoid; margin-bottom: var(--grid-gap); }
.gallery--masonry .gallery__frame { aspect-ratio: auto; }
.gallery--masonry .gallery__frame img { height: auto; }

.gallery--mosaic { grid-auto-flow: dense; }
.gallery--mosaic .is-feature { grid-column: span 2; grid-row: span 2; }
.gallery--mosaic .is-feature .gallery__frame { aspect-ratio: 1; height: 100%; }

.gallery--carousel {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 14px; scrollbar-width: thin;
}
.gallery--carousel .gallery__item { flex: 0 0 min(78vw, 420px); scroll-snap-align: center; }

/* ------------------------------------------------------------------ stats */
.stats__grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--grid-gap); }
.stat { text-align: center; padding: 12px; }
.stats--divided .stat { border-left: 1px solid var(--sec-border); }
.stats--divided .stat:first-child { border-left: 0; }
.stats--cards .stat {
  background: var(--sec-card); border: 1px solid var(--sec-card-border);
  border-radius: var(--radius-base); padding: 30px 20px;
}
.stat__icon { color: var(--color-primary); display: grid; place-items: center; margin-bottom: 16px; }
.stat__icon svg { width: 24px; height: 24px; }
/* The numeral is the display face at full size — it is the loudest thing in
   the band, so the label under it drops to micro-type. */
.stat__value {
  font-family: var(--font-heading); font-weight: var(--heading-weight); line-height: 1;
  font-size: clamp(2.6rem, 5vw, 4rem); color: var(--sec-heading);
  margin: 0 0 16px; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.stat__suffix { color: var(--color-primary); }
.stat__label {
  color: var(--sec-muted); margin: 0;
  font-size: .65rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  line-height: 1.6;
}

/* ----------------------------------------------------------- testimonials */
.quotes { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--grid-gap); }
.quote {
  margin: 0; padding: clamp(26px, 2.4vw, 38px);
  background: var(--sec-card); border: 1px solid var(--sec-card-border);
  border-radius: var(--radius-base); position: relative;
  display: flex; flex-direction: column; gap: 18px;
  transition: transform .35s var(--anim-easing), box-shadow .35s ease;
}
.testimonials--cards .quote { box-shadow: none; }
.quote:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.testimonials--minimal .quote { background: transparent; border: 0; border-left: 1px solid var(--color-primary); border-radius: 0; }
.testimonials--slider .quotes {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px;
}
.testimonials--slider .quote { flex: 0 0 min(84vw, 400px); scroll-snap-align: center; }

.quote__mark { color: var(--color-blush); opacity: 1; }
.quote__mark svg { width: 36px; height: 36px; }
.quote__rating { display: flex; gap: 4px; color: var(--color-primary); }
.icon--star svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
/* Reviews are set in the display face — they carry the section, so they get to
   look like a pull quote rather than another paragraph. */
.quote__text {
  margin: 0; color: var(--sec-heading, var(--color-heading));
  font-family: var(--font-heading); font-weight: var(--heading-weight);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.45; letter-spacing: -.012em;
}
.quote__author { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.quote__avatar { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: none; }
.quote__avatar img { width: 100%; height: 100%; object-fit: cover; }
.quote__meta strong {
  display: block; color: var(--sec-heading); font-family: var(--font-body);
  font-size: .75rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
}
.quote__meta span {
  display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sec-muted); margin-top: 6px;
}

/* Four across is a narrow column for a display face, so the quote steps down a
   size and tightens. Scoped to .cols-4 so the two- and three-up layouts keep
   the larger pull-quote they were designed around. */
.quotes.cols-4 .quote { padding: clamp(22px, 1.8vw, 30px); gap: 14px; }
.quotes.cols-4 .quote__text {
  font-size: clamp(.9rem, .85vw, 1.02rem);
  line-height: 1.5;
  letter-spacing: -.005em;
}
.quotes.cols-4 .quote__mark svg { width: 26px; height: 26px; }
.quotes.cols-4 .icon--star svg { width: 13px; height: 13px; }
.quotes.cols-4 .quote__meta strong { font-size: .68rem; letter-spacing: .16em; }
.quotes.cols-4 .quote__meta span { font-size: .62rem; letter-spacing: .12em; }
.quotes.cols-4 .quote__avatar { width: 38px; height: 38px; }

/* Reviews run from one line to seven, and a grid row is as tall as its tallest
   cell - one long review would otherwise set the height for all four. Cap the
   body and let the rest scroll away rather than stretch the section. */
.quotes.cols-4 .quote__text p {
  display: -webkit-box;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -------------------------------------------------- google review extras */
/* The cards themselves reuse .quote untouched. These are only the pieces
   Google's attribution policy adds: the rating summary, the reviewer profile
   link, the link to the review, and the source line. */
.quotes__summary {
  display: flex; align-items: baseline; justify-content: center; gap: .75rem;
  margin: 0 0 clamp(28px, 4vw, 44px);
  flex-wrap: wrap;
}
.quotes__summary strong {
  font-family: var(--font-heading); font-weight: var(--heading-weight);
  font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1;
  color: var(--sec-heading, var(--color-heading)); letter-spacing: -.03em;
}
.quotes__stars { display: inline-flex; gap: 3px; color: var(--color-primary); }
.quotes__stars .icon svg { width: 15px; height: 15px; fill: currentColor; }
.quotes__count {
  font-size: .65rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--sec-muted);
}

.quote--google .quote__meta strong a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: color .35s var(--lift), border-color .35s var(--lift);
}
.quote--google .quote__meta strong a:hover {
  color: var(--color-primary); border-color: var(--color-primary);
}

/* Policy requires a route to the review on Google Maps, so this link is not
   optional decoration — it stays visible rather than appearing on hover. */
.quote__source {
  display: inline-block; margin-top: 1.1rem; width: fit-content;
  font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sec-muted);
  padding-bottom: .35em; border-bottom: 1px solid var(--sec-border);
  transition: color .35s var(--lift), border-color .35s var(--lift);
}
.quote__source:hover { color: var(--color-primary); border-color: var(--color-primary); }

.quotes__attrib {
  margin: clamp(28px, 4vw, 44px) 0 0; text-align: center;
  font-size: .6rem; font-weight: 500; letter-spacing: .24em;
  text-transform: uppercase; color: var(--sec-muted);
}
.quotes__attrib span { color: var(--sec-heading, var(--color-heading)); }

/* Reviews arrive after the reveal observer has swept, so the script marks them
   visible itself — this makes sure that lands even mid-transition. */
.quotes--google [data-anim] { opacity: 1; transform: none; }

/* ------------------------------------------------------------------- team */
.team__grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--grid-gap); }
.member { position: relative; border-radius: var(--radius-base); overflow: hidden; }
.member__photo { aspect-ratio: var(--tile-ratio, 3 / 4); overflow: hidden; border-radius: var(--radius-base); }
.member__photo .media__inner { display: block; height: 100%; }
.member__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--anim-easing); }
.member:hover .member__photo img { transform: scale(1.05); }
.member__body { padding: 20px 4px 4px; }
.team--card .member { background: var(--sec-card); border: 1px solid var(--sec-card-border); }
.team--card .member__photo { border-radius: 0; }
.team--card .member__body { padding: 22px; }
.team--overlay .member__body {
  position: absolute; inset: auto 0 0 0; padding: 24px 20px; color: #fff;
  background: linear-gradient(to top, rgba(6, 16, 31, .9), transparent);
}
.team--overlay .member__name, .team--overlay .member__name a { color: #fff; }
.member__name { font-size: 1.15rem; margin-bottom: .35em; }
.member__role {
  color: var(--color-primary); margin-bottom: .9em; font-weight: 600;
  font-size: .65rem; letter-spacing: .2em; text-transform: uppercase;
}
.member__bio { color: var(--sec-text); font-size: .92em; margin: 0; }

/* -------------------------------------------------------------------- faq */
.faq__wrap { display: grid; gap: clamp(30px, 4vw, 60px); }
.faq--split .faq__wrap { grid-template-columns: .85fr 1.15fr; align-items: start; }
.faq--split .section__head { margin-bottom: 0; }
.faq--narrow .faq__list { max-width: 820px; margin-inline: auto; width: 100%; }
.faq--two-col .faq__list { columns: 2; column-gap: var(--grid-gap); }
.faq--two-col .faq__item { break-inside: avoid; }

.faq__item {
  border-bottom: 1px solid var(--sec-border);
  padding: 2px 0;
}
.faq__list > .faq__item:first-child { border-top: 1px solid var(--sec-border); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.15rem;
  line-height: 1.35; letter-spacing: -.01em;
  color: var(--sec-heading);
  transition: color .35s var(--lift);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--color-primary); }
/* A bare hairline cross that loses its upright when the row opens — no plate
   behind it, so the list stays a set of ruled rows. */
.faq__icon {
  flex: none; width: 22px; height: 22px; border-radius: 0;
  background: transparent; position: relative;
  transition: transform .45s var(--lift);
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--color-primary);
  transform: translate(-50%, -50%); border-radius: 0;
}
.faq__icon::before { width: 14px; height: 1px; }
.faq__icon::after  { width: 1px; height: 14px; transition: transform .4s var(--lift); }
.faq__item[open] .faq__icon { background: transparent; transform: rotate(180deg); }
.faq__item[open] .faq__icon::before, .faq__item[open] .faq__icon::after { background: var(--color-primary); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq__a { padding: 0 0 24px; color: var(--sec-text); max-width: 70ch; animation: faqIn .35s var(--anim-easing); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ logos */
.logos__strip { overflow: hidden; }
.logos__track {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: clamp(28px, 5vw, 72px);
}
.logos__item img, .logos__item svg { height: var(--logo-h, 40px); width: auto; object-fit: contain; }
.logos--muted .logos__item { filter: grayscale(1); opacity: .42; transition: filter .45s ease, opacity .45s ease; }
.logos--muted .logos__item:hover { filter: grayscale(0); opacity: 1; }
.logos__strip.is-marquee .logos__track {
  flex-wrap: nowrap; justify-content: flex-start; width: max-content;
  animation: marquee 32s linear infinite;
}
.logos__strip.is-marquee:hover .logos__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- pricing */
.plans { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--grid-gap); align-items: start; }
.plan {
  background: var(--sec-card); border: 1px solid var(--sec-card-border);
  border-radius: var(--radius-base); padding: clamp(26px, 2.4vw, 40px);
  display: flex; flex-direction: column; gap: 18px; position: relative;
  transition: transform .35s var(--anim-easing), box-shadow .35s ease;
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
/* The featured plan is marked by a rose edge, not a coloured glow. */
.plan.is-featured { border-color: var(--color-primary); box-shadow: none; }
.plan.is-featured:hover { box-shadow: var(--shadow-lift); }
.plan__flag {
  position: absolute; top: 0; left: 0; transform: none;
  background: var(--color-primary); color: #fff; font-size: .6rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; padding: 8px 14px; border-radius: 0; white-space: nowrap;
}
.plan__name {
  font-family: var(--font-body); font-size: .68rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--color-primary); margin: 0;
}
.plan__price {
  font-family: var(--font-heading); font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: var(--heading-weight); color: var(--sec-heading);
  margin: 0; line-height: 1; letter-spacing: -.035em;
}
.plan__price span {
  display: block; font-size: .62rem; font-weight: 500; color: var(--sec-muted);
  margin-top: 14px; letter-spacing: .18em; text-transform: uppercase;
}
.plan__features { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--sec-border); }
.plan__features li {
  display: flex; gap: 10px; align-items: flex-start; font-size: .88em;
  padding: .7rem 0; border-bottom: 1px solid var(--hairline-soft);
}
.plan .btn { margin-top: auto; width: 100%; }

/* The card download button stays outlined at rest, but wipes to the primary
   button's blush-on-ink hover rather than the ghost button's ink-on-white, so
   it matches the page's main call to action. The doubled selector outranks
   `.tone-light .btn--ghost`, which would otherwise recolour the wipe. */
.plan .btn--ghost.plan__download {
  --btn-fill: var(--color-btn-hover);
  --btn-fill-fg: var(--color-btn-hover-text);
}

/* --------------------------------------------------------------- timeline */
.timeline__list { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline__list::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 27px; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--sec-border) 8%, var(--sec-border) 92%, transparent);
}
.timeline__item { position: relative; padding: 0 0 44px 74px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__marker {
  position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%;
  background: var(--color-bg); border: 1px solid var(--sec-border);
  display: grid; place-items: center; color: var(--color-primary);
  font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.1rem; z-index: 1;
  transition: border-color .4s ease, color .4s ease, transform .45s var(--lift);
}
.timeline__item:hover .timeline__marker { border-color: var(--color-primary); transform: none; }
.timeline__marker svg { width: 22px; height: 22px; }
.timeline__step {
  color: var(--color-primary); font-weight: 600; font-size: .62rem;
  letter-spacing: .24em; text-transform: uppercase; margin: 0 0 .7em;
}
.timeline__title { font-size: 1.3rem; margin-bottom: .45em; }
.timeline__text { color: var(--sec-text); font-size: .94em; }

.timeline--alternating .timeline__list::before { left: 50%; transform: translateX(-50%); }
.timeline--steps .timeline__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--grid-gap); }
.timeline--steps .timeline__list::before { display: none; }
.timeline--steps .timeline__item { padding: 0; }
.timeline--steps .timeline__marker { position: static; margin-bottom: 20px; }

/* ------------------------------------------------------------------ video */
.video { position: relative; border-radius: var(--radius-base); overflow: hidden; margin-inline: auto; aspect-ratio: var(--tile-ratio, 16 / 9); box-shadow: 0 30px 70px rgba(var(--rgb-heading), calc(.18 * var(--shadow-strength))); }
.video--narrow { max-width: 780px; }
.video--normal { max-width: 1000px; }
.video--wide   { max-width: 100%; }
.video--full   { max-width: 100vw; border-radius: 0; }
.video video, .video iframe, .video img { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }

/* -------------------------------------------------------------- rich text */
.prose--narrow { max-width: 760px; }
.prose--normal { max-width: 900px; }
.prose--wide   { max-width: 1100px; }
.prose { margin-inline: auto; }
.prose.align-center { text-align: center; }
.prose__body h2, .prose__body h3, .prose__body h4 { margin-top: 1.6em; }
.prose__body ul, .prose__body ol { padding-left: 1.3em; }
.prose__body li { margin-bottom: .5em; }
.prose__body blockquote {
  margin: 2em 0; padding: 4px 0 4px 26px;
  border-left: 1px solid var(--color-primary); color: var(--sec-heading);
  font-family: var(--font-heading); font-weight: var(--heading-weight);
  font-size: 1.3em; line-height: 1.45; letter-spacing: -.012em;
}
/* Diamond markers pick up the motif used by the hero badge and the checklist. */
.prose__body ul { list-style: none; padding-left: 1.1em; }
.prose__body ul > li { position: relative; }
.prose__body ul > li::before {
  content: "\25C6"; position: absolute; left: -1.1em; top: .1em;
  font-size: .45em; color: var(--color-primary);
}

/* -------------------------------------------------------------------- cta */
/* The booking band: espresso, with two soft washes bled in from opposite
   corners. A flat rose panel would fight the cream page rather than close it. */
.cta__box {
  display: grid; gap: 32px; align-items: center;
  padding: clamp(44px, 6vw, 88px) clamp(32px, 5vw, 72px);
  border-radius: var(--radius-base);
  background: var(--color-bg-dark);
  color: var(--color-blush-soft); position: relative; overflow: hidden; isolation: isolate;
  box-shadow: none;
}
.cta__box::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 80% at 18% 12%, rgba(var(--rgb-blush), .2), transparent 62%),
    radial-gradient(55% 70% at 84% 88%, rgba(var(--rgb-primary), .32), transparent 65%);
  pointer-events: none;
}
.cta:not(.cta--boxed) .cta__box { background: none; box-shadow: none; padding: 0; color: inherit; }
.cta--split .cta__box { grid-template-columns: 1.4fr auto; }
.cta--centered .cta__box { text-align: center; justify-items: center; }
.cta--centered .btn-row { justify-content: center; }
.cta__title { color: inherit; margin-bottom: .34em; font-size: clamp(2rem, 4.4vw, 3.4rem); }
.cta--boxed .cta__title { color: var(--color-bg); }
.cta--boxed .eyebrow { color: var(--color-blush); }
.cta--boxed .hl { color: var(--color-blush); }
.cta__intro { opacity: .82; max-width: 52ch; }
.cta--centered .cta__intro { margin-inline: auto; }
.cta__box .btn-row { margin-top: 0; }
/* On espresso the primary button becomes the blush one and the ghost picks up
   a light hairline — the ink-on-cream pair has no contrast left down here. */
.cta--boxed .btn--primary {
  background: var(--color-blush); color: var(--color-heading);
  border-color: var(--color-blush); box-shadow: none;
  --btn-fill: #fff; --btn-fill-fg: var(--color-heading);
}
.cta--boxed .btn--primary:hover { border-color: #fff; }
.cta--boxed .btn--ghost {
  color: var(--color-bg); border-color: rgba(253, 249, 248, .28);
  --btn-fill: var(--color-blush); --btn-fill-fg: var(--color-heading);
}

/* ---------------------------------------------------------------- contact */
.contact__grid { display: grid; gap: clamp(32px, 4vw, 64px); align-items: start; }
.contact__grid--info-left  { grid-template-columns: .85fr 1.15fr; }
.contact__grid--info-right { grid-template-columns: 1.15fr .85fr; }
.contact__grid--info-right .contact__info { order: 2; }
.contact__grid--stacked, .contact__grid--form-only, .contact__grid--info-only { grid-template-columns: 1fr; }
.contact__grid--form-only .contact__form-wrap { max-width: 780px; margin-inline: auto; width: 100%; }

.contact__list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 26px; }
.contact__list > .contact__row { border-bottom: 1px solid var(--sec-border); padding-bottom: 22px; }
.contact__list > .contact__row:last-child { border-bottom: 0; padding-bottom: 0; }
.contact__row { display: flex; gap: 16px; align-items: flex-start; }
/* The detail rows read as a definition list — a rose label over the value,
   with the icon reduced to a plain glyph in the margin. */
.contact__ico {
  flex: none; width: 22px; height: 22px; border-radius: 0;
  background: transparent; color: var(--color-primary);
  display: grid; place-items: center; margin-top: 4px;
}
.contact__ico svg { width: 18px; height: 18px; }
.contact__val { color: var(--sec-heading, var(--color-heading)); font-size: .94em; }
.contact__val a { color: inherit; border-bottom: 1px solid var(--sec-border); transition: color .35s var(--lift), border-color .35s var(--lift); }
.contact__val a:hover { color: var(--color-primary); border-color: var(--color-primary); }
.contact__label {
  display: block; font-size: .62rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: 9px; font-weight: 600;
}
.contact__social { display: flex; gap: 10px; }
.contact__social a {
  width: 42px; height: 42px; border-radius: 0; display: grid; place-items: center;
  border: 1px solid var(--sec-border); color: var(--sec-heading, var(--color-heading));
  transition: transform .4s var(--lift), background-color .4s var(--lift), color .4s var(--lift), border-color .4s var(--lift);
}
.contact__social a:hover {
  background: var(--color-heading); border-color: var(--color-heading);
  color: var(--color-bg); transform: translateY(-3px);
}
.contact__social svg { width: 17px; height: 17px; }

.contact__map {
  border-radius: var(--radius-base); overflow: hidden; height: clamp(260px, 34vw, 420px);
  border: 1px solid var(--sec-border);
}
.contact__map--inside { margin-top: 28px; height: 260px; }
.contact__map--below { margin-top: clamp(40px, 5vw, 72px); border-radius: 0; height: clamp(300px, 36vw, 460px); }
.contact__map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.82) contrast(1.02); }

.contact__form-wrap {
  background: var(--color-bg-alt); border: 1px solid var(--sec-card-border);
  border-radius: calc(var(--radius-base) * 1.2); padding: clamp(28px, 3.4vw, 52px);
  box-shadow: none;
}
.tone-light .contact__form-wrap { background: rgba(255, 255, 255, .05); }
.contact__form-title { font-size: 1.5rem; margin-bottom: .45em; }
.contact__form-text { color: var(--sec-text); margin-bottom: 1.9em; font-size: .95em; }

/* ------------------------------------------------------------------ forms */
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
/* Labels are micro-type like every other small label on the page, so the
   form does not introduce a fourth text style of its own. */
.field label {
  display: block; font-size: .62rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--sec-muted); margin-bottom: 10px;
}
.field label span { color: var(--color-primary); }
.field input, .field textarea, .field select {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--sec-heading);
  background: var(--color-bg);
  border: 1px solid var(--sec-border);
  border-radius: calc(var(--radius-base) * .7);
  padding: 15px 16px;
  transition: border-color .35s var(--lift), box-shadow .35s ease, background-color .3s ease;
}
.tone-light .field input, .tone-light .field textarea { background: rgba(255, 255, 255, .08); color: #fff; }
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: inset 0 -1px 0 0 var(--color-primary);
}
.field input::placeholder, .field textarea::placeholder { color: var(--sec-muted); opacity: .7; }
.field.has-error input, .field.has-error textarea { border-color: #d93a52; }
.field__error { color: #d93a52; font-size: .84rem; margin: 7px 0 0; }

.field--check { margin-top: 4px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: .92rem; color: var(--sec-muted); cursor: pointer; }
.check input { width: 17px; height: 17px; flex: none; accent-color: var(--color-primary); margin-top: 3px; }

.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 8px; }
.form__note { font-size: .84rem; color: var(--sec-muted); margin: 0; flex: 1 1 220px; }

.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert {
  padding: 16px 20px; border-radius: calc(var(--radius-base) * .7);
  margin-bottom: 24px; font-size: .92rem; border: 1px solid transparent;
  animation: alertIn .4s var(--anim-easing);
}
.alert--success { background: rgba(28, 160, 108, .12); border-color: rgba(28, 160, 108, .35); color: #157a52; }
.alert--error   { background: rgba(217, 58, 82, .1); border-color: rgba(217, 58, 82, .32); color: #b32740; }

/* ---- the group training request popup ----------------------------------
   Borrows the legal popup's shell, so only the form inside it needs saying.
   The select is brought into the focus and error rules above, which predate
   any form on the site having one. */
.field select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--rgb-primary), .16);
}
.field.has-error select { border-color: #d93a52; }

.group-modal .legal-modal__panel { width: min(820px, 100%); }
.group-modal__intro { margin: 0 0 1.6rem; color: var(--color-text); }
/* Nine fields in one panel: the site-wide 130px textarea would push the send
   button below the fold on a laptop. */
.group-modal .field textarea { min-height: 96px; }
.group-modal .field { margin-bottom: 14px; }
.group-modal .form__actions { margin-top: 14px; }
.tone-light .alert--success { color: #7ee2b8; }
.tone-light .alert--error { color: #ffb3c0; }
@keyframes alertIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------- footer */
.site-footer { padding: clamp(56px, 7vw, 96px) 0 32px; position: relative; }
.site-footer--dark  { background: var(--color-footer); color: var(--color-footer-text); }
.site-footer--light { background: var(--color-bg-alt); color: var(--color-text); }
.site-footer h2, .footer__brand-text { color: var(--color-footer-heading); }
.site-footer--light h2, .site-footer--light .footer__brand-text { color: var(--color-heading); }

.footer__grid {
  display: grid; gap: clamp(32px, 4vw, 60px);
  grid-template-columns: 1.6fr 1fr 1.2fr;
  padding-bottom: clamp(36px, 4vw, 56px);
}
.site-footer[data-cols="4"] .footer__grid { grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr; }
.site-footer[data-cols="2"] .footer__grid { grid-template-columns: 1.6fr 1fr; }
.site-footer[data-cols="1"] .footer__grid { grid-template-columns: 1fr; max-width: 620px; }

.footer__brand { display: inline-block; margin-bottom: 24px; }
/* Was an inline style on the <img>. It moved here when the logo started going
   through render_image(), which emits a <picture> and has nowhere to put one. */
.footer__brand-img { height: var(--logo-height); width: auto; display: block; }
.footer__brand-text { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.5rem; letter-spacing: -.01em; }
.footer__about { color: inherit; opacity: .85; max-width: 34ch; font-size: .94em; line-height: 1.75; }
.footer__title {
  font-size: .62rem; letter-spacing: .26em; text-transform: uppercase;
  font-weight: 600; margin-bottom: 1.9em;
}
.footer__links, .footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer__links a { color: inherit; opacity: .82; font-size: .88em; }
/* Hover shifts to blush rather than the rose — on espresso the rose is nearly
   the same value as the body text and the change would not register. */
.footer__links a:hover { opacity: 1; color: var(--color-blush); padding-left: 4px; }
.footer__links a { transition: opacity .2s ease, padding-left .35s var(--lift), color .3s ease; }
.footer__contact li { display: flex; gap: 12px; align-items: flex-start; opacity: .85; font-size: .9em; }
.footer__contact a { color: inherit; }
.footer__contact a:hover { color: var(--color-blush); }
.site-footer--light .footer__links a:hover, .site-footer--light .footer__contact a:hover { color: var(--color-primary); }
.icon--sm { flex: none; color: var(--color-primary); }
.icon--sm svg { width: 16px; height: 16px; margin-top: 4px; }

.footer__social { display: flex; gap: 10px; margin-top: 30px; }
.footer__social a {
  width: 42px; height: 42px; border-radius: 0; display: grid; place-items: center;
  background: transparent; border: 1px solid rgba(253, 249, 248, .16);
  color: var(--color-blush-soft); opacity: 1;
  transition: transform .4s var(--lift), background-color .4s var(--lift), border-color .4s var(--lift), color .4s var(--lift);
}
.site-footer--light .footer__social a { background: transparent; border-color: var(--hairline); color: var(--color-heading); }
.footer__social a:hover {
  background: var(--color-blush); border-color: var(--color-blush);
  color: var(--color-bg-dark); opacity: 1; transform: translateY(-3px);
}
.footer__social svg { width: 17px; height: 17px; }

.footer__newsletter { display: flex; gap: 8px; margin-top: 16px; }
.footer__newsletter input {
  flex: 1; min-width: 0; padding: 13px 14px; border-radius: calc(var(--radius-base) * .7);
  border: 1px solid rgba(253, 249, 248, .16); background: transparent; color: inherit;
}
.footer__newsletter input::placeholder { color: rgba(253, 249, 248, .45); }
.footer__newsletter input:focus { outline: none; border-color: var(--color-blush); }
.site-footer--light .footer__newsletter input { background: #fff; border-color: var(--color-border); }

.footer__bottom {
  border-top: 1px solid rgba(253, 249, 248, .14);
  padding-top: 28px;
  display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between;
  font-size: .75rem; letter-spacing: .06em; opacity: .72;
}
.site-footer--light .footer__bottom { border-top-color: var(--color-border); }
.footer__copy { margin: 0; }
.footer__legal { list-style: none; display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; }
.footer__legal a { color: inherit; }
.footer__legal a:hover { color: var(--color-blush); }
.site-footer--light .footer__legal a:hover { color: var(--color-primary); }

/* --------------------------------------------------------- floating bits */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 880;
  width: 46px; height: 46px; border-radius: 0; border: 0; cursor: pointer;
  background: var(--color-heading); color: var(--color-bg);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .3s ease, transform .4s var(--lift), visibility .3s, background-color .4s var(--lift);
  box-shadow: var(--shadow-lift);
}
.to-top:hover { background: var(--color-primary); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px); }
.to-top svg { width: 20px; height: 20px; }

.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(28, 22, 20, .95);
  display: grid; place-items: center; padding: 5vh 5vw;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }

/* These overlays cover the whole viewport, so the hidden attribute has to win.
   An author `display` declaration beats the browser's [hidden] rule, which
   would otherwise leave an invisible sheet on top of the page eating clicks. */
.lightbox[hidden], .mobile-nav[hidden] { display: none; }
.lightbox__figure { margin: 0; max-width: 100%; max-height: 90vh; text-align: center; }
.lightbox__figure img {
  max-width: 100%; max-height: 82vh; width: auto; margin-inline: auto;
  border-radius: var(--radius-base); box-shadow: 0 40px 90px rgba(0, 0, 0, .55);
  animation: lightboxIn .4s var(--anim-easing);
}
@keyframes lightboxIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.lightbox__figure figcaption {
  color: rgba(253, 249, 248, .78); margin-top: 18px;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
}
.lightbox__close, .lightbox__nav {
  position: absolute; background: transparent; border: 1px solid rgba(253, 249, 248, .22);
  color: var(--color-blush-soft);
  width: 46px; height: 46px; border-radius: 0; cursor: pointer; font-size: 26px; line-height: 1;
  display: grid; place-items: center; transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.lightbox__close { top: 22px; right: 22px; font-size: 30px; }
.lightbox__nav--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__close:hover, .lightbox__nav:hover {
  background: var(--color-blush); color: var(--color-bg-dark); border-color: var(--color-blush);
}

/* Bottom-left: the centre belongs to the hero scroll indicator and the right
   to the back-to-top button. */
.admin-bar {
  position: fixed; left: 18px; bottom: 18px; z-index: 940;
  display: flex; align-items: center; gap: 14px;
  background: rgba(11, 18, 32, .94); color: #dbe4f0;
  backdrop-filter: blur(10px);
  padding: 10px 18px; border-radius: 999px; font-size: .84rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .12);
}
/* ----------------------------------------------------- legal text popups */
/* Hidden by default; shown by :target (so the links work without JavaScript)
   or by .is-open (added by the script, which also keeps the URL unchanged). */
.legal-modal {
  position: fixed; inset: 0; z-index: 1010;
  display: none; place-items: center;
  padding: clamp(16px, 5vh, 60px) clamp(16px, 5vw, 40px);
}
/* With JavaScript, `is-open` is the single source of truth: :target cannot be
   turned off from script (history.replaceState does not re-run target
   matching), so a popup opened by a #hash could never be closed again. Without
   JavaScript, :target is the whole mechanism and stays in charge. */
html:not(.js) .legal-modal:target,
.legal-modal.is-open { display: grid; }

.legal-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(var(--rgb-heading), .55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: legalFade .25s ease;
}
.legal-modal__panel {
  position: relative;
  width: min(760px, 100%);
  max-height: min(86vh, 900px);
  display: flex; flex-direction: column;
  background: var(--color-card);
  color: var(--color-text);
  border-radius: calc(var(--radius-base) * 1.2);
  box-shadow: 0 40px 90px rgba(var(--rgb-heading), .35);
  animation: legalIn .35s var(--anim-easing);
  overflow: hidden;
}
@keyframes legalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes legalIn {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.legal-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(20px, 3vw, 30px) clamp(22px, 3.4vw, 38px) 16px;
  border-bottom: 1px solid var(--color-border);
  flex: none;
}
.legal-modal__title { margin: 0; font-size: clamp(20px, 2.4vw, 28px); color: var(--color-heading); }
.legal-modal__close {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 26px; line-height: 1; text-decoration: none;
  background: var(--color-bg-alt); color: var(--color-heading);
  transition: background-color .2s ease, transform .2s ease;
}
.legal-modal__close:hover { background: var(--color-heading); color: var(--color-bg); transform: rotate(90deg); }

.legal-modal__body {
  padding: clamp(18px, 2.6vw, 26px) clamp(22px, 3.4vw, 38px) clamp(24px, 3.4vw, 38px);
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--color-text);
}
.legal-modal__body h2, .legal-modal__body h3, .legal-modal__body h4 { margin: 1.6em 0 .5em; }
.legal-modal__body h3 { font-size: 1.15rem; }
.legal-modal__body > :first-child { margin-top: 0; }
.legal-modal__body ul, .legal-modal__body ol { padding-left: 1.3em; }
.legal-modal__body li { margin-bottom: .45em; }
.legal-modal__body a { color: var(--color-link); text-decoration: underline; }

body.legal-open { overflow: hidden; }

.admin-bar a { color: #7fb2ff; font-weight: 600; }
.admin-bar__dot { width: 8px; height: 8px; border-radius: 50%; background: #35d07f; }
.is-preview .admin-bar__dot { background: var(--color-accent); }

/* =========================================================================
   Responsive — mobile first refinements
   ========================================================================= */

/* large laptops and below */
@media (max-width: 1200px) {
  .cards--4 { --cols: 3; }
  .team__grid.cols-4 { --cols: 3; }
  .gallery__grid.cols-5 { --cols: 4; }
}

/* tablets */
@media (max-width: 1024px) {
  .hero--split .hero__inner, .hero--split-alt .hero__inner { grid-template-columns: 1fr; }
  .hero--split-alt .hero__content, .hero--split .hero__content { order: 1; max-width: 100%; }
  .hero__media { order: 2; max-width: 640px; }

  .about__grid { grid-template-columns: 1fr; }
  .about--image-right .about__media { order: 1; }
  .about__media { max-width: 640px; }

  .contact__grid--info-left, .contact__grid--info-right { grid-template-columns: 1fr; }
  .contact__grid--info-right .contact__info { order: 1; }
  .faq--split .faq__wrap { grid-template-columns: 1fr; }
  .faq--two-col .faq__list { columns: 1; }

  .cards--3, .cards--4 { --cols: 2; }
  .stats__grid { --cols: 2; }
  .quotes { --cols: 2; }
  .team__grid { --cols: 3; }
  .plans { --cols: 2; }
  .gallery__grid.cols-4, .gallery__grid.cols-5 { --cols: 3; }
  .gallery--masonry { column-count: 2; }

  .footer__grid,
  .site-footer[data-cols="4"] .footer__grid { grid-template-columns: 1fr 1fr; }
  .cta--split .cta__box { grid-template-columns: 1fr; }
}

/* The inline menu runs out of room well before the phone breakpoint, so the
   burger takes over on small tablets rather than letting the links wrap. */
@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: block; }
  .header__cta { display: none; }
}

/* phones */
@media (max-width: 768px) {
  .section {
    padding-top: min(var(--section-pt, var(--section-padding)), var(--section-padding-mobile));
    padding-bottom: min(var(--section-pb, var(--section-padding)), var(--section-padding-mobile));
  }
  body { font-size: var(--base-font-size-mobile); }

  .brand__logo--desktop { height: var(--logo-height-mobile); }
  .brand__logo--mobile { display: block; height: var(--logo-height-mobile); }
  .brand__logo--mobile ~ .brand__logo--desktop,
  .brand__logo--mobile + .brand__logo--light { display: none; }
  .brand__text { font-size: 1.16rem; }

  /* .section caps padding on phones, which would tuck both of these under the
     fixed header — they have to clear it explicitly. */
  .hero { padding-top: calc(var(--header-h, 68px) + 56px); }
  .pagehead { padding-top: calc(var(--header-h, 68px) + 28px); }
  .hero--h-full { min-height: 92svh; }
  .hero__scroll { display: none; }

  .cards, .quotes, .plans, .stats__grid, .team__grid, .gallery__grid { --cols: 1; }
  .stats__grid { --cols: 2; }
  .gallery__grid.cols-3, .gallery__grid.cols-4, .gallery__grid.cols-5 { --cols: 2; }
  .gallery--mosaic .is-feature { grid-column: span 2; grid-row: span 1; }
  .gallery--mosaic .is-feature .gallery__frame { aspect-ratio: var(--tile-ratio, 4 / 3); }
  .gallery--masonry { column-count: 1; }
  .stats--divided .stat { border-left: 0; }

  .media--about-2 { width: 40%; right: -2%; bottom: -6%; }
  .media--about-2 .media__inner { border-width: 5px; }
  .about__badge { left: auto; right: 4%; top: auto; bottom: -18px; padding: 14px 18px; min-width: 108px; }
  .about__badge-value { font-size: 1.7rem; }

  .form__row { grid-template-columns: 1fr; gap: 0; }
  .footer__grid, .site-footer[data-cols="4"] .footer__grid, .site-footer[data-cols="2"] .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .timeline__item { padding-left: 62px; }
  .timeline__marker { width: 46px; height: 46px; }
  .timeline__list::before { left: 22px; }
  .timeline--alternating .timeline__list::before { left: 22px; transform: none; }

  .btn { width: auto; }
  .btn-row { gap: 10px; }
  .to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; }
  .admin-bar { left: 10px; right: 10px; bottom: 10px; font-size: .78rem; padding: 8px 14px; gap: 10px; justify-content: center; }
  .lightbox__nav { width: 42px; height: 42px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
}

@media (max-width: 460px) {
  .stats__grid { --cols: 1; }
  .gallery__grid.cols-2, .gallery__grid.cols-3, .gallery__grid.cols-4 { --cols: 1; }
  .gallery--mosaic .is-feature { grid-column: span 1; }
  .contact__form-wrap { padding: 22px 18px; }
}

/* very large screens — keep the layout from stretching thin */
@media (min-width: 1800px) {
  .container--full { max-width: 1800px; }
}

/* ------------------------------------------------------- print & a11y */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html.anim-ready [data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
  .section__bg.is-parallax { transform: none !important; }
}

/* When animations are switched off in the admin panel the .anim-ready class is
   never added, so [data-anim] elements simply render in their final state. */

@media print {
  .site-header, .mobile-nav, .to-top, .scroll-progress, .admin-bar, .hero__scroll, .contact__map { display: none !important; }
  .section { padding: 24px 0; }
  body { color: #000; background: #fff; }
  [data-anim] { opacity: 1 !important; transform: none !important; }
}