@font-face{
  font-family:"Archivo";
  src:url("../fonts/Archivo-VariableFont_wdth,wght.woff2") format("woff2-variations"),
      url("../fonts/Archivo-VariableFont_wdth,wght.woff2") format("woff2");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Manrope";
  src:url("../fonts/Manrope-VariableFont_wght.woff2") format("woff2-variations"),
      url("../fonts/Manrope-VariableFont_wght.woff2") format("woff2");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}
:root{
  --paper:#04060F;
  --paper-2:#080E1E;
  --ink:#EDF2FB;
  --ink-soft:#98A5BB;
  --blue:#2F6BFF;
  --blue-deep:#5C8CFF;
  --blue-tint:#0B1533;
  --dark:#070B16;
  --line:rgba(237,242,251,.15);
  --line-dark:rgba(255,255,255,.16);
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Manrope","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(20px,5vw,62px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-weight:300;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);margin:0;line-height:.95;letter-spacing:-.02em}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.eyebrow{
  font-family:var(--display);font-size:12px;font-weight:700;
  letter-spacing:.34em;text-transform:uppercase;color:var(--blue);
  margin:0 0 22px;display:flex;align-items:center;gap:14px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line);max-width:160px}
.on-dark .eyebrow::after{background:var(--line-dark)}
/* ---------- silver: metal fill + glitter, all CSS, no images ---------- */
.metal{
  background:linear-gradient(102deg,
    #6B7A93 0%, #C9D4E6 12%, #FFFFFF 20%, #97A6BF 31%,
    #59687F 42%, #E9EFF9 54%, #FFFFFF 60%, #8C9BB4 72%,
    #566578 84%, #C9D4E6 94%, #6B7A93 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sweep 11s linear infinite;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 2px 12px rgba(10,14,24,.18));
}
.metal-light{
  background:linear-gradient(102deg,
    #9FB0CC 0%, #FFFFFF 14%, #D6E0F0 26%, #8FA0BC 38%,
    #FFFFFF 52%, #B9C7DE 66%, #FFFFFF 78%, #9FB0CC 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sweep 11s linear infinite;
}
@keyframes sweep{to{background-position:-280% 0}}
.sparkle-field{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.spark{
  position:absolute;
  clip-path:polygon(50% 0%,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0% 50%,42% 42%);
  animation:twinkle 5.5s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{opacity:0;transform:scale(.35) rotate(0deg)}
  45%{opacity:1;transform:scale(1) rotate(22deg)}
  70%{opacity:.25;transform:scale(.7) rotate(34deg)}
}
.glitter-rule{
  height:2px;width:100%;margin:0;border:0;position:relative;
  background:linear-gradient(90deg,transparent,#B7C4DA 12%,#6F7E97 50%,#B7C4DA 88%,transparent);
}
.glitter-rule::after{
  content:"";position:absolute;left:0;right:0;top:-3px;height:8px;
  background:
    radial-gradient(1.6px 1.6px at 6% 50%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 17% 30%,#DDE6F5,transparent),
    radial-gradient(1.8px 1.8px at 29% 70%,#fff,transparent),
    radial-gradient(1.3px 1.3px at 41% 35%,#A9B8D0,transparent),
    radial-gradient(1.7px 1.7px at 54% 65%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 68% 30%,#DDE6F5,transparent),
    radial-gradient(1.9px 1.9px at 79% 62%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 92% 40%,#A9B8D0,transparent);
  animation:shimmer 3.4s ease-in-out infinite;
}
@keyframes shimmer{0%,100%{opacity:.35}50%{opacity:1}}
.btn{
  display:inline-block;font-family:var(--display);font-weight:700;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  padding:17px 34px;border:1px solid var(--ink);color:var(--ink);background:transparent;
  transition:background .3s,border-color .3s,color .3s;
}
.btn:hover{background:var(--ink);color:#fff}
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
.on-dark .btn{border-color:var(--line-dark);color:#fff}
.on-dark .btn:hover{background:#fff;color:var(--ink)}
.on-dark .btn-primary{background:var(--blue);border-color:var(--blue)}
.on-dark .btn-primary:hover{background:#fff;border-color:#fff;color:var(--ink)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s ease,transform 1s ease}
.reveal.in{opacity:1;transform:none}
/* ---------- header ---------- */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gutter);transition:background .4s,padding .4s,box-shadow .4s;
}
.site-head .mark,.site-head .nav a:not(.btn){color:#fff}
.site-head.stuck{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  padding:14px var(--gutter);box-shadow:0 1px 0 var(--line)}
.site-head.stuck .mark,.site-head.stuck .nav a:not(.btn){color:var(--ink)}
.mark{font-family:var(--display);font-weight:800;font-size:16px;
  letter-spacing:.3em;text-transform:uppercase;text-decoration:none;transition:color .4s}
.nav{display:flex;align-items:center;gap:34px}
.nav a{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;transition:color .4s,opacity .3s;opacity:.85}
.nav a:hover{opacity:1}
.nav .btn{padding:12px 22px;font-size:11px;color:#fff}
@media(max-width:860px){.nav a:not(.btn){display:none}}
.hero-inner{position:relative;width:100%;padding-bottom:clamp(56px,9vw,110px)}
/* ---------- marquee ---------- */
.marquee{
  border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);
  overflow:hidden;padding:20px 0;background:#0A1024;
}
.marquee-track{display:flex;align-items:center;gap:clamp(20px,3vw,44px);
  width:max-content;animation:slide 38s linear infinite}
.marquee-track span{font-family:var(--display);font-weight:700;font-size:clamp(15px,2.1vw,24px);
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(102deg,#9FB0CC 0%,#FFFFFF 14%,#D6E0F0 26%,#8FA0BC 38%,
    #FFFFFF 52%,#B9C7DE 66%,#FFFFFF 78%,#9FB0CC 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sweep 11s linear infinite}
.marquee-track .spark{position:relative;flex:none;
  width:clamp(11px,1.7vw,18px);height:clamp(11px,1.7vw,18px)}
@keyframes slide{to{transform:translateX(-50%)}}
.about-photo{position:relative}
.about p{margin:0 0 20px;max-width:56ch;color:var(--ink-soft)}
.fact-k{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.fact-v{font-family:var(--display);font-size:19px;font-weight:600}
.corp-bg{position:absolute;inset:0}
.corp-inner{position:relative;max-width:620px}
.corp ul{list-style:none;margin:32px 0 38px;padding:0}
.corp li{padding:14px 0 14px 30px;border-bottom:1px solid rgba(255,255,255,.32);box-shadow:0 1px 0 rgba(0,0,0,.55);position:relative}
.corp li::before{content:"";position:absolute;left:2px;top:23px;width:8px;height:8px;
  background:var(--blue);transform:rotate(45deg);box-shadow:0 0 14px rgba(30,91,255,.9)}
.book h2{font-size:clamp(40px,7vw,108px);font-weight:900;font-stretch:110%;text-transform:uppercase;margin-bottom:22px}
.book p{max-width:52ch;margin:0 auto 46px;color:var(--ink-soft)}
.book .eyebrow{justify-content:center}
.book .eyebrow::after{display:none}
.book .wrap{position:relative;z-index:2}
.contact-lines a:hover{color:var(--blue)}
.socials a{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);opacity:.65;transition:opacity .3s,color .3s}
.socials a:hover{opacity:1;color:var(--blue)}
.copy{font-size:12px;color:var(--ink-soft);letter-spacing:.06em}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
/* ---------- motion toggle ----------
   A visible, always-available control to pause the site's continuous
   animations (sparkles, the metallic sweep, the marquee) and, on pages
   that have one, the background video. Required for WCAG 2.2.2 (moving
   content that runs longer than five seconds needs a pause control) on
   top of prefers-reduced-motion, which only covers visitors who already
   set that OS/browser preference. Hidden when prefers-reduced-motion is
   already honoured, since there is nothing left to pause. */
.motion-toggle{
  position:fixed;left:20px;bottom:20px;z-index:40;
  width:44px;height:44px;border-radius:50%;
  background:rgba(4,6,15,.72);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:#fff;cursor:pointer;backdrop-filter:blur(6px);
  transition:background .2s,transform .2s;
}
.motion-toggle:hover,.motion-toggle:focus-visible{background:rgba(4,6,15,.92);transform:scale(1.06)}
.motion-toggle svg{width:18px;height:18px;fill:currentColor;display:block}
.motion-toggle .icon-play{display:none}
.motion-toggle.paused .icon-pause{display:none}
.motion-toggle.paused .icon-play{display:block}
html.motion-paused *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.motion-toggle{display:none}}
/* ---------- dark theme adjustments ---------- */
.site-head.stuck{background:rgba(4,6,15,.9);box-shadow:0 1px 0 var(--line)}
.btn:hover{background:var(--ink);color:#04060F}
.btn-primary:hover{background:#fff;border-color:#fff;color:#04060F}
.metal{
  background:linear-gradient(102deg,#9FB0CC 0%,#FFFFFF 14%,#D6E0F0 26%,#8FA0BC 38%,
    #FFFFFF 52%,#B9C7DE 66%,#FFFFFF 78%,#9FB0CC 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:none;
}
.contact-lines a:hover{color:#fff}
.socials a:hover{color:#fff}
/* ---------- mobile refinements ---------- */
.nav-toggle{display:none;background:none;border:0;padding:10px;margin:0;cursor:pointer;
  color:inherit;line-height:0}
.nav-toggle span{display:block;width:24px;height:2px;background:currentColor;margin:5px 0;
  transition:transform .3s,opacity .3s}
.site-head.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-head.open .nav-toggle span:nth-child(2){opacity:0}
.site-head.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-panel{position:fixed;inset:0;z-index:45;background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:0 var(--gutter);opacity:0;visibility:hidden;transition:opacity .3s;}
.nav-panel.open{opacity:1;visibility:visible}
.nav-panel a{font-family:var(--display);font-size:clamp(28px,8vw,44px);font-weight:800;
  text-transform:uppercase;text-decoration:none;color:var(--ink);padding:10px 0;
  border-bottom:1px solid var(--line)}
.nav-panel a:last-child{border-bottom:0;color:var(--blue)}
@media(max-width:860px){
  .nav-toggle{display:block}
  .site-head.open .mark,.site-head.open .nav-toggle{color:var(--ink);position:relative;z-index:60}
  .nav .btn{display:none}
}
@media(max-width:420px){
  .marquee-track{gap:16px}
  .nav-panel a{font-size:26px}
}
/* ---------- language switcher ---------- */
.lang{display:flex;align-items:center;gap:8px;margin-left:6px}
.lang a{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-decoration:none;opacity:.6;transition:opacity .3s}
.lang a:hover{opacity:1}
.lang a.on{opacity:1;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.lang span{opacity:.4;font-size:11px}
.nav-panel .lang{margin:26px 0 0;gap:14px}
.nav-panel .lang a{font-size:15px;letter-spacing:.2em;color:var(--ink)}
@media(max-width:860px){.nav>.lang{display:none}}
/* ---------- AJ monogram in header ---------- */

/* ---------- two-line mark (Anna / Jois), approved version ---------- */
.mark-stack{display:flex;align-items:center;gap:22px}
.mark-stack .stack-text{display:flex;flex-direction:column;line-height:1;
  font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:.3em;
  text-transform:uppercase}
.mark-stack .stack-text span{display:block}
.mark-stack .stack-text span:last-child{margin-top:7px}
.mark-stack .mark-icon-big{height:54px;width:54px;object-fit:contain;flex:none}
@media(max-width:700px){
  .mark-stack .mark-icon-big{height:44px;width:44px}
}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px}