:root {
  --ink: #06101b;
  --ink-2: #091827;
  --panel: #0d1d2e;
  --panel-2: #102438;
  --paper: #f5f8fb;
  --paper-2: #eaf1f7;
  --white: #ffffff;
  --text: #d8e4ef;
  --muted: #8fa6bb;
  --muted-dark: #5b7082;
  --blue: #4da3ff;
  --blue-2: #86c9ff;
  --blue-deep: #1678c9;
  --line: rgba(126, 178, 226, .16);
  --line-light: rgba(7, 16, 27, .10);
  --shadow: 0 24px 60px rgba(0, 0, 0, .18);
  --radius: 22px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 78px; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--ink);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }
::selection { background: rgba(77, 163, 255, .32); color: #fff; }
:focus-visible { outline: 3px solid rgba(77,163,255,.65); outline-offset: 3px; }

.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; transform: translateY(-150%); padding: 10px 14px; border-radius: 9px; background: white; color: var(--ink); font-weight: 800; }
.skip-link:focus { transform: none; }
.container { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }
.section { padding: 106px 0; position: relative; }
.alt { background: var(--paper); color: var(--ink); }
.kicker { margin: 0 0 12px; text-transform: uppercase; letter-spacing: .18em; font-size: .75rem; font-weight: 850; color: var(--blue-deep); }
.section-heading { max-width: 780px; margin-bottom: 50px; }
.section-heading h2,
.about-copy h2,
.credential-copy h2,
.auto-copy h2,
.contact-panel h2 {
  margin: 0 0 18px;
  font-size: clamp(2rem, 4vw, 3.55rem);
  line-height: 1.04;
  letter-spacing: -.045em;
}
.section-heading > p:last-child,
.credential-copy > p:last-child { color: var(--muted); max-width: 700px; }
.alt .section-heading > p:last-child,
.alt .credential-copy > p:last-child { color: var(--muted-dark); }

.site-header { position: fixed; inset: 0 0 auto 0; height: 76px; z-index: 50; background: rgba(5, 12, 21, .70); border-bottom: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(18px); transition: background .25s ease, box-shadow .25s ease; }
.site-header.scrolled { background: rgba(5, 12, 21, .95); box-shadow: 0 14px 30px rgba(0,0,0,.18); }
.nav-wrap { width: min(calc(100% - 40px), var(--max)); height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 40px; height: 40px; border: 1px solid rgba(101, 183, 255, .50); border-radius: 12px; display: grid; place-items: center; font-size: .82rem; letter-spacing: .03em; font-weight: 850; color: var(--blue-2); background: linear-gradient(145deg, rgba(56,145,255,.14), rgba(255,255,255,.03)); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
.brand-copy strong { font-size: .92rem; color: #eff7ff; }
.brand-copy small { margin-top: 4px; color: #7890a6; font-size: .63rem; letter-spacing: .03em; }
.site-nav { display: flex; align-items: center; gap: 25px; font-size: .86rem; color: #b6c7d8; }
.site-nav a { transition: color .2s ease, border-color .2s ease, background .2s ease; }
.site-nav a:hover { color: #fff; }
.nav-cta { border: 1px solid rgba(90, 175, 255, .44); padding: 9px 15px; border-radius: 999px; background: rgba(63,147,225,.07); }
.menu-toggle { display: none; border: 0; background: transparent; padding: 8px; }
.menu-toggle span { display: block; width: 23px; height: 2px; margin: 5px 0; background: #fff; transition: transform .2s ease, opacity .2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hero { min-height: 780px; height: 94vh; max-height: 940px; position: relative; display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background: url('assets/hero-bg.jpg') center / cover no-repeat; transform: scale(1.015); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,11,19,.99) 0%, rgba(4,11,19,.94) 34%, rgba(4,11,19,.60) 59%, rgba(4,11,19,.18) 100%), linear-gradient(0deg, rgba(5,11,18,.94) 0%, transparent 42%, rgba(3,8,14,.22) 100%); }
.hero-grid-lines { position: absolute; inset: 0; opacity: .20; background-image: linear-gradient(rgba(94,166,230,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(94,166,230,.08) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to right, #000, transparent 68%); }
.hero-layout { position: relative; z-index: 2; padding: 100px 0 120px; }
.hero-content { max-width: 850px; }
.eyebrow { display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid rgba(135,196,255,.20); border-radius: 999px; background: rgba(8,22,37,.56); color: #b8cde0; font-size: .77rem; letter-spacing: .02em; margin-bottom: 20px; }
.eyebrow-sep { margin: 0 8px; color: #5e7891; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #6fbeff; box-shadow: 0 0 16px rgba(92,182,255,.9); margin-right: 8px; }
.hero-overline { margin: 0 0 12px; color: #7cbcf4; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 850; }
.hero h1 { max-width: 780px; margin: 0; font-size: clamp(3.15rem, 7.5vw, 7rem); line-height: .90; letter-spacing: -.068em; color: #fff; }
.hero h1 span { color: #aacce8; font-weight: 560; }
.hero-subhead { margin: 26px 0 14px; max-width: 850px; font-size: clamp(.91rem, 1.5vw, 1.05rem); color: #82c3ff; font-weight: 750; letter-spacing: .01em; }
.hero-copy { max-width: 685px; margin: 0 0 30px; color: #c3d1de; font-size: 1.04rem; }
.hero-actions { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 49px; padding: 0 20px; border-radius: 11px; font-weight: 800; font-size: .9rem; transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #04111d; background: linear-gradient(135deg, #8acaff, #47a2ff); box-shadow: 0 10px 28px rgba(49,139,225,.25); }
.btn-primary:hover { box-shadow: 0 14px 34px rgba(49,139,225,.34); }
.btn-secondary { color: #eaf5ff; border: 1px solid rgba(169,213,250,.28); background: rgba(8,19,31,.58); }
.alt .btn-secondary { color: var(--ink); border-color: rgba(7,16,27,.16); background: rgba(255,255,255,.76); }
.text-link { font-weight: 750; font-size: .9rem; color: #b7d9f6; padding: 10px; }
.alt .text-link { color: #356d9c; }
.platform-rail { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; border-top: 1px solid rgba(255,255,255,.08); background: rgba(4,11,19,.76); backdrop-filter: blur(16px); }
.platform-rail-inner { min-height: 72px; display: flex; align-items: center; gap: 25px; overflow: hidden; white-space: nowrap; color: #9bb1c4; font-size: .76rem; font-weight: 700; }
.platform-rail-inner > span:not(.rail-label) { color: #c4d8e8; }
.rail-label { color: #5faef0; text-transform: uppercase; letter-spacing: .13em; font-size: .64rem; margin-right: 6px; }

.impact { background: radial-gradient(circle at 90% 10%, rgba(47, 126, 201, .12), transparent 28%), var(--ink); }
.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.metric-card { min-height: 190px; padding: 28px; border-radius: var(--radius); background: linear-gradient(145deg, rgba(17,39,61,.84), rgba(10,24,39,.72)); border: 1px solid var(--line); position: relative; overflow: hidden; transition: transform .22s ease, border-color .22s ease; }
.metric-card:hover { transform: translateY(-3px); border-color: rgba(105,184,255,.32); }
.metric-card:after { content:""; position:absolute; width:150px; height:150px; border-radius:50%; right:-75px; top:-85px; border:1px solid rgba(105,184,255,.16); }
.metric-value { display: block; font-size: clamp(2.25rem, 4vw, 3.45rem); font-weight: 850; line-height: 1; letter-spacing: -.05em; color: #fff; }
.metric-value small { color: var(--blue); font-size: .62em; }
.metric-label { display: block; margin-top: 14px; color: #b9d8f3; font-weight: 780; }
.metric-context { display: block; margin-top: 8px; color: var(--muted); font-size: .81rem; }
.proof-strip { margin-top: 18px; display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: rgba(12,27,43,.55); }
.proof-strip > div { padding: 18px 20px; border-right: 1px solid var(--line); }
.proof-strip > div:last-child { border-right: 0; }
.proof-strip strong { display: block; color: #eef8ff; font-size: 1.25rem; letter-spacing: -.02em; }
.proof-strip span { display: block; margin-top: 4px; color: #7f97ac; font-size: .72rem; line-height: 1.4; }

.bridge { background: linear-gradient(180deg, #f8fafc, #eef4f9); }
.value-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.value-card { padding: 30px; border-radius: 20px; border: 1px solid rgba(12,47,74,.09); background: #fff; box-shadow: 0 16px 38px rgba(31,54,73,.05); }
.value-number { color: #7bbdf4; font-size: .74rem; font-weight: 900; letter-spacing: .11em; }
.value-card h3 { margin: 15px 0 12px; color: #102538; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.02em; }
.value-card p { margin: 0; color: #5c7183; font-size: .9rem; }

.about { background: #07101b; }
.about-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 78px; align-items: center; }
.photo-frame { position: relative; max-width: 395px; margin: 0 auto; }
.photo-frame img { border-radius: 26px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; box-shadow: 0 30px 70px rgba(0,0,0,.28); filter: saturate(.86) contrast(1.03) brightness(.92); }
.photo-accent { position: absolute; inset: 18px -18px -18px 18px; border: 1px solid rgba(77,163,255,.26); border-radius: 28px; z-index: -1; }
.photo-caption { position: absolute; left: -22px; bottom: 25px; padding: 14px 18px; background: rgba(6,17,28,.94); border: 1px solid rgba(112,190,255,.26); border-radius: 14px; color: #fff; box-shadow: var(--shadow); }
.photo-caption span { display:block; color:#74bdfb; font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; font-weight:850; }
.photo-caption strong { display:block; margin-top:3px; font-size:.92rem; }
.about-copy h2 { color: #f2f8fd; }
.about-copy .lead { font-size: 1.18rem; color: #bed4e7; font-weight: 650; }
.about-copy > p:not(.kicker):not(.lead) { color: #91a7ba; }
.role-block { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.role-label { display: block; margin-bottom: 10px; color: #6f8aa1; text-transform: uppercase; letter-spacing: .12em; font-size: .63rem; font-weight: 850; }
.role-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.role-strip span { padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(87,168,238,.18); background: rgba(70,154,224,.08); color: #9bcaee; font-size: .77rem; font-weight: 750; }

.experience { background: var(--paper); }
.timeline { position: relative; }
.timeline:before { content:""; position:absolute; left:110px; top:12px; bottom:12px; width:1px; background: linear-gradient(transparent, rgba(58,127,187,.35) 5%, rgba(58,127,187,.28) 95%, transparent); }
.timeline-item { display: grid; grid-template-columns: 88px 1fr; gap: 48px; padding: 0 0 34px; position: relative; }
.timeline-date { padding-top: 24px; font-size: .75rem; color: #72889a; line-height: 1.15; font-weight: 850; letter-spacing: .05em; text-align: right; }
.timeline-card { padding: 28px 30px; border: 1px solid rgba(12,47,74,.10); background: #fff; border-radius: 20px; position: relative; box-shadow: 0 12px 34px rgba(31,54,73,.04); }
.timeline-card:before { content:""; position:absolute; left:-30px; top:30px; width:10px; height:10px; border-radius:50%; background:#f5f8fb; border:2px solid #58aaf0; box-shadow:0 0 0 6px #f5f8fb; }
.featured-role .timeline-card { border-color: rgba(29,119,194,.23); box-shadow: 0 16px 42px rgba(32,83,124,.08); }
.timeline-topline { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.timeline-card h3 { margin:0; color:#102638; font-size:1.16rem; }
.timeline-card h3 + p { margin:3px 0 0; color:#607587; font-size:.84rem; }
.role-tag { padding:6px 9px; border-radius:999px; background:#eaf5fd; border:1px solid #d6eaf9; color:#327db9; font-size:.64rem; font-weight:850; white-space:nowrap; }
.timeline-card ul { margin:18px 0 0; padding-left:19px; }
.timeline-card li { margin:9px 0; color:#4c6274; font-size:.88rem; }
.earlier-experience { margin:4px 0 0 136px; border:1px solid rgba(12,47,74,.10); border-radius:18px; background:#fff; overflow:hidden; }
.earlier-experience summary { cursor:pointer; list-style:none; padding:18px 22px; color:#24455f; font-size:.85rem; font-weight:800; display:flex; justify-content:space-between; }
.earlier-experience summary::-webkit-details-marker { display:none; }
.earlier-experience[open] summary span { transform:rotate(45deg); }
.earlier-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:#e6edf2; border-top:1px solid #e6edf2; }
.earlier-grid > div { padding:22px; background:#fff; }
.earlier-grid strong { display:block; color:#143048; }
.earlier-grid span { display:block; color:#3776a7; font-size:.73rem; margin-top:2px; font-weight:750; }
.earlier-grid p { margin:8px 0 0; color:#667a8b; font-size:.8rem; }

.case-studies { background: radial-gradient(circle at 9% 10%, rgba(50,128,201,.10), transparent 25%), var(--ink); }
.case-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.case-card { background:#fff; color:#102638; border-radius:20px; padding:28px; position:relative; overflow:hidden; min-height:520px; }
.case-number { position:absolute; right:22px; top:16px; color:#dceaf5; font-weight:900; font-size:3.4rem; line-height:1; letter-spacing:-.06em; }
.case-label { margin:0 0 12px; color:#2f79b6; text-transform:uppercase; letter-spacing:.11em; font-size:.65rem; font-weight:850; }
.case-card h3 { margin:0 0 24px; font-size:1.28rem; line-height:1.2; position:relative; max-width:86%; }
.case-flow { display:grid; gap:10px; }
.case-flow > div { background:#f5f8fb; border-radius:13px; padding:14px; }
.case-flow span { display:block; text-transform:uppercase; font-size:.61rem; letter-spacing:.12em; font-weight:850; color:#6e8193; }
.case-flow p { margin:5px 0 0; color:#4f6375; font-size:.84rem; }
.case-flow .result { background:#eaf5ff; border:1px solid #d8edff; }
.case-flow .result span { color:#2b77b6; }
.case-flow .result p { color:#214d73; }
.case-flow strong { font-size:1.05rem; color:#0b68b3; }

.technology { background: linear-gradient(180deg, #f8fafc, #eef4f9); }
.tech-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:72px; align-items:start; }
.tech-layout .section-heading { margin-bottom:0; position:sticky; top:110px; }
.tech-groups { display:grid; gap:14px; }
.tech-group { border:1px solid rgba(12,47,74,.10); border-radius:18px; padding:22px; background:#fff; box-shadow:0 10px 30px rgba(31,54,73,.04); }
.tech-group h3 { margin:0 0 14px; color:#17344b; font-size:.93rem; }
.chip-wrap { display:flex; flex-wrap:wrap; gap:8px; }
.chip-wrap span { padding:8px 10px; border-radius:10px; background:#eef6fc; border:1px solid #dcecf8; color:#356b94; font-size:.77rem; font-weight:700; }

.recommendations { background: #07101b; }
.testimonial-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.testimonial { margin:0; background:linear-gradient(145deg, rgba(17,39,61,.84), rgba(10,24,39,.72)); border:1px solid var(--line); border-radius:20px; padding:28px; display:flex; flex-direction:column; min-height:330px; }
.testimonial-meta { color:#62b2f3; text-transform:uppercase; letter-spacing:.12em; font-size:.61rem; font-weight:850; }
.testimonial:before { content:"“"; font-family:Georgia,serif; font-size:4.2rem; line-height:.75; color:#5eaef2; margin-top:22px; }
.testimonial blockquote { margin:14px 0 26px; font-size:1.01rem; line-height:1.65; color:#c6d6e4; flex:1; }
.testimonial figcaption strong { display:block; color:#f0f7fd; }
.testimonial figcaption span { display:block; margin-top:2px; color:#849bb0; font-size:.79rem; }
.testimonial figcaption small { display:block; margin-top:9px; color:#5d7990; font-size:.67rem; text-transform:uppercase; letter-spacing:.08em; }

.credentials { background:radial-gradient(circle at 8% 20%, rgba(50,128,201,.12), transparent 30%), var(--ink); }
.credentials-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:center; }
.credential-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.credential-card { border:1px solid var(--line); background:linear-gradient(145deg, rgba(15,34,53,.78), rgba(9,23,37,.65)); border-radius:18px; padding:20px; display:flex; gap:14px; align-items:flex-start; }
.credential-icon { width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; border-radius:12px; background:rgba(70,160,239,.10); border:1px solid rgba(86,173,249,.18); color:#79c1ff; font-size:.64rem; font-weight:850; }
.credential-card strong { display:block; color:#e4eef6; font-size:.89rem; line-height:1.35; }
.credential-card p { margin:4px 0 0; color:#8198ad; font-size:.76rem; }

.automotive { background: #f4f7fa; }
.automotive-panel { min-height:430px; border-radius:28px; overflow:hidden; background:linear-gradient(118deg,#06111d 0%,#0b1f32 48%,#102b42 100%); color:#fff; position:relative; padding:60px; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; box-shadow:0 24px 70px rgba(18,47,71,.14); }
.automotive-panel:before { content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 82% 45%, rgba(64,158,239,.18), transparent 25%), linear-gradient(rgba(90,163,227,.055) 1px, transparent 1px), linear-gradient(90deg,rgba(90,163,227,.055) 1px,transparent 1px); background-size:auto,36px 36px,36px 36px; }
.auto-copy { position:relative; z-index:2; }
.auto-copy p:not(.kicker) { color:#adbed0; }
.auto-points { display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; }
.auto-points span { font-size:.71rem; padding:7px 10px; border:1px solid rgba(127,192,247,.17); border-radius:999px; color:#9fceef; background:rgba(67,148,217,.06); }
.auto-visual { position:relative; min-height:300px; z-index:2; }
.speed-ring { position:absolute; width:270px; height:270px; right:10px; top:10px; border-radius:50%; border:1px solid rgba(106,186,255,.25); box-shadow:inset 0 0 50px rgba(46,141,224,.08),0 0 60px rgba(35,119,191,.07); display:flex; align-items:center; justify-content:center; gap:14px; color:#8ec9f7; }
.speed-ring:before,.speed-ring:after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(90,174,247,.13); }
.speed-ring:before { inset:24px; }
.speed-ring:after { inset:54px; border-style:dashed; }
.speed-ring span { font-size:.71rem; text-transform:uppercase; letter-spacing:.12em; font-weight:850; }
.speed-ring strong { font-size:2.3rem; color:#fff; font-weight:400; }
.data-line { height:1px; position:absolute; left:20px; right:80px; background:linear-gradient(90deg,transparent,#5fb2f8,transparent); opacity:.28; transform-origin:left; }
.line-1 { top:76px; transform:rotate(-18deg); }.line-2 { top:158px; transform:rotate(11deg); }.line-3 { top:230px; transform:rotate(-7deg); }

.contact { background:#06101b; }
.contact-panel { border:1px solid var(--line); border-radius:26px; padding:48px; background:linear-gradient(145deg, rgba(16,37,58,.86), rgba(8,22,36,.76)); display:grid; grid-template-columns:1.35fr .65fr; gap:52px; align-items:center; }
.contact-panel h2 { font-size:clamp(2rem,4vw,3.3rem); }
.contact-panel p:not(.kicker) { color:#9cb1c4; max-width:720px; }
.contact-facts { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.contact-facts span { padding:7px 10px; border-radius:999px; border:1px solid rgba(103,178,244,.16); color:#8ebce1; background:rgba(70,154,224,.05); font-size:.7rem; }
.contact-actions { display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.contact-actions .text-link { text-align:center; }

.site-footer { border-top:1px solid rgba(255,255,255,.06); padding:28px 0; background:#040b13; color:#7d94aa; font-size:.77rem; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer-inner strong { display:block; color:#c9d8e6; }
.footer-inner span { display:block; margin-top:2px; }
.footer-inner p { margin:0; }
.footer-inner a { color:#8dbce2; }

.reveal { opacity:1; transform:none; }
.js .reveal { opacity:0; transform:translateY(18px); transition:opacity .68s ease, transform .68s cubic-bezier(.2,.7,.2,1); }
.js .reveal.visible { opacity:1; transform:none; }

@media (max-width: 980px) {
  .section { padding:84px 0; }
  .metrics-grid { grid-template-columns:repeat(2,1fr); }
  .proof-strip { grid-template-columns:repeat(2,1fr); }
  .proof-strip > div:nth-child(2) { border-right:0; }
  .proof-strip > div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .value-grid, .case-grid, .testimonial-grid { grid-template-columns:1fr; }
  .value-card { padding:26px; }
  .about-grid, .tech-layout, .credentials-grid, .automotive-panel, .contact-panel { grid-template-columns:1fr; gap:46px; }
  .case-card { min-height:unset; }
  .case-card h3 { max-width:70%; }
  .tech-layout .section-heading { position:static; }
  .auto-visual { min-height:280px; }
  .speed-ring { right:calc(50% - 135px); }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 66px; }
  .container, .nav-wrap { width:min(calc(100% - 28px), var(--max)); }
  .site-header { height:66px; }
  .brand-copy small { display:none; }
  .brand-copy strong { font-size:.86rem; }
  .menu-toggle { display:block; cursor:pointer; }
  .site-nav { position:absolute; top:66px; left:0; right:0; background:rgba(5,12,21,.99); border-bottom:1px solid rgba(255,255,255,.08); padding:16px 20px 22px; display:none; flex-direction:column; align-items:flex-start; gap:4px; box-shadow:0 20px 40px rgba(0,0,0,.25); }
  .site-nav.open { display:flex; }
  .site-nav a { width:100%; padding:10px 4px; }
  .nav-cta { border:0; padding:10px 4px !important; background:transparent; }
  .hero { min-height:790px; height:auto; max-height:none; padding:120px 0 110px; align-items:flex-end; }
  .hero-layout { padding:0; }
  .hero-bg { background-position:63% center; }
  .hero-overlay { background:linear-gradient(90deg,rgba(3,10,17,.985) 0%,rgba(3,10,17,.89) 76%,rgba(3,10,17,.52) 100%),linear-gradient(0deg,rgba(4,10,17,.97),transparent 58%); }
  .hero h1 { font-size:clamp(3.05rem,15.5vw,5.3rem); }
  .hero-overline { font-size:.62rem; letter-spacing:.11em; }
  .hero-subhead { line-height:1.55; }
  .hero-copy { font-size:.97rem; }
  .hero-actions { align-items:stretch; }
  .hero-actions .btn { flex:1 1 auto; }
  .hero-actions .text-link { width:100%; padding-left:0; }
  .platform-rail { position:relative; margin-top:50px; }
  .platform-rail-inner { min-height:62px; overflow-x:auto; gap:20px; scrollbar-width:none; }
  .platform-rail-inner::-webkit-scrollbar { display:none; }
  .metrics-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .metric-card { min-height:160px; padding:21px; }
  .metric-value { font-size:2.05rem; }
  .proof-strip { grid-template-columns:1fr 1fr; }
  .about-grid { grid-template-columns:1fr; }
  .photo-frame { max-width:305px; }
  .photo-caption { left:-7px; }
  .timeline:before { left:9px; }
  .timeline-item { grid-template-columns:1fr; gap:10px; padding-left:31px; }
  .timeline-date { text-align:left; padding:0; font-size:.69rem; }
  .timeline-card { padding:22px; }
  .timeline-card:before { left:-27px; top:26px; }
  .timeline-topline { flex-direction:column; gap:10px; }
  .earlier-experience { margin-left:31px; }
  .earlier-grid { grid-template-columns:1fr; }
  .credential-cards { grid-template-columns:1fr; }
  .automotive-panel { padding:35px 25px; min-height:unset; }
  .contact-panel { padding:32px 24px; }
  .footer-inner { flex-direction:column; align-items:flex-start; }
}

@media (max-width: 520px) {
  .section { padding:70px 0; }
  .section-heading { margin-bottom:36px; }
  .metrics-grid { grid-template-columns:1fr; }
  .metric-card { min-height:142px; }
  .proof-strip { grid-template-columns:1fr; }
  .proof-strip > div { border-right:0 !important; border-bottom:1px solid var(--line); }
  .proof-strip > div:last-child { border-bottom:0; }
  .case-card h3 { max-width:82%; }
  .eyebrow { font-size:.66rem; }
  .brand-copy { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .js .reveal { opacity:1; transform:none; transition:none; }
  .btn { transition:none; }
}

/* =============================
   V3 final refinement layer
   ============================= */
:root {
  --electric: #62b8ff;
  --electric-soft: rgba(98,184,255,.16);
  --hairline: rgba(126,178,226,.13);
}

.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 80;
  background: transparent;
  pointer-events: none;
}
.scroll-progress span {
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,#72c1ff,#2d94eb);
  box-shadow:0 0 14px rgba(88,177,255,.6);
}

.site-header { border-bottom-color: rgba(143,196,244,.08); }
.site-nav a { position:relative; padding:8px 0; }
.site-nav a:not(.nav-cta):after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#6dbaff,transparent);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .22s ease;
}
.site-nav a:hover:after,
.site-nav a.active:after { transform:scaleX(1); }
.site-nav a.active { color:#fff; }
.nav-cta { padding:9px 15px !important; }
.nav-cta:after { display:none; }

.hero { min-height:820px; max-height:980px; }
.hero-overlay {
  background:
    radial-gradient(circle at 78% 43%, rgba(16,73,120,.08), transparent 25%),
    linear-gradient(90deg, rgba(4,11,19,.995) 0%, rgba(4,11,19,.96) 35%, rgba(4,11,19,.67) 61%, rgba(4,11,19,.20) 100%),
    linear-gradient(0deg, rgba(5,11,18,.96) 0%, transparent 45%, rgba(3,8,14,.26) 100%);
}
.hero-layout {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) 350px;
  align-items:center;
  gap:58px;
  padding-top:116px;
}
.hero-content { max-width:760px; }
.hero h1 { font-size:clamp(3.25rem,6.6vw,6.45rem); }
.hero-copy { max-width:640px; }
.hero-signals {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  margin-top:34px;
  max-width:720px;
  border:1px solid rgba(137,199,255,.13);
  border-radius:15px;
  overflow:hidden;
  background:rgba(8,23,38,.44);
  backdrop-filter:blur(12px);
}
.hero-signals > div { padding:13px 14px; border-right:1px solid rgba(137,199,255,.11); }
.hero-signals > div:last-child { border-right:0; }
.hero-signals span { display:block; color:#6f91ad; text-transform:uppercase; letter-spacing:.11em; font-size:.55rem; font-weight:850; }
.hero-signals strong { display:block; margin-top:4px; color:#c8ddeb; font-size:.69rem; line-height:1.35; }

.hero-brief {
  align-self:center;
  margin-top:10px;
  padding:24px;
  border-radius:22px;
  border:1px solid rgba(137,199,255,.19);
  background:linear-gradient(150deg,rgba(8,22,36,.86),rgba(7,18,30,.66));
  box-shadow:0 28px 70px rgba(0,0,0,.28);
  backdrop-filter:blur(18px);
  position:relative;
  overflow:hidden;
}
.hero-brief:before {
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  border-radius:50%;
  right:-85px;
  top:-85px;
  border:1px solid rgba(92,183,255,.16);
  box-shadow:0 0 50px rgba(45,132,209,.08);
}
.brief-label { color:#65b8fa; text-transform:uppercase; letter-spacing:.16em; font-size:.6rem; font-weight:900; }
.hero-brief h2 { margin:11px 0 20px; color:#f3f9ff; font-size:1.35rem; line-height:1.15; letter-spacing:-.03em; }
.hero-brief ul { list-style:none; padding:0; margin:0; display:grid; gap:0; }
.hero-brief li { display:grid; grid-template-columns:30px 1fr; gap:10px; padding:13px 0; border-top:1px solid rgba(123,183,235,.11); }
.hero-brief li > span { color:#5caef2; font-size:.62rem; font-weight:900; letter-spacing:.09em; padding-top:2px; }
.hero-brief li strong { display:block; color:#dceaf5; font-size:.79rem; }
.hero-brief li small { display:block; margin-top:3px; color:#7f98ad; font-size:.67rem; line-height:1.42; }

.metrics-grid {
  grid-template-columns:repeat(12,1fr);
  gap:14px;
}
.metric-card { grid-column:span 3; min-height:165px; padding:25px; }
.metric-card.metric-feature { grid-column:span 5; min-height:222px; padding:32px; }
.metric-card.revenue-card { grid-column:span 7; }
.metric-icon {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  margin-bottom:24px;
  color:#7fc7ff;
  background:rgba(77,163,255,.08);
  border:1px solid rgba(97,180,251,.14);
  font-size:.76rem;
  font-weight:900;
}
.metric-card:not(.metric-feature) .metric-icon { margin-bottom:17px; width:30px; height:30px; }
.metric-feature .metric-value { font-size:clamp(3rem,5vw,4.5rem); }
.metric-card:before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(78,167,246,.45),transparent);
  opacity:0;
  transition:opacity .22s ease;
}
.metric-card:hover:before { opacity:1; }
.proof-strip { margin-top:14px; }

.value-card { display:flex; flex-direction:column; min-height:272px; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.value-card:hover { transform:translateY(-4px); border-color:rgba(28,117,190,.18); box-shadow:0 24px 50px rgba(31,54,73,.09); }
.value-card p { flex:1; }
.value-outcome { display:inline-flex; align-self:flex-start; margin-top:23px; padding:7px 10px; border-radius:999px; background:#edf6fd; border:1px solid #dceefa; color:#337aae; font-size:.65rem; font-weight:850; letter-spacing:.02em; }

.photo-frame:after {
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:34px;
  background:radial-gradient(circle at 20% 80%,rgba(59,160,246,.14),transparent 32%);
  z-index:-2;
}
.role-lens-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.role-lens-grid > div { padding:12px 13px; border-radius:12px; border:1px solid rgba(95,173,239,.14); background:rgba(65,145,216,.055); display:grid; grid-template-columns:42px 1fr; align-items:center; gap:7px; }
.role-lens-grid strong { color:#79c0fb; font-size:.72rem; letter-spacing:.05em; }
.role-lens-grid span { color:#94abc0; font-size:.68rem; line-height:1.35; }

.timeline-card { transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.timeline-card:hover { transform:translateX(4px); border-color:rgba(42,129,201,.20); box-shadow:0 18px 44px rgba(31,54,73,.08); }
.featured-role .timeline-card:after {
  content:"Featured commercial leadership role";
  position:absolute;
  right:18px;
  bottom:15px;
  color:#8ab7d8;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.53rem;
  font-weight:850;
}

.case-card { transition:transform .22s ease, box-shadow .22s ease; }
.case-card:hover { transform:translateY(-5px); box-shadow:0 24px 54px rgba(0,0,0,.16); }
.case-card .result { position:relative; overflow:hidden; }
.case-card .result:after { content:""; position:absolute; inset:auto 0 0; height:2px; background:linear-gradient(90deg,#58b0f7,transparent); }

.tech-group { transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.tech-group:hover { transform:translateX(4px); border-color:rgba(38,128,202,.17); box-shadow:0 16px 38px rgba(31,54,73,.07); }
.chip-wrap span { transition:background .18s ease, transform .18s ease; }
.chip-wrap span:hover { background:#e2f2fe; transform:translateY(-1px); }

.testimonial { min-height:350px; transition:transform .22s ease, border-color .22s ease, background .22s ease; }
.testimonial:hover { transform:translateY(-4px); border-color:rgba(106,185,252,.28); background:linear-gradient(145deg,rgba(20,46,71,.9),rgba(10,24,39,.76)); }
.testimonial-head { display:flex; align-items:center; gap:11px; }
.testimonial-avatar { width:38px; height:38px; flex:0 0 38px; border-radius:50%; display:grid; place-items:center; color:#9fd3ff; border:1px solid rgba(111,188,253,.22); background:rgba(78,161,232,.08); font-size:.64rem; font-weight:900; letter-spacing:.03em; }
.testimonial-head small { display:block; margin-top:2px; color:#607b91; font-size:.58rem; text-transform:uppercase; letter-spacing:.08em; }
.testimonial:before { margin-top:26px; }
.testimonial figcaption { padding-top:16px; border-top:1px solid rgba(126,178,226,.10); }

.credential-card { transition:transform .2s ease, border-color .2s ease, background .2s ease; }
.credential-card:hover { transform:translateY(-3px); border-color:rgba(104,183,251,.25); background:linear-gradient(145deg,rgba(18,42,65,.84),rgba(9,23,37,.7)); }

.automotive-panel { min-height:470px; padding:62px; }
.auto-visual { min-height:330px; overflow:visible; }
.auto-image {
  position:absolute;
  inset:10px -150px -24px -10px;
  background:url('assets/hero-bg.jpg') 70% 54% / cover no-repeat;
  opacity:.46;
  filter:saturate(.65) contrast(1.1) brightness(.72);
  border-radius:24px;
  mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 100%);
}
.speed-ring { right:2px; top:18px; backdrop-filter:blur(3px); background:rgba(5,16,27,.18); }
.auto-signal { position:absolute; z-index:3; display:grid; place-items:center; width:42px; height:27px; border-radius:999px; border:1px solid rgba(117,193,255,.22); background:rgba(6,22,36,.74); color:#83c9ff; font-size:.57rem; font-weight:900; letter-spacing:.07em; }
.signal-a { left:18px; top:70px; }.signal-b { left:66px; top:154px; }.signal-c { left:12px; top:238px; }

.availability { display:inline-flex; align-items:center; gap:8px; margin:-3px 0 18px; color:#91bedf; font-size:.72rem; font-weight:750; }
.availability span { width:7px; height:7px; border-radius:50%; background:#6fc1ff; box-shadow:0 0 14px rgba(99,190,255,.7); }
.contact-panel { position:relative; overflow:hidden; }
.contact-panel:after { content:""; position:absolute; width:360px; height:360px; border-radius:50%; right:-190px; top:-200px; border:1px solid rgba(99,180,248,.10); box-shadow:0 0 70px rgba(44,128,200,.06); pointer-events:none; }

@media (max-width: 1120px) {
  .hero-layout { grid-template-columns:minmax(0,1fr) 315px; gap:34px; }
  .hero h1 { font-size:clamp(3.1rem,6.4vw,5.7rem); }
  .hero-brief { padding:20px; }
  .metric-card { grid-column:span 6; }
  .metric-card.metric-feature, .metric-card.revenue-card { grid-column:span 6; }
}

@media (max-width: 980px) {
  .hero { height:auto; max-height:none; min-height:900px; }
  .hero-layout { grid-template-columns:1fr; align-items:start; gap:28px; padding-top:124px; padding-bottom:150px; }
  .hero-content { max-width:760px; }
  .hero-brief { max-width:650px; margin-top:0; }
  .hero-signals { max-width:650px; }
  .metric-card, .metric-card.metric-feature, .metric-card.revenue-card { grid-column:span 6; min-height:180px; padding:26px; }
  .metric-feature .metric-value { font-size:clamp(2.5rem,7vw,3.6rem); }
}

@media (max-width: 700px) {
  .scroll-progress { height:2px; }
  .hero { min-height:auto; }
  .hero-layout { padding-top:112px; padding-bottom:136px; gap:22px; }
  .hero h1 { font-size:clamp(3.05rem,14vw,4.55rem); line-height:.91; }
  .hero-copy { font-size:.95rem; }
  .hero-signals { grid-template-columns:1fr; border-radius:13px; }
  .hero-signals > div { border-right:0; border-bottom:1px solid rgba(137,199,255,.11); padding:11px 13px; }
  .hero-signals > div:last-child { border-bottom:0; }
  .hero-brief { padding:19px; border-radius:18px; }
  .hero-brief h2 { font-size:1.12rem; }
  .platform-rail-inner { gap:18px; }
  .metrics-grid { grid-template-columns:1fr; }
  .metric-card, .metric-card.metric-feature, .metric-card.revenue-card { grid-column:auto; min-height:156px; padding:22px; }
  .metric-card.metric-feature { min-height:180px; }
  .metric-icon { margin-bottom:16px; }
  .proof-strip { margin-top:12px; }
  .role-lens-grid { grid-template-columns:1fr; }
  .featured-role .timeline-card:after { position:static; display:block; margin-top:17px; }
  .testimonial { min-height:unset; }
  .automotive-panel { padding:34px 25px; }
  .auto-visual { min-height:260px; overflow:hidden; border-radius:20px; }
  .auto-image { inset:0 -120px 0 -10px; opacity:.40; }
  .speed-ring { width:220px; height:220px; right:10px; top:20px; }
  .auto-signal { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *:before, *:after { scroll-behavior:auto !important; transition-duration:.001ms !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  .js .reveal { opacity:1; transform:none; }
}

/* =========================================================
   V4 — Proof, media, photography, and mobile-first refinement
   ========================================================= */
body { overflow-x: hidden; }
iframe { border: 0; display: block; }
.pdf-link { white-space: nowrap; }
.proof-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  color: #79c4ff;
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .01em;
}
.proof-link:hover { color: #b8e1ff; }
.alt .proof-link { color: #176fae; }

/* Video portfolio */
.media-showcase { background: linear-gradient(180deg,#f8fafc,#eef4f9); }
.video-rail {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
}
.video-card {
  border-radius: 24px;
  overflow: hidden;
  background: #071522;
  color: #fff;
  box-shadow: 0 22px 54px rgba(27,49,67,.12);
  border: 1px solid rgba(14,63,99,.12);
  content-visibility: auto;
  contain-intrinsic-size: 620px;
}
.video-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  max-height: 565px;
  background: #02070c;
  overflow: hidden;
}
.video-frame iframe { width: 100%; height: 100%; }
.video-copy { padding: 20px 21px 23px; }
.video-time {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  color: #9dd3ff;
  background: rgba(83,169,243,.10);
  border: 1px solid rgba(102,186,255,.15);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.video-copy h3 { margin: 12px 0 7px; font-size: 1.04rem; letter-spacing: -.02em; }
.video-copy p { margin: 0; color: #8fa8bd; font-size: .82rem; line-height: 1.55; }
.swipe-hint { display: none; }

/* Leadership proof */
.leadership-grid .testimonial { min-height: 365px; }
.leadership-grid .proof-link { margin-top: 13px; }

/* Customer proof */
.customer-proof {
  background: radial-gradient(circle at 8% 7%, rgba(50,128,201,.11), transparent 23%), #07101b;
}
.review-rail {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 15px;
}
.review-card {
  min-height: 330px;
  padding: 27px;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  border: 1px solid rgba(126,178,226,.15);
  background: linear-gradient(145deg,rgba(17,39,61,.84),rgba(10,24,39,.72));
  content-visibility: auto;
  contain-intrinsic-size: 330px;
}
.review-stars { color: #f0b94a; letter-spacing: .08em; font-size: .77rem; }
.review-card blockquote {
  margin: 18px 0 25px;
  color: #d2e0eb;
  font-size: .94rem;
  line-height: 1.67;
  flex: 1;
}
.review-card footer { padding-top: 15px; border-top: 1px solid rgba(126,178,226,.10); }
.review-card footer strong { display: block; color: #f2f8fd; }
.review-card footer span { display: block; margin-top: 3px; color: #7791a7; font-size: .73rem; }

/* Credentials */
.credentials-v4 .section-heading { margin-bottom: 38px; }
.credential-gallery {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}
.credential-visual {
  min-width: 0;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg,rgba(17,39,61,.84),rgba(10,24,39,.72));
}
.credential-image { aspect-ratio: 16 / 10.2; overflow: hidden; background: #fff; }
.credential-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.credential-body { padding: 22px 23px 24px; }
.credential-type { color: #63b7f7; font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 900; }
.credential-body h3 { margin: 9px 0 5px; color: #f0f7fd; font-size: 1.02rem; }
.credential-body p { margin: 0; color: #829bb0; font-size: .78rem; }
.credential-summary {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 22px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(12,29,46,.68);
}
.credential-summary strong { display: block; color: #ecf6ff; font-size: .9rem; }
.credential-summary p { margin: 3px 0 0; color: #7e98ae; font-size: .75rem; }

/* Automotive photography */
.photo-heading {
  margin: 78px 0 28px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 45px;
  align-items: end;
}
.photo-heading h2 { margin: 0; font-size: clamp(2rem,4vw,3.25rem); line-height: 1.04; letter-spacing: -.045em; }
.photo-heading > p { margin: 0; color: #5b7082; max-width: 480px; }
.photo-rail {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 13px;
}
.vehicle-photo {
  margin: 0;
  position: relative;
  overflow: hidden;
  min-height: 290px;
  border-radius: 19px;
  background: #0a1520;
  box-shadow: 0 15px 38px rgba(24,45,62,.08);
  content-visibility: auto;
  contain-intrinsic-size: 330px;
}
.vehicle-photo img {
  width: 100%;
  height: 100%;
  min-height: 290px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .35s ease, filter .35s ease;
}
.vehicle-photo:hover img { transform: scale(1.025); filter: saturate(1.04); }
.vehicle-photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 42px 18px 16px;
  background: linear-gradient(transparent,rgba(3,9,14,.90));
  color: #fff;
}
.vehicle-photo figcaption strong { display: block; font-size: .87rem; }
.vehicle-photo figcaption span { display: block; margin-top: 2px; color: #9db4c7; font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; }
.personal-vehicle { outline: 1px solid rgba(75,161,233,.30); outline-offset: -1px; }

/* Reduce rendering work for below-the-fold sections. */
.case-studies, .technology, .recommendations, .customer-proof, .credentials, .automotive, .contact {
  content-visibility: auto;
  contain-intrinsic-size: 900px;
}

@media (max-width: 980px) {
  .video-rail { grid-template-columns: repeat(3,minmax(260px,1fr)); gap: 13px; }
  .review-rail { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .credential-gallery { grid-template-columns: 1fr 1fr; }
  .photo-rail { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .photo-heading { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 66px; }
  body { -webkit-text-size-adjust: 100%; }
  .container, .nav-wrap { width: min(calc(100% - 28px), var(--max)); }
  .section { padding: 72px 0; }
  .section-heading { margin-bottom: 30px; }
  .section-heading h2,
  .about-copy h2,
  .credential-copy h2,
  .auto-copy h2,
  .contact-panel h2,
  .photo-heading h2 { font-size: clamp(2rem,9.5vw,2.75rem); }

  /* Faster first screen and thumb-friendly controls. */
  .site-nav a, .btn, .menu-toggle { min-height: 44px; }
  .hero-layout { padding-top: 96px; padding-bottom: 104px; }
  .hero h1 { font-size: clamp(2.9rem,13.6vw,4.15rem); }
  .hero-subhead { margin-top: 20px; font-size: .86rem; }
  .hero-copy { margin-bottom: 23px; }
  .hero-actions { gap: 9px; }
  .hero-actions .btn { flex: 1 1 calc(50% - 5px); min-width: 0; padding: 0 14px; }
  .hero-actions .text-link { width: auto; flex: 1 0 100%; padding: 8px 0; }
  .hero-signals { margin-top: 22px; }
  .hero-brief { margin-top: 0; }
  .hero-brief li { padding: 11px 0; }
  .platform-rail { margin-top: 30px; }

  /* Swipe rails prevent the media-heavy portfolio from becoming excessively long. */
  .video-rail,
  .review-rail,
  .leadership-grid,
  .photo-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(84vw, 350px);
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    padding: 2px 2px 12px;
    margin-inline: -2px;
    -webkit-overflow-scrolling: touch;
  }
  .video-rail::-webkit-scrollbar,
  .review-rail::-webkit-scrollbar,
  .leadership-grid::-webkit-scrollbar,
  .photo-rail::-webkit-scrollbar { display: none; }
  .video-card,
  .review-card,
  .leadership-grid .testimonial,
  .vehicle-photo { scroll-snap-align: start; scroll-snap-stop: normal; }
  .swipe-hint { display: block; margin: 10px 0 0; color: #748da1; font-size: .69rem; font-weight: 760; }
  .alt .swipe-hint { color: #6a7f90; }
  .video-frame { max-height: none; }
  .video-copy { padding: 17px 17px 20px; }
  .video-copy p { font-size: .78rem; }
  .review-card { min-height: 315px; padding: 22px; }
  .review-card blockquote { font-size: .9rem; line-height: 1.62; }
  .leadership-grid .testimonial { min-height: 340px; }

  .credential-gallery { grid-template-columns: 1fr; }
  .credential-image { aspect-ratio: 16 / 10.7; }
  .credential-body { padding: 19px 19px 21px; }
  .credential-summary { padding: 17px 18px; }

  .automotive-panel { margin-bottom: 0; }
  .photo-heading { margin-top: 56px; }
  .vehicle-photo { min-height: 315px; }
  .vehicle-photo img { min-height: 315px; aspect-ratio: 4 / 3; }

  .proof-link { min-height: 40px; align-items: center; }
  .contact-actions .btn { width: 100%; }
  .contact-actions .text-link { display: block; padding: 10px 0; }
}

@media (max-width: 430px) {
  .container, .nav-wrap { width: min(calc(100% - 24px), var(--max)); }
  .section { padding: 64px 0; }
  .brand-mark { width: 37px; height: 37px; }
  .hero-layout { padding-top: 90px; padding-bottom: 94px; }
  .hero h1 { font-size: clamp(2.75rem,13.2vw,3.7rem); }
  .eyebrow { font-size: .69rem; padding: 7px 10px; }
  .hero-overline { font-size: .58rem; }
  .hero-actions .btn { flex-basis: 100%; }
  .metrics-grid { grid-template-columns: 1fr; }
  .metric-card, .metric-card.metric-feature, .metric-card.revenue-card { min-height: 150px; }
  .proof-strip { grid-template-columns: 1fr 1fr; }
  .video-rail, .review-rail, .leadership-grid, .photo-rail { grid-auto-columns: 88vw; }
  .review-card { min-height: 300px; }
  .vehicle-photo, .vehicle-photo img { min-height: 300px; }
}
/* V4 light video embeds: thumbnails load first, YouTube player only after tap/click. */
.video-lite { position: relative; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; cursor: pointer; background: #02070c; overflow: hidden; color: #fff; }
.video-lite img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.94) contrast(1.04) brightness(.78); transform: scale(1.02); }
.video-lite:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 58%,rgba(1,7,12,.58)); }
.video-play { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); width:60px; height:60px; border-radius:50%; display:grid; place-items:center; padding-left:4px; background:rgba(6,17,28,.86); border:1px solid rgba(170,218,255,.35); box-shadow:0 12px 30px rgba(0,0,0,.26); color:#fff; font-size:1rem; transition:transform .18s ease, background .18s ease; }
.video-lite:hover .video-play, .video-lite:focus-visible .video-play { transform:translate(-50%,-50%) scale(1.06); background:#1379c5; }
.video-play-label { position:absolute; z-index:2; left:16px; bottom:14px; font-size:.67rem; font-weight:850; letter-spacing:.06em; text-transform:uppercase; color:#d8ebf9; }
@media (max-width:980px) and (min-width:701px) { .video-rail { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.credential-image { aspect-ratio:4 / 3; }
.credential-image img { object-fit:contain; padding:8px; }
@media (max-width:700px) { .credential-image { aspect-ratio:4 / 3; } .video-play { width:56px; height:56px; } }

/* =========================================================
   V4.1 — readability, softer light surfaces, mobile platform rail
   ========================================================= */
:root {
  --paper: #eef2f5;
  --paper-2: #e5ebef;
}

/* Soften the bright sections without losing contrast. */
.alt,
.experience { background: var(--paper); }
.bridge,
.technology,
.media-showcase { background: linear-gradient(180deg, #f1f4f6, #e8edf1); }
.automotive { background: #edf1f4; }
.value-card,
.timeline-card,
.earlier-experience,
.earlier-grid > div,
.case-card,
.tech-group { background: #f9fbfc; }
.case-flow > div { background: #eef3f6; }
.case-flow .result { background: #e5f1f9; }
.timeline-card:before { background: var(--paper); box-shadow: 0 0 0 6px var(--paper); }

/* Desktop-only readability bump. Mobile sizing is intentionally unchanged. */
@media (min-width: 981px) {
  .section-heading > p:last-child,
  .credential-copy > p:last-child,
  .about-copy > p:not(.kicker),
  .auto-copy p:not(.kicker),
  .contact-panel p:not(.kicker) { font-size: 1.02rem; }

  .hero-copy { font-size: 1.08rem; }
  .hero-subhead { font-size: 1.02rem; }
  .hero-brief h2 { font-size: 1.45rem; }
  .hero-brief li strong { font-size: .86rem; }
  .hero-brief li small { font-size: .74rem; }
  .hero-signals strong { font-size: .75rem; }

  .metric-label { font-size: 1rem; }
  .metric-context { font-size: .88rem; }
  .proof-strip span { font-size: .79rem; }

  .value-card p { font-size: .97rem; }
  .role-lens-grid span { font-size: .74rem; }
  .timeline-card h3 + p { font-size: .91rem; }
  .timeline-card li { font-size: .95rem; }
  .earlier-experience summary { font-size: .92rem; }
  .earlier-grid p { font-size: .87rem; }
  .case-flow p { font-size: .91rem; }
  .tech-group h3 { font-size: 1rem; }
  .chip-wrap span { font-size: .84rem; }

  .testimonial blockquote { font-size: 1.05rem; }
  .testimonial figcaption span { font-size: .84rem; }
  .video-copy p { font-size: .89rem; }
  .review-card blockquote { font-size: 1rem; }
  .credential-body p { font-size: .85rem; }
  .credential-summary p { font-size: .82rem; }
  .photo-heading > p { font-size: 1rem; }
}

/* Replace the mobile horizontal platform strip with a stable compact grid. */
@media (max-width: 700px) {
  .platform-rail {
    margin-top: 28px;
    border-top-color: rgba(125, 185, 236, .12);
    background: rgba(5, 14, 23, .92);
  }
  .platform-rail-inner {
    min-height: 0;
    padding: 14px 0 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    white-space: normal;
  }
  .platform-rail-inner .rail-label {
    grid-column: 1 / -1;
    margin: 0 0 2px;
    font-size: .61rem;
  }
  .platform-rail-inner > span:not(.rail-label) {
    display: block;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid rgba(111, 181, 242, .12);
    border-radius: 10px;
    background: rgba(53, 126, 190, .06);
    color: #bdd5e8;
    font-size: .72rem;
    line-height: 1.25;
  }
}

@media (max-width: 430px) {
  .platform-rail-inner { gap: 7px; }
  .platform-rail-inner > span:not(.rail-label) { font-size: .7rem; }
}

/* =========================================================
   V4.2 — balanced case-study cards
   ========================================================= */
@media (min-width: 981px) {
  .case-card {
    display: flex;
    flex-direction: column;
  }

  /* Hold the headline area to the same visual depth so all three
     Challenge / Action / Result stacks begin on the same baseline. */
  .case-card h3 {
    min-height: 3.55em;
    margin-bottom: 22px;
  }

  /* Fill the remaining card height deliberately instead of leaving
     unused space below shorter case studies. */
  .case-flow {
    flex: 1;
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 12px;
  }

  .case-flow > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .case-flow .result {
    min-height: 118px;
    justify-content: center;
  }
}

/* =========================================================
   V4.3 — mobile hero/platform stacking fix
   The hero is a flex container on desktop. Once the platform rail
   becomes in-flow on mobile, force the hero into normal block flow
   so the rail cannot become a second horizontal flex item.
   ========================================================= */
@media (max-width: 760px) {
  html, body { overflow-x: clip; }

  .hero {
    display: block;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .hero-layout {
    display: flex;
    flex-direction: column;
    width: min(calc(100% - 28px), var(--max));
    margin-inline: auto;
    padding-bottom: 30px;
  }

  .hero-content,
  .hero-brief,
  .hero-signals {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .platform-rail {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    margin-top: 0;
    clear: both;
  }

  .platform-rail-inner {
    width: min(calc(100% - 28px), var(--max));
    margin-inline: auto;
  }
}

@media (max-width: 430px) {
  .hero-layout,
  .platform-rail-inner {
    width: min(calc(100% - 24px), var(--max));
  }
  .hero-layout { padding-bottom: 26px; }
}


/* =========================================================
   V4.4 — precision alignment for case-study result metrics
   Keep + / − / ~ in a fixed-width operator column and use
   tabular numerals so every metric begins on the same axis.
   ========================================================= */
.case-flow .result .result-lines {
  margin-top: 7px;
  display: grid;
  gap: 5px;
  color: #214d73;
  font-variant-numeric: tabular-nums lining-nums;
}

.case-flow .result .result-metric {
  display: grid;
  grid-template-columns: 1.05em minmax(0, 1fr);
  align-items: baseline;
  column-gap: 0;
  line-height: 1.35;
}

.case-flow .result .result-operator {
  display: block;
  width: 1.05em;
  text-align: left;
  color: #0b68b3;
  font: inherit;
  font-weight: 850;
}

.case-flow .result .result-metric strong {
  display: block;
  font-variant-numeric: tabular-nums lining-nums;
}

.case-flow .result .result-note {
  padding-left: 1.05em;
  color: #214d73;
  line-height: 1.35;
}


/* =========================================================
   V4.5 — case-study metric polish + technology taxonomy
   Keep operators visually attached to values while preserving
   a common numeric baseline. Supporting notes return to the
   normal content axis on smaller screens.
   ========================================================= */
.case-flow .result .result-metric {
  grid-template-columns: .72em minmax(0, 1fr);
  column-gap: .14em;
}

.case-flow .result .result-operator {
  width: .72em;
  text-align: right;
}

.case-flow .result .result-note {
  padding-left: .86em;
}

@media (max-width: 760px) {
  .case-flow .result .result-lines {
    gap: 4px;
  }

  .case-flow .result .result-metric {
    grid-template-columns: .7em minmax(0, 1fr);
    column-gap: .12em;
  }

  .case-flow .result .result-operator {
    width: .7em;
  }

  /* Notes are qualitative support, not a second metric. Keeping
     them on the card's normal left edge avoids the awkward hanging
     indent visible on narrow screens. */
  .case-flow .result .result-note {
    padding-left: 0;
    margin-top: 2px;
  }
}

/* =========================================================
   V4.6 — mobile stability + cache-busted production assets
   ========================================================= */

/* Qualitative CRM outcome is intentionally styled at the same visual
   weight as the quantified follow-up result, without inventing a % value. */
.case-flow .result .result-note,
.case-flow .result .result-note strong {
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 850;
  color: #0b68b3;
}

/* Strong final mobile overrides. These live at the very end of the
   stylesheet so legacy responsive rules cannot push the platform block
   beside the hero content. */
@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .hero {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .hero-layout {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 22px !important;
    width: min(calc(100% - 28px), var(--max)) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 96px 0 28px !important;
  }

  .hero-content,
  .hero-brief,
  .hero-signals {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
  }

  .platform-rail {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    clear: both !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .platform-rail-inner {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: min(calc(100% - 28px), var(--max)) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 14px 0 18px !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .platform-rail-inner .rail-label {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    margin: 0 0 3px !important;
  }

  .platform-rail-inner > span:not(.rail-label) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  .case-flow .result .result-note,
  .case-flow .result .result-note strong {
    padding-left: 0;
    margin-top: 2px;
    font-size: 1.05rem;
    line-height: 1.35;
    color: #0b68b3;
  }
}

@media (max-width: 430px) {
  .hero-layout,
  .platform-rail-inner {
    width: min(calc(100% - 24px), var(--max)) !important;
  }
}

/* =============================
   V4.7 final header, menu, footer polish
   ============================= */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.header-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 5px 10px 5px 6px;
  border: 1px solid rgba(90,175,255,.26);
  border-radius: 999px;
  color: #a9c8e2;
  background: rgba(51,132,202,.06);
  font-size: .75rem;
  font-weight: 760;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.header-linkedin:hover {
  color: #fff;
  border-color: rgba(102,188,255,.54);
  background: rgba(51,132,202,.12);
}
.linkedin-badge {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #1984c8;
  color: #fff;
  font-size: .69rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
}
.linkedin-label { white-space: nowrap; }

/* Keep the copyright year on the same line as the copyright symbol. */
.footer-inner p #year {
  display: inline;
  margin: 0;
}

@media (max-width: 980px) {
  .linkedin-label { display: none; }
  .header-linkedin { padding: 5px; border-radius: 10px; }
}

@media (max-width: 760px) {
  /* Keep identity visible at the top on phones. */
  .brand-copy {
    display: flex !important;
    min-width: 0;
  }
  .brand-copy small { display: none; }
  .brand-copy strong {
    white-space: nowrap;
    font-size: .82rem;
  }
  .brand { gap: 9px; min-width: 0; }
  .brand-mark { flex: 0 0 40px; }
  .nav-actions { gap: 6px; }
  .header-linkedin { min-width: 36px; min-height: 36px; justify-content: center; }

  /* Make every mobile menu item share the exact same left edge and rhythm. */
  .site-nav {
    padding: 18px 24px 20px;
    gap: 0;
  }
  .site-nav a,
  .site-nav .nav-cta {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 54px;
    margin: 0;
    padding: 13px 8px !important;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .site-nav a + a {
    border-top: 1px solid rgba(130,179,220,.10);
  }
  .site-nav a:not(.nav-cta):after {
    left: 8px;
    right: 8px;
  }
}

@media (max-width: 390px) {
  .container, .nav-wrap { width: min(calc(100% - 22px), var(--max)); }
  .brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .brand-copy strong { font-size: .76rem; }
  .header-linkedin { min-width: 34px; min-height: 34px; }
  .linkedin-badge { width: 22px; height: 22px; }
  .menu-toggle { padding-inline: 5px; }
}

/* =============================
   V4.8 final signature polish
   Name hierarchy + restrained performance-red accents
   ============================= */
:root {
  --accent-red: #cf4148;
  --accent-red-soft: rgba(207, 65, 72, .74);
}

/* Establish ownership immediately without competing with the hero statement. */
.hero-name {
  margin: 0;
  color: #f4f8fc;
  font-size: clamp(2.62rem, 4vw, 2.88rem);
  line-height: 1;
  letter-spacing: -.035em;
  font-weight: 840;
}
.hero-name-accent {
  display: block;
  width: 62px;
  height: 2px;
  margin: 12px 0 15px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-red), rgba(207,65,72,.22));
  box-shadow: 0 0 14px rgba(207,65,72,.10);
}

/* Small recurring signature stroke beside section kickers. */
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kicker::before {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent-red-soft);
}

/* A quiet closing bookend, intentionally not a full-width red border. */
.site-footer {
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 108px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent-red), transparent);
  opacity: .78;
}

@media (max-width: 760px) {
  .hero-name {
    font-size: clamp(1.82rem, 8.2vw, 2rem);
    letter-spacing: -.025em;
  }
  .hero-name-accent {
    width: 52px;
    margin: 10px 0 13px;
  }
  .kicker { gap: 8px; }
  .kicker::before {
    flex-basis: 16px;
    width: 16px;
  }
}
.hero-name { text-transform: uppercase; }

/* =============================
   V4.9 final hero micro-polish
   Desktop breathing room + fixed-header clearance
   ============================= */
@media (min-width: 981px) {
  /* Shift the entire opening composition down without increasing its total
     vertical footprint. This keeps the availability pill fully clear of the
     fixed navigation while preserving the existing hero balance. */
  .hero-layout {
    padding-top: 144px;
    padding-bottom: 92px;
  }

  /* Reduce visual weight slightly on large screens while keeping the main
     value proposition unmistakably dominant. */
  .hero h1 {
    font-size: clamp(3.25rem, 6.2vw, 6.05rem);
  }

  /* Give the identity, signature stroke, positioning line, and headline a
     touch more air so the opening reads in a cleaner hierarchy. */
  .hero-name-accent {
    margin: 13px 0 18px;
  }
  .hero-overline {
    margin-bottom: 16px;
  }
}


/* Production domain/footer polish */
.footer-inner .footer-domain { color:#8dbce2; white-space:nowrap; }