/* ============================================================
   ORSEL GLOBAL - shared stylesheet
   ------------------------------------------------------------
   Palette : white, pale blue, navy ink, one blue accent
   Type    : Lora (display) - Questrial (wordmark) - Inter (body)
   ============================================================ */

:root{
  --paper:#FFFFFF;
  --porcelain:#F4F8FE;
  --mist:#E9F1FC;
  --wash:#DFE9F8;

  --ink:#0B1B2E;
  --ink-2:#33475F;
  --ink-3:#71869F;

  --accent:#2F6FE0;
  --accent-deep:#1B47B5;
  --accent-soft:#8FB4F0;

  --line:rgba(11,27,46,.10);
  --line-2:rgba(11,27,46,.18);

  --display:'Lora',Georgia,serif;
  --ui:'Questrial','Jost',sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --gut:clamp(1.25rem,5vw,5.5rem);
  --maxw:1300px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html.locked{ overflow:hidden; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--body);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{ font-family:var(--display); font-weight:500; letter-spacing:-.02em; margin:0; color:var(--ink); }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
section{ padding-block:clamp(5rem,11vw,10.5rem); }

/* ============================================================
   LOADER
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:900; background:var(--paper);
  display:grid; place-items:center;
  transition:opacity 1s var(--out), visibility 1s;
}
.loader.done{ opacity:0; visibility:hidden; }
.loader-in{ display:grid; place-items:center; }
.loader-mark{ width:54px; margin-bottom:1.5rem; opacity:.16; animation:pulse 1.9s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{opacity:.12;transform:scale(.97)} 50%{opacity:.28;transform:scale(1)} }
.loader-bar{ width:min(200px,42vw); height:1px; background:var(--line); position:relative; overflow:hidden; }
.loader-bar span{
  position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  transform:translateX(-100%); animation:sweep 1.35s var(--ease) infinite;
}
@keyframes sweep{ to{ transform:translateX(100%); } }

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:fixed; inset:0 0 auto 0; z-index:80;
  padding-block:clamp(1.05rem,2vw,1.8rem);
  border-bottom:1px solid transparent;
  opacity:0; transform:translateY(-10px);
  transition:padding .55s var(--ease), background-color .55s var(--ease),
             backdrop-filter .55s var(--ease), border-color .55s var(--ease),
             opacity .9s var(--out), transform .9s var(--out);
}
.header.ready{ opacity:1; transform:none; }
.header.solid{
  padding-block:.8rem;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.7) blur(16px);
  -webkit-backdrop-filter:saturate(1.7) blur(16px);
  border-bottom-color:var(--line);
}
.header-in{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }

.brand{ display:flex; align-items:center; gap:.75rem; }
.brand img{ height:clamp(30px,3.4vw,40px); width:auto; transition:transform .6s var(--ease); }
.brand:hover img{ transform:rotate(-7deg) scale(1.05); }
.brand span{
  font-family:var(--ui); color:var(--ink);
  font-size:clamp(1.3rem,1.1rem + .74vw,1.78rem);
  letter-spacing:-.01em; white-space:nowrap;
}

.nav{ display:flex; align-items:center; gap:clamp(1.4rem,3vw,2.8rem); }
.nav a{
  position:relative; font-family:var(--ui); font-size:.76rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
  padding-block:.4rem; transition:color .45s var(--ease);
}
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--accent); transform:scaleX(0); transform-origin:left center;
  transition:transform .5s var(--ease);
}
.nav a:hover{ color:var(--accent); }
.nav a:hover::after,.nav a[aria-current]::after{ transform:scaleX(1); }
.nav .cta{
  color:#fff; background:var(--ink); padding:.76rem 1.45rem; border-radius:2px;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background-color .45s var(--ease);
}
.nav .cta::after{ display:none; }
.nav .cta:hover{ color:#fff; background:var(--accent-deep); transform:translateY(-2px);
  box-shadow:0 16px 32px -16px var(--accent); }

.burger{ display:none; width:44px; height:44px; border:0; background:none; cursor:pointer; position:relative; z-index:90; }
.burger i{ position:absolute; left:11px; right:11px; height:1.5px; background:var(--ink); display:block;
  transition:transform .5s var(--ease), opacity .3s var(--ease); }
.burger i:nth-child(1){ top:16px; } .burger i:nth-child(2){ top:22px; } .burger i:nth-child(3){ top:28px; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:900px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset:0; flex-direction:column; justify-content:center; gap:2.3rem;
    background:rgba(255,255,255,.97); backdrop-filter:blur(22px);
    opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;
  }
  .nav.open{ opacity:1; visibility:visible; }
  .nav a{ font-size:1.05rem; opacity:0; transform:translateY(14px);
    transition:opacity .6s var(--ease), transform .6s var(--ease); }
  .nav.open a{ opacity:1; transform:none; }
  .nav.open a:nth-child(1){ transition-delay:.08s; }
  .nav.open a:nth-child(2){ transition-delay:.14s; }
  .nav.open a:nth-child(3){ transition-delay:.20s; }
  .nav.open a:nth-child(4){ transition-delay:.26s; }
  .nav.open a:nth-child(5){ transition-delay:.32s; }
}

/* ============================================================
   HERO  (home only)
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden;
  background:
    radial-gradient(92% 62% at 74% 16%, #FFFFFF 0%, rgba(255,255,255,0) 58%),
    linear-gradient(168deg,#FFFFFF 0%,#EFF5FE 30%,#DCE9FB 66%,#C9DDF8 100%);
}
#gl{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.aurora{ position:absolute; z-index:0; pointer-events:none; border-radius:50%; filter:blur(70px); opacity:.55; }
.aurora.a{ width:52vw; height:52vw; right:-6vw; top:-10vw;
  background:radial-gradient(circle,rgba(120,168,246,.72),transparent 66%);
  animation:float1 22s ease-in-out infinite; }
.aurora.b{ width:40vw; height:40vw; left:-8vw; bottom:-12vw;
  background:radial-gradient(circle,rgba(47,111,224,.34),transparent 68%);
  animation:float2 28s ease-in-out infinite; }
@keyframes float1{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-4vw,3vw) scale(1.09)} }
@keyframes float2{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(3vw,-3vw) scale(1.12)} }

.hero-fallback{ position:absolute; inset:0; z-index:1; display:none; place-items:center; }
.no-webgl .hero-fallback{ display:grid; }
.hero-fallback img{ width:min(40vw,380px); opacity:.14; }

.hero::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(58% 44% at 50% 50%,
    rgba(255,255,255,.80) 0%, rgba(255,255,255,.55) 40%,
    rgba(255,255,255,.18) 66%, rgba(255,255,255,0) 84%);
}
.hero-in{ position:relative; z-index:3; width:100%; padding-block:9rem 7rem; text-align:center; }
.hero-copy{ max-width:min(52rem,92%); margin-inline:auto; }
.hero h1{
  font-size:clamp(2.6rem,1.2rem + 5vw,5.4rem);
  line-height:1.04; letter-spacing:-.03em;
  max-width:15ch; margin-inline:auto; text-wrap:balance;
}
.hero h1 .w{ display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.16em; margin-bottom:-.16em; }
.hero h1 .w i{ display:inline-block; font-style:normal; transform:translateY(110%);
  transition:transform 1.15s var(--out); }
.hero h1 .sp{ display:inline-block; width:.26em; }
.hero-sub{
  margin:clamp(1.7rem,3vw,2.4rem) auto 0; max-width:48ch;
  color:var(--ink-2); font-weight:300; line-height:1.62;
  font-size:clamp(1.02rem,.98rem + .26vw,1.18rem); text-wrap:pretty;
  opacity:0; transform:translateY(18px);
  transition:opacity 1s var(--out), transform 1s var(--out);
}
.hero-cta{ opacity:0; transform:translateY(18px); transition:opacity 1s var(--out), transform 1s var(--out); }

@media (max-width:900px){
  .hero h1{ max-width:13ch; }
  .scrim{ background:radial-gradient(72% 40% at 50% 50%,
    rgba(255,255,255,.88) 0%, rgba(255,255,255,.62) 42%, rgba(255,255,255,0) 82%); }
}

.hint{
  position:absolute; bottom:2rem; left:50%; translate:-50% 0; z-index:3;
  font-family:var(--ui); font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-3); display:flex; align-items:center; gap:.9rem;
  opacity:0; transition:opacity 1s var(--ease);
}
.hint::after{ content:''; width:52px; height:1px;
  background:linear-gradient(90deg,var(--line-2),transparent); animation:slide 2.4s var(--ease) infinite; }
@keyframes slide{ 0%,100%{transform:scaleX(.4);transform-origin:left} 55%{transform:scaleX(1);transform-origin:left} }

@media (max-height:700px){ .hint{ display:none; } }

/* ============================================================
   PAGE HEADER  (interior pages)
   ============================================================ */
.pagehead{
  position:relative; overflow:hidden;
  padding-block:clamp(9rem,17vh,13rem) clamp(3.5rem,7vw,6rem);
  background:
    radial-gradient(85% 70% at 78% 8%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
    linear-gradient(168deg,#FFFFFF 0%,#F1F6FE 40%,#E2ECFB 100%);
  border-bottom:1px solid var(--line);
}
.pagehead .mark{
  position:absolute; right:clamp(-6rem,-4vw,-2rem); top:50%; translate:0 -50%;
  width:clamp(260px,32vw,460px); opacity:.05; pointer-events:none;
}
.pagehead h1{
  font-size:clamp(2.4rem,1.4rem + 3.4vw,4.2rem); line-height:1.05; max-width:16ch;
}
.pagehead .lede{ margin-top:1.5rem; max-width:56ch; color:var(--ink-2); }

/* ============================================================
   SECTION FURNITURE
   ============================================================ */
.eyebrow{
  font-family:var(--ui); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:.9rem; margin-bottom:1.6rem;
}
.eyebrow::after{ content:''; height:1px; flex:0 1 clamp(2rem,6vw,5rem);
  background:linear-gradient(90deg,var(--accent),transparent); }

.title{ position:relative; text-wrap:balance;
  font-size:clamp(1.95rem,1.2rem + 2.5vw,3.15rem);
  line-height:1.07; margin-bottom:1.2rem; padding-bottom:.55rem; }
.title::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:clamp(48px,7vw,96px);
  background:linear-gradient(90deg,var(--accent),transparent);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 1.1s var(--out) .35s;
}
.title.in::after{ transform:scaleX(1); }
.lede{ max-width:48ch; color:var(--ink-3); font-size:clamp(1.02rem,.99rem + .2vw,1.16rem); }

.split .wd{ display:inline-block; white-space:nowrap; }
.split .c{ display:inline-block; transform:translateY(.85em); opacity:0; }
.split.in .c{ transform:none; opacity:1; transition:transform .95s var(--out), opacity .95s var(--out); }

[data-rise]{ opacity:0; transform:translateY(26px); }
[data-rise].in{ opacity:1; transform:none; transition:opacity 1s var(--out), transform 1s var(--out); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.75rem;
  font-family:var(--ui); font-size:.77rem; letter-spacing:.18em; text-transform:uppercase;
  padding:1.12rem 2.25rem; border:0; border-radius:2px; cursor:pointer;
  background:var(--accent); color:#fff; position:relative; overflow:hidden;
  box-shadow:0 2px 4px rgba(11,27,46,.08), 0 16px 34px -18px var(--accent);
  transition:box-shadow .5s var(--ease); will-change:transform;
}
.btn::before{ content:''; position:absolute; inset:0; z-index:0; background:var(--ink);
  transform:translateY(101%); transition:transform .55s var(--out); }
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ box-shadow:0 4px 8px rgba(11,27,46,.10), 0 26px 48px -22px var(--ink); }
.btn > *{ position:relative; z-index:1; }
.btn svg{ transition:transform .45s var(--ease); }
.btn:hover svg{ transform:translateX(5px); }
.hero .btn{ margin-top:clamp(2.1rem,4vw,3rem); }

/* ============================================================
   FOCUS
   ============================================================ */
.focus-grid{ margin-top:clamp(3rem,6vw,5rem); display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); }
.f{ position:relative; padding:clamp(2.1rem,3.4vw,3.3rem) clamp(1.4rem,2.6vw,2.9rem);
  border-right:1px solid var(--line);
  transition:background-color .6s var(--ease), opacity .5s var(--ease); }
.f:first-child{ padding-left:0; } .f:last-child{ border-right:0; padding-right:0; }
.f::before{ content:''; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));
  transform:scaleX(0); transform-origin:left center; transition:transform .7s var(--out); }
.f:hover::before{ transform:scaleX(1); }
.f:hover{ background:linear-gradient(180deg,rgba(47,111,224,.045),transparent); }
@media (hover:hover){
  .focus-grid:hover .f{ opacity:.42; }
  .focus-grid:hover .f:hover{ opacity:1; }
}
.f .ic{ color:var(--accent); margin-bottom:1.6rem; display:block; transition:transform .6s var(--out); }
.f:hover .ic{ transform:translateY(-5px); }
.f h3{ font-size:1.34rem; line-height:1.26; margin-bottom:.9rem; }
.f p{ color:var(--ink-3); font-size:.97rem; }
.f .go{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.4rem;
  font-family:var(--ui); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); opacity:0; transform:translateX(-6px);
  transition:opacity .5s var(--ease), transform .5s var(--out);
}
@media (hover:hover){ .f:hover .go{ opacity:1; transform:none; } }
@media (hover:none){ .f .go{ opacity:.75; transform:none; } }
@media (max-width:840px){
  .focus-grid{ grid-template-columns:1fr; }
  .f{ border-right:0; border-bottom:1px solid var(--line); padding-inline:0; }
  .f:last-child{ border-bottom:0; }
}

/* ============================================================
   ABOUT + APERTURE PANEL
   ============================================================ */
.about{ background:var(--porcelain); }
.about-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
  gap:clamp(2.5rem,5vw,4.5rem); align-items:center; }
.about p + p{ margin-top:1.45rem; }
.kicker{ font-family:var(--display); font-size:clamp(1.3rem,1.08rem + .85vw,1.7rem);
  color:var(--accent); line-height:1.34; margin-bottom:1.9rem; }

.aperture-panel{
  position:relative; aspect-ratio:1; width:100%;
  max-width:440px; min-width:280px; margin-left:auto; border-radius:4px; overflow:hidden; 
  background:
    radial-gradient(80% 70% at 50% 32%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
    linear-gradient(160deg,#FFFFFF 0%,#F1F6FD 50%,#E2ECFA 100%);
  border:1px solid var(--line);
  box-shadow:0 40px 80px -60px rgba(11,27,46,.5);
  display:grid; place-items:center; will-change:transform;
}
.aperture-panel svg{ width:82%; height:82%; overflow:visible; pointer-events:none; }
.ap-ring{ fill:none; stroke:var(--accent); stroke-linecap:round;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 2.2s var(--out); }
.aperture-panel.in .ap-ring{ stroke-dashoffset:0; }
.aperture-panel svg > circle:nth-of-type(2){
  transform-origin:50% 50%; animation:turn 160s linear infinite;
}
.aperture-panel svg > circle:nth-of-type(4){
  transform-origin:50% 50%; animation:turn 240s linear infinite reverse;
}
@keyframes turn{ to{ transform:rotate(360deg); } }
.ap-mark{ position:absolute; width:26%; opacity:0; transform:scale(.9); pointer-events:none;
  transition:opacity 1.2s var(--out) .9s, transform 1.2s var(--out) .9s; }
.aperture-panel.in .ap-mark{ opacity:1; transform:none; }
.ap-cap{
  position:absolute; bottom:clamp(1rem,2.4vw,1.8rem); left:0; right:0; text-align:center;
  font-family:var(--ui); font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-3); opacity:0; transition:opacity 1s var(--out) 1.5s; pointer-events:none;
}
.aperture-panel.in .ap-cap{ opacity:1; }
.about-note{ margin-top:clamp(2.6rem,5vw,4rem); padding-top:clamp(2rem,4vw,2.9rem);
  border-top:1px solid var(--line); color:var(--ink-3); max-width:74ch; }
@media (max-width:880px){
  .about-grid{ grid-template-columns:1fr; }
  .aperture-panel{ order:-1; max-width:360px; margin-inline:auto; width:100%; }
}

/* ============================================================
   CRITERIA
   ============================================================ */
.crit{ margin-top:clamp(3rem,6vw,5rem); display:grid; grid-template-columns:1fr 1fr;
  column-gap:clamp(2rem,5vw,5rem); }
.c{ padding-block:clamp(2rem,3.2vw,2.9rem); border-top:1px solid var(--line);
  display:grid; grid-template-columns:auto 1fr; column-gap:1.6rem; align-items:start;
  border-radius:2px; transition:background-color .5s var(--ease), padding-left .5s var(--out); }
@media (hover:hover){
  .c:hover{ background:linear-gradient(90deg,rgba(47,111,224,.05),transparent 70%); padding-left:.9rem; }
}
.c .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); margin-top:.78rem;
  transition:transform .6s var(--out), box-shadow .6s var(--out); }
.c:hover .dot{ transform:scale(1.65); box-shadow:0 0 0 6px rgba(47,111,224,.13); }
.c h3{ font-size:1.24rem; margin-bottom:.55rem; }
.c p{ color:var(--ink-3); font-size:.97rem; }
@media (max-width:780px){ .crit{ grid-template-columns:1fr; } }

/* ============================================================
   FORMS
   ============================================================ */
.submit{ background:var(--mist); }
.submit-grid{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2.5rem,6vw,6rem); align-items:start; }
.card{ background:#fff; border:1px solid var(--line); border-radius:4px;
  padding:clamp(1.7rem,3.4vw,3rem); box-shadow:0 50px 90px -70px rgba(11,27,46,.6); }
.field{ margin-bottom:1.4rem; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
@media (max-width:560px){ .row2{ grid-template-columns:1fr; } }
label{ display:block; font-family:var(--ui); font-size:.69rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); margin-bottom:.6rem; }
label .rq{ color:var(--accent); }
input[type=text],input[type=email],input[type=url],textarea{
  width:100%; font-family:var(--body); font-size:.97rem; color:var(--ink);
  background:#fff; border:1px solid var(--line-2); border-radius:2px; padding:.86rem 1rem;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
input::placeholder,textarea::placeholder{ color:#A5B3C6; }
input:focus,textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(47,111,224,.14); }
textarea{ resize:vertical; min-height:120px; }
.stages{ display:flex; flex-wrap:wrap; gap:.6rem; }
.stage{ position:relative; font-family:var(--ui); font-size:.79rem; letter-spacing:.04em;
  color:var(--ink-2); border:1px solid var(--line-2); border-radius:99px;
  padding:.55rem 1.1rem; cursor:pointer; margin:0; text-transform:none;
  transition:all .35s var(--ease); }
.stage input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.stage:hover{ border-color:var(--accent); color:var(--accent); }
.stage:has(input:checked){ background:var(--ink); border-color:var(--ink); color:#fff; }
.card .btn{ width:100%; justify-content:center; margin-top:.7rem; }
.fine{ margin-top:1.15rem; font-size:.8rem; color:var(--ink-3); text-align:center; }
.fine a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; }
.status{ margin-top:1rem; font-size:.87rem; color:var(--accent-deep); text-align:center; min-height:1.2em; }
.status.err{ color:#C2410C; }

.meter{ margin-bottom:1.6rem; }
.meter-top{ display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--ui); font-size:.63rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:.5rem; }
.meter-top b{ color:var(--accent); font-weight:400; }
.meter-bar{ height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.meter-bar i{ display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));
  transition:width .6s var(--out); }
@media (max-width:920px){ .submit-grid{ grid-template-columns:1fr; } }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2.5rem,6vw,6rem); align-items:start; }
@media (max-width:920px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-detail{ margin-top:2.4rem; padding-top:2rem; border-top:1px solid var(--line); }
.contact-detail dt{ font-family:var(--ui); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:.5rem; }
.contact-detail dd{ margin:0 0 1.7rem; font-size:1.06rem; color:var(--ink); }
.contact-detail a{ color:var(--ink); border-bottom:1px solid var(--line-2);
  transition:color .35s var(--ease), border-color .35s var(--ease); }
.contact-detail a:hover{ color:var(--accent); border-color:var(--accent); }

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal{ max-width:74ch; }
.legal h2{ font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem); margin:clamp(3rem,6vw,4.5rem) 0 1.2rem; }
.legal h2:first-child{ margin-top:0; }
.legal p{ margin-bottom:1.3rem; color:var(--ink-2); }
.legal .muted{ color:var(--ink-3); font-size:.97rem; }
.rights{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,3vw,2.5rem); margin:2rem 0; }
.right{ border-top:1px solid var(--line); padding-top:1.6rem; }
.right h3{ font-size:1.12rem; margin-bottom:.6rem; }
.right p{ color:var(--ink-3); font-size:.95rem; margin:0; }
@media (max-width:700px){ .rights{ grid-template-columns:1fr; } }
.updated{ margin-top:clamp(3rem,6vw,4.5rem); padding-top:1.6rem;
  border-top:1px solid var(--line); font-size:.85rem; color:var(--ink-3); }

/* ============================================================
   GARDEN
   ============================================================ */
.garden{ position:relative; padding:0; overflow:hidden;
  height:clamp(250px,32vh,380px);
  background:linear-gradient(180deg,var(--mist) 0%,#DCE9FB 55%,#CBDDF7 100%);
  border-top:1px solid var(--line); }
.garden canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.garden-note{ position:absolute; top:clamp(1.2rem,3vw,2.2rem); left:0; right:0; text-align:center;
  font-family:var(--ui); font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-3); pointer-events:none; opacity:.75; z-index:2; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ position:relative; background:var(--ink); color:#9BAEC4;
  padding-block:clamp(3.8rem,7vw,6rem) 2.2rem; overflow:hidden; }
.footer::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 92% at 82% 0%, rgba(47,111,224,.24), transparent 70%); }
.footer .wrap{ position:relative; }
.f-grid{ display:grid; grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));
  gap:clamp(2rem,4vw,3.5rem); padding-bottom:clamp(2.6rem,5vw,4rem);
  border-bottom:1px solid rgba(255,255,255,.12); }
.footer .brand span{ color:#fff; }
.footer .brand img{ filter:brightness(0) invert(1); }
.f-brand p{ margin-top:1.4rem; max-width:38ch; font-size:.93rem; line-height:1.72; }
.f-col h4{ color:#fff; font-family:var(--ui); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; font-weight:400; margin-bottom:1.2rem; }
.f-col ul{ list-style:none; margin:0; padding:0; }
.f-col li + li{ margin-top:.78rem; }
.f-col a{ position:relative; color:#9BAEC4; font-size:.93rem; transition:color .4s var(--ease); }
.f-col a::after{ content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:rgba(255,255,255,.6); transform:scaleX(0); transform-origin:left center;
  transition:transform .45s var(--out); }
.f-col a:hover{ color:#fff; }
.f-col a:hover::after{ transform:scaleX(1); }
.copy{ display:inline-flex; align-items:center; gap:.55rem; background:none; border:0; padding:0;
  cursor:pointer; color:#9BAEC4; font-family:var(--body); font-size:.93rem;
  transition:color .4s var(--ease); }
.copy:hover{ color:#fff; }
.copy svg{ opacity:.5; transition:opacity .4s var(--ease); }
.copy:hover svg{ opacity:1; }
.f-bot{ padding-top:2rem; display:flex; flex-wrap:wrap; gap:1rem 2.5rem;
  justify-content:space-between; font-size:.8rem; color:#7488A0; }
.f-bot p{ max-width:74ch; line-height:1.62; }
@media (max-width:900px){ .f-grid{ grid-template-columns:1fr 1fr; } .f-brand{ grid-column:1/-1; } }
@media (max-width:540px){ .f-grid{ grid-template-columns:1fr; } }

/* ============================================================
   CHROME
   ============================================================ */
.progress{ position:fixed; top:0; left:0; height:2px; z-index:95; width:100%;
  transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));
  transition:transform .1s linear; }
.rail{ position:fixed; right:clamp(.9rem,2vw,1.9rem); top:50%; translate:0 -50%;
  z-index:70; display:flex; flex-direction:column; gap:.95rem;
  opacity:0; transition:opacity .6s var(--ease); }
.rail.on{ opacity:1; }
.rail button{ width:26px; height:10px; border:0; background:none; cursor:pointer; padding:0;
  display:grid; place-items:center; }
.rail button i{ display:block; width:100%; height:1px; background:var(--line-2);
  transition:background-color .45s var(--ease), transform .45s var(--ease);
  transform:scaleX(.5); transform-origin:right center; }
.rail button:hover i{ transform:scaleX(.85); background:var(--ink-3); }
.rail button[aria-current] i{ transform:scaleX(1); background:var(--accent); }
@media (max-width:900px){ .rail{ display:none; } }

.top{ position:fixed; right:clamp(1rem,2.5vw,2.2rem); bottom:clamp(1rem,2.5vw,2.2rem);
  z-index:70; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line-2); background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px); cursor:pointer; display:grid; place-items:center;
  color:var(--ink); opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), visibility .5s,
             box-shadow .4s var(--ease), border-color .4s var(--ease); }
.top.on{ opacity:1; visibility:visible; transform:none; }
.top:hover{ border-color:var(--accent); color:var(--accent); box-shadow:0 12px 26px -14px var(--accent); }

.toast{ position:fixed; left:50%; bottom:2rem; translate:-50% 0; z-index:500;
  background:var(--ink); color:#fff; font-family:var(--ui);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.85rem 1.5rem; border-radius:99px;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s; }
.toast.on{ opacity:1; visibility:visible; transform:none; }

/* ============================================================
   A11Y
   ============================================================ */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
.skip{ position:absolute; left:-9999px; background:var(--ink); color:#fff;
  padding:.8rem 1.2rem; z-index:999; }
.skip:focus{ left:.8rem; top:.8rem; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .hero h1 .w i{ transform:none !important; }
  .hero-sub,.hero-cta,.hint{ opacity:1 !important; transform:none !important; }
  .split .c,[data-rise]{ opacity:1 !important; transform:none !important; }
  .ap-ring{ stroke-dashoffset:0 !important; }
  .ap-mark,.ap-cap{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   PAGE TRANSITIONS
   ============================================================ */
.veil{
  position:fixed; inset:0; z-index:950; pointer-events:none;
  background:var(--paper); opacity:0;
  transition:opacity .42s var(--ease);
}
.veil.on{ opacity:1; pointer-events:all; }

/* ============================================================
   LEGAL PAGES - sticky contents
   ============================================================ */
.legal-layout{
  display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5.5rem); align-items:start;
}
.toc{ position:sticky; top:clamp(6rem,12vh,8rem); }
.toc h4{
  font-family:var(--ui); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3); font-weight:400; margin-bottom:1.1rem;
}
.toc ul{ list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
.toc li a{
  display:block; padding:.6rem 0 .6rem 1.1rem; margin-left:-1px;
  border-left:1px solid transparent;
  font-size:.9rem; color:var(--ink-3);
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.toc li a:hover{ color:var(--ink); }
.toc li a[aria-current]{ color:var(--accent); border-left-color:var(--accent); }
@media (max-width:900px){
  .legal-layout{ grid-template-columns:1fr; }
  .toc{ position:static; margin-bottom:2.5rem; }
  .toc ul{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; border-left:0; }
  .toc li a{ padding:.3rem 0; margin-left:0; border-left:0; }
}
.legal h2{ scroll-margin-top:7rem; }

/* ============================================================
   HERO EYEBROW
   ============================================================ */
.hero-eyebrow{
  font-family:var(--ui); font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1.6rem; display:flex; align-items:center; gap:.9rem;
  opacity:0; transform:translateY(12px);
  transition:opacity .9s var(--out), transform .9s var(--out);
}
.hero-eyebrow{ justify-content:center; }
.hero-eyebrow::before{ content:''; width:clamp(24px,3vw,44px); height:1px; background:var(--accent); }
.hero-eyebrow::after{ content:''; width:clamp(24px,3vw,44px); height:1px; background:var(--accent); }
@media (max-width:900px){ .hero-eyebrow{ justify-content:center; } }

.hero-links{ display:flex; align-items:center; justify-content:center; gap:2rem; flex-wrap:wrap; }
@media (max-width:900px){ .hero-links{ justify-content:center; } }
.text-link{
  position:relative; font-family:var(--ui); font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);
  padding-block:.3rem; transition:color .4s var(--ease);
}
.text-link::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left center;
  transition:transform .45s var(--ease);
}
.text-link:hover{ color:var(--accent); }
.text-link:hover::after{ transform:scaleX(1); }

/* ============================================================
   404
   ============================================================ */
.nf{ min-height:80vh; display:grid; place-items:center; text-align:center; }
.nf .code{
  font-family:var(--display); font-size:clamp(4rem,14vw,9rem);
  line-height:1; color:var(--wash); margin-bottom:1rem;
}

/* ============================================================
   MOBILE HERO TUNING
   ============================================================ */
@media (max-width:900px){
  .hero{ min-height:92svh; }
  .hero-in{ padding-block:8rem 5rem; }
}

/* ============================================================
   PRINT  (legal pages get sent to lawyers)
   ============================================================ */
@media print{
  .header,.footer,.garden,.progress,.rail,.top,.toast,.toc,.loader,.veil{ display:none !important; }
  body{ color:#000; background:#fff; font-size:11pt; }
  .pagehead{ padding-block:0 1.5rem; background:none; border-bottom:1px solid #ccc; }
  .pagehead .mark{ display:none; }
  .legal-layout{ display:block; }
  a{ color:#000; text-decoration:underline; }
}

/* honeypot - hidden from people, visible to bots */
.hp{ position:absolute!important; left:-9999px!important; opacity:0; height:0; overflow:hidden; }


/* ============================================================
   REFINEMENTS
   ============================================================ */

/* Long words in headings should hyphenate rather than overflow
   on narrow screens. */
h1,h2,h3{ overflow-wrap:break-word; }

/* Selection picks up the brand colour. */
::selection{ background:rgba(47,111,224,.18); color:var(--ink); }

/* Links inside body copy get a considered underline. */
.legal p a, .about p a, .lede a{
  color:var(--ink); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
  text-decoration-color:var(--line-2);
  transition:text-decoration-color .35s var(--ease), color .35s var(--ease);
}
.legal p a:hover, .about p a:hover, .lede a:hover{
  color:var(--accent); text-decoration-color:var(--accent);
}

/* Images never jump the layout while loading. */
img{ height:auto; }

/* Focus rings should not be clipped by rounded cards. */
.card, .aperture-panel{ isolation:isolate; }

/* On very wide screens the hero copy should not drift too far apart. */
@media (min-width:1600px){
  .hero h1{ max-width:16ch; }
}