/* =============================================================================
   NORTH SHORE MEDICAL INSTITUTE (NMI School of Medicine) — design system
   Concept: "the pulse & the tide" — a heartbeat line that becomes the shoreline.
   Display: Instrument Serif · Text: Plus Jakarta Sans (SIL OFL, self-hosted)
   ============================================================================= */
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-display: swap; src: url("../assets/fonts/instrument-serif-400.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-style: italic; font-display: swap; src: url("../assets/fonts/instrument-serif-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Jakarta"; font-weight: 400; font-display: swap; src: url("../assets/fonts/jakarta-400.woff2") format("woff2"); }
@font-face { font-family: "Jakarta"; font-weight: 500; font-display: swap; src: url("../assets/fonts/jakarta-500.woff2") format("woff2"); }
@font-face { font-family: "Jakarta"; font-weight: 600; font-display: swap; src: url("../assets/fonts/jakarta-600.woff2") format("woff2"); }
@font-face { font-family: "Jakarta"; font-weight: 700; font-display: swap; src: url("../assets/fonts/jakarta-700.woff2") format("woff2"); }

:root {
  --abyss: #04161d; --deep: #072431; --sea: #0c3846; --sea-2: #11495a;
  --aqua: #4fe3cb; --aqua-2: #22b6c6; --mint: #c9f7ee; --foam: #f2f9f8; --paper: #ffffff;
  --ink: #0a2630; --text-2: #42606a; --muted: #6a858d; --line: rgba(10, 38, 48, .1); --line-2: rgba(10, 38, 48, .18);
  --on-dark: #eef8f7; --on-dark-2: rgba(238, 248, 247, .74); --on-dark-3: rgba(238, 248, 247, .5); --line-dark: rgba(238, 248, 247, .12);
  --coral: #ff7b61;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif; --sans: "Jakarta", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max: 1280px; --pad: clamp(20px, 4.4vw, 56px); --header: 84px; --r: 22px; --r-sm: 14px;
  --ease: cubic-bezier(.2, .8, .2, 1); --ease-io: cubic-bezier(.7, 0, .3, 1);
  --shadow: 0 24px 60px -30px rgba(4, 22, 29, .45); --glow: 0 0 0 1px rgba(79, 227, 203, .25), 0 20px 60px -20px rgba(79, 227, 203, .35);
}
/* accessibility panel modes */
html.a11y-lg { font-size: 112.5%; } html.a11y-xl { font-size: 125%; }
html.a11y-contrast { --text-2: #1d3a43; --muted: #2b4a53; --on-dark-2: #ffffff; --on-dark-3: #dff3f0; --line: rgba(10, 38, 48, .28); --line-dark: rgba(238, 248, 247, .35); --aqua: #7ff7e4; }
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 20px); }
body { margin: 0; background: var(--foam); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.is-locked { overflow: hidden; }
main { overflow-x: clip; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; padding: 0; } ul, ol { list-style: none; }
[hidden] { display: none !important; }
::selection { background: var(--aqua); color: var(--abyss); }
:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -80px; z-index: 9999; background: var(--aqua); color: var(--abyss); padding: 10px 18px; border-radius: 999px; font-weight: 700; transition: top .2s; }
.skip:focus { top: 14px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--aqua-2); margin-bottom: 18px; }
.eyebrow i { width: 26px; height: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M0 5h8l2-4 3 8 2-6 1 2h10' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M0 5h8l2-4 3 8 2-6 1 2h10' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.dark .eyebrow { color: var(--aqua); }
h1, .h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.9rem, 6.2vw, 5.8rem); line-height: .98; letter-spacing: -.02em; }
h2, .h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 4.2vw, 3.7rem); line-height: 1.02; letter-spacing: -.015em; }
h3, .h3 { font-family: var(--sans); font-weight: 700; font-size: 1.15rem; line-height: 1.3; letter-spacing: -.01em; }
h1 em, h2 em { font-style: italic; background: linear-gradient(100deg, var(--aqua), var(--aqua-2) 60%, var(--mint)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.light h1 em, .light h2 em { background: linear-gradient(100deg, #0f8f9d, var(--aqua-2)); -webkit-background-clip: text; background-clip: text; }
.lead { font-size: 1.12rem; color: var(--text-2); max-width: 56ch; }
.dark .lead { color: var(--on-dark-2); }
.small { font-size: .9rem; color: var(--muted); }
.dark .small { color: var(--on-dark-3); }
.head { max-width: 680px; margin-bottom: 52px; }
.head .lead { margin-top: 18px; }
.head--row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.head--center { margin-left: auto; margin-right: auto; text-align: center; }
.head--center .eyebrow { justify-content: center; } .head--center .lead { margin-left: auto; margin-right: auto; }
/* split-text reveal */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split .w > span { display: inline-block; transform: translateY(110%) rotate(4deg); transform-origin: left bottom; transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 45ms + var(--d, 0ms)); }
.split.is-in .w > span { transform: none; }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s, background-color .3s, color .3s, border-color .3s; will-change: transform; }
.btn::before { content: ""; position: absolute; left: var(--bx, 50%); top: var(--by, 50%); width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, .28); transform: translate(-50%, -50%); transition: width .6s var(--ease), height .6s var(--ease); z-index: -1; }
.btn:hover::before { width: 320px; height: 320px; }
.btn:active { transform: scale(.97); }
.btn--aqua { background: var(--aqua); color: var(--abyss); box-shadow: 0 10px 30px -12px rgba(79, 227, 203, .8); }
.btn--aqua:hover { box-shadow: 0 16px 40px -12px rgba(79, 227, 203, .95); }
.btn--deep { background: var(--deep); color: var(--on-dark); }
.btn--deep::before { background: rgba(79, 227, 203, .3); }
.btn--line { border: 1.5px solid var(--line-2); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); }
.dark .btn--line { border-color: var(--line-dark); color: var(--on-dark); }
.dark .btn--line:hover { border-color: var(--on-dark); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: .88rem; }
.btn .ic { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn:hover .ic--go { transform: translateX(4px); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #0f8f9d; }
.dark .link { color: var(--aqua); }
.link .ic { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.link:hover .ic { transform: translateX(4px); }

/* ---------- loader (once per session) ---------- */
.loader { position: fixed; inset: 0; z-index: 9800; background: var(--abyss); display: grid; place-items: center; pointer-events: none; }
.loader svg { width: min(420px, 74vw); overflow: visible; }
.loader .ln { fill: none; stroke: var(--aqua); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 700; stroke-dashoffset: 700; animation: lnDraw 1.3s var(--ease) forwards; filter: drop-shadow(0 0 8px rgba(79, 227, 203, .7)); }
.loader .nm { font-family: var(--serif); font-size: 30px; fill: var(--on-dark); opacity: 0; animation: fadeIn .8s .9s var(--ease) forwards; }
.loader .tg { font-family: var(--sans); font-size: 9px; letter-spacing: 4px; fill: var(--aqua); opacity: 0; animation: fadeIn .8s 1.1s var(--ease) forwards; }
@keyframes lnDraw { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }
.loader.is-out { animation: loaderOut 1.1s var(--ease-io) forwards; }
@keyframes loaderOut { to { clip-path: inset(0 0 100% 0); } }

/* ---------- page transition: a tide sweeps over the page ---------- */
.tide { position: fixed; inset: 0; z-index: 9700; pointer-events: none; }
.tide svg { position: absolute; left: 0; width: 100%; height: 130%; top: -15%; }
.tide path { fill: var(--deep); }
.tide { transform: translateY(-115%); animation: tideOut .9s .05s var(--ease-io) both; }
.tide--in { animation: none; transform: translateY(115%); }
.tide.is-on { animation: tideIn .55s var(--ease-io) forwards; }
@keyframes tideOut { from { transform: translateY(0); } to { transform: translateY(-115%); } }
@keyframes tideIn { from { transform: translateY(115%); } to { transform: translateY(0); } }

/* ---------- header ---------- */
.header { position: fixed; inset: 0 0 auto; z-index: 800; height: var(--header); transition: background-color .45s, box-shadow .45s, transform .5s var(--ease); }
.header.is-solid { background: rgba(4, 22, 29, .82); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 1px 0 var(--line-dark); }
.header.is-hidden { transform: translateY(-100%); }
.header__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--on-dark); }
.brand img { width: 46px; height: 46px; transition: transform .8s var(--ease); }
.brand:hover img { transform: rotate(-12deg); }
.brand__txt { display: grid; line-height: 1; }
.brand__txt b { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; letter-spacing: -.01em; }
.brand__txt small { font-size: .6rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--aqua); margin-top: 5px; }
.nav { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(238, 248, 247, .06); border: 1px solid var(--line-dark); position: relative; }
.nav a { position: relative; z-index: 1; padding: 9px 16px; border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--on-dark-2); transition: color .3s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--on-dark); }
.nav__pill { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: 999px; background: rgba(79, 227, 203, .16); box-shadow: inset 0 0 0 1px rgba(79, 227, 203, .35); transition: transform .5s var(--ease), width .5s var(--ease), opacity .3s; opacity: 0; }
.header__cta { display: flex; align-items: center; gap: 10px; }
.burger { display: none; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line-dark); position: relative; }
.burger span { position: absolute; left: 14px; right: 14px; height: 2px; border-radius: 2px; background: var(--on-dark); transition: transform .4s var(--ease); }
.burger span:nth-child(1) { top: 18px; } .burger span:nth-child(2) { top: 26px; }
.mnav { position: fixed; inset: 0; z-index: 900; background: var(--abyss); color: var(--on-dark); display: flex; flex-direction: column; clip-path: circle(0 at calc(100% - 46px) 42px); visibility: hidden; transition: clip-path .8s var(--ease-io), visibility 0s linear .8s; }
.mnav.is-open { clip-path: circle(150% at calc(100% - 46px) 42px); visibility: visible; transition: clip-path .8s var(--ease-io), visibility 0s; }
.mnav__top { height: var(--header); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad); }
.mnav__close { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line-dark); display: grid; place-items: center; }
.mnav__close .ic { width: 20px; height: 20px; }
.mnav nav { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--pad); }
.mnav nav a { font-family: var(--serif); font-size: clamp(2.4rem, 10vw, 3.6rem); line-height: 1.15; display: flex; align-items: baseline; gap: 14px; opacity: 0; transform: translateY(26px); transition: opacity .5s, transform .7s var(--ease), color .3s; }
.mnav nav a small { font-family: var(--sans); font-size: .72rem; color: var(--aqua); letter-spacing: .14em; }
.mnav nav a[aria-current="page"] { font-style: italic; color: var(--aqua); }
.mnav.is-open nav a { opacity: 1; transform: none; transition-delay: calc(.25s + var(--i) * .06s); }
.mnav__foot { padding: 22px var(--pad) 30px; border-top: 1px solid var(--line-dark); display: grid; gap: 10px; }

/* ---------- sections ---------- */
.section { padding: clamp(84px, 11vw, 150px) 0; position: relative; }
.section--tight { padding: clamp(60px, 7vw, 96px) 0; }
.dark { background: var(--abyss); color: var(--on-dark); }
.deep { background: var(--deep); color: var(--on-dark); }
.light { background: var(--foam); }
.white { background: var(--paper); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; background: radial-gradient(60% 80% at 80% 20%, #0b3a48 0%, transparent 60%), radial-gradient(50% 60% at 0% 100%, #08303c 0%, transparent 60%), var(--abyss); }
.tidecanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 160px; z-index: -1; background: linear-gradient(transparent, var(--abyss)); pointer-events: none; }
.hero__in { position: relative; width: 100%; padding-top: calc(var(--header) + 40px); padding-bottom: 110px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: end; }
.hero h1 { margin-bottom: 26px; max-width: 13ch; }
.hero .lead { margin-bottom: 34px; }
.hero__copy .eyebrow, .hero__copy .lead, .hero__copy .btn-row { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.hero.is-in .hero__copy .eyebrow { opacity: 1; transform: none; }
.hero.is-in .hero__copy .lead { opacity: 1; transform: none; transition-delay: .45s; }
.hero.is-in .hero__copy .btn-row { opacity: 1; transform: none; transition-delay: .6s; }
.hero__side { display: grid; gap: 14px; justify-items: end; }
.glass { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 18px; background: rgba(238, 248, 247, .06); border: 1px solid var(--line-dark); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--on-dark); width: min(320px, 100%); opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease), border-color .3s; }
.hero.is-in .glass { opacity: 1; transform: none; transition-delay: calc(.7s + var(--i) * .12s); }
.glass:hover { border-color: rgba(79, 227, 203, .45); }
.glass i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(79, 227, 203, .12); color: var(--aqua); flex: none; }
.glass i .ic { width: 22px; height: 22px; }
.glass b { display: block; font-size: .95rem; } .glass span { font-size: .82rem; color: var(--on-dark-2); }
.pulse-dot { position: absolute; right: 16px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 0 rgba(79, 227, 203, .6); animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(79, 227, 203, .6); } 80%, 100% { box-shadow: 0 0 0 12px rgba(79, 227, 203, 0); } }
.hero__scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; color: var(--on-dark-3); font-size: .7rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.hero__scroll i { width: 24px; height: 38px; border-radius: 14px; border: 1.5px solid var(--line-dark); position: relative; }
.hero__scroll i::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--aqua); animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; padding: 22px 0; background: var(--abyss); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.marquee__track { display: flex; width: max-content; animation: mq 50s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.5rem); color: var(--on-dark); white-space: nowrap; }
.marquee__item:nth-child(even) { font-style: italic; color: transparent; -webkit-text-stroke: 1px var(--on-dark-2); }
.marquee__item svg { width: 34px; height: 14px; color: var(--aqua); }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- statement ---------- */
.statement { font-family: var(--serif); font-size: clamp(2rem, 4.4vw, 3.8rem); line-height: 1.12; letter-spacing: -.01em; max-width: 22ch; }
.statement .wd { opacity: .14; transition: opacity .3s linear, color .3s; }
.statement .wd.on { opacity: 1; }
.statement em { font-style: italic; color: #0f8f9d; }
.statement-side { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.statement-side .small { max-width: 30ch; }

/* ---------- care bento (spotlight + tilt) ---------- */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.care { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 250px; padding: 26px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); text-align: left; overflow: hidden; isolation: isolate; transform-style: preserve-3d; transition: transform .5s var(--ease), box-shadow .5s, border-color .4s; --mx: 50%; --my: 50%; }
.care::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(360px circle at var(--mx) var(--my), hsla(var(--h), 85%, 60%, .16), transparent 60%); opacity: 0; transition: opacity .4s; }
.care:hover { box-shadow: var(--shadow); border-color: hsla(var(--h), 70%, 45%, .35); }
.care:hover::before { opacity: 1; }
.care--wide { grid-column: span 2; }
.care__ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: hsla(var(--h), 80%, 45%, .1); color: hsl(var(--h), 70%, 34%); transition: transform .6s var(--ease); }
.care__ic svg { width: 28px; height: 28px; }
.care:hover .care__ic { transform: translateZ(30px) rotate(-6deg) scale(1.06); }
.care__ic .draw { stroke-dasharray: 120; stroke-dashoffset: 0; }
.care:hover .care__ic .draw { animation: icDraw 1.2s var(--ease); }
@keyframes icDraw { from { stroke-dashoffset: 120; } }
.care h3 { font-size: 1.2rem; margin-top: auto; }
.care p { color: var(--text-2); font-size: .97rem; }
.care__go { position: absolute; right: 22px; top: 22px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink); transition: background-color .3s, color .3s, transform .5s var(--ease), border-color .3s; }
.care__go .ic { width: 18px; height: 18px; }
.care:hover .care__go { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: rotate(-45deg); }
.care__num { position: absolute; right: 22px; bottom: 14px; font-family: var(--serif); font-style: italic; font-size: 4.4rem; line-height: 1; color: hsla(var(--h), 60%, 40%, .08); pointer-events: none; }

/* ---------- journey (pinned, ECG draws as you scroll) ---------- */
.journey { position: relative; }
.journey__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.journey__head { margin-bottom: 4vh; }
.ecg { position: relative; height: 180px; margin: 0 calc(var(--pad) * -1); }
.ecg svg { width: 100%; height: 100%; overflow: visible; }
.ecg .base { fill: none; stroke: var(--line-dark); stroke-width: 2; }
.ecg .live { fill: none; stroke: var(--aqua); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgba(79, 227, 203, .7)); }
.ecg .dot { fill: #fff; filter: drop-shadow(0 0 12px var(--aqua)); }
.steps { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 18px; margin-top: 3vh; }
.step { padding-top: 18px; border-top: 1px solid var(--line-dark); opacity: .3; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .6s; }
.step.is-on { opacity: 1; transform: none; border-color: var(--aqua); }
.step b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.05rem; color: var(--aqua); margin-bottom: 4px; }
.step h3 { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; margin-bottom: 6px; }
.step p { font-size: .92rem; color: var(--on-dark-2); }

/* ---------- clarity (particle sphere) ---------- */
.clarity { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.sphere { position: relative; aspect-ratio: 1; max-width: 560px; width: 100%; margin: 0 auto; }
.sphere canvas { width: 100%; height: 100%; }
.sphere__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; padding: 22px 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(7, 36, 49, .92), rgba(7, 36, 49, .6) 60%, transparent); }
.sphere__label b { display: block; font-family: var(--serif); font-size: 2.2rem; color: var(--on-dark); line-height: 1; }
.sphere__label span { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--aqua); }
.feats { display: grid; gap: 4px; margin: 28px 0 34px; }
.feat { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line-dark); }
.feat:first-child { border-top: 1px solid var(--line-dark); }
.feat i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(79, 227, 203, .1); color: var(--aqua); }
.feat i .ic { width: 22px; height: 22px; }
.feat h3 { margin-bottom: 4px; } .feat p { color: var(--on-dark-2); font-size: .96rem; }

/* ---------- CTA wave band ---------- */
.cta { position: relative; overflow: hidden; isolation: isolate; padding: clamp(90px, 12vw, 160px) 0; text-align: center; }
.cta__waves { position: absolute; inset: auto 0 0; height: 60%; z-index: -1; }
.cta__waves path { fill: none; stroke: var(--aqua); stroke-width: 1.2; opacity: .35; }
.cta h2 { max-width: 16ch; margin: 0 auto 22px; }
.cta .lead { margin: 0 auto 34px; }
.cta .btn-row { justify-content: center; }

/* ---------- inner page hero ---------- */
.phero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--header) + clamp(60px, 9vw, 120px)) 0 clamp(70px, 9vw, 120px); background: radial-gradient(50% 70% at 85% 10%, #0b3a48, transparent 60%), var(--abyss); }
.phero h1 { max-width: 16ch; }
.phero .lead { margin-top: 22px; }
.crumbs { display: flex; gap: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 22px; }
.crumbs a:hover { color: var(--aqua); }

/* ---------- about ---------- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.value { padding: 32px 28px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s; }
.value:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.value b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 3rem; line-height: 1; color: var(--aqua-2); margin-bottom: 26px; }
.value h3 { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; margin-bottom: 8px; }
.value p { color: var(--text-2); }
.promise { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 6vw, 80px); align-items: start; }
.plist { display: grid; }
.plist li { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.plist li:first-child { border-top: 1px solid var(--line); }
.plist i { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(34, 182, 198, .1); color: #0f8f9d; }
.plist i .ic { width: 22px; height: 22px; }
.plist p { color: var(--text-2); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.qa { border-radius: var(--r-sm); background: var(--paper); border: 1px solid var(--line); overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.qa.is-open { border-color: rgba(34, 182, 198, .45); box-shadow: var(--shadow); }
.qa button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 22px; text-align: left; font-weight: 700; font-size: 1.02rem; }
.qa button i { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); position: relative; transition: transform .5s var(--ease), background-color .3s; }
.qa button i::before, .qa button i::after { content: ""; position: absolute; left: 10px; right: 10px; top: 16px; height: 1.5px; background: currentColor; }
.qa button i::after { transform: rotate(90deg); transition: transform .5s var(--ease); }
.qa.is-open button i { background: var(--aqua); border-color: var(--aqua); }
.qa.is-open button i::after { transform: none; }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.qa.is-open .qa__a { grid-template-rows: 1fr; }
.qa__a > div { overflow: hidden; }
.qa__a p { padding: 0 22px 22px; color: var(--text-2); }

/* ---------- school facts ---------- */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fact { position: relative; padding: 28px 24px 26px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); overflow: hidden; isolation: isolate; --mx: 50%; --my: 50%; transition: transform .5s var(--ease), box-shadow .5s, border-color .4s; }
.fact::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(320px circle at var(--mx) var(--my), rgba(79, 227, 203, .16), transparent 60%); opacity: 0; transition: opacity .4s; }
.fact:hover { box-shadow: var(--shadow); border-color: rgba(34, 182, 198, .4); }
.fact:hover::before { opacity: 1; }
.fact b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 4.4vw, 3.8rem); line-height: 1; letter-spacing: -.02em; color: var(--ink); margin-bottom: 14px; }
.fact b em { font-style: italic; color: #0f8f9d; }
.fact h3 { font-size: 1rem; margin-bottom: 6px; }
.fact p { color: var(--text-2); font-size: .94rem; }
.fact__ic { position: absolute; right: 18px; top: 18px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(34, 182, 198, .1); color: #0f8f9d; }
.fact__ic .ic { width: 20px; height: 20px; }
.dark .fact { background: rgba(238, 248, 247, .04); border-color: var(--line-dark); }
.dark .fact b { color: var(--on-dark); } .dark .fact b em { color: var(--aqua); } .dark .fact p { color: var(--on-dark-2); }

/* ---------- pathway explorer ---------- */
.pw { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.pw__switch { display: inline-flex; padding: 6px; border-radius: 999px; background: rgba(238, 248, 247, .06); border: 1px solid var(--line-dark); margin: 26px 0 30px; }
.pw__switch button { min-height: 46px; padding: 0 20px; border-radius: 999px; font-weight: 700; font-size: .92rem; color: var(--on-dark-2); transition: background-color .4s, color .4s; }
.pw__switch button[aria-pressed="true"] { background: var(--aqua); color: var(--abyss); }
.pw__panel { padding: clamp(26px, 4vw, 44px); border-radius: 28px; background: linear-gradient(160deg, rgba(79, 227, 203, .08), rgba(238, 248, 247, .02)); border: 1px solid var(--line-dark); }
.pw__big { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.pw__big b { font-family: var(--serif); font-weight: 400; font-size: clamp(5rem, 11vw, 8.5rem); line-height: .85; color: var(--aqua); letter-spacing: -.04em; transition: color .4s; }
.pw__big span { font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-2); }
.pw__name { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 26px; }
.years { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.yr { position: relative; height: 54px; border-radius: 12px; border: 1px solid var(--line-dark); overflow: hidden; display: grid; place-items: center; text-align: center; line-height: 1.1; font-size: .74rem; font-weight: 700; color: var(--on-dark-3); --f: 0; }
.yr::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--aqua-2), var(--aqua)); transform: scaleX(var(--f)); transform-origin: left; transition: transform .8s var(--ease); transition-delay: calc(var(--i) * 90ms); }
.yr span { position: relative; z-index: 1; transition: color .5s; }
.yr.is-on span { color: var(--abyss); }
.yr.is-half span { color: var(--on-dark); text-shadow: 0 1px 6px rgba(4, 22, 29, .8); }
.pw__note { margin-top: 20px; font-size: .92rem; color: var(--on-dark-2); }
.pw__dest { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line-dark); font-weight: 700; }
.pw__dest i { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--aqua); color: var(--abyss); }
.pw__dest i .ic { width: 20px; height: 20px; }

/* ---------- registration highlight ---------- */
.first { position: relative; overflow: hidden; isolation: isolate; padding: clamp(34px, 5vw, 64px); border-radius: 32px; background: linear-gradient(150deg, var(--deep), var(--abyss)); color: var(--on-dark); display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 54px); align-items: center; }
.first::after { content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(closest-side, rgba(79, 227, 203, .25), transparent); z-index: -1; }
.seal { position: relative; width: clamp(130px, 15vw, 180px); aspect-ratio: 1; }
.seal svg { width: 100%; height: 100%; animation: sealSpin 30s linear infinite; }
.seal text { font-family: var(--sans); font-size: 9.6px; font-weight: 700; letter-spacing: 2.4px; fill: var(--aqua); }
.seal b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: clamp(2.2rem, 3vw, 2.8rem); font-weight: 400; color: var(--on-dark); }
@keyframes sealSpin { to { rotate: 360deg; } }
.first h2 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); margin-bottom: 14px; }
.first p { color: var(--on-dark-2); max-width: 60ch; }

/* ---------- recognition ---------- */
.recog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rcard { padding: 30px 26px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); }
.rcard i { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(34, 182, 198, .1); color: #0f8f9d; margin-bottom: 20px; }
.rcard i .ic { width: 26px; height: 26px; }
.rcard h3 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.1; margin-bottom: 10px; }
.rcard p { color: var(--text-2); }
.rcard small { display: inline-block; margin-top: 14px; padding: 6px 12px; border-radius: 999px; background: #fff6e8; color: #8a5a10; font-size: .78rem; font-weight: 700; }

/* ---------- enquiry form ---------- */
.contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(26px, 4vw, 54px); align-items: start; }
.form { position: relative; background: var(--paper); border-radius: 28px; border: 1px solid var(--line); box-shadow: var(--shadow); padding: clamp(24px, 4vw, 40px); overflow: hidden; }
.form h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); margin-bottom: 6px; }
.topics { display: flex; flex-wrap: wrap; gap: 8px; }
.topics label { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line-2); font-weight: 700; font-size: .88rem; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.topics input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.topics label:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.topics label:has(input:focus-visible) { outline: 3px solid var(--aqua); outline-offset: 2px; }
.form__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-top: 10px; }
.form__status { color: #c23a30; font-weight: 600; font-size: .92rem; }
.sent { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 40px; background: var(--paper); opacity: 0; transition: opacity .5s var(--ease); }
.sent.is-on { opacity: 1; }
.sent svg.ok { width: 88px; height: 88px; margin: 0 auto 18px; }
.sent svg.ok circle { fill: none; stroke: var(--aqua); stroke-width: 3; stroke-dasharray: 280; stroke-dashoffset: 280; }
.sent svg.ok path { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; }
.sent.is-on svg.ok circle { animation: lnDraw 1s .1s var(--ease) forwards; } .sent.is-on svg.ok path { animation: lnDraw .6s .8s var(--ease) forwards; }
.sent h3 { font-family: var(--serif); font-weight: 400; font-size: 2.2rem; margin-bottom: 10px; }
.sent p { color: var(--text-2); max-width: 40ch; margin: 0 auto 22px; }
.note-app { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--foam); color: var(--text-2); font-size: .9rem; }
.note-app .ic { width: 18px; height: 18px; margin-top: 3px; color: #0f8f9d; }

/* ---------- form fields & side cards ---------- */
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.span2 { grid-column: 1 / -1; }
.field { display: grid; gap: 7px; }
.field > label, .field .lbl { font-weight: 700; font-size: .88rem; }
.field input, .field textarea { width: 100%; padding: 14px 16px; border-radius: var(--r-sm); border: 1.5px solid var(--line-2); background: var(--paper); font: inherit; font-size: 1rem; color: var(--ink); transition: border-color .25s, box-shadow .25s; }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--aqua-2); box-shadow: 0 0 0 4px rgba(79, 227, 203, .22); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #d6453a; }
.field__err { min-height: 1.15em; font-size: .84rem; font-weight: 600; color: #c23a30; }
.btn .spin { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
.btn.is-loading .spin { display: block; } .btn.is-loading .ic { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.side-card { padding: 26px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); }
.side-card + .side-card { margin-top: 16px; }
.side-card .h3 { margin-bottom: 14px; }
.side-card h3 { margin-bottom: 14px; }
.cinfo { display: grid; }
.cinfo li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cinfo li:last-child { border-bottom: 0; }
.cinfo i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--foam); color: #0f8f9d; }
.cinfo i .ic { width: 19px; height: 19px; }
.cinfo small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cinfo strong { font-weight: 700; word-break: break-word; }
.cinfo .tbc { font-weight: 500; font-style: italic; color: var(--muted); }
.side-card--alert { background: linear-gradient(160deg, #fff4f1, var(--paper)); border-color: rgba(255, 123, 97, .35); }
.side-card--alert h3 { color: #b8432c; display: flex; gap: 8px; align-items: center; }

/* ---------- accessibility panel ---------- */
.a11y-btn { position: fixed; right: 20px; bottom: 20px; z-index: 950; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; box-shadow: 0 14px 34px -10px rgba(4, 22, 29, .6), 0 0 0 4px rgba(79, 227, 203, .25); transition: transform .4s var(--ease); }
.a11y-btn:hover { transform: scale(1.06) rotate(-8deg); }
.a11y-btn .ic { width: 26px; height: 26px; }
.a11y { position: fixed; right: 20px; bottom: 88px; z-index: 950; width: min(320px, calc(100vw - 40px)); padding: 20px; border-radius: 20px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 30px 70px -20px rgba(4, 22, 29, .5); transform-origin: bottom right; transform: scale(.9) translateY(10px); opacity: 0; visibility: hidden; transition: transform .4s var(--ease), opacity .3s, visibility 0s linear .4s; }
.a11y.is-open { transform: none; opacity: 1; visibility: visible; transition: transform .4s var(--ease), opacity .3s, visibility 0s; }
.a11y h2 { font-family: var(--sans); font-size: 1rem; font-weight: 700; margin-bottom: 14px; }
.a11y__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-weight: 600; font-size: .92rem; }
.a11y__seg { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--foam); }
.a11y__seg button { min-width: 40px; height: 34px; border-radius: 999px; font-weight: 700; font-size: .85rem; }
.a11y__seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.switch { position: relative; width: 50px; height: 28px; border-radius: 999px; background: var(--line-2); transition: background-color .3s; flex: none; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .35s var(--ease); }
.switch[aria-checked="true"] { background: var(--aqua-2); }
.switch[aria-checked="true"]::after { transform: translateX(22px); }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 9600; transform: translate(-50%, 160%); max-width: min(480px, calc(100vw - 32px)); padding: 14px 20px; border-radius: 14px; background: var(--ink); color: var(--on-dark); font-weight: 600; font-size: .95rem; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); transition: transform .5s var(--ease); display: flex; gap: 12px; align-items: center; }
.toast.is-on { transform: translate(-50%, 0); }
.toast i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--aqua); }

/* ---------- footer ---------- */
.footer { padding: clamp(70px, 9vw, 110px) 0 0; position: relative; overflow: hidden; }
.footer__grid { display: grid; grid-template-columns: 1.4fr .8fr 1fr 1.1fr; gap: 40px; }
.footer__brand p { color: var(--on-dark-2); max-width: 34ch; margin: 18px 0 22px; font-size: .95rem; }
.footer h3 { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--aqua); margin-bottom: 18px; }
.footer li + li { margin-top: 10px; }
.footer a:not(.btn) { color: var(--on-dark-2); transition: color .3s; }
.footer a:not(.btn):hover { color: var(--on-dark); }
.footer .tbc { font-style: italic; color: var(--on-dark-3); }
.socials { display: flex; gap: 10px; }
.social { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-dark); display: grid; place-items: center; color: var(--on-dark); transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease); }
.social:hover { background: var(--aqua); color: var(--abyss); border-color: var(--aqua); transform: translateY(-3px); }
.social svg { width: 18px; height: 18px; }
.footer__big { font-family: var(--serif); font-size: 11.6vw; line-height: .85; letter-spacing: -.03em; white-space: nowrap; text-align: center; margin-top: 60px; color: transparent; -webkit-text-stroke: 1px rgba(238, 248, 247, .14); user-select: none; }
.footer__big em { -webkit-text-stroke: 1px rgba(79, 227, 203, .4); }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 22px 0 28px; border-top: 1px solid var(--line-dark); font-size: .84rem; color: var(--on-dark-3); }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rv, .split .w > span, .hero__copy .eyebrow, .hero__copy .lead, .hero__copy .btn-row, .glass { opacity: 1 !important; transform: none !important; }
  .seal svg { animation: none; }
  .statement .wd { opacity: 1; } .loader { display: none; } .tide { display: none; }
}
html.a11y-still .rv, html.a11y-still .split .w > span, html.a11y-still .glass, html.a11y-still .hero__copy > * { opacity: 1 !important; transform: none !important; }
html.a11y-still .statement .wd { opacity: 1; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav a { padding: 9px 12px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .nav, .header__cta .btn { display: none; }
  .burger { display: block; }
  .hero__in, .clarity, .promise, .pw, .contact, .first { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .recog { grid-template-columns: 1fr; }
  .hero__side { justify-items: start; grid-template-columns: repeat(2, 1fr); }
  .hero__side .glass { width: auto; }
  .values { grid-template-columns: 1fr 1fr; }
  .values .value:last-child { grid-column: span 2; }
  .statement-side { grid-template-columns: 1fr; }
}
/* the pinned journey becomes a vertical timeline on small screens / reduced motion */
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .journey { height: auto !important; }
  .journey__pin { position: relative; height: auto; padding: 90px 0; }
  .ecg { display: none; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { opacity: 1; transform: none; border-color: var(--aqua); padding: 22px 0; }
}
html.a11y-still .journey { height: auto !important; }
html.a11y-still .journey__pin { position: relative; height: auto; padding: 90px 0; }
html.a11y-still .ecg { display: none; }
html.a11y-still .steps { grid-template-columns: 1fr; gap: 0; }
html.a11y-still .step { opacity: 1; transform: none; border-color: var(--aqua); padding: 22px 0; }
@media (max-width: 640px) {
  :root { --header: 72px; }
  body { font-size: 1rem; }
  .brand img { width: 40px; height: 40px; } .brand__txt b { font-size: 1.2rem; } .brand__txt small { font-size: .52rem; letter-spacing: .2em; }
  .hero__in { padding-bottom: 96px; }
  .hero__side { grid-template-columns: 1fr; }
  .hero__side .glass { width: 100%; }
  .values, .fgrid, .footer__grid, .facts { grid-template-columns: 1fr; }
  .values .value:last-child { grid-column: auto; }
  .years { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .btn-row .btn { flex: 1 1 auto; }
  .a11y-btn { right: 14px; bottom: 14px; width: 52px; height: 52px; }
}