:root {

  --ink: #12344a;

  --ink-soft: #29495a;

  --muted: #4b6572;

  --paper: #f4faf9;

  --white: #fff;

  --blue: #087fa8;

  --blue-bright: #20a9bd;

  --blue-pale: #e7f5f8;

  --purple: #269f9e;

  --purple-pale: #e8f7f1;

  --teal: #51bfa0;

  --teal-bright: #a4d65e;

  --teal-pale: #edf8e7;

  --line: #e1e8f1;

  --content: 1160px;

  --gutter: clamp(20px, 5vw, 56px);

  --radius: 24px;

  --shadow: 0 18px 55px rgba(24, 49, 88, .09);

}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body { margin: 0; color: var(--ink); background: var(--white); font-family: 'DM Sans', sans-serif; font-size: 17px; line-height: 1.75; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }

body.menu-open { overflow: hidden; }

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

button, input, select, textarea { font: inherit; }

button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }

img, svg { max-width: 100%; }

.container { width: min(var(--content), calc(100% - var(--gutter) * 2)); margin-inline: auto; }

.skip-link { position: absolute; z-index: 1000; top: -60px; left: 16px; padding: 10px 16px; color: var(--ink); background: var(--white); border-radius: 8px; }

.skip-link:focus { top: 12px; }

/* Navigation */

.site-header { position: sticky; z-index: 100; top: 0; background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(220,229,240,.8); backdrop-filter: blur(18px); }

.nav-shell { width: min(1320px, calc(100% - var(--gutter) * 1.4)); min-height: 78px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }

.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }

  .brand-mark { width: 52px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: transparent; box-shadow: none; }
.brand-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.brand-mark span { display: none; }

.brand-mark span { display: block; width: 4px; border-radius: 8px; background: #fff; transform: skew(-20deg); }

.brand-mark span:nth-child(1) { height: 12px; opacity: .8; }

.brand-mark span:nth-child(2) { height: 19px; }

.brand-mark span:nth-child(3) { height: 14px; opacity: .9; }

.brand-name { font-family: 'Manrope', sans-serif; font-size: 21px; font-weight: 800; letter-spacing: -.8px; line-height: 1; }

.brand-name span { color: #239f99; }

.main-nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(12px, 1.7vw, 25px); }

.main-nav > a { font-size: 14px; font-weight: 700; color: #4e5d73; white-space: nowrap; transition: color .2s ease; }

.main-nav > a:hover { color: var(--blue); }

.main-nav .nav-cta { padding: 10px 15px; border-radius: 12px; color: var(--white); background: var(--blue); box-shadow: 0 6px 16px rgba(23,105,224,.2); }

.main-nav .nav-cta:hover { color: var(--white); background: #1057c0; }

.nav-cta span { margin-left: 6px; }

.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--white); border-radius: 12px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; }

.menu-toggle span { display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }

.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }

.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }

.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }

/* Shared type and buttons */

.section { padding: clamp(76px, 9vw, 120px) 0; }

.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: 2px; line-height: 1.5; }

.eyebrow-dot { width: 7px; height: 7px; display: inline-block; flex: 0 0 auto; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(0,166,166,.11); }

h1, h2, h3, p { margin-top: 0; }

h1, h2, h3 { font-family: 'Manrope', sans-serif; letter-spacing: -.045em; }

h2 { margin-bottom: 20px; font-size: clamp(31px, 4.3vw, 51px); font-weight: 800; line-height: 1.16; }

h3 { line-height: 1.28; }

.text-gradient { color: var(--blue); background: linear-gradient(95deg, #0876a8 0%, #22b7b7 58%, #77bd63 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.section-subtitle { max-width: 540px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.75; }

.button { display: inline-flex; min-height: 49px; align-items: center; justify-content: center; gap: 12px; padding: 13px 19px; border: 1px solid transparent; border-radius: 13px; font-size: 13px; font-weight: 800; line-height: 1.3; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; cursor: pointer; }

.button:hover { transform: translateY(-2px); }

.button-light { color: var(--ink); background: var(--white); box-shadow: 0 8px 20px rgba(0,0,0,.12); }

.button-light:hover { box-shadow: 0 12px 26px rgba(0,0,0,.18); }

.button-outline-light { color: var(--white); border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); }

.button-outline-light:hover { background: rgba(255,255,255,.14); }

.button-primary { color: var(--white); background: linear-gradient(105deg, #0876a8, #22b7b7 62%, #8ccf55); box-shadow: 0 8px 20px rgba(76,85,216,.2); }

.button-primary:hover { box-shadow: 0 12px 26px rgba(76,85,216,.28); }

.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--blue); font-size: 13px; font-weight: 800; }

.text-link span { transition: transform .2s ease; }

.text-link:hover span { transform: translateX(4px); }

.text-link-light { color: var(--white); }

/* Hero */

.hero { position: relative; isolation: isolate; overflow: hidden; min-height: 625px; display: flex; align-items: center; color: var(--white); background: linear-gradient(118deg, #075a86 0%, #087fa8 42%, #239f99 76%, #6dbb67 100%); }

.hero::before { position: absolute; z-index: -1; inset: 0; content: ''; background: radial-gradient(ellipse at 76% 17%, rgba(94,221,220,.24), transparent 31%), radial-gradient(ellipse at 95% 86%, rgba(149,113,255,.32), transparent 38%); }

.hero-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(350px, .92fr); align-items: center; gap: clamp(30px, 5vw, 75px); padding-top: 68px; padding-bottom: 78px; }

.hero-copy { position: relative; z-index: 2; max-width: 620px; }

.eyebrow-light { color: rgba(255,255,255,.8); }

.hero h1 { margin: 0 0 19px; font-size: clamp(54px, 7.4vw, 88px); font-weight: 800; line-height: .99; letter-spacing: -.075em; }

.hero h1 span { display: block; color: #8ef1e4; }

.hero-lede { max-width: 500px; margin: 0 0 15px; font-family: 'Manrope', sans-serif; font-size: clamp(19px, 2vw, 24px); font-weight: 700; line-height: 1.42; letter-spacing: -.025em; }

.hero-description { max-width: 500px; margin-bottom: 27px; color: rgba(255,255,255,.9); font-size: 16px; line-height: 1.8; }

.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }

.hero-note { display: flex; align-items: center; gap: 11px; margin-top: 40px; color: rgba(255,255,255,.73); font-size: 11px; font-weight: 600; }

.note-line { width: 27px; height: 2px; background: var(--teal-bright); }

.hero-orb { position: absolute; z-index: -1; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; pointer-events: none; }

.orb-one { width: 560px; height: 560px; top: -380px; right: 8%; }

.orb-two { width: 720px; height: 720px; bottom: -620px; left: 20%; }

.hero-bottom-line { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; background: linear-gradient(90deg, var(--teal-bright), #fff 45%, #a6a0ff); opacity: .9; }

.hero-art { position: relative; width: 100%; max-width: 510px; aspect-ratio: 1 / 1; justify-self: center; }

.art-glow { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(101,241,221,.25), rgba(255,255,255,.025) 64%, transparent 70%); filter: blur(4px); }

.orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; transform: translate(-50%,-50%) rotate(-20deg); }

.orbit-outer { width: 91%; height: 65%; }

.orbit-inner { width: 72%; height: 88%; transform: translate(-50%,-50%) rotate(38deg); border-color: rgba(133,244,226,.35); }

.art-center { position: absolute; top: 50%; left: 50%; width: 164px; height: 164px; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px solid rgba(255,255,255,.55); border-radius: 42px; background: linear-gradient(145deg, rgba(255,255,255,.19), rgba(255,255,255,.07)); box-shadow: 0 22px 70px rgba(9,26,94,.25), inset 0 1px 0 rgba(255,255,255,.2); backdrop-filter: blur(12px); transform: translate(-50%,-50%) rotate(-5deg); }

.art-center strong { font-family: 'Manrope', sans-serif; font-size: 19px; line-height: 1.05; letter-spacing: -.04em; text-align: center; }

.art-center small { margin-top: 9px; color: #a8fff0; font-size: 7px; font-weight: 800; letter-spacing: 1.6px; }

.center-symbol { display: flex; align-items: center; justify-content: center; width: 70px; height: 38px; margin-bottom: 12px; }

.center-symbol svg { width: 100%; height: 100%; }



.orbit-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; min-width: 166px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.33); border-radius: 15px; background: rgba(255,255,255,.13); box-shadow: 0 12px 30px rgba(9,26,94,.15); backdrop-filter: blur(12px); }

.orbit-card b, .orbit-card small { display: block; }.orbit-card b { font-size: 12px; }.orbit-card small { margin-top: 2px; color: rgba(255,255,255,.72); font-size: 9px; }

.mini-icon { width: 32px; height: 32px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 10px; color: var(--white); font-size: 18px; background: rgba(255,255,255,.17); }

.icon-people { color: #b3fff1; }.icon-work { color: #d3c9ff; }.icon-tech { color: #bce1ff; }

.orbit-card-people { top: 12%; left: 5%; }.orbit-card-work { top: 40%; right: -1%; }.orbit-card-tech { bottom: 11%; left: 8%; }

.spark { position: absolute; color: #a4fff1; }.spark-a { top: 13%; right: 23%; font-size: 21px; }.spark-b { bottom: 18%; right: 14%; font-size: 30px; color: #c9c1ff; }.spark-c { top: 49%; left: 4%; font-size: 13px; }

/* Philosophy */

.philosophy-section { background: linear-gradient(180deg, #fff 0%, #f8fbff 100%); }

.philosophy-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .86fr); align-items: start; gap: clamp(40px, 8vw, 110px); }

.section-intro h2 { max-width: 600px; }

.philosophy-copy { padding-top: 36px; }

.philosophy-copy p { color: var(--muted); font-size: 16px; line-height: 1.8; }

.philosophy-copy .lead { margin-bottom: 13px; color: var(--ink); font-family: 'Manrope', sans-serif; font-size: 19px; font-weight: 700; line-height: 1.5; }

.principle-row { display: flex; align-items: center; gap: 15px; margin-top: 25px; padding: 17px 19px; border: 1px solid #d9e8ff; border-radius: 15px; background: linear-gradient(110deg, #eef5ff, #f5f1ff); }

.principle-symbol { width: 36px; height: 36px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 11px; color: var(--white); background: linear-gradient(135deg, var(--blue), var(--purple)); }

.principle-row p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }

.values-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; margin-top: 70px; padding-top: 27px; border-top: 1px solid var(--line); }

.value-item { display: flex; align-items: flex-start; gap: 16px; }

.value-number { color: var(--purple); font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .06em; }

.value-item strong { display: block; margin-bottom: 4px; font-family: 'Manrope', sans-serif; font-size: 14px; }

.value-item p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

/* Capabilities */

.capabilities-section { background: var(--paper); }

.section-heading { margin-bottom: 48px; }

.section-heading-center { max-width: 720px; margin-inline: auto; text-align: center; }

.section-heading-center .eyebrow { justify-content: center; }

.section-heading-center h2 { margin-bottom: 15px; }

.section-heading-center .section-subtitle { margin-inline: auto; }

.capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); align-items: stretch; gap: 22px; }

.capability-card { position: relative; display: flex; min-width: 0; flex-direction: column; padding: 27px 26px 25px; border: 1px solid var(--line); border-radius: 22px; background: var(--white); box-shadow: 0 10px 35px rgba(31,54,89,.035); transition: transform .25s ease, box-shadow .25s ease; }

.capability-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

.card-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.pillar-index { color: #8793a5; font-size: 9px; font-weight: 800; letter-spacing: 1.5px; }

.card-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; font-size: 22px; }

.icon-blue-bg { color: var(--blue); background: var(--blue-pale); }.icon-purple-bg { color: var(--purple); background: var(--purple-pale); }.icon-teal-bg { color: #008f91; background: var(--teal-pale); }

.illustration { position: relative; height: 118px; margin: 13px 0 19px; overflow: hidden; border-radius: 16px; }

.illustration-people { background: linear-gradient(125deg, #edf4ff, #f2f0ff); }

.person { position: absolute; z-index: 2; bottom: 20px; width: 37px; height: 47px; border-radius: 19px 19px 12px 12px; background: linear-gradient(180deg, #3288ff, #1769e0); }

.person::before { position: absolute; top: -21px; left: 7px; width: 23px; height: 23px; content: ''; border-radius: 50%; background: #7db4ff; }

.person-one { left: 24%; height: 42px; opacity: .9; }.person-two { left: calc(50% - 18px); bottom: 14px; height: 56px; background: linear-gradient(180deg, #806af0, #6b54db); }.person-two::before { background: #b5aaff; }.person-three { right: 23%; height: 45px; background: linear-gradient(180deg, #00b9b4, #008f9a); }.person-three::before { background: #7ce8db; }

.illustration-ring { position: absolute; top: 10px; left: 50%; width: 100px; height: 100px; border: 1px solid rgba(114,87,232,.19); border-radius: 50%; transform: translateX(-50%); }.ring-two { width: 140px; height: 140px; top: -10px; border-color: rgba(23,105,224,.13); }

.illustration-work { background: linear-gradient(125deg, #f0edff, #eef5ff); }

.work-node { position: absolute; z-index: 2; width: 25px; height: 25px; border: 5px solid #fff; border-radius: 9px; background: var(--purple); box-shadow: 0 4px 12px rgba(99,81,202,.15); }.node-one { top: 20px; left: 22%; }.node-two { top: 20px; right: 22%; background: var(--blue); }.node-three { bottom: 18px; left: 22%; background: var(--teal); }.node-four { right: 22%; bottom: 18px; background: var(--purple); }

.work-line { position: absolute; height: 2px; background: #b7aaf9; transform-origin: left center; }.line-one { top: 33px; left: 29%; width: 42%; }.line-two { top: 41px; left: 29%; width: 45%; transform: rotate(33deg); }.line-three { top: 80px; left: 29%; width: 45%; transform: rotate(-33deg); }

.illustration-tech { background: linear-gradient(125deg, #e8faf8, #eaf2ff); }

.tech-core { position: absolute; z-index: 2; top: 50%; left: 50%; width: 51px; height: 51px; display: grid; place-items: center; border: 4px solid #fff; border-radius: 16px; color: #fff; background: linear-gradient(140deg, var(--teal), var(--blue)); font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 800; box-shadow: 0 7px 20px rgba(0,166,166,.2); transform: translate(-50%,-50%); }

.tech-dot { position: absolute; z-index: 2; width: 19px; height: 19px; border: 4px solid #fff; border-radius: 50%; background: var(--teal); }.dot-one { top: 16px; left: 26%; }.dot-two { top: 20px; right: 24%; background: var(--purple); }.dot-three { bottom: 14px; left: 24%; background: var(--blue); }.dot-four { right: 27%; bottom: 14px; background: #40cbbb; }.tech-connection { position: absolute; top: 50%; left: 30%; width: 21%; height: 1px; background: #78cfc7; transform: rotate(35deg); }.connection-two { left: 51%; transform: rotate(-35deg); }.connection-three { top: 55%; left: 30%; transform: rotate(-35deg); }.connection-four { top: 55%; left: 51%; transform: rotate(35deg); }

.capability-card h3 { margin-bottom: 5px; font-size: 21px; letter-spacing: -.04em; }.card-kicker { margin-bottom: 14px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }.card-purple .card-kicker { color: var(--purple); }.card-teal .card-kicker { color: #008e91; }

.capability-card > p:not(.card-kicker) { margin-bottom: 16px; color: var(--muted); font-size: 15px; line-height: 1.75; }

.capability-card ul { display: grid; gap: 9px; margin: 0 0 23px; padding: 0; list-style: none; }

.capability-card li { position: relative; padding-left: 19px; color: #344256; font-size: 14px; line-height: 1.65; }

.capability-card li::before { position: absolute; top: .52em; left: 0; width: 7px; height: 7px; content: ''; border-radius: 50%; background: var(--blue); }.card-purple li::before { background: var(--purple); }.card-teal li::before { background: var(--teal); }

.card-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--blue); font-size: 13px; font-weight: 800; }.card-link span { transition: transform .2s ease; }.card-link:hover span { transform: translateX(4px); }

/* Experience */

.experience-section { position: relative; isolation: isolate; overflow: hidden; padding: clamp(76px, 9vw, 112px) 0; color: var(--white); background: linear-gradient(115deg, #10476c 0%, #087fa8 52%, #238f87 100%); }

.experience-section::before { position: absolute; z-index: -1; inset: 0; content: ''; background: radial-gradient(circle at 90% 10%, rgba(0,211,199,.16), transparent 28%), radial-gradient(circle at 10% 100%, rgba(97,131,255,.17), transparent 35%); }

.experience-layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(40px, 7vw, 90px); }

.experience-copy h2 { margin-bottom: 22px; font-size: clamp(34px, 4.3vw, 52px); }.experience-copy h2 span { color: #92f2e5; }.experience-copy > p:not(.eyebrow) { max-width: 470px; margin-bottom: 27px; color: rgba(255,255,255,.88); font-size: 16px; line-height: 1.8; }

.experience-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }

.experience-card { min-width: 0; min-height: 184px; padding: 23px; border: 1px solid rgba(255,255,255,.2); border-radius: 19px; background: rgba(255,255,255,.085); backdrop-filter: blur(12px); }

.experience-card-main { grid-row: span 2; display: flex; min-height: 100%; flex-direction: column; justify-content: center; background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.07)); }

.experience-icon { width: 35px; height: 35px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 11px; color: #a5fff0; background: rgba(68,224,210,.14); font-size: 19px; }.purple-icon { color: #d1c7ff; background: rgba(181,159,255,.16); }.teal-icon { color: #8df5e6; }

.experience-stat { display: block; margin-bottom: 3px; font-family: 'Manrope', sans-serif; font-size: clamp(52px, 6vw, 72px); font-weight: 800; line-height: 1; letter-spacing: -.07em; }.experience-stat span { color: #8ef1e4; }

.experience-card h3 { margin-bottom: 9px; font-size: 16px; letter-spacing: -.025em; }.experience-card p { margin: 0; color: rgba(255,255,255,.86); font-size: 14px; line-height: 1.7; }.experience-card-main h3 { max-width: 210px; font-size: 18px; }.experience-decoration { position: absolute; z-index: -1; right: -120px; bottom: -240px; width: 500px; height: 500px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.025), 0 0 0 110px rgba(255,255,255,.02); }

/* Offerings */

.offerings-section { background: #fff; }

.offerings-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; }.offerings-heading h2 { margin-bottom: 0; }.offerings-heading .section-subtitle { max-width: 370px; padding-bottom: 5px; }

.offerings-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }

.offering-card { position: relative; min-width: 0; min-height: 263px; padding: 25px; border: 1px solid var(--line); border-radius: 19px; background: linear-gradient(145deg, #fff, #fbfcff); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }.offering-card:hover { transform: translateY(-4px); border-color: #c8d9f7; box-shadow: var(--shadow); }

.offering-number { position: absolute; top: 25px; right: 25px; color: #a1acbb; font-size: 10px; font-weight: 800; letter-spacing: 1px; }

.offering-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 21px; border-radius: 13px; font-size: 21px; }.offering-blue { color: var(--blue); background: var(--blue-pale); }.offering-purple { color: var(--purple); background: var(--purple-pale); }.offering-teal { color: #008e91; background: var(--teal-pale); }

.offering-card h3 { max-width: 270px; margin-bottom: 10px; font-size: 17px; }.offering-card p { margin-bottom: 19px; color: var(--muted); font-size: 15px; line-height: 1.75; }

.tag-row { display: flex; flex-wrap: wrap; gap: 7px; }.tag-row span { padding: 5px 9px; border: 1px solid #e5eaf2; border-radius: 7px; color: #526176; background: #f8faff; font-size: 11px; font-weight: 700; }

.offering-custom { color: var(--white); border-color: transparent; background: linear-gradient(135deg, #0876a8, #22b7b7 62%, #8ccf55); }.offering-custom .offering-number { color: rgba(255,255,255,.65); }.offering-custom .offering-icon { color: var(--white); background: rgba(255,255,255,.17); }.offering-custom h3 { color: var(--white); }.offering-custom p { color: rgba(255,255,255,.78); }.offering-custom .card-link { color: #a6fff0; }.offerings-note { margin: 23px 0 0; color: #7b8798; font-size: 11px; text-align: center; }

/* Approach */

.approach-section { background: linear-gradient(180deg, #f7f9fd, #f1f5fc); }

.approach-track { display: grid; grid-template-columns: minmax(0,1fr) 25px minmax(0,1fr) 25px minmax(0,1fr) 25px minmax(0,1fr); align-items: start; gap: 13px; margin-top: 62px; }

.approach-step { min-width: 0; text-align: center; }.step-number { display: block; margin-bottom: 13px; color: #96a3b6; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }

.step-marker { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 20px; border: 7px solid rgba(255,255,255,.8); border-radius: 23px; box-shadow: 0 8px 25px rgba(36,58,97,.08); font-size: 25px; }.marker-blue { color: var(--blue); background: #dfeaff; }.marker-purple { color: var(--purple); background: #e8e2ff; }.marker-teal { color: #008f91; background: #d7f7f2; }

.approach-step h3 { margin-bottom: 9px; font-size: 17px; }.approach-step p { max-width: 190px; margin: auto; color: var(--muted); font-size: 14px; line-height: 1.75; }.track-arrow { padding-top: 68px; color: #9ba9bc; font-size: 21px; text-align: center; }

/* About */

.about-section { overflow: hidden; padding: clamp(76px, 9vw, 120px) 0; background: var(--white); }

.about-layout { display: grid; grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); align-items: center; gap: clamp(50px, 8vw, 105px); }

.about-graphic { position: relative; min-height: 390px; display: grid; place-items: center; isolation: isolate; }.about-graphic-bg { position: absolute; z-index: -1; inset: 5% 4%; border-radius: 46% 54% 60% 40% / 45% 42% 58% 55%; background: linear-gradient(145deg, #e8f5fa, #e8f7f1 60%, #f0f8e6); transform: rotate(-8deg); }

.about-circle { position: absolute; width: 175px; height: 175px; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; opacity: .84; mix-blend-mode: multiply; }.circle-blue { top: 55px; left: 16%; background: rgba(67,136,255,.55); }.circle-purple { top: 55px; right: 15%; background: rgba(126,99,238,.5); }.circle-teal { bottom: 55px; left: calc(50% - 87px); background: rgba(53,211,190,.52); }

.about-center { position: relative; z-index: 2; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 13px; border: 1px solid rgba(255,255,255,.9); border-radius: 35px; background: rgba(255,255,255,.87); box-shadow: 0 15px 40px rgba(49,66,119,.13); transform: rotate(-5deg); }.about-center b { font-family: 'Manrope', sans-serif; font-size: 18px; line-height: 1.12; letter-spacing: -.04em; text-align: center; }.about-label { position: absolute; z-index: 3; padding: 7px 12px; border: 1px solid rgba(255,255,255,.85); border-radius: 10px; background: rgba(255,255,255,.88); box-shadow: 0 5px 15px rgba(45,65,111,.08); font-size: 10px; font-weight: 800; }.label-one { top: 27px; left: 11%; color: var(--blue); }.label-two { top: 32px; right: 9%; color: var(--purple); }.label-three { right: 18%; bottom: 28px; color: #008e91; }

.about-copy h2 { max-width: 600px; }.about-copy p:not(.eyebrow) { color: var(--muted); font-size: 16px; line-height: 1.8; }.about-copy .lead { color: var(--ink); font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 700; line-height: 1.65; }.about-copy .text-link { margin-top: 7px; }

/* Contact and footer */

.contact-section { position: relative; isolation: isolate; overflow: hidden; padding: clamp(76px, 9vw, 112px) 0; background: linear-gradient(115deg, #10476c, #087fa8 56%, #238f87); color: var(--white); }

.contact-section::before { position: absolute; z-index: -1; inset: 0; content: ''; background: radial-gradient(circle at 0 100%, rgba(0,211,199,.19), transparent 34%), radial-gradient(circle at 100% 0, rgba(150,127,255,.2), transparent 36%); }

.contact-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: center; gap: clamp(40px, 8vw, 100px); }

.contact-copy h2 { max-width: 490px; margin-bottom: 21px; font-size: clamp(36px, 4.8vw, 56px); }.contact-copy h2 span { color: #94f2e5; }.contact-copy > p:not(.eyebrow) { max-width: 440px; margin-bottom: 30px; color: rgba(255,255,255,.9); font-size: 16px; line-height: 1.8; }

.contact-detail { display: flex; align-items: center; gap: 13px; margin-top: 19px; }.contact-detail-icon { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; color: #9df4e7; background: rgba(255,255,255,.09); font-size: 18px; }.contact-detail small, .contact-detail strong { display: block; }.contact-detail small { color: rgba(255,255,255,.56); font-size: 10px; font-weight: 800; letter-spacing: 1.3px; }.contact-detail strong { margin-top: 2px; font-size: 12px; font-weight: 700; }

.contact-form-card { padding: clamp(25px, 4vw, 39px); border: 1px solid rgba(255,255,255,.62); border-radius: 25px; color: var(--ink); background: var(--white); box-shadow: 0 25px 75px rgba(9,20,63,.23); }

.form-kicker { color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: 1.8px; }.form-heading h3 { margin: 8px 0 8px; font-size: 25px; }.form-heading p { margin-bottom: 22px; color: var(--muted); font-size: 15px; line-height: 1.7; }

.form-row { display: grid; gap: 7px; margin-bottom: 15px; }.form-row label { font-size: 13px; font-weight: 800; }.form-row label span { color: #8995a5; font-weight: 500; }.form-row input, .form-row select, .form-row textarea { width: 100%; min-width: 0; padding: 12px 13px; border: 1px solid #dfe6f0; border-radius: 10px; outline: none; color: var(--ink); background: #fbfcff; font-size: 15px; transition: border-color .2s ease, box-shadow .2s ease; }.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23,105,224,.1); }.form-row textarea { min-height: 84px; resize: vertical; }.form-row input::placeholder, .form-row textarea::placeholder { color: #9aa6b6; }.form-submit { width: 100%; margin-top: 2px; border: 0; }.form-footnote { margin: 12px 0 0; color: #8490a1; font-size: 9px; line-height: 1.6; }.form-status { margin: 8px 0 0; color: var(--blue); font-size: 11px; }

.site-footer { background: #101f37; color: var(--white); }.footer-main { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 25px; padding-bottom: 25px; }.footer-brand .brand-name { color: var(--white); }.footer-brand .brand-name span { color: #239f99; }.footer-main > p { margin: 0; color: rgba(255,255,255,.78); font-size: 14px; }.back-top { color: #a8fff0; font-size: 11px; font-weight: 800; }.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 18px; padding-bottom: 20px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.45); font-size: 10px; }

/* Responsive layout */

@media (max-width: 1100px) {

  .nav-shell { gap: 16px; }

  .main-nav { gap: 13px; }

  .main-nav > a { font-size: 11.5px; }

  .brand-name { font-size: 19px; }

  .hero-layout { grid-template-columns: minmax(0,1fr) minmax(300px,.85fr); }

  .hero-art { max-width: 430px; }

  .orbit-card { min-width: 150px; padding: 10px 11px; }

  .capability-card { padding-inline: 21px; }

}

@media (max-width: 900px) {

  .nav-shell { min-height: 72px; }

  .menu-toggle { display: flex; }

  .main-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: none; align-items: stretch; gap: 0; max-height: calc(100dvh - 73px); overflow-y: auto; padding: 12px var(--gutter) 22px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.985); box-shadow: 0 20px 35px rgba(21,43,78,.12); }

  .main-nav.is-open { display: flex; flex-direction: column; }

  .main-nav > a { padding: 13px 4px; border-bottom: 1px solid #edf1f7; font-size: 14px; }

  .main-nav .nav-cta { align-self: flex-start; margin-top: 14px; padding: 12px 16px; border-bottom: 0; }

  .hero-layout { grid-template-columns: minmax(0,1fr) minmax(260px,.8fr); gap: 18px; }

  .hero-art { transform: scale(.92); transform-origin: center; }

  .hero h1 { font-size: clamp(53px, 7vw, 72px); }

  .capability-grid { gap: 14px; }

  .capability-card { padding: 21px 18px; }

  .capability-card h3 { font-size: 19px; }

  .illustration { height: 100px; }

  .offerings-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }

  .experience-layout { gap: 35px; }

  .experience-card { padding: 19px; }

  .about-layout { gap: 42px; }

  .about-circle { width: 145px; height: 145px; }

  .circle-teal { left: calc(50% - 72px); }

  .about-graphic { min-height: 340px; }

}

@media (max-width: 700px) {

  :root { --gutter: 23px; }

  .section { padding: 76px 0; }

  .hero { min-height: 0; }

  .hero-layout { grid-template-columns: minmax(0,1fr); gap: 25px; padding-top: 65px; padding-bottom: 55px; }

  .hero-copy { max-width: 600px; }

  .hero h1 { font-size: clamp(56px, 12vw, 76px); }

  .hero-lede { max-width: 500px; font-size: 20px; }

  .hero-description { font-size: 15px; }

  .hero-note { margin-top: 28px; }

  .hero-art { width: min(100%, 410px); margin: 0 auto -12px; transform: none; }

  .orbit-card-work { right: 0; }

  .philosophy-layout, .experience-layout, .about-layout, .contact-layout { grid-template-columns: minmax(0,1fr); gap: 30px; }

  .philosophy-copy { padding-top: 0; }

  .values-strip { grid-template-columns: minmax(0,1fr); gap: 22px; margin-top: 43px; }

  .value-item { gap: 18px; }

  .section-heading { margin-bottom: 34px; }

  .section-heading-center { text-align: left; }

  .section-heading-center .eyebrow { justify-content: flex-start; }

  .section-heading-center .section-subtitle { margin-inline: 0; }

  .capability-grid { grid-template-columns: minmax(0,1fr); gap: 17px; }

  .capability-card { padding: 24px; }

  .illustration { height: 118px; }

  .capability-card h3 { font-size: 21px; }

  .capability-card > p:not(.card-kicker), .capability-card li { font-size: 14px; }

  .experience-cards { max-width: 540px; }

  .experience-card-main { min-height: 100%; }

  .experience-copy > p:not(.eyebrow) { max-width: 600px; }

  .offerings-heading { display: block; }

  .offerings-heading .section-subtitle { margin-top: 18px; }

  .offering-card { min-height: 250px; padding: 22px; }

  .approach-track { grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr); row-gap: 34px; margin-top: 42px; }

  .approach-track .approach-step:nth-of-type(3) { grid-column: 3; grid-row: 2; }

  .approach-track .approach-step:nth-of-type(4) { grid-column: 1; grid-row: 2; }

  .approach-track .track-arrow:nth-of-type(4) { grid-column: 2; grid-row: 2; transform: rotate(180deg); }

  .approach-track .track-arrow:nth-of-type(2) { grid-column: 2; grid-row: 1; }

  .approach-track .track-arrow:nth-of-type(6) { display: none; }

  .track-arrow { padding-top: 65px; }

  .approach-step p { max-width: 210px; }

  .about-graphic { width: min(100%, 430px); min-height: 350px; margin-inline: auto; }

  .about-copy { grid-row: 1; }

  .contact-form-card { width: 100%; }

  .footer-main { flex-wrap: wrap; }

  .footer-main > p { order: 3; flex-basis: 100%; }

}

@media (max-width: 480px) {

  :root { --gutter: 19px; }

  .nav-shell { width: calc(100% - 38px); min-height: 68px; }

  .brand-name { font-size: 19px; }

  .brand-mark { width: 46px; height: 30px; }

  h2 { font-size: clamp(30px, 8.2vw, 38px); }

  .hero-layout { padding-top: 53px; padding-bottom: 42px; }

  .hero h1 { font-size: clamp(52px, 13.5vw, 65px); }

  .hero-actions { align-items: flex-start; flex-direction: column; gap: 16px; }

  .hero-art { width: 100%; max-width: 350px; }

  .art-center { width: 133px; height: 133px; border-radius: 33px; }.art-center strong { font-size: 17px; }

  .orbit-card { min-width: 135px; gap: 7px; padding: 8px 9px; border-radius: 12px; }.orbit-card b { font-size: 8px; }.orbit-card small { font-size: 8px; }.mini-icon { width: 27px; height: 27px; font-size: 15px; }

  .orbit-card-people { top: 10%; left: 0; }.orbit-card-work { top: 41%; right: -1%; }.orbit-card-tech { bottom: 9%; left: 0; }

  .values-strip { margin-top: 35px; }

  .experience-cards { gap: 10px; }.experience-card { padding: 15px; min-height: 170px; }.experience-card-main { min-height: 100%; }.experience-card h3 { font-size: 14px; }.experience-card p { font-size: 13px; }.experience-stat { font-size: 53px; }

  .offerings-grid { grid-template-columns: minmax(0,1fr); }.offering-card { min-height: 0; padding: 24px; }.offering-card p { max-width: 370px; }

  .approach-track { column-gap: 8px; }.step-marker { width: 61px; height: 61px; border-radius: 19px; font-size: 22px; }.approach-step h3 { font-size: 15px; }.approach-step p { font-size: 13px; }.track-arrow { padding-top: 60px; font-size: 17px; }

  .about-graphic { min-height: 300px; }.about-circle { width: 125px; height: 125px; }.circle-blue { top: 50px; left: 11%; }.circle-purple { top: 50px; right: 10%; }.circle-teal { bottom: 45px; left: calc(50% - 62px); }.about-center { width: 120px; height: 120px; border-radius: 30px; }.about-center b { font-size: 16px; }

  .contact-form-card { padding: 23px 19px; border-radius: 20px; }.form-heading h3 { font-size: 22px; }

  .footer-main { gap: 15px; }.footer-main .back-top { margin-left: auto; }.footer-bottom { align-items: flex-start; flex-direction: column; gap: 6px; }

}

@media (max-width: 350px) {

  :root { --gutter: 15px; }

  .brand-name { font-size: 17px; }.brand-mark { width: 42px; height: 28px; }.hero h1 { font-size: 49px; }.orbit-card { min-width: 123px; }.orbit-card small { display: none; }.experience-cards { grid-template-columns: minmax(0,1fr); }.experience-card-main { grid-row: auto; min-height: 210px; }.experience-card { min-height: 135px; }.approach-track { grid-template-columns: minmax(0,1fr) 16px minmax(0,1fr); }.track-arrow { font-size: 14px; }

}

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }

}