@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Sora:wght@400;500;600;700&display=swap');

:root {
  --paper: #f4f7f7;
  --surface: #ffffff;
  --ink: #10272f;
  --muted: #5d6f74;
  --line: rgba(16, 39, 47, .14);
  --brand: #0a7281;
  --brand-2: #123e52;
  --glow: #8bd8d4;
  --shadow: 0 28px 70px rgba(21, 51, 58, .14);
  --radius: 26px;
  --display: 'Sora', Arial, sans-serif;
  --sans: 'Manrope', Arial, sans-serif;
  --header-h: 86px;
}

html[data-theme="dark"] {
  --paper: #071013;
  --surface: #0d181c;
  --ink: #f3f8f8;
  --muted: #9db0b4;
  --line: rgba(235, 246, 248, .14);
  --brand: #55c2c6;
  --brand-2: #d7f1ee;
  --glow: #1b8f98;
  --shadow: 0 28px 70px rgba(0, 0, 0, .36);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  transition: background .35s ease, color .35s ease;
}
body.menu-open { overflow: hidden; }
button, input, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
::selection { background: var(--brand); color: white; }

.skip-link {
  position: fixed; left: 14px; top: -60px; z-index: 10000;
  background: var(--ink); color: var(--paper); padding: 11px 16px; border-radius: 999px;
}
.skip-link:focus { top: 14px; }

.site-shell { min-height: 100vh; position: relative; }
.site-header {
  position: fixed; z-index: 80; top: 0; left: 0; right: 0; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 clamp(20px, 4vw, 64px);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.site-header.scrolled { border-color: var(--line); }
.brand { display: inline-flex; align-items: center; gap: 13px; min-width: 0; }
.brand-word { font-weight: 700; letter-spacing: -.02em; font-size: 14px; line-height: 1.1; max-width: 190px; }
.brand-word small { display:block; color: var(--muted); font-weight: 500; margin-top: 3px; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.header-actions { display:flex; align-items:center; gap: 10px; }
.menu-button {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  min-width: 122px; height: 48px; padding: 0 18px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  cursor:pointer; font-weight: 700; box-shadow: 0 7px 24px rgba(20,45,50,.06);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.menu-button:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 60%, var(--line)); }
.menu-lines { width: 18px; height: 12px; position: relative; display:block; }
.menu-lines::before,.menu-lines::after { content:""; position:absolute; left:0; width:100%; height:1.5px; background:currentColor; transition:.35s ease; }
.menu-lines::before { top:2px; } .menu-lines::after { bottom:2px; }

main { padding-top: var(--header-h); }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.narrow { width: min(860px, calc(100% - 40px)); margin: 0 auto; }
.section { padding: clamp(82px, 10vw, 148px) 0; position: relative; }
.section-tight { padding: clamp(56px, 7vw, 96px) 0; }
.eyebrow { display:flex; align-items:center; gap:10px; text-transform:uppercase; letter-spacing:.16em; font-size:10px; font-weight:700; color:var(--brand); }
.eyebrow::before { content:""; width:24px; height:1px; background:currentColor; }
.display-xl { font-family:var(--display); font-weight:500; font-size:clamp(54px,7.2vw,112px); line-height:.92; letter-spacing:-.055em; margin:0; text-wrap:balance; }
.display-lg { font-family:var(--display); font-weight:500; font-size:clamp(42px,5vw,76px); line-height:1; letter-spacing:-.045em; margin:0; text-wrap:balance; }
.display-md { font-family:var(--display); font-weight:500; font-size:clamp(34px,4vw,58px); line-height:1.03; letter-spacing:-.035em; margin:0; text-wrap:balance; }
.lede { color:var(--muted); font-size:clamp(17px,1.4vw,20px); max-width:62ch; }

.button {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 22px; border-radius:999px; background:var(--ink); color:var(--paper);
  font-weight:700; font-size:14px; border:1px solid var(--ink); cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.button:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(17,42,49,.2); }
.button svg { width:16px; height:16px; transition:transform .25s ease; }
.button:hover svg { transform:translateX(3px); }
.button.secondary { background:transparent; color:var(--ink); border-color:var(--line); }

/* hero */
.hero { min-height: calc(100svh - var(--header-h)); display:grid; align-items:end; padding: clamp(40px,6vw,88px) 0 32px; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(380px,.98fr); gap:clamp(42px,6vw,96px); align-items:end; }
.hero-copy { padding-bottom: clamp(34px,4vw,64px); position:relative; z-index:3; }
.hero-copy .eyebrow { margin-bottom:18px; }
.hero-copy .display-xl { max-width: 800px; }
.hero-copy .hero-text { max-width: 560px; margin: 26px 0 30px; color:var(--muted); font-size:clamp(16px,1.35vw,19px); }
.hero-media {
  height: min(72vh, 720px); min-height: 510px; position:relative; border-radius: 44px 44px 180px 44px; overflow:hidden;
  box-shadow:var(--shadow); background:linear-gradient(135deg,#dce9e9,#b8d8d7);
  isolation:isolate; transform-style:preserve-3d;
}
.hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(4,25,31,.32)); z-index:1; pointer-events:none; }
.hero-media img { height:100%; object-fit:cover; object-position:center; transition:transform .8s cubic-bezier(.2,.8,.2,1), filter .4s ease; }
.hero-media:hover img { transform:scale(1.035); }
.hero-orbit { position:absolute; z-index:2; width:150px; height:150px; border:1px solid rgba(255,255,255,.66); border-radius:50%; right:32px; bottom:30px; backdrop-filter:blur(12px); display:grid; place-items:center; color:#fff; }
.hero-orbit span { width:68px; font-size:10px; line-height:1.2; text-transform:uppercase; letter-spacing:.12em; text-align:center; }
.hero-orbit::before { content:""; position:absolute; width:8px; height:8px; background:white; border-radius:50%; top:-4px; left:calc(50% - 4px); animation:orbitPulse 2.4s ease-in-out infinite; }
@keyframes orbitPulse { 50% { transform:scale(1.8); opacity:.4; } }
.hero-glow { position:absolute; width:540px; height:540px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb,var(--glow) 30%, transparent), transparent 68%); left:-260px; bottom:-240px; filter:blur(8px); pointer-events:none; }

/* Brand ribbon */
.brand-ribbon { overflow:hidden; padding: 16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); }
.ribbon-track { display:flex; width:max-content; gap:52px; animation:marquee 24s linear infinite; }
.ribbon-track span { display:flex; align-items:center; gap:14px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.12em; white-space:nowrap; }
.ribbon-track i { width:7px; height:7px; display:inline-block; border-radius:50%; background:var(--brand); }
@keyframes marquee { to { transform:translateX(-50%); } }

/* content cards */
.split { display:grid; grid-template-columns: .82fr 1.18fr; gap:clamp(40px,7vw,110px); align-items:start; }
.sticky-intro { position:sticky; top:calc(var(--header-h) + 46px); }
.feature-stack { display:grid; gap:18px; }
.feature-card {
  position:relative; padding:clamp(26px,3vw,38px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  min-height:190px; transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.feature-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--brand) 46%, var(--line)); box-shadow:0 20px 50px rgba(18,57,66,.08); }
.feature-card .num { font-family:var(--display); font-size:17px; color:var(--brand); }
.feature-card h3 { font-family:var(--display); font-size:32px; font-weight:500; letter-spacing:-.03em; margin:28px 0 10px; }
.feature-card p { color:var(--muted); margin:0; max-width:52ch; }
.card-sheen { position:absolute; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--brand) 12%,transparent),transparent 68%); right:-100px; top:-100px; pointer-events:none; transition:transform .4s ease; }
.feature-card:hover .card-sheen { transform:scale(1.35); }

/* pathway */
.pathway { background:var(--ink); color:var(--paper); overflow:hidden; }
.pathway .eyebrow, .pathway .muted { color:color-mix(in srgb,var(--paper) 62%, transparent); }
.path-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(50px,8vw,120px); align-items:center; }
.path-map { position:relative; min-height:500px; }
.path-map svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.path-line { fill:none; stroke:color-mix(in srgb,var(--brand) 92%, white 8%); stroke-width:2.2; stroke-linecap:round; stroke-dasharray:10 9; animation:dash 14s linear infinite; }
@keyframes dash { to { stroke-dashoffset:-190; } }
.path-node { position:absolute; display:grid; grid-template-columns:54px 1fr; gap:14px; max-width:260px; align-items:start; }
.path-node:nth-of-type(1){ left:2%; top:8%; } .path-node:nth-of-type(2){ right:2%; top:30%; } .path-node:nth-of-type(3){ left:10%; top:57%; } .path-node:nth-of-type(4){ right:8%; bottom:3%; }
.node-dot { width:54px; height:54px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:grid; place-items:center; font-family:var(--display); font-size:20px; background:rgba(255,255,255,.04); backdrop-filter:blur(8px); }
.path-node strong { display:block; font-size:13px; margin:5px 0 3px; }.path-node small { color:rgba(255,255,255,.58); font-size:11px; line-height:1.45; }

/* image feature */
.media-split { display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(34px,6vw,84px); align-items:center; }
.media-card { min-height:620px; border-radius:42px 42px 42px 170px; overflow:hidden; position:relative; background:#dce9e9; box-shadow:var(--shadow); }
.media-card img { height:100%; object-fit:cover; position:absolute; inset:0; transition:transform 1s cubic-bezier(.2,.8,.2,1); }
.media-card:hover img { transform:scale(1.045); }
.media-card .caption { position:absolute; left:24px; right:24px; bottom:24px; z-index:3; background:color-mix(in srgb, #071013 64%, transparent); color:white; border:1px solid rgba(255,255,255,.18); border-radius:20px; padding:16px 18px; backdrop-filter:blur(18px); display:flex; justify-content:space-between; gap:20px; font-size:11px; }
.metric-list { display:grid; gap:0; margin-top:38px; }
.metric-row { display:grid; grid-template-columns:56px 1fr; gap:18px; padding:22px 0; border-top:1px solid var(--line); }
.metric-row:last-child { border-bottom:1px solid var(--line); }
.metric-row .icon { width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--brand); }
.metric-row svg { width:18px; }
.metric-row h4 { margin:0 0 5px; font-size:14px; }.metric-row p{margin:0;color:var(--muted);font-size:13px;}

/* team */
.team-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:42px; }
.person { padding:30px; min-height:260px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); position:relative; overflow:hidden; }
.person::after { content:""; position:absolute; width:140px; height:140px; border-radius:50%; border:1px solid color-mix(in srgb,var(--brand) 36%, transparent); right:-58px; bottom:-58px; transition:transform .5s ease; }
.person:hover::after { transform:scale(1.45); }
.person .role { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); }
.person h3 { font-family:var(--display); font-weight:500; font-size:30px; margin:18px 0 15px; letter-spacing:-.025em; }
.person p { color:var(--muted); font-size:13px; margin:0; max-width:55ch; }

/* CTA */
.cta-panel { position:relative; overflow:hidden; background:var(--brand-2); color:white; border-radius:44px; padding:clamp(42px,7vw,84px); display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:end; }
.cta-panel::before,.cta-panel::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.16); border-radius:50%; pointer-events:none; }
.cta-panel::before { width:360px;height:360px;right:-150px;top:-180px; }.cta-panel::after{width:260px;height:260px;right:20px;top:-120px;}
.cta-panel .eyebrow { color:rgba(255,255,255,.7); }.cta-panel p { color:rgba(255,255,255,.7); max-width:46ch; }
.cta-panel .button { background:white; color:#10272f; border-color:white; justify-self:end; }

/* Footer */
footer { padding:56px 0 34px; border-top:1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:34px; align-items:start; }
footer h4 { margin:0 0 16px; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
footer a { display:block; font-size:13px; margin:9px 0; color:var(--ink); }
.footer-note { color:var(--muted); font-size:11px; max-width:48ch; margin-top:14px; }
.footer-bottom { border-top:1px solid var(--line); margin-top:42px; padding-top:22px; display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:11px; }

/* Overlay menu */
.menu-overlay { position:fixed; inset:0; z-index:120; visibility:hidden; pointer-events:none; }
.menu-overlay.open { visibility:visible; pointer-events:auto; }
.menu-bg { position:absolute; inset:0; background:var(--ink); transform:translateY(-102%); transition:transform .7s cubic-bezier(.76,0,.24,1); }
.menu-overlay.open .menu-bg { transform:translateY(0); }
.menu-panel { position:relative; z-index:2; min-height:100%; color:var(--paper); padding:28px clamp(20px,4vw,64px) 42px; display:grid; grid-template-rows:auto 1fr auto; opacity:0; transition:opacity .2s ease .12s; }
.menu-overlay.open .menu-panel { opacity:1; }
.menu-top { display:flex; align-items:center; justify-content:space-between; }
.menu-top .brand { color:var(--paper); }
.menu-close { width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:transparent;color:white;display:grid;place-items:center;cursor:pointer;transition:transform .3s ease,background .3s ease; }
.menu-close:hover { transform:rotate(90deg); background:rgba(255,255,255,.08); }
.menu-close svg{width:18px;}
.menu-main { display:grid; grid-template-columns:1.2fr .8fr; gap:70px; align-items:center; width:min(1180px,100%); margin:0 auto; }
.menu-nav { display:grid; }
.menu-link { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.12); transform:translateY(18px); opacity:0; transition:transform .45s ease,opacity .45s ease,color .25s ease; }
.menu-overlay.open .menu-link { transform:translateY(0); opacity:1; }
.menu-overlay.open .menu-link:nth-child(1){transition-delay:.18s}.menu-overlay.open .menu-link:nth-child(2){transition-delay:.23s}.menu-overlay.open .menu-link:nth-child(3){transition-delay:.28s}.menu-overlay.open .menu-link:nth-child(4){transition-delay:.33s}
.menu-link .n { color:rgba(255,255,255,.45); font-size:10px; }
.menu-link .label { font-family:var(--display); font-size:clamp(40px,6vw,80px); line-height:1; letter-spacing:-.04em; }
.menu-link svg{width:22px;opacity:.45;transition:transform .25s ease,opacity .25s ease}.menu-link:hover svg{transform:translate(4px,-4px);opacity:1}
.menu-preview { height:420px; border-radius:160px 32px 32px 32px; overflow:hidden; position:relative; background:#1b353c; }
.menu-preview img { height:100%; object-fit:cover; opacity:.72; transition:opacity .3s ease,transform .7s ease; }.menu-preview:hover img{opacity:.9;transform:scale(1.03)}
.menu-preview::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.38));}
.menu-foot { width:min(1180px,100%); margin:0 auto; display:flex; justify-content:space-between; gap:24px; color:rgba(255,255,255,.55); font-size:11px; }

/* Accessibility */
.a11y-wrap { position:fixed; right:18px; bottom:18px; z-index:90; }
.a11y-button { width:50px;height:50px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;box-shadow:0 15px 44px rgba(5,35,42,.16);cursor:pointer;transition:transform .25s ease; }
.a11y-button:hover { transform:translateY(-3px); }.a11y-button svg{width:23px;height:23px;}
.a11y-panel { position:absolute; right:0; bottom:62px; width:250px; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:12px; transform:translateY(10px) scale(.98); opacity:0; pointer-events:none; transition:.25s ease; }
.a11y-wrap.open .a11y-panel { transform:none; opacity:1; pointer-events:auto; }
.a11y-title { font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);padding:8px 9px 11px; }
.a11y-action { width:100%;border:0;background:transparent;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 10px;border-radius:12px;cursor:pointer;text-align:left; }
.a11y-action:hover{background:color-mix(in srgb,var(--brand) 8%,transparent)}
.a11y-action span{font-size:12px;font-weight:600}.a11y-action small{color:var(--muted);font-size:10px}
.switch { width:36px;height:20px;border-radius:999px;background:color-mix(in srgb,var(--ink) 14%,transparent);padding:3px;transition:.25s ease;flex:0 0 auto }.switch::before{content:"";display:block;width:14px;height:14px;border-radius:50%;background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.25);transition:.25s ease}.switch.on{background:var(--brand)}.switch.on::before{transform:translateX(16px)}

/* loaders */
.first-loader, .route-transition { position:fixed; inset:0; z-index:999; pointer-events:none; }
.first-loader { background:var(--paper); display:grid; place-items:center; transition:opacity .7s ease, visibility .7s ease; }
.first-loader.hidden { opacity:0; visibility:hidden; }
.loader-stage { width:min(380px,82vw); text-align:center; }
.loader-name { font-family:var(--display); font-size:clamp(25px,5vw,38px); line-height:1; letter-spacing:-.035em; opacity:0; transform:translateY(12px); animation:revealUp .7s ease .65s forwards; }
.loader-kicker { margin-top:10px; color:var(--muted); font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:0; animation:fadeIn .5s ease .95s forwards; }
@keyframes revealUp{to{opacity:1;transform:none}}@keyframes fadeIn{to{opacity:1}}
.route-transition { z-index:998; visibility:hidden; }
.route-transition.active { visibility:visible; }
.route-layer { position:absolute; inset:-12%; background:var(--brand-2); border-radius:50%; transform:translateX(-120%) rotate(-8deg) scale(1.2); }
.route-layer.two{background:var(--brand);opacity:.95}.route-layer.three{background:var(--paper)}
.route-transition.out .route-layer.one{animation:sweepIn .56s cubic-bezier(.76,0,.24,1) forwards}.route-transition.out .route-layer.two{animation:sweepIn .56s cubic-bezier(.76,0,.24,1) .06s forwards}.route-transition.out .route-layer.three{animation:sweepIn .56s cubic-bezier(.76,0,.24,1) .12s forwards}
.route-transition.in { visibility:visible; }.route-transition.in .route-layer{transform:translateX(0) rotate(-8deg) scale(1.2)}
.route-transition.in .route-layer.one{animation:sweepOut .72s cubic-bezier(.76,0,.24,1) .16s forwards}.route-transition.in .route-layer.two{animation:sweepOut .72s cubic-bezier(.76,0,.24,1) .09s forwards}.route-transition.in .route-layer.three{animation:sweepOut .72s cubic-bezier(.76,0,.24,1) forwards}
@keyframes sweepIn{to{transform:translateX(0) rotate(-8deg) scale(1.2)}}@keyframes sweepOut{to{transform:translateX(120%) rotate(-8deg) scale(1.2)}}

/* reveal */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity:1; transform:none; }
.reveal.delay-1{transition-delay:.08s}.reveal.delay-2{transition-delay:.16s}.reveal.delay-3{transition-delay:.24s}

/* inner page */
.page-hero { padding: clamp(74px,10vw,132px) 0 70px; position:relative; overflow:hidden; }
.page-hero-grid { display:grid; grid-template-columns:1.12fr .88fr; gap:60px; align-items:end; }
.page-hero .lede { margin:24px 0 0; }.page-hero-art { height:390px;border-radius:160px 34px 34px 34px;overflow:hidden;position:relative;background:#dce9e9;box-shadow:var(--shadow)}.page-hero-art img{height:100%;object-fit:cover}.page-hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,transparent 52%,rgba(5,37,45,.28))}
.tech-steps { display:grid; gap:18px; counter-reset:tech; }
.tech-step { display:grid; grid-template-columns:120px 1fr 70px; align-items:center; gap:30px; padding:28px 0; border-bottom:1px solid var(--line); position:relative; }
.tech-step::before{counter-increment:tech;content:"0" counter(tech);font-family:var(--display);font-size:22px;color:var(--brand)}
.tech-step h3{font-family:var(--display);font-size:clamp(30px,4vw,54px);font-weight:500;letter-spacing:-.035em;margin:0}.tech-step p{color:var(--muted);font-size:13px;margin:8px 0 0;max-width:55ch}.tech-step .round{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}.tech-step svg{width:20px;color:var(--brand)}

.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,6vw,80px); align-items:start; }
.contact-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px; }
.contact-card h3{font-family:var(--display);font-size:32px;font-weight:500;margin:0 0 20px}.contact-item{padding:18px 0;border-top:1px solid var(--line)}.contact-item span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:5px}.contact-item strong{font-size:14px}
.contact-form { display:grid; gap:16px; }
.field { display:grid; gap:7px; }.field label{font-size:11px;color:var(--muted);font-weight:600}.field input,.field textarea{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:15px;padding:15px 16px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.field input:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 12%,transparent)}.field textarea{min-height:150px;resize:vertical}

.cursor-dot { position:fixed; z-index:300; width:8px;height:8px;border-radius:50%;background:var(--brand);pointer-events:none;opacity:0;transform:translate(-50%,-50%);transition:opacity .2s ease,width .2s ease,height .2s ease;mix-blend-mode:multiply }.cursor-dot.show{opacity:.75}.cursor-dot.active{width:20px;height:20px;opacity:.35}
html[data-theme="dark"] .cursor-dot{mix-blend-mode:screen}

@media (max-width: 980px) {
  :root{--header-h:74px}.site-header{padding:0 22px}.brand-word{font-size:13px;max-width:155px}.menu-button{min-width:auto;width:48px;padding:0;border-radius:50%}.menu-button .label{display:none}
  .hero{padding-top:30px}.hero-grid,.page-hero-grid,.media-split,.path-grid,.split,.cta-panel,.contact-grid{grid-template-columns:1fr}.hero-copy{padding-bottom:0}.hero-media{height:60svh;min-height:480px;border-radius:34px 34px 130px 34px}.sticky-intro{position:relative;top:auto}.path-map{min-height:540px}.media-card{min-height:540px}.menu-main{grid-template-columns:1fr}.menu-preview{display:none}.menu-panel{padding:22px}.menu-foot{flex-direction:column}.cta-panel .button{justify-self:start}.footer-grid{grid-template-columns:1.2fr .8fr}.footer-grid>div:first-child{grid-column:1/-1}.tech-step{grid-template-columns:70px 1fr 56px}.page-hero-art{height:340px}
}
@media (max-width: 640px) {
  .container,.narrow{width:min(100% - 28px,1180px)}.site-header{padding:0 14px}.brand-word{font-size:12px}.brand-word small{display:none}
  .display-xl{font-size:clamp(48px,15vw,76px);line-height:.96}.display-lg{font-size:clamp(40px,12vw,58px)}.display-md{font-size:clamp(34px,10vw,50px)}
  .hero{min-height:auto;padding-bottom:20px}.hero-grid{gap:32px}.hero-copy .hero-text{margin:20px 0 24px}.hero-media{height:62svh;min-height:440px;border-radius:28px 28px 95px 28px}.hero-orbit{width:112px;height:112px;right:18px;bottom:18px}.hero-orbit span{font-size:8px;width:55px}
  .section{padding:78px 0}.section-tight{padding:52px 0}.feature-card{min-height:0;padding:24px}.feature-card h3{font-size:28px;margin-top:22px}.path-map{min-height:590px}.path-node{max-width:220px;grid-template-columns:44px 1fr;gap:10px}.node-dot{width:44px;height:44px}.path-node:nth-of-type(1){left:0}.path-node:nth-of-type(2){right:0;top:28%}.path-node:nth-of-type(3){left:0;top:55%}.path-node:nth-of-type(4){right:0}
  .media-card{min-height:500px;border-radius:30px 30px 30px 100px}.media-card .caption{left:14px;right:14px;bottom:14px;flex-direction:column;gap:5px}.team-grid{grid-template-columns:1fr}.person{min-height:0}.cta-panel{border-radius:28px;padding:30px 24px}.footer-grid{grid-template-columns:1fr 1fr}.footer-bottom{flex-direction:column}.menu-link{grid-template-columns:30px 1fr 20px}.menu-link .label{font-size:clamp(42px,13vw,64px)}.menu-foot{padding-top:20px}.page-hero{padding-top:68px}.page-hero-grid{gap:34px}.page-hero-art{height:310px;border-radius:100px 28px 28px 28px}.tech-step{grid-template-columns:42px 1fr;gap:14px}.tech-step .round{display:none}.a11y-wrap{right:12px;bottom:12px}.a11y-panel{width:min(250px,calc(100vw - 24px))}
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
}
html.user-reduced-motion *,html.user-reduced-motion *::before,html.user-reduced-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
html.large-text{font-size:19px}
html.high-contrast{--line:color-mix(in srgb,var(--ink) 36%,transparent);filter:contrast(1.08)}

/* ===== 2026-09-26 refinement pass: corporate type, richer interaction, no invented logo ===== */
.brand-text-only { gap:0; }
.brand-text-only .brand-word { max-width:none; font-family:var(--display); font-size:14px; font-weight:600; letter-spacing:-.028em; white-space:nowrap; }
.display-xl,.display-lg,.display-md,.feature-card h3,.person h3,.menu-link .label,.tech-step h3,.contact-card h3,.tech-step::before,.feature-card .num,.node-dot {
  font-family:var(--display);
}
.display-xl { font-weight:500; letter-spacing:-.055em; line-height:.96; }
.display-lg { font-weight:500; letter-spacing:-.047em; line-height:1.02; }
.display-md { font-weight:500; letter-spacing:-.04em; line-height:1.04; }
.menu-link .label { font-weight:500; letter-spacing:-.05em; }
.feature-card h3,.person h3,.tech-step h3,.contact-card h3 { font-weight:500; }

/* subtle material texture: visible enough to add depth, quiet enough for a medical brand */
body::before {
  content:""; position:fixed; inset:0; z-index:1000; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
html[data-theme="dark"] body::before { opacity:.035; mix-blend-mode:screen; }
.site-shell::after {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 8% 22%, color-mix(in srgb,var(--glow) 9%,transparent), transparent 28%),
    radial-gradient(circle at 94% 58%, color-mix(in srgb,var(--brand) 6%,transparent), transparent 30%);
}

/* typographic first-load scene (client does not have a logo) */
.loader-stage { width:min(520px,86vw); }
.loader-route { width:min(420px,78vw); margin:0 auto 24px; color:var(--brand); opacity:0; transform:scale(.94); animation:loaderRouteIn .6s cubic-bezier(.16,1,.3,1) .08s forwards; }
.loader-route svg { width:100%; height:auto; overflow:visible; }
.loader-route-base { fill:none; stroke:color-mix(in srgb,var(--ink) 13%,transparent); stroke-width:1; }
.loader-route-live { fill:none; stroke:url(#loaderGlow); stroke-width:2; stroke-linecap:round; stroke-dasharray:520; stroke-dashoffset:520; animation:drawLoaderRoute 1.2s cubic-bezier(.65,0,.2,1) .16s forwards; }
.loader-route-node { fill:var(--paper); stroke:var(--brand); stroke-width:2; transform-box:fill-box; transform-origin:center; opacity:0; animation:loaderNode .35s ease forwards; }
.loader-route-node.n1{animation-delay:.28s}.loader-route-node.n2{animation-delay:.72s}.loader-route-node.n3{animation-delay:1.12s}
.loader-name { font-family:var(--display); font-size:clamp(23px,4vw,36px); font-weight:600; letter-spacing:-.045em; animation-delay:.68s; }
.loader-kicker { animation-delay:.94s; }
@keyframes loaderRouteIn{to{opacity:1;transform:none}}
@keyframes drawLoaderRoute{to{stroke-dashoffset:0}}
@keyframes loaderNode{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}

/* hero: a little more tension and interaction without turning it into a dashboard */
.hero { position:relative; }
.hero::before {
  content:""; position:absolute; inset:4% 0 auto; height:62%; pointer-events:none; opacity:.7;
  background-image:radial-gradient(circle, color-mix(in srgb,var(--ink) 12%,transparent) 1px, transparent 1.1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.65),transparent 44%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.65),transparent 44%);
}
.hero-copy::after {
  content:""; position:absolute; width:170px; height:170px; right:-34px; top:-38px; border-radius:50%; pointer-events:none;
  border:1px solid color-mix(in srgb,var(--brand) 18%,transparent); box-shadow:0 0 0 28px color-mix(in srgb,var(--brand) 3%,transparent),0 0 0 56px color-mix(in srgb,var(--brand) 2%,transparent);
  animation:breathRing 6s ease-in-out infinite;
}
@keyframes breathRing{50%{transform:scale(1.08);opacity:.55}}
.hero-media { cursor:crosshair; }
.hero-media::before {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.12),transparent 22%,transparent 76%,rgba(255,255,255,.08));
  mix-blend-mode:screen;
}
.hero-optics { position:absolute; inset:0; z-index:3; pointer-events:none; color:rgba(255,255,255,.86); }
.hero-optics svg { width:100%; height:100%; }
.hero-trace-line { fill:none; stroke:rgba(255,255,255,.72); stroke-width:1.2; stroke-dasharray:8 12; animation:heroTrace 12s linear infinite; filter:drop-shadow(0 0 9px rgba(139,216,212,.5)); }
@keyframes heroTrace{to{stroke-dashoffset:-180}}
.optic-corner { position:absolute; width:32px; height:32px; opacity:.72; }
.optic-corner::before,.optic-corner::after { content:""; position:absolute; background:currentColor; }
.optic-corner::before{width:100%;height:1px}.optic-corner::after{width:1px;height:100%}
.optic-corner.c1{left:18px;top:18px}.optic-corner.c2{right:18px;bottom:18px;transform:rotate(180deg)}
.hero-scan { position:absolute; z-index:3; left:0; right:0; top:-12%; height:16%; pointer-events:none; opacity:.28; background:linear-gradient(180deg,transparent,rgba(255,255,255,.6),transparent); filter:blur(8px); animation:heroScan 7.5s ease-in-out infinite; }
@keyframes heroScan{50%{transform:translateY(700%);opacity:.12}}
.hero-lens {
  position:absolute; z-index:4; width:116px; height:116px; border-radius:50%; left:var(--lens-x,50%); top:var(--lens-y,50%); transform:translate(-50%,-50%) scale(.86); opacity:0; pointer-events:none;
  border:1px solid rgba(255,255,255,.72); box-shadow:0 0 0 1px rgba(7,16,19,.08),0 16px 38px rgba(4,29,35,.18),inset 0 0 30px rgba(255,255,255,.12);
  background:radial-gradient(circle,rgba(255,255,255,.14),rgba(255,255,255,.02) 58%,transparent 60%); backdrop-filter:saturate(1.18) contrast(1.06); transition:opacity .22s ease,transform .22s ease;
}
.hero-media:hover .hero-lens { opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ribbon: 6 identical sets = 3x the old physical track, translate by one set for perfect looping */
.brand-ribbon { position:relative; padding:17px 0; background:color-mix(in srgb,var(--surface) 92%,var(--brand) 8%); }
.brand-ribbon::before,.brand-ribbon::after { content:""; position:absolute; top:0; bottom:0; width:8vw; z-index:2; pointer-events:none; }
.brand-ribbon::before{left:0;background:linear-gradient(90deg,var(--surface),transparent)}
.brand-ribbon::after{right:0;background:linear-gradient(-90deg,var(--surface),transparent)}
.ribbon-track { gap:0; animation:marqueeLong 54s linear infinite; will-change:transform; }
.ribbon-set { display:flex; flex:0 0 auto; gap:52px; padding-right:52px; }
.ribbon-track span { font-weight:700; letter-spacing:.135em; }
.ribbon-track i { box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 10%,transparent); }
@keyframes marqueeLong { to { transform:translateX(-16.6666667%); } }

/* richer content surfaces */
.texture-section { overflow:hidden; }
.texture-section::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.48;
  background:
    linear-gradient(90deg,transparent 0 12%,color-mix(in srgb,var(--brand) 6%,transparent) 12.08%,transparent 12.16%),
    radial-gradient(circle at 77% 38%,color-mix(in srgb,var(--brand) 10%,transparent),transparent 25%);
}
.company-section .sticky-intro::after {
  content:""; display:block; width:64%; height:1px; margin-top:38px; background:linear-gradient(90deg,var(--brand),transparent); transform-origin:left; animation:signalLine 4.8s ease-in-out infinite;
}
@keyframes signalLine{50%{transform:scaleX(.72);opacity:.48}}
.feature-card { min-height:212px; isolation:isolate; }
.feature-card > * { position:relative; z-index:2; }
.micro-graphic { position:absolute; z-index:1; right:24px; top:24px; width:104px; height:84px; opacity:.58; pointer-events:none; transition:opacity .35s ease, transform .55s cubic-bezier(.16,1,.3,1); }
.feature-card:hover .micro-graphic { opacity:.95; transform:translate(-3px,3px) scale(1.04); }
.micro-access span { position:absolute; height:1px; left:4px; right:4px; background:linear-gradient(90deg,transparent,var(--brand),transparent); transform-origin:center; }
.micro-access span:nth-child(1){top:20px;transform:rotate(-12deg);animation:microWave 4.4s ease-in-out infinite}.micro-access span:nth-child(2){top:42px;transform:rotate(8deg);animation:microWave 4.4s ease-in-out -1.2s infinite}.micro-access span:nth-child(3){top:64px;transform:rotate(-4deg);animation:microWave 4.4s ease-in-out -2.3s infinite}
@keyframes microWave{50%{transform:translateX(9px) rotate(4deg);opacity:.38}}
.micro-identify { display:flex; align-items:center; justify-content:flex-end; gap:7px; padding:12px; }
.micro-identify i { display:block; width:5px; height:24%; border-radius:999px; background:var(--brand); animation:microBars 1.9s ease-in-out infinite; transform-origin:center; }
.micro-identify i:nth-child(2){animation-delay:-.25s}.micro-identify i:nth-child(3){animation-delay:-.5s}.micro-identify i:nth-child(4){animation-delay:-.75s}.micro-identify i:nth-child(5){animation-delay:-1s}
@keyframes microBars{50%{height:72%;opacity:.35}}
.micro-restore .mr-ring,.micro-restore .mr-core { position:absolute; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); }
.micro-restore .r1{width:68px;height:68px;border:1px solid color-mix(in srgb,var(--brand) 52%,transparent);animation:microRing 3.2s ease-out infinite}.micro-restore .r2{width:38px;height:38px;border:1px solid color-mix(in srgb,var(--brand) 68%,transparent);animation:microRing 3.2s ease-out -1.6s infinite}.micro-restore .mr-core{width:8px;height:8px;background:var(--brand);box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 10%,transparent)}
@keyframes microRing{0%{transform:translate(-50%,-50%) scale(.7);opacity:0}45%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.25);opacity:0}}

/* polished procedure-path motion graphic */
.pathway::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.42;
  background-image:radial-gradient(circle,rgba(255,255,255,.12) 1px,transparent 1.2px); background-size:26px 26px;
  -webkit-mask-image:radial-gradient(circle at 76% 50%,black,transparent 60%); mask-image:radial-gradient(circle at 76% 50%,black,transparent 60%);
}
.pathway::after { content:""; position:absolute; width:62vw; height:62vw; border-radius:50%; right:-38vw; top:-28vw; border:1px solid rgba(255,255,255,.08); box-shadow:0 0 0 70px rgba(255,255,255,.018),0 0 0 140px rgba(255,255,255,.012); pointer-events:none; }
.path-map { border:1px solid rgba(255,255,255,.08); border-radius:44px; background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012)); overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 32px 70px rgba(0,0,0,.15); }
.path-map::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(360px circle at var(--path-x,62%) var(--path-y,45%),rgba(139,216,212,.13),transparent 62%); transition:background .18s linear; }
.path-svg { z-index:2; }
.path-ghost { fill:none; stroke:rgba(255,255,255,.08); stroke-width:8; stroke-linecap:round; }
.path-line { stroke-width:2.4; stroke-dasharray:10 9; filter:drop-shadow(0 0 8px rgba(85,194,198,.26)); }
.route-pulse.halo { fill:rgba(139,216,212,.17); }.route-pulse.core{fill:white}.route-pulse.two{opacity:.72}
.path-field { position:absolute; z-index:1; width:180px; height:180px; left:var(--path-x,64%); top:var(--path-y,48%); transform:translate(-50%,-50%); pointer-events:none; transition:left .22s ease-out,top .22s ease-out; }
.field-ring { position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.12); left:50%; top:50%; transform:translate(-50%,-50%); }
.field-ring.f1{width:64px;height:64px}.field-ring.f2{width:112px;height:112px;animation:fieldRing 4s ease-in-out infinite}.field-ring.f3{width:168px;height:168px;animation:fieldRing 4s ease-in-out -2s infinite}
.field-cross{position:absolute;left:50%;top:50%;background:rgba(255,255,255,.12);transform:translate(-50%,-50%)}.field-cross.h{width:100%;height:1px}.field-cross.v{width:1px;height:100%}
@keyframes fieldRing{50%{transform:translate(-50%,-50%) scale(1.06);opacity:.45}}
.path-node { z-index:4; transition:transform .35s ease,filter .35s ease; }
.path-node:hover { transform:translateY(-4px); filter:drop-shadow(0 8px 20px rgba(0,0,0,.28)); }
.node-dot { position:relative; overflow:hidden; }
.node-dot::after { content:""; position:absolute; inset:5px; border-radius:50%; border:1px solid rgba(255,255,255,.14); animation:nodePulse 3.2s ease-in-out infinite; }
@keyframes nodePulse{50%{transform:scale(.78);opacity:.22}}

/* photography gets a quiet scan interaction */
.media-card::before { content:""; position:absolute; z-index:2; left:0; right:0; top:-24%; height:20%; background:linear-gradient(180deg,transparent,rgba(255,255,255,.24),transparent); filter:blur(10px); opacity:0; pointer-events:none; }
.media-card:hover::before { opacity:1; animation:mediaSweep 1.6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes mediaSweep{to{transform:translateY(680%)}}

/* mouse-position spotlight layer, inserted by app.js */
[data-spotlight] { --spot-x:50%; --spot-y:50%; }
.interaction-glow { position:absolute!important; z-index:1!important; inset:0; pointer-events:none; opacity:0; transition:opacity .3s ease; background:radial-gradient(260px circle at var(--spot-x) var(--spot-y),color-mix(in srgb,var(--brand) 12%,transparent),transparent 70%); }
[data-spotlight]:hover > .interaction-glow { opacity:1; }
.pathway [data-spotlight] > .interaction-glow,.cta-panel > .interaction-glow { background:radial-gradient(260px circle at var(--spot-x) var(--spot-y),rgba(255,255,255,.10),transparent 70%); }
.feature-card > .interaction-glow { z-index:1!important; }
.feature-card > :not(.interaction-glow),.person > :not(.interaction-glow),.tech-step > :not(.interaction-glow),.cta-panel > :not(.interaction-glow) { position:relative; z-index:2; }

/* magnetic motion uses variables so it does not fight existing hover/reveal states */
[data-magnetic] { --mag-x:0px; --mag-y:0px; }
.button[data-magnetic] { transform:translate3d(var(--mag-x),var(--mag-y),0); }
.button[data-magnetic]:hover { transform:translate3d(var(--mag-x),calc(var(--mag-y) - 3px),0); }
.menu-button[data-magnetic] { transform:translate3d(var(--mag-x),var(--mag-y),0); }
.menu-button[data-magnetic]:hover { transform:translate3d(var(--mag-x),calc(var(--mag-y) - 2px),0); }
.menu-close[data-magnetic] { transform:translate3d(var(--mag-x),var(--mag-y),0); }
.menu-close[data-magnetic]:hover { transform:translate3d(var(--mag-x),var(--mag-y),0) rotate(90deg); }

@media (max-width:980px){
  .brand-text-only .brand-word{font-size:12.5px;white-space:normal;max-width:220px;line-height:1.15}
  .hero-copy::after{right:-8px;top:-12px;width:120px;height:120px}
  .path-map{border-radius:32px}
  .micro-graphic{right:18px;top:18px;transform:scale(.9);transform-origin:top right}
}
@media (max-width:640px){
  body::before{opacity:.035}
  .brand-text-only .brand-word{font-size:11.5px;max-width:175px}
  .display-xl{font-size:clamp(44px,13vw,66px);line-height:.98;letter-spacing:-.052em}
  .display-lg{font-size:clamp(38px,10.5vw,54px);letter-spacing:-.045em}
  .display-md{font-size:clamp(32px,9vw,46px)}
  .hero::before{opacity:.34;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 48%);mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 48%)}
  .hero-copy::after{display:none}
  .hero-lens{display:none}
  .hero-scan{animation-duration:9s}
  .ribbon-track{animation-duration:46s}.ribbon-set{gap:34px;padding-right:34px}.ribbon-track span{font-size:9px}
  .micro-graphic{width:80px;height:64px;opacity:.4}
  .path-map{border-radius:26px}
  .path-field{width:120px;height:120px}.field-ring.f1{width:46px;height:46px}.field-ring.f2{width:78px;height:78px}.field-ring.f3{width:112px;height:112px}
}


/* ===== 2026-09-26 interaction stability pass =====
   Restores the intended stacking order after the texture refinement pass and
   replaces the heavy route wipe with a GPU-friendly two-layer transition. */
main, footer { position:relative; z-index:1; }
.site-header { position:fixed; z-index:300; }
.a11y-wrap { position:fixed; z-index:320; }
body::before { z-index:500; }
.menu-overlay { position:fixed; inset:0; z-index:2000; visibility:hidden; pointer-events:none; }
.menu-overlay.open { visibility:visible; pointer-events:auto; }
.menu-bg { z-index:0; }
.menu-panel { position:relative; z-index:2; pointer-events:none; }
.menu-overlay.open .menu-panel { pointer-events:auto; }
.menu-overlay.open .menu-link,
.menu-overlay.open .menu-close { pointer-events:auto; }

/* first load scene */
.first-loader {
  position:fixed; inset:0; z-index:4000; pointer-events:auto;
  opacity:1; visibility:visible; background:var(--paper);
  transition:opacity .52s cubic-bezier(.4,0,.2,1), visibility .52s linear;
  contain:layout paint;
}
html.loader-seen .first-loader,
.first-loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
body.is-loading { overflow:hidden; }
.first-loader.is-playing .loader-route { animation-name:loaderRouteIn; }
.first-loader.is-playing .loader-route-live { animation-name:drawLoaderRoute; }
.first-loader.is-playing .loader-route-node { animation-name:loaderNode; }
.first-loader.is-playing .loader-name { animation-name:revealUp; }
.first-loader.is-playing .loader-kicker { animation-name:fadeIn; }

/* route transition */
.route-transition {
  position:fixed; inset:0; z-index:3900; visibility:hidden; pointer-events:none;
  overflow:hidden; contain:strict; background:transparent;
}
.route-transition.active,
html.route-entering .route-transition { visibility:visible; }
.route-layer {
  position:absolute; inset:-2px; border-radius:0; opacity:1;
  transform:translate3d(-102%,0,0); will-change:transform;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.route-layer.one { background:var(--brand-2); }
.route-layer.two { background:var(--brand); }
.route-layer.three { display:none; }
.route-transition.exit .route-layer.one { animation:routeCover .44s cubic-bezier(.76,0,.24,1) forwards; }
.route-transition.exit .route-layer.two { animation:routeCover .44s cubic-bezier(.76,0,.24,1) .055s forwards; }
html.route-entering .route-layer.one,
html.route-entering .route-layer.two,
.route-transition.enter .route-layer.one,
.route-transition.enter .route-layer.two { transform:translate3d(0,0,0); }
.route-transition.enter.play .route-layer.two { animation:routeReveal .46s cubic-bezier(.76,0,.24,1) forwards; }
.route-transition.enter.play .route-layer.one { animation:routeReveal .46s cubic-bezier(.76,0,.24,1) .055s forwards; }
@keyframes routeCover { to { transform:translate3d(0,0,0); } }
@keyframes routeReveal { to { transform:translate3d(102%,0,0); } }
body.is-transitioning { overflow:hidden; }
body.is-transitioning .site-header,
body.is-transitioning .a11y-wrap { pointer-events:none; }

/* Keep the menu animation light enough to stay responsive on laptop GPUs. */
.menu-bg { transform:translate3d(0,-102%,0); will-change:transform; transition:transform .52s cubic-bezier(.76,0,.24,1); }
.menu-overlay.open .menu-bg { transform:translate3d(0,0,0); }
.menu-panel { transition:opacity .18s ease .08s; }
.menu-link { transition:transform .38s cubic-bezier(.16,1,.3,1), opacity .3s ease, color .2s ease; }

@media (prefers-reduced-motion: reduce) {
  .first-loader { transition-duration:.01ms !important; }
  .route-transition { display:none !important; }
  .menu-bg,.menu-panel,.menu-link { transition-duration:.01ms !important; }
}
html.user-reduced-motion .route-transition { display:none!important; }