/* =========================================================
   Overlap — design system

   Light, soft-focus and premium: a warm off-white ground lit by
   low-opacity pearlescent washes, frosted-glass surfaces, and light
   large display type.

   The edge that keeps it from being a generic fintech page: Overlap is
   named after a time-zone overlap, so the one saturated moment on the
   whole site is the live overlap instrument — two working days as two
   translucent bands that the browser genuinely multiplies where they
   cross. Everything else stays quiet and pale.

   Cabinet Grotesk Light (display) · Switzer (body) · JetBrains Mono (data)
   ========================================================= */

:root{
  /* ground */
  --ground:     #F0F0EE;
  --ground-2:   #E9E9E6;
  --white:      #FFFFFF;

  /* ink */
  --ink:        #15171B;
  --ink-2:      #585D65;
  --ink-3:      #8A9099;

  /* structure */
  --hair:       rgba(21,23,27,0.09);
  --hair-soft:  rgba(21,23,27,0.055);

  /* glass */
  --glass:      rgba(255,255,255,0.62);
  --glass-2:    rgba(255,255,255,0.42);
  --glass-line: rgba(255,255,255,0.80);
  --glass-shadow: 0 20px 50px -24px rgba(21,23,27,0.20);
  --lift:       0 32px 70px -34px rgba(21,23,27,0.28);

  /* the two sides — the only saturated colour on the page */
  --amber:      #E8A33D;   /* your side — US business day */
  --amber-deep: #A8681A;
  --teal:       #1F6F5C;   /* our side — Lahore shift */
  --teal-deep:  #14503F;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --shell: 1200px;
  --gut: 40px;
}

*{box-sizing:border-box; margin:0; padding:0;}
/* Native smooth scroll is the fallback for anchor jumps when the inertial
   scroller is unavailable. Once Lenis is running it drives scrolling itself
   and this must be off, or the two fight over the same gesture. */
html{scroll-behavior:smooth;}
html.lenis,html.lenis body{ height:auto; }
/* Keyed off `lenis` alone, not `lenis-smooth` — the latter is not applied in
   every Lenis build, and if this selector misses, native smooth scrolling
   stays on and fights the inertial scroller over the same gesture. */
html.lenis{ scroll-behavior:auto; }
html.lenis-stopped{ overflow:hidden; }
html.lenis [data-lenis-prevent]{ overscroll-behavior:contain; }
body{
  background:var(--ground);
  color:var(--ink);
  font-family:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* ---------- ambient light ----------
   Fixed, very low opacity, sits under everything. This is what makes
   the ground read as lit rather than flat grey. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46% 38% at 12% 8%,  rgba(255,255,255,0.95), transparent 68%),
    radial-gradient(40% 34% at 88% 2%,  rgba(232,163,61,0.10),  transparent 70%),
    radial-gradient(44% 40% at 96% 62%, rgba(31,111,92,0.07),   transparent 72%),
    radial-gradient(50% 42% at 4% 78%,  rgba(255,255,255,0.75), transparent 70%);
}

a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
ul{list-style:none;}
button{font-family:inherit;}
::selection{background:var(--amber); color:var(--ink);}
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:3px; }

.wrap{max-width:var(--shell); margin:0 auto; padding:0 var(--gut);}

/* ---------- glass ---------- */
.glass{
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow);
}
@supports not (backdrop-filter: blur(1px)){
  .glass{ background:rgba(255,255,255,0.88); }
}

/* ---------- type ---------- */
h1,h2,h3,h4{
  font-family:'Cabinet Grotesk','Switzer','Helvetica Neue',Arial,sans-serif;
  color:var(--ink);
  text-wrap:balance;
}
h1,h2{ font-weight:300; letter-spacing:-0.03em; line-height:1.02; }
h1{ font-size:clamp(38px, 5.6vw, 74px); }
h2{ font-size:clamp(29px, 3.8vw, 48px); }
h3{ font-weight:400; font-size:20px; letter-spacing:-0.02em; line-height:1.22; }
h4{ font-weight:500; font-size:15px; letter-spacing:-0.01em; }
em{ font-style:italic; font-weight:300; color:var(--amber-deep); }
p{ color:var(--ink-2); line-height:1.68; }

.eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal); display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--amber); flex-shrink:0; }

/* ---------- placeholder slots ----------
   Deliberately unmistakable: these must never ship as if they were real
   client proof. Swap the contents, then delete the .ph class. */
.ph{
  position:relative;
  background:
    repeating-linear-gradient(135deg, rgba(21,23,27,0.028) 0 10px, transparent 10px 20px),
    var(--ground-2);
  border:1px dashed rgba(21,23,27,0.18);
  border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--ink-3);
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; padding:14px; line-height:1.5;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:100px;
  font-size:14.5px; font-weight:500; letter-spacing:-0.005em;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-dark{ background:var(--ink); color:var(--ground); }
.btn-dark:hover{ background:#000; transform:translateY(-1px); box-shadow:0 14px 28px -14px rgba(21,23,27,0.5); }
.btn-outline{
  border-color:var(--glass-line); color:var(--ink);
  background:var(--glass-2);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.btn-outline:hover{ background:var(--white); border-color:var(--white); }
.btn-light{ background:var(--white); color:var(--ink); }
.btn-light:hover{ background:var(--ground); }
.btn-sm{ padding:10px 18px; font-size:13.5px; }
.btn-block{ width:100%; }

/* =========================================================
   Header
   ========================================================= */
header{
  position:sticky; top:0; z-index:60;
  background:rgba(240,240,238,0.62);
  backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
header.scrolled{ border-bottom-color:var(--hair-soft); background:rgba(240,240,238,0.82); }
nav{ display:flex; align-items:center; justify-content:space-between; gap:28px; padding:16px 0; }
.logo{
  display:flex; align-items:center; gap:9px; flex-shrink:0;
  font-family:'Cabinet Grotesk',sans-serif; font-weight:500; font-size:19px; letter-spacing:-0.04em;
  color:var(--ink);
}
.logo-mark{ width:24px; height:24px; flex-shrink:0; }
.nav-links{ display:flex; gap:30px; font-size:14px; font-weight:400; color:var(--ink-2); }
.nav-links a{ position:relative; padding:4px 0; transition:color .18s ease; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--amber); transition:width .24s ease;
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.menu-toggle{
  display:none; background:var(--glass-2); border:1px solid var(--glass-line);
  border-radius:100px; width:42px; height:42px;
  align-items:center; justify-content:center; cursor:pointer;
}
.menu-toggle svg{ width:18px; height:18px; }
.menu-toggle svg path{ stroke:var(--ink); }

/* Stays in the DOM so it can animate both ways — `display` can't transition.
   visibility is delayed out on close so the fade is allowed to finish. */
.mobile-panel{
  display:flex; position:fixed; inset:0; z-index:70;
  padding:16px 22px 40px;
  flex-direction:column; overflow-y:auto;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s ease, visibility 0s linear .42s;
  /* Deliberately a flat surface. An ambient wash here either clips to the
     scroll content or, pinned to the viewport, lands as an off-centre blob
     behind the links — and the menu reads calmer without it. The page keeps
     its ambient light; the overlay stays quiet. */
  background:var(--ground);
}
.mobile-panel.open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .28s ease, visibility 0s;
}
.mobile-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.mobile-panel > a{
  font-family:'Cabinet Grotesk',sans-serif; font-weight:300; font-size:30px; letter-spacing:-0.03em;
  padding:16px 0; border-bottom:1px solid var(--hair-soft); color:var(--ink);
}
.mobile-panel .nav-cta{ flex-direction:column; margin-top:26px; align-items:stretch; }
.mobile-panel .btn{ width:100%; padding:15px; }

/* Links rise in one after another once the panel is up, and leave together
   so closing stays quick. */
@media (prefers-reduced-motion: no-preference){
  .mobile-panel > a,
  .mobile-panel .nav-cta{
    opacity:0; translate:0 16px;
    transition:opacity .2s ease, translate .2s ease;
  }
  .mobile-panel.open > a,
  .mobile-panel.open .nav-cta{
    opacity:1; translate:none;
    transition:opacity .5s ease, translate .62s cubic-bezier(.16,1,.3,1);
  }
  .mobile-panel.open > a:nth-of-type(1){ transition-delay:.10s; }
  .mobile-panel.open > a:nth-of-type(2){ transition-delay:.16s; }
  .mobile-panel.open > a:nth-of-type(3){ transition-delay:.22s; }
  .mobile-panel.open > a:nth-of-type(4){ transition-delay:.28s; }
  .mobile-panel.open > a:nth-of-type(5){ transition-delay:.34s; }
  .mobile-panel.open > a:nth-of-type(6){ transition-delay:.40s; }
  .mobile-panel.open .nav-cta{ transition-delay:.46s; }
  .mobile-panel-head{ opacity:0; transition:opacity .2s ease; }
  .mobile-panel.open .mobile-panel-head{ opacity:1; transition:opacity .34s ease .04s; }
}

/* =========================================================
   Section rhythm — one mechanism only
   ========================================================= */
section{ padding:92px 0; }
section.tight-top{ padding-top:0; }
.section-head{ max-width:660px; margin-bottom:52px; }
.section-head h2{ margin-top:18px; }
.section-head p{ margin-top:20px; font-size:16.5px; }

/* ---------- reveal ----------
   Driven by an animation, not a transition, and by `translate` rather than
   `transform`. The group selector (.js [data-reveal-group].in-view > *)
   outranks every component rule, so doing this with transition+transform
   silently cancelled both the hover lifts and the hover easing on
   .tier / .service-card / .work-card. An animation touches neither
   property, so components keep full control of their own interactions. */
@keyframes revealUp{
  from{ opacity:0; translate:0 20px; }
  to  { opacity:1; translate:none; }
}
@media (prefers-reduced-motion: no-preference){
  .js [data-reveal],
  .js [data-reveal-group] > *{ opacity:0; }
  .js [data-reveal].in-view{ animation:revealUp .78s cubic-bezier(.16,1,.3,1) both; }
  .js [data-reveal-group].in-view > *{ animation:revealUp .68s cubic-bezier(.16,1,.3,1) both; }
  /* Stagger runs deep enough for the widest group on the page (6 client
     logo slots); shorter groups simply never reach the later steps. */
  .js [data-reveal-group].in-view > *:nth-child(1){ animation-delay:0s; }
  .js [data-reveal-group].in-view > *:nth-child(2){ animation-delay:.07s; }
  .js [data-reveal-group].in-view > *:nth-child(3){ animation-delay:.14s; }
  .js [data-reveal-group].in-view > *:nth-child(4){ animation-delay:.21s; }
  .js [data-reveal-group].in-view > *:nth-child(5){ animation-delay:.28s; }
  .js [data-reveal-group].in-view > *:nth-child(6){ animation-delay:.35s; }
  .js [data-reveal-group].in-view > *:nth-child(7){ animation-delay:.42s; }
  .js [data-reveal-group].in-view > *:nth-child(8){ animation-delay:.49s; }
}
/* Anchor targets clear the sticky header instead of landing under it. */
section[id]{ scroll-margin-top:84px; }

/* =========================================================
   Hero
   ========================================================= */
.hero{ padding:76px 0 68px; }
.hero-copy{ max-width:800px; }
.hero h1{ margin-top:22px; }
.hero p.lead{ font-size:18px; line-height:1.62; max-width:560px; margin-top:26px; }
.hero-cta{ display:flex; gap:12px; margin-top:34px; flex-wrap:wrap; }
.hero-cta .btn{ padding:15px 28px; }
.proof{ margin-top:34px; }
.proof-text{ font-size:15px; max-width:490px; line-height:1.62; }
.proof-text b{ color:var(--ink); font-weight:500; }

/* =========================================================
   SIGNATURE — the live overlap instrument
   Two working days as two translucent bands. Where they cross the
   browser multiplies them, so the shared window is literally the
   colour the two days make together. Real data, not decoration.
   ========================================================= */
.instrument{
  margin-top:58px;
  border-radius:var(--r-xl);
  padding:26px 28px 22px;
}
.oi-head{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; margin-bottom:22px;
}
.oi-clock{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.oi-clock .oi-label{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}
.oi-clock .oi-time{
  font-family:'Cabinet Grotesk',sans-serif; font-weight:300; font-size:32px;
  letter-spacing:-0.035em; font-variant-numeric:tabular-nums; line-height:1; color:var(--ink);
}
.oi-clock[data-side="pk"]{ text-align:right; align-items:flex-end; }

.oi-status{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; font-weight:500;
  padding:8px 15px; border-radius:100px; white-space:nowrap;
  background:rgba(31,111,92,0.10); color:var(--teal-deep); border:1px solid rgba(31,111,92,0.22);
}
.oi-status.off{ background:rgba(21,23,27,0.05); color:var(--ink-3); border-color:var(--hair); }

.oi-track{
  position:relative; height:88px; border-radius:var(--r-md);
  background:var(--white); border:1px solid var(--hair-soft);
  overflow:hidden; isolation:isolate;
}
.oi-seg{ position:absolute; top:0; bottom:0; mix-blend-mode:multiply; }
.oi-seg-us{ left:37.5%; width:37.5%; background:rgba(232,163,61,0.42); }
.oi-seg-pk{ left:25%;   width:37.5%; background:rgba(31,111,92,0.30); }
@media (prefers-reduced-motion: no-preference){
  .js .oi-seg{ transform:scaleX(0); transform-origin:left center; transition:transform 1s cubic-bezier(.16,1,.3,1); }
  .js .instrument.in-view .oi-seg{ transform:none; }
  .js .instrument.in-view .oi-seg-us{ transition-delay:.14s; }
}
.oi-shared{
  position:absolute; left:37.5%; width:25%; top:0; bottom:0; z-index:2;
  border-left:1px solid rgba(21,23,27,0.22); border-right:1px solid rgba(21,23,27,0.22);
  display:flex; align-items:center; justify-content:center;
}
.oi-shared span{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink); font-weight:500;
  background:rgba(255,255,255,0.9); padding:5px 11px; border-radius:100px; white-space:nowrap;
  box-shadow:0 2px 8px -3px rgba(21,23,27,0.3);
}
.oi-now{ position:absolute; top:-5px; bottom:-5px; width:1.5px; background:var(--ink); z-index:3; }
.oi-now::after{
  content:""; position:absolute; top:-3px; left:50%; transform:translateX(-50%);
  width:7px; height:7px; border-radius:50%; background:var(--ink);
}

.oi-scale{
  display:flex; justify-content:space-between; margin-top:11px;
  font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.oi-legend{
  display:flex; gap:24px; flex-wrap:wrap; margin-top:18px;
  padding-top:18px; border-top:1px solid var(--hair-soft);
}
.oi-legend .leg{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-2); }
.oi-legend .swatch{ width:11px; height:11px; border-radius:3px; flex-shrink:0; }
.oi-legend .swatch.us{ background:rgba(232,163,61,0.75); }
.oi-legend .swatch.pk{ background:rgba(31,111,92,0.55); }
.oi-legend .swatch.both{ background:#8A7A46; }

/* =========================================================
   Client logo strip
   ========================================================= */
.clients{ padding:56px 0; }
.clients-head{
  display:flex; align-items:center; gap:20px; margin-bottom:30px;
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.clients-head .rule{ height:1px; background:var(--hair); flex:1; }
.clients-row{
  display:grid; grid-template-columns:repeat(6,1fr); gap:16px; align-items:center;
}
.client-slot{ height:56px; font-size:9.5px; }
.client-slot img{ max-height:32px; width:auto; object-fit:contain; opacity:.62; }

/* =========================================================
   About
   ========================================================= */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.about-copy h2{ margin-top:18px; }
.about-copy p{ font-size:16.5px; max-width:490px; margin-top:20px; }
.stat-list{ display:flex; flex-direction:column; }
.stat-item{ display:flex; gap:18px; align-items:flex-start; padding:24px 0; border-top:1px solid var(--hair-soft); }
.stat-item:first-child{ border-top:none; padding-top:0; }
.stat-icon{
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  background:var(--white); border:1px solid var(--hair-soft);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px -8px rgba(21,23,27,0.4);
}
.stat-item h3{ font-size:17px; margin-bottom:8px; }
.stat-item p{ font-size:14.5px; }

/* =========================================================
   Services
   ========================================================= */
.services-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.service-card{
  border-radius:var(--r-lg); padding:34px 32px;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.service-card:hover{ transform:translateY(-4px); box-shadow:var(--lift); }
.service-icon{
  width:42px; height:42px; border-radius:12px; margin-bottom:24px;
  display:flex; align-items:center; justify-content:center;
  background:var(--white); border:1px solid var(--hair-soft);
}
.service-card h3{ font-size:22px; margin-bottom:12px; }
.service-card p{ font-size:14.5px; }

.stack-strip{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  margin-top:30px; padding-top:26px; border-top:1px solid var(--hair-soft);
}
.stack-label{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}
.stack-items{ display:flex; gap:9px; flex-wrap:wrap; }
.stack-items span{
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-2);
  padding:7px 13px; background:var(--white); border:1px solid var(--hair-soft); border-radius:100px;
}

/* =========================================================
   Selected work
   ========================================================= */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.work-card{ border-radius:var(--r-lg); padding:14px; transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.work-card:hover{ transform:translateY(-4px); box-shadow:var(--lift); }
.work-shot{ aspect-ratio:4/3; border-radius:var(--r-sm); overflow:hidden; }
.work-shot img{ width:100%; height:100%; object-fit:cover; }
.work-meta{ padding:18px 10px 8px; }
.work-meta h3{ font-size:18px; margin-bottom:6px; }
.work-meta p{ font-size:13.5px; }
.work-tags{ display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; }
.work-tags span{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--ink-3);
  padding:4px 10px; border:1px solid var(--hair); border-radius:100px;
}

/* =========================================================
   The overlap model
   ========================================================= */
.spotlight-section{ border-radius:var(--r-xl); padding:64px 56px; }
.spotlight-section .section-head{ margin-bottom:0; }
.spotlight-section .section-head p{ max-width:540px; }

.timeline-wrap{ margin-top:46px; }
.timeline{
  position:relative; height:76px; border-radius:var(--r-md);
  background:var(--white); border:1px solid var(--hair-soft);
  overflow:hidden; isolation:isolate;
}
.tl-band{ position:absolute; top:0; bottom:0; mix-blend-mode:multiply; }
.tl-band.us{ background:rgba(232,163,61,0.42); }
.tl-band.pk{ background:rgba(31,111,92,0.30); }
.tl-band.shared{
  mix-blend-mode:normal; background:transparent; z-index:2;
  border-left:1px solid rgba(21,23,27,0.22); border-right:1px solid rgba(21,23,27,0.22);
  display:flex; align-items:center; justify-content:center;
}
.tl-band.shared span{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink); font-weight:500;
  background:rgba(255,255,255,0.9); padding:5px 11px; border-radius:100px; white-space:nowrap;
  box-shadow:0 2px 8px -3px rgba(21,23,27,0.3);
}
@media (prefers-reduced-motion: no-preference){
  .js .tl-band.us,.js .tl-band.pk{ transform:scaleX(0); transform-origin:left center; transition:transform 1s cubic-bezier(.16,1,.3,1); }
  .js .timeline.in-view .tl-band.us,.js .timeline.in-view .tl-band.pk{ transform:none; }
  .js .timeline.in-view .tl-band.us{ transition-delay:.14s; }
}
.timeline-hours{
  display:flex; justify-content:space-between; margin-top:11px;
  font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.timeline-legend{ display:flex; gap:24px; margin-top:22px; flex-wrap:wrap; }
.timeline-legend .leg{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-2); }
.timeline-legend .swatch{ width:11px; height:11px; border-radius:3px; flex-shrink:0; }
.timeline-legend .swatch-hatch{ background:#8A7A46; }

.spotlight-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:50px; }
.spotlight-stat{ border-top:1px solid var(--hair); padding-top:20px; }
.spotlight-stat .big{
  font-family:'Cabinet Grotesk',sans-serif; font-size:40px; font-weight:300;
  letter-spacing:-0.035em; line-height:1; color:var(--ink);
}
.spotlight-stat .lab{ font-size:13.5px; color:var(--ink-2); margin-top:10px; line-height:1.55; }

/* =========================================================
   Team
   ========================================================= */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.team-card{ border-radius:var(--r-lg); padding:14px; }
.team-photo{ aspect-ratio:5/4; border-radius:var(--r-sm); overflow:hidden; margin-bottom:20px; }
.team-photo img{ width:100%; height:100%; object-fit:cover; }
.team-body{ padding:0 12px 12px; }
.team-card h3{ font-size:19px; margin-bottom:11px; }
.team-card p{ font-size:14.5px; }

/* =========================================================
   Process
   ========================================================= */
.process-list{ display:flex; flex-direction:column; }
.process-item{
  display:grid; grid-template-columns:60px 1fr 1.15fr; gap:30px; align-items:start;
  padding:32px 0; border-top:1px solid var(--hair-soft);
}
.process-item:last-child{ border-bottom:1px solid var(--hair-soft); }
.process-item .step{
  font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--amber-deep);
  letter-spacing:.08em; padding-top:5px;
}
.process-item h3{ font-size:23px; }
.process-item p{ font-size:14.5px; max-width:430px; }

/* =========================================================
   Engagement
   ========================================================= */
.tiers-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.tier{
  border-radius:var(--r-lg); padding:32px 30px;
  display:flex; flex-direction:column; position:relative;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.tier.highlight{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(232,163,61,0.26), transparent 62%),
    rgba(255,255,255,0.78);
  border-color:rgba(232,163,61,0.42);
}

/* --- interaction ---
   The whole card is the target, not just the button at the bottom. The
   button stays the real link; a stretched overlay extends its hit area
   across the card, and :focus-within moves the ring onto the card so
   keyboard and pointer users get the same affordance. */
.tier .btn-block::after{
  content:""; position:absolute; inset:0; z-index:1; border-radius:var(--r-lg);
}
.tier:hover,
.tier:focus-within{
  transform:translateY(-6px);
  box-shadow:var(--lift);
  border-color:rgba(31,111,92,0.34);
}
.tier.highlight:hover,
.tier.highlight:focus-within{ border-color:rgba(232,163,61,0.62); }
.tier:active{ transform:translateY(-3px); transition-duration:.1s; }
.tier:focus-within{ outline:2px solid var(--teal); outline-offset:3px; }
.tier.highlight:focus-within{ outline-color:var(--amber-deep); }
.tier .btn-block:focus-visible{ outline:none; }
.tier .btn-block{ transition:background .2s ease, color .2s ease, transform .2s ease; }
.tier:hover .btn-outline{ background:var(--white); border-color:var(--white); }
@media (prefers-reduced-motion: reduce){
  .tier,.tier:hover,.tier:focus-within,.tier:active{ transform:none; }
}
.ribbon{
  position:absolute; top:24px; right:26px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; background:var(--ink); color:var(--ground);
  padding:5px 11px; border-radius:100px; font-weight:500;
}
.tier-icon{
  width:42px; height:42px; border-radius:12px; margin-bottom:22px;
  display:flex; align-items:center; justify-content:center;
  background:var(--white); border:1px solid var(--hair-soft);
  transition:background .28s ease, border-color .28s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
/* Icon colour is driven here, never from inline stroke attributes — CSS
   beats presentation attributes, so a stale attr can't blank an icon out
   the way stroke="#fff" did on the highlighted card. */
.tier-icon svg *{ stroke:var(--teal); transition:stroke .28s ease; }
.tier.highlight .tier-icon svg *{ stroke:var(--amber-deep); }
.tier li svg *{ stroke:var(--teal); }
.tier.highlight li svg *{ stroke:var(--amber-deep); }
.tier:hover .tier-icon,
.tier:focus-within .tier-icon{
  transform:scale(1.07);
  background:rgba(31,111,92,0.09); border-color:rgba(31,111,92,0.26);
}
.tier.highlight:hover .tier-icon,
.tier.highlight:focus-within .tier-icon{
  background:rgba(232,163,61,0.16); border-color:rgba(232,163,61,0.42);
}
@media (prefers-reduced-motion: reduce){
  .tier:hover .tier-icon,.tier:focus-within .tier-icon{ transform:none; }
}
.tier h3{ font-size:22px; margin-bottom:10px; }
.tier .tier-note{ font-size:14px; color:var(--ink-2); margin-bottom:22px; min-height:44px; line-height:1.55; }
.tier .price{
  font-family:'Cabinet Grotesk',sans-serif; font-size:32px; font-weight:300;
  letter-spacing:-0.035em; color:var(--ink);
}
.tier .price span{ font-family:'Switzer',sans-serif; font-size:14px; font-weight:400; color:var(--ink-3); letter-spacing:0; }
.tier-divider{ height:1px; background:var(--hair-soft); margin:22px 0; }
.tier ul{ margin:0 0 28px; flex:1; display:flex; flex-direction:column; gap:12px; }
.tier li{ font-size:14px; display:flex; gap:11px; color:var(--ink-2); align-items:flex-start; line-height:1.5; }
.tier li svg{ flex-shrink:0; margin-top:3px; }

/* =========================================================
   Book a call
   ========================================================= */
.book-section{ border-radius:var(--r-xl); padding:60px 56px; }
.book-grid{ display:grid; grid-template-columns:1fr .9fr; gap:56px; align-items:center; }
.book-grid h2{ margin-top:18px; }
.book-badges{ display:flex; gap:10px; margin-top:28px; flex-wrap:wrap; }
.book-badge{
  font-size:13px; font-weight:400; color:var(--ink-2);
  background:var(--white); border:1px solid var(--hair-soft);
  border-radius:100px; padding:10px 16px;
}
.steps-card{ background:var(--white); border:1px solid var(--hair-soft); border-radius:var(--r-lg); padding:30px; }
.step-row{ display:flex; gap:16px; padding:17px 0; border-top:1px solid var(--hair-soft); }
.step-row:first-of-type{ border-top:none; padding-top:4px; }
.step-num{
  width:27px; height:27px; border-radius:50%; flex-shrink:0;
  background:var(--ink); color:var(--ground);
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:11.5px;
}
.step-row h4{ font-size:15px; margin-bottom:5px; }
.step-row p{ font-size:13.5px; }

/* =========================================================
   Contact CTA
   ========================================================= */
.cta-section{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  padding:64px 56px;
  display:grid; grid-template-columns:1fr auto; gap:46px; align-items:center;
  background:
    radial-gradient(60% 130% at 6% 100%, rgba(31,111,92,0.14), transparent 68%),
    radial-gradient(60% 130% at 94% 0%,  rgba(232,163,61,0.20), transparent 68%),
    rgba(255,255,255,0.55);
}
.cta-section h2{ margin-top:18px; }
.cta-section p{ margin-top:18px; max-width:450px; }
.cta-form{ display:flex; gap:10px; }
.cta-form input{
  padding:14px 20px; border-radius:100px; border:1px solid var(--hair);
  min-width:250px; background:var(--white); color:var(--ink);
  font-family:'Switzer',sans-serif; font-size:14.5px;
}
.cta-form input::placeholder{ color:var(--ink-3); }
.cta-form input:focus{ outline:none; border-color:var(--teal); }

/* =========================================================
   Footer — photographic band with the wordmark over it
   ========================================================= */
footer{ position:relative; margin-top:20px; }
/* No stock photography here. The band is the brand's own two light sources
   — your day and ours — meeting over a dark ground, which is the same idea
   the hero instrument states literally. Needs no asset, and can't be
   mistaken for a team photo we don't have. Drop a real wide team shot into
   .footer-photo > img later and it will layer in above this. */
.footer-photo{
  position:relative; min-height:380px; overflow:hidden;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  margin:0 var(--gut);
  display:flex; flex-direction:column; justify-content:flex-end;
  background:
    radial-gradient(58% 105% at 14% 8%,  rgba(232,163,61,0.30), transparent 64%),
    radial-gradient(58% 105% at 76% 4%,  rgba(31,111,92,0.38),  transparent 64%),
    radial-gradient(120% 70% at 50% 118%, rgba(8,10,14,0.72),   transparent 72%),
    #171B21;
}
.footer-photo > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
/* Keeps footer text legible whether the band is the gradient field or a
   real photograph dropped in later. */
.footer-photo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(12,14,18,0.12) 0%, rgba(12,14,18,0.55) 58%, rgba(12,14,18,0.82) 100%);
}
.footer-inner{ position:relative; z-index:2; width:100%; padding:64px 48px 34px; }
.footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:48px; padding-bottom:44px; }
.footer-photo .logo{ color:#fff; margin-bottom:14px; }
.footer-brand p{ font-size:14px; max-width:300px; color:rgba(255,255,255,0.72); }
.footer-subscribe{ display:flex; gap:8px; margin-top:22px; max-width:340px; }
.footer-subscribe input{
  padding:11px 17px; border-radius:100px; border:1px solid rgba(255,255,255,0.28);
  background:rgba(255,255,255,0.12); color:#fff; font-size:13.5px; min-width:0; flex:1;
  font-family:'Switzer',sans-serif;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.footer-subscribe input::placeholder{ color:rgba(255,255,255,0.55); }
.footer-subscribe input:focus{ outline:none; border-color:#fff; }
.footer-subscribe .btn-dark{ background:#fff; color:var(--ink); }
.footer-subscribe .btn-dark:hover{ background:var(--ground); }
.footer-col h4{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,0.55); font-weight:400; margin-bottom:17px;
}
.footer-col a{ display:block; font-size:14px; color:rgba(255,255,255,0.78); margin-bottom:11px; transition:color .18s ease; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding-top:22px; font-size:13px; color:rgba(255,255,255,0.55); flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,0.16);
}
.footer-clock{ font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; }
.footer-clock b{ color:#fff; font-weight:500; }
.footer-wordmark{
  font-family:'Cabinet Grotesk',sans-serif; font-weight:500; letter-spacing:-0.045em;
  font-size:min(17vw,190px); line-height:0.86; color:#fff; opacity:0.16;
  white-space:nowrap; text-align:center; padding:8px 0 4px; user-select:none;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px){
  .nav-links{ gap:22px; font-size:13.5px; }
  /* Scoped to the header bar only — the mobile panel has room for both
     CTAs and should keep them. */
  header .nav-cta .btn-outline{ display:none; }
  .clients-row{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 960px){
  :root{ --gut:28px; }
  .nav-links{ display:none; }
  .menu-toggle{ display:flex; }
  .about-grid{ grid-template-columns:1fr; gap:44px; }
  .services-grid{ grid-template-columns:1fr; }
  .work-grid{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:1fr; }
  .tiers-grid{ grid-template-columns:1fr; max-width:470px; margin:0 auto; }
  .book-grid{ grid-template-columns:1fr; gap:38px; }
  .cta-section{ grid-template-columns:1fr; }
  .spotlight-stats{ grid-template-columns:1fr; gap:0; }
  .spotlight-stat{ padding:20px 0; }
  .process-item{ grid-template-columns:46px 1fr; gap:20px; }
  .process-item p{ grid-column:2; margin-top:9px; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:32px; }
  .spotlight-section{ padding:46px 32px; }
  .book-section{ padding:44px 32px; }
  .cta-section{ padding:48px 32px; }
  .footer-inner{ padding:52px 34px 30px; }
}
@media (max-width: 640px){
  :root{ --gut:20px; }
  section{ padding:66px 0; }
  .hero{ padding:52px 0 56px; }
  .hero p.lead{ font-size:16.5px; }
  .hero-cta .btn{ flex:1; justify-content:center; }
  .instrument{ padding:20px 18px 18px; margin-top:42px; border-radius:var(--r-lg); }
  .oi-head{ gap:14px; }
  .oi-clock .oi-time{ font-size:25px; }
  .oi-status{ order:3; width:100%; text-align:center; }
  .oi-track{ height:70px; }
  .oi-shared span,.tl-band.shared span{ font-size:9px; padding:4px 8px; }
  .oi-scale span:nth-child(even),.timeline-hours span:nth-child(even){ display:none; }
  .oi-legend{ gap:12px; }
  .clients{ padding:44px 0; }
  .clients-row{ grid-template-columns:repeat(2,1fr); }
  .service-card{ padding:28px 24px; }
  .spotlight-section{ padding:36px 22px; border-radius:var(--r-lg); }
  .timeline{ height:62px; }
  .book-section,.cta-section{ padding:34px 22px; border-radius:var(--r-lg); }
  .footer-photo{ margin:0; border-radius:0; min-height:0; }
  .footer-inner{ padding:48px 24px 28px; }
  .footer-top{ grid-template-columns:1fr; gap:28px; }
  .cta-form{ flex-direction:column; align-items:stretch; }
  .cta-form input{ min-width:0; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:10px; }
}