@charset "utf-8";
/* =============================================================================
   Phoenix Wellness & Rejuvenation
   Art direction: "Desert Light" — warm bone paper, PWR navy ink, the phoenix blue
   used sparingly as the only living colour, dry-grass tan for rules and numerals.
   Palette sampled from the PWR badge and from PWR's own Phoenix photography.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* ground — warm ivory rather than grey paper */
  --bone:      #F7F3EC;
  --bone-2:    #F1E9DE;
  --paper:     #FCFAF6;

  /* brand, sampled from the PWR badge — unchanged, this is who they are */
  --ink:       #13284C;   /* badge lettering */
  --deep:      #0C1A31;   /* deepened navy for dark passages */
  --sky:       #2E86DE;   /* wing tops */
  --steel:     #4A7BB0;   /* mid wing */
  --sand:      #C2A878;   /* dry grass in PWR's own photography */

  /* the pastel light: skin, sunlight, cloud, water. Used as atmosphere only —
     never as flat fills, never strong enough to unseat the navy. */
  --blush:     #EFD9D6;
  --nude:      #E9D5C6;
  --champagne: #F0E4D0;
  --powder:    #D6E3EF;
  --lavender:  #DEDBE9;
  --peach:     #F4DDCC;

  --ink-70: rgba(19, 40, 76, .70);
  --ink-52: rgba(19, 40, 76, .52);
  --ink-32: rgba(19, 40, 76, .32);
  --rule:   rgba(19, 40, 76, .13);
  --rule-2: rgba(19, 40, 76, .07);

  /* Didone display against a geometric sans — the fashion-editorial pairing,
     high stroke contrast for the feminine register, geometry for the formal one */
  --display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --sans: "Jost", "Futura", "Century Gothic", Helvetica, Arial, sans-serif;

  --gut: clamp(20px, 5.2vw, 88px);
  --maxw: 1560px;
  --sec: clamp(88px, 13vh, 184px);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.62, .04, .24, 1);

  --nav-h: 88px;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.74;
  font-weight: 300;
  letter-spacing: .006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

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

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--bone); padding: 14px 22px;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
}
.skip:focus { left: 12px; top: 12px; }

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

/* ---------- 3. Layout ---------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 34px); }
.sec { padding-block: var(--sec); position: relative; }
.sec--tight { padding-block: clamp(60px, 8vh, 110px); }

/* ---------- 4. Typography ------------------------------------------------
   A Didone set very large and very light, with the italic reserved for the few
   phrases PWR already emphasises in its own copy. Optical size is pushed high so
   the thin strokes stay hairline-fine at display sizes.                        */
.d1, .d2, .d3, .d4 {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  letter-spacing: -.014em;
  text-wrap: balance;
}
.d1 { font-size: clamp(2.9rem, 8.4vw, 8.4rem); line-height: .94; letter-spacing: -.022em; }
.d2 { font-size: clamp(2.15rem, 4.9vw, 4.5rem); line-height: 1.0; letter-spacing: -.018em; }
.d3 { font-size: clamp(1.7rem, 3.1vw, 2.85rem); line-height: 1.1; }
.d4 { font-size: clamp(1.25rem, 1.85vw, 1.75rem); line-height: 1.24; letter-spacing: -.008em; }

/* the italic accent — the one romantic gesture in the system, used sparingly */
.d1 em, .d2 em, .d3 em, .d4 em, .statement em, .prog__name em {
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  padding-right: .06em;
}

.lede {
  font-family: var(--sans);
  font-size: clamp(1rem, .94rem + .42vw, 1.24rem);
  font-weight: 300;
  line-height: 1.62;
  color: var(--ink-70);
  letter-spacing: .004em;
  text-wrap: pretty;
}

.label {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-52);
  line-height: 1.5;
}
.label--sand { color: var(--sand); }

.body-copy > * + * { margin-top: 1.2em; }
.body-copy p { color: var(--ink-70); text-wrap: pretty; }
.body-copy strong { color: var(--ink); font-weight: 500; }
.body-copy em { font-family: var(--display); font-size: 1.14em; font-style: italic; color: var(--ink); }

.measure { max-width: 62ch; }
.measure-sm { max-width: 48ch; }

/* numerals used as editorial furniture */
.numeral {
  font-family: var(--display);
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 1;
  color: var(--sand);
  letter-spacing: -.02em;
}

/* ---------- 5. Rules & marks --------------------------------------------- */
.rule { height: 1px; background: var(--rule); width: 100%; transform-origin: left center; }

.rule-dot {
  display: flex; align-items: center; gap: 14px; width: 100%;
}
.rule-dot::before, .rule-dot::after {
  content: ""; height: 1px; background: var(--rule); flex: 1;
}
.rule-dot i {
  width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--sand); flex: none;
}

/* the grain gives the paper its tooth — kept very low */
.grain {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

/* ---------- 6. Phoenix line art ------------------------------------------ */
.phoenix-line { width: 100%; height: auto; color: var(--ink); overflow: visible; }
.phoenix-line > g { fill: var(--phoenix-fill, none); }
.phoenix-line path { vector-effect: non-scaling-stroke; }
/* transform-origin on SVG children is meaningless without a box to resolve
   against — view-box lets the wings pivot on the body's centre line */
.phoenix-line .ph-wing-l,
.phoenix-line .ph-wing-r,
.phoenix-line .ph-wing { transform-box: view-box; }

/* ---------- 7. Opening sequence ------------------------------------------
   Deep navy, a breath of blue light, then the real logo assembled from its own
   parts. `--sweep` is registered so the light can be animated around the ring
   as a genuine angle rather than a string swap.                              */
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.intro {
  position: fixed; inset: 0; z-index: 100;
  background: var(--deep);
}
.intro[hidden] { display: none; }

.intro__field {
  position: absolute; inset: 0;
  background:
    radial-gradient(58vw 58vw at 50% 48%, rgba(46,134,222,.20) 0%, rgba(46,134,222,.06) 42%, transparent 68%),
    radial-gradient(90vw 70vw at 50% 120%, rgba(19,40,76,.9) 0%, transparent 70%);
  opacity: 0;
}
.intro__dust { position: absolute; inset: 0; overflow: hidden; }
.intro__dust i {
  position: absolute; display: block;
  width: 2px; height: 2px; border-radius: 50%;
  background: rgba(214,227,239,.85);
  opacity: 0;
  box-shadow: 0 0 6px rgba(120,180,240,.7);
}

/* the mark itself — fixed above the curtain so it can survive the aperture */
.seal {
  position: fixed; left: 50%; top: 50%;
  width: clamp(190px, 28vw, 330px); aspect-ratio: 1;
  margin-left: calc(clamp(190px, 28vw, 330px) / -2);
  margin-top: calc(clamp(190px, 28vw, 330px) / -2);
  z-index: 103; pointer-events: none;
}
.seal__l, .seal__ring, .seal__ring img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.seal__l { opacity: 0; }

/* light travelling around the circle, revealing the real ring behind it */
.seal__ring {
  --sweep: 0deg;
  -webkit-mask-image: conic-gradient(from -90deg, #000 0deg, #000 var(--sweep), transparent var(--sweep));
          mask-image: conic-gradient(from -90deg, #000 0deg, #000 var(--sweep), transparent var(--sweep));
  opacity: 0;
}
.seal__spark {
  position: absolute; inset: 0; opacity: 0;
  transform: rotate(-90deg);
}
.seal__spark i {
  position: absolute; left: 50%; top: 0;
  width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: #EAF3FF;
  box-shadow: 0 0 14px 4px rgba(120,180,240,.9), 0 0 34px 10px rgba(46,134,222,.5);
}

/* wings pivot on the body's centre line — measured from the artwork itself */
.seal__wl, .seal__wr { transform-origin: 52.1% 58%; }

/* The lettering is navy artwork meant for white paper; on the deep field it
   would vanish. Knocking it out to light keeps every letterform exactly as
   drawn while making it readable — the phoenix keeps its authentic blue. */
.seal__word, .seal__pwr { filter: brightness(0) invert(1); opacity: 0; }
.seal__ring img { filter: brightness(1.35) saturate(1.1); }

.seal__bloom {
  position: absolute; left: 50%; top: 50%;
  width: 260%; aspect-ratio: 1; transform: translate(-50%, -50%);
  opacity: 0; pointer-events: none;
  background: radial-gradient(circle closest-side,
    rgba(160,205,255,.55) 0%, rgba(46,134,222,.26) 34%, transparent 68%);
}

body.is-ready .seal { display: none; }

/* ---------- 8. Navigation ------------------------------------------------ */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 60;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease), height .5s var(--ease);
}
.nav.is-solid {
  background: rgba(251, 249, 245, .86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--rule-2);
  height: 70px;
}
.nav.is-hidden { transform: translateY(-104%); }
.nav { transition: transform .55s var(--ease), background-color .5s var(--ease), height .5s var(--ease); }

.nav__in {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gut);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 48px);
}

/* Over the hero film the navigation knocks out to white; full colour returns
   the moment the bar goes solid, a few pixels into the scroll. */
.nav--film:not(.is-solid) .nav__logo img { filter: brightness(0) invert(1); }
.nav--film:not(.is-solid) .nav__logo-txt { color: var(--bone); }
.nav--film:not(.is-solid) .nav__logo-txt span { color: rgba(244, 241, 234, .62); }
.nav--film:not(.is-solid) .nav__link { color: rgba(244, 241, 234, .78); }
.nav--film:not(.is-solid) .nav__link:hover,
.nav--film:not(.is-solid) .nav__link[aria-current="page"] { color: var(--bone); }
.nav--film:not(.is-solid) .btn { color: var(--ink); }
.nav--film:not(.is-solid) .btn::before { background: var(--bone); }
.nav--film:not(.is-solid) .btn::after { background: var(--sky); }
.nav--film:not(.is-solid) .btn:hover { color: var(--bone); }
.nav--film:not(.is-solid) .burger i,
.nav--film:not(.is-solid) .burger i::before,
.nav--film:not(.is-solid) .burger i::after { background: var(--bone); }
.nav--film:not(.is-solid) .nav__sub { background: var(--deep); }
.nav--film:not(.is-solid) .nav__sub a { color: rgba(244, 241, 234, .76); }
.nav--film:not(.is-solid) .nav__sub a:hover { color: var(--bone); }

.nav__logo { display: flex; align-items: center; gap: 12px; flex: none; }
.nav__logo img { width: clamp(38px, 4vw, 46px); height: auto; }
.nav__logo-txt {
  display: none;
  font-family: var(--display); font-size: 1.02rem; letter-spacing: .04em; line-height: 1.05;
}
@media (min-width: 1120px) { .nav__logo-txt { display: block; } }
.nav__logo-txt span { display: block; font-family: var(--sans); font-size: .56rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ink-52); margin-top: 2px; }

.nav__links { display: none; margin-left: auto; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
@media (min-width: 1000px) { .nav__links { display: flex; } }

.nav__link {
  position: relative;
  font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-70); padding-block: 6px;
  transition: color .35s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform .5s var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--ink); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }

/* services flyout */
.nav__has-sub { position: relative; }
.nav__sub {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 8px);
  min-width: 260px; padding: 20px 8px;
  background: var(--paper); box-shadow: 0 20px 60px -30px rgba(12, 26, 49, .5), 0 0 0 1px var(--rule-2);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s var(--ease), transform .5s var(--ease), visibility .4s;
}
.nav__has-sub:hover .nav__sub,
.nav__has-sub:focus-within .nav__sub {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.nav__sub a {
  display: block; padding: 9px 22px;
  font-size: .82rem; letter-spacing: .02em; color: var(--ink-70);
  transition: color .3s var(--ease), padding-left .4s var(--ease);
}
.nav__sub a:hover { color: var(--ink); padding-left: 28px; }

.nav__right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
@media (min-width: 1000px) { .nav__right { margin-left: 0; } }

/* burger */
.burger {
  width: 44px; height: 44px; display: grid; place-items: center; flex: none;
}
@media (min-width: 1000px) { .burger { display: none; } }
.burger i { display: block; width: 22px; height: 1px; background: var(--ink); position: relative; transition: background .3s; }
.burger i::before, .burger i::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 1px; background: var(--ink);
  transition: transform .5s var(--ease);
}
.burger i::before { top: -6px; }
.burger i::after { top: 6px; }
.is-menu .burger i { background: transparent; }
.is-menu .burger i::before { transform: translateY(6px) rotate(45deg); }
.is-menu .burger i::after { transform: translateY(-6px) rotate(-45deg); }

/* mobile drawer */
.menu {
  position: fixed; inset: 0; z-index: 55;
  background: var(--bone);
  padding: calc(var(--nav-h) + 20px) var(--gut) 40px;
  display: flex; flex-direction: column;
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .8s var(--ease), visibility .8s;
}
.is-menu .menu { clip-path: inset(0 0 0 0); visibility: visible; }
.menu__list { margin-top: auto; }
.menu__list li { overflow: hidden; border-top: 1px solid var(--rule); }
.menu__list li:last-child { border-bottom: 1px solid var(--rule); }
.menu__list a {
  display: flex; align-items: baseline; gap: 14px; padding: 16px 0;
  font-family: var(--display); font-size: clamp(1.7rem, 8vw, 2.6rem); line-height: 1.1;
  transform: translateY(105%);
}
.is-menu .menu__list a { transform: translateY(0); transition: transform .8s var(--ease); }
.menu__list a small { font-family: var(--sans); font-size: .6rem; letter-spacing: .2em; color: var(--sand); }
.menu__foot { margin-top: 34px; display: grid; gap: 6px; font-size: .9rem; color: var(--ink-70); }

/* ---------- 9. Buttons & links ------------------------------------------- */
.btn {
  --pad: 17px 34px;
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: var(--pad);
  font-family: var(--sans); font-size: .72rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--bone); isolation: isolate; overflow: hidden;
  border-radius: 100px;
  will-change: transform;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -2; background: var(--ink); border-radius: inherit;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--steel);
  border-radius: inherit;
  transform: translateY(101%); transition: transform .6s var(--ease);
}
.btn:hover::after { transform: translateY(0); }
.btn svg { width: 13px; height: 13px; transition: transform .5s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--ghost { color: var(--ink); }
.btn--ghost::before { background: none; box-shadow: inset 0 0 0 1px var(--ink-32); }
.btn--ghost::after { background: var(--ink); }
.btn--ghost:hover { color: var(--bone); }

.btn--sm { --pad: 13px 24px; font-size: .66rem; }

/* text link with a travelling underline */
.tlink {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  padding-bottom: 7px; color: var(--ink);
}
.tlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform-origin: right center; transition: transform .55s var(--ease);
}
.tlink:hover::after { transform: scaleX(0); transform-origin: left center; }
.tlink svg { width: 12px; height: 12px; transition: transform .5s var(--ease); }
.tlink:hover svg { transform: translateX(5px); }

/* ---------- 10. Media ---------------------------------------------------- */
.media { position: relative; overflow: hidden; background: var(--bone-2); }
/* the build wraps images in <picture> for WebP; keep the img as the sized child */
picture { display: contents; }
/* PWR's shoot is full-length portrait work — crops are steered per picture so a
   subject's head is never taken off by the frame */
.media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.media--tall  { aspect-ratio: 3 / 4; }
.media--port  { aspect-ratio: 4 / 5; }
.media--sq    { aspect-ratio: 1; }
.media--land  { aspect-ratio: 4 / 3; }
.media--wide  { aspect-ratio: 16 / 9; }
.media--cine  { aspect-ratio: 21 / 9; }

/* reveal: the frame opens, the picture settles out of a slow push-in */
[data-img], [data-hero-media] { clip-path: inset(0 0 100% 0); }
[data-img] img, [data-hero-media] img { transform: scale(1.16); transform-origin: center; }
.no-js [data-img], .no-js [data-hero-media] { clip-path: none; }
.no-js [data-img] img, .no-js [data-hero-media] img { transform: none; }

.media__cap {
  margin-top: 14px; font-size: .7rem; letter-spacing: .1em; color: var(--ink-52);
  text-transform: uppercase;
}

/* ---------- 11. Reveals -------------------------------------------------- */
/* Each word carries its own mask so the italics already in PWR's copy survive
   the split. Padding + equal negative margin keeps descenders off the clip. */
.w  { display: inline-block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.wi { display: inline-block; will-change: transform; }

[data-reveal], [data-hero] { opacity: 0; }
[data-reveal].is-in { opacity: 1; }
.no-js [data-reveal], .no-js [data-hero] { opacity: 1; }

/* ---------- 12. Hero — a film, not a page header ------------------------- */
/* The hero holds its film for a beat of scroll while the type lifts away,
   then releases into the story. */
.hero { position: relative; height: 148svh; }
.hero--still { height: auto; }

.hero__stick {
  position: sticky; top: 0;
  height: 100svh; min-height: 560px;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  isolation: isolate;
}
.hero--still .hero__stick { position: relative; }

/* The environment: water below, sky-light above, pastel bloom between. Each
   layer moves at its own rate so the frame has real depth. */
.hero__film { position: absolute; inset: 0; z-index: -4; background: var(--deep); overflow: hidden; }
.hero__film video,
.hero__film img {
  width: 100%; height: 100%; object-fit: cover;
  will-change: transform;
}

/* sky held over the water as haze and light rather than a second horizon */
.hero__sky {
  position: absolute; inset: -8% 0 auto; height: 62%; z-index: -3;
  overflow: hidden; pointer-events: none;
  opacity: .5; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 52%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 52%, transparent 100%);
  translate: calc(var(--mx) * 18px) calc(var(--my) * 10px);
}
.hero__sky img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* a warm bloom where the light lands, leaning with the cursor */
.hero__light {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(46vw 40vw at 22% 18%, rgba(244,221,204,.30) 0%, transparent 68%),
    radial-gradient(40vw 36vw at 84% 72%, rgba(214,227,239,.26) 0%, transparent 70%);
  translate: calc(var(--mx) * -26px) calc(var(--my) * -16px);
}

/* the scrim is what makes ivory type legible over moving water */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(12,26,49,.62) 0%, rgba(12,26,49,.18) 26%, rgba(12,26,49,.36) 56%, rgba(12,26,49,.88) 100%),
    linear-gradient(90deg, rgba(12,26,49,.64) 0%, rgba(12,26,49,.28) 46%, rgba(12,26,49,.04) 78%);
}

.hero__content {
  position: relative; z-index: 2;
  padding-bottom: clamp(34px, 7vh, 78px);
  color: var(--bone);
  width: 100%;
}
.hero__label { color: rgba(244,241,234,.66); margin-bottom: clamp(14px, 2.4vh, 26px); }
.hero__h { color: var(--bone); max-width: 16ch; }
.hero__h em { color: var(--bone); }

/* the supporting line, the call and its condition read as one left-hand column
   rather than drifting to opposite ends of the frame */
.hero__foot {
  margin-top: clamp(18px, 3vh, 32px);
  display: grid; gap: clamp(18px, 2.6vh, 28px); justify-items: start;
  max-width: 46ch;
}
.hero__foot .lede {
  color: rgba(247,243,236,.9);
  font-size: clamp(1.05rem, 1rem + .5vw, 1.4rem);
  font-weight: 300;
}
.hero__note { font-size: .76rem; letter-spacing: .05em; color: rgba(247,243,236,.56); max-width: 34ch; }
.hero__cta { display: grid; gap: 16px; justify-items: start; }

.hero .btn { color: var(--ink); }
.hero .btn::before { background: var(--bone); }
.hero .btn::after { background: var(--sky); }
.hero .btn:hover { color: var(--bone); }

/* the seal lands out of the intro and idles at the top-right of the frame */
.hero__seal {
  position: absolute; z-index: 3;
  width: clamp(72px, 8.5vw, 116px); aspect-ratio: 1;
  right: var(--gut); top: calc(var(--nav-h) + clamp(12px, 3vh, 40px));
  display: grid; place-items: center;
  pointer-events: none; color: var(--bone);
}
@media (max-width: 760px) { .hero__seal { width: 66px; right: 18px; } }
.hero__seal-type {
  position: absolute; inset: 0;
  background: center / contain no-repeat url("../brand/badge.png");
  opacity: .8; filter: brightness(0) invert(1);
  animation: seal-spin 52s linear infinite;
}
.hero__seal-bird { position: absolute; inset: 20%; width: 60%; height: 60%; object-fit: contain;
  filter: brightness(0) invert(1); opacity: .92; }
@keyframes seal-spin { to { transform: rotate(360deg); } }

/* scroll cue */
.hero__cue {
  position: absolute; z-index: 3; left: 50%; bottom: clamp(14px, 2.4vh, 26px);
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: 9px;
  font-size: .6rem; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(244,241,234,.5); pointer-events: none;
}
@media (max-width: 760px), (max-height: 700px) { .hero__cue { display: none; } }
.hero__cue i { display: block; width: 1px; height: 34px; background: rgba(244,241,234,.36); overflow: hidden; position: relative; }
.hero__cue i::after {
  content: ""; position: absolute; inset: 0; background: var(--bone);
  animation: cue 2.6s var(--ease-io) infinite;
}
@keyframes cue { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(100%); } }

/* the seal's own circle, opening onto sky */
/* no background of its own — once the sky inside it lifts, whatever is behind
   must show through, or the aperture sits over the hero as a blank field */
.aperture {
  position: fixed; inset: 0; z-index: 101;
  pointer-events: none; display: none;
  clip-path: circle(0px at 50% 50%);
  overflow: hidden;
}
.aperture.is-live { display: block; }
.aperture__sky { position: absolute; inset: 0; will-change: transform, opacity; }
.aperture video, .aperture img { width: 100%; height: 100%; object-fit: cover; }

/* used by the interior page headers */
.hero__aside {
  margin-top: clamp(28px, 5vh, 54px);
  display: grid; gap: clamp(20px, 3vh, 30px);
  max-width: 44ch;
}
@media (min-width: 900px) {
  .hero__aside { margin-left: auto; margin-right: clamp(0px, 4vw, 90px); }
}

/* ---------- 12a. Pastel light ---------------------------------------------
   Three soft fields of colour — skin, water, sunlight — that drift on their own
   slow clocks and lean toward the cursor at different rates. `translate` carries
   the pointer offset and `transform` carries the drift, so the two compose
   instead of fighting over one property. Never flat fills; always light.       */
:root { --mx: 0; --my: 0; }

.aura { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aura i {
  position: absolute; display: block; border-radius: 50%;
  opacity: var(--aura-o, .62);
  will-change: transform, translate;
}
.aura i:nth-child(1) {
  width: 62vw; aspect-ratio: 1; left: -14%; top: -22%;
  background: radial-gradient(circle closest-side, var(--blush) 0%, rgba(239,217,214,.42) 46%, transparent 72%);
  translate: calc(var(--mx) * 34px) calc(var(--my) * 26px);
  animation: drift-a 46s ease-in-out infinite;
}
.aura i:nth-child(2) {
  width: 54vw; aspect-ratio: 1; right: -12%; top: 6%;
  background: radial-gradient(circle closest-side, var(--powder) 0%, rgba(214,227,239,.44) 48%, transparent 74%);
  translate: calc(var(--mx) * -52px) calc(var(--my) * 20px);
  animation: drift-b 58s ease-in-out infinite;
}
.aura i:nth-child(3) {
  width: 48vw; aspect-ratio: 1; left: 26%; bottom: -26%;
  background: radial-gradient(circle closest-side, var(--champagne) 0%, rgba(240,228,208,.4) 50%, transparent 74%);
  translate: calc(var(--mx) * 20px) calc(var(--my) * -30px);
  animation: drift-c 64s ease-in-out infinite;
}
@keyframes drift-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6%, 5%) scale(1.1); } }
@keyframes drift-b { 0%,100% { transform: translate(0,0) scale(1.06); } 50% { transform: translate(-7%, 4%) scale(1); } }
@keyframes drift-c { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(4%, -6%) scale(1.12); } }

.sec--aura { position: relative; isolation: isolate; overflow: hidden; }
.sec--aura > .wrap { position: relative; z-index: 1; }

/* on the deep passages the same light reads as a cool dusk */
.sec--deep .aura i { mix-blend-mode: soft-light; opacity: .5; }

/* anything can take on a share of the pointer parallax */
[data-depth] { will-change: translate; }

/* ---------- 12b. Atmosphere ---------------------------------------------
   PWR's own sky and landscape photography, held very large and very quiet
   behind a section so the page has air and depth instead of blank paper. */
.sec--atmos { position: relative; overflow: hidden; isolation: isolate; }
.sec--atmos > .wrap { position: relative; z-index: 1; }

.atmos { position: absolute; inset: -12% 0; z-index: 0; pointer-events: none; overflow: hidden; }
.atmos img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: var(--atmos-o, .34);
  will-change: transform;
  -webkit-mask-image: radial-gradient(120% 90% at var(--atmos-x, 70%) 45%, #000 12%, rgba(0,0,0,.55) 46%, transparent 76%);
          mask-image: radial-gradient(120% 90% at var(--atmos-x, 70%) 45%, #000 12%, rgba(0,0,0,.55) 46%, transparent 76%);
}
.sec--deep .atmos img { opacity: var(--atmos-o, .3); mix-blend-mode: luminosity; }

/* ---------- 12c. Escapes -------------------------------------------------
   Images that break the column and run to the edge of the viewport. */
.bleed-r { margin-right: calc(50% - 50vw); }
.bleed-l { margin-left: calc(50% - 50vw); }
@media (max-width: 899px) { .bleed-r, .bleed-l { margin-right: 0; margin-left: 0; } }

.bleed-full {
  width: 100vw; margin-left: calc(50% - 50vw); max-width: none;
}

/* type sitting over the corner of a picture */
.overlap { position: relative; }
@media (min-width: 900px) {
  .overlap__type { position: relative; z-index: 2; }
  .overlap__type--up { margin-top: clamp(-140px, -9vw, -60px); }
  .overlap__pull { margin-left: clamp(-90px, -5vw, -30px); }
}

/* a hairline that ties a label to the picture it belongs to */
.tie { display: flex; align-items: center; gap: 16px; }
.tie::after { content: ""; height: 1px; flex: 1; background: var(--rule); transform-origin: left center; }
.sec--deep .tie::after { background: rgba(244,241,234,.2); }

/* ---------- 12d. Programs as a pinned sequence -------------------------- */
.progseq {
  position: relative; background: var(--deep); color: var(--bone);
  height: calc(var(--panels, 4) * 88svh);
}
.progseq__stick {
  position: sticky; top: 0; height: 100svh; min-height: 540px;
  overflow: hidden; isolation: isolate;
  display: flex; align-items: center;
}
.progseq__bg { position: absolute; inset: 0; z-index: -2; }
.progseq__bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.1);
  transition: opacity 1.1s var(--ease), transform 1.8s var(--ease);
}
.progseq__bg img.is-on { opacity: .52; transform: scale(1); }
.progseq__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--deep) 4%, rgba(12,26,49,.86) 38%, rgba(12,26,49,.30) 100%),
    linear-gradient(180deg, rgba(12,26,49,.7) 0%, rgba(12,26,49,.1) 34%, rgba(12,26,49,.72) 100%);
}

.progseq__head { position: absolute; top: clamp(84px, 14vh, 130px); left: 0; right: 0; z-index: 3; }
.progseq__head .label { color: rgba(244, 241, 234, .58); }

.progseq__stage { position: relative; width: 100%; }
.prog {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity .7s var(--ease), visibility .7s;
}
.progseq__stage { display: grid; }
.prog.is-on { opacity: 1; visibility: visible; }

.prog__n {
  font-family: var(--display); font-size: clamp(.9rem, 1.1vw, 1.05rem);
  letter-spacing: .24em; color: var(--sand); display: block; margin-bottom: clamp(10px, 1.6vh, 18px);
}
.prog__name {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(3.4rem, 13vw, 12rem); line-height: .86; letter-spacing: -.04em;
  margin-bottom: clamp(18px, 3vh, 34px);
}
.prog__body { max-width: 50ch; }
.prog__body p { color: rgba(244,241,234,.78); }
.prog__body p + p { margin-top: .8em; }

.progseq__rail {
  position: absolute; left: 0; right: 0; bottom: clamp(28px, 6vh, 64px); z-index: 3;
}
.progseq__rail ul { display: flex; gap: clamp(10px, 1.6vw, 22px); align-items: center; }
.progseq__rail li { flex: 1; }
.progseq__rail button {
  width: 100%; display: grid; gap: 10px; text-align: left;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(244,241,234,.44); transition: color .4s var(--ease);
}
.progseq__rail button i { display: block; height: 1px; background: rgba(244,241,234,.22); position: relative; overflow: hidden; }
.progseq__rail button i::after {
  content: ""; position: absolute; inset: 0; background: var(--bone);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.progseq__rail button[aria-selected="true"] { color: var(--bone); }
.progseq__rail button[aria-selected="true"] i::after { transform: scaleX(1); }
.progseq__rail button:hover { color: rgba(244,241,234,.8); }

@media (max-width: 760px) {
  .progseq__rail ul { gap: 8px; }
  .progseq__rail button { font-size: .54rem; letter-spacing: .14em; }
}

/* ---------- 12e. Interlocking picture + copy ----------------------------
   The picture runs off the edge of the screen and the copy column overlaps its
   inner edge. The copy's own padding keeps the text clear of the photograph, so
   the two interlock without anything becoming unreadable. */
.phil { position: relative; display: grid; gap: clamp(26px, 4vh, 40px); }
.phil__pic { position: relative; z-index: 0; }
.phil__copy { position: relative; z-index: 1; }

@media (min-width: 900px) {
  .phil { grid-template-columns: minmax(0, 43%) minmax(0, 57%); align-items: start; gap: 0; }
  /* both children are placed on row 1 explicitly — otherwise auto-placement
     drops the copy onto a second row and leaves a blank column */
  .phil__copy { grid-column: 1; grid-row: 1;
                padding-top: clamp(40px, 6vw, 108px); padding-right: clamp(76px, 7vw, 140px); }
  /* a fixed height, not an aspect-ratio: the ratio would fight the bleed and
     pull the picture back inside the grid. The bleed lives here rather than on
     a utility class, which this selector would otherwise outrank. */
  .phil__pic  { grid-column: 2; grid-row: 1; height: min(82svh, 760px);
                margin-left: clamp(-115px, -5.6vw, -40px);
                margin-right: calc(50% - 50vw); }

  .phil--flip .phil__copy { grid-column: 2; grid-row: 1;
                            padding-right: 0; padding-left: clamp(76px, 7vw, 140px); }
  .phil--flip .phil__pic  { grid-column: 1; grid-row: 1; height: min(78svh, 700px);
                            margin-left: calc(50% - 50vw);
                            margin-right: clamp(-115px, -5.6vw, -40px); }
}
@media (max-width: 899px) {
  .phil__pic { aspect-ratio: 4 / 5; }
}

/* ---------- 12f. Closing frame ------------------------------------------ */
.closer {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 88svh; display: flex; align-items: center;
  color: var(--bone);
  padding-block: clamp(70px, 12vh, 130px);
}
.closer__film { position: absolute; inset: -12% 0; z-index: -2; }
.closer__film img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.closer__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(12,26,49,.90) 0%, rgba(12,26,49,.62) 42%, rgba(12,26,49,.88) 100%),
    linear-gradient(90deg, rgba(12,26,49,.72) 0%, rgba(12,26,49,.24) 70%);
}
.closer__in { position: relative; z-index: 1; width: 100%; }
.closer__h { color: var(--bone); max-width: 13ch; }
.closer .label { color: rgba(244,241,234,.6); }
.closer__foot {
  margin-top: clamp(28px, 5vh, 52px);
  display: grid; gap: clamp(22px, 3vh, 34px); align-items: end;
}
@media (min-width: 900px) { .closer__foot { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(30px, 5vw, 80px); } }
.closer__foot .body-copy p { color: rgba(244,241,234,.78); max-width: 46ch; }
.closer .btn { color: var(--ink); }
.closer .btn::before { background: var(--bone); }
.closer .btn::after { background: var(--sky); }
.closer .btn:hover { color: var(--bone); }

/* ---------- 13. Sections ------------------------------------------------- */
.sec--paper { background: var(--paper); }
.sec--bone2 { background: var(--bone-2); }

.sec--deep {
  background: var(--deep); color: var(--bone);
}
.sec--deep .label { color: rgba(244, 241, 234, .5); }
.sec--deep .lede,
.sec--deep .body-copy p { color: rgba(244, 241, 234, .72); }
.sec--deep .body-copy strong,
.sec--deep .body-copy em { color: var(--bone); }
.sec--deep .rule, .sec--deep .rule-dot::before, .sec--deep .rule-dot::after { background: rgba(244, 241, 234, .16); }
.sec--deep .tlink { color: var(--bone); }
.sec--deep .btn--ghost { color: var(--bone); }
.sec--deep .btn--ghost::before { box-shadow: inset 0 0 0 1px rgba(244, 241, 234, .32); }
.sec--deep .btn--ghost::after { background: var(--bone); }
.sec--deep .btn--ghost:hover { color: var(--ink); }
.sec--deep .numeral { color: var(--steel); }
.sec--deep .fit__list li { color: rgba(244, 241, 234, .72); border-color: rgba(244, 241, 234, .16); }
.sec--deep .fit__list li span:first-child { color: var(--sand); }
.sec--deep .fit--no .fit__list li span:first-child,
.sec--deep .fit__list.fit--no li span:first-child { color: rgba(244, 241, 234, .38); }
.sec--deep .feat { border-color: rgba(244, 241, 234, .16); }
.sec--deep .feats { border-top-color: rgba(244, 241, 234, .16); }
.sec--deep .feat p { color: rgba(244, 241, 234, .66); }
.sec--deep .acc { border-top-color: rgba(244, 241, 234, .16); }
.sec--deep .acc__item { border-bottom-color: rgba(244, 241, 234, .16); }
.sec--deep .acc__btn:hover { color: #9DC1E8; }
.sec--deep .acc__inner p { color: rgba(244, 241, 234, .66); }
.sec--deep .acc__price { color: var(--bone); }
.sec--deep .step { border-color: rgba(244, 241, 234, .16); }
.sec--deep .next__row { border-color: rgba(244, 241, 234, .16); }
.sec--deep .paths { border-top-color: rgba(244, 241, 234, .16); }
.sec--deep .path { border-bottom-color: rgba(244, 241, 234, .16); }
.sec--deep .rule-dot i { border-color: var(--sand); }
.sec--deep .field input, .sec--deep .field select, .sec--deep .field textarea {
  border-bottom-color: rgba(244, 241, 234, .4); color: var(--bone);
}

.sec-head { display: grid; gap: clamp(18px, 3vh, 30px); }
@media (min-width: 900px) {
  .sec-head--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(30px, 5vw, 90px); align-items: end; }
}

/* ---------- 14. Statement (oversized editorial paragraph) ---------------- */
.statement {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.5vw, 3.35rem);
  line-height: 1.14;
  letter-spacing: -.022em;
  max-width: 21ch;
}
.statement em { font-style: italic; }

/* ---------- 15. Fit — the two answers, weighted differently -------------- */
/* PWR says out loud who they are not for. The two columns are given different
   visual weight so the page argues rather than tabulates. */
.fit { display: grid; gap: clamp(40px, 5vw, 0px); }
@media (min-width: 880px) {
  .fit { grid-template-columns: 1fr 1fr; gap: 0; }
  .fit__col { padding-inline: clamp(20px, 3.4vw, 62px); }
  .fit__col:first-child { padding-left: 0; border-right: 1px solid var(--rule); }
  .fit__col:last-child { padding-right: 0; }
}
.fit__col h3 { margin-bottom: clamp(20px, 3vh, 30px); }
.fit__list { display: grid; }
.fit__list li {
  display: grid; grid-template-columns: 22px 1fr; gap: 16px; align-items: baseline;
  padding: clamp(14px, 2vh, 20px) 0; border-top: 1px solid var(--rule);
  color: var(--ink);
  font-size: clamp(1rem, 1.05vw, 1.15rem); line-height: 1.45;
  transition: color .45s var(--ease);
}
.fit__list li:last-child { border-bottom: 1px solid var(--rule); }
.fit__list li span:first-child { color: var(--sand); font-size: .8rem; }

/* the "not for you" side is deliberately quieter, and warms on attention */
.fit--no .fit__list li { color: var(--ink-52); font-size: clamp(.95rem, 1vw, 1.05rem); }
.fit--no .fit__list li span:first-child,
.fit__list.fit--no li span:first-child { color: var(--ink-32); }
@media (hover: hover) {
  .fit--no .fit__list li:hover { color: var(--ink-70); }
}

/* ---------- 16. Process (sticky visual + stepped copy) ------------------- */
.process { display: grid; gap: clamp(38px, 6vw, 80px); align-items: start; }
@media (min-width: 940px) { .process { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

.process__sticky { position: relative; }
@media (min-width: 940px) { .process__sticky { position: sticky; top: calc(var(--nav-h) + 40px); } }
.process__stack { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bone-2); }
.process__stack img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .9s var(--ease), transform 1.4s var(--ease);
  transform: scale(1.06);
}
.process__stack img.is-on { opacity: 1; transform: scale(1); }

/* the numerals are furniture, not labels — they sit alongside the step and
   drift as it passes */
.step {
  padding: clamp(34px, 6vh, 68px) 0; border-top: 1px solid var(--rule);
  position: relative; display: grid; gap: clamp(8px, 1.4vh, 16px);
}
@media (min-width: 640px) {
  .step { grid-template-columns: clamp(90px, 9vw, 150px) minmax(0, 1fr); column-gap: clamp(20px, 2.6vw, 44px); }
  .step__n { grid-row: 1 / span 3; }
  .step h3, .step .body-copy { grid-column: 2; }
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step__n {
  display: block; line-height: .8;
  font-size: clamp(3rem, 6.4vw, 6.4rem);
  color: transparent;
  -webkit-text-stroke: 1px var(--sand);
  will-change: transform;
}
.step h3 { margin-bottom: 6px; }
.step p + p { margin-top: .95em; }

/* ---------- 17. Programs (pathway rows) ---------------------------------- */
.paths { border-top: 1px solid var(--rule); }
.path {
  position: relative; display: block;
  border-bottom: 1px solid var(--rule);
  padding: clamp(26px, 4.4vh, 46px) 0;
  transition: background-color .6s var(--ease);
}
.path__in {
  display: grid; gap: 10px 26px; align-items: baseline;
  grid-template-columns: auto 1fr;
}
@media (min-width: 880px) {
  .path__in { grid-template-columns: 84px minmax(0, 4fr) minmax(0, 6fr); gap: 0 clamp(24px, 3vw, 56px); }
}
.path__n { font-family: var(--display); font-size: 1rem; color: var(--sand); letter-spacing: .06em; }
.path__name {
  font-family: var(--display); font-size: clamp(2rem, 5.2vw, 4.1rem); line-height: 1;
  letter-spacing: -.028em;
  transition: transform .7s var(--ease), color .5s var(--ease);
}
.path__body { grid-column: 1 / -1; }
.path__body p { color: var(--ink-70); }
.path__body p + p { margin-top: .8em; }
@media (min-width: 880px) {
  .path__body { grid-column: 3; }
  .path__body p { max-width: 46ch; }
}

@media (hover: hover) and (min-width: 880px) {
  .path:hover .path__name { transform: translateX(16px); }
  .path:hover { background-color: rgba(194, 168, 120, .07); }
}

/* ---------- 18. Testimonials --------------------------------------------- */
.quotes { position: relative; overflow: hidden; }
.quotes__bg { position: absolute; inset: 0; z-index: 0; }
.quotes__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .16; }
.quotes__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--deep) 0%, rgba(12,26,49,.86) 40%, var(--deep) 100%); }
.quotes__in { position: relative; z-index: 1; }

/* the mark, held very quietly in the open right-hand field */
.quotes__mark {
  position: absolute; z-index: 0; pointer-events: none;
  right: clamp(-40px, 2vw, 90px); top: 50%; transform: translateY(-50%);
  width: clamp(220px, 30vw, 460px); aspect-ratio: 1;
  color: var(--steel); opacity: .17;
}
.quotes__mark img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
@media (max-width: 860px) { .quotes__mark { display: none; } }

/* quotes stack in one grid cell so the stage takes the height of the longest —
   no clipping, no reserved dead space */
.quote-stage { display: grid; }
.quote {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; justify-content: center; gap: 30px;
  opacity: 0; visibility: hidden;
  transition: opacity .7s var(--ease), visibility .7s;
}
.quote.is-on { opacity: 1; visibility: visible; }
.quote blockquote {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.5vw, 2.3rem);
  line-height: 1.26; letter-spacing: -.02em;
  max-width: 32ch; font-style: italic;
  text-wrap: pretty;
}
.quote blockquote strong { font-style: normal; font-weight: 400; }
.quote figcaption { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--steel); }

.quote-nav { display: flex; align-items: center; gap: 20px; margin-top: clamp(28px, 5vh, 48px); }
.qdot {
  width: 30px; height: 1px; background: rgba(244,241,234,.28); position: relative; overflow: hidden;
}
.qdot::after { content: ""; position: absolute; inset: 0; background: var(--bone); transform: scaleX(0); transform-origin: left; }
.qdot.is-on::after { transform: scaleX(1); transition: transform .5s var(--ease); }
.qcount { margin-left: auto; font-size: .7rem; letter-spacing: .2em; color: rgba(244,241,234,.5); font-variant-numeric: tabular-nums; }

/* ---------- 19. Accordion (service detail lists) ------------------------- */
.acc { border-top: 1px solid var(--rule); }
.acc__item { border-bottom: 1px solid var(--rule); }
.acc__btn {
  width: 100%; text-align: left; display: grid; grid-template-columns: 1fr auto;
  gap: 20px; align-items: center; padding: clamp(18px, 2.6vh, 26px) 0;
  font-family: var(--display); font-size: clamp(1.15rem, 1.9vw, 1.65rem); line-height: 1.24;
  letter-spacing: -.014em;
  transition: color .4s var(--ease);
}
.acc__btn:hover { color: var(--steel); }
.acc__sign { position: relative; width: 14px; height: 14px; flex: none; }
.acc__sign::before, .acc__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: currentColor;
  transition: transform .5s var(--ease);
}
.acc__sign::after { transform: rotate(90deg); }
.acc__item.is-open .acc__sign::after { transform: rotate(0deg); }
.acc__panel { overflow: hidden; height: 0; }
.acc__inner { padding-bottom: clamp(20px, 3vh, 30px); max-width: 60ch; }
.acc__inner p { color: var(--ink-70); }
.acc__inner p + p { margin-top: .8em; }
.acc__price {
  display: inline-block; margin-bottom: 12px;
  font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink);
}
.acc__best {
  display: block; margin-bottom: 10px;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sand);
}

/* ---------- 20. Feature list (checked benefit rows) ---------------------- */
.feats { display: grid; gap: 0; border-top: 1px solid var(--rule); }
@media (min-width: 760px) { .feats--2 { grid-template-columns: 1fr 1fr; column-gap: clamp(30px, 5vw, 80px); } }
.feat { padding: clamp(20px, 3vh, 30px) 0; border-bottom: 1px solid var(--rule); }
.feat h3 { font-family: var(--display); font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.24; margin-bottom: 8px; letter-spacing: -.014em; }
.feat p { color: var(--ink-70); font-size: .97rem; }

/* ---------- 21. Marquee CTA ---------------------------------------------- */
.marquee {
  position: relative; overflow: hidden; padding-block: clamp(50px, 8vh, 96px);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  display: block;
}
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__track span {
  font-family: var(--display); font-size: clamp(2.6rem, 8vw, 7rem); line-height: 1;
  letter-spacing: -.03em; padding-inline: clamp(20px, 3vw, 46px);
  display: inline-flex; align-items: center; gap: clamp(20px, 3vw, 46px);
  white-space: nowrap;
  transition: color .5s var(--ease);
}
.marquee__track span i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--sand); flex: none;
}
.marquee:hover .marquee__track span { color: var(--steel); }

/* ---------- 22. Footer --------------------------------------------------- */
.foot { background: var(--deep); color: var(--bone); padding-block: clamp(60px, 9vh, 110px) 34px; }
.foot a { color: inherit; }
.foot__top { display: grid; gap: clamp(38px, 6vw, 70px); }
@media (min-width: 900px) { .foot__top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

.foot__brand { display: grid; gap: 22px; align-content: start; }
.foot__brand img { width: 78px; }
.foot__brand p { color: rgba(244,241,234,.66); font-size: .95rem; max-width: 46ch; }

.foot__cols { display: grid; gap: clamp(28px, 4vw, 44px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.foot__col ul { list-style: none; padding: 0; margin: 0; }
.foot__col h3 { font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(244,241,234,.42); margin-bottom: 18px; font-weight: 500; }
.foot__col li + li { margin-top: 9px; }
.foot__col a, .foot__col p { font-size: .92rem; color: rgba(244,241,234,.78); transition: color .3s var(--ease); }
.foot__col a:hover { color: var(--bone); }
.foot__col strong { color: var(--bone); font-weight: 600; letter-spacing: .04em; }

.foot__bar {
  margin-top: clamp(44px, 7vh, 80px); padding-top: 24px;
  border-top: 1px solid rgba(244,241,234,.14);
  display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center;
  font-size: .76rem; color: rgba(244,241,234,.5);
}
.foot__bar a:hover { color: var(--bone); }
.foot__bar .sp { margin-left: auto; }

/* ---------- 23. Cursor --------------------------------------------------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none;
  width: 34px; height: 34px; border: 1px solid var(--ink-32); border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: width .4s var(--ease), height .4s var(--ease),
              background-color .4s var(--ease), border-color .4s var(--ease), opacity .3s;
  opacity: 0;
  mix-blend-mode: multiply;
}
.cursor.is-on { opacity: 1; }
.cursor.is-hot { width: 58px; height: 58px; background: rgba(46, 134, 222, .1); border-color: transparent; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- 24. Page header (interior) ----------------------------------- */
.phead { position: relative; padding-top: calc(var(--nav-h) + clamp(46px, 9vh, 108px)); }
.phead__crumb { margin-bottom: clamp(20px, 3.4vh, 36px); }
.phead__title { max-width: 17ch; }
.phead__sub { margin-top: clamp(18px, 3vh, 30px); max-width: 52ch; }
.phead__media { margin-top: clamp(40px, 7vh, 86px); }

/* split editorial block: image one side, copy the other */
.split { display: grid; gap: clamp(30px, 5vw, 76px); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--wide-l { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split--wide-r { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--flip > *:first-child { order: 2; }
}
.split__copy { display: grid; gap: clamp(16px, 2.6vh, 26px); align-content: start; }

/* offset image pair */
.pair { display: grid; gap: clamp(16px, 2.4vw, 30px); grid-template-columns: 1fr 1fr; align-items: start; }
.pair > :last-child { margin-top: clamp(26px, 7vw, 90px); }

/* ---------- 25. Forms ---------------------------------------------------- */
.form { display: grid; gap: clamp(22px, 3.4vh, 34px); }
.field { display: grid; gap: 9px; }
.field > label { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-52); }
.field small { font-size: .84rem; color: var(--ink-52); letter-spacing: 0; text-transform: none; line-height: 1.5; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 0; background: none;
  border: 0; border-bottom: 1px solid var(--ink-32);
  font-size: 1rem; color: var(--ink);
  transition: border-color .4s var(--ease);
  border-radius: 0;
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; padding-right: 26px; cursor: pointer;
  background: right center / 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2313284C' stroke-width='1.4'/%3E%3C/svg%3E"); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-32); }

.grid-2 { display: grid; gap: clamp(18px, 2.6vw, 30px); }
@media (min-width: 620px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.checks { display: grid; gap: 0; border-top: 1px solid var(--rule); }
@media (min-width: 700px) { .checks { grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 56px); } }
.check { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
.check input { appearance: none; width: 15px; height: 15px; border: 1px solid var(--ink-32); flex: none; border-radius: 0;
  transition: background .3s var(--ease), border-color .3s var(--ease); }
.check input:checked { background: var(--ink); border-color: var(--ink); }
.check span { font-size: .95rem; color: var(--ink-70); }
.check input:checked + span { color: var(--ink); }

.form__note { font-size: .8rem; color: var(--ink-52); }

/* ---------- 26. Team ----------------------------------------------------- */
/* the bios run long — the portrait rides along rather than stranding a tall
   empty column beside them */
.person { display: grid; gap: clamp(26px, 4.6vw, 66px); align-items: start; }
@media (min-width: 900px) {
  .person { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .person > figure { position: sticky; top: calc(var(--nav-h) + 36px); }
}
.person__role { margin-bottom: 12px; }
.person__name { margin-bottom: clamp(18px, 2.6vh, 28px); }
.person__sig { margin-top: 26px; font-size: .82rem; color: var(--ink-52); letter-spacing: .02em; }

/* ---------- 27. Related / next ------------------------------------------- */
.next { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.next__row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: clamp(20px, 3vh, 28px) 0; border-bottom: 1px solid var(--rule);
  transition: padding-left .6s var(--ease), color .4s var(--ease); }
.next__row span:first-child { font-family: var(--display); font-size: clamp(1.2rem, 2.4vw, 1.9rem); letter-spacing: -.016em; }
.next__row span:last-child { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-32); }
@media (hover: hover) { .next__row:hover { padding-left: 18px; color: var(--steel); } }

/* ---------- 28. Utilities ------------------------------------------------ */
.mt-s { margin-top: clamp(16px, 2.4vh, 24px); }
.mt-m { margin-top: clamp(26px, 4vh, 44px); }
.mt-l { margin-top: clamp(40px, 7vh, 84px); }
.center { text-align: center; }
.pull-r { margin-left: auto; }
@media (min-width: 900px) { .off-r { margin-left: clamp(0px, 8vw, 160px); } }

/* ---------- 29. Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-img] { clip-path: none !important; }
  [data-img] img { transform: none !important; }
  [data-reveal] { opacity: 1 !important; }
  .line-mask > span { transform: none !important; }
  .hero__seal-type { animation: none; }
  .cursor { display: none; }
  .intro, .aperture, .seal { display: none !important; }
  .hero { height: auto; }
  .hero__stick { position: relative; }
}