/* ==========================================================================
   DESIGN TO 3D — Imagination to Reality
   core.css — tokens, reset, typography, layout, buttons, utilities
   Brand: navy #0F4B8A · orange #EA6301
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* brand */
  --navy:#0F4B8A;
  --navy-lt:#1E6BB8;
  --navy-glow:#3B93E0;
  --orange:#EA6301;
  --orange-lt:#FF7F26;
  --orange-deep:#C64F00;

  /* surfaces */
  --bg:#05080E;
  --bg-2:#080D16;
  --bg-3:#0B1421;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --paper:#F3EFE8;
  --paper-2:#E8E2D7;
  --ink:#0A0F16;

  /* text */
  --tx:#EDF1F6;
  --tx-2:#A7B4C4;
  --tx-3:#6C7C90;

  /* type */
  --f-display:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --f-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-serif:'Instrument Serif',Georgia,serif;
  --f-mono:'JetBrains Mono','SF Mono',ui-monospace,Consolas,monospace;

  /* metrics */
  --shell:1320px;
  --gut:clamp(20px,5vw,64px);
  --r:14px;
  --r-lg:22px;

  /* motion */
  --e:cubic-bezier(.22,1,.36,1);
  --e-io:cubic-bezier(.65,0,.35,1);

  --nav-h:82px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:var(--f-body);
  font-size:16.5px;
  line-height:1.68;
  font-weight:340;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--orange);color:#fff}
:focus-visible{outline:2px solid var(--orange-lt);outline-offset:3px;border-radius:4px}

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5{
  font-family:var(--f-display);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.035em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(2.7rem,6.1vw,5.15rem)}
h2{font-size:clamp(2.05rem,4.5vw,3.8rem)}
h3{font-size:clamp(1.32rem,2vw,1.8rem);letter-spacing:-.025em;line-height:1.16}
h4{font-size:1.1rem;letter-spacing:-.015em;line-height:1.32}
p{margin:0 0 1.15em;color:var(--tx-2)}
p:last-child{margin-bottom:0}
strong{font-weight:600;color:var(--tx)}
.serif{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.serif-o{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--orange-lt);letter-spacing:-.02em}

.eyebrow{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--f-mono);
  font-size:.68rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--orange-lt);
  margin:0 0 1.4rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6;flex:none}
.eyebrow.is-center{justify-content:center}
.eyebrow.is-center::after{content:"";width:26px;height:1px;background:currentColor;opacity:.6}

.lead{font-size:clamp(1.02rem,1.35vw,1.18rem);line-height:1.72;color:var(--tx-2);max-width:62ch}
.muted{color:var(--tx-3)}
.mono{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3)}
.tnum{font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.shell-wide{width:100%;max-width:1560px;margin-inline:auto;padding-inline:var(--gut)}
/* Sections clip their own decoration. The .glow pools are absolutely
   positioned with negative offsets, which otherwise pushed the document
   ~160px wider than the viewport on narrow screens. */
section{position:relative;overflow:hidden}
.sec{padding-block:clamp(78px,10vw,146px)}
.sec-sm{padding-block:clamp(52px,6vw,88px)}
.sec-head{margin-bottom:clamp(40px,5vw,70px)}
.sec-head.is-center{text-align:center;margin-inline:auto;max-width:760px}
.sec-head.is-center .lead{margin-inline:auto}
.sec-head-row{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:end}
@media (max-width:900px){.sec-head-row{grid-template-columns:1fr;align-items:start;gap:20px}}

.grid{display:grid;gap:clamp(16px,1.6vw,24px)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1040px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:660px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.bg-paper{background:var(--paper);color:var(--ink)}
.bg-paper h1,.bg-paper h2,.bg-paper h3,.bg-paper h4{color:var(--ink)}
.bg-paper p,.bg-paper .lead{color:#42515F}
.bg-paper .eyebrow{color:var(--orange-deep)}
.bg-paper .mono,.bg-paper .muted{color:#75828F}
.surface-2{background:var(--bg-2)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.bg-paper .rule{background:rgba(10,15,22,.12)}

/* --------------------------------------------------------------------------
   4. Ambient background art
   -------------------------------------------------------------------------- */
.blueprint{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(ellipse 110% 78% at 50% 34%,#000 8%,transparent 74%);
  mask-image:radial-gradient(ellipse 110% 78% at 50% 34%,#000 8%,transparent 74%);
}
.blueprint.is-dense{background-size:38px 38px}
.bg-paper .blueprint{
  background-image:
    linear-gradient(to right,rgba(15,75,138,.075) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(15,75,138,.075) 1px,transparent 1px);
}
/* Soft light pools. Built from gradients rather than filter:blur() — the blur
   filter allocates a large offscreen buffer per element and was measurably
   the most expensive thing on the page. */
.glow{position:absolute;pointer-events:none;z-index:0;border-radius:50%;opacity:.62}
.glow-navy{background:radial-gradient(circle closest-side,rgba(30,107,184,.5),rgba(30,107,184,.2) 42%,rgba(30,107,184,.06) 66%,transparent 82%)}
.glow-orange{background:radial-gradient(circle closest-side,rgba(234,99,1,.4),rgba(234,99,1,.16) 42%,rgba(234,99,1,.05) 66%,transparent 82%)}
.z1{position:relative;z-index:1}

/* --------------------------------------------------------------------------
   5. Buttons & links
   -------------------------------------------------------------------------- */
.btn{
  --btn-bg:var(--orange);
  --btn-tx:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.62em;
  padding:1.02em 1.85em;border:0;border-radius:100px;
  background:var(--btn-bg);color:var(--btn-tx);
  font-family:var(--f-display);font-size:.885rem;font-weight:600;letter-spacing:-.01em;
  line-height:1;cursor:pointer;overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:transform .5s var(--e),box-shadow .5s var(--e),border-color .35s ease;
  box-shadow:0 10px 34px -14px rgba(234,99,1,.85);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(105deg,var(--orange-lt),#FFA24D);
  transform:translateY(101%);transition:transform .58s var(--e);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 20px 44px -16px rgba(234,99,1,.9)}
.btn:hover::after{transform:translateY(0)}
.btn:active{transform:translateY(-1px)}
.btn .ico{transition:transform .45s var(--e)}
.btn:hover .ico{transform:translate(4px,-4px)}

.btn-ghost{--btn-bg:transparent;--btn-tx:var(--tx);border:1px solid var(--line-2);box-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-ghost::after{background:rgba(255,255,255,.09)}
.btn-ghost:hover{box-shadow:none;border-color:rgba(255,255,255,.34)}
.bg-paper .btn-ghost{--btn-tx:var(--ink);border-color:rgba(10,15,22,.18)}
.bg-paper .btn-ghost::after{background:rgba(10,15,22,.06)}

.btn-navy{--btn-bg:var(--navy);box-shadow:0 10px 34px -14px rgba(15,75,138,.9)}
.btn-navy::after{background:linear-gradient(105deg,var(--navy-lt),#3B93E0)}
.btn-navy:hover{box-shadow:0 20px 44px -16px rgba(30,107,184,.85)}

.btn-light{--btn-bg:#fff;--btn-tx:var(--ink);box-shadow:0 10px 34px -16px rgba(0,0,0,.6)}
.btn-light::after{background:var(--paper-2)}

.btn-sm{padding:.78em 1.35em;font-size:.8rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.tlink{
  display:inline-flex;align-items:center;gap:.55em;position:relative;padding-bottom:5px;
  font-family:var(--f-display);font-weight:600;font-size:.9rem;letter-spacing:-.01em;color:var(--tx);
}
.tlink::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;
  transform-origin:right;transform:scaleX(0);transition:transform .55s var(--e);
}
.tlink:hover::after{transform-origin:left;transform:scaleX(1)}
.tlink .ico{transition:transform .45s var(--e)}
.tlink:hover .ico{transform:translate(4px,-4px)}
.tlink.is-orange{color:var(--orange-lt)}
.bg-paper .tlink{color:var(--ink)}

.pill{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.5em 1em;border:1px solid var(--line);border-radius:100px;
  font-family:var(--f-mono);font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-2);background:rgba(255,255,255,.03);white-space:nowrap;
}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none}
.pill .dot.is-live{box-shadow:0 0 0 0 rgba(234,99,1,.65);animation:pulse 2.4s infinite}
.bg-paper .pill{border-color:rgba(10,15,22,.14);color:#4A5867;background:rgba(255,255,255,.6)}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(234,99,1,0)}100%{box-shadow:0 0 0 0 rgba(234,99,1,0)}}

/* --------------------------------------------------------------------------
   6. Scroll reveal
   -------------------------------------------------------------------------- */
[data-rev]{opacity:0;transform:translateY(28px);transition:opacity .95s var(--e),transform .95s var(--e)}
[data-rev="fade"]{transform:none}
[data-rev="left"]{transform:translateX(-34px)}
[data-rev="right"]{transform:translateX(34px)}
[data-rev="zoom"]{transform:scale(.955)}
[data-rev].is-in{opacity:1;transform:none}
.rev-mask{overflow:hidden;display:block}
.rev-mask > span{display:block;transform:translateY(102%);transition:transform 1s var(--e)}
.rev-mask.is-in > span{transform:none}

/* --------------------------------------------------------------------------
   7. Preloader & cursor
   -------------------------------------------------------------------------- */
.loader{
  position:fixed;inset:0;z-index:9999;background:var(--bg);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;
  transition:opacity .7s ease,visibility .7s ease;
  /* CSS-level failsafe: the curtain lifts even with JS disabled or stalled */
  animation:loaderBail .6s ease 3s forwards;
}
.loader.is-done{opacity:0;visibility:hidden;animation:none}
@keyframes loaderBail{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.loader{display:none}}
.loader img{width:72px;animation:floaty 3s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-9px)}}
.loader-bar{width:min(220px,50vw);height:2px;background:rgba(255,255,255,.11);overflow:hidden;border-radius:2px}
.loader-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--navy-lt),var(--orange))}
.loader-num{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.26em;color:var(--tx-3)}

/* Brand-coloured cursor. Deliberately NOT mix-blend-mode: difference — that
   forces the whole page into one composited layer and repaints it every frame,
   which measurably stalled rendering on this page. Orange reads on both the
   dark surfaces and the paper sections. */
.cur,.cur-d{position:fixed;top:0;left:0;pointer-events:none;z-index:9998;border-radius:50%;will-change:transform}
.cur{width:34px;height:34px;border:1.5px solid rgba(234,99,1,.9);transition:width .35s var(--e),height .35s var(--e),background .35s ease,border-color .35s ease}
.cur-d{width:6px;height:6px;background:var(--orange)}
.cur.is-hot{width:62px;height:62px;background:rgba(234,99,1,.13);border-color:rgba(234,99,1,.55)}
@media (hover:none),(max-width:900px){.cur,.cur-d{display:none}}

/* --------------------------------------------------------------------------
   8. Navigation
   -------------------------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;height:var(--nav-h);display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:height .45s var(--e),background .45s ease,border-color .45s ease,transform .5s var(--e);
}
.nav.is-stuck{height:66px;background:rgba(5,8,14,.82);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-bottom-color:var(--line)}
.nav.is-hidden{transform:translateY(-102%)}
.nav-in{width:100%;max-width:1560px;margin-inline:auto;padding-inline:var(--gut);display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:12px;flex:none;margin-right:auto}
.brand img{height:38px;width:auto;transition:height .45s var(--e)}
.nav.is-stuck .brand img{height:31px}
.brand-tx{display:flex;flex-direction:column;line-height:1;gap:5px}
.brand-tx b{font-family:var(--f-display);font-size:1rem;font-weight:700;letter-spacing:-.005em}
.brand-tx span{font-family:var(--f-mono);font-size:.545rem;letter-spacing:.235em;color:var(--tx-3);text-transform:uppercase}
@media (max-width:430px){.brand-tx{display:none}}

.nav-links{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav-links a{position:relative;display:block;padding:.6em .92em;border-radius:8px;font-size:.885rem;font-weight:450;color:var(--tx-2);transition:color .3s ease}
.nav-links a::after{content:"";position:absolute;left:.92em;right:.92em;bottom:.3em;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e)}
.nav-links a:hover{color:var(--tx)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-links a.is-active{color:var(--tx)}
.nav-links a.is-active::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:12px;flex:none}
@media (max-width:1120px){.nav-links,.nav-cta .btn{display:none}}

.burger{display:none;width:46px;height:46px;border:1px solid var(--line-2);border-radius:50%;background:transparent;cursor:pointer;position:relative;flex:none;transition:border-color .35s ease,background .35s ease}
.burger:hover{border-color:rgba(255,255,255,.34)}
.burger span{position:absolute;left:50%;width:17px;height:1.5px;background:var(--tx);border-radius:2px;transform:translateX(-50%);transition:transform .45s var(--e),opacity .25s ease}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:23.5px}
.burger span:nth-child(3){top:29px}
.burger.is-open span:nth-child(1){transform:translateX(-50%) translateY(5.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateX(-50%) translateY(-5.5px) rotate(-45deg)}
@media (max-width:1120px){.burger{display:block}}

.drawer{
  position:fixed;inset:0;z-index:880;background:var(--bg-2);
  padding:calc(var(--nav-h) + 20px) var(--gut) 40px;
  display:flex;flex-direction:column;overflow-y:auto;
  clip-path:circle(0% at calc(100% - 46px) 42px);
  transition:clip-path .8s var(--e);
}
.drawer.is-open{clip-path:circle(150% at calc(100% - 46px) 42px)}
.drawer ul{list-style:none;margin:0;padding:0;flex:1}
.drawer li{border-bottom:1px solid var(--line)}
.drawer li a{display:flex;align-items:baseline;gap:16px;padding:.66em 0;font-family:var(--f-display);font-size:clamp(1.65rem,6.6vw,2.4rem);font-weight:600;letter-spacing:-.035em;opacity:0;transform:translateY(22px)}
.drawer.is-open li a{animation:drawerIn .7s var(--e) forwards}
.drawer.is-open li:nth-child(1) a{animation-delay:.16s}
.drawer.is-open li:nth-child(2) a{animation-delay:.22s}
.drawer.is-open li:nth-child(3) a{animation-delay:.28s}
.drawer.is-open li:nth-child(4) a{animation-delay:.34s}
.drawer.is-open li:nth-child(5) a{animation-delay:.40s}
.drawer.is-open li:nth-child(6) a{animation-delay:.46s}
@keyframes drawerIn{to{opacity:1;transform:none}}
.drawer li a i{font-family:var(--f-mono);font-size:.6rem;font-style:normal;color:var(--orange);letter-spacing:.1em}
.drawer-foot{padding-top:24px;display:flex;flex-direction:column;gap:14px}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.foot{position:relative;background:var(--bg-2);border-top:1px solid var(--line);overflow:hidden}
.foot-top{display:grid;grid-template-columns:1.25fr 1fr 1fr 1.15fr;gap:clamp(28px,4vw,54px);padding-block:clamp(56px,7vw,88px)}
@media (max-width:1000px){.foot-top{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.foot-top{grid-template-columns:1fr;gap:34px}}
.foot img.f-logo{height:104px;width:auto;margin:-8px 0 18px -6px}
.foot h5{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tx-3);margin:0 0 18px;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.foot ul a{font-size:.92rem;color:var(--tx-2);transition:color .3s ease,padding-left .35s var(--e)}
.foot ul a:hover{color:var(--orange-lt);padding-left:6px}
.foot-bar{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;padding-block:24px;border-top:1px solid var(--line)}
.foot-bar p{margin:0;font-size:.8rem;color:var(--tx-3)}
.foot-social{display:flex;gap:9px}
.foot-social a{
  width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--tx-2);
  transition:border-color .35s ease,color .35s ease,transform .45s var(--e),background .35s ease;
}
.foot-social a:hover{color:#fff;border-color:transparent;background:var(--orange);transform:translateY(-3px)}
.foot-word{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.05em;line-height:.8;
  font-size:clamp(3.4rem,15vw,13rem);
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);
  text-align:center;padding-bottom:12px;user-select:none;pointer-events:none;
}