*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  background:var(--sky-50);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.12;margin:0;letter-spacing:-.02em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--teal-deep);outline-offset:3px;border-radius:6px}
::selection{background:rgba(34,184,180,.28);color:var(--brand-deep)}

/* ===== scrollbar ===== */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--sky-100)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--brand),var(--teal));
  border-radius:99px;border:2px solid var(--sky-100);
}

/* ===== layout ===== */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:24px}
.section{position:relative;padding:clamp(72px,9vw,132px) 0}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== background video stage ===== */
.stage{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--sky-100)}
.stage__video{
  position:absolute;top:50%;left:50%;
  width:100%;height:100%;
  transform:translate(-50%,-50%) scale(1.06);
  object-fit:cover;
  /* kept clear and bright — the gradient veil does the work */
  filter:saturate(1) contrast(1.02) brightness(1.04);
  animation:stageDrift 44s var(--ease) infinite alternate;
}
@keyframes stageDrift{
  from{transform:translate(-50%,-50%) scale(1.04)}
  to{transform:translate(-50%,-51.5%) scale(1.13)}
}
.stage__veil{position:absolute;inset:0}
/* blue at the top, dissolving into white at the bottom */
.stage__veil--tint{
  background:linear-gradient(180deg,
    rgba(7,42,80,.72) 0%,
    rgba(18,74,132,.55) 13%,
    rgba(74,140,196,.40) 28%,
    rgba(160,205,232,.40) 45%,
    rgba(226,241,251,.52) 64%,
    rgba(250,253,255,.64) 84%,
    rgba(255,255,255,.72) 100%);
}
.stage__veil--glow{
  background:
    radial-gradient(56% 44% at 80% 12%,rgba(34,184,180,.26),transparent 70%),
    radial-gradient(50% 40% at 10% 74%,rgba(255,255,255,.42),transparent 72%),
    radial-gradient(42% 36% at 52% 52%,rgba(224,199,126,.10),transparent 74%);
}
.stage__veil--grain{
  opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.stage__veil--vign{box-shadow:inset 0 0 200px 70px rgba(255,255,255,.30)}

/* pointer halo */
.halo{
  position:fixed;z-index:-1;width:520px;height:520px;left:0;top:0;
  border-radius:50%;pointer-events:none;opacity:0;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,255,255,.34),rgba(255,255,255,0) 62%);
  transition:opacity .6s ease;
}
body.has-pointer .halo{opacity:1}

/* ===== preloader ===== */
.preload{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  background:linear-gradient(170deg,#0B3563 0%,#1B6AAE 34%,#8FC3E2 66%,#FFFFFF 100%);
}
.preload__panels{position:absolute;inset:0;pointer-events:none}
.preload__panels i{
  position:absolute;left:0;width:100%;height:50.5%;
  transition:transform 1s var(--ease-out);
}
.preload__panels i:first-child{top:0;background:linear-gradient(180deg,#0B3563,#5D9FCB)}
.preload__panels i:last-child{bottom:0;background:linear-gradient(180deg,#5D9FCB,#FFFFFF)}
body.is-revealing .preload__panels i:first-child{transform:translateY(-101%)}
body.is-revealing .preload__panels i:last-child{transform:translateY(101%)}

.preload__inner{
  position:relative;z-index:2;
  display:grid;justify-items:center;gap:24px;
  padding:clamp(28px,4vw,48px) clamp(30px,5vw,62px);
  border-radius:var(--r-xl);
  background:linear-gradient(158deg,rgba(255,255,255,.92),rgba(255,255,255,.74));
  border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 40px 90px -40px rgba(6,32,62,.6),var(--inset);
  transition:opacity .5s ease,transform .8s var(--ease-out);
}
.preload__tile{
  position:relative;
  width:min(300px,64vw);
  animation:markIn 1.15s var(--ease-out) both;
}
.preload__tile img{position:relative;z-index:2;width:100%}
.preload__sweep{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);
  background-size:280% 100%;
  background-position:150% 0;
  animation:sweep 1.6s .5s var(--ease) 2;
}
@keyframes markIn{
  from{opacity:0;transform:scale(.86) translateY(12px);filter:blur(7px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes sweep{from{background-position:150% 0}to{background-position:-150% 0}}

.preload__rule{
  width:min(260px,54vw);height:1px;
  background:linear-gradient(90deg,transparent,rgba(185,143,53,.9),transparent);
  opacity:0;animation:wordUp .7s .7s var(--ease-out) both;
}
.preload__word{display:grid;justify-items:center;text-align:center;max-width:min(340px,74vw)}
.preload__word span{
  display:block;font-family:var(--f-display);
  opacity:0;animation:wordUp .8s var(--ease-out) both;
}
.preload__word .pw1{
  font-size:11px;letter-spacing:.4em;text-indent:.4em;
  color:var(--teal-deep);font-weight:600;animation-delay:.5s;
}
.preload__word .pw2{
  font-size:clamp(10.5px,2.4vw,15px);font-weight:500;line-height:1.6;
  letter-spacing:.16em;text-indent:.16em;
  color:var(--brand);animation-delay:.62s;margin-top:6px;
}
@keyframes wordUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.preload__bar{
  width:min(210px,48vw);height:2px;border-radius:99px;
  background:rgba(20,80,140,.16);overflow:hidden;
}
.preload__bar i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--brand),var(--teal),var(--gold));
  animation:barFill 1.75s .25s var(--ease) forwards;
}
@keyframes barFill{to{width:100%}}
.preload__skip{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;
  font-size:11px;letter-spacing:.26em;color:rgba(11,53,99,.55);
  opacity:0;animation:wordUp .6s 1.6s ease both;
}

body.is-revealing .preload__inner{opacity:0;transform:scale(.94) translateY(-8px)}
body.is-loaded .preload{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease .55s,visibility 0s .95s}

/* page entrance */
body.is-loading .page{opacity:0}
.page{opacity:1;transition:opacity .8s ease .1s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .stage__video{animation:none;transform:translate(-50%,-50%) scale(1.02)}
}