@font-face{
  font-family:'Minigap';
  src:url('fonts/Minigap.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#F6F8FB;
  --bg-soft:#EDF1F7;
  --bg-card:#FFFFFF;
  --bg-hover:#F1F6FC;
  --line:rgba(14,26,43,0.10);
  --line-strong:rgba(14,26,43,0.18);
  --text:#0E1A2B;
  --text-dim:#53657A;
  --text-faint:#8695A6;
  --accent:#1A6FA8;
  --accent-bright:#2E8BC0;
  --dark:#05070B;
  --shadow:0 1px 2px rgba(14,26,43,0.04), 0 12px 32px rgba(14,26,43,0.06);
}

*{margin:0;padding:0;box-sizing:border-box;}

html{background:var(--bg);}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:400;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Playfair Display',serif;
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.08;
}

em{
  font-family:'Minigap', 'Fredoka', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style:normal;
  font-weight:400;
  color:var(--accent);
}

a{color:inherit;text-decoration:none;}

/* ---------- FoldText (ported from React Bits, JS-CSS variant) ----------
   Structural/animation-mechanic rules only — deliberately omits the
   component's own font-size/weight/color/line-height/letter-spacing so it
   never competes with an element's existing typography. */
.fold-text-sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.fold-text-word{
  display:inline-block;
  white-space:nowrap;
}
.fold-text-segment{
  display:inline-block;
  line-height:inherit;
  perspective:700px;
  transform-style:preserve-3d;
  vertical-align:baseline;
}
.fold-text-piece{
  position:relative;
  display:inline-block;
  color:inherit;
  line-height:inherit;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform, opacity;
}
.fold-text-piece::after{
  content:'';
  position:absolute;
  inset:-0.08em -0.02em;
  pointer-events:none;
  opacity:var(--fold-crease, 0);
  mix-blend-mode:multiply;
  border-radius:0.08em;
}
.fold-text-piece[data-fold-hinge='top']::after{
  background:linear-gradient(180deg, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.22) 42%, rgba(255,255,255,0.26) 100%);
}
@media (prefers-reduced-motion: reduce){
  .fold-text-piece{transform:none !important;}
  .fold-text-piece::after{opacity:0 !important;}
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:0.16em;
  font-size:12px;
  font-weight:600;
  color:var(--accent);
  margin-bottom:16px;
}

/* ---------- NAV ---------- */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  padding:22px 0;
  transition:background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(246,248,251,0.78);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1240px;
  margin:0 auto;
  padding:0 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  display:flex;
  align-items:center;
}
.logo-lockup{
  display:block;
  height:30px;
  width:auto;
}
.nav-links{
  display:flex;
  gap:36px;
}
.nav-links a{
  font-size:14px;
  color:var(--text-dim);
  transition:color .35s ease;
}
.nav-links a:hover{color:var(--text);}
.nav-right{
  display:flex;
  align-items:center;
  gap:16px;
}
.nav-cta{
  font-size:13px;
  font-weight:600;
  padding:10px 20px;
  border:1px solid var(--line-strong);
  border-radius:100px;
  transition:color .35s ease, border-color .35s ease, background .25s ease;
}
.nav-cta:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

/* hamburger — hidden until the nav-links collapse at 900px */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:34px;
  height:34px;
  padding:0;
  background:none;
  border:none;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:20px;
  height:1.5px;
  background:var(--text);
  border-radius:1px;
  transition:transform .3s ease, opacity .3s ease, background .35s ease;
}
.nav.on-dark .nav-toggle span{background:#fff;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* nav inverts while it sits over the dark stage */
.nav.on-dark .nav-links a,
.nav.on-dark .nav-cta{color:#fff;}
.nav.on-dark .nav-links a{color:rgba(255,255,255,0.72);}
.nav.on-dark .nav-links a:hover{color:#fff;}
.nav.on-dark .nav-cta{border-color:rgba(255,255,255,0.28);}
.nav.on-dark .nav-cta:hover{background:var(--accent);border-color:var(--accent);}
.nav.on-dark.scrolled{
  background:rgba(5,7,11,0.62);
  border-bottom-color:rgba(255,255,255,0.10);
}

/* ---------- HERO ---------- */
.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:120px 24px 60px;
  position:relative;
  background:
    radial-gradient(ellipse 70% 50% at 50% 22%, rgba(26,111,168,0.10), transparent 62%),
    var(--bg);
}
.hero-inner{max-width:820px;}
.hero .eyebrow{font-size:15px;}
.hero h1{
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:clamp(52px, 8.2vw, 96px);
  margin-bottom:26px;
  color:var(--text);
}
.hero-sub{
  font-size:clamp(18px, 1.9vw, 22px);
  color:var(--text-dim);
  max-width:560px;
  margin:0 auto;
  font-weight:300;
}
.scroll-cue{
  position:absolute;
  bottom:48px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:var(--text-faint);
}
.scroll-cue span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.18em;
}
.scroll-cue i{
  width:1px;
  height:36px;
  background:linear-gradient(var(--text-faint), transparent);
  position:relative;
  overflow:hidden;
}
.scroll-cue i::after{
  content:'';
  position:absolute;
  top:-100%;
  left:0;right:0;
  height:100%;
  background:linear-gradient(var(--accent-bright), transparent);
  animation:cueDrop 1.8s ease-in-out infinite;
}
@keyframes cueDrop{
  0%{top:-100%;}
  60%{top:100%;}
  100%{top:100%;}
}

/* ---------- PINNED STAGE (stays dark — it carries the footage) ---------- */
/* dedicated bands that ease the light page into black and back out again,
   so the dark stage reads as intentional rather than as an abrupt slab */
.stage-intro{
  height:42vh;
  background:linear-gradient(180deg,
    var(--bg) 0%,
    #C9D6E4 30%,
    #4A5A6E 58%,
    #0A0F17 88%,
    #000 100%);
}
/* Scroll runway for the pinned stage. The pin occupies 100vh, so the actual
   scrub range is (height - 100vh) = 150vh — a longer runway spreads the same
   120 frames over more scroll, i.e. a slower playhead. Smoothing is separate
   (SMOOTH in script.js) and unaffected by this. */
.stage{
  position:relative;
  height:250vh;
  background:#000;
}
.stage-pin{
  position:sticky;
  top:0;
  height:100vh;
  width:100%;
  overflow:hidden;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  contain:paint;
}
.stage-frame-wrap{
  position:absolute;
  inset:0;
  clip-path:circle(1% at 50% 50%);
  -webkit-clip-path:circle(1% at 50% 50%);
  will-change:clip-path;
}
/* frames are drawn cover-fitted into the canvas backing store by script.js */
.stage-canvas{
  width:100%;
  height:100%;
  display:block;
}
.stage-loader{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:5;
  font-size:12px;
  letter-spacing:0.18em;
  color:rgba(255,255,255,0.5);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.stage-loader.visible{opacity:1;}
.stage-vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse 70% 70% at 50% 50%, transparent 40%, rgba(0,0,0,0.55) 100%);
  z-index:2;
}
/* grain lives inside the stage only — it would read as dirt on the light sections */
.grain{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  opacity:0.04;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.stage-captions{
  position:relative;
  z-index:4;
  width:100%;
  text-align:center;
  padding:0 24px;
  pointer-events:none;
}
.stage-caption{
  position:absolute;
  left:0;right:0;
  top:50%;
  transform:translateY(-50%);
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-weight:500;
  font-size:clamp(28px, 5vw, 58px);
  color:#fff;
  opacity:0;
  text-shadow:0 4px 30px rgba(0,0,0,0.5);
}
.stage-progress{
  position:absolute;
  bottom:40px;
  left:50%;
  transform:translateX(-50%);
  z-index:4;
  width:140px;
}
.stage-progress-track{
  width:100%;
  height:2px;
  background:rgba(255,255,255,0.18);
  border-radius:2px;
  overflow:hidden;
}
.stage-progress-fill{
  width:0%;
  height:100%;
  background:var(--accent-bright);
}

/* lifts the page back out of black into the light sections */
.stage-outro{
  height:42vh;
  background:linear-gradient(180deg,
    #000 0%,
    #0A0F17 12%,
    #4A5A6E 42%,
    #C9D6E4 70%,
    var(--bg) 100%);
}

/* ---------- SERVICES ---------- */
.services{
  padding:140px 40px 120px;
  max-width:1240px;
  margin:0 auto;
}
.section-head{
  max-width:640px;
  margin-bottom:64px;
}
.section-head h2{
  font-size:clamp(30px, 4vw, 46px);
}
.service-index{
  display:block;
  font-family:'Playfair Display',serif;
  font-size:14px;
  color:var(--accent);
  margin-bottom:20px;
}

/* ---------- SERVICES SCROLL STACK ----------
   Vanilla port of React Bits' ScrollStack (see scroll-stack.js). Cards pin
   near the top of the viewport as they're reached and cascade underneath
   the next one — driven entirely by JS transforms, so this CSS only has to
   define their resting appearance; the stacked/pinned state is inline. */
.scroll-stack-inner{
  position:relative;
  max-width:760px;
  margin:0 auto;
  padding-bottom:20vh;
}
.scroll-stack-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  min-height:230px;
  padding:48px 52px;
  border-radius:28px;
  background:var(--bg-card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  box-sizing:border-box;
}
.scroll-stack-card:not(:last-child){margin-bottom:100px;}
.scroll-stack-card:hover{
  border-color:var(--line-strong);
  box-shadow:0 4px 8px rgba(14,26,43,0.06), 0 24px 48px rgba(14,26,43,0.12);
}
.scroll-stack-card h3{
  font-size:clamp(24px, 2.6vw, 30px);
}
.scroll-stack-card p{
  color:var(--text-dim);
  font-size:16px;
  font-weight:300;
  max-width:520px;
}
.stack-card-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  font-size:13px;
  font-weight:600;
  color:var(--accent);
  transition:color .25s ease, gap .25s ease;
}
.stack-card-cta i{font-style:normal;}
.scroll-stack-card:hover .stack-card-cta{
  color:var(--accent-bright);
  gap:10px;
}
.scroll-stack-end{width:100%;height:1px;}

/* ---------- PROCESS ---------- */
.process{
  padding:120px 40px 150px;
  max-width:1240px;
  margin:0 auto;
}
.process-list{
  display:flex;
  flex-direction:column;
}
.process-item{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:32px;
  padding:40px 0;
  border-top:1px solid var(--line);
  align-items:baseline;
}
.process-item:last-child{border-bottom:1px solid var(--line);}
.process-num{
  font-family:'Playfair Display',serif;
  font-size:15px;
  color:var(--text-faint);
}
.process-item h3{
  font-size:24px;
  margin-bottom:10px;
}
.process-item p{
  color:var(--text-dim);
  font-weight:300;
  max-width:560px;
  font-size:15px;
}

/* ---------- WHY / STATS ---------- */
.why{
  padding:120px 40px;
  background:var(--bg-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.why-inner{
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.why-copy h2{
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:clamp(28px, 3.6vw, 40px);
  margin-bottom:18px;
}
.why-sub{
  color:var(--text-dim);
  font-weight:300;
  font-size:16px;
  max-width:440px;
}
.why-sub + .why-sub{
  margin-top:16px;
}
.stats-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}
.stat-num{
  display:block;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:clamp(32px, 3.6vw, 44px);
  color:var(--text);
  margin-bottom:8px;
}
.stat-label{
  color:var(--text-dim);
  font-size:14px;
  font-weight:300;
}

/* ---------- CTA ---------- */
.cta{
  padding:170px 40px;
  text-align:center;
  background:
    radial-gradient(ellipse 60% 80% at 50% 100%, rgba(26,111,168,0.12), transparent 62%),
    var(--bg);
}
.cta h2{
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:clamp(32px, 5vw, 56px);
  margin-bottom:18px;
}
.cta p{
  color:var(--text-dim);
  font-weight:300;
  margin-bottom:40px;
}
.cta-button{
  display:inline-block;
  padding:18px 40px;
  border-radius:100px;
  background:var(--accent);
  color:#fff;
  font-weight:600;
  font-size:15px;
  box-shadow:0 8px 24px rgba(26,111,168,0.22);
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.cta-button:hover{
  background:var(--accent-bright);
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(26,111,168,0.28);
}
.cta-note{
  margin-top:22px;
  font-size:13px;
  color:var(--text-faint);
}

/* ---------- FOOTER ---------- */
.footer{
  padding:60px 40px;
  border-top:1px solid var(--line);
  background:var(--bg-soft);
}
.footer-inner{
  max-width:1240px;
  margin:0 auto;
  text-align:center;
  color:var(--text-faint);
  font-size:13px;
}
.footer-inner .logo{
  justify-content:center;
  margin-bottom:12px;
}
.footer-inner .logo-lockup{height:26px;}
.footer-copy{margin-top:18px;}

/* ---------- SERVICE DETAIL PAGES ---------- */
.service-detail-hero{
  padding:180px 40px 70px;
  max-width:1240px;
  margin:0 auto;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(26,111,168,0.08), transparent 62%),
    var(--bg);
}
.service-detail-hero-inner{max-width:760px;}
.back-link{
  display:inline-block;
  font-size:13px;
  font-weight:600;
  color:var(--text-dim);
  margin-bottom:28px;
  transition:color .25s ease;
}
.back-link:hover{color:var(--accent);}
.service-detail-hero h1{
  font-size:clamp(34px, 5vw, 54px);
  margin:14px 0 20px;
}
.service-detail-sub{
  font-size:18px;
  color:var(--text-dim);
  font-weight:300;
  max-width:600px;
}
.service-detail-body{
  padding:20px 40px 140px;
  max-width:1240px;
  margin:0 auto;
}
.service-detail-grid{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:64px;
  align-items:start;
}
.service-detail-main{
  display:flex;
  flex-direction:column;
  gap:40px;
}
.service-detail-main h2{
  font-size:24px;
  margin-bottom:20px;
}
.service-detail-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.service-detail-list li{
  position:relative;
  padding-left:28px;
  color:var(--text-dim);
  font-weight:300;
  font-size:16px;
}
.service-detail-list li::before{
  content:'';
  position:absolute;
  left:0;top:11px;
  width:10px;
  height:1px;
  background:var(--accent);
}
.service-detail-main p{
  color:var(--text-dim);
  font-weight:300;
  font-size:16px;
  max-width:640px;
}
.service-detail-aside{position:sticky;top:120px;}
.service-detail-card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:36px 32px;
  box-shadow:var(--shadow);
}
.service-detail-card h3{
  font-size:20px;
  margin-bottom:12px;
}
.service-detail-card p{
  color:var(--text-dim);
  font-weight:300;
  font-size:14px;
  margin-bottom:24px;
}
.service-detail-card .cta-button{
  display:block;
  width:100%;
  text-align:center;
  padding:14px 20px;
  font-size:14px;
  box-sizing:border-box;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .nav-toggle{display:flex;}
  .logo-lockup{height:24px;}
  .nav-right{gap:10px;}
  .nav-cta{padding:8px 14px;font-size:12px;white-space:nowrap;}
  .nav-links{
    position:absolute;
    top:100%;
    left:16px;
    right:16px;
    flex-direction:column;
    gap:2px;
    background:var(--bg-card);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:var(--shadow);
    padding:10px;
    margin-top:10px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .nav.nav-open .nav-links{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    transition:opacity .25s ease, transform .25s ease;
  }
  .nav-links a{
    color:var(--text);
    padding:12px 14px;
    border-radius:10px;
  }
  .nav-links a:hover{background:var(--bg-hover);}
  .why-inner{grid-template-columns:1fr;gap:56px;}
  .process-item{grid-template-columns:1fr;gap:8px;}
  .nav-inner,.services,.process,.why,.cta,.footer{padding-left:24px;padding-right:24px;}
  .services{padding-top:100px;padding-bottom:90px;}
  .process{padding-top:90px;padding-bottom:110px;}
  .why,.cta{padding-top:100px;padding-bottom:100px;}
  .scroll-stack-card{
    min-height:0;
    padding:32px 28px;
    border-radius:22px;
  }
  .scroll-stack-card:not(:last-child){margin-bottom:60px;}
  .stage-intro,.stage-outro{height:30vh;}
  .service-detail-hero{padding:130px 24px 50px;}
  .service-detail-body{padding:20px 24px 100px;}
  .service-detail-grid{grid-template-columns:1fr;gap:48px;}
  .service-detail-aside{position:static;}
}

/* ---------- REDUCED MOTION ----------
   No scroll hijacking, no pin, no iris wipe. The stage becomes an ordinary
   full-height section showing one still frame with all four lines of copy. */
@media (prefers-reduced-motion: reduce){
  .stage{height:auto;}
  .stage-pin{position:relative;height:100vh;}
  .stage-frame-wrap{
    clip-path:none !important;
    -webkit-clip-path:none !important;
    will-change:auto;
  }
  .stage-captions{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
  }
  .stage-caption{
    position:static;
    transform:none;
    opacity:1 !important;
    font-size:clamp(20px, 3vw, 34px);
  }
  .stage-progress{display:none;}
  .scroll-cue i::after{animation:none;}
  .stage-intro,.stage-outro{height:24vh;}
  *{scroll-behavior:auto !important;}
}