/* ============================================================
   Saia — design system (extracted 1:1 from the original)
   Display serif: Serrif Condensed Regular
   UI/body sans:  Saans (Light 300 / Regular 400 / Medium 500)
   Mono labels:   Fragment Mono
   ============================================================ */
@font-face{font-family:"Serrif";src:url(../fonts/OtJp94PYSpTDGKBXXdZXMkV27E.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Saans";src:url(../fonts/AQZoElByYFIc7Kzf4u4CCo7Yw.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Saans";src:url(../fonts/OxeBY6UTBDrdVkYpbWOTAOONI.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Saans";src:url(../fonts/ql7WEctRB3a8uNodtQppYLb62I.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Saans";src:url(../fonts/n02NY1r6t0j8yHjzBcssUDrV4.woff2) format("woff2");font-weight:600 800;font-style:normal;font-display:swap;}
@font-face{font-family:"Mono";src:url(../fonts/FragmentMono.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;}

:root{
  --ink:#0c1018;            /* primary text / near-black */
  --ink-60:rgba(12,16,24,.6);
  --ink-40:rgba(12,16,24,.4);
  --ink-25:rgba(12,16,24,.25);
  --paper:#f7f3f0;          /* warm off-white (gradient tail) */
  --white:#fff;
  --line:rgba(12,16,24,.12);
  --sans:"Saans","Inter",-apple-system,system-ui,sans-serif;
  --serif:"Serrif",Georgia,"Times New Roman",serif;
  --mono:"Mono",ui-monospace,monospace;
  --maxw:1408px;            /* content container */
  --gut:40px;               /* page gutter */
  --nav-h:80px;
  /* live logo/nav color, flipped per section by JS */
  --fg:#fff;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}

body{
  font-family:var(--sans);
  font-weight:400;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  cursor:none;               /* custom cursor */
}
@media (hover:none){body{cursor:auto;}}

a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font:inherit;color:inherit;background:none;border:none;cursor:none;}

/* ---- type utilities (exact metrics from original) ---- */
.t-display{font-family:var(--serif);font-weight:400;font-size:64px;line-height:1.05;letter-spacing:-.02em;}
@media (min-width:1440px){.t-display{font-size:72px;}}
.t-h2{font-family:var(--sans);font-weight:400;font-size:32px;line-height:1.1;letter-spacing:-.32px;}
.t-body{font-family:var(--sans);font-weight:400;font-size:20px;line-height:1.15;letter-spacing:-.2px;}
.t-tag{font-family:var(--sans);font-weight:400;font-size:14px;line-height:1.1;letter-spacing:-.14px;}
.t-nav{font-family:var(--sans);font-weight:400;font-size:16px;line-height:1;letter-spacing:-.16px;}
.t-mono{font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:-.2px;}

.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);width:100%;}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;
  color:var(--fg);
  transition:transform .5s cubic-bezier(.16,1,.3,1),color .4s ease;
  will-change:transform;
}
.nav.is-hidden{transform:translateY(-100%);}
.nav__inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);width:100%;display:flex;align-items:center;justify-content:space-between;}
.nav__logo{font-family:var(--sans);font-weight:700;font-size:22px;letter-spacing:.2px;line-height:1;}
.nav__links{display:flex;align-items:center;gap:28px;}
.nav__links a{position:relative;opacity:.92;transition:opacity .25s;}
.nav__links a:hover{opacity:.55;}
.nav__sep{width:18px;height:1px;background:currentColor;opacity:.5;}
@media (max-width:860px){
  .nav__links a:not(.nav__cta),.nav__sep{display:none;}
}

/* ============================================================
   INTRO (hero 1 + hero 2) — shares the dark→cream gradient band
   ============================================================ */
.intro{
  position:relative;
  background:linear-gradient(180deg,
    rgb(40,14,1) 0%, rgb(24,38,68) 15.26%, rgb(90,118,159) 30.28%,
    rgb(135,161,196) 43.38%, rgb(193,211,230) 58.83%,
    rgb(254,249,225) 79.71%, rgb(247,243,240) 100%);
}
/* Hero text is PINNED (sticky) while the gradient scrolls behind it; words "type in". */
.hero{position:relative;}
.hero--a{height:185vh;}
.hero--b{height:170vh;}
.hero__sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;}
.hero__statement{max-width:1120px;}
.hero--a .hero__statement{color:#fff;}
.hero--b .hero__statement{color:var(--ink);}

/* split-word reveal: masked slide-up (data-reveal) OR opacity type-in (data-typed) */
[data-split]:not(.is-split),[data-reveal]:not(.is-split),[data-typed]:not(.is-split){opacity:0;}
.is-split{opacity:1;}
.is-split .w{display:inline-block;vertical-align:top;}
.is-split.masked .w{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;}
.is-split .wi{display:inline-block;will-change:transform,opacity;}

.hero__cta{
  position:absolute;left:var(--gut);bottom:48px;
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 22px;border-radius:100px;
  font-size:15px;letter-spacing:-.15px;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;transition:background .3s,transform .3s;
}
.hero--b .hero__cta{background:rgba(12,16,24,.06);border-color:rgba(12,16,24,.1);color:var(--ink);}
.hero__cta:hover{transform:translateY(-2px);}

/* hero animated contour field (js/contour-hero.js) — sits behind the statement,
   luminous on the dark→blue top of the intro gradient, fading into the cream. */
.hero__contour{position:absolute; inset:0; width:100%; height:100%; z-index:0;
  pointer-events:none; --hero-line:rgba(212,227,255,0.55);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 66%,transparent 97%);
  mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 66%,transparent 97%);}
.hero--a .container,.hero--b .container{position:relative; z-index:1;}
.hero--a .hero__cta{z-index:2;}
/* 3D contour terrains (js/contour-3d.js) — WebGL canvas; fog handles the depth
   fade so the mask is gentle. Replace the 2D/SVG contour when WebGL is present.
   Mounted behind hero 1 & 2, the CTA display copy, and in the footer. */
.hero__contour3d{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 82%,transparent 99%);
  mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 82%,transparent 99%);}
.cta{position:relative;}
.cta .container{position:relative; z-index:1;}
.footer__net{position:relative;}
.cta__contour3d,.footer__contour3d{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}
.cta__contour3d{-webkit-mask-image:radial-gradient(125% 125% at 50% 52%,#000 46%,transparent 100%);
  mask-image:radial-gradient(125% 125% at 50% 52%,#000 46%,transparent 100%);}
.footer__contour3d{-webkit-mask-image:radial-gradient(135% 140% at 50% 100%,#000 44%,transparent 100%);
  mask-image:radial-gradient(135% 140% at 50% 100%,#000 44%,transparent 100%);}

@media (max-width:860px){
  :root{--gut:20px;}
  .t-display{font-size:36px;}
  .hero__statement{max-width:100%;}
}

/* ============================================================
   Custom cursor + Awwwards badge
   ============================================================ */
.cursor{position:fixed;top:0;left:0;width:44px;height:44px;border-radius:50%;
  background:#fff;color:var(--ink);pointer-events:none;z-index:90;
  display:grid;place-items:center;transform:translate(-50%,-50%) scale(1);
  transition:width .25s,height .25s,background .25s,color .25s;mix-blend-mode:normal;}
.cursor__dot{width:6px;height:6px;border-radius:50%;background:currentColor;transition:opacity .2s;}
.cursor__label{position:absolute;font-size:12px;letter-spacing:-.12px;white-space:nowrap;opacity:0;transition:opacity .2s;}
.cursor.is-label{width:84px;height:84px;background:var(--ink);color:#fff;}
.cursor.is-label .cursor__dot{opacity:0;}
.cursor.is-label .cursor__label{opacity:1;}
@media (hover:none){.cursor{display:none;}}


/* ============================================================
   SECTIONS
   ============================================================ */
.paper-zone{background:var(--paper);position:relative;z-index:1;}
.sect-head{max-width:780px;margin-bottom:52px;color:var(--ink);}

/* PARTNERS (sits on the cream tail of the intro gradient) */
.partners{padding:30px 0 130px;}
.logos{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
.logo{height:140px;display:flex;align-items:center;justify-content:center;gap:7px;
  background:rgba(12,16,24,.035);border-radius:14px;color:var(--ink);
  font-family:var(--sans);font-weight:500;font-size:22px;letter-spacing:-.5px;}
.logo__mark{font-size:15px;line-height:1;}
@media(max-width:860px){.logos{grid-template-columns:repeat(2,1fr);gap:10px;}.partners{padding:10px 0 70px;}}

/* shared row header (Work / News) */
.row-head{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:28px;}
.row-head h2{color:var(--ink);}
.row-head__link{display:inline-flex;gap:8px;color:var(--ink-40);font-size:20px;letter-spacing:-.2px;transition:color .25s;}
.row-head__link:hover{color:var(--ink);}

/* WORK */
.work{padding:120px 0;}
.proj{display:grid;grid-template-columns:1fr 1.75fr;gap:60px;align-items:start;
  padding:56px 0;border-bottom:1px solid var(--line);}
.proj__name{font-family:var(--sans);font-weight:400;font-size:32px;letter-spacing:-.5px;color:var(--ink);margin-bottom:18px;}
.proj__desc{color:var(--ink-40);max-width:340px;margin-bottom:30px;}
.tags{display:flex;gap:8px;flex-wrap:wrap;}
.tag{font-size:14px;letter-spacing:-.14px;padding:7px 14px;border:1px solid var(--line);border-radius:100px;color:var(--ink);}
.proj__media{border-radius:6px;overflow:hidden;aspect-ratio:16/9.4;background:rgba(12,16,24,.05);}
.proj__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1);}
.proj:hover .proj__media img{transform:scale(1.045);}
@media(max-width:860px){.work{padding:70px 0;}.proj{grid-template-columns:1fr;gap:24px;}.proj__desc{max-width:none;}}

/* PROCESS */
.process{padding:120px 0 150px;}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.step{background:var(--paper);padding:34px 28px 0;display:flex;flex-direction:column;min-height:600px;}
.step__label{font-family:var(--sans);font-weight:400;font-size:24px;letter-spacing:-.3px;color:var(--ink);margin-bottom:14px;}
.step__desc{color:var(--ink-40);}
.step__net{margin-top:auto;padding-top:24px;min-height:280px;display:flex;align-items:flex-end;justify-content:center;}
.step__net .contour{width:100%;height:260px;}
/* shared 3D terrain across the 4 process cards (js/contour-3d-process.js) — one
   canvas over the grid, scissor-rendered per card; overlays the cards' net area. */
.process .steps{position:relative;}
.process__contour3d{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none;}
@media(max-width:980px){.steps{grid-template-columns:repeat(2,1fr);}.step{min-height:440px;}}
@media(max-width:560px){.steps{grid-template-columns:1fr;}}

/* NEWS */
.news{padding:40px 0 150px;}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 28px;margin-top:56px;}
.card{display:block;}
.card__img{position:relative;aspect-ratio:1/1.05;border-radius:4px;overflow:hidden;margin-bottom:18px;background:rgba(12,16,24,.06);}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1);}
.card:hover .card__img img{transform:scale(1.045);}
.card__cat{position:absolute;left:14px;bottom:14px;font-size:12px;letter-spacing:-.1px;color:#fff;background:rgba(12,16,24,.5);backdrop-filter:blur(6px);padding:5px 11px;border-radius:100px;}
.card__title{font-family:var(--sans);font-weight:400;font-size:20px;letter-spacing:-.2px;color:var(--ink);line-height:1.22;}
@media(max-width:860px){.news-grid{grid-template-columns:1fr;gap:32px;}.news{padding:20px 0 80px;}}

/* SUNSET ZONE (newsletter + CTA) — cream→sunset→dark */
.sunset-zone{position:relative;z-index:1;background:linear-gradient(180deg,
  rgba(247,243,240,0) 0%, rgba(241,189,122,.97) 17.39%, rgb(252,190,109) 32.95%,
  rgb(228,108,68) 51.46%, rgb(84,37,18) 78.29%, rgb(30,19,16) 100%);}
.newsletter{padding:70px 0 110px;max-width:640px;}
.newsletter .t-h2{color:var(--ink);}
.newsletter__sub{color:rgba(12,16,24,.6);margin:18px 0 30px;max-width:520px;}
.signup{display:flex;gap:12px;max-width:500px;}
.signup input{flex:1;padding:16px 20px;border-radius:100px;border:1px solid rgba(12,16,24,.18);background:rgba(255,255,255,.45);font:inherit;font-size:15px;color:var(--ink);}
.signup input::placeholder{color:rgba(12,16,24,.4);}
.signup button{padding:16px 24px;border-radius:100px;background:var(--ink);color:#fff;font-size:15px;white-space:nowrap;transition:transform .25s;}
.signup button:hover{transform:translateY(-2px);}
.newsletter__fine{font-size:13px;color:rgba(12,16,24,.45);margin-top:18px;max-width:400px;line-height:1.5;}
.newsletter__fine a{text-decoration:underline;}
.cta{padding:120px 0 190px;}
.cta__title{color:var(--ink);max-width:1040px;display:block;}
.cta__sub{color:rgba(12,16,24,.5);max-width:1040px;display:block;margin-top:4px;}
.pill{display:inline-flex;margin-top:52px;padding:15px 28px;border-radius:100px;background:rgba(12,16,24,.1);color:var(--ink);font-size:15px;transition:background .25s,transform .25s;}
.pill:hover{background:rgba(12,16,24,.18);transform:translateY(-2px);}
/* the CTA pill sits on the dark lower end of the sunset gradient → light style */
.cta .pill{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28);}
.cta .pill:hover{background:rgba(255,255,255,.24);}

/* FOOTER — deep tech-dark; the contour relief is the luminous centerpiece */
.footer{position:relative;z-index:1;overflow:hidden;color:#fff;padding:70px 0 0;
  background:linear-gradient(180deg,rgb(30,19,16) 0%, #14111a 30%, #0a0d15 65%, #07090f 100%);}
.footer a{color:#fff;}
.footer__cta{display:inline-flex;gap:10px;align-items:center;color:#fff;margin-bottom:80px;font-family:var(--sans);font-weight:400;}
.footer__cta span{transition:transform .3s;}
.footer__cta:hover span{transform:translateX(6px);}
.offices{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:40px;}
.office__city{font-family:var(--sans);font-weight:400;font-size:20px;margin-bottom:6px;}
.office__time{color:rgba(255,255,255,.5);margin-bottom:24px;font-size:15px;}
.office__line{font-size:15px;margin-bottom:4px;color:rgba(255,255,255,.82);}
.office__line a{color:rgba(255,255,255,.82);}
.office__addr{font-size:15px;color:rgba(255,255,255,.5);margin-top:18px;line-height:1.5;}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2;}
.footer__mark{font-size:24px;}
.footer__social{display:flex;gap:26px;font-size:15px;}
.footer__social a{color:rgba(255,255,255,.85);}
.footer__legal{display:flex;justify-content:space-between;font-size:14px;color:rgba(255,255,255,.55);margin-top:70px;padding-bottom:34px;position:relative;z-index:2;}
@media(max-width:860px){.offices{grid-template-columns:1fr;}}

/* ============================================================
   CONTOUR — Saia topographic motif (SVG, built by js/contour.js).
   Nested iso-lines over a field of peaks; the relief grows Think→Scale.
   "We map your landscape… we chart the path from idea to impact."
   ============================================================ */
/* palette inherited by the SVG; dark footer overrides below */
.contour{display:block; position:relative;
  --c-line:rgba(12,16,24,.22);        /* contour stroke (ink on cream) */
  --c-peak:#2b5fd0;                    /* accent at the summit marker */
  --c-peak-halo:rgba(43,95,208,.16);}
.contour__svg{width:100%; height:100%; display:block;}

/* Each iso-level reads as elevation: low/outer lines faint, high/inner lines
   firm. --l = level index, --n = total levels (set inline by the builder). */
.iso{fill:none; stroke:var(--c-line); stroke-width:.55; stroke-linecap:round;
  opacity:calc(.30 + .70 * (var(--l) / var(--n)));
  animation:iso-breathe 8s ease-in-out infinite;
  animation-delay:calc(var(--l) * -0.55s);}
@keyframes iso-breathe{0%,100%{stroke-opacity:.68;} 50%{stroke-opacity:1;}}

/* summit marker — a quiet "where value takes root" focal point */
.iso-peak__halo{fill:var(--c-peak-halo); transform-origin:center;
  animation:iso-peak 5s ease-in-out infinite;}
.iso-peak__dot{fill:var(--c-peak);}
@keyframes iso-peak{0%,100%{transform:scale(.65); opacity:.45;} 50%{transform:scale(1.25); opacity:1;}}

@media (prefers-reduced-motion:reduce){.iso,.iso-peak__halo{animation:none;}}

/* footer relief — luminous cool lines on the deep-dark footer */
.footer__net{margin:54px auto 64px; width:100%; max-width:920px; height:clamp(220px,34vw,420px);}
/* palette must live on .contour itself (it sits between .footer__net and the SVG) */
.footer__net .contour{width:100%; height:100%;
  --c-line:rgba(180,205,255,.34);
  --c-peak:#dce9ff;
  --c-peak-halo:rgba(150,190,255,.30);}
.footer__net .iso{stroke-width:.5;}
@media(max-width:860px){.footer__net{height:clamp(200px,52vw,300px);margin:36px auto 44px;}}