/* =========================================================================
   Healthcare Solutions — "Ocean Light"
   Medical claims management · Republic of Maldives
   One typeface. Two surfaces. One accent. A lot of air.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* ink */
  --ink:      #0B1F2A;
  --ink-2:    #435E6B;
  --ink-3:    #728B96;
  --ink-4:    #9CB0B9;

  /* surface */
  --paper:    #FFFFFF;
  --paper-2:  #F6FAFB;
  --paper-3:  #ECF3F5;
  --line:     #E2EBEE;
  --line-2:   #EFF5F6;

  /* deep (dark bands) */
  --deep:     #07202C;
  --deep-2:   #0C3243;
  --on-deep:  #A9C4CE;
  --on-deep-2:#7FA0AD;

  /* accent — lagoon */
  --sea:      #0CC1E0;
  --sea-ink:  #0A8CA6;   /* passes on white */
  --sea-50:   #ECFAFD;
  --sea-100:  #D2F2F9;

  /* type */
  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --t-hero: clamp(2.75rem, 7.4vw, 6.25rem);
  --t-1:    clamp(2.125rem, 5.1vw, 4.125rem);
  --t-2:    clamp(1.5rem, 2.7vw, 2.125rem);
  --t-3:    clamp(1.1875rem, 1.7vw, 1.4375rem);
  --t-lead: clamp(1.0625rem, 1.45vw, 1.375rem);
  --t-body: clamp(1rem, .35vw + .92rem, 1.0625rem);
  --t-sm:   .9375rem;
  --t-xs:   .8125rem;
  --t-label:.6875rem;

  /* layout */
  --wrap:      1180px;
  --wrap-wide: 1440px;
  --wrap-text: 760px;
  --gut:  clamp(1.25rem, 5vw, 3.5rem);
  --sec:  clamp(5.5rem, 12vw, 11.5rem);
  --sec-sm: clamp(3.5rem, 7vw, 6rem);

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(11,31,42,.04), 0 4px 14px -6px rgba(11,31,42,.08);
  --sh:    0 2px 6px rgba(11,31,42,.04), 0 18px 44px -18px rgba(11,31,42,.18);
  --sh-lg: 0 4px 12px rgba(11,31,42,.05), 0 40px 90px -30px rgba(11,31,42,.28);

  --ease:  cubic-bezier(.22,.61,.36,1);
  --out:   cubic-bezier(.16,1,.3,1);
  --hdr:   108px;  /* pill height + its top margin */
}

/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr) + 24px);
}
body {
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--t-hero); line-height: 1.02; letter-spacing: -.038em; }
h2 { font-size: var(--t-1);    line-height: 1.06; letter-spacing: -.032em; }
h3 { font-size: var(--t-2);    line-height: 1.15; letter-spacing: -.024em; }
h4 { font-size: var(--t-3);    line-height: 1.25; letter-spacing: -.018em; }
p  { text-wrap: pretty; }
strong, b { font-weight: 600; color: var(--ink); }
:focus-visible { outline: 2px solid var(--sea-ink); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--sea-100); color: var(--ink); }
.no-scroll { overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 50%; top: 10px; transform: translate(-50%, -220%);
  background: var(--ink); color: #fff; padding: .75rem 1.25rem; border-radius: var(--r-pill);
  z-index: 300; font-weight: 500; font-size: var(--t-sm);
  transition: transform .25s var(--out);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- 3. Layout ---------------------------------------------------- */
.wrap      { width: 100%; max-width: var(--wrap);      margin-inline: auto; padding-inline: var(--gut); }
.wrap-wide { width: 100%; max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--gut); }
.wrap-text { width: 100%; max-width: var(--wrap-text); margin-inline: auto; padding-inline: var(--gut); }
.wrap-flush{ width: 100%; max-width: var(--wrap-wide); margin-inline: auto; }

.sec       { padding-block: var(--sec); position: relative; }
.sec--sm   { padding-block: var(--sec-sm); }
.sec--tint { background: var(--paper-2); }
.sec--deep { background: var(--deep); color: var(--on-deep); }
.sec--deep h1, .sec--deep h2, .sec--deep h3, .sec--deep h4 { color: #fff; }
.sec--deep strong, .sec--deep b { color: #fff; }
.sec--top  { padding-top: calc(var(--hdr) + clamp(3.5rem, 8vw, 7rem)); }

.grid { display: grid; gap: clamp(1.25rem, 2.6vw, 2.25rem); }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.duo {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
.duo--top { align-items: start; }
.duo--wide { grid-template-columns: 1.05fr .95fr; }
.stack-v { display: flex; flex-direction: column; }
.center { text-align: center; }
.mx { margin-inline: auto; }
.measure { max-width: 58ch; }
.measure-sm { max-width: 44ch; }

@media (max-width: 940px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .duo, .duo--wide { grid-template-columns: 1fr; gap: clamp(2rem, 7vw, 3rem); }
  .duo--flip > *:first-child { order: 2; }
}
@media (max-width: 620px) {
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
}

/* ---------- 4. Type ------------------------------------------------------ */
.label {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--t-label); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3);
}
.label::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--sea); flex: none;
}
.label--bare::before { display: none; }
.sec--deep .label { color: var(--on-deep-2); }

.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); letter-spacing: -.012em; }
.sec--deep .lead { color: var(--on-deep); }
.small { font-size: var(--t-sm); }
.xs    { font-size: var(--t-xs); }
.dim   { color: var(--ink-3); }
.sec--deep .dim { color: var(--on-deep-2); }
.sea   { color: var(--sea-ink); }
.sec--deep .sea { color: var(--sea); }
.nums  { font-variant-numeric: tabular-nums; }

/* section head — a lot of air by default.
   Widths are set on the headings themselves so `ch` is measured in the
   heading's own type size, not the container's. */
.head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.head > .label { margin-bottom: 1.5rem; }
.head h1, .head h2 { max-width: 15ch; }
.head p { margin-top: 1.5rem; max-width: 52ch; }
.head--center { text-align: center; }
.head--center h1, .head--center h2 { max-width: 17ch; margin-inline: auto; }
.head--center p { margin-inline: auto; }
.head--wide h1, .head--wide h2 { max-width: 20ch; }
.head--row {
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 2.5rem; flex-wrap: wrap;
}

/* a very large single statement */
.say {
  font-size: clamp(1.75rem, 4.4vw, 3.5rem);
  line-height: 1.14; letter-spacing: -.032em;
  font-weight: 500; color: var(--ink);
  max-width: 20ch;
}
.say--center { margin-inline: auto; text-align: center; }
.say--long { max-width: 27ch; font-size: clamp(1.5rem, 3.1vw, 2.5rem); line-height: 1.22; }
.sec--deep .say { color: #fff; }

/* ---------- 5. Buttons / links ------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-weight: 500; font-size: var(--t-sm); line-height: 1;
  padding: .95rem 1.5rem; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--out), opacity .3s var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .35s var(--out); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(.98); }

.btn--ink   { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #16323F; }
.btn--sea   { background: var(--sea); color: var(--deep); font-weight: 600; }
.btn--sea:hover { background: #29CFE9; }
.btn--line  { border-color: var(--line); color: var(--ink); background: var(--paper); }
.btn--line:hover { border-color: var(--ink-4); background: var(--paper-2); }
.btn--quiet { color: var(--ink); background: var(--paper-3); }
.btn--quiet:hover { background: #E1EDF0; }
.btn--onDeep { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.16); }
.btn--onDeep:hover { background: rgba(255,255,255,.16); }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: var(--paper-3); }
.btn--lg { padding: 1.15rem 1.9rem; font-size: var(--t-body); }
.btn--sm { padding: .7rem 1.15rem; font-size: var(--t-xs); }
.btn--block { display: flex; width: 100%; }

.btns { display: flex; flex-wrap: wrap; gap: .75rem; }

.alink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 500; color: var(--ink); font-size: var(--t-sm);
  padding-bottom: 2px; position: relative; width: fit-content;
}
.alink svg { width: 15px; height: 15px; transition: transform .35s var(--out); }
.alink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; opacity: .25;
  transform-origin: left; transform: scaleX(1);
  transition: transform .45s var(--out), opacity .3s var(--ease);
}
.alink:hover svg { transform: translateX(4px); }
.alink:hover::after { opacity: .6; }
.sec--deep .alink { color: #fff; }

/* ---------- 6. Header — a floating glass pill ----------------------------
   Three glass layers as SIBLINGS (never nested, or Safari composites the inner
   backdrop against the unfiltered page): the blurred+saturated base, a
   feathered rim-only lens for refraction, and a conic hairline so the edge
   catches light unevenly. The menu is the same pill growing downwards. */
.hdr {
  position: fixed; inset: 14px 0 auto 0; z-index: 120;
  display: flex; justify-content: center; padding-inline: 14px;
  pointer-events: none;
  transition: transform .55s var(--out);
}
.hdr.is-hidden:not(.is-open) { transform: translateY(calc(-100% - 24px)); }

.hdr__pill {
  pointer-events: auto; position: relative; width: min(100%, 720px);
  border-radius: 40px; isolation: isolate; overflow: hidden;
  transform-origin: 50% 0;
  transition: width .6s var(--out);
}
.hdr__glass, .hdr__lens, .hdr__rim, .hdr__shine {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
}
.hdr__glass {
  z-index: -3;
  background: linear-gradient(118deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.40) 48%, rgba(255,255,255,.58) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.12),
    0 14px 44px -16px rgba(11,31,42,.32),
    0 2px 10px rgba(11,31,42,.06);
  transition: background .5s var(--ease);
}
.hdr.is-open .hdr__glass {
  background: linear-gradient(118deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.72) 48%, rgba(255,255,255,.82) 100%);
}
/* refraction: a second, softer blur that only lives in a feathered 14px band at the edge */
.hdr__lens {
  z-index: -2;
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  backdrop-filter: blur(6px) saturate(160%);
  -webkit-mask: radial-gradient(120% 140% at 50% 50%, transparent 58%, #000 88%);
  mask: radial-gradient(120% 140% at 50% 50%, transparent 58%, #000 88%);
  opacity: .9;
}
/* hairline: conic so it is bright where light would catch and near-invisible elsewhere */
.hdr__rim {
  z-index: -1; padding: 1px;
  background: conic-gradient(from 210deg,
    rgba(255,255,255,.95), rgba(255,255,255,.28) 22%, rgba(255,255,255,.7) 48%,
    rgba(255,255,255,.18) 70%, rgba(255,255,255,.85) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* a specular sweep that crosses the surface when the menu opens or the pill is hovered */
.hdr__shine {
  z-index: 0; overflow: hidden;
}
.hdr__shine::before {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: -30%; width: 46%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 100%);
  transform: translateX(-120%) skewX(-14deg);
}
.hdr__pill:hover .hdr__shine::before,
.hdr.is-open .hdr__shine::before { animation: shine 1.4s var(--ease) both; }
@keyframes shine { to { transform: translateX(420%) skewX(-14deg); } }

/* the liquid wobble as the pill grows into the sheet */
.hdr.is-open .hdr__pill { animation: liquid 1.1s var(--out) both; }
@keyframes liquid {
  0%   { border-radius: 40px; }
  35%  { border-radius: 46px 36px 50px 40px / 36px 48px 34px 52px; }
  70%  { border-radius: 36px 44px 36px 46px / 48px 36px 50px 36px; }
  100% { border-radius: 40px; }
}

/* ---- the bar: menu | logo | cta ---- */
.hdr__bar {
  position: relative; z-index: 1; height: 80px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px 0 6px;
}
.hdr__menu {
  display: inline-flex; align-items: center; gap: .6rem;
  height: 44px; padding: 0 14px 0 12px; border-radius: 999px;
  font-size: var(--t-sm); font-weight: 500; color: var(--ink);
  transition: background-color .3s var(--ease);
}
.hdr__menu:hover { background: rgba(255,255,255,.45); }
.hdr__burger { position: relative; width: 18px; height: 12px; display: block; }
.hdr__burger i {
  position: absolute; left: 0; width: 18px; height: 1.6px; border-radius: 2px; background: currentColor;
  transition: transform .5s var(--out), top .5s var(--out), width .4s var(--out);
}
.hdr__burger i:first-child { top: 0; }
.hdr__burger i:last-child  { top: 10.4px; width: 12px; }
.hdr__menu:hover .hdr__burger i:last-child { width: 18px; }
.hdr.is-open .hdr__burger i { width: 18px; top: 5.2px; }
.hdr.is-open .hdr__burger i:first-child { transform: rotate(45deg); }
.hdr.is-open .hdr__burger i:last-child  { transform: rotate(-45deg); }
.hdr__menu-txt { position: relative; height: 1.2em; overflow: hidden; }
.hdr__menu-txt span { display: block; transition: transform .5s var(--out); }
.hdr.is-open .hdr__menu-txt span { transform: translateY(-100%); }

.hdr__logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap;
  padding: .25rem .5rem; border-radius: 999px;
  transition: transform .5s var(--out);
}
.hdr__logo img { width: 70px; height: 70px; }
.hdr__logo .mark--navy { display: none; }
html.over-hero .hdr__logo .mark--navy { display: block; }
html.over-hero .hdr__logo .mark--color { display: none; }
.hdr__logo:hover { transform: translate(-50%, -50%) scale(1.03); }
.hdr__cta { flex: none; }

/* ---- the sheet: the pill grows, links rise in one after another ---- */
.hdr__sheet {
  position: relative; z-index: 1;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .7s var(--out);
}
.hdr.is-open .hdr__sheet { grid-template-rows: 1fr; }
.hdr__sheet-in { min-height: 0; overflow: hidden; }
.hdr__nav {
  display: flex; flex-direction: column; padding: .5rem 1.25rem 0;
  border-top: 1px solid rgba(11,31,42,.08);
}
.hdr__nav a {
  --i: 0;
  display: flex; align-items: baseline; gap: 1rem;
  padding: .95rem .25rem; border-bottom: 1px solid rgba(11,31,42,.07);
  font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 500; letter-spacing: -.02em; color: var(--ink);
  opacity: 0; transform: translateY(14px); filter: blur(6px);
  transition: opacity .55s var(--ease), transform .7s var(--out), filter .55s var(--ease), color .3s;
  transition-delay: 0ms;
}
.hdr__nav a .n { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; color: var(--ink-4); font-variant-numeric: tabular-nums; min-width: 2ch; }
.hdr__nav a svg { width: 18px; height: 18px; margin-left: auto; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .4s var(--out); align-self: center; }
.hdr__nav a:hover { color: var(--sea-ink); }
.hdr__nav a:hover svg, .hdr__nav a[aria-current] svg { opacity: 1; transform: none; }
.hdr__nav a[aria-current] { color: var(--sea-ink); }
.hdr__nav a:last-child { border-bottom: 0; }
.hdr__nav a:focus-visible { outline-offset: -3px; border-radius: 12px; }
.hdr.is-open .hdr__nav a {
  opacity: 1; transform: none; filter: blur(0);
  transition-delay: calc(90ms + var(--i) * 48ms);
}
.hdr__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.5rem 1.35rem; font-size: var(--t-sm); color: var(--ink-3);
  border-top: 1px solid rgba(11,31,42,.08);
  opacity: 0; transition: opacity .5s var(--ease); transition-delay: 0ms;
}
.hdr.is-open .hdr__foot { opacity: 1; transition-delay: 420ms; }
.hdr__foot a { color: var(--ink); }
.hdr__foot a:hover { color: var(--sea-ink); }
.hdr__foot .btn { display: none; }

/* page veil behind the open menu */
.hdr__veil {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(7,32,44,.28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease), visibility .6s;
}
.hdr__veil.is-on { opacity: 1; visibility: visible; }

@media (max-width: 640px) {
  :root { --hdr: 92px; }                 /* 68px bar + 10px top margin + breathing room */
  .hdr { inset: 10px 0 auto 0; padding-inline: 10px; }
  .hdr__glass, .hdr__veil { -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); }
  .hdr__lens { display: none; }          /* a second backdrop pass over video kills phone frame-rate */
  .hdr__menu-txt { display: none; }
  .hdr__menu { padding: 0 12px; }
  .hdr__logo img { width: 58px; height: 58px; }
  .hdr__bar { height: 68px; }
  .hdr__nav a { font-size: 1.25rem; padding: .85rem .25rem; }
  .hdr__foot { flex-direction: column; align-items: stretch; }
  .hdr__foot .btn { display: flex; margin-top: .25rem; }
  .hdr__cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hdr.is-open .hdr__pill { animation: none; }
  .hdr__shine { display: none; }
  .hdr__nav a { filter: none; transform: none; transition-delay: 0ms !important; }
}

/* ---------- 7. Hero ------------------------------------------------------ */
.hero {
  position: relative; min-height: 100svh; display: grid; align-items: end;
  background: var(--deep); color: #fff; overflow: clip;
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
  will-change: transform;
}
.hero__media img, .hero__media video {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
}
/* Both layers are positioned so DOM order decides the paint order: the poster
   <img> first, the <video> on top of it. (A non-positioned video paints
   BENEATH a positioned img whatever the DOM order — it played invisibly.) */
.hero__media img, .hero__media video { position: absolute; inset: 0; }
.hero__media video { z-index: 1; opacity: 0; transition: opacity 1.1s var(--ease); }
.hero__media video.is-playing { opacity: 1; }
/* playlist: the incoming clip fades in ON TOP of the outgoing one, which keeps
   its opacity until the fade is over — no dip to the poster between clips */
.hero__media video.is-on  { opacity: 1; z-index: 3; }
.hero__media video.was-on { opacity: 1; z-index: 2; transition: none; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(7,32,44,.55) 0%, rgba(7,32,44,.12) 26%, rgba(7,32,44,.20) 55%, rgba(7,32,44,.86) 100%);
}
.hero__in {
  padding-bottom: clamp(3.5rem, 8vw, 7rem); padding-top: calc(var(--hdr) + 2rem);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(2rem, 5vw, 5rem); align-items: end;
}
.hero__copy { grid-column: 1; min-width: 0; }
.hero__foot { grid-column: 1 / -1; }
/* the premium card: portrait, glass-framed, to the right of the headline */
.hero__ad { grid-column: 2; grid-row: 1; width: clamp(240px, 21vw, 330px); justify-self: end; }
.ad--card {
  position: relative; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 0 0 1px rgba(255,255,255,.22), 0 30px 70px -24px rgba(0,0,0,.55);
}
.hero__ad .ad--card { aspect-ratio: 4 / 5; }
.hero__ad .ad__tag { color: rgba(255,255,255,.5); text-align: right; margin-top: .6rem; }
@media (max-width: 940px) { .hero__ad { display: none; } .hero__in { grid-template-columns: 1fr; } }
.hero h1 { color: #fff; max-width: 14ch; }
.hero .lead { color: rgba(255,255,255,.82); max-width: 46ch; margin-top: clamp(1.5rem, 2.6vw, 2.25rem); }
.hero .label { color: rgba(255,255,255,.62); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.hero .btns { margin-top: clamp(2rem, 4vw, 3rem); }
.hero__foot {
  margin-top: clamp(3rem, 7vw, 6rem);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.16); padding-top: 1.5rem;
}
.hero__facts { display: flex; gap: clamp(1.75rem, 5vw, 4.5rem); flex-wrap: wrap; }
.hero__facts div { display: flex; flex-direction: column; gap: .2rem; }
.hero__facts b {
  font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 500; color: #fff;
  letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.hero__facts span { font-size: var(--t-xs); color: rgba(255,255,255,.6); letter-spacing: .02em; }

.hero__cue {
  display: inline-flex; align-items: center; gap: .6rem; margin-right: 3.5rem;
  font-size: var(--t-xs); color: rgba(255,255,255,.6); letter-spacing: .1em; text-transform: uppercase;
}
.hero__cue i {
  width: 22px; height: 34px; border: 1px solid rgba(255,255,255,.35); border-radius: var(--r-pill);
  position: relative; flex: none;
}
.hero__cue i::after {
  content: ""; position: absolute; left: 50%; top: 7px; width: 2px; height: 6px;
  border-radius: 2px; background: rgba(255,255,255,.75); transform: translateX(-50%);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue {
  0%,15%   { transform: translate(-50%, 0);    opacity: 0; }
  30%      { opacity: 1; }
  70%,100% { transform: translate(-50%, 12px); opacity: 0; }
}

/* page hero (interior pages) */
.phero { padding-top: calc(var(--hdr) + clamp(4rem, 9vw, 8rem)); padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.phero h1 { max-width: 16ch; }
.phero .lead { margin-top: clamp(1.25rem, 2.4vw, 2rem); max-width: 52ch; }
.phero .label { margin-bottom: clamp(1.25rem, 2.4vw, 2rem); }
.phero .btns { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* ---------- 8. Motion primitives ---------------------------------------- */
/* rise — the workhorse */
[data-anim] { opacity: 0; will-change: transform, opacity; }
[data-anim="rise"]  { transform: translate3d(0, 30px, 0); }
[data-anim="fade"]  { transform: none; }
[data-anim="left"]  { transform: translate3d(-28px, 0, 0); }
[data-anim="right"] { transform: translate3d(28px, 0, 0); }
[data-anim="zoom"]  { transform: scale(.965); }
[data-anim].is-in {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease), transform 1.05s var(--out);
  transition-delay: var(--d, 0ms);
}

/* split — headings rise word by word out of their own mask box */
.sp-w {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: .16em; margin-bottom: -.16em;
}
.sp-word { display: inline-block; will-change: transform; }
[data-split]:not(.is-in) .sp-word { transform: translate3d(0, 110%, 0); }
[data-split].is-in .sp-word {
  transform: none;
  transition: transform .95s var(--out);
  transition-delay: calc(var(--w, 0) * 42ms);
}

/* ink — words darken as the block scrolls through */
.ik-word { color: var(--ink-4); transition: color .5s var(--ease); }
.ik-word.is-lit { color: var(--ink); }
.sec--deep .ik-word { color: rgba(255,255,255,.24); }
.sec--deep .ik-word.is-lit { color: #fff; }

/* mask — the picture wipes open inside its frame while it counter-scales.
   The clip lives on the CHILD, never on the observed element: an element
   clipped to zero area reports intersectionRatio 0, so observing it would
   deadlock (hidden -> never intersects -> never revealed). */
[data-mask] { overflow: hidden; }
[data-mask] > img, [data-mask] > video, [data-mask] > picture > img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
  transition: clip-path 1.25s var(--out), transform 1.6s var(--out);
}
[data-mask]:not(.is-in) > img,
[data-mask]:not(.is-in) > video,
[data-mask]:not(.is-in) > picture > img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.16);
}

/* parallax — set by JS via --y */
[data-para] { will-change: transform; }
[data-para] > img, [data-para] > video { transform: translate3d(0, var(--y, 0px), 0) scale(1.14); }

/* line draw */
.draw { stroke-dasharray: var(--len, 1000); stroke-dashoffset: calc(var(--len, 1000) * (1 - var(--p, 0))); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-anim], [data-anim].is-in { opacity: 1; transform: none; transition: none; }
  [data-split] .sp-word { transform: none !important; transition: none; }
  [data-mask] > img, [data-mask] > video, [data-mask] > picture > img {
    clip-path: none !important; transform: none !important; transition: none;
  }
  [data-para] > img, [data-para] > video { transform: none !important; }
  .ik-word { color: var(--ink); }
  .sec--deep .ik-word { color: #fff; }
  .hero__cue i::after { animation: none; }
  .marquee__track { animation: none !important; }
  .stage__track { height: auto !important; }
  .stage__pin { position: static; height: auto; display: block; padding-block: clamp(4rem, 10vw, 8rem); }
  .stage__frames { display: none; }
  .stage__in { display: block; }
  .stage__caps { min-height: 0; }
  .stage__cap { position: static; opacity: 1 !important; transform: none !important; padding-block: 1.1rem; }
  .stage__cap p { font-size: clamp(1.75rem, 6.5vw, 2.75rem); max-width: 18ch; }
  .stage__count, .stage__skip { display: none; }
}

/* ---------- 9. Media ----------------------------------------------------- */
.fig { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-3); }
.fig img, .fig video { width: 100%; height: 100%; object-fit: cover; }
.fig--tall  { aspect-ratio: 3/4; }
.fig--photo { aspect-ratio: 2/3; }      /* portrait stills (2929×4394) */
.fig--film  { aspect-ratio: 5/4; }      /* stills cut from the brand film (1248×998) */
.fig--wide  { aspect-ratio: 16/9; }
.fig--shore { aspect-ratio: 4/5; }
.fig--32    { aspect-ratio: 3/2; }      /* client photographs */
.fig--43    { aspect-ratio: 4/3; }
.fig--sq    { aspect-ratio: 1/1; }
.fig img, .fig video { object-position: var(--pos, 50% 50%); }
.fig--flush { border-radius: 0; }
.fig__cap {
  position: absolute; left: 1.25rem; bottom: 1.25rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .85rem; border-radius: var(--r-pill);
  background: rgba(7,32,44,.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #fff; font-size: var(--t-xs); font-weight: 500; letter-spacing: .01em;
}
.fig__cap::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sea); }

/* full-bleed band of film */
.band { position: relative; overflow: clip; }
.band__media { position: absolute; inset: -12% 0; }
.band__media img, .band__media video { width: 100%; height: 100%; object-fit: cover; }
.band__media video { position: absolute; inset: 0; z-index: 1; }
.band__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,32,44,.72), rgba(7,32,44,.5) 45%, rgba(7,32,44,.85)); }
.band__in { position: relative; z-index: 2; padding-block: clamp(6rem, 16vw, 14rem); color: #fff; }
.band__in h2, .band__in .say { color: #fff; }

/* ---------- 10. Stage (pinned, scrubbed chapter) ------------------------- */
.stage { position: relative; background: var(--deep); }
.stage__track { height: calc(var(--n, 6) * 84svh); }
.stage__pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; align-items: flex-end;
}
.stage__frames { position: absolute; inset: 0; }
.stage__frame {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .9s var(--ease);
}
.stage__frame.is-on { opacity: 1; }
/* Full-bleed, as before: the still covers the whole section. No slow zoom —
   that was the "zoomed in" the client saw. The focus point per frame comes from
   --pos so the subject stays in shot when the screen is a different shape. */
.stage__frame img, .stage__frame video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 50%);
}
.stage__amb { display: none; }
.stage__frame::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,32,44,.38) 0%, rgba(7,32,44,0) 28%),
    linear-gradient(180deg, rgba(7,32,44,0) 48%, rgba(7,32,44,.78) 100%);
}
.stage__in {
  position: relative; z-index: 3; width: 100%;
  padding-bottom: clamp(3rem, 8vw, 6.5rem);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
}
.stage__caps { position: relative; flex: 1 1 auto; min-height: 6.5em; }
/* the counter sits in the flow at the right; the caption is centred on the viewport, not on what is left */
.stage__count { position: absolute; right: var(--gut); bottom: clamp(3rem, 8vw, 6.5rem); }
@media (max-width: 700px) { .stage__count { display: none; } }
.stage__cap {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity .6s var(--ease), transform .8s var(--out);
  pointer-events: none;
}
.stage__cap.is-on { opacity: 1; transform: none; pointer-events: auto; }
.stage__cap p {
  font-size: clamp(1.875rem, 4.6vw, 3.75rem); line-height: 1.08; letter-spacing: -.03em;
  font-weight: 500; color: #fff; max-width: 18ch; text-wrap: balance; margin-inline: auto;
}
.stage__count {
  flex: none; display: inline-flex; align-items: baseline; gap: .35rem; margin-right: 3.5rem;
  font-size: var(--t-xs); letter-spacing: .14em; color: rgba(255,255,255,.5);
  font-variant-numeric: tabular-nums;
}
.stage__count b { color: #fff; font-weight: 600; }
.stage__skip {
  position: absolute; right: var(--gut); top: calc(var(--hdr) + 1rem); z-index: 4;
  font-size: var(--t-xs); font-weight: 500; letter-spacing: .06em; color: rgba(255,255,255,.6);
  padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.22);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.stage__skip:hover { color: #fff; border-color: rgba(255,255,255,.6); }
@media (max-width: 700px) {
  .stage__skip, .stage__count { display: none; }
  .stage__in { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}

/* ---------- 10b. Film player -------------------------------------------- */
.player { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--deep); }
.player video { width: 100%; height: 100%; object-fit: cover; display: block; }
.player__go {
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; gap: 1rem;
  justify-items: center; color: #fff; background: linear-gradient(180deg, rgba(7,32,44,.25), rgba(7,32,44,.6));
  transition: opacity .5s var(--ease), visibility .5s;
  font-size: var(--t-sm); font-weight: 500; letter-spacing: .02em;
}
.player__go::before {
  content: ""; width: 74px; height: 74px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 54% center; background-size: 26px;
  transition: transform .5s var(--out), background-color .4s;
}
.player__go:hover::before { transform: scale(1.07); background-color: rgba(255,255,255,.24); }
.player__go span { font-size: var(--t-xs); color: rgba(255,255,255,.66); letter-spacing: .16em; text-transform: uppercase; }
.player.is-live .player__go { opacity: 0; visibility: hidden; }

/* ---------- 12b. Atoll ------------------------------------------------- */
.atoll { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; grid-template-columns: repeat(3, 1fr); }
.atoll > div { background: var(--paper); padding: clamp(1.25rem, 2.4vw, 2rem); display: flex; flex-direction: column; gap: .4rem; }
.atoll b { font-size: var(--t-3); font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.atoll span { font-size: var(--t-sm); color: var(--ink-3); }
@media (max-width: 760px) { .atoll { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .atoll { grid-template-columns: 1fr; } }

/* ---------- 11. Cards / panels ------------------------------------------ */
.card {
  display: flex; flex-direction: column; gap: .85rem;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line);
  transition: border-color .4s var(--ease), transform .5s var(--out), box-shadow .5s var(--ease);
}
a.card:hover { border-color: var(--ink-4); transform: translateY(-4px); box-shadow: var(--sh); }
.card__n { font-size: var(--t-xs); font-weight: 600; color: var(--ink-4); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.card h3 { font-size: var(--t-3); }
.card p { font-size: var(--t-sm); color: var(--ink-3); }
.card__go { margin-top: auto; padding-top: .75rem; }
.card--plain { border-color: transparent; background: var(--paper-2); }
.card--deep { background: var(--deep-2); border-color: rgba(255,255,255,.1); color: var(--on-deep); }
.card--deep h3 { color: #fff; }
.card--deep p { color: var(--on-deep-2); }

.icon {
  width: 40px; height: 40px; display: grid; place-items: center; flex: none;
  border-radius: 12px; background: var(--sea-50); color: var(--sea-ink); margin-bottom: .35rem;
}
.icon svg { width: 20px; height: 20px; }
.card--deep .icon { background: rgba(12,193,224,.14); color: var(--sea); }

/* sticky stacking cards */
.stack { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem); }
.stack__item {
  position: sticky; top: calc(var(--hdr) + clamp(1.5rem, 4vw, 3.5rem));
  border-radius: var(--r-xl); background: var(--paper); border: 1px solid var(--line);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  transform-origin: top center;
  box-shadow: 0 -1px 0 var(--paper), var(--sh-sm);
}
.stack__item > .grid { align-items: start; }
@media (max-width: 940px) { .stack__item { position: static; } }

/* numbered rows */
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 3rem 3.5rem 1fr auto; gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start; padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  transition: background-color .4s var(--ease), padding-inline .4s var(--out);
}
a.row:hover { background: var(--paper-2); padding-inline: 1.25rem; }
.row__n { font-size: var(--t-xs); font-weight: 600; color: var(--ink-4); letter-spacing: .1em; font-variant-numeric: tabular-nums; padding-top: 1.1rem; }
.row__ic {
  width: 3.5rem; height: 3.5rem; border-radius: 16px; display: grid; place-items: center;
  background: var(--sea-50); color: var(--sea-ink);
  transition: background-color .35s var(--ease), color .35s var(--ease), transform .45s var(--out);
}
.row__ic svg { width: 26px; height: 26px; }
a.row:hover .row__ic { background: var(--ink); color: #fff; transform: translateY(-2px); }
.docs__ic, .defs .docs__ic {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 10px;
  background: var(--sea-50); color: var(--sea-ink); vertical-align: middle; margin-right: .6rem;
}
.docs__ic svg { width: 17px; height: 17px; }
.row__b h3 { font-size: var(--t-2); }
.row__b p { margin-top: .5rem; color: var(--ink-3); max-width: 56ch; font-size: var(--t-sm); }
.row__go { color: var(--ink-4); transition: color .3s, transform .4s var(--out); }
.row__go svg { width: 20px; height: 20px; }
a.row:hover .row__go { color: var(--ink); transform: translateX(4px); }
@media (max-width: 700px) {
  .row { grid-template-columns: 3rem 1fr auto; gap: 1rem; }
  .row__n { display: none; }
  .row__ic { width: 3rem; height: 3rem; border-radius: 14px; }
  .row__ic svg { width: 22px; height: 22px; }
  .row__n { grid-column: 1 / -1; }
}

/* ---------- 12. Flow (scrubbed) ----------------------------------------- */
.flow { position: relative; display: flex; flex-direction: column; }
.flow__line {
  position: absolute; left: 11px; top: .9rem; bottom: .9rem; width: 1px;
  background: var(--line);
}
.flow__line::after {
  content: ""; position: absolute; inset: 0 0 auto 0; width: 100%;
  height: calc(var(--p, 0) * 100%); background: var(--sea);
  transition: height .12s linear;
}
.sec--deep .flow__line { background: rgba(255,255,255,.14); }
.flow__step {
  position: relative; display: grid; grid-template-columns: 23px 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem); padding-block: clamp(1.5rem, 3.4vw, 2.75rem);
}
.flow__dot {
  width: 23px; height: 23px; border-radius: 50%; background: var(--paper);
  border: 1px solid var(--line); display: grid; place-items: center;
  position: relative; z-index: 2; margin-top: .35rem;
  transition: border-color .5s var(--ease), background-color .5s var(--ease);
}
.sec--deep .flow__dot { background: var(--deep); border-color: rgba(255,255,255,.2); }
.flow__dot::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line);
  transition: background-color .5s var(--ease), transform .5s var(--out);
}
.flow__step.is-lit .flow__dot { border-color: var(--sea); }
.flow__step.is-lit .flow__dot::after { background: var(--sea); transform: scale(1.25); }
.flow__b h3 { font-size: var(--t-2); }
.flow__b p  { margin-top: .65rem; color: var(--ink-3); max-width: 54ch; }
.sec--deep .flow__b p { color: var(--on-deep-2); }
.flow__meta {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem;
  font-size: var(--t-xs); font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-4);
}
.flow__meta b { color: var(--ink-2); font-weight: 600; letter-spacing: .02em; text-transform: none; }
.sec--deep .flow__meta b { color: #fff; }

/* horizontal 4-beat pipe */
.pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.pipe::before {
  content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 22px; height: 1px; background: var(--line);
}
.pipe__fill {
  position: absolute; left: 12.5%; top: 22px; height: 1px; background: var(--sea);
  width: calc(var(--p, 0) * 75%); transition: width .12s linear;
}
.pipe__n { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .9rem; padding-inline: .5rem; }
.pipe__n i {
  width: 45px; height: 45px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink-4); position: relative; z-index: 2;
  transition: color .5s var(--ease), border-color .5s var(--ease), transform .6s var(--out), background-color .5s var(--ease);
}
.pipe__n i svg { width: 19px; height: 19px; }
.pipe__n.is-lit i { color: var(--sea-ink); border-color: var(--sea); transform: scale(1.06); }
.pipe__n b { font-size: var(--t-sm); font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.pipe__n span { font-size: var(--t-xs); color: var(--ink-3); }
@media (max-width: 760px) {
  .pipe { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
  .pipe::before, .pipe__fill { display: none; }
}

/* ---------- 13. Rail (horizontal on vertical scroll) -------------------- */
.rail { position: relative; }
.rail__pin { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.rail__strip {
  display: flex; gap: clamp(1rem, 2vw, 1.75rem); padding-inline: var(--gut);
  transform: translate3d(calc(var(--x, 0px) * -1), 0, 0); will-change: transform;
}
.rail__card {
  flex: none; width: clamp(260px, 30vw, 400px);
  border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2);
  border: 1px solid var(--line); display: flex; flex-direction: column;
}
.rail__card .fig { border-radius: 0; aspect-ratio: 5/4; }
.rail__card__b { padding: clamp(1.25rem, 2.2vw, 1.85rem); display: flex; flex-direction: column; gap: .6rem; }
@media (max-width: 940px) {
  .rail__pin { position: static; height: auto; display: block; }
  .rail__strip { transform: none !important; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; }
  .rail__card { scroll-snap-align: start; }
}

/* ---------- 14. Marquee -------------------------------------------------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: clamp(2rem, 5vw, 4.5rem); width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: .7rem; white-space: nowrap;
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-3); letter-spacing: -.01em;
}
.marquee__item::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--sea); flex: none; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- 15. Tabs & accordion ---------------------------------------- */
.tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--paper-3); border-radius: var(--r-pill);
}
.tabs button {
  padding: .7rem 1.35rem; border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 500;
  color: var(--ink-2); transition: background-color .35s var(--ease), color .35s var(--ease);
}
.tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--sh-sm); }
.tabpanel[hidden] { display: none; }
.tabpanel { animation: tabin .6s var(--out); }
@keyframes tabin { from { opacity: 0; transform: translateY(10px); } }

.acc { border-top: 1px solid var(--line); }
.acc__i { border-bottom: 1px solid var(--line); }
.acc__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.25rem, 2.4vw, 1.85rem) 0; text-align: left;
  font-size: var(--t-3); font-weight: 500; color: var(--ink); letter-spacing: -.018em; line-height: 1.35;
}
.acc__q i {
  flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; position: relative; margin-top: .15rem;
  transition: border-color .35s var(--ease), transform .45s var(--out), background-color .35s;
}
.acc__q i::before, .acc__q i::after {
  content: ""; position: absolute; background: var(--ink-2); border-radius: 2px;
  transition: transform .45s var(--out), opacity .3s;
}
.acc__q i::before { width: 11px; height: 1.5px; }
.acc__q i::after  { width: 1.5px; height: 11px; }
.acc__i.is-open .acc__q i { border-color: var(--ink); transform: rotate(180deg); }
.acc__i.is-open .acc__q i::after { transform: scaleY(0); }
.acc__a { overflow: hidden; height: 0; transition: height .5s var(--out); }
.acc__a > div { padding-bottom: clamp(1.25rem, 2.4vw, 1.85rem); color: var(--ink-3); max-width: 62ch; }
.acc__a p + p { margin-top: .85rem; }
.sec--deep .acc, .sec--deep .acc__i { border-color: rgba(255,255,255,.12); }
.sec--deep .acc__q i { border-color: rgba(255,255,255,.2); }
.sec--deep .acc__q i::before, .sec--deep .acc__q i::after { background: rgba(255,255,255,.8); }
.sec--deep .acc__a > div { color: var(--on-deep-2); }

/* ---------- 16. Lists ---------------------------------------------------- */
.ticks { display: flex; flex-direction: column; gap: .9rem; }
.ticks li { display: flex; gap: .85rem; align-items: flex-start; color: var(--ink-2); }
.ticks li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: .32em; border-radius: 50%;
  background: var(--sea-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A8CA6' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.sec--deep .ticks li { color: var(--on-deep); }
.sec--deep .ticks li::before { background-color: rgba(12,193,224,.16); }

.dots { display: flex; flex-direction: column; gap: .85rem; }
.dots li { display: flex; gap: .85rem; align-items: flex-start; color: var(--ink-3); }
.dots li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-4); margin-top: .68em; }

.sec--partners { background: var(--paper); }
.partners {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem;
}
.partners li {
  padding: 1.5rem 1.4rem 1.6rem; border-radius: 20px; background: #fff; border: 1px solid var(--line);
  transition: transform .45s var(--out), box-shadow .45s var(--ease), border-color .3s;
}
.partners li:hover { transform: translateY(-3px); box-shadow: var(--sh); border-color: transparent; }
.partners__ic {
  width: 3rem; height: 3rem; border-radius: 14px; display: grid; place-items: center;
  background: var(--sea-50); color: var(--sea-ink); margin-bottom: 1.1rem;
}
.partners__ic svg { width: 24px; height: 24px; }
.partners h3 { font-size: 1.0625rem; letter-spacing: -.01em; }
.partners p { margin-top: .4rem; font-size: var(--t-sm); color: var(--ink-3); }
.defs { display: grid; gap: 0; border-top: 1px solid var(--line); }
.defs > div {
  display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.1rem, 2.2vw, 1.6rem); border-bottom: 1px solid var(--line);
}
.defs dt { font-weight: 600; color: var(--ink); font-size: var(--t-sm); }
.defs dd { color: var(--ink-3); font-size: var(--t-sm); }
@media (max-width: 640px) { .defs > div { grid-template-columns: 1fr; gap: .35rem; } }

/* stat blocks */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
.stat b {
  display: block; font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 500;
  letter-spacing: -.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.stat b em { font-style: normal; font-size: .45em; letter-spacing: -.01em; color: var(--ink-3); margin-left: .1em; }
.stat span { display: block; margin-top: .85rem; font-size: var(--t-sm); color: var(--ink-3); max-width: 22ch; }
.sec--deep .stat b { color: #fff; }
.sec--deep .stat b em, .sec--deep .stat span { color: var(--on-deep-2); }
.band .stat b { color: #fff; }
.band .stat b em, .band .stat span { color: rgba(255,255,255,.66); }

/* band interior inherits the dark treatment */
.band__in .label { color: rgba(255,255,255,.6); }
.band__in h3 { color: #fff; }
.band__in p:not(.say) { color: rgba(255,255,255,.74); }
.band__in .ticks li { color: rgba(255,255,255,.82); }
.band__in .ticks li::before { background-color: rgba(12,193,224,.16); }

/* ---------- 17. Forms ---------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.form--card {
  gap: 1.75rem; padding: clamp(1.5rem, 3.2vw, 2.5rem); border-radius: 24px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh);
}
.form__head h3 { font-size: var(--t-2); }
.form__head p { margin-top: .5rem; color: var(--ink-3); font-size: var(--t-sm); max-width: 48ch; }
.form__group { display: grid; gap: 1.1rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.form__group legend {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sea-ink);
  padding: 0; margin-bottom: .35rem;
}
.form__foot { display: grid; gap: 1rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.form__foot .btn { justify-self: start; }
.form--card .field label { font-size: .8125rem; }
.form--card .field input, .form--card .field select, .form--card .field textarea {
  background: var(--paper); border: 1.5px solid #CBD7DC; padding: 1rem 1.15rem;
}
.form--card .field input::placeholder, .form--card .field textarea::placeholder { color: var(--ink-4); }
.form--card .field input:hover, .form--card .field select:hover, .form--card .field textarea:hover { border-color: #9FB5BE; }
.form--card .field input:focus, .form--card .field select:focus, .form--card .field textarea:focus { background: #fff; border-color: var(--sea); }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field label { font-size: var(--t-xs); font-weight: 600; color: var(--ink); letter-spacing: .02em; }
.field label span { color: var(--ink-4); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; padding: .95rem 1.1rem; border-radius: var(--r); background: var(--paper);
  border: 1px solid var(--line); color: var(--ink); font-size: var(--t-sm);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s;
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23728B96' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px; padding-right: 2.75rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--sea); box-shadow: 0 0 0 4px var(--sea-50);
}
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: #E05A5A; }
.field__err { font-size: var(--t-xs); color: #C33; display: none; }
.field.is-bad .field__err { display: block; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.1rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }
.formnote { font-size: var(--t-xs); color: var(--ink-4); line-height: 1.6; }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t-xs); color: var(--ink-3); }
.check input { width: 17px; height: 17px; margin-top: .18em; accent-color: var(--sea-ink); flex: none; }

.done {
  border-radius: var(--r-lg); background: var(--sea-50); border: 1px solid var(--sea-100);
  padding: clamp(1.5rem, 3vw, 2.25rem); display: none;
}
.done.is-on { display: block; animation: tabin .6s var(--out); }
.done h3 { font-size: var(--t-2); }
.done p { margin-top: .75rem; color: var(--ink-2); font-size: var(--t-sm); }
.done a { color: var(--sea-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ref {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.1rem;
  padding: .6rem .9rem; border-radius: var(--r-sm); background: var(--paper); border: 1px solid var(--sea-100);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink); letter-spacing: .05em; font-variant-numeric: tabular-nums;
}

/* contact route tiles */
.route {
  display: flex; flex-direction: column; gap: .5rem; padding: clamp(1.5rem, 2.8vw, 2.25rem);
  border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--paper);
  transition: border-color .4s var(--ease), transform .5s var(--out);
}
.route:hover { border-color: var(--ink-4); transform: translateY(-3px); }
.route b { font-size: var(--t-3); font-weight: 600; letter-spacing: -.018em; color: var(--ink); }
.route p { font-size: var(--t-sm); color: var(--ink-3); }
.route a { font-weight: 500; color: var(--sea-ink); margin-top: .5rem; }
.route a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 17b. Marketing banner (CareTrust-style ad slot) ---------------- */
.ad__stage { position: absolute; inset: 0; }
.ad__slide { position: absolute; inset: 0; display: block; transition: opacity .9s var(--ease); }
.ad__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad[data-every] .ad__slide { opacity: 0; pointer-events: none; }
.ad[data-every] .ad__slide.is-on { opacity: 1; pointer-events: auto; }
.ad__tag { margin-top: .6rem; font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }
.ad-m { display: none; padding: 1.25rem var(--gut) 0; background: var(--paper); }
.ad-m .ad--card { aspect-ratio: 3 / 2; border-radius: 18px; box-shadow: 0 0 0 1px var(--line), 0 18px 40px -20px rgba(11,31,42,.25); }
.ad-m .ad__tag { text-align: right; }
@media (max-width: 940px) { .ad-m { display: block; } }

/* ---------- 18. CTA ------------------------------------------------------ */
.cta {
  position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--deep); color: var(--on-deep);
  padding: clamp(2.5rem, 6vw, 5.5rem);
}
.cta__bg { position: absolute; inset: 0; opacity: .6; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.cta::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--deep) 16%, rgba(7,32,44,.5) 58%, rgba(7,32,44,.18));
}
.cta__in { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(2rem, 5vw, 4rem); flex-wrap: wrap; }
.cta h2 { color: #fff; max-width: 15ch; }
.cta p { color: var(--on-deep); margin-top: 1.1rem; max-width: 42ch; }
.cta .label { color: var(--on-deep-2); margin-bottom: 1.25rem; }

/* ---------- 19. Footer --------------------------------------------------- */
.logo { display: inline-flex; align-items: center; gap: .7rem; }
.logo img { height: 42px; width: auto; }
.logo__txt { display: flex; flex-direction: column; line-height: 1.15; }
.logo__txt b { font-size: .9375rem; font-weight: 600; letter-spacing: -.015em; }
.logo__txt span { font-size: .6875rem; letter-spacing: .05em; }
.footer { background: var(--deep); color: var(--on-deep-2); padding-top: clamp(4rem, 9vw, 8rem); }
.footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.footer .logo__txt b { color: #fff; }
.footer .logo__txt span { color: var(--on-deep-2); }
.footer__about p { margin-top: 1.5rem; font-size: var(--t-sm); color: var(--on-deep-2); max-width: 34ch; }
.footer h3 { font-size: var(--t-xs); font-weight: 600; color: #fff; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.35rem; }
.footer__links { display: flex; flex-direction: column; gap: .8rem; }
.footer__links a { font-size: var(--t-sm); color: var(--on-deep-2); transition: color .3s var(--ease); width: fit-content; }
.footer__links a:hover { color: #fff; }
.footer__contact { display: flex; flex-direction: column; gap: 1.35rem; }
.footer__contact div { display: flex; flex-direction: column; gap: .3rem; }
.footer__contact strong { font-size: var(--t-xs); color: var(--on-deep-2); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.footer__contact a, .footer__contact p { font-size: var(--t-sm); color: #fff; }
.footer__contact a:hover { color: var(--sea); }
.socials { display: flex; gap: .6rem; margin-top: 1.75rem; }
.socials a {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.14); color: var(--on-deep);
  transition: background-color .3s var(--ease), color .3s, border-color .3s;
}
.socials a:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.3); }
.socials svg { width: 16px; height: 16px; }
.footer__bar {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.75rem; padding-right: 4.5rem;
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  font-size: var(--t-xs); color: var(--on-deep-2);
}
@media (max-width: 940px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- 20. Article (insights) -------------------------------------- */
.article { font-size: 1.0625rem; line-height: 1.8; color: var(--ink-2); }
.article > * + * { margin-top: 1.5rem; }
.article h2 { font-size: clamp(1.5rem, 2.9vw, 2.125rem); margin-top: clamp(2.75rem, 5vw, 4rem); }
.article h3 { font-size: var(--t-3); margin-top: clamp(2rem, 3.5vw, 2.75rem); }
.article h2 + p, .article h3 + p { margin-top: 1rem; }
.article ul { display: flex; flex-direction: column; gap: .8rem; }
.article ul li { display: flex; gap: .85rem; }
.article ul li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--sea); margin-top: .72em; }
.article ol { counter-reset: n; display: flex; flex-direction: column; gap: .9rem; }
.article ol li { counter-increment: n; display: flex; gap: .9rem; }
.article ol li::before { content: counter(n, decimal-leading-zero); flex: none; font-size: var(--t-xs); font-weight: 600; color: var(--sea-ink); margin-top: .42em; font-variant-numeric: tabular-nums; }
.article blockquote {
  border-left: 2px solid var(--sea); padding-left: clamp(1.25rem, 3vw, 2rem);
  font-size: var(--t-lead); color: var(--ink); letter-spacing: -.014em; line-height: 1.5;
}
.article figure { margin-block: clamp(2rem, 4vw, 3rem); }
.article figcaption { margin-top: .85rem; font-size: var(--t-xs); color: var(--ink-4); }
.article a:not(.btn):not(.alink) { color: var(--sea-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article hr { border: 0; border-top: 1px solid var(--line); margin-block: clamp(2.5rem, 5vw, 4rem); }

.meta { display: flex; align-items: center; gap: .75rem; font-size: var(--t-xs); color: var(--ink-3); flex-wrap: wrap; }
.meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); display: block; }
.chip {
  display: inline-flex; align-items: center; padding: .35rem .75rem; border-radius: var(--r-pill);
  background: var(--sea-50); color: var(--sea-ink); font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em;
}
.chip--n { background: var(--paper-3); color: var(--ink-2); }

.postcard { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.postcard .fig { aspect-ratio: 5/4; width: 100%; }
.postcard h3 { font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; transition: color .3s var(--ease); }
.phero--quiet h1 { font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 600; letter-spacing: -.03em; max-width: 20ch; }
.postcard:hover h3 { color: var(--sea-ink); }
.postcard p { font-size: var(--t-sm); color: var(--ink-3); }
.postcard .fig img { transition: transform 1.1s var(--out); }
.postcard:hover .fig img { transform: scale(1.05); }

/* prev / next */
.pager { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.pager a {
  display: flex; flex-direction: column; gap: .4rem; padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color .35s var(--ease), background-color .35s;
}
.pager a:hover { border-color: var(--ink-4); background: var(--paper-2); }
.pager span { font-size: var(--t-xs); color: var(--ink-4); letter-spacing: .1em; text-transform: uppercase; }
.pager b { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.pager a:last-child { text-align: right; }
@media (max-width: 620px) { .pager { grid-template-columns: 1fr; } .pager a:last-child { text-align: left; } }

/* ---------- 20b. The calm playlist ---------------------------------------- */
.mus { position: fixed; right: clamp(1rem, 2.4vw, 1.75rem); bottom: clamp(1rem, 2.4vw, 1.75rem); z-index: 95; width: 52px; height: 52px; }
.no-scroll .mus { opacity: 0; pointer-events: none; transition: opacity .3s; }
.mus__b {
  position: relative; width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 1px rgba(11,31,42,.06), 0 10px 30px rgba(11,31,42,.16);
  transition: transform .5s var(--out), box-shadow .4s var(--ease);
}
.mus__b:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 14px 36px rgba(11,31,42,.2); }
.mus__b::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--sea-ink); opacity: 0; }
.mus.playing .mus__b::before { animation: musRing 2.8s var(--out) infinite; }
@keyframes musRing { 0% { opacity: .5; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.42); } }
.mus__eq { display: flex; align-items: flex-end; gap: 2.5px; height: 15px; }
.mus__eq i { display: block; width: 2px; background: var(--ink); border-radius: 1px; height: 4px; }
.mus__b .mus__eq i:nth-child(1) { height: 7px; } .mus__b .mus__eq i:nth-child(2) { height: 13px; }
.mus__b .mus__eq i:nth-child(3) { height: 5px; } .mus__b .mus__eq i:nth-child(4) { height: 10px; }
.mus.playing .mus__eq i { animation: eq 1s ease-in-out infinite; }
.mus.playing .mus__eq i:nth-child(2) { animation-delay: .18s; }
.mus.playing .mus__eq i:nth-child(3) { animation-delay: .36s; }
.mus.playing .mus__eq i:nth-child(4) { animation-delay: .1s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 15px; } }
.mus__p {
  position: absolute; right: 0; bottom: calc(100% + .6rem);
  width: min(20.5rem, calc(100vw - 2rem)); border-radius: 20px; overflow: hidden;
  background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 1px rgba(11,31,42,.06), 0 16px 44px rgba(11,31,42,.18);
  padding: 1.05rem 1.2rem 1rem; display: grid; gap: .7rem;
  opacity: 0; transform: translateY(12px) scale(.96); transform-origin: 100% 100%; visibility: hidden;
  transition: opacity .4s var(--ease), transform .55s var(--out), visibility .4s;
}
.mus.open .mus__p { opacity: 1; transform: none; visibility: visible; }
.mus__line { font-size: .625rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sea-ink); }
.mus__t { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mus__by { font-size: .75rem; line-height: 1.5; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mus__by a { box-shadow: inset 0 -1px 0 var(--line); }
.mus__by a:hover { color: var(--sea-ink); }
.mus__bar { height: 3px; border-radius: 3px; background: rgba(11,31,42,.13); overflow: hidden; cursor: pointer; }
.mus__bar i { display: block; height: 100%; width: 0; background: var(--sea-ink); border-radius: 3px; transition: width .18s linear; }
.mus__c { display: flex; align-items: center; gap: .2rem; margin-left: -.35rem; }
.mus__c button { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; color: var(--ink); transition: background-color .3s var(--ease); }
.mus__c button:hover { background: rgba(11,31,42,.07); }
.mus__c svg { width: 13px; height: 13px; }
.mus__c .play svg { width: 15px; height: 15px; }
.mus__x { margin-left: auto; }
.mus__n {
  position: absolute; right: calc(100% + .7rem); bottom: 12px; display: flex; align-items: center;
  white-space: nowrap; padding: .6rem 1rem; border-radius: 999px; cursor: pointer;
  font-size: .625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  background: rgba(255,255,255,.75); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 1px rgba(11,31,42,.06), 0 10px 30px rgba(11,31,42,.16);
  opacity: 0; transform: translateX(8px) scale(.94); transform-origin: 100% 50%;
  transition: opacity .5s var(--ease), transform .7s var(--out);
}
.mus__n.in { opacity: 1; transform: none; }
.mus__nq { width: 6px; height: 6px; margin-left: .7rem; border-radius: 50%; background: var(--sea); flex: none; }
.mus__n.in .mus__nq { animation: musDot 1.9s var(--ease) infinite; }
@keyframes musDot { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@media (max-width: 560px) {
  .mus__n { right: 0; bottom: calc(100% + .6rem); transform: translateY(8px) scale(.94); transform-origin: 100% 100%; }
  .mus__n.in { transform: none; }
  .mus__p { width: min(17.5rem, calc(100vw - 2rem)); }
}
@media (prefers-reduced-motion: reduce) { .mus__n { display: none; } .mus.playing .mus__eq i { animation: none; } .mus.playing .mus__b::before { animation: none; } }
@media print { .mus { display: none !important; } }

/* ---------- 21. Utilities ------------------------------------------------ */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .75rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; }
.mt-4 { margin-top: clamp(2.5rem, 5vw, 4rem); }
.mb-2 { margin-bottom: 1.5rem; }
.mb-3 { margin-bottom: 2.25rem; }
.mb-4 { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.hr { border: 0; border-top: 1px solid var(--line); }
.sec--deep .hr { border-color: rgba(255,255,255,.12); }
.hide-sm { display: initial; }
@media (max-width: 760px) { .hide-sm { display: none; } }

/* progress bar */
.prog { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 130; pointer-events: none; }
.prog i { display: block; height: 100%; background: var(--sea); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ---------- 22. Print ---------------------------------------------------- */
@media print {
  .hdr, .hdr__veil, .footer, .prog, .hero__cue, .stage__count, .stage__skip, .cta, video { display: none !important; }
  body { color: #000; }
  .sec { padding-block: 1.5rem; }
  [data-anim], [data-mask] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .7em; }
}

/* ---------- 23. Phones: fewer things on screen ---------------------------- */
@media (max-width: 700px) {
  :root { --sec: clamp(4rem, 14vw, 6rem); }
  .hero__foot { display: none; }                 /* the three facts return further down the page */
  .hero .lead { font-size: 1.0625rem; }
  .row { padding-block: 1.1rem; }
  .row__b p { display: none; }                   /* titles only in the six-function list */
  .row__b h3 { font-size: 1.25rem; }
  .postcard .meta, .postcard p { display: none; }
  .head p { display: none; }
  .band .stats { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .footer__grid > div:nth-child(3) { display: none; }   /* the services column repeats the menu */
  .footer__bar { flex-direction: column; gap: .35rem; padding-right: 0; }
  .mus__n { display: none; }
  .fig__cap { display: none; }
}