:root {
  --bg-primary: #071522;
  --bg-secondary: #0b1d2e;
  --bg-deep: #04101b;
  --surface: #ffffff;
  --surface-soft: #f5f7fa;
  --surface-blue: #eaf3fc;
  --brand-blue: #1374d4;
  --brand-blue-bright: #2b94f2;
  --brand-yellow: #f5ab00;
  --brand-gold: #ffc33d;
  --text-primary: #101c29;
  --text-secondary: #5e6b79;
  --text-light: #f8fbff;
  --text-light-muted: #9eafc0;
  --border-color: #dde3e9;
  --border-dark: rgba(255, 255, 255, .12);
  --shadow-sm: 0 16px 42px rgba(7, 21, 34, .08);
  --shadow-lg: 0 34px 90px rgba(7, 21, 34, .2);
  --radius-sm: 14px;
  --radius-md: 24px;
  --radius-lg: 36px;
  --font-display: "Manrope", sans-serif;
  --font-body: "DM Sans", sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body, button, input, select, textarea { font-family: var(--font-body); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--brand-gold); color: var(--bg-primary); }

:focus-visible {
  outline: 3px solid var(--brand-gold);
  outline-offset: 4px;
  border-radius: 5px;
}
.skip-link {
  position: fixed;
  z-index: 10000;
  top: 14px;
  left: 14px;
  padding: 11px 16px;
  background: #fff;
  color: var(--bg-primary);
  font-weight: 800;
  transform: translateY(-160%);
  transition: transform .2s;
}
.skip-link:focus { transform: none; }
.container-xxl { max-width: 1440px; padding-inline: clamp(20px, 3vw, 46px); }
section[id] { scroll-margin-top: 64px; }
.section-space { padding-block: clamp(84px, 8vw, 132px); }

.cursor-glow {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  width: 520px;
  height: 520px;
  pointer-events: none;
  border-radius: 50%;
  opacity: .7;
  background: radial-gradient(circle, rgba(19, 116, 212, .09), transparent 68%);
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
}

/* Shared type and actions */
.section-intro { margin-bottom: clamp(46px, 6vw, 82px); }
.split-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  align-items: end;
  gap: clamp(36px, 7vw, 110px);
}
.narrow-intro { max-width: 900px; }
.section-label,
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: #526172;
  font: 800 .72rem/1 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.section-label > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--brand-blue);
}
.section-label > span::after,
.eyebrow > span {
  width: 34px;
  height: 2px;
  background: var(--brand-yellow);
  content: "";
}
.section-label-light { color: var(--text-light-muted); }
.section-label-light > span { color: var(--brand-gold); }
.section-title {
  max-width: 980px;
  margin: 0;
  color: var(--text-primary);
  font: 800 clamp(2.65rem, 4.7vw, 5.15rem)/1.02 var(--font-display);
  letter-spacing: -.065em;
}
.section-title em { color: var(--brand-blue); font-style: normal; }
.section-title-light { color: var(--text-light); }
.section-title-light em { color: var(--brand-gold); }
.section-lead {
  max-width: 600px;
  margin: 0;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.2vw, 1.16rem);
  line-height: 1.8;
}
.section-lead-light { color: var(--text-light-muted); }
.btn {
  min-height: 52px;
  border-radius: 999px;
  font: 800 .86rem/1 var(--font-display);
  transition: transform .3s var(--ease-out), box-shadow .3s, background-color .3s, color .3s, border-color .3s;
}
.btn i, .text-link i, .promise-bar a i { margin-left: 9px; transition: transform .3s var(--ease-out); }
.btn:hover i, .text-link:hover i, .promise-bar a:hover i { transform: translateX(4px); }
.btn-brand {
  border: 1px solid var(--brand-gold);
  background: linear-gradient(135deg, var(--brand-gold), var(--brand-yellow));
  box-shadow: 0 15px 38px rgba(245, 171, 0, .24);
  color: #151b21;
  padding-inline: 25px;
}
.btn-brand:hover { border-color: #ffd465; background: #ffd05b; box-shadow: 0 20px 48px rgba(245, 171, 0, .32); color: #151b21; transform: translateY(-2px); }
.btn-ghost {
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  padding-inline: 25px;
  backdrop-filter: blur(12px);
}
.btn-ghost:hover { border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .13); color: #fff; transform: translateY(-2px); }
.btn-dark-soft { margin-top: 26px; border: 1px solid var(--bg-primary); background: var(--bg-primary); color: #fff; padding-inline: 24px; }
.btn-dark-soft:hover { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; transform: translateY(-2px); }
.text-link {
  display: inline-flex;
  align-items: center;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  color: var(--text-primary);
  font: 800 .83rem/1.3 var(--font-display);
}
.text-link-light { color: #fff; }

/* Navigation */
#mainNav {
  z-index: 1000;
  padding-block: 18px;
  border-bottom: 1px solid transparent;
  transition: padding .35s, background-color .35s, border-color .35s, box-shadow .35s;
}
#mainNav.scrolled {
  padding-block: 8px;
  border-color: rgba(255, 255, 255, .1);
  background: rgba(4, 16, 27, .91);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .18);
  backdrop-filter: blur(18px);
}
.navbar-brand { display: inline-flex; align-items: center; padding: 0; }
.navbar-brand img { width: 115px; height: 52px; object-fit: contain; }
.navbar-nav { gap: 3px; }
.nav-link {
  position: relative;
  padding: 11px 13px !important;
  color: #b4c0cc !important;
  font: 700 .78rem/1 var(--font-display);
  letter-spacing: .015em;
}
.nav-link::after {
  position: absolute;
  right: 13px;
  bottom: 5px;
  left: 13px;
  height: 2px;
  background: var(--brand-gold);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.nav-link:hover, .nav-link.active { color: #fff !important; }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-cta { min-height: 44px; padding: 13px 20px; }
.navbar-toggler {
  display: none;
  width: 46px;
  height: 46px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  box-shadow: none !important;
}
.navbar-toggler span { display: block; width: 20px; height: 2px; margin: 4px auto; border-radius: 2px; background: #fff; }

/* Hero */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: max(760px, 100svh);
  align-items: center;
  overflow: hidden;
  background: var(--bg-primary);
  color: #fff;
}
.hero-media { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% center; }
.hero-shade {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 12, 21, .98) 0%, rgba(5, 20, 33, .92) 36%, rgba(5, 20, 33, .45) 68%, rgba(5, 20, 33, .22) 100%),
    linear-gradient(0deg, rgba(3, 13, 22, .78), transparent 45%);
}
.hero-grid {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .45;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(90deg, #000, transparent 78%);
}
.hero-inner { width: 100%; padding-top: 126px; padding-bottom: 112px; }
.eyebrow { color: #c2cfdb; }
.hero-title {
  max-width: 1050px;
  margin: 24px 0 28px;
  font: 800 clamp(3.8rem, 6vw, 6.75rem)/.95 var(--font-display);
  letter-spacing: -.075em;
  text-wrap: balance;
}
.hero-title em { color: var(--brand-gold); font-style: normal; }
.hero-copy { max-width: 720px; margin: 0; color: #c0ccd7; font-size: clamp(1.04rem, 1.3vw, 1.25rem); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-actions .btn { min-height: 58px; padding-inline: 28px; }
.hero-trust { display: flex; align-items: stretch; gap: 0; margin-top: 48px; }
.hero-trust > div { display: flex; min-width: 175px; flex-direction: column; padding: 0 28px; border-left: 1px solid rgba(255, 255, 255, .14); }
.hero-trust > div:first-child { padding-left: 0; border-left: 0; }
.hero-trust strong { color: #fff; font: 800 1.5rem/1 var(--font-display); }
.hero-trust span { margin-top: 7px; color: #91a1b2; font-size: .7rem; }
.hero-side-note { position: absolute; right: 25px; bottom: 50%; color: rgba(255, 255, 255, .5); font: 700 .61rem/1 var(--font-display); letter-spacing: .24em; text-transform: uppercase; transform: rotate(90deg) translateX(50%); transform-origin: right bottom; }
.scroll-cue { position: absolute; bottom: 35px; left: 50%; display: flex; align-items: center; gap: 11px; color: #8fa0b2; font: 700 .61rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; transform: translateX(-50%); }
.scroll-cue span { position: relative; width: 42px; height: 1px; overflow: hidden; background: rgba(255, 255, 255, .18); }
.scroll-cue span::after { position: absolute; inset: 0; background: var(--brand-gold); content: ""; animation: scrollLine 2s ease-in-out infinite; transform: translateX(-100%); }
@keyframes scrollLine { 50%, 100% { transform: translateX(100%); } }

/* Promise and technology */
.promise-bar { position: relative; z-index: 2; background: var(--brand-yellow); }
.promise-bar .container-xxl { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; min-height: 88px; }
.promise-mark { color: rgba(7, 21, 34, .36); font: 800 .7rem/1 var(--font-display); letter-spacing: .16em; }
.promise-bar p { margin: 0; color: #161a1e; font: 800 clamp(.9rem, 1.1vw, 1.06rem)/1.45 var(--font-display); }
.promise-bar a { white-space: nowrap; color: #121820; font: 800 .75rem/1 var(--font-display); }
.technology-strip { overflow: hidden; border-bottom: 1px solid var(--border-color); background: #fff; }
.marquee-track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.tech-set { display: flex; height: 80px; align-items: center; flex-shrink: 0; gap: 27px; padding-right: 27px; }
.tech-set span { color: #293746; font: 800 .83rem/1 var(--font-display); letter-spacing: .02em; }
.tech-set i { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-yellow); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Services */
.services-section { background: #fff; }
.service-stack { display: grid; gap: clamp(54px, 8vw, 108px); }
.service-panel { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(40px, 8vw, 120px); }
.service-panel-reverse .service-visual { order: 2; }
.service-panel-reverse .service-content { order: 1; }
.service-visual {
  position: relative;
  display: grid;
  min-height: 510px;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #eef6ff;
  box-shadow: inset 0 0 0 1px rgba(19, 116, 212, .09);
}
.service-visual::before, .service-visual::after { position: absolute; border-radius: 50%; content: ""; }
.service-visual::before { width: 340px; height: 340px; border: 1px solid rgba(19, 116, 212, .12); }
.service-visual::after { width: 220px; height: 220px; background: rgba(255, 255, 255, .65); box-shadow: 0 24px 70px rgba(19, 116, 212, .12); }
.service-visual img { position: relative; z-index: 2; width: min(45%, 240px); height: auto; filter: drop-shadow(0 22px 32px rgba(7, 21, 34, .12)); transition: transform .7s var(--ease-out); }
.service-panel:hover .service-visual img { transform: translateY(-8px) scale(1.04); }
.service-number { position: absolute; z-index: 3; top: 28px; left: 30px; color: rgba(16, 28, 41, .48); font: 800 .75rem/1 var(--font-display); letter-spacing: .1em; }
.service-visual-blue { background: #dbeeff; }
.service-visual-dark { background: #0d2335; }
.service-visual-dark::before { border-color: rgba(255, 255, 255, .12); }
.service-visual-dark::after { background: rgba(19, 116, 212, .18); }
.service-visual-dark .service-number { color: rgba(255, 255, 255, .65); }
.service-visual-cream { background: #fff5dc; }
.service-visual-cream::before { border-color: rgba(245, 171, 0, .24); }
.service-visual-gold { background: #f5b61f; }
.service-visual-gold::before { border-color: rgba(7, 21, 34, .14); }
.service-content { max-width: 680px; }
.service-kicker { margin: 0 0 14px; color: var(--brand-blue); font: 800 .73rem/1.3 var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.service-content h3 { margin: 0 0 22px; font: 800 clamp(2.3rem, 4vw, 4.1rem)/1 var(--font-display); letter-spacing: -.055em; }
.service-content > p:not(.service-kicker) { margin: 0 0 18px; color: var(--text-secondary); font-size: 1rem; line-height: 1.78; }
.service-content .service-note { padding-left: 18px; border-left: 3px solid var(--brand-yellow); color: #2c3a48 !important; font-weight: 700; }
.capability-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 25px; margin: 26px 0 30px; padding: 0; list-style: none; }
.capability-list li { position: relative; padding-left: 18px; color: #394959; font-size: .87rem; }
.capability-list li::before { position: absolute; top: .62em; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-yellow); content: ""; }

/* Statistics */
.stats-section { background: var(--surface-soft); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--border-color); }
.stat { display: flex; min-height: 210px; flex-direction: column; align-items: center; justify-content: center; border-left: 1px solid var(--border-color); text-align: center; }
.stat:first-child { border-left: 0; }
.stat strong { color: var(--text-primary); font: 800 clamp(3.3rem, 5vw, 5.6rem)/1 var(--font-display); letter-spacing: -.065em; }
.stat strong span { color: var(--brand-blue); }
.stat > span { margin-top: 14px; color: var(--text-secondary); font: 700 .72rem/1.3 var(--font-display); letter-spacing: .11em; text-transform: uppercase; }

/* Standards and strengths */
.standards-section { background: #fff; }
.standard-stories { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; }
.standard-story { position: relative; display: grid; min-height: 430px; grid-template-columns: 160px 1fr; align-items: end; gap: clamp(28px, 4vw, 60px); overflow: hidden; border-radius: var(--radius-lg); padding: clamp(34px, 5vw, 66px); }
.standard-story::after { position: absolute; top: -100px; right: -80px; width: 320px; height: 320px; border: 1px solid currentColor; border-radius: 50%; content: ""; opacity: .08; }
.standard-story img { position: relative; z-index: 1; align-self: center; max-height: 130px; object-fit: contain; }
.standard-story > div { position: relative; z-index: 1; }
.standard-story > div > span { display: block; margin-bottom: 20px; font: 800 .68rem/1 var(--font-display); letter-spacing: .11em; text-transform: uppercase; }
.standard-story h3 { margin: 0 0 20px; font: 800 clamp(2rem, 3vw, 3.35rem)/1.05 var(--font-display); letter-spacing: -.05em; }
.standard-story p { max-width: 600px; margin: 0; font-size: .98rem; line-height: 1.75; }
.standard-story-dark { background: var(--bg-secondary); color: #fff; box-shadow: var(--shadow-lg); }
.standard-story-dark > div > span, .standard-story-dark p { color: #a9b8c7; }
.standard-story-gold { background: var(--brand-yellow); color: #131a21; }
.standard-story-gold > div > span, .standard-story-gold p { color: #3e3520; }
.strengths-wrap { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: clamp(50px, 8vw, 120px); margin-top: clamp(80px, 9vw, 135px); }
.strengths-heading h3 { max-width: 490px; margin: 0; font: 800 clamp(2rem, 3vw, 3.1rem)/1.12 var(--font-display); letter-spacing: -.045em; }
.strengths-flow { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; border-top: 1px solid var(--border-color); border-left: 1px solid var(--border-color); list-style: none; }
.strengths-flow li { display: flex; min-height: 150px; flex-direction: column; justify-content: space-between; padding: 24px; border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); font: 800 .96rem/1.25 var(--font-display); transition: background-color .3s, color .3s, transform .3s var(--ease-out); }
.strengths-flow li:nth-child(1), .strengths-flow li:nth-child(6) { grid-column: span 2; }
.strengths-flow li span { color: var(--brand-blue); font-size: .66rem; letter-spacing: .1em; }
.strengths-flow li:hover { z-index: 1; background: var(--bg-primary); color: #fff; transform: translateY(-5px); }

/* Process */
.process-section { position: relative; isolation: isolate; overflow: hidden; background: var(--bg-primary); color: #fff; }
.process-background { position: absolute; z-index: -1; inset: 0; opacity: .08; background: url("../images/process/strategy-banner.svg") center / cover no-repeat; }
.process-section::after { position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 70% 35%, rgba(19, 116, 212, .26), transparent 43%); content: ""; }
.process-intro { margin-bottom: 72px; }
.process-flow { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.process-flow::before { position: absolute; top: 76px; right: 7%; left: 7%; height: 1px; background: linear-gradient(90deg, var(--brand-yellow), rgba(255, 255, 255, .18), var(--brand-blue-bright)); content: ""; }
.process-step { position: relative; padding: 0 15px; text-align: center; }
.process-index { display: block; margin-bottom: 15px; color: #8fa0b2; font: 800 .63rem/1 var(--font-display); letter-spacing: .14em; }
.process-icon { position: relative; z-index: 1; display: grid; width: 88px; height: 88px; margin: 0 auto 25px; place-items: center; border: 1px solid var(--border-dark); border-radius: 50%; background: #0c2133; box-shadow: 0 0 0 9px var(--bg-primary); transition: transform .35s var(--ease-out), background-color .35s; }
.process-icon img { max-width: 55px; max-height: 55px; }
.process-step:hover .process-icon { background: var(--brand-yellow); transform: translateY(-6px); }
.process-step h3 { min-height: 48px; margin: 0 0 12px; font: 800 1rem/1.3 var(--font-display); }

/* Impact */
.impact-section { background: var(--surface-soft); }
.impact-shell { display: grid; grid-template-columns: minmax(340px, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(50px, 9vw, 135px); }
.impact-visual { position: relative; display: grid; min-height: 620px; place-items: end center; overflow: hidden; border-radius: var(--radius-lg); background: var(--bg-secondary); }
.impact-visual::before { position: absolute; inset: 12% -28% auto; height: 390px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%; content: ""; transform: rotate(-12deg); }
.impact-orbit { position: absolute; top: 16%; width: 240px; height: 240px; border: 1px dashed rgba(245, 171, 0, .38); border-radius: 50%; }
.impact-orbit::before, .impact-orbit::after { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--brand-yellow); content: ""; }
.impact-orbit::before { top: 25px; right: 25px; }
.impact-orbit::after { bottom: 16px; left: 46px; }
.impact-visual img { position: relative; z-index: 1; width: min(55%, 290px); height: auto; }
.impact-copy .section-lead { margin-top: 26px; }
.method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 40px; border-top: 1px solid var(--border-color); border-left: 1px solid var(--border-color); }
.method-item { min-height: 138px; padding: 24px; border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.method-item span { color: var(--brand-blue); font: 800 .65rem/1 var(--font-display); letter-spacing: .12em; }
.method-item h3 { margin: 28px 0 0; font: 800 1rem/1.3 var(--font-display); }

/* Portfolio */
.portfolio-section { position: relative; overflow: hidden; padding-block: clamp(88px, 7vw, 116px); background: var(--bg-deep); color: #fff; }
.portfolio-section::before { position: absolute; top: 0; right: -15%; width: 50vw; height: 50vw; border-radius: 50%; background: radial-gradient(circle, rgba(19, 116, 212, .16), transparent 67%); content: ""; }
.portfolio-intro { position: relative; margin-bottom: clamp(40px, 4vw, 58px); }
.portfolio-intro .section-title { max-width: 940px; font-size: clamp(3.25rem, 5.2vw, 5.75rem); }
.portfolio-intro-copy { max-width: 520px; color: var(--text-light-muted); line-height: 1.75; }
.portfolio-intro-copy p { margin: 0 0 24px; }
.portfolio-editorial { position: relative; display: grid; gap: clamp(24px, 2.5vw, 38px); }
.project { margin: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius-lg); background: #0a1b2a; }
.project-visual { position: relative; margin: 0; overflow: hidden; background: #122237; }
.project-visual::after { position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .08); content: ""; pointer-events: none; }
.project-visual img { display: block; width: 100%; height: 100%; transition: transform .8s var(--ease-out); }
.project:hover .project-visual img { transform: scale(1.025); }
.project-visual-landscape { background: #122237; }
.project-visual-landscape img { object-fit: cover; }
.project-info { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; padding-top: 25px; }
.project-number { color: #6e8092; font: 800 .68rem/1 var(--font-display); letter-spacing: .14em; }
.project-info p { margin: 0 0 5px; color: #7f91a3; font: 700 .63rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.project-info h3 { margin: 0; font: 800 clamp(1.6rem, 2.7vw, 2.8rem)/1 var(--font-display); letter-spacing: -.045em; }
.technology-pill { padding: 9px 13px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; color: #cad4de; font: 700 .67rem/1 var(--font-display); }
.project-feature, .project-wide { display: grid; width: 100%; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .45fr); }
.project-feature .project-visual, .project-wide .project-visual { min-height: 480px; }
.project-feature .project-info, .project-wide .project-info { grid-template-columns: 1fr; align-content: center; align-items: start; gap: 28px; padding: clamp(34px, 4vw, 58px); }
.project-feature .project-info h3, .project-wide .project-info h3 { font-size: clamp(2rem, 3vw, 3.35rem); line-height: 1.05; overflow-wrap: anywhere; }
.project-feature .technology-pill, .project-wide .technology-pill { width: fit-content; }
.project-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(24px, 4vw, 60px); }
.project-portrait .project-visual { height: clamp(390px, 32vw, 510px); }
.project-portrait .project-visual img { object-fit: cover; object-position: top center; }
.project-portrait .project-info { padding: 24px 26px 27px; }
.project-atomic .project-visual { background: #1ca2e3; }
.project-success .project-visual { background: #1e1e1e; }
.project-wide { grid-template-columns: minmax(300px, .45fr) minmax(0, 1.55fr); }
.project-wide .project-visual { order: 2; }
.project-wide .project-info { order: 1; }

/* Testimonials */
.reviews-section { position: relative; padding-block: clamp(76px, 6vw, 98px); background: var(--surface-soft); }
.reviews-heading { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 60px; margin-bottom: 38px; }
.reviews-heading .section-title { max-width: 720px; font-size: clamp(3rem, 4.6vw, 5.1rem); }
.reviews-intro { max-width: 430px; justify-self: end; }
.reviews-intro p { margin: 0 0 18px; color: var(--text-secondary); line-height: 1.7; }
.client-story-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.client-story-card { position: relative; display: flex; min-height: 270px; flex-direction: column; align-items: flex-start; padding: 24px; overflow: hidden; border: 1px solid var(--border-color); border-radius: 24px; background: #fff; box-shadow: 0 10px 30px rgba(7, 21, 34, .05); transition: border-color .3s, box-shadow .3s, transform .3s var(--ease-out); }
.client-story-card::after { position: absolute; right: -70px; bottom: -85px; width: 180px; height: 180px; border: 1px solid rgba(19, 116, 212, .09); border-radius: 50%; content: ""; }
.client-story-card:hover { border-color: rgba(19, 116, 212, .45); box-shadow: 0 18px 44px rgba(7, 21, 34, .1); transform: translateY(-5px); }
.client-story-number { color: #8998a7; font: 800 .63rem/1 var(--font-display); letter-spacing: .13em; }
.client-story-arrow { position: absolute; top: 22px; right: 22px; color: var(--brand-blue); font-size: .72rem; }
.client-story-card > img { width: 78px; height: 78px; margin: 31px 0 22px; border-radius: 50%; object-fit: cover; object-position: center; box-shadow: 0 0 0 6px var(--surface-blue); }
.client-story-card > div { position: relative; z-index: 1; margin-top: auto; }
.client-story-card p { margin: 0 0 7px; color: var(--brand-blue); font: 800 .6rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.client-story-card h3 { margin: 0 0 7px; font: 800 clamp(1.25rem, 1.7vw, 1.7rem)/1.08 var(--font-display); letter-spacing: -.04em; }
.client-story-card div > span { color: var(--text-secondary); font-size: .76rem; }

/* FAQ */
.faq-section { background: var(--surface-soft); }
.faq-sticky { position: sticky; top: 132px; }
.faq-accordion { border-top: 1px solid #ccd4dc; }
.faq-accordion .accordion-item { border: 0; border-bottom: 1px solid #ccd4dc; border-radius: 0; background: transparent; }
.faq-accordion .accordion-button { padding: 28px 8px 28px 0; background: transparent; box-shadow: none; color: var(--text-primary); font: 800 clamp(1.04rem, 1.5vw, 1.25rem)/1.35 var(--font-display); }
.faq-accordion .accordion-button:not(.collapsed) { color: var(--brand-blue); }
.faq-accordion .accordion-button::after { width: 36px; height: 36px; border: 1px solid #ccd4dc; border-radius: 50%; background-image: none; content: "+"; display: grid; place-items: center; font: 500 1.25rem/1 var(--font-body); }
.faq-accordion .accordion-button:not(.collapsed)::after { content: "−"; transform: none; }
.faq-accordion .accordion-body { padding: 0 70px 30px 0; color: var(--text-secondary); font-size: .98rem; line-height: 1.75; }

/* Blog */
.blog-section { background: #fff; }
.blog-intro-copy { max-width: 520px; color: var(--text-secondary); line-height: 1.75; }
.blog-intro-copy p { margin: 0 0 22px; }
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(26px, 4vw, 56px); }
.blog-card { border-top: 1px solid var(--border-color); padding-top: 20px; }
.blog-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-soft); }
.blog-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.blog-card:hover .blog-image img { transform: scale(1.035); }
.blog-copy { padding: 27px 4px 0; }
.blog-copy time { display: block; margin-bottom: 14px; color: var(--brand-blue); font: 800 .68rem/1 var(--font-display); letter-spacing: .11em; text-transform: uppercase; }
.blog-copy h3 { margin: 0 0 24px; font: 800 clamp(1.55rem, 2.4vw, 2.45rem)/1.18 var(--font-display); letter-spacing: -.045em; }

/* Contact */
.contact-section { padding-block: clamp(76px, 7vw, 112px); background: var(--bg-primary); }
.contact-shell { overflow: hidden; border: 1px solid var(--border-dark); border-radius: var(--radius-lg); background: var(--bg-secondary); box-shadow: 0 36px 90px rgba(0, 0, 0, .22); }
.contact-details { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr); align-items: center; gap: clamp(48px, 7vw, 105px); padding: clamp(46px, 5vw, 72px); color: #fff; }
.contact-details::after { position: absolute; right: -180px; bottom: -180px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(19, 116, 212, .28), transparent 68%); content: ""; }
.contact-copy { position: relative; z-index: 1; }
.contact-copy .section-title { max-width: 680px; font-size: clamp(3.1rem, 4.8vw, 5.25rem); }
.contact-lead { max-width: 560px; margin: 25px 0 0; color: var(--text-light-muted); font-size: 1rem; line-height: 1.75; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.contact-actions .btn { min-height: 50px; }
.contact-call-btn { border: 1px solid rgba(255, 255, 255, .18); color: #fff; }
.contact-call-btn:hover { border-color: #fff; background: #fff; color: var(--bg-primary); }
.contact-list { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; }
.contact-list > a, .contact-list > div { display: flex; min-width: 0; align-items: center; gap: 13px; padding: 17px 0; border-top: 1px solid rgba(255, 255, 255, .08); color: #fff; }
.contact-list > a > span, .contact-list > div > span { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; color: var(--brand-gold); }
.contact-list small, .contact-list strong { display: block; }
.contact-list small { margin-bottom: 5px; color: #8497aa; font-size: .67rem; letter-spacing: .09em; text-transform: uppercase; }
.contact-list strong { max-width: 100%; font-size: .82rem; line-height: 1.45; overflow-wrap: anywhere; }

/* Footer */
.site-footer { background: var(--bg-deep); color: #fff; }
.footer-main { display: grid; grid-template-columns: 1.7fr .6fr .6fr .8fr; gap: clamp(35px, 6vw, 85px); padding-block: 78px 64px; }
.footer-brand-col img { width: 115px; height: 52px; object-fit: contain; }
.footer-brand-col p { max-width: 420px; margin: 24px 0 0; color: #778a9d; font-size: .87rem; line-height: 1.75; }
.footer-links h2, .footer-social h2 { margin: 0 0 21px; color: #8fa1b3; font: 800 .66rem/1 var(--font-display); letter-spacing: .13em; text-transform: uppercase; }
.footer-links a { display: block; width: fit-content; margin-top: 13px; color: #c0cad4; font-size: .81rem; }
.footer-links a:hover { color: var(--brand-gold); }
.footer-social > div { display: flex; flex-wrap: wrap; gap: 9px; }
.footer-social a { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; transition: background-color .25s, transform .25s; }
.footer-social a:hover { background: #fff; transform: translateY(-3px); }
.footer-social img { width: 18px; height: 18px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-block: 24px 30px; border-top: 1px solid rgba(255, 255, 255, .08); color: #66798d; font-size: .68rem; }
.back-to-top { position: fixed; z-index: 90; right: 24px; bottom: 24px; display: grid; width: 48px; height: 48px; place-items: center; border: 0; border-radius: 50%; background: var(--brand-yellow); box-shadow: 0 14px 36px rgba(0, 0, 0, .22); color: #151a20; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s, visibility .3s, transform .3s; }
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }

/* Reveal motion */
.reveal-up { opacity: 0; transform: translateY(28px); transition: opacity .78s ease, transform .78s var(--ease-out); }
.reveal-up.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .08s; }
.delay-2 { transition-delay: .16s; }
.delay-3 { transition-delay: .24s; }
.delay-4 { transition-delay: .32s; }
.delay-5 { transition-delay: .40s; }

/* Responsive */
@media (max-width: 1199.98px) {
  .hero-title { max-width: 900px; font-size: clamp(3.7rem, 6.7vw, 5.8rem); }
  .hero-side-note { display: none; }
  .service-panel { gap: 60px; }
  .service-visual { min-height: 450px; }
  .standard-story { min-height: 390px; grid-template-columns: 130px 1fr; }
  .strengths-wrap { grid-template-columns: 1fr; }
  .strengths-heading h3 { max-width: 780px; }
  .process-flow { grid-template-columns: repeat(3, 1fr); gap: 50px 20px; }
  .process-flow::before { display: none; }
  .project-portrait .project-visual { height: clamp(390px, 38vw, 470px); }
}

@media (max-width: 991.98px) {
  .navbar-toggler { display: block; }
  .navbar-collapse { margin-top: 10px; padding: 16px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; background: rgba(4, 16, 27, .98); box-shadow: 0 24px 60px rgba(0, 0, 0, .26); }
  .nav-link { padding: 12px 7px !important; }
  .nav-link::after { display: none; }
  .hero { min-height: 820px; }
  .hero-media { object-position: 72% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(3, 12, 21, .98), rgba(4, 16, 27, .85) 65%, rgba(4, 16, 27, .5)); }
  .hero-title { font-size: clamp(3.45rem, 8.5vw, 5.4rem); }
  .split-intro, .reviews-heading { grid-template-columns: 1fr; align-items: start; gap: 30px; }
  .split-intro .section-lead { max-width: 760px; }
  .service-panel { grid-template-columns: 1fr; gap: 38px; }
  .service-panel-reverse .service-visual, .service-panel-reverse .service-content { order: initial; }
  .service-visual { min-height: 430px; }
  .service-content { max-width: 800px; }
  .standard-stories { grid-template-columns: 1fr; }
  .standard-story { grid-template-columns: 150px 1fr; }
  .impact-shell { grid-template-columns: 1fr; }
  .impact-visual { min-height: 560px; }
  .impact-copy { max-width: 800px; }
  .project-feature, .project-wide { grid-template-columns: minmax(0, 1.25fr) minmax(270px, .75fr); }
  .project-wide { grid-template-columns: minmax(270px, .75fr) minmax(0, 1.25fr); }
  .project-pair { gap: 24px; }
  .project-portrait .project-visual { height: 420px; }
  .client-story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-sticky { position: static; }
  .contact-details { grid-template-columns: 1fr; gap: 40px; }
  .footer-main { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-social { grid-column: 2 / 4; }
}

@media (max-width: 767.98px) {
  .cursor-glow { display: none; }
  .section-space, .contact-section { padding-block: 76px; }
  .section-title { font-size: clamp(2.45rem, 11vw, 3.45rem); }
  .section-label { margin-bottom: 15px; }
  #mainNav { padding-block: 12px; }
  .navbar-brand img { width: 103px; height: auto; }
  .hero { min-height: 780px; }
  .hero-inner { padding-top: 132px; padding-bottom: 105px; }
  .hero-media { object-position: 70% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(3, 12, 21, .97), rgba(4, 16, 27, .79)), linear-gradient(0deg, rgba(3, 12, 21, .78), transparent); }
  .hero-grid { background-size: 58px 58px; }
  .hero-title { margin-top: 20px; font-size: clamp(2.85rem, 13.2vw, 4.1rem); line-height: .98; letter-spacing: -.065em; }
  .hero-copy { font-size: .98rem; line-height: 1.68; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .hero-trust { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 38px; }
  .hero-trust > div { min-width: 0; padding-inline: 12px; }
  .hero-trust strong { font-size: 1.2rem; }
  .hero-trust span { font-size: .59rem; line-height: 1.35; }
  .scroll-cue { display: none; }
  .promise-bar .container-xxl { grid-template-columns: auto 1fr; gap: 16px; padding-block: 20px; }
  .promise-bar a { grid-column: 2; }
  .technology-strip .tech-set { height: 68px; }
  .service-stack { gap: 70px; }
  .service-visual { min-height: 360px; border-radius: 26px; }
  .service-visual::before { width: 260px; height: 260px; }
  .service-visual::after { width: 175px; height: 175px; }
  .service-visual img { width: min(48%, 210px); }
  .service-content h3 { font-size: 2.55rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { min-height: 160px; }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--border-color); }
  .standard-story { min-height: 0; grid-template-columns: 1fr; align-items: start; padding: 36px 28px; }
  .standard-story img { width: 120px; }
  .strengths-flow { grid-template-columns: repeat(2, 1fr); }
  .strengths-flow li:nth-child(1), .strengths-flow li:nth-child(6) { grid-column: span 1; }
  .strengths-flow li:last-child { grid-column: span 2; }
  .process-flow { grid-template-columns: 1fr; gap: 0; padding-left: 16px; }
  .process-flow::before { display: block; top: 0; right: auto; bottom: 0; left: 59px; width: 1px; height: auto; background: linear-gradient(var(--brand-yellow), rgba(255, 255, 255, .15), var(--brand-blue-bright)); }
  .process-step { display: grid; min-height: 126px; grid-template-columns: 28px 74px 1fr; align-items: center; gap: 7px 12px; padding: 0; text-align: left; }
  .process-index { margin: 0; }
  .process-icon { width: 68px; height: 68px; margin: 0; box-shadow: 0 0 0 7px var(--bg-primary); }
  .process-icon img { max-width: 43px; max-height: 43px; }
  .process-step h3 { min-height: 0; margin: 0; }
  .impact-visual { min-height: 500px; }
  .method-grid { grid-template-columns: 1fr; }
  .portfolio-section { padding-block: 76px; }
  .portfolio-intro { margin-bottom: 38px; }
  .portfolio-intro .section-title { font-size: clamp(2.75rem, 11vw, 3.65rem); }
  .portfolio-editorial { gap: 22px; }
  .project-feature, .project-wide { grid-template-columns: 1fr; }
  .project-feature .project-visual, .project-wide .project-visual { min-height: 0; aspect-ratio: 16 / 10; }
  .project-feature .project-info, .project-wide .project-info { order: 2; gap: 16px; padding: 28px; }
  .project-feature .project-info h3, .project-wide .project-info h3 { font-size: 2rem; }
  .project-wide .project-visual { order: 1; }
  .project-pair { grid-template-columns: 1fr; gap: 22px; }
  .project-portrait .project-visual { height: 420px; }
  .project-portrait .project-info { grid-template-columns: auto 1fr; }
  .project-portrait .technology-pill { grid-column: 2; width: fit-content; }
  .reviews-heading { gap: 20px; margin-bottom: 30px; }
  .reviews-heading .section-title { font-size: clamp(2.65rem, 10vw, 3.4rem); }
  .reviews-intro { max-width: 520px; justify-self: start; }
  .client-story-grid { gap: 12px; }
  .client-story-card { min-height: 230px; padding: 20px; border-radius: 20px; }
  .client-story-card > img { width: 68px; height: 68px; margin: 27px 0 19px; }
  .client-story-arrow { top: 19px; right: 19px; }
  .blog-grid { grid-template-columns: 1fr; gap: 62px; }
  .footer-main { grid-template-columns: repeat(2, 1fr); }
  .footer-brand-col { grid-column: 1 / 3; }
  .footer-social { grid-column: 1 / 3; }
  .footer-bottom { flex-direction: column; }
}

@media (max-width: 575.98px) {
  .container-xxl { padding-inline: 18px; }
  .hero { min-height: 760px; }
  .hero-trust > div { padding-inline: 9px; }
  .hero-trust span { max-width: 94px; }
  .promise-mark { display: none; }
  .promise-bar .container-xxl { grid-template-columns: 1fr; }
  .promise-bar a { grid-column: auto; }
  .service-visual { min-height: 320px; }
  .capability-list { grid-template-columns: 1fr; }
  .standard-story h3 { font-size: 2.05rem; }
  .strengths-flow li { min-height: 125px; padding: 20px 17px; font-size: .85rem; }
  .impact-visual { min-height: 450px; }
  .impact-visual img { width: 52%; }
  .project-info { gap: 13px; }
  .project-info h3 { font-size: 1.55rem; }
  .project-portrait .project-info { padding: 21px 20px 24px; }
  .client-story-card { min-height: 218px; padding: 18px; }
  .client-story-card > img { width: 62px; height: 62px; margin-top: 25px; }
  .client-story-card h3 { font-size: 1.18rem; }
  .faq-accordion .accordion-button { padding-block: 24px; padding-right: 4px; }
  .faq-accordion .accordion-button::after { width: 32px; height: 32px; flex: 0 0 32px; }
  .contact-details { padding: 40px 24px; }
  .contact-copy .section-title { font-size: clamp(2.65rem, 11vw, 3.5rem); }
  .contact-actions { display: grid; grid-template-columns: 1fr; }
  .contact-actions .btn { width: 100%; }
  .contact-list { grid-template-columns: 1fr; }
  .contact-list strong { overflow-wrap: anywhere; }
}

@media (max-width: 430px) {
  .hero { min-height: 740px; }
  .hero-inner { padding-top: 120px; }
  .hero-title { font-size: clamp(2.6rem, 12.6vw, 3.35rem); }
  .hero-trust { gap: 0; }
  .stat strong { font-size: 2.9rem; }
  .process-flow { padding-left: 2px; }
  .process-flow::before { left: 43px; }
  .process-step { grid-template-columns: 22px 58px 1fr; }
  .process-icon { width: 56px; height: 56px; }
  .process-icon img { max-width: 37px; max-height: 37px; }
  .project-portrait .project-visual { height: 360px; }
  .client-story-card { min-height: 210px; padding: 16px; }
  .client-story-card > img { width: 58px; height: 58px; margin: 24px 0 17px; box-shadow: 0 0 0 4px var(--surface-blue); }
  .client-story-card h3 { font-size: 1.08rem; }
  .client-story-card div > span { font-size: .7rem; }
}

@media (max-width: 350px) {
  .hero-title { font-size: 2.42rem; }
  .hero-trust > div { padding-inline: 6px; }
  .hero-trust strong { font-size: 1.05rem; }
  .hero-trust span { font-size: .54rem; }
  .section-title { font-size: 2.25rem; }
  .service-content h3 { font-size: 2.25rem; }
  .strengths-flow { grid-template-columns: 1fr; }
  .strengths-flow li:last-child { grid-column: auto; }
  .project-portrait .project-visual { height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal-up { opacity: 1 !important; transform: none !important; }
  .cursor-glow { display: none; }
  .marquee-track { transform: none !important; }
}