/* JTBR site, v2.
 *
 * Copied from the Next.js build (app/globals.css) with two changes, both needed to run it as a
 * plain stylesheet in this Laravel app:
 *   - the `@import "tailwindcss"` line is gone. The design is hand-written CSS class by class;
 *     the handful of Tailwind utilities the markup used are written out at the end of this file.
 *   - image URLs point at /assets/v2/, where the site's own /public files now live.
 * Everything else is byte-for-byte the original, so a change upstream can be diffed against it.
 */
:root {
  --site-header-height: 96px;
  --ink: #070a0f;
  --navy: #0a1422;
  --paper: #f1f0ed;
  --white: #ffffff;
  --muted: #aeb5c0;
  --line: rgba(255, 255, 255, 0.16);
  --dark-line: rgba(7, 10, 15, 0.15);
  --red: #ed1b2f;
  --blue: #2e82ff;
  --background-primary: #071321;
  --background-card: rgba(16, 28, 43, 0.82);
  --background-card-hover: rgba(20, 36, 55, 0.96);
  --text-primary: #f6f8fc;
  --text-secondary: #93a1b5;
  --brand-red: #ff2945;
  --brand-red-soft: rgba(255, 41, 69, 0.14);
  --border-color: rgba(145, 162, 185, 0.25);
  --border-hover: rgba(145, 177, 220, 0.55);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--site-header-height); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
a:focus-visible, button:focus-visible, .file-field:focus-within { outline: 2px solid white; outline-offset: 2px; box-shadow: 0 0 0 4px var(--red); }

.site-header {
  position: fixed;
  z-index: 1000;
  inset: 0 0 auto;
  height: var(--site-header-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 4vw;
  border-bottom: 1px solid rgba(255,255,255,.18);
  background: transparent;
  color: white;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.site-header.scrolled { background: rgba(8,18,35,.96); border-color: rgba(255,255,255,.08); box-shadow: 0 4px 16px rgba(0,0,0,.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.brand {
  position: relative;
  display: block;
  width: 144px;
  aspect-ratio: 968 / 472;
  flex: 0 0 auto;
}
.brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.2));
}
.nav { display: flex; align-items: center; gap: 38px; font-size: 14px; font-weight: 600; }
.nav a { position: relative; padding: 12px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 4px; height: 1px; background: var(--red); transition: right .25s ease; }
.nav a:hover::after { right: 0; }
.header-actions { justify-self: end; display: flex; align-items: center; }
.jobs-menu { position: relative; }
.jobs-trigger { border: 0; background: var(--red); color: #fff; min-width: 116px; height: 46px; padding: 0 9px 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; font-weight: 750; }
.jobs-trigger span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.22); font-size: 12px; }
.jobs-popover { position: absolute; top: 58px; right: 0; width: 390px; background: #fff; color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.3); padding: 8px; }
.popover-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 16px; border-bottom: 1px solid var(--dark-line); }
.popover-head p { margin: 0; font-weight: 800; }
.popover-head span { color: #727984; font-size: 12px; }
.jobs-popover button { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; border: 0; background: transparent; text-align: left; padding: 13px 16px; border-bottom: 1px solid #e8e8e8; cursor: pointer; }
.jobs-popover button:hover { background: #f3f5f7; }
.jobs-popover button span { font-weight: 700; }
.jobs-popover button small { color: #6d7480; }
.jobs-popover > a { display: flex; justify-content: space-between; padding: 17px 16px 12px; color: var(--red); font-weight: 750; font-size: 13px; transition: background .2s ease, color .2s ease, transform .12s ease; }
.jobs-popover > a:hover { background: #f3f5f7; }
.jobs-popover > a:active { background: #e8ebef; transform: translateY(1px); }
.menu-toggle { display: none; }
.icon { stroke-linecap: round; stroke-linejoin: round; }
.icon-button { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.menu-button { width: 44px; height: 44px; border-radius: 12px; }

.hero { min-height: 860px; height: 100svh; position: relative; overflow: hidden; color: white; background: #030a13; }
.hero-image { position: absolute; inset: -2%; background: url("/assets/v2/jtbr-telecom-ict-hero-v2.webp") 70% center / cover no-repeat; filter: saturate(.92) contrast(1.08) brightness(.82); transform: scale(1.025); animation: heroDrift 22s ease-in-out infinite alternate; will-change: transform; }
.hero-image::after { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 78% 40%, rgba(58,151,255,.16), transparent 29%), linear-gradient(118deg, transparent 54%, rgba(26,112,255,.08) 72%, transparent 88%); mix-blend-mode: screen; animation: heroAtmosphere 9s ease-in-out infinite alternate; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,7,13,.98) 0%, rgba(2,7,13,.9) 31%, rgba(2,7,13,.34) 58%, rgba(2,7,13,.08) 100%), linear-gradient(0deg, rgba(2,7,13,.82), transparent 44%), radial-gradient(circle at 78% 38%, transparent 0 18%, rgba(2,7,13,.13) 58%, rgba(2,7,13,.34) 100%); }
.hero-grid { position: absolute; inset: 0; opacity: .1; background-image: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to right, black, rgba(0,0,0,.55) 42%, transparent 82%); animation: gridFlow 20s linear infinite; }
.hero-canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; opacity: .88; mask-image: linear-gradient(90deg, transparent 20%, rgba(0,0,0,.5) 39%, #000 60%); }
.hero-motion { position: absolute; z-index: 1; inset: 0; overflow: hidden; opacity: .56; pointer-events: none; }
.signal-wave { position: absolute; width: 35vw; aspect-ratio: 1; right: -2vw; top: 11%; border: 1px solid rgba(77,151,255,.24); border-radius: 50%; opacity: 0; animation: signalWave 7.2s ease-out infinite; }
.wave-two { animation-delay: 1.8s; }
.wave-three { animation-delay: 3.6s; }
.signal-pulse { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff, 0 0 28px #3185ff, 0 0 55px #3185ff; animation: pulseFloat 4.8s ease-in-out infinite; }
.pulse-one { top: 26%; right: 23%; }
.pulse-two { top: 47%; right: 10%; animation-delay: -1.7s; }
.pulse-three { top: 64%; right: 34%; animation-delay: -3.1s; background: var(--red); box-shadow: 0 0 8px var(--red), 0 0 35px var(--red); }
.data-streak { position: absolute; height: 1px; width: 34vw; right: -38vw; background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), #3487ff, transparent); transform: rotate(-18deg); filter: drop-shadow(0 0 8px #2e82ff); opacity: .5; animation: streakMove 9s ease-in-out infinite; }
.streak-one { top: 33%; }
.streak-two { top: 58%; animation-delay: -3.4s; opacity: .55; }
.signal-core { position: absolute; right: 12%; top: 24%; width: min(22vw, 360px); aspect-ratio: 1; border-radius: 50%; opacity: .42; background: conic-gradient(from 0deg, transparent 0 20%, rgba(71,145,255,.72) 28%, transparent 37% 58%, rgba(237,27,47,.6) 64%, transparent 72%); -webkit-mask: radial-gradient(circle, transparent 0 47%, #000 48% 50%, transparent 51% 63%, #000 64% 65%, transparent 66%); mask: radial-gradient(circle, transparent 0 47%, #000 48% 50%, transparent 51% 63%, #000 64% 65%, transparent 66%); filter: drop-shadow(0 0 14px rgba(46,130,255,.46)); animation: signalSpin 18s linear infinite; }
.spectrum-scan { position: absolute; inset: -20% auto -20% -24%; width: 18%; background: linear-gradient(90deg, transparent, rgba(74,144,255,.08), rgba(255,255,255,.22), rgba(237,27,47,.08), transparent); transform: skewX(-18deg); filter: blur(3px); mix-blend-mode: screen; animation: spectrumScan 8.5s ease-in-out infinite; }
.hero-particles { position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: .38; background-image: radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.8px), radial-gradient(circle, rgba(53,134,255,.95) 0 1.4px, transparent 2.2px), radial-gradient(circle, rgba(237,27,47,.85) 0 1px, transparent 2px); background-size: 103px 127px, 181px 211px, 263px 307px; background-position: 0 0, 30px 60px, 90px 110px; mask-image: linear-gradient(90deg, transparent 18%, black 48%, black 100%); animation: particleField 22s linear infinite; }
.hero-service-rail { position: absolute; z-index: 3; right: 4vw; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 17px; color: #c4ccd6; text-transform: uppercase; letter-spacing: .15em; font-size: 8px; }
.hero-service-rail span { display: flex; align-items: center; gap: 11px; opacity: .45; animation: railSignal 6s ease-in-out infinite; }
.hero-service-rail span:nth-child(2) { animation-delay: -2s; }
.hero-service-rail span:nth-child(3) { animation-delay: -4s; }
.hero-service-rail i { width: 5px; height: 5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px var(--red); }
@keyframes heroDrift { from { transform: scale(1.025) translate3d(-.8%,0,0); } to { transform: scale(1.075) translate3d(1.2%,-.7%,0); } }
@keyframes heroAtmosphere { from { opacity: .48; transform: translate3d(-1.5%,0,0) scale(.98); } to { opacity: .92; transform: translate3d(1.2%,-.8%,0) scale(1.035); } }
@keyframes gridFlow { to { background-position: 80px 0, 80px 0; } }
@keyframes signalWave { 0% { transform: scale(.18); opacity: 0; } 15% { opacity: .75; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes pulseFloat { 0%,100% { transform: scale(.7); opacity: .35; } 45% { transform: scale(1.65); opacity: 1; } }
@keyframes streakMove { 0%,20% { right: -38vw; opacity: 0; } 35% { opacity: .9; } 75%,100% { right: 72vw; opacity: 0; } }
@keyframes railSignal { 0%,100% { opacity: .25; transform: translateX(0); } 35% { opacity: 1; transform: translateX(-8px); } 60% { opacity: .45; transform: translateX(0); } }
@keyframes signalSpin { to { transform: rotate(360deg); } }
@keyframes spectrumScan { 0%,12% { left: -24%; opacity: 0; } 30% { opacity: 1; } 72%,100% { left: 116%; opacity: 0; } }
@keyframes particleField { to { background-position: 103px -254px, -151px -362px, 353px -417px; } }
.hero-content { position: relative; z-index: 2; width: min(780px, 58vw); margin-left: 8.2vw; padding-top: clamp(190px, 22vh, 260px); }
.eyebrow { margin: 0 0 28px; color: #d9dce2; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.eyebrow span { width: 34px; height: 2px; background: var(--red); }
.hero h1 { margin: 0; max-width: 850px; font-size: clamp(52px, 5.1vw, 84px); line-height: .97; letter-spacing: -.055em; font-weight: 520; }
h2 em, .hero h1 em { color: #a7b7ca; font-style: normal; font-weight: 300; }
.hero-copy { max-width: 590px; margin: 30px 0 34px; color: #c6ccd5; font-size: clamp(16px,1.4vw,20px); line-height: 1.65; }
.hero-actions { display: flex; gap: 12px; align-items: center; }
.button { min-height: 54px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: space-between; gap: 36px; border: 1px solid transparent; font-size: 14px; font-weight: 750; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .12s ease; }
.button span { font-size: 18px; }
.button-primary { background: var(--red); color: white; }
.button-primary:hover { background: #ff3042; }
.button-ghost { border-color: rgba(255,255,255,.4); color: white; }
.button-ghost:hover { background: rgba(255,255,255,.1); }
.button:active { transform: translateY(1px); }
.hero-footer { position: absolute; z-index: 3; left: 8.2vw; right: 8.2vw; bottom: 0; height: 100px; display: flex; gap: 68px; align-items: center; border-top: 1px solid rgba(255,255,255,.22); }
.hero-footer p { display: flex; align-items: center; gap: 13px; margin: 0; color: #c5cad2; font-size: 12px; }
.hero-footer span { color: var(--red); font-weight: 800; font-size: 10px; }
.scroll-cue { position: absolute; right: 4vw; bottom: 42px; z-index: 3; text-transform: uppercase; letter-spacing: .15em; font-size: 9px; display: flex; gap: 12px; align-items: center; transition: color .2s ease, transform .12s ease; }
.scroll-cue span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; font-size: 12px; transition: background .2s ease, border-color .2s ease; }
.scroll-cue:hover span { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.65); }
.scroll-cue:active { transform: translateY(1px); }

.section-kicker { display: flex; gap: 14px; align-items: center; color: #656d78; font-size: 10px; text-transform: uppercase; letter-spacing: .22em; font-weight: 800; }
.section-kicker span { color: var(--red); }
.section-kicker.light { color: #8f98a6; }
.statement { padding: 150px 8.2vw 140px; display: grid; grid-template-columns: 1fr 3fr; gap: 5vw; }
.statement-copy { max-width: 1040px; }
.overline { margin: 0 0 22px; text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 800; color: #6a727d; }
.overline.light { color: #89929f; }
.statement h2, .section-heading h2, .culture-copy h2, .careers h2, .apply-intro h2 { margin: 0; font-size: clamp(45px, 5vw, 78px); line-height: 1.04; letter-spacing: -.05em; font-weight: 520; }
.statement h2 em, .culture-copy h2 em, .apply-intro h2 em { color: #87909b; }
.statement-columns { margin-top: 64px; padding-top: 34px; border-top: 1px solid var(--dark-line); display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; }
.statement-columns p { margin: 0; font-size: 16px; line-height: 1.75; color: #4e5660; }
.proof-band { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 8.2vw 120px; }
.proof-band article { min-height: 135px; padding: 25px 30px; border: 1px solid var(--dark-line); display: flex; gap: 35px; align-items: flex-start; margin-right: -1px; }
.proof-number { color: var(--red); font-size: 10px; font-weight: 800; }
.proof-band strong { font-size: 17px; }
.proof-band p { color: #69717b; font-size: 13px; line-height: 1.55; margin: 10px 0 0; }

.history { position: relative; padding: 135px 0 145px; overflow: hidden; background: radial-gradient(circle at 50% 63%, rgba(46,130,255,.11), transparent 35%), #e8e7e3; }
.history::before { content: ""; position: absolute; left: 50%; top: 39%; width: 72vw; height: 460px; border-radius: 50%; background: radial-gradient(ellipse, rgba(7,20,38,.13), transparent 68%); filter: blur(32px); transform: translateX(-50%); pointer-events: none; }
.history-heading { display: grid; grid-template-columns: 1fr 3fr; gap: 5vw; padding: 0 8.2vw; }
.history-heading h2 { max-width: 1020px; margin: 0; font-size: clamp(45px, 5vw, 78px); line-height: 1.04; letter-spacing: -.05em; font-weight: 520; }
.history-heading h2 em { color: #87909b; font-style: normal; font-weight: 300; }
.history-toolbar { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 35px; margin: 74px 8.2vw 34px; padding-top: 26px; border-top: 1px solid var(--dark-line); }
.history-years { display: flex; flex-wrap: wrap; gap: 10px; }
.history-years button { min-height: 38px; padding: 0 15px; border: 1px solid rgba(7,10,15,.17); border-radius: 999px; background: transparent; color: #5f6873; font-size: 11px; font-weight: 700; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .12s ease; }
.history-years button:hover { border-color: var(--ink); color: var(--ink); }
.history-years button:active { transform: translateY(1px); }
.history-years button.is-active { border-color: var(--red); background: var(--red); color: white; box-shadow: 0 9px 24px rgba(237,27,47,.22); }
.history-controls { display: flex; align-items: center; gap: 13px; flex: 0 0 auto; }
.history-controls button { border: 1px solid rgba(7,10,15,.2); background: transparent; font-size: 18px; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .12s ease; }
.history-controls button:hover:not(:disabled) { border-color: var(--ink); background: var(--ink); color: white; }
.history-controls button:active:not(:disabled) { transform: scale(.94); }
.history-controls button:disabled { opacity: .28; cursor: not-allowed; }
.history-controls > span { min-width: 52px; color: #737b84; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-align: center; }
.history-track { position: relative; z-index: 2; display: flex; gap: 28px; width: 100%; overflow-x: auto; overflow-y: hidden; padding: 24px max(8.2vw, calc(50vw - max(220px, 16vw))) 58px; scroll-padding-inline: max(8.2vw, calc(50vw - max(220px, 16vw))); scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-inline: contain; touch-action: pan-x pan-y; cursor: grab; perspective: 1600px; perspective-origin: 50% 42%; }
.history-track::-webkit-scrollbar { display: none; }
.history-track:focus-visible { outline: 2px solid var(--red); outline-offset: -4px; }
.history-track.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.history-card { position: relative; flex: 0 0 max(440px, 32vw); min-width: 0; min-height: 570px; padding: 29px 28px 31px; overflow: hidden; isolation: isolate; scroll-snap-align: center; scroll-snap-stop: always; border: 1px solid rgba(255,255,255,.2); border-radius: 24px; background: linear-gradient(145deg, rgba(21,41,67,.98), rgba(5,12,23,.99) 58%, #05080e); color: white; transform-style: preserve-3d; box-shadow: 0 42px 65px rgba(8,18,32,.2), 0 4px 0 rgba(255,255,255,.09) inset, -14px 0 28px rgba(46,130,255,.05) inset; transition: transform .45s cubic-bezier(.2,.75,.2,1), box-shadow .45s ease, border-color .35s ease, filter .35s ease; }
.history-card:nth-child(1):not(.is-active) { transform: rotateY(5deg) translateZ(-18px); transform-origin: right center; }
.history-card:nth-child(2):not(.is-active) { transform: translateZ(-12px) translateY(8px); }
.history-card:nth-child(3):not(.is-active) { transform: rotateY(-5deg) translateZ(-18px); transform-origin: left center; }
.history-card:hover, .history-card.is-active { z-index: 3; border-color: rgba(86,159,255,.48); transform: translateY(-13px) translateZ(58px) rotateX(1.5deg); box-shadow: 0 55px 90px rgba(4,12,24,.31), 0 0 0 1px rgba(46,130,255,.12), 0 4px 0 rgba(255,255,255,.13) inset; }
.history-card::before { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(112deg, transparent 4%, rgba(255,255,255,.055) 18%, transparent 35%), radial-gradient(circle at 18% 28%, rgba(46,130,255,.21), transparent 31%); transform: translateZ(-1px); }
.history-card::after { content: ""; position: absolute; z-index: -1; right: -42%; bottom: -26%; width: 112%; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(54,132,255,.22) 0 1px, transparent 1px 38px); opacity: .52; transform: rotateX(64deg) translateZ(-30px); }
.history-card-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.14); transform: translateZ(38px); }
.history-card-top span { color: #a5afbd; text-transform: uppercase; letter-spacing: .13em; font-size: 8px; font-weight: 800; }
.history-card-top small { width: 31px; height: 31px; border: 1px solid rgba(237,27,47,.42); border-radius: 50%; background: rgba(237,27,47,.09); color: var(--red); display: grid; place-items: center; font-size: 9px; font-weight: 800; box-shadow: 0 0 24px rgba(237,27,47,.12); }
.history-card-body { position: relative; z-index: 2; display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 18px; min-height: 430px; padding-top: 34px; transform-style: preserve-3d; transform: translateZ(31px); }
.history-spine { position: relative; display: flex; justify-content: center; }
.history-beam { width: 2px; height: 100%; border-radius: 999px; background: linear-gradient(180deg, transparent, rgba(77,155,255,.95) 12%, rgba(255,255,255,.92) 46%, rgba(237,27,47,.92) 72%, transparent); box-shadow: 0 0 8px rgba(46,130,255,.8), 0 0 24px rgba(46,130,255,.38); }
.history-glow-node { position: absolute; top: 78px; left: 50%; width: 14px; height: 14px; border: 3px solid rgba(255,255,255,.95); border-radius: 50%; background: var(--red); box-shadow: 0 0 7px white, 0 0 18px var(--red), 0 0 42px rgba(237,27,47,.9); transform: translate(-50%,-50%) translateZ(55px); animation: historyNodePulse 2.8s ease-in-out infinite; }
.history-card:nth-child(2) .history-glow-node { background: #53f4bd; box-shadow: 0 0 7px white, 0 0 18px #53f4bd, 0 0 42px rgba(83,244,189,.8); }
.history-card:nth-child(3) .history-glow-node { background: #4fa4ff; box-shadow: 0 0 7px white, 0 0 18px #4fa4ff, 0 0 42px rgba(79,164,255,.82); }
@keyframes historyNodePulse { 0%,100% { transform: translate(-50%,-50%) scale(.92); } 50% { transform: translate(-50%,-50%) scale(1.2); } }
.history-card-copy { min-width: 0; }
.history-card time { display: block; margin: 2px 0 24px; color: #dce9fb; font-size: clamp(24px,2.2vw,34px); font-weight: 750; letter-spacing: -.035em; text-shadow: 0 7px 22px rgba(46,130,255,.35); }
.history-card h3 { max-width: 330px; margin: 0 0 35px; font-size: clamp(28px, 2.15vw, 39px); line-height: 1.04; letter-spacing: -.045em; font-weight: 520; }
.history-card ul { max-width: 330px; margin: 0; padding: 0; list-style: none; }
.history-card li { position: relative; padding: 13px 0 13px 19px; border-top: 1px solid rgba(255,255,255,.11); color: #a8b1be; font-size: 12px; line-height: 1.55; }
.history-card li::before { content: ""; position: absolute; left: 1px; top: 17px; width: 5px; height: 5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px rgba(237,27,47,.65); }
.history-depth { position: absolute; z-index: 0; right: 24px; bottom: 24px; width: 100px; height: 70px; transform-style: preserve-3d; transform: rotateX(62deg) rotateZ(-20deg) translateZ(10px); }
.history-depth span { position: absolute; inset: 0; border: 1px solid rgba(88,160,255,.3); border-radius: 16px; background: linear-gradient(135deg, rgba(46,130,255,.08), transparent); box-shadow: 0 0 25px rgba(46,130,255,.07) inset; }
.history-depth span:nth-child(2) { transform: translateZ(14px) translate(-9px,-9px); border-color: rgba(255,255,255,.2); }
.history-depth span:nth-child(3) { transform: translateZ(28px) translate(-18px,-18px); border-color: rgba(237,27,47,.27); }
.history-progress { position: relative; width: min(290px, 62vw); height: 18px; margin: 22px auto 0; display: flex; align-items: center; justify-content: space-between; }
.history-progress::before, .history-progress > span { content: ""; position: absolute; left: 0; top: 50%; height: 2px; transform: translateY(-50%); }
.history-progress::before { right: 0; background: rgba(7,10,15,.17); }
.history-progress > span { z-index: 1; background: var(--red); transition: width .3s ease; }
.history-progress i { position: relative; z-index: 2; width: 10px; height: 10px; border: 2px solid #e8e7e3; border-radius: 50%; background: #a4a8ad; box-shadow: 0 0 0 1px rgba(7,10,15,.24); transition: background .25s ease, transform .25s ease; }
.history-progress i.is-active { background: var(--red); transform: scale(1.18); box-shadow: 0 0 0 1px var(--red), 0 0 13px rgba(237,27,47,.35); }
.history-hint { margin: 15px 0 0; color: #757c84; text-align: center; text-transform: uppercase; letter-spacing: .17em; font-size: 8px; font-weight: 800; }

@keyframes orbitRotate { to { transform: rotate(360deg); } }

.solutions { position: relative; overflow: hidden; background: radial-gradient(circle at 88% 18%, rgba(46,130,255,.16), transparent 26%), radial-gradient(circle at 7% 86%, rgba(237,27,47,.1), transparent 23%), var(--ink); color: white; padding: 140px 8.2vw 150px; }
.solutions::before { content: ""; position: absolute; inset: 0; opacity: .055; background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px); background-size: 76px 76px; pointer-events: none; }
.section-heading { display: grid; grid-template-columns: 1fr 3fr; gap: 5vw; margin-bottom: 75px; }
.section-heading h2 em, .careers h2 em { color: #68788e; }
.solutions .section-heading { position: relative; z-index: 2; }
.solutions-lead { max-width: 720px; margin: 30px 0 0; color: #929ba8; font-size: 15px; line-height: 1.75; }
.service-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; perspective: 1500px; }
.service-card { position: relative; min-height: 440px; padding: 32px; border: 1px solid rgba(255,255,255,.13); border-radius: 24px; background: linear-gradient(145deg, rgba(17,31,51,.94), rgba(7,12,20,.96)); display: flex; flex-direction: column; overflow: hidden; transform-style: preserve-3d; box-shadow: 0 28px 60px rgba(0,0,0,.22), 0 2px 0 rgba(255,255,255,.06) inset; transition: background .35s ease, border-color .35s ease, transform .4s cubic-bezier(.2,.75,.2,1), box-shadow .4s ease; }
.service-card:nth-child(2), .service-card:nth-child(3) { background: linear-gradient(145deg, rgba(12,23,38,.96), rgba(8,12,18,.98)); }
.service-card::before { content: ""; position: absolute; width: 66%; aspect-ratio: 1; right: -19%; top: -45%; border-radius: 50%; background: radial-gradient(circle, rgba(46,130,255,.3), transparent 66%); opacity: .32; transition: opacity .3s ease, transform .45s ease; }
.service-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, rgba(255,255,255,.055), transparent 24% 72%, rgba(46,130,255,.045)); pointer-events: none; }
.service-card:hover { z-index: 2; border-color: rgba(83,153,255,.38); background: linear-gradient(145deg, #102039, #080d16); transform: translateY(-10px) rotateX(1.4deg) rotateY(-1.4deg) translateZ(24px); box-shadow: 0 42px 80px rgba(0,0,0,.34), 0 0 0 1px rgba(46,130,255,.08); }
.service-card:hover::before { opacity: .72; transform: translate(-5%, 7%) scale(1.1); }
.service-top { display: flex; justify-content: space-between; position: relative; z-index: 1; }
.service-top span { color: var(--red); font-size: 10px; font-weight: 800; }
.service-top small { border: 1px solid var(--line); border-radius: 20px; padding: 6px 11px; text-transform: uppercase; letter-spacing: .15em; font-size: 8px; color: #98a2b0; }
.service-object { position: absolute; z-index: 0; right: 25px; top: 58px; width: 132px; height: 132px; transform-style: preserve-3d; transform: rotateX(59deg) rotateZ(45deg); }
.service-object::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: white; box-shadow: 0 0 16px white, 0 0 42px var(--blue); transform: translate(-50%,-50%) translateZ(42px); }
.service-card:nth-child(even) .service-object::after { box-shadow: 0 0 16px white, 0 0 42px var(--red); }
.service-object span { position: absolute; inset: 0; border: 1px solid rgba(86,160,255,.34); border-radius: 19px; background: linear-gradient(135deg, rgba(46,130,255,.12), transparent); box-shadow: 0 0 35px rgba(46,130,255,.08) inset; }
.service-object span:nth-child(2) { inset: 17px; border-color: rgba(255,255,255,.28); transform: translateZ(22px); }
.service-object span:nth-child(3) { inset: 34px; border-color: rgba(237,27,47,.42); background: rgba(237,27,47,.08); transform: translateZ(43px); }
.service-card-intro { position: relative; z-index: 1; margin-top: auto; max-width: 88%; padding-top: 118px; transform: translateZ(20px); }
.service-card h3 { font-size: clamp(29px, 2.5vw, 41px); line-height: 1.06; font-weight: 520; letter-spacing: -.04em; margin: 0 0 20px; }
.service-card p { max-width: 540px; color: #9ca6b3; line-height: 1.65; font-size: 14px; margin: 0 0 26px; }
.service-points { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.service-points li { border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(255,255,255,.025); color: #c2c9d2; padding: 8px 11px; font-size: 9px; letter-spacing: .02em; }
.industries-band { position: relative; z-index: 2; margin-top: 24px; padding: 33px 34px; border: 1px solid rgba(255,255,255,.13); border-radius: 24px; background: linear-gradient(110deg, rgba(237,27,47,.09), rgba(255,255,255,.025) 36%, rgba(46,130,255,.1)); display: grid; grid-template-columns: .85fr 1.4fr; gap: 5vw; align-items: center; box-shadow: 0 24px 50px rgba(0,0,0,.17); }
.industries-band small { color: var(--red); text-transform: uppercase; letter-spacing: .16em; font-size: 8px; font-weight: 800; }
.industries-band h3 { margin: 10px 0 0; font-size: clamp(23px,2vw,31px); line-height: 1.08; letter-spacing: -.035em; font-weight: 520; }
.industry-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.industry-tags span { padding: 10px 13px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(3,8,14,.32); color: #b7c0cb; font-size: 10px; }

.values { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; padding: 110px 5vw 120px; background: radial-gradient(circle at 80% 75%, rgba(42,89,155,.13), transparent 34%), var(--background-primary); color: white; scroll-margin-top: 0; }
.core-values-container { position: relative; z-index: 2; width: min(1600px,100%); margin: 0 auto; }
.values-heading { display: grid; grid-template-columns: minmax(170px,.75fr) minmax(0,3fr); gap: 70px; align-items: start; margin-bottom: 90px; }
.values-heading h2 { max-width: 1100px; margin: 0; color: var(--text-primary); font-size: clamp(52px,6vw,100px); font-weight: 600; line-height: .98; letter-spacing: -.055em; }
.values-heading h2 em { color: #718198; font-style: normal; font-weight: 400; }
.heading-brand { display: block; margin-bottom: 12px; color: var(--brand-red); font-weight: 800; }
.values-intro-copy { max-width: 680px; margin: 28px 0 0; color: var(--text-secondary); font-size: 18px; line-height: 1.7; }
.values-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 24px; }
.value-card { --delay: 0ms; position: relative; isolation: isolate; overflow: hidden; grid-column: span 2; min-height: 230px; padding: 34px; border: 1px solid var(--border-color); border-radius: 24px; background: linear-gradient(145deg,rgba(255,255,255,.025),transparent 55%), var(--background-card); box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 24px 70px rgba(0,0,0,.12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transform: translateY(24px); transition: border-color 300ms ease, background 300ms ease, box-shadow 300ms ease; }
.value-card:nth-child(4) { grid-column: 2 / span 2; }
.value-card:nth-child(5) { grid-column: 4 / span 2; }
.value-card.is-visible { opacity: 1; transform: translateY(0); transition: opacity 600ms ease var(--delay), transform 600ms ease var(--delay), border-color 300ms ease, background 300ms ease, box-shadow 300ms ease; }
.value-card::before { content: ""; position: absolute; inset: auto -20% -55% 35%; z-index: -1; height: 180px; background: radial-gradient(circle,rgba(48,105,187,.2),transparent 68%); opacity: 0; transition: opacity 300ms ease; }
.value-card.is-visible:hover, .value-card.is-visible:focus-within { transform: translateY(-6px); border-color: var(--border-hover); background: linear-gradient(145deg,rgba(255,255,255,.04),rgba(44,83,137,.08)), var(--background-card-hover); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 28px 80px rgba(0,0,0,.24); }
.value-card:hover::before, .value-card:focus-within::before { opacity: 1; }
.value-content { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 28px; }
.value-letter { display: grid; flex: 0 0 auto; place-items: center; width: 82px; height: 82px; border: 1px solid rgba(255,41,69,.55); border-radius: 22px; background: var(--brand-red-soft); color: var(--brand-red); font-size: 46px; font-weight: 800; line-height: 1; transition: transform 300ms ease, box-shadow 300ms ease; }
.value-card:hover .value-letter { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(255,41,69,.04), 0 12px 35px rgba(255,41,69,.12); }
.value-content h3 { margin: 4px 0 14px; color: var(--text-primary); font-size: clamp(24px,2vw,31px); font-weight: 700; letter-spacing: -.035em; }
.value-content p { max-width: 360px; margin: 0; color: var(--text-secondary); font-size: 16px; line-height: 1.7; }
.value-letter-bg { position: absolute; right: 12px; bottom: -45px; z-index: 0; color: rgba(255,255,255,.025); font-size: 190px; font-weight: 900; line-height: 1; pointer-events: none; user-select: none; transition: color 300ms ease, transform 300ms ease; }
.value-card:hover .value-letter-bg { color: rgba(74,125,198,.075); transform: translateY(-6px); }

.culture { position: relative; display: grid; grid-template-columns: 1.16fr .84fr; min-height: clamp(720px, 56.25vw, 1050px); overflow: hidden; background: #071321; }
.culture-visual { position: relative; grid-column: 1 / -1; grid-row: 1; min-height: inherit; overflow: hidden; background: #071321; color: white; }
.culture-image { position: absolute; inset: 0; display: grid; place-items: center; }
.culture-image img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: #071321; filter: saturate(.96) contrast(1.02) brightness(.86); }
.culture-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,8,14,.03) 0 47%, rgba(3,8,14,.28) 62%, rgba(3,8,14,.72) 100%), linear-gradient(180deg, rgba(3,8,14,.04), transparent 55%, rgba(3,8,14,.64)), repeating-linear-gradient(90deg, transparent 0, transparent 79px, rgba(255,255,255,.035) 80px); }
.culture-caption { position: absolute; bottom: 55px; left: 55px; }
.culture-caption span { display: block; color: var(--red); text-transform: uppercase; letter-spacing: .2em; font-size: 9px; font-weight: 800; margin-bottom: 15px; }
.culture-caption strong { font-size: clamp(42px,4vw,67px); line-height: 1; letter-spacing: -.05em; font-weight: 500; }
.culture-copy { position: relative; z-index: 2; grid-column: 2; grid-row: 1; padding: 95px 6vw 85px; display: grid; grid-template-rows: auto 1fr; gap: 70px; background: linear-gradient(90deg, rgba(7,19,33,.14), rgba(7,19,33,.82) 18%, rgba(7,19,33,.94)); color: white; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.culture-copy h2 { font-size: clamp(40px, 4vw, 66px); }
.culture-copy .section-kicker, .culture-copy .overline { color: #b2bcc9; }
.culture-copy .body-copy { color: #c3ccd7; }
.culture-copy h2 em { color: #a9b9cc; }
.body-copy { color: #5a626c; line-height: 1.75; margin: 34px 0; max-width: 580px; }
.culture-list { list-style: none; margin: 0 0 38px; padding: 0; border-top: 1px solid rgba(255,255,255,.18); }
.culture-list li { display: flex; gap: 25px; align-items: center; padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.18); color: #d9e0e9; font-size: 13px; }
.culture-list span { color: var(--red); font-size: 9px; font-weight: 800; }
.culture-copy .text-link { display: none; }
.text-link { display: inline-flex; align-items: center; gap: 25px; font-weight: 800; font-size: 13px; border-bottom: 1px solid var(--ink); padding: 10px 0 8px; transition: color .2s ease, border-color .2s ease, gap .2s ease, transform .12s ease; }
.text-link:hover { color: var(--red); border-color: var(--red); gap: 32px; }
.text-link:active { transform: translateY(1px); }

.careers { background: #0a1422; color: white; padding: 80px 5.5vw 145px; }
.career-banner { position: relative; min-height: 690px; overflow: hidden; border: 1px solid rgba(101,174,255,.18); border-radius: 28px; background: #030b17; margin-bottom: 125px; box-shadow: 0 42px 90px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.08) inset, 0 0 70px rgba(46,130,255,.09); transform: translateZ(0); }
.career-banner-image { position: absolute; inset: -5%; background: url("/assets/v2/jtbr-careers-tech-v2.webp") 74% center / cover no-repeat; filter: saturate(.95) contrast(1.08) brightness(.78); transform: scale(1.035); animation: careerImageDrift 20s ease-in-out infinite alternate; will-change: transform; }
.career-banner::before { position: absolute; z-index: 2; inset: 0; border-radius: inherit; content: ""; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.08), transparent 22% 75%, rgba(75,155,255,.12)); box-shadow: 0 0 0 1px rgba(255,255,255,.035) inset; }
.career-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,7,14,.98) 0%, rgba(2,8,16,.93) 34%, rgba(2,9,18,.5) 56%, rgba(2,10,19,.08) 100%), linear-gradient(0deg, rgba(2,8,16,.72), transparent 57%); }
.career-banner-content { position: relative; z-index: 3; width: min(960px, 68%); padding: 95px 6.5vw 85px; }
.career-banner-content h2 { margin: 0; font-size: clamp(58px, 6.5vw, 108px); line-height: 1.02; letter-spacing: -.055em; font-weight: 420; }
.career-banner-content h2 em { color: #91baf0; font-style: normal; font-weight: 300; text-shadow: 0 0 35px rgba(64,144,255,.18); }
.career-banner-button { width: max-content; margin-top: 50px; background: white; color: var(--ink); border: 0; }
.career-banner-button:hover { background: var(--red); color: white; }
.career-banner-glow { position: absolute; z-index: 2; right: 5%; top: 7%; width: min(38vw, 560px); aspect-ratio: 1; border: 1px solid rgba(111,188,255,.25); border-radius: 50%; filter: drop-shadow(0 0 18px rgba(60,144,255,.32)); animation: orbitRotate 28s linear infinite; }
.career-banner-glow::before, .career-banner-glow::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(237,27,47,.2); }
.career-banner-glow::before { inset: 16%; }
.career-banner-glow::after { inset: 33%; border-color: rgba(111,156,255,.28); }
.career-banner-glow i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 20px #3f88ff; }
.career-banner-glow i:nth-child(1) { top: 13%; left: 27%; }
.career-banner-glow i:nth-child(2) { top: 52%; right: -4px; background: var(--red); box-shadow: 0 0 22px var(--red); }
.career-banner-glow i:nth-child(3) { bottom: 7%; left: 24%; }
.career-banner-atmosphere { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.career-beam { position: absolute; top: -35%; width: 13%; height: 175%; opacity: .25; background: linear-gradient(90deg, transparent, rgba(115,198,255,.25), rgba(255,255,255,.5), transparent); filter: blur(8px); transform: rotate(20deg); animation: careerBeam 8s ease-in-out infinite alternate; }
.career-beam.beam-one { right: 30%; }
.career-beam.beam-two { right: 13%; width: 8%; opacity: .16; animation-delay: -2.7s; animation-duration: 10s; }
.career-beam.beam-three { right: 44%; width: 6%; opacity: .12; animation-delay: -5.2s; animation-duration: 12s; }
.career-data-trail { position: absolute; right: -8%; width: 49%; height: 26%; border-top: 1px solid rgba(117,191,255,.5); border-radius: 50%; opacity: .5; filter: drop-shadow(0 0 7px rgba(64,148,255,.7)); transform: rotate(-8deg); }
.career-data-trail::after { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; content: ""; background: white; box-shadow: 0 0 10px white, 0 0 24px #358cff; animation: careerPacket 5.8s linear infinite; }
.career-data-trail.trail-one { top: 27%; }
.career-data-trail.trail-two { top: 42%; right: -13%; border-color: rgba(237,27,47,.42); opacity: .35; transform: rotate(-14deg) scale(.82); }
.career-data-trail.trail-two::after { background: #ff485b; box-shadow: 0 0 10px #ff485b, 0 0 24px #ed1b2f; animation-delay: -2s; animation-duration: 7.4s; }
.career-data-trail.trail-three { top: 55%; right: -4%; opacity: .28; transform: rotate(-20deg) scale(.68); }
.career-data-trail.trail-three::after { animation-delay: -4.1s; animation-duration: 8.5s; }
.career-scan { position: absolute; top: 0; bottom: 0; left: -16%; width: 12%; opacity: 0; background: linear-gradient(90deg, transparent, rgba(87,171,255,.08), rgba(255,255,255,.2), rgba(237,27,47,.06), transparent); filter: blur(4px); transform: skewX(-18deg); animation: careerScan 9.5s ease-in-out infinite; }
@keyframes careerImageDrift { from { transform: scale(1.035) translate3d(-.8%,0,0); } to { transform: scale(1.09) translate3d(1.5%,-.7%,0); } }
@keyframes careerBeam { from { opacity: .1; transform: translateX(-15%) rotate(20deg) scaleX(.8); } to { opacity: .38; transform: translateX(18%) rotate(20deg) scaleX(1.15); } }
@keyframes careerPacket { from { left: 2%; opacity: 0; } 13% { opacity: 1; } 82% { opacity: 1; } to { left: 96%; opacity: 0; } }
@keyframes careerScan { 0%,12% { left: -16%; opacity: 0; } 28% { opacity: 1; } 72%,100% { left: 112%; opacity: 0; } }
.careers-intro { display: grid; grid-template-columns: 1fr 2.3fr 1fr; gap: 5vw; align-items: end; margin-bottom: 80px; }
.careers-intro { margin-left: 2.7vw; margin-right: 2.7vw; scroll-margin-top: 25px; }
.careers-intro > p { color: #919aa7; line-height: 1.7; font-size: 14px; margin: 0; }
.job-list { border-top: 1px solid var(--line); margin: 0 2.7vw; }
.job-row { width: 100%; min-height: 112px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: white; display: grid; grid-template-columns: 8% 51% 31% 10%; align-items: center; text-align: left; cursor: pointer; transition: background .2s ease, padding .2s ease, transform .12s ease; }
.job-row:hover { background: rgba(255,255,255,.045); padding-left: 12px; }
.job-row:focus-visible { background: rgba(255,255,255,.065); padding-left: 12px; }
.job-row:active { background: rgba(255,255,255,.09); transform: translateY(1px); }
.job-index { color: var(--red); font-size: 10px; font-weight: 800; }
.job-main { display: flex; flex-direction: column; gap: 8px; }
.job-main strong { font-size: clamp(20px,2vw,29px); font-weight: 500; letter-spacing: -.02em; }
.job-main small, .job-meta small { color: #7f8997; font-size: 11px; }
.job-meta { display: flex; gap: 35px; }
.job-arrow { justify-self: end; font-size: 22px; }

.apply-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 8vw; padding: 145px 8.2vw 155px; }
.apply-intro { position: sticky; top: 45px; align-self: start; }
.apply-intro .section-kicker { margin-bottom: 70px; }
.apply-intro > p:not(.overline) { color: #5b636d; max-width: 480px; line-height: 1.7; margin-top: 30px; }
.application-note { margin-top: 48px; padding: 24px 0; border-top: 1px solid var(--dark-line); border-bottom: 1px solid var(--dark-line); display: grid; grid-template-columns: 1fr 2fr; gap: 20px; }
.application-note span { text-transform: uppercase; letter-spacing: .15em; font-size: 9px; font-weight: 800; color: var(--red); }
.application-note p { margin: 0; color: #646c76; font-size: 12px; line-height: 1.6; }
.application-form { padding-top: 96px; }
.application-form label { display: flex; flex-direction: column; gap: 11px; margin-bottom: 28px; }
.application-form label > span:first-child { font-size: 11px; font-weight: 800; }
.application-form label small { color: #8a9199; font-size: 9px; font-weight: 500; margin-left: 5px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 25px; }
.application-form input:not([type="checkbox"]):not([type="file"]), .application-form select, .application-form textarea { width: 100%; border: 0; border-bottom: 1px solid #b9bdc1; background: transparent; border-radius: 0; padding: 13px 2px 15px; outline: none; color: var(--ink); }
.application-form input:focus, .application-form select:focus, .application-form textarea:focus { border-color: var(--red) !important; }
.application-form textarea { resize: vertical; }
.file-field { border: 1px dashed #aeb3b9; min-height: 120px; padding: 23px; display: grid !important; grid-template-columns: auto 1fr; align-items: center; position: relative; cursor: pointer; }
.file-field:hover { border-color: var(--red); background: rgba(237,27,47,.025); }
.file-field:focus-within { border-color: var(--red); background: rgba(237,27,47,.04); }
.file-field .file-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: white; display: grid; place-items: center; font-size: 19px; }
.file-field > span:nth-child(2) { display: flex; flex-direction: column; gap: 8px; }
.file-field > span:nth-child(2) strong { font-size: 13px; }
.file-field > span:nth-child(2) small { margin: 0; }
.file-field input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.consent-field { flex-direction: row !important; gap: 12px !important; align-items: flex-start; font-size: 11px; line-height: 1.55; color: #5f6670; }
.consent-field input { accent-color: var(--red); margin: 2px 0 0; }
.submit-button { width: 100%; min-height: 62px; border: 0; background: var(--red); color: white; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; font-weight: 800; cursor: pointer; transition: background .2s ease, transform .12s ease; }
.submit-button:hover:not(:disabled) { background: #ff3042; }
.submit-button:active:not(:disabled) { transform: translateY(1px); }
.submit-button:disabled { opacity: .6; cursor: wait; }
.submit-button span { font-size: 20px; }
.form-message { margin: 16px 0 0; padding: 15px; font-size: 12px; line-height: 1.5; }
.form-message.success { background: #dff5e8; color: #125b32; }
.form-message.error { background: #ffe1e4; color: #8f1622; }

.contact-section { display: grid; grid-template-columns: .92fr 1.08fr; min-height: 760px; background: #e8e7e3; }
.contact-details { padding: 105px 5.8vw 95px 8.2vw; display: grid; grid-template-rows: auto 1fr; gap: 70px; }
.contact-details h2 { margin: 0; max-width: 650px; font-size: clamp(45px, 4.8vw, 76px); line-height: 1.04; letter-spacing: -.05em; font-weight: 520; }
.contact-details h2 em { color: #87909b; font-style: normal; font-weight: 300; }
.contact-list { margin-top: 65px; border-top: 1px solid var(--dark-line); display: grid; grid-template-columns: 1.3fr .7fr; gap: 45px; padding-top: 32px; }
.contact-list > div { display: flex; flex-direction: column; align-items: flex-start; }
.contact-list small { color: var(--red); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .18em; margin-bottom: 18px; }
.contact-list address { color: #404852; font-size: 14px; line-height: 1.7; font-style: normal; }
.contact-list a:not(.contact-phone) { margin-top: 25px; padding: 8px 0; border-bottom: 1px solid var(--ink); font-size: 11px; font-weight: 800; transition: color .2s ease, border-color .2s ease, transform .12s ease; }
.contact-list a:not(.contact-phone):hover { color: var(--red); border-color: var(--red); }
.contact-list a:not(.contact-phone):active { transform: translateY(1px); }
.contact-list a span { margin-left: 16px; }
.contact-phone { font-size: clamp(22px, 2.2vw, 34px); font-weight: 550; letter-spacing: -.03em; }
.contact-list p { margin: 16px 0 0; color: #6d747c; font-size: 11px; line-height: 1.6; }
.map-frame { position: relative; min-height: 760px; background: #cfd2d4; overflow: hidden; }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(1.08) contrast(1.01); }
.map-label { position: absolute; z-index: 2; left: 28px; bottom: 28px; background: var(--ink); color: white; padding: 13px 16px; display: flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: .13em; font-size: 8px; font-weight: 800; box-shadow: 0 15px 35px rgba(0,0,0,.2); }
.map-label span { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px var(--red); }

.footer { background: var(--ink); color: white; padding: 70px 8.2vw 28px; }
.footer .brand { width: 164px; }
.footer-top { display: grid; grid-template-columns: 1fr 1fr auto; align-items: start; padding-bottom: 60px; border-bottom: 1px solid var(--line); }
.footer-top > p { margin: 0; font-size: clamp(26px, 3vw, 43px); letter-spacing: -.04em; line-height: 1.1; color: #b4bdc8; }
.footer-top > a { border: 1px solid var(--line); transition: background .2s ease, border-color .2s ease, transform .12s ease; }
.footer-top > a:hover { background: var(--red); border-color: var(--red); }
.footer-top > a:active { transform: translateY(1px); }
.footer-social-row { display: grid; grid-template-columns: .7fr 2fr; gap: 5vw; padding: 45px 0; border-bottom: 1px solid var(--line); }
.footer-social-row > div:first-child { display: flex; flex-direction: column; gap: 11px; }
.footer-social-row small { color: var(--red); text-transform: uppercase; letter-spacing: .2em; font-size: 8px; font-weight: 800; }
.footer-social-row p { margin: 0; max-width: 300px; color: #7d8794; font-size: 11px; line-height: 1.6; }
.social-links { display: grid; grid-template-columns: repeat(3, 1fr); }
.social-links a { min-height: 72px; border: 1px solid var(--line); margin-left: -1px; padding: 0 15px; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; transition: background .25s ease, border-color .25s ease, color .25s ease, transform .18s ease; }
.social-links a.facebook:hover { background: #1877f2; border-color: #1877f2; color: white; }
.social-links a.linkedin:hover { background: #0a66c2; border-color: #0a66c2; color: white; }
.social-links a.instagram:hover { background: linear-gradient(120deg, #833ab4, #e1306c 52%, #f77737); border-color: #e1306c; color: white; }
.social-links a:active { background: #c80e20; transform: translateY(1px); }
.social-icon { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.26); border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.07); color: white; transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.social-icon svg { width: 16px; height: 16px; fill: currentColor; }
.social-links a:hover .social-icon { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.16); transform: translateY(-2px) scale(1.04); }
.social-links span { font-size: 11px; font-weight: 700; }
.social-links i { font-size: 15px; font-style: normal; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 4vw; padding: 55px 0 80px 34%; }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.footer-grid small { color: #727d8b; text-transform: uppercase; letter-spacing: .18em; font-size: 8px; margin-bottom: 7px; }
.footer-grid a, .footer-grid p { margin: 0; font-size: 12px; color: #c7ccd3; }
.footer-grid a:hover { color: var(--red); }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: space-between; color: #6f7885; font-size: 9px; text-transform: uppercase; letter-spacing: .14em; }

.whatsapp-button { position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px; border: 1px solid rgba(255,255,255,.34); border-radius: 50%; background: #25d366; color: white; display: flex; align-items: center; justify-content: center; z-index: 999; box-shadow: 0 6px 20px rgba(0,0,0,.22); transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.whatsapp-button:hover { background: #20bd5a; transform: scale(1.08); box-shadow: 0 9px 28px rgba(0,0,0,.28); }
.whatsapp-button:active { transform: scale(.96); }
.whatsapp-mark { display: block; font-size: 29px; line-height: 1; font-weight: 700; transform: rotate(-12deg); }

.job-modal { position: fixed; z-index: 1100; inset: 0; background: rgba(0,0,0,.72); display: flex; justify-content: flex-end; backdrop-filter: blur(8px); }
.job-panel { width: min(610px, 100%); height: 100%; overflow-y: auto; background: #f4f3ef; color: var(--ink); padding: 75px 65px; box-shadow: -20px 0 70px rgba(0,0,0,.3); animation: slideIn .28s ease both; }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.modal-close { position: absolute; top: 25px; right: 28px; border: 1px solid var(--dark-line); background: transparent; font-size: 25px; cursor: pointer; }
.job-panel .eyebrow { color: #636b76; margin-top: 35px; }
.job-panel h2 { font-size: clamp(42px,5vw,68px); line-height: 1; letter-spacing: -.05em; margin: 0 0 25px; font-weight: 500; }
.modal-meta { display: flex; gap: 10px; }
.modal-meta span { border: 1px solid var(--dark-line); border-radius: 20px; padding: 7px 11px; font-size: 10px; color: #626a74; }
.modal-summary { margin: 42px 0; color: #555e68; font-size: 17px; line-height: 1.7; }
.job-panel h3 { margin: 0 0 18px; font-size: 14px; }
.job-panel ul { padding: 0; margin: 0 0 40px; list-style: none; border-top: 1px solid var(--dark-line); }
.job-panel li { padding: 15px 0 15px 24px; border-bottom: 1px solid var(--dark-line); color: #555e68; font-size: 13px; line-height: 1.55; position: relative; }
.job-panel li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.modal-footnote { color: #8a9097; font-size: 10px; line-height: 1.5; margin-top: 20px; }

@media (max-width: 1180px) {
  .history-track { gap: 20px; padding: 22px max(8.2vw, calc(50vw - 310px)) 54px; scroll-padding-inline: max(8.2vw, calc(50vw - 310px)); }
  .history-card, .history-card:nth-child(1):not(.is-active), .history-card:nth-child(2):not(.is-active), .history-card:nth-child(3):not(.is-active) { flex: 0 0 min(620px, 70vw); transform: none; scroll-snap-align: center; scroll-snap-stop: always; }
  .history-card:hover, .history-card.is-active { transform: translateY(-9px) translateZ(36px); }
}

@media (max-width: 1100px) {
  .nav { gap: 14px; font-size: 13px; }
  .site-header { grid-template-columns: 1fr auto 1fr; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 420px; }
  .service-card-intro { padding-top: 52px; max-width: 84%; }
  .history-heading { grid-template-columns: .4fr 1fr; }
  .values { padding-inline: 32px; }
  .values-heading { grid-template-columns: 1fr; gap: 30px; margin-bottom: 64px; }
  .values-heading .section-kicker { padding-top: 0; }
  .values-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .value-card, .value-card:nth-child(4), .value-card:nth-child(5) { grid-column: auto; }
  .value-card:last-child { grid-column: 1 / -1; }
  .culture { grid-template-columns: 1fr; min-height: 0; }
  .culture-visual { grid-column: 1; grid-row: 1; min-height: 0; aspect-ratio: 1672 / 940; }
  .culture-copy { grid-column: 1; grid-row: 2; padding: 75px 6vw 85px; grid-template-columns: .4fr 1fr; grid-template-rows: auto; background: #071321; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .careers-intro { grid-template-columns: .5fr 1.5fr; }
  .careers-intro > p { grid-column: 2; }
  .hero-service-rail { display: none; }
  .contact-section { grid-template-columns: 1fr; }
  .map-frame { min-height: 580px; }
}

@media (max-width: 800px) {
  html { scroll-padding-top: 76px; }
  .site-header { height: 76px; padding: 0 22px; grid-template-columns: 1fr auto; }
  .brand { width: 112px; }
  .nav { position: fixed; z-index: 49; inset: 0; background: #080d15; padding: 120px 28px 40px; flex-direction: column; align-items: stretch; gap: 0; transform: translateX(100%); transition: transform .28s ease; }
  .nav.is-open { transform: translateX(0); }
  .nav a { padding: 18px 0; font-size: 25px; border-bottom: 1px solid var(--line); }
  .header-actions { grid-column: 2; }
  .jobs-trigger { min-width: 88px; height: 40px; padding-left: 15px; }
  .jobs-trigger span { width: 24px; height: 24px; }
  .jobs-popover { position: fixed; top: 76px; left: 12px; right: 12px; width: auto; }
  .menu-toggle { position: relative; z-index: 52; display: block; margin-left: 7px; border: 1px solid var(--line); background: transparent; }
  .menu-toggle span { position: absolute; left: 10px; right: 10px; height: 1px; background: white; transition: .2s ease; }
  .menu-toggle span:first-child { top: 15px; }
  .menu-toggle span:last-child { top: 23px; }
  .menu-toggle.is-open span:first-child { top: 19px; transform: rotate(45deg); }
  .menu-toggle.is-open span:last-child { top: 19px; transform: rotate(-45deg); }
  .hero { min-height: 760px; }
  .hero-image { background-position: 64% center; opacity: .78; }
  .hero-scrim { background: linear-gradient(90deg, rgba(3,7,13,.93), rgba(3,7,13,.4)), linear-gradient(0deg, rgba(3,7,13,.88), transparent 55%); }
  .hero-content { width: auto; margin: 0 23px; padding-top: 160px; }
  .hero h1 { font-size: clamp(45px,13vw,68px); }
  .hero-copy { font-size: 15px; line-height: 1.6; }
  .hero-actions { align-items: stretch; flex-direction: column; max-width: 310px; }
  .hero-footer { left: 23px; right: 23px; height: 85px; gap: 24px; overflow: hidden; }
  .hero-footer p:nth-child(3) { display: none; }
  .hero-footer p { font-size: 10px; }
  .scroll-cue { display: none; }
  .statement, .section-heading { grid-template-columns: 1fr; }
  .statement { padding: 90px 23px; }
  .statement-copy { margin-top: 38px; }
  .statement h2, .section-heading h2, .culture-copy h2, .careers h2, .apply-intro h2 { font-size: 43px; }
  .statement-columns { grid-template-columns: 1fr; gap: 25px; margin-top: 38px; }
  .proof-band { padding: 0 23px 80px; grid-template-columns: 1fr; }
  .proof-band article { margin-bottom: -1px; }
  .history { padding: 90px 0 95px; }
  .history-heading { grid-template-columns: 1fr; padding: 0 23px; }
  .history-heading > div:nth-child(2) { margin-top: 38px; }
  .history-heading h2 { font-size: 43px; }
  .history-toolbar { margin: 48px 23px 24px; align-items: flex-end; }
  .history-years { gap: 8px; }
  .history-years button { min-height: 36px; padding: 0 12px; font-size: 10px; }
  .history-controls > span { display: none; }
  .history-track { gap: 16px; padding: 14px 7.5vw 40px; scroll-padding-inline: 7.5vw; }
  .history-card, .history-card:nth-child(1):not(.is-active), .history-card:nth-child(2):not(.is-active), .history-card:nth-child(3):not(.is-active) { flex: 0 0 85vw; min-height: 520px; padding: 25px 23px 28px; transform: none; }
  .history-card:hover, .history-card.is-active { transform: translateY(-6px); }
  .history-card-body { grid-template-columns: 32px minmax(0,1fr); gap: 15px; min-height: 400px; padding-top: 28px; }
  .history-card h3 { margin-bottom: 28px; font-size: clamp(31px, 9vw, 41px); }
  .history-card time { font-size: 25px; }
  .history-depth { right: 20px; bottom: 22px; transform: rotateX(62deg) rotateZ(-20deg) scale(.82); transform-origin: right bottom; }
  .history-hint { margin-top: 11px; }
  .solutions { padding: 90px 23px; }
  .section-heading { margin-bottom: 45px; }
  .section-heading > div:nth-child(2) { margin-top: 35px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 420px; padding: 26px; }
  .service-object { right: 19px; top: 58px; width: 110px; height: 110px; }
  .service-card-intro { padding-top: 112px; max-width: 100%; }
  .service-card h3 { font-size: 31px; }
  .industries-band { grid-template-columns: 1fr; gap: 28px; padding: 28px 25px; }
  .industry-tags { justify-content: flex-start; }
  .values { padding: 90px 23px; }
  .values-heading { grid-template-columns: 1fr; margin-bottom: 45px; }
  .values-heading > div:nth-child(2) { margin-top: 35px; }
  .values-heading h2 { font-size: 43px; }
  .culture-visual { min-height: 0; aspect-ratio: 1672 / 940; }
  .culture-caption { left: 23px; bottom: 35px; }
  .culture-copy { padding: 75px 23px 85px; grid-template-columns: 1fr; gap: 45px; }
  .careers { padding: 18px 0 90px; }
  .career-banner { min-height: 630px; margin: 0 15px 90px; }
  .career-banner-content { width: 100%; padding: 80px 24px 55px; }
  .career-banner-content h2 { font-size: clamp(48px, 13vw, 70px); }
  .career-banner-button { margin-top: 38px; }
  .career-banner-image { background-position: 72% center; }
  .career-banner-glow { top: auto; width: 95vw; right: -38%; bottom: -10%; }
  .career-beam.beam-three, .career-data-trail.trail-three { display: none; }
  .careers-intro { display: block; }
  .careers-intro, .job-list { margin-left: 23px; margin-right: 23px; }
  .careers-intro > div:nth-child(2) { margin: 38px 0 28px; }
  .job-row { grid-template-columns: 11% 75% 14%; min-height: 105px; }
  .job-meta { display: none; }
  .job-main strong { font-size: 19px; }
  .apply-section { grid-template-columns: 1fr; padding: 90px 23px; }
  .apply-intro { position: static; }
  .apply-intro .section-kicker { margin-bottom: 45px; }
  .application-form { padding-top: 25px; }
  .field-grid { grid-template-columns: 1fr; gap: 0; }
  .contact-details { padding: 80px 23px; gap: 45px; }
  .contact-details h2 { font-size: 43px; }
  .contact-list { grid-template-columns: 1fr; gap: 42px; margin-top: 45px; }
  .contact-phone { font-size: 26px; }
  .map-frame { min-height: 480px; }
  .map-label { left: 15px; bottom: 15px; }
  .footer { padding: 55px 23px 25px; }
  .footer-top { grid-template-columns: 1fr auto; gap: 30px; }
  .footer-top > p { grid-row: 2; grid-column: 1 / -1; }
  .footer-social-row { grid-template-columns: 1fr; gap: 28px; }
  .social-links { grid-template-columns: 1fr; }
  .social-links a { margin: -1px 0 0; }
  .footer-grid { padding: 45px 0 55px; grid-template-columns: 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 10px; }
  .job-panel { padding: 65px 24px 45px; }
  .whatsapp-button { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); width: 52px; height: 52px; }
  .whatsapp-mark { font-size: 27px; }
}

@media (max-width: 520px) {
  .history-toolbar { align-items: stretch; flex-direction: column; }
  .history-years { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
  .history-years::-webkit-scrollbar { display: none; }
  .history-years button { flex: 0 0 auto; }
  .history-controls { align-self: flex-end; }
}

@media (max-width: 700px) {
  .values { min-height: auto; padding: 80px 20px; }
  .values-heading { margin-bottom: 44px; }
  .values-heading > div:nth-child(2) { margin-top: 0; }
  .values-heading h2 { font-size: clamp(43px,13vw,62px); line-height: 1; }
  .values-intro-copy { margin-top: 22px; font-size: 16px; }
  .values-grid { grid-template-columns: 1fr; gap: 18px; }
  .value-card, .value-card:last-child { grid-column: auto; }
  .value-card { min-height: 210px; padding: 26px 24px; border-radius: 20px; }
  .value-content { gap: 20px; }
  .value-letter { width: 66px; height: 66px; border-radius: 18px; font-size: 36px; }
  .value-content h3 { margin-top: 2px; font-size: 24px; }
  .value-content p { font-size: 15px; }
  .value-letter-bg { right: 4px; bottom: -30px; font-size: 145px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .value-card { opacity: 1; transform: none !important; transition: none; }
  .value-letter, .value-letter-bg, .value-card::before { transition: none; }
  .value-card:hover, .value-card:focus-within { transform: none; }
}

/* Three-dimensional company journey */
.history {
  position: relative;
  isolation: isolate;
  padding: 135px 0 145px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 72%, rgba(46,130,255,.13), transparent 33%),
    linear-gradient(180deg, #f5f4f1 0%, #dedfdf 100%);
}
.history::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background-image:
    linear-gradient(rgba(7,19,33,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,19,33,.055) 1px, transparent 1px);
  background-size: 74px 74px;
  filter: none;
  transform: none;
  opacity: .52;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 28%, #000 88%, transparent);
}
.history::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 8%;
  right: 8%;
  bottom: 83px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(7,19,33,.25), transparent 66%);
  filter: blur(34px);
  transform: perspective(700px) rotateX(64deg);
  pointer-events: none;
}
.history-heading { position: relative; z-index: 2; }
.history-heading h2 { max-width: 980px; }
.history-toolbar {
  position: relative;
  z-index: 5;
  margin: 74px 0 34px;
  padding: 18px 8.2vw;
  border: 0;
  background: rgba(7,10,15,.97);
  color: white;
  box-shadow: 0 18px 36px rgba(7,19,33,.14);
}
.history-years button {
  border-color: rgba(255,255,255,.22);
  color: #aeb7c4;
}
.history-years button:hover { border-color: white; color: white; }
.history-years button.is-active { border-color: var(--red); color: white; }
.history-controls button { border-color: rgba(255,255,255,.25); color: white; }
.history-controls button:hover:not(:disabled) { border-color: var(--red); background: var(--red); }
.history-controls > span { color: #929ba8; }

.history-track {
  gap: 26px;
  padding-top: 36px;
  padding-bottom: 82px;
  perspective: 1900px;
  perspective-origin: 50% 42%;
}
.history-card,
.history-card:nth-child(1):not(.is-active),
.history-card:nth-child(2):not(.is-active),
.history-card:nth-child(3):not(.is-active) {
  --journey-accent: #ed1b2f;
  position: relative;
  flex: 0 0 max(470px, 31vw);
  min-height: 690px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 26px;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  transform: rotateY(5deg) translateZ(-22px);
  transform-origin: right center;
  transform-style: preserve-3d;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.history-card:nth-child(2),
.history-card:nth-child(2):not(.is-active) { --journey-accent: #28c994; transform: translateY(16px) translateZ(-34px); }
.history-card:nth-child(3),
.history-card:nth-child(3):not(.is-active) { --journey-accent: #2e82ff; transform: rotateY(-5deg) translateZ(-22px); transform-origin: left center; }
.history-card::before,
.history-card::after { content: none; }
.history-card:hover,
.history-card.is-active {
  z-index: 4;
  border-color: transparent;
  transform: translateY(-13px) translateZ(62px) rotateX(1deg);
  box-shadow: none;
}
.journey-slab {
  position: relative;
  min-height: 690px;
  padding: 28px 30px 42px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(7,19,33,.16);
  border-radius: 26px;
  background:
    linear-gradient(130deg, rgba(255,255,255,.98), rgba(242,243,244,.94) 58%, rgba(224,228,232,.96));
  box-shadow:
    0 46px 70px rgba(7,19,33,.18),
    0 3px 0 rgba(255,255,255,.95) inset,
    -9px 11px 0 rgba(12,28,47,.08),
    -18px 22px 38px rgba(7,19,33,.09);
  transform-style: preserve-3d;
  transition: border-color .35s ease, box-shadow .4s ease, background .35s ease;
}
.history-card:hover .journey-slab,
.history-card.is-active .journey-slab {
  border-color: color-mix(in srgb, var(--journey-accent) 52%, transparent);
  background: linear-gradient(130deg, #fff, #f5f7f9 58%, #e8ecf0);
  box-shadow:
    0 58px 92px rgba(7,19,33,.27),
    0 0 0 1px color-mix(in srgb, var(--journey-accent) 18%, transparent),
    0 3px 0 white inset,
    -12px 14px 0 rgba(12,28,47,.1),
    0 0 55px color-mix(in srgb, var(--journey-accent) 15%, transparent);
}
.journey-slab::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 7%, rgba(255,255,255,.9) 22%, transparent 35%),
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--journey-accent) 13%, transparent), transparent 30%);
  pointer-events: none;
}
.journey-slab::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -30%;
  bottom: -34%;
  width: 92%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, color-mix(in srgb, var(--journey-accent) 22%, transparent) 0 1px, transparent 1px 34px);
  opacity: .46;
  transform: rotateX(66deg);
  pointer-events: none;
}
.journey-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 23px;
  border-bottom: 1px solid rgba(7,19,33,.13);
  transform: translateZ(36px);
}
.journey-card-head > div { display: flex; flex-direction: column; gap: 8px; }
.journey-card-head span {
  color: var(--journey-accent);
  text-transform: uppercase;
  letter-spacing: .19em;
  font-size: 8px;
  font-weight: 850;
}
.journey-card-head strong {
  max-width: 280px;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: #26303d;
  font-size: 9px;
  line-height: 1.45;
}
.journey-card-head > small {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--journey-accent) 48%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--journey-accent) 9%, transparent);
  color: var(--journey-accent);
  font-size: 9px;
  font-weight: 850;
  box-shadow: 0 0 25px color-mix(in srgb, var(--journey-accent) 14%, transparent);
}
.journey-period {
  margin: 28px 0 24px;
  color: #0a1422;
  font-size: clamp(27px, 2.25vw, 38px);
  font-weight: 820;
  letter-spacing: -.045em;
  text-shadow: 0 9px 22px color-mix(in srgb, var(--journey-accent) 20%, transparent);
  transform: translateZ(48px);
}
.journey-milestones { position: relative; transform-style: preserve-3d; }
.journey-rail {
  position: absolute;
  z-index: 0;
  left: 98px;
  top: 15px;
  bottom: 28px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, var(--journey-accent) 16%, #fff 48%, var(--journey-accent) 78%, transparent);
  box-shadow:
    0 0 8px color-mix(in srgb, var(--journey-accent) 82%, transparent),
    0 0 26px color-mix(in srgb, var(--journey-accent) 38%, transparent),
    7px 0 16px rgba(7,19,33,.13);
  transform: translateZ(16px);
}
.journey-milestone {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 68px 32px minmax(0,1fr);
  column-gap: 14px;
  min-height: 225px;
  transform-style: preserve-3d;
}
.journey-milestone time {
  padding-top: 7px;
  color: #0a111c;
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -.035em;
  text-align: right;
  transform: translateZ(32px);
}
.journey-node {
  position: relative;
  width: 18px;
  height: 18px;
  margin: 6px auto 0;
  border: 4px solid white;
  border-radius: 50%;
  background: var(--journey-accent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--journey-accent) 62%, transparent),
    0 0 12px #fff,
    0 0 24px var(--journey-accent),
    0 0 48px color-mix(in srgb, var(--journey-accent) 72%, transparent);
  transform: translateZ(58px);
}
.journey-node i:first-child {
  position: absolute;
  inset: -10px;
  border: 1px solid color-mix(in srgb, var(--journey-accent) 35%, transparent);
  border-radius: 50%;
  animation: journeyPulse 2.8s ease-out infinite;
}
.journey-node i:last-child {
  position: absolute;
  left: 24px;
  top: 6px;
  width: 38px;
  height: 1px;
  background: linear-gradient(90deg, var(--journey-accent), transparent);
  opacity: .58;
}
.journey-event-copy {
  padding: 4px 0 24px 8px;
  border-bottom: 1px solid rgba(7,19,33,.12);
  transform: translateZ(42px);
}
.journey-milestone:last-child .journey-event-copy { border-bottom: 0; }
.journey-event-copy small {
  display: block;
  margin-bottom: 11px;
  color: #7d8794;
  text-transform: uppercase;
  letter-spacing: .17em;
  font-size: 7px;
  font-weight: 850;
}
.journey-event-copy h3 {
  max-width: 270px;
  margin: 0 0 12px;
  color: #0a111c;
  font-size: clamp(21px, 1.65vw, 29px);
  line-height: 1.03;
  letter-spacing: -.042em;
  font-weight: 690;
}
.journey-event-copy p {
  max-width: 280px;
  margin: 0;
  color: #64707e;
  font-size: 11px;
  line-height: 1.58;
}
.journey-floor {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 118px;
  height: 78px;
  transform-style: preserve-3d;
  transform: rotateX(66deg) rotateZ(-19deg) translateZ(8px);
  opacity: .8;
}
.journey-floor span {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--journey-accent) 38%, transparent);
  border-radius: 17px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--journey-accent) 10%, transparent), transparent);
}
.journey-floor span:nth-child(2) { transform: translateZ(14px) translate(-9px,-9px); border-color: rgba(7,19,33,.18); }
.journey-floor span:nth-child(3) { transform: translateZ(28px) translate(-18px,-18px); border-color: color-mix(in srgb, var(--journey-accent) 55%, transparent); }
.history-progress::before { background: rgba(7,19,33,.2); }
.history-progress i { border-color: #e3e4e4; }
.history-hint { color: #596471; }

@keyframes journeyPulse {
  0% { transform: scale(.48); opacity: 0; }
  28% { opacity: .75; }
  100% { transform: scale(1.45); opacity: 0; }
}

@media (max-width: 1180px) {
  .history-card,
  .history-card:nth-child(1):not(.is-active),
  .history-card:nth-child(2):not(.is-active),
  .history-card:nth-child(3):not(.is-active) {
    flex: 0 0 min(620px, 70vw);
    min-height: 690px;
    padding: 0;
    transform: none;
  }
  .history-card:hover,
  .history-card.is-active { transform: translateY(-9px) translateZ(38px); }
}

@media (max-width: 800px) {
  .history { padding: 90px 0 95px; }
  .history-toolbar { margin: 48px 0 25px; padding: 18px 23px; }
  .history-track { padding-top: 24px; padding-bottom: 54px; }
  .history-card,
  .history-card:nth-child(1):not(.is-active),
  .history-card:nth-child(2):not(.is-active),
  .history-card:nth-child(3):not(.is-active) {
    flex: 0 0 88vw;
    min-height: 625px;
    padding: 0;
  }
  .journey-slab { min-height: 625px; padding: 24px 21px 34px; border-radius: 22px; }
  .journey-card-head { padding-bottom: 20px; }
  .journey-card-head strong { max-width: 210px; }
  .journey-period { margin: 24px 0 22px; font-size: 27px; }
  .journey-milestone { grid-template-columns: 58px 28px minmax(0,1fr); column-gap: 11px; min-height: 202px; }
  .journey-rail { left: 82px; bottom: 20px; }
  .journey-milestone time { font-size: 15px; }
  .journey-node { width: 16px; height: 16px; border-width: 3px; }
  .journey-node i:last-child { left: 21px; width: 26px; }
  .journey-event-copy { padding-left: 5px; }
  .journey-event-copy h3 { font-size: clamp(23px, 7vw, 29px); }
  .journey-event-copy p { font-size: 11px; }
  .journey-floor { right: 17px; bottom: 18px; transform: rotateX(66deg) rotateZ(-19deg) translateZ(8px) scale(.8); transform-origin: right bottom; }
}

@media (prefers-reduced-motion: reduce) {
  .history-card,
  .history-card:nth-child(1):not(.is-active),
  .history-card:nth-child(2):not(.is-active),
  .history-card:nth-child(3):not(.is-active),
  .history-card:hover,
  .history-card.is-active { transform: none; }
  .journey-node i:first-child { animation: none; }
}

/* Dynamic vision and mission */
.purpose-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 140px 8.2vw 118px;
  color: #fff;
  background:
    radial-gradient(circle at 7% 12%, rgba(255, 36, 56, .12), transparent 28%),
    radial-gradient(circle at 91% 82%, rgba(63, 139, 255, .17), transparent 35%),
    linear-gradient(135deg, #06101d 0%, #0a1829 49%, #07111f 100%);
}

.purpose-section::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .34;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 80%, transparent);
}

.purpose-backdrop,
.purpose-glow,
.purpose-scan {
  position: absolute;
  pointer-events: none;
}

.purpose-backdrop {
  z-index: -1;
  inset: 0;
  overflow: hidden;
}

.purpose-glow {
  width: min(52vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .23;
  will-change: transform;
}

.purpose-glow-one {
  top: -38%;
  left: -22%;
  background: #ff2239;
  animation: purposeGlowDrift 11s ease-in-out infinite alternate;
}

.purpose-glow-two {
  right: -24%;
  bottom: -42%;
  background: #237cff;
  animation: purposeGlowDrift 14s ease-in-out -5s infinite alternate-reverse;
}

.purpose-scan {
  top: -40%;
  left: -35%;
  width: 18%;
  height: 190%;
  opacity: .46;
  transform: rotate(19deg);
  background: linear-gradient(90deg, transparent, rgba(154, 203, 255, .1), rgba(255, 255, 255, .22), transparent);
  filter: blur(3px);
  animation: purposeScan 9s linear infinite;
}

.purpose-heading {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 5vw;
  align-items: start;
  margin-bottom: 72px;
}

.purpose-heading h2 {
  max-width: 1050px;
  margin: 0;
  font-size: clamp(45px, 5.15vw, 80px);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.052em;
}

.purpose-heading h2 em {
  color: #8fa2b8;
  font-style: normal;
}

.purpose-stage {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  perspective: 1600px;
}

.purpose-card {
  --purpose-accent: #ff2239;
  position: relative;
  display: flex;
  min-height: 560px;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  padding: 34px 36px 36px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 28px;
  opacity: 0;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .08), transparent 34%),
    linear-gradient(153deg, rgba(15, 31, 51, .96), rgba(5, 14, 26, .9));
  box-shadow:
    0 36px 80px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -1px 0 color-mix(in srgb, var(--purpose-accent) 20%, transparent);
  transform: translateY(58px) rotateX(8deg) translateZ(-50px);
  transform-style: preserve-3d;
  transition:
    opacity 800ms cubic-bezier(.2, .7, .2, 1) var(--purpose-delay, 0ms),
    transform 900ms cubic-bezier(.18, .82, .22, 1) var(--purpose-delay, 0ms),
    border-color 300ms ease,
    box-shadow 300ms ease;
  will-change: transform, opacity;
}

.purpose-card::before,
.purpose-card::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.purpose-card::before {
  inset: 0;
  opacity: .6;
  background:
    radial-gradient(circle at 79% 17%, color-mix(in srgb, var(--purpose-accent) 20%, transparent), transparent 26%),
    linear-gradient(112deg, transparent 15%, rgba(255, 255, 255, .07) 42%, transparent 66%);
  transform: translateX(-32%);
  transition: transform 900ms cubic-bezier(.2, .7, .2, 1);
}

.purpose-card::after {
  right: 36px;
  bottom: 36px;
  left: 36px;
  height: 1px;
  opacity: .65;
  background: linear-gradient(90deg, var(--purpose-accent), rgba(255, 255, 255, .18), transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--purpose-accent) 38%, transparent);
}

.purpose-mission {
  --purpose-accent: #4b9dff;
}

.purpose-card.is-visible {
  opacity: 1;
  transform: translateY(0) rotateX(0) translateZ(0);
}

.purpose-card.is-visible:hover {
  z-index: 3;
  border-color: color-mix(in srgb, var(--purpose-accent) 55%, rgba(255, 255, 255, .2));
  box-shadow:
    0 48px 100px rgba(0, 0, 0, .42),
    0 0 54px color-mix(in srgb, var(--purpose-accent) 15%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .18);
  transform: translateY(-10px) rotateY(2.5deg) translateZ(32px);
}

.purpose-mission.is-visible:hover {
  transform: translateY(-10px) rotateY(-2.5deg) translateZ(32px);
}

.purpose-card:hover::before {
  transform: translateX(24%);
}

.purpose-card-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  transform: translateZ(28px);
}

.purpose-card-top > span {
  display: inline-grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--purpose-accent) 55%, transparent);
  border-radius: 50%;
  color: var(--purpose-accent);
  font-size: 12px;
  font-weight: 800;
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--purpose-accent) 10%, transparent);
}

.purpose-card-top small {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  color: #a8b5c4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.purpose-card-copy {
  position: relative;
  z-index: 2;
  max-width: 93%;
  margin-top: auto;
  padding: 175px 0 52px;
  transform: translateZ(45px);
}

.purpose-label {
  margin: 0 0 16px;
  color: var(--purpose-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .23em;
  text-transform: uppercase;
}

.purpose-card-copy h3 {
  margin: 0;
  color: #f7f9fc;
  font-size: clamp(35px, 3.35vw, 54px);
  font-weight: 350;
  line-height: 1.03;
  letter-spacing: -.045em;
}

.purpose-orbit {
  position: absolute;
  z-index: 1;
  top: 88px;
  right: 32px;
  width: 190px;
  aspect-ratio: 1;
  transform: rotateX(66deg) rotateZ(-18deg) translateZ(20px);
  transform-style: preserve-3d;
}

.purpose-orbit i {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--purpose-accent) 60%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 18px color-mix(in srgb, var(--purpose-accent) 14%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--purpose-accent) 8%, transparent);
}

.purpose-orbit i:nth-child(1) {
  inset: 0;
  animation: purposeOrbit 8s linear infinite;
}

.purpose-orbit i:nth-child(2) {
  inset: 21%;
  opacity: .75;
  transform: translateZ(16px);
  animation: purposeOrbit 5.5s linear infinite reverse;
}

.purpose-orbit i:nth-child(3) {
  inset: 38%;
  opacity: .52;
  transform: translateZ(30px);
  animation: purposeOrbitPulse 3s ease-in-out infinite;
}

.purpose-orbit b {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 12px #fff,
    0 0 30px var(--purpose-accent),
    0 0 62px var(--purpose-accent);
  transform: translate(-50%, -50%) translateZ(48px);
  animation: purposeCore 2.2s ease-in-out infinite;
}

.purpose-flow {
  position: absolute;
  z-index: 2;
  right: 36px;
  bottom: 29px;
  left: 36px;
  display: flex;
  gap: 10px;
  height: 14px;
  overflow: hidden;
  align-items: center;
  transform: translateZ(20px);
}

.purpose-flow span {
  position: relative;
  display: block;
  height: 2px;
  flex: 1;
  overflow: hidden;
  background: rgba(255, 255, 255, .1);
}

.purpose-flow span::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent, var(--purpose-accent), #fff, transparent);
  transform: translateX(-100%);
  animation: purposeFlow 3.8s ease-in-out infinite;
}

.purpose-flow span:nth-child(2)::after { animation-delay: .55s; }
.purpose-flow span:nth-child(3)::after { animation-delay: 1.1s; }

.purpose-marquee {
  position: relative;
  z-index: 2;
  width: calc(100% + 16.4vw);
  margin: 82px -8.2vw -18px;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .24);
}

.purpose-marquee div {
  width: max-content;
  padding: 18px 0;
  font-size: clamp(18px, 2vw, 29px);
  font-weight: 700;
  letter-spacing: .12em;
  white-space: nowrap;
  animation: purposeMarquee 24s linear infinite;
}

.purpose-marquee span {
  display: inline-block;
  padding: 0 22px;
  color: #ff243b;
}

@keyframes purposeGlowDrift {
  0% { transform: translate3d(-3%, -2%, 0) scale(.92); }
  100% { transform: translate3d(18%, 13%, 0) scale(1.12); }
}

@keyframes purposeScan {
  0% { transform: translateX(-30vw) rotate(19deg); }
  100% { transform: translateX(175vw) rotate(19deg); }
}

@keyframes purposeOrbit {
  0% { transform: rotate(0deg); border-style: solid; }
  50% { border-color: rgba(255, 255, 255, .38); }
  100% { transform: rotate(360deg); border-style: dashed; }
}

@keyframes purposeOrbitPulse {
  0%, 100% { opacity: .36; transform: translateZ(30px) scale(.78); }
  50% { opacity: .9; transform: translateZ(30px) scale(1.2); }
}

@keyframes purposeCore {
  0%, 100% { transform: translate(-50%, -50%) translateZ(48px) scale(.8); }
  50% { transform: translate(-50%, -50%) translateZ(48px) scale(1.25); }
}

@keyframes purposeFlow {
  0%, 18% { transform: translateX(-110%); }
  72%, 100% { transform: translateX(110%); }
}

@keyframes purposeMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 960px) {
  .purpose-heading { grid-template-columns: 1fr 2.2fr; }
  .purpose-stage { grid-template-columns: 1fr; }
  .purpose-card { min-height: 510px; }
  .purpose-card-copy { max-width: 80%; }
}

@media (max-width: 800px) {
  .purpose-section { padding: 92px 23px 86px; }
  .purpose-heading { grid-template-columns: 1fr; gap: 34px; margin-bottom: 48px; }
  .purpose-heading h2 { font-size: clamp(40px, 12.6vw, 59px); }
  .purpose-stage { gap: 18px; }
  .purpose-card { min-height: 490px; padding: 24px 22px 28px; border-radius: 22px; }
  .purpose-card-copy { max-width: 100%; padding: 155px 0 47px; }
  .purpose-card-copy h3 { font-size: clamp(31px, 9.5vw, 43px); }
  .purpose-orbit { top: 83px; right: 17px; width: 148px; }
  .purpose-card::after { right: 22px; bottom: 29px; left: 22px; }
  .purpose-flow { right: 22px; bottom: 22px; left: 22px; }
  .purpose-marquee { width: calc(100% + 46px); margin: 58px -23px -8px; }
  .purpose-card.is-visible:hover,
  .purpose-mission.is-visible:hover { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  .purpose-glow,
  .purpose-scan,
  .purpose-orbit i,
  .purpose-orbit b,
  .purpose-flow span::after,
  .purpose-marquee div { animation: none; }
  .purpose-card,
  .purpose-card.is-visible,
  .purpose-card.is-visible:hover,
  .purpose-mission.is-visible:hover {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Responsive story scale with immediate swipe feedback */
.history {
  padding: 82px 0 72px;
}

.history-heading {
  grid-template-columns: minmax(170px, .62fr) minmax(0, 2.38fr);
  gap: 3.4vw;
}

.history-heading h2 {
  max-width: 1020px;
  font-size: clamp(45px, 4.45vw, 69px);
  line-height: 1.02;
}

.history-spotlight-wrap {
  margin: 37px 8.2vw 18px;
}

.history-spotlight {
  min-height: 275px;
  padding: 24px 30px 27px;
  border-radius: 26px;
  box-shadow:
    0 30px 66px rgba(7, 19, 33, .25),
    0 2px 0 rgba(255, 255, 255, .11) inset,
    -11px 13px 0 rgba(7, 19, 33, .075),
    0 0 48px color-mix(in srgb, var(--road-accent) 11%, transparent);
}

.history-spotlight-meta {
  padding-bottom: 17px;
}

.history-spotlight-meta span,
.history-spotlight-meta small {
  font-size: 11px;
}

.history-spotlight-grid {
  grid-template-columns: minmax(125px, .46fr) minmax(360px, 1.54fr) 120px;
  gap: 30px;
  min-height: 202px;
}

.history-spotlight-grid > time {
  font-size: clamp(62px, 6.3vw, 98px);
}

.history-spotlight-copy {
  padding: 21px 0 14px;
}

.history-spotlight-copy h3 {
  margin-bottom: 11px;
  font-size: clamp(33px, 3vw, 48px);
}

.history-spotlight-copy > p {
  margin-bottom: 15px;
  font-size: 14px;
  line-height: 1.55;
}

.history-spotlight-copy ul { gap: 8px; }

.history-spotlight-copy li {
  padding: 8px 12px 8px 24px;
  font-size: 10px;
}

.history-3d-mark {
  width: 120px;
  height: 120px;
}

.history-road-route,
.history-stop {
  height: 345px;
}

.history-road-route {
  padding-inline: max(23px, calc(50vw - 77.5px));
}

.history-road-route::after {
  top: 165px;
  height: 88px;
}

.history-road-surface {
  top: 127px;
  height: 82px;
  animation: historyRoadDrift 20s linear infinite;
}

.road-footsteps {
  inset: 12px 30px;
}

.road-footsteps i {
  --step-angle: 77deg;
  --step-offset: -8px;
  width: 10px;
  height: 18px;
  animation: historyFootstepPulse 2.8s ease-in-out infinite;
}

.road-footsteps i:nth-child(even) {
  --step-angle: 103deg;
  --step-offset: 8px;
}

.road-footsteps i:nth-child(3n + 2) { animation-delay: -.9s; }
.road-footsteps i:nth-child(3n) { animation-delay: -1.8s; }

.history-stop {
  width: 155px;
  flex-basis: 155px;
}

.history-stop-label {
  left: 8px;
  width: 139px;
  padding: 8px 9px;
}

.history-stop.is-upper .history-stop-label { top: 7px; }
.history-stop.is-lower .history-stop-label { top: 245px; }
.history-stop-label time { font-size: 25px; }
.history-stop-label small { font-size: 11px; line-height: 1.35; }

.history-stop.is-upper .history-stop-stem {
  top: 72px;
  height: 68px;
}

.history-stop.is-lower .history-stop-stem {
  top: 190px;
  height: 53px;
}

.history-stop-node {
  top: 132px;
  width: 58px;
  height: 58px;
  border-radius: 19px;
}

.history-stop.is-active .history-stop-node {
  transform: translateX(-50%) translateZ(72px) rotateX(-8deg) rotate(2deg) scale(1.22);
  animation: historyNodeLand .58s cubic-bezier(.2, .88, .28, 1) both;
}

.history-stop.is-active .history-stop-label time { font-size: 29px; }

.history-progress {
  width: min(760px, 76vw);
  margin-top: 10px;
}

.history-hint {
  margin-top: 12px;
  font-size: 11px;
  line-height: 1.45;
}

@keyframes historyFootstepPulse {
  0%, 100% { opacity: .28; filter: saturate(.82); transform: rotate(var(--step-angle)) translateY(var(--step-offset)) scale(.88); }
  50% { opacity: .92; filter: saturate(1.3); transform: rotate(var(--step-angle)) translateY(var(--step-offset)) scale(1.12); }
}

@keyframes historyNodeLand {
  0% { opacity: .72; transform: translateX(-50%) translateZ(46px) rotateX(-8deg) rotate(-3deg) scale(.86); }
  68% { opacity: 1; transform: translateX(-50%) translateZ(78px) rotateX(-8deg) rotate(3deg) scale(1.28); }
  100% { opacity: 1; transform: translateX(-50%) translateZ(72px) rotateX(-8deg) rotate(2deg) scale(1.22); }
}

@keyframes historyRoadDrift {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 44px 0, 0 0, 0 0; }
}

/* Readable supporting type across the site */
.hero-service-rail { font-size: 11px; }
.hero-footer span { font-size: 12px; }
.section-kicker { font-size: 13px; }
.overline { font-size: 13px; }

.statement-focus span { font-size: 11px; }
.statement-columns p { font-size: 15px; }
.proof-number { font-size: 11px; }
.proof-band p { font-size: 13px; }

.service-top span { font-size: 12px; }
.service-top small { font-size: 11px; }
.service-points li { font-size: 12px; }
.industries-band small { font-size: 11px; }
.industry-tags span { font-size: 12px; }

.purpose-card-top small { font-size: 12px; }
.purpose-label { font-size: 12px; }
.culture-caption span { font-size: 11px; }
.culture-list span { font-size: 12px; }

.job-index { font-size: 12px; }
.job-main small,
.job-meta small { font-size: 13px; }

.application-note span { font-size: 10px; }
.application-note p { font-size: 13px; }
.application-form label > span:first-child { font-size: 12px; }
.application-form label small { font-size: 10px; }
.consent-field { font-size: 12px; }

.contact-list small { font-size: 11px; }
.contact-list a:not(.contact-phone) { font-size: 13px; }
.contact-list p { font-size: 13px; }
.map-label { font-size: 11px; }

.footer-social-row small,
.footer-grid small { font-size: 10px; }
.footer-social-row p,
.social-links span,
.footer-grid a,
.footer-grid p { font-size: 12px; }
.footer-bottom { font-size: 10px; }

.modal-meta span { font-size: 11px; }
.modal-footnote { font-size: 12px; }

.social-links a {
  grid-template-columns: 30px 1fr;
}

.submit-button {
  justify-content: center;
  padding-inline: 22px;
}

@media (prefers-reduced-motion: reduce) {
  .history-road-surface,
  .road-footsteps i,
  .history-stop.is-active .history-stop-node {
    animation: none;
  }
}

@media (max-width: 1050px) {
  .history-spotlight-grid {
    grid-template-columns: minmax(115px, .45fr) minmax(310px, 1.55fr);
  }

  .history-3d-mark { display: none; }
}

@media (max-width: 800px) {
  .history { padding: 64px 0 58px; }
  .history-heading h2 { font-size: 45px; }
  .history-spotlight-wrap { margin: 31px 23px 15px; }

  .history-spotlight {
    min-height: 0;
    padding: 22px 21px 25px;
  }

  .history-spotlight-grid {
    display: block;
    min-height: 0;
    padding-top: 18px;
  }

  .history-spotlight-grid > time {
    margin-bottom: 17px;
    font-size: 72px;
  }

  .history-spotlight-copy { padding: 0; }
  .history-spotlight-copy h3 { font-size: 34px; }
  .history-spotlight-copy > p { font-size: 14px; }
  .history-spotlight-copy li { font-size: 10px; }

  .history-road-route,
  .history-stop { height: 322px; }

  .history-road-route {
    padding-inline: max(23px, calc(50vw - 66px));
  }

  .history-road-route::after { top: 152px; }
  .history-road-surface { top: 116px; height: 76px; }
  .history-stop { width: 132px; flex-basis: 132px; }
  .history-stop-label { left: 5px; width: 122px; }
  .history-stop.is-upper .history-stop-label { top: 2px; }
  .history-stop.is-lower .history-stop-label { top: 225px; }
  .history-stop-label time { font-size: 23px; }
  .history-stop-label small { font-size: 10px; }
  .history-stop.is-upper .history-stop-stem { top: 67px; height: 58px; }
  .history-stop.is-lower .history-stop-stem { top: 179px; height: 44px; }
  .history-stop-node { top: 119px; width: 54px; height: 54px; }
  .history-stop.is-active .history-stop-node {
    transform: translateX(-50%) translateZ(60px) rotateX(-8deg) rotate(2deg) scale(1.16);
  }

  .history-progress { width: 80vw; }

  .footer-social-row p,
  .footer-grid a,
  .footer-grid p { font-size: 12px; }
}

/* Interactive 3D history road */
.history {
  padding: 136px 0 126px;
  background:
    radial-gradient(circle at 78% 34%, rgba(46, 130, 255, .2), transparent 29%),
    radial-gradient(circle at 16% 76%, rgba(237, 27, 47, .13), transparent 27%),
    radial-gradient(circle at 53% 64%, rgba(54, 199, 255, .12), transparent 32%),
    linear-gradient(180deg, #f7f9fc 0%, #dbe6f1 63%, #eee9e6 100%);
}

.history::after {
  left: 5%;
  right: 5%;
  bottom: 54px;
  height: 210px;
  opacity: .82;
}

.history-spotlight-wrap {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  margin: 72px 8.2vw 30px;
  perspective: 1800px;
}

.history-spotlight {
  --road-accent: #ffbf24;
  position: relative;
  min-height: 355px;
  padding: 28px 32px 31px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 28px;
  color: white;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .08), transparent 31%),
    linear-gradient(145deg, #11243b 0%, #071321 61%, #040b14 100%);
  box-shadow:
    0 42px 86px rgba(7, 19, 33, .3),
    0 3px 0 rgba(255, 255, 255, .11) inset,
    -15px 18px 0 rgba(7, 19, 33, .11),
    0 0 54px color-mix(in srgb, var(--road-accent) 12%, transparent);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  animation: historySpotlightArrive .68s cubic-bezier(.18,.82,.22,1) both;
}

.history-spotlight::before,
.history-spotlight::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.history-spotlight::before {
  inset: 0;
  opacity: .78;
  background:
    radial-gradient(circle at 82% 24%, color-mix(in srgb, var(--road-accent) 31%, transparent), transparent 29%),
    linear-gradient(115deg, transparent 22%, rgba(255,255,255,.09) 45%, transparent 62%),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: auto, 220% 100%, 48px 48px, 48px 48px;
  animation: historyPanelLight 6.5s ease-in-out infinite alternate;
}

.history-spotlight::after {
  right: -7%;
  bottom: -48%;
  width: 54%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--road-accent) 22%, transparent);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, color-mix(in srgb, var(--road-accent) 24%, transparent) 0 1px, transparent 1px 32px);
  opacity: .48;
  transform: rotateX(65deg);
  animation: historyOrbitDrift 15s linear infinite;
}

.history-ambient-lights { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.history-ambient-lights span { position: absolute; width: 34vw; aspect-ratio: 1; border-radius: 50%; opacity: .24; filter: blur(54px); animation: historyAmbient 11s ease-in-out infinite alternate; }
.history-ambient-lights span:nth-child(1) { top: 20%; right: -8%; background: #4da2ff; }
.history-ambient-lights span:nth-child(2) { bottom: 2%; left: -9%; background: #ff4558; animation-delay: -4s; }
.history-ambient-lights span:nth-child(3) { top: 48%; left: 38%; width: 25vw; background: #5be6ff; opacity: .15; animation-delay: -7s; }

.history-light-rig { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.history-light-rig i { position: absolute; top: -56%; width: 13%; height: 230%; opacity: .2; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--road-accent) 34%, white), rgba(255,255,255,.25), transparent); filter: blur(8px); transform: rotate(19deg); animation: historyLightBeam 5.8s ease-in-out infinite alternate; }
.history-light-rig i:nth-child(1) { right: 38%; }
.history-light-rig i:nth-child(2) { right: 17%; width: 8%; opacity: .12; animation-delay: -2.3s; animation-duration: 8s; }
.history-light-rig i:nth-child(3) { left: 9%; width: 7%; opacity: .1; animation-delay: -4.6s; animation-duration: 9.5s; }

.tone-red { --road-accent: #ff2940; }
.tone-blue { --road-accent: #3a94ff; }
.tone-green { --road-accent: #2ed59b; }
.tone-amber { --road-accent: #ffc229; }

.history-spotlight-meta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  transform: translateZ(38px);
}

.history-spotlight-meta span,
.history-spotlight-meta small {
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.history-spotlight-meta span { color: var(--road-accent); }
.history-spotlight-meta small { color: #98a5b5; }

.history-spotlight-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(145px, .55fr) minmax(300px, 1.45fr) minmax(130px, .45fr);
  gap: 34px;
  align-items: center;
  min-height: 258px;
  transform-style: preserve-3d;
}

.history-spotlight-grid > time {
  color: #fff;
  font-size: clamp(62px, 7vw, 112px);
  font-weight: 760;
  line-height: .86;
  letter-spacing: -.075em;
  text-shadow:
    0 10px 30px color-mix(in srgb, var(--road-accent) 34%, transparent),
    0 0 45px color-mix(in srgb, var(--road-accent) 20%, transparent);
  transform: translateZ(72px);
}

.history-spotlight-copy {
  padding: 29px 0 22px;
  transform: translateZ(52px);
}

.history-spotlight-copy h3 {
  max-width: 620px;
  margin: 0 0 13px;
  color: #fff;
  font-size: clamp(30px, 3vw, 49px);
  font-weight: 520;
  line-height: 1;
  letter-spacing: -.045em;
}

.history-spotlight-copy > p {
  max-width: 610px;
  margin: 0 0 19px;
  color: #aeb9c7;
  font-size: 13px;
  line-height: 1.58;
}

.history-spotlight-copy ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.history-spotlight-copy li {
  position: relative;
  padding: 8px 12px 8px 24px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  color: #d5dce6;
  background: rgba(255, 255, 255, .035);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
}

.history-spotlight-copy li::before {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  content: "";
  background: var(--road-accent);
  box-shadow: 0 0 12px var(--road-accent);
  transform: translateY(-50%);
}

.history-3d-mark {
  position: relative;
  width: 148px;
  height: 148px;
  justify-self: end;
  transform: rotateX(63deg) rotateZ(-20deg) translateZ(34px);
  transform-style: preserve-3d;
  animation: historyMarkFloat 6.5s ease-in-out infinite alternate;
}

.history-3d-mark span {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--road-accent) 54%, transparent);
  border-radius: 29px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--road-accent) 13%, transparent), transparent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--road-accent) 11%, transparent) inset;
}

.history-3d-mark span:nth-child(2) { transform: translate3d(-13px, -13px, 21px); }
.history-3d-mark span:nth-child(3) { transform: translate3d(-26px, -26px, 42px); }
.history-3d-mark i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  opacity: .68;
  background: var(--road-accent);
  box-shadow: 0 0 15px color-mix(in srgb, var(--road-accent) 72%, transparent);
  transform: translate(-50%, -50%) translateZ(65px);
}

.history-spotlight-wrap .history-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0;
}

.history-spotlight-wrap .history-controls button {
  width: 48px;
  height: 48px;
  border-color: rgba(7, 19, 33, .2);
  color: var(--ink);
  background: rgba(255, 255, 255, .48);
}

.history-spotlight-wrap .history-controls button:hover:not(:disabled) {
  border-color: var(--ink);
  background: var(--ink);
  color: white;
}

.history-spotlight-wrap .history-controls > span {
  min-width: 48px;
  color: #68727d;
}

.history-road-viewport {
  position: relative;
  z-index: 3;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
  cursor: grab;
  perspective: 1400px;
  perspective-origin: 50% 54%;
  background: radial-gradient(ellipse at 50% 53%, rgba(49,139,255,.14), transparent 47%);
}

.history-road-viewport::-webkit-scrollbar { display: none; }
.history-road-viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.history-road-viewport:focus-visible { outline: 2px solid var(--red); outline-offset: -5px; }

.history-road-route {
  position: relative;
  display: flex;
  width: max-content;
  min-width: 100%;
  height: 430px;
  padding: 0 max(23px, calc(50vw - 77.5px));
  transform-style: preserve-3d;
}

.history-road-route::after {
  position: absolute;
  z-index: -3;
  top: 213px;
  right: 4vw;
  left: 4vw;
  height: 105px;
  border-radius: 50%;
  content: "";
  background: rgba(7, 19, 33, .34);
  filter: blur(31px);
  transform: rotateX(67deg) translateZ(-60px);
}

.history-road-surface {
  position: absolute;
  z-index: -1;
  top: 170px;
  right: 0;
  left: 0;
  height: 104px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .075), transparent 30%, rgba(0, 0, 0, .16)),
    repeating-linear-gradient(103deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 12px),
    #101a26;
  box-shadow:
    0 25px 42px rgba(7, 19, 33, .45),
    0 0 35px rgba(46,130,255,.12),
    0 2px 0 rgba(255, 255, 255, .14) inset,
    0 -2px 0 rgba(0, 0, 0, .35) inset;
  transform: rotateX(60deg) translateZ(-31px);
  transform-origin: center;
  transform-style: preserve-3d;
}

.history-road-surface::before { position: absolute; z-index: 0; inset: 0; content: ""; background: linear-gradient(105deg, transparent 30%, rgba(85,171,255,.18) 47%, rgba(255,255,255,.34) 50%, rgba(237,27,47,.14) 54%, transparent 70%); transform: translateX(-115%); animation: roadSpecular 7.5s ease-in-out infinite; }
.history-road-surface::after { position: absolute; right: 0; bottom: -14px; left: 0; height: 16px; content: ""; background: linear-gradient(180deg, #071321, #02060b); border-bottom: 1px solid rgba(46,130,255,.42); box-shadow: 0 12px 22px rgba(7,19,33,.42), 0 0 15px rgba(46,130,255,.16); transform: rotateX(-76deg); transform-origin: top; }

.road-edge,
.road-lane {
  position: absolute;
  right: 0;
  left: 0;
  height: 3px;
}

.road-edge { z-index: 2; background: linear-gradient(90deg, #ed1b2f, #fff, #2e82ff, #65dfff, #fff, #ed1b2f); background-size: 220% 100%; animation: roadEnergy 7s linear infinite; }
.road-edge-top { top: 4px; box-shadow: 0 0 13px #ed1b2f; }
.road-edge-bottom { bottom: 4px; box-shadow: 0 0 13px #2e82ff; }
.road-lane {
  z-index: 2;
  top: 50%;
  height: 4px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .76) 0 42px, transparent 42px 88px);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .35));
  transform: translateY(-50%);
  animation: roadLaneFlow 2.8s linear infinite;
}

.road-light-runner { position: absolute; z-index: 3; top: 26%; left: -10%; width: 120px; height: 2px; border-radius: 999px; opacity: 0; background: linear-gradient(90deg, transparent, #fff, #5bc5ff, transparent); box-shadow: 0 0 10px #fff, 0 0 20px #3c98ff; transform: rotate(-2deg); animation: roadRunner 5.2s ease-in-out infinite; }
.road-light-runner.runner-two { top: 72%; width: 90px; background: linear-gradient(90deg, transparent, #fff, #ff3045, transparent); box-shadow: 0 0 10px #fff, 0 0 20px #ed1b2f; animation-delay: -2.7s; animation-duration: 6.4s; }

.history-stop {
  --road-accent: #ffc229;
  position: relative;
  display: block;
  width: 155px;
  height: 430px;
  flex: 0 0 155px;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transform-style: preserve-3d;
}

.history-stop-label {
  position: absolute;
  left: 8px;
  display: flex;
  width: 139px;
  flex-direction: column;
  gap: 7px;
  text-align: left;
  transition: color .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}

.history-stop.is-upper .history-stop-label { top: 25px; }
.history-stop.is-lower .history-stop-label { top: 305px; }

.history-stop-label time {
  color: color-mix(in srgb, var(--road-accent) 88%, #071321);
  font-size: 25px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.045em;
}

.history-stop-label small {
  display: -webkit-box;
  overflow: hidden;
  color: #68727d;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.history-stop-stem {
  position: absolute;
  left: 50%;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--road-accent), #273442);
  box-shadow: 0 0 8px color-mix(in srgb, var(--road-accent) 48%, transparent);
  transform: translateX(-50%) translateZ(16px);
  transition: height .35s ease, box-shadow .35s ease;
}

.history-stop.is-upper .history-stop-stem { top: 108px; height: 87px; }
.history-stop.is-lower .history-stop-stem { top: 245px; height: 58px; transform: translateX(-50%) translateZ(16px) rotate(180deg); }

.history-stop-node {
  position: absolute;
  z-index: 3;
  top: 192px;
  left: 50%;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 50%;
  color: white;
  background: linear-gradient(145deg, color-mix(in srgb, var(--road-accent) 82%, white), var(--road-accent));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--road-accent) 70%, transparent),
    0 9px 19px rgba(7, 19, 33, .3),
    0 0 22px color-mix(in srgb, var(--road-accent) 46%, transparent),
    0 2px 0 rgba(255, 255, 255, .7) inset;
  transform: translateX(-50%) translateZ(32px) rotateX(-12deg);
  transform-style: preserve-3d;
  transition: transform .38s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}

.history-stop-node b {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  transform: translateZ(18px);
}

.history-stop-node i,
.history-stop-node em {
  position: absolute;
  inset: -13px;
  border: 1px solid color-mix(in srgb, var(--road-accent) 50%, transparent);
  border-radius: 50%;
  opacity: 0;
}

.history-stop-node em { inset: -23px; }

.history-stop:hover .history-stop-node,
.history-stop:focus-visible .history-stop-node {
  transform: translateX(-50%) translateZ(58px) rotateX(-12deg) scale(1.15);
}

.history-stop:hover .history-stop-label,
.history-stop:focus-visible .history-stop-label { transform: translateY(-3px); }

.history-stop.is-active { z-index: 6; }
.history-stop.is-active .history-stop-label { transform: translateY(-5px) translateZ(30px); }
.history-stop.is-active .history-stop-label time { color: var(--road-accent); font-size: 31px; text-shadow: 0 7px 20px color-mix(in srgb, var(--road-accent) 34%, transparent); }
.history-stop.is-active .history-stop-label small { color: #27313d; }
.history-stop.is-active .history-stop-stem { width: 3px; box-shadow: 0 0 14px var(--road-accent); }
.history-stop.is-active .history-stop-node {
  box-shadow:
    0 0 0 1px var(--road-accent),
    0 15px 29px rgba(7, 19, 33, .42),
    0 0 18px color-mix(in srgb, var(--road-accent) 70%, transparent),
    0 0 34px color-mix(in srgb, var(--road-accent) 28%, transparent),
    0 3px 0 rgba(255, 255, 255, .8) inset;
  transform: translateX(-50%) translateZ(88px) rotateX(-12deg) scale(1.48);
}

.history-stop.is-active .history-stop-node i {
  opacity: .28;
  animation: historyNodeRing 2.8s ease-out infinite;
}

.history-stop.is-active .history-stop-node em {
  opacity: .1;
  animation: historyNodeRing 2.8s 1.15s ease-out infinite;
}

@keyframes historySpotlightArrive { from { opacity: .42; transform: translateY(24px) rotateX(4deg) scale(.985); } to { opacity: 1; transform: translateY(0) rotateX(0) scale(1); } }
@keyframes historyPanelLight { from { background-position: 0 0, -55% 0, 0 0, 0 0; } to { background-position: 0 0, 75% 0, 48px 0, 0 48px; } }
@keyframes historyOrbitDrift { to { transform: rotateX(65deg) rotateZ(360deg); } }
@keyframes historyAmbient { from { transform: translate3d(-5%,-3%,0) scale(.9); } to { transform: translate3d(7%,5%,0) scale(1.12); } }
@keyframes historyLightBeam { from { opacity: .08; transform: translateX(-20%) rotate(19deg) scaleX(.76); } to { opacity: .31; transform: translateX(24%) rotate(19deg) scaleX(1.18); } }
@keyframes historyMarkFloat { from { transform: rotateX(63deg) rotateZ(-20deg) translate3d(0,0,34px); } to { transform: rotateX(63deg) rotateZ(-15deg) translate3d(-8px,-8px,58px); } }
@keyframes roadSpecular { 0%,15% { transform: translateX(-115%); opacity: 0; } 34% { opacity: 1; } 72%,100% { transform: translateX(115%); opacity: 0; } }
@keyframes roadEnergy { to { background-position: 220% 0; } }
@keyframes roadLaneFlow { to { background-position: 88px 0; } }
@keyframes roadRunner { 0%,12% { left: -10%; opacity: 0; } 28% { opacity: 1; } 76%,100% { left: 102%; opacity: 0; } }
@keyframes historyNodeRing { from { opacity: .38; transform: scale(.72); } to { opacity: 0; transform: scale(1.42); } }

.history-progress {
  width: min(760px, 76vw);
  margin-top: 4px;
}

.history-progress i { width: 8px; height: 8px; }
.history-hint { margin-top: 17px; }

@media (max-width: 1050px) {
  .history-spotlight-grid { grid-template-columns: minmax(130px, .5fr) minmax(280px, 1.5fr); }
  .history-3d-mark { display: none; }
}

@media (max-width: 800px) {
  .history { padding: 92px 0 88px; }
  .history-spotlight-wrap { display: block; margin: 48px 23px 24px; }
  .history-spotlight { min-height: 425px; padding: 23px 21px 27px; border-radius: 23px; }
  .history-spotlight-grid { display: block; min-height: auto; padding-top: 28px; }
  .history-spotlight-grid > time { display: block; margin-bottom: 29px; font-size: clamp(68px, 24vw, 98px); }
  .history-spotlight-copy { padding: 0; }
  .history-spotlight-copy h3 { font-size: clamp(31px, 10vw, 43px); }
  .history-spotlight-copy > p { font-size: 12px; }
  .history-spotlight-copy ul { align-items: flex-start; flex-direction: column; }
  .history-spotlight-wrap .history-controls { flex-direction: row; justify-content: flex-end; padding: 17px 0 0; }
  .history-spotlight-wrap .history-controls > span { display: grid; place-items: center; order: 2; }
  .history-spotlight-wrap .history-controls button:first-child { order: 1; }
  .history-spotlight-wrap .history-controls button:last-child { order: 3; }
  .history-road-route { height: 365px; padding-inline: max(23px, calc(50vw - 64px)); }
  .history-road-route::after { top: 180px; }
  .history-road-surface { top: 141px; height: 95px; }
  .history-stop { width: 128px; height: 365px; flex-basis: 128px; }
  .history-stop-label { left: 5px; width: 118px; }
  .history-stop.is-upper .history-stop-label { top: 7px; }
  .history-stop.is-lower .history-stop-label { top: 259px; }
  .history-stop-label time { font-size: 22px; }
  .history-stop.is-active .history-stop-label time { font-size: 27px; }
  .history-stop.is-upper .history-stop-stem { top: 87px; height: 76px; }
  .history-stop.is-lower .history-stop-stem { top: 214px; height: 43px; }
  .history-stop-node { top: 159px; width: 51px; height: 51px; }
  .history-stop.is-active .history-stop-node { transform: translateX(-50%) translateZ(70px) rotateX(-12deg) scale(1.34); }
  .history-progress { width: 78vw; }
}

@media (prefers-reduced-motion: reduce) {
  .history-spotlight { animation: none; }
  .history-3d-mark i,
  .history-stop-node i,
  .history-stop-node em { animation: none !important; }
  .history-stop.is-active .history-stop-node { transform: translateX(-50%) rotateX(-12deg) scale(1.25); }
}

/* Full-width team portrait with floating content */
.culture {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 1px;
  background:
    radial-gradient(circle at 78% 80%, rgba(46, 130, 255, .13), transparent 27%),
    #071321;
}

.culture-visual {
  position: relative;
  min-height: 0;
  overflow: hidden;
  aspect-ratio: 1672 / 940;
  background: #071321;
}

.culture-image {
  position: absolute;
  inset: 0;
  display: block;
}

.culture-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #071321;
  filter: saturate(1.02) contrast(1.01) brightness(.94);
}

.culture-image::after {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 8, 14, .04) 0%, transparent 70%, rgba(3, 8, 14, .19) 100%);
  pointer-events: none;
}

.culture-caption {
  top: clamp(22px, 3.4vw, 58px);
  bottom: auto;
  left: clamp(22px, 3.4vw, 58px);
  max-width: min(390px, 35vw);
  padding: 19px 22px 21px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 18px;
  background: rgba(7, 19, 33, .36);
  box-shadow: 0 18px 45px rgba(3, 8, 14, .17), inset 0 1px rgba(255, 255, 255, .09);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.culture-caption span {
  margin-bottom: 9px;
  text-shadow: 0 3px 14px rgba(3, 8, 14, .72);
}

.culture-caption strong {
  display: block;
  color: #fff;
  font-size: clamp(27px, 3vw, 48px);
  line-height: .98;
  text-shadow: 0 4px 20px rgba(3, 8, 14, .8);
}

.culture-copy {
  position: relative;
  z-index: 4;
  display: grid;
  width: min(1450px, 84vw);
  margin: -92px auto 105px;
  padding: 43px 49px 46px;
  grid-template-columns: minmax(180px, .42fr) minmax(0, 1.58fr);
  grid-template-rows: auto;
  gap: clamp(32px, 5vw, 80px);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 27px;
  color: white;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .075), transparent 24%),
    rgba(7, 19, 33, .86);
  box-shadow:
    0 38px 90px rgba(0, 0, 0, .36),
    0 3px 0 rgba(255, 255, 255, .1) inset,
    0 0 48px rgba(46, 130, 255, .08);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
}

.culture-copy::before {
  position: absolute;
  top: 0;
  left: 49px;
  width: 92px;
  height: 3px;
  content: "";
  background: var(--red);
  box-shadow: 0 0 18px rgba(237, 27, 47, .55);
}

.culture-copy h2 {
  max-width: 1050px;
  font-size: clamp(40px, 4.3vw, 67px);
}

.culture-copy .body-copy {
  max-width: 940px;
  margin-bottom: 0;
}

.culture-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 31px 0 30px;
  border-top: 1px solid rgba(255, 255, 255, .17);
  border-bottom: 1px solid rgba(255, 255, 255, .17);
}

.culture-list li {
  min-height: 76px;
  padding: 17px 17px;
  border-right: 1px solid rgba(255, 255, 255, .17);
  border-bottom: 0;
  line-height: 1.45;
}

.culture-list li:first-child { padding-left: 0; }
.culture-list li:last-child { padding-right: 0; border-right: 0; }

@media (max-width: 1080px) {
  .culture-copy {
    width: min(90vw, 920px);
    margin-top: -62px;
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .culture-caption { max-width: min(340px, 42vw); }
}

@media (max-width: 800px) {
  .culture-visual { aspect-ratio: 1672 / 940; }
  .culture-caption {
    top: 14px;
    left: 14px;
    max-width: 210px;
    padding: 12px 14px 14px;
    border-radius: 13px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }
  .culture-caption span { margin-bottom: 6px; font-size: 7px; }
  .culture-caption strong { font-size: clamp(19px, 5.8vw, 29px); }
  .culture-copy {
    width: calc(100% - 30px);
    margin: -30px auto 70px;
    padding: 32px 22px 35px;
    gap: 32px;
    border-radius: 21px;
  }
  .culture-copy::before { left: 22px; width: 70px; }
  .culture-copy h2 { font-size: clamp(38px, 11vw, 51px); }
  .culture-list { grid-template-columns: 1fr; }
  .culture-list li,
  .culture-list li:first-child,
  .culture-list li:last-child {
    min-height: 0;
    padding: 15px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .17);
  }
  .culture-list li:last-child { border-bottom: 0; }
}

/* Site-wide density and typography balance */
.eyebrow { margin-bottom: 22px; font-size: 13px; }
.hero-service-rail { font-size: 10px; }
.hero-footer { height: 88px; gap: 48px; }
.hero-footer p { font-size: 14px; }
.hero-footer span { font-size: 11px; }
.scroll-cue { font-size: 11px; }

.section-kicker { font-size: 12px; letter-spacing: .19em; }
.overline { margin-bottom: 18px; font-size: 12px; letter-spacing: .17em; }
.body-copy { font-size: 16px; }

.statement { padding: 112px 8.2vw 104px; }
.statement-columns { margin-top: 48px; padding-top: 28px; }
.proof-band { padding-bottom: 88px; }
.proof-band article { min-height: 122px; padding: 23px 27px; gap: 27px; }
.proof-number { font-size: 12px; }
.proof-band strong { font-size: 18px; }
.proof-band p { font-size: 15px; }

.history { padding: 104px 0 94px; }
.history-spotlight-wrap { margin-top: 50px; }
.history-spotlight { min-height: 330px; }
.history-spotlight-meta span,
.history-spotlight-meta small { font-size: 11px; }
.history-spotlight-grid { min-height: 230px; }
.history-spotlight-grid > time { font-size: clamp(58px, 6.4vw, 100px); }
.history-spotlight-copy { padding: 24px 0 18px; }
.history-spotlight-copy > p { font-size: 15px; }
.history-spotlight-copy li { font-size: 11px; }
.history-road-route { height: 390px; }
.history-road-route::after { top: 193px; }
.history-road-surface { top: 150px; }
.history-stop { height: 390px; }
.history-stop.is-upper .history-stop-label { top: 14px; }
.history-stop.is-lower .history-stop-label { top: 270px; }
.history-stop-label small { font-size: 11px; line-height: 1.4; }
.history-stop.is-upper .history-stop-stem { top: 92px; height: 82px; }
.history-stop.is-lower .history-stop-stem { top: 224px; height: 44px; }
.history-stop-node { top: 171px; }
.history-stop-node b { font-size: 13px; }
.history-hint { font-size: 10px; }

.solutions { padding: 106px 8.2vw 112px; }
.section-heading { margin-bottom: 56px; }
.solutions-lead { margin-top: 24px; font-size: 16px; }
.service-card { min-height: 400px; padding: 29px; }
.service-card-intro { padding-top: 90px; }
.service-top span { font-size: 12px; }
.service-top small { font-size: 10px; }
.service-card p { font-size: 15px; margin-bottom: 22px; }
.service-points li { font-size: 11px; }
.industries-band { padding: 28px 30px; }
.industries-band small { font-size: 10px; }
.industry-tags span { font-size: 12px; }

.purpose-section { padding: 106px 8.2vw 96px; }
.purpose-heading { margin-bottom: 54px; }
.purpose-heading h2 { font-size: clamp(43px, 4.7vw, 72px); }
.purpose-card { min-height: 500px; }
.purpose-card-top small { font-size: 11px; }
.purpose-card-copy { padding-top: 142px; }
.purpose-label { font-size: 13px; }
.purpose-marquee { margin-top: 60px; }

.values { min-height: 0; padding: 96px 5vw 100px; }
.values-heading { margin-bottom: 62px; }
.values-heading h2 { font-size: clamp(50px, 5.3vw, 84px); }
.values-grid { gap: 20px; }
.value-card { min-height: 215px; padding: 30px; }

.culture-copy { margin-bottom: 78px; padding: 38px 44px 40px; }
.culture-copy .body-copy { font-size: 17px; }
.culture-list { margin: 25px 0 25px; }
.culture-list li { min-height: 70px; font-size: 15px; }
.culture-list span { font-size: 11px; }
.text-link { font-size: 15px; }

.careers { padding: 58px 5.5vw 106px; }
.career-banner { min-height: 610px; margin-bottom: 88px; }
.career-banner-content { padding-top: 78px; padding-bottom: 72px; }
.career-banner-content h2 { font-size: clamp(56px, 6vw, 94px); }
.career-banner-button { margin-top: 38px; }
.careers-intro { margin-bottom: 56px; }
.careers-intro > p { font-size: 16px; }
.job-row { min-height: 100px; }
.job-index { font-size: 12px; }
.job-main small,
.job-meta small { font-size: 13px; }

.apply-section { padding: 108px 8.2vw 114px; }
.apply-intro .section-kicker { margin-bottom: 50px; }
.application-note { margin-top: 36px; }
.application-note span { font-size: 11px; }
.application-note p { font-size: 14px; }
.application-form { padding-top: 62px; }
.application-form label { margin-bottom: 24px; }
.application-form label > span:first-child { font-size: 13px; }
.application-form label small { font-size: 11px; }
.application-form input:not([type="checkbox"]):not([type="file"]),
.application-form select,
.application-form textarea { font-size: 16px; }
.file-field > span:nth-child(2) strong { font-size: 15px; }
.consent-field { font-size: 13px; }
.form-message { font-size: 14px; }

.contact-section { min-height: 690px; }
.contact-details { padding: 84px 5.8vw 82px 8.2vw; gap: 50px; }
.contact-list { margin-top: 46px; }
.contact-list small { font-size: 10px; }
.contact-list a:not(.contact-phone) { font-size: 13px; }
.contact-list p { font-size: 13px; }
.map-label { font-size: 10px; }

.footer-social-row small,
.footer-grid small { font-size: 10px; }
.footer-social-row p,
.social-links span { font-size: 13px; }
.footer-grid a,
.footer-grid p { font-size: 14px; }
.footer-bottom { font-size: 11px; }

@media (max-width: 1100px) {
  .statement { padding-block: 92px; }
  .proof-band { padding-bottom: 74px; }
  .solutions { padding-block: 92px; }
  .purpose-section { padding-block: 92px; }
  .values { padding-block: 88px; }
  .culture-copy { margin-bottom: 68px; }
  .apply-section { padding-block: 94px; }
}

@media (max-width: 800px) {
  .eyebrow { font-size: 11px; }
  .hero-footer { height: 78px; }
  .hero-footer p { font-size: 12px; }
  .section-kicker { font-size: 11px; }
  .overline { font-size: 11px; }

  .statement { padding: 72px 23px; }
  .statement-copy { margin-top: 30px; }
  .statement-columns { margin-top: 31px; }
  .proof-band { padding: 0 23px 60px; }

  .history { padding: 74px 0 70px; }
  .history-heading > div:nth-child(2) { margin-top: 30px; }
  .history-spotlight-wrap { margin: 36px 23px 20px; }
  .history-spotlight { min-height: 390px; }
  .history-spotlight-meta span,
  .history-spotlight-meta small { font-size: 10px; }
  .history-spotlight-copy > p { font-size: 14px; }
  .history-spotlight-copy li { font-size: 11px; }
  .history-road-route { height: 350px; }
  .history-road-route::after { top: 172px; }
  .history-road-surface { top: 134px; }
  .history-stop { height: 350px; }
  .history-stop.is-upper .history-stop-label { top: 3px; }
  .history-stop.is-lower .history-stop-label { top: 244px; }
  .history-stop-label small { font-size: 10px; }
  .history-stop.is-upper .history-stop-stem { top: 80px; height: 73px; }
  .history-stop.is-lower .history-stop-stem { top: 204px; height: 38px; }
  .history-stop-node { top: 150px; }

  .solutions { padding: 76px 23px 80px; }
  .section-heading { margin-bottom: 38px; }
  .section-heading > div:nth-child(2) { margin-top: 29px; }
  .service-card { min-height: 390px; }
  .service-card p { font-size: 15px; }
  .service-points li { font-size: 11px; }
  .industries-band small { font-size: 10px; }
  .industry-tags span { font-size: 11px; }

  .purpose-section { padding: 76px 23px 72px; }
  .purpose-heading { margin-bottom: 40px; }
  .purpose-card { min-height: 455px; }
  .purpose-card-copy { padding-top: 136px; }
  .purpose-card-top small { font-size: 10px; }
  .purpose-label { font-size: 12px; }
  .purpose-marquee { margin-top: 46px; }

  .values { padding: 76px 23px 80px; }
  .values-heading { margin-bottom: 38px; }
  .value-card { min-height: 195px; padding: 24px 22px; }

  .culture-copy { margin-bottom: 54px; padding: 29px 22px 31px; }
  .culture-copy .body-copy { font-size: 16px; }
  .culture-list li { font-size: 15px; }

  .careers { padding-bottom: 74px; }
  .career-banner { min-height: 570px; margin-bottom: 66px; }
  .career-banner-content { padding-top: 68px; }
  .career-banner-button { margin-top: 30px; }
  .careers-intro { margin-bottom: 42px; }
  .careers-intro > div:nth-child(2) { margin: 30px 0 24px; }
  .careers-intro > p { font-size: 15px; }
  .job-row { min-height: 94px; }
  .job-index { font-size: 11px; }
  .job-main small { font-size: 12px; }

  .apply-section { padding: 76px 23px 80px; }
  .apply-intro .section-kicker { margin-bottom: 36px; }
  .application-form { padding-top: 18px; }
  .contact-details { padding: 70px 23px; gap: 36px; }
  .contact-list { margin-top: 36px; }
  .map-frame { min-height: 420px; }
  .footer { padding-top: 46px; }
  .footer-grid { padding: 37px 0 43px; }
}

/* Clear history controls, richer jobs presentation and compact footer */
.history-year-picker {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  margin: 0 8.2vw 20px;
  padding: 13px 15px 13px 18px;
  border: 1px solid rgba(7, 19, 33, .13);
  border-radius: 16px;
  background: rgba(255, 255, 255, .56);
  box-shadow: 0 13px 34px rgba(7, 19, 33, .08), 0 1px 0 rgba(255, 255, 255, .75) inset;
  backdrop-filter: blur(14px);
}

.history-year-picker > span {
  color: #68727d;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .17em;
  text-transform: uppercase;
  white-space: nowrap;
}

.history-year-picker > div {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.history-year-picker > div::-webkit-scrollbar { display: none; }

.history-year-picker button {
  min-width: 58px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(7, 19, 33, .12);
  border-radius: 10px;
  color: #5f6975;
  background: rgba(255, 255, 255, .62);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  scroll-snap-align: center;
  transition: color .24s ease, background .24s ease, border-color .24s ease, box-shadow .24s ease, transform .14s ease;
}

.history-year-picker button:hover {
  border-color: rgba(7, 19, 33, .48);
  color: var(--ink);
  background: #fff;
  transform: translateY(-2px);
}

.history-year-picker button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.history-year-picker button:active { transform: translateY(0); }

.history-year-picker button.is-active {
  border-color: var(--red);
  color: #fff;
  background: var(--red);
  box-shadow: 0 8px 20px rgba(237, 27, 47, .24), 0 0 18px rgba(237, 27, 47, .13);
}

.history-spotlight { animation-duration: 1.25s; }
.history-light-rig i { animation-duration: 10s; }
.history-light-rig i:nth-child(2) { animation-duration: 12s; }
.history-light-rig i:nth-child(3) { animation-duration: 14s; }

.careers {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 92% 25%, rgba(46, 130, 255, .13), transparent 25%),
    radial-gradient(circle at 8% 85%, rgba(237, 27, 47, .08), transparent 23%),
    #0a1422;
}

.careers::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .06;
  background-image:
    linear-gradient(rgba(255, 255, 255, .35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .35) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}

.careers-intro {
  position: relative;
  grid-template-columns: .72fr 1.65fr 1fr;
  gap: 3vw;
  align-items: center;
  overflow: hidden;
  padding: 30px 32px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 10%, rgba(237, 27, 47, .12), transparent 26%),
    radial-gradient(circle at 88% 85%, rgba(46, 130, 255, .14), transparent 29%),
    linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
  box-shadow: 0 26px 62px rgba(0, 0, 0, .18), 0 1px 0 rgba(255, 255, 255, .05) inset;
}

.careers-intro::after {
  position: absolute;
  right: -8%;
  bottom: -80%;
  width: 34%;
  aspect-ratio: 1;
  border: 1px solid rgba(77, 157, 255, .14);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 38px rgba(77, 157, 255, .025), 0 0 0 76px rgba(77, 157, 255, .018);
  pointer-events: none;
}

.careers-intro .section-kicker { align-self: start; padding-top: 5px; }
.careers-intro h2 { font-size: clamp(42px, 4.1vw, 66px); }

.careers-intro-aside {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.careers-intro-aside > p {
  margin: 0;
  color: #9ea8b6;
  font-size: 14px;
  line-height: 1.68;
}

.careers-intro-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .11);
  padding-top: 16px;
}

.careers-intro-meta span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  padding-right: 12px;
}

.careers-intro-meta strong {
  color: #fff;
  font-size: 15px;
  font-weight: 750;
}

.careers-intro-meta small {
  overflow: hidden;
  color: #758294;
  font-size: 8px;
  line-height: 1.3;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.job-list {
  display: grid;
  gap: 12px;
  border-top: 0;
}

.job-row {
  min-height: 108px;
  padding: 0 24px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, .05), transparent 38%),
    rgba(5, 14, 25, .58);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .12), 0 1px 0 rgba(255, 255, 255, .035) inset;
  transition: background .28s ease, border-color .28s ease, box-shadow .28s ease, transform .18s ease;
}

.job-row:hover,
.job-row:focus-visible {
  padding-left: 24px;
  border-color: rgba(75, 154, 255, .38);
  background:
    linear-gradient(110deg, rgba(237, 27, 47, .09), transparent 29%),
    linear-gradient(145deg, rgba(21, 42, 67, .92), rgba(5, 14, 25, .84));
  box-shadow: 0 21px 45px rgba(0, 0, 0, .21), 0 0 30px rgba(46, 130, 255, .07);
  transform: translateY(-3px);
}

.job-row:focus-visible { outline: 2px solid rgba(91, 170, 255, .72); outline-offset: 3px; }
.job-row:active { transform: translateY(0); }

.job-index {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(237, 27, 47, .36);
  border-radius: 50%;
  background: rgba(237, 27, 47, .075);
}

.job-meta small {
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
}

.job-arrow {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  font-size: 17px;
  transition: color .24s ease, background .24s ease, border-color .24s ease, transform .24s ease;
}

.job-row:hover .job-arrow,
.job-row:focus-visible .job-arrow {
  border-color: var(--red);
  color: #fff;
  background: var(--red);
  transform: translateX(3px);
}

.footer { padding: 42px 8.2vw 22px; }

.footer-top {
  grid-template-columns: auto 1fr auto;
  gap: 6vw;
  align-items: center;
  padding-bottom: 28px;
}

.footer-top > p {
  justify-self: center;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.08;
}

.footer-social-row {
  grid-template-columns: .58fr 2fr;
  gap: 4vw;
  padding: 28px 0;
}

.footer-social-row > div:first-child { gap: 7px; }
.footer-social-row p { max-width: 270px; font-size: 12px; }
.social-links a { min-height: 60px; }
.social-links span { font-size: 12px; }

.footer-grid {
  grid-template-columns: 1fr 1fr 1.45fr;
  gap: 3vw;
  padding: 34px 0 38px 28%;
}

.footer-grid > div { gap: 8px; }
.footer-grid small { margin-bottom: 4px; font-size: 9px; }
.footer-grid a, .footer-grid p { font-size: 12px; line-height: 1.45; }
.footer-bottom { padding-top: 17px; font-size: 9px; }

@media (max-width: 1180px) {
  .careers-intro { grid-template-columns: .62fr 1.38fr; }
  .careers-intro-aside { grid-column: 2; }
}

@media (max-width: 800px) {
  .history-year-picker {
    display: block;
    margin: 0 23px 16px;
    padding: 12px;
  }

  .history-year-picker > span {
    display: block;
    margin: 0 4px 10px;
  }

  .history-year-picker button { min-width: 61px; min-height: 40px; }

  .careers-intro {
    display: block;
    margin-right: 23px;
    margin-left: 23px;
    padding: 25px 22px;
  }

  .careers-intro > div:nth-child(2) { margin: 28px 0 24px; }
  .careers-intro-aside { margin-top: 0; }
  .careers-intro-aside > p { font-size: 15px; }
  .careers-intro-meta { margin-top: 2px; }

  .job-list { gap: 10px; }
  .job-row { min-height: 102px; padding: 0 16px; border-radius: 15px; }
  .job-row:hover, .job-row:focus-visible { padding-left: 16px; }
  .job-index { width: 31px; height: 31px; }
  .job-arrow { width: 32px; height: 32px; }

  .footer { padding: 36px 23px 20px; }
  .footer-top { grid-template-columns: 1fr auto; gap: 22px; padding-bottom: 25px; }
  .footer-top > p { grid-row: 2; grid-column: 1 / -1; justify-self: start; font-size: 24px; }
  .footer-social-row { display: block; padding: 25px 0; }
  .footer-social-row > div:first-child { margin-bottom: 20px; }
  .social-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .social-links a { display: flex; min-height: 82px; margin: 0 0 0 -1px; flex-direction: column; justify-content: center; gap: 7px; padding: 8px 4px; text-align: center; }
  .social-links a:first-child { margin-left: 0; }
  .social-links i { display: none; }
  .social-links span { font-size: 10px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; padding: 30px 0 34px; }
  .footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer-bottom { gap: 8px; font-size: 9px; }
}

/* Calm history motion: one soft transition per selected year */
.history-light-rig,
.road-light-runner {
  display: none;
}

.history-ambient-lights span {
  opacity: .1;
  filter: blur(78px);
  animation: historyCalmAmbient 22s ease-in-out infinite alternate !important;
}

.history-spotlight {
  transform: none;
  border-color: color-mix(in srgb, var(--road-accent) 24%, rgba(255, 255, 255, .16));
  background:
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--road-accent) 12%, transparent), transparent 29%),
    linear-gradient(118deg, rgba(255, 255, 255, .075), transparent 34%),
    linear-gradient(145deg, #10253c 0%, #071321 58%, #030a12 100%);
  box-shadow:
    0 26px 58px rgba(7, 19, 33, .22),
    0 2px 0 rgba(255, 255, 255, .1) inset,
    -10px 12px 0 rgba(7, 19, 33, .08),
    0 0 44px color-mix(in srgb, var(--road-accent) 10%, transparent);
}

.history-spotlight::before {
  opacity: .38;
  background:
    linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, .075) 48%, transparent 63%),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 210% 100%, 48px 48px, 48px 48px;
  animation: historyCalmGlow 14s ease-in-out infinite alternate !important;
}

.history-spotlight::after { opacity: .24; }
.history-spotlight-grid {
  animation: historyContentShift .62s cubic-bezier(.22, .78, .24, 1) both !important;
}

.history-spotlight-meta span {
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--road-accent) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--road-accent) 9%, transparent);
}

.history-3d-mark {
  opacity: .68;
  animation: historyMarkBreathe 14s ease-in-out infinite alternate !important;
}

.history-road-surface::before { display: none; }

.road-edge {
  background-size: 100% 100%;
  box-shadow: 0 0 8px rgba(90, 156, 224, .22);
}

.history-stop.is-active .history-stop-node i,
.history-stop.is-active .history-stop-node em {
  display: none;
}

@keyframes historyContentShift {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes historyCalmGlow {
  from { background-position: -18% 0, 0 0, 0 0; opacity: .3; }
  to { background-position: 26% 0, 0 0, 0 0; opacity: .43; }
}

@keyframes historyCalmAmbient {
  from { transform: translate3d(-2%, -1%, 0) scale(.98); }
  to { transform: translate3d(2%, 1%, 0) scale(1.03); }
}

@keyframes historyMarkBreathe {
  from { transform: rotateX(63deg) rotateZ(-20deg) translate3d(0, 0, 34px); }
  to { transform: rotateX(63deg) rotateZ(-18deg) translate3d(-3px, -2px, 40px); }
}

@media (prefers-reduced-motion: reduce) {
  .history-ambient-lights span,
  .history-spotlight::before,
  .history-spotlight-grid,
  .history-3d-mark {
    animation: none !important;
  }
}

/* Compact contact and location section */
.contact-section {
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  min-height: 520px;
}

.contact-details {
  align-content: start;
  grid-template-rows: auto auto;
  gap: 32px;
  padding: 52px 4.6vw 48px 8.2vw;
}

.contact-details h2 {
  max-width: 540px;
  font-size: clamp(40px, 3.6vw, 58px);
  line-height: 1.01;
}

.contact-list {
  grid-template-columns: 1.3fr .7fr;
  gap: 28px;
  margin-top: 29px;
  padding-top: 22px;
}

.contact-list small { margin-bottom: 12px; }
.contact-list address { font-size: 13px; line-height: 1.55; }
.contact-list a:not(.contact-phone) { margin-top: 16px; }
.contact-phone { font-size: clamp(22px, 1.7vw, 28px); }
.contact-list p { margin-top: 10px; }

.map-frame { min-height: 520px; }
.map-label { bottom: 20px; left: 20px; }

@media (max-width: 1100px) {
  .contact-section { grid-template-columns: 1fr; }
  .contact-details { padding: 58px 8.2vw 54px; }
  .contact-details h2 { max-width: 680px; }
  .contact-list { grid-template-columns: 1.25fr .75fr; }
  .map-frame { min-height: 430px; }
}

@media (max-width: 800px) {
  .contact-details {
    gap: 28px;
    padding: 50px 23px 48px;
  }

  .contact-details h2 { font-size: 40px; }

  .contact-list {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 28px;
    padding-top: 20px;
  }

  .map-frame { min-height: 360px; }
}

/* Smaller supporting footer */
.footer { padding: 28px 8.2vw 14px; }

.footer-top {
  gap: 4vw;
  padding-bottom: 18px;
}

.footer-top > p { font-size: clamp(19px, 1.8vw, 27px); }
.footer-top > .icon-button { width: 40px; height: 40px; }

.footer-social-row {
  grid-template-columns: .48fr 2.2fr;
  gap: 3vw;
  padding: 17px 0;
}

.footer-social-row > div:first-child { gap: 5px; }
.footer-social-row p { font-size: 10px; line-height: 1.45; }
.social-links a { min-height: 48px; padding-inline: 12px; }
.social-icon { width: 30px; height: 30px; border-radius: 8px; }
.social-icon svg { width: 14px; height: 14px; }

.footer-grid {
  gap: 2.6vw;
  padding: 22px 0 24px 28%;
}

.footer-grid > div { gap: 6px; }
.footer-grid small { margin-bottom: 2px; font-size: 8px; }
.footer-grid a,
.footer-grid p { font-size: 11px; line-height: 1.38; }
.footer-bottom { padding-top: 12px; font-size: 8px; }

@media (max-width: 800px) {
  .footer { padding: 28px 23px 15px; }
  .footer-top { gap: 16px; padding-bottom: 18px; }
  .footer-top > p { font-size: 21px; }
  .footer-social-row { padding: 18px 0; }
  .footer-social-row > div:first-child { margin-bottom: 14px; }
  .social-links a { min-height: 68px; }
  .footer-grid { gap: 22px; padding: 24px 0 25px; }
  .footer-bottom { padding-top: 11px; }
}

/* Compact, layered company introduction */
.statement {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(150px, .55fr) minmax(0, 2.45fr);
  gap: 3vw;
  overflow: hidden;
  padding: 66px 8.2vw 22px;
  background:
    radial-gradient(circle at 8% 22%, rgba(237, 27, 47, .08), transparent 19%),
    radial-gradient(circle at 92% 86%, rgba(46, 130, 255, .1), transparent 24%),
    #eef1f4;
}

.statement::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .42;
  background-image:
    linear-gradient(rgba(7, 19, 33, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 19, 33, .035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, black, transparent 62%);
}

.statement > .section-kicker {
  align-self: start;
  margin-top: 17px;
  padding: 11px 0 11px 14px;
  border-left: 3px solid var(--red);
}

.statement-copy {
  position: relative;
  max-width: none;
  overflow: hidden;
  padding: 40px 44px 34px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 91% 7%, rgba(53, 141, 255, .21), transparent 28%),
    linear-gradient(135deg, #10253b 0%, #071321 58%, #050b13 100%);
  box-shadow:
    0 26px 62px rgba(7, 19, 33, .2),
    0 2px 0 rgba(255, 255, 255, .1) inset;
}

.statement-copy::after {
  position: absolute;
  right: -90px;
  bottom: -150px;
  width: 390px;
  height: 260px;
  border: 1px solid rgba(77, 156, 255, .24);
  border-radius: 50%;
  content: "";
  box-shadow:
    0 0 0 30px rgba(77, 156, 255, .045),
    0 0 0 68px rgba(77, 156, 255, .03);
  transform: rotate(-12deg);
  pointer-events: none;
}

.statement-copy .overline {
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
  color: #ff5a68;
}

.statement h2 {
  position: relative;
  z-index: 1;
  max-width: 1060px;
  font-size: clamp(40px, 4.15vw, 64px);
  line-height: 1;
}

.statement h2 em {
  color: #9eabc0;
  font-style: normal;
  font-weight: 320;
}

.statement-focus {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 23px;
}

.statement-focus span {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  color: #dbe3ed;
  background: rgba(255, 255, 255, .045);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.statement-focus span:first-child {
  border-color: rgba(237, 27, 47, .48);
  background: rgba(237, 27, 47, .1);
}

.statement-columns {
  position: relative;
  z-index: 1;
  gap: 4vw;
  margin-top: 24px;
  padding-top: 22px;
  border-color: rgba(255, 255, 255, .13);
}

.statement-columns p {
  color: #b6c1ce;
  font-size: 14px;
  line-height: 1.62;
}

.proof-band {
  gap: 12px;
  padding: 18px 8.2vw 68px;
  background: #eef1f4;
}

.proof-band article {
  position: relative;
  min-height: 108px;
  gap: 17px;
  overflow: hidden;
  margin: 0;
  padding: 21px 21px 19px;
  border: 1px solid rgba(7, 19, 33, .09);
  border-radius: 16px;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 12px 30px rgba(7, 19, 33, .055);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.proof-band article::after {
  position: absolute;
  right: -35px;
  bottom: -52px;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(237, 27, 47, .1);
  border-radius: 50%;
  content: "";
}

.proof-band article:hover {
  border-color: rgba(237, 27, 47, .28);
  box-shadow: 0 17px 36px rgba(7, 19, 33, .09);
  transform: translateY(-3px);
}

.proof-number {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: var(--red);
  font-size: 10px;
  box-shadow: 0 8px 18px rgba(237, 27, 47, .18);
}

.proof-band strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.1;
}

.proof-band p {
  max-width: 330px;
  margin-top: 7px;
  color: #67717c;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .statement {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 58px;
  }

  .statement > .section-kicker { margin-top: 0; }
  .statement-copy { padding: 36px 37px 31px; }
  .proof-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .statement {
    gap: 18px;
    padding: 48px 23px 16px;
  }

  .statement-copy {
    margin: 0;
    padding: 29px 23px 26px;
    border-radius: 19px;
  }

  .statement h2 { font-size: 38px; }
  .statement-focus { margin-top: 20px; }
  .statement-focus span { padding: 7px 9px; font-size: 9px; }

  .statement-columns {
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: 21px;
    padding-top: 19px;
  }

  .statement-columns p { font-size: 13px; }

  .proof-band {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 14px 23px 52px;
  }

  .proof-band article {
    min-height: 96px;
    margin: 0;
    padding: 19px;
  }
}

/* Faster application flow */
.apply-section {
  grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr);
  gap: 5vw;
  padding: 68px 8.2vw 76px;
  background:
    radial-gradient(circle at 8% 18%, rgba(237, 27, 47, .055), transparent 20%),
    #e8e7e3;
}

.apply-intro {
  position: static;
  top: auto;
}

.apply-intro .section-kicker { margin-bottom: 27px; }
.apply-intro .overline { margin-bottom: 12px; }

.apply-intro h2 {
  max-width: 520px;
  font-size: clamp(42px, 4.2vw, 63px);
  line-height: .98;
}

.apply-intro > p:not(.overline) {
  max-width: 500px;
  margin-top: 19px;
  font-size: 14px;
  line-height: 1.58;
}

.application-note {
  grid-template-columns: .8fr 2.2fr;
  gap: 16px;
  margin-top: 25px;
  padding: 16px 0;
}

.application-note span { font-size: 9px; }
.application-note p { font-size: 12px; line-height: 1.45; }

.application-form {
  padding-top: 18px;
  padding-right: 2px;
}

.application-form label {
  gap: 7px;
  margin-bottom: 16px;
}

.application-form label > span:first-child { font-size: 11px; }
.application-form label small { font-size: 9px; }

.application-form input:not([type="checkbox"]):not([type="file"]),
.application-form select,
.application-form textarea {
  padding: 9px 2px 11px;
  font-size: 14px;
}

.application-form textarea {
  min-height: 76px;
  resize: vertical;
}

.file-field {
  min-height: 82px;
  padding: 15px 17px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .24);
}

.file-field .file-icon {
  width: 38px;
  height: 38px;
  font-size: 16px;
}

.file-field > span:nth-child(2) { gap: 4px; }
.file-field > span:nth-child(2) strong { font-size: 13px; }

.consent-field {
  margin-bottom: 13px !important;
  font-size: 10px;
}

.submit-button {
  position: relative;
  min-height: 58px;
  overflow: hidden;
  padding: 0 10px 0 22px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  background: linear-gradient(110deg, #d90e24 0%, #ed1b2f 48%, #ff4353 100%);
  box-shadow:
    0 13px 27px rgba(237, 27, 47, .24),
    0 2px 0 rgba(255, 255, 255, .2) inset;
  font-size: 14px;
  letter-spacing: .02em;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  animation: submitBreathe 3.6s ease-in-out infinite;
}

.submit-button::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .28) 47%, transparent 72%);
  transform: translateX(-115%);
  transition: transform .72s cubic-bezier(.2, .75, .25, 1);
}

.submit-button span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 11px;
  background: rgba(7, 19, 33, .9);
  font-size: 19px;
  transition: transform .28s ease, background .28s ease;
}

.submit-button:hover:not(:disabled) {
  background: linear-gradient(110deg, #df1026 0%, #f21c31 48%, #ff5260 100%);
  box-shadow:
    0 18px 34px rgba(237, 27, 47, .33),
    0 2px 0 rgba(255, 255, 255, .24) inset;
  filter: saturate(1.08);
  transform: translateY(-3px);
}

.submit-button:hover:not(:disabled)::before { transform: translateX(115%); }
.submit-button:hover:not(:disabled) span { background: #071321; transform: translateX(2px) rotate(-5deg); }
.submit-button:active:not(:disabled) { transform: translateY(0) scale(.99); }

@keyframes submitBreathe {
  0%, 100% { box-shadow: 0 13px 27px rgba(237, 27, 47, .22), 0 2px 0 rgba(255, 255, 255, .2) inset; }
  50% { box-shadow: 0 16px 34px rgba(237, 27, 47, .31), 0 2px 0 rgba(255, 255, 255, .24) inset; }
}

/* Friendly digital footsteps through the company journey */
.history-road-viewport {
  background:
    radial-gradient(circle at 50% 45%, rgba(79, 199, 255, .17), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent);
}

.history-road-route,
.history-stop { height: 390px; }

.history-road-surface {
  top: 146px;
  height: 88px;
  border: 2px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(103, 213, 255, .17) 0 2px, transparent 2.5px) 0 0 / 22px 22px,
    linear-gradient(180deg, rgba(255, 255, 255, .09), transparent 38%),
    linear-gradient(100deg, #14243a, #0a1828 58%, #101e31);
  box-shadow:
    0 18px 30px rgba(7, 19, 33, .3),
    0 0 24px rgba(66, 174, 255, .13),
    0 3px 0 rgba(255, 255, 255, .12) inset;
  transform: rotateX(52deg) translateZ(-23px);
}

.road-edge { height: 2px; }
.road-edge-top { top: 5px; }
.road-edge-bottom { bottom: 5px; }
.road-lane { display: none; }

.road-footsteps {
  position: absolute;
  z-index: 3;
  inset: 13px 30px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  pointer-events: none;
}

.road-footsteps i {
  position: relative;
  display: block;
  width: 9px;
  height: 18px;
  border-radius: 65% 65% 48% 48%;
  opacity: .48;
  background: linear-gradient(180deg, #fff, #63d3ff);
  box-shadow: 0 0 9px rgba(99, 211, 255, .65);
  transform: rotate(77deg) translateY(-8px);
}

.road-footsteps i:nth-child(even) {
  background: linear-gradient(180deg, #fff, #ff6c7a);
  box-shadow: 0 0 9px rgba(255, 74, 94, .5);
  transform: rotate(103deg) translateY(8px);
}

.road-footsteps i::before {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  content: "";
  background: inherit;
  box-shadow: -4px 1px 0 rgba(255, 255, 255, .72), 4px 1px 0 rgba(255, 255, 255, .72);
  transform: translateX(-50%);
}

.history-stop-label {
  gap: 6px;
  padding: 7px 8px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .54);
  box-shadow: 0 8px 20px rgba(7, 19, 33, .05);
  backdrop-filter: blur(8px);
}

.history-stop.is-upper .history-stop-label { top: 7px; }
.history-stop.is-lower .history-stop-label { top: 273px; }

.history-stop-label time { font-size: 22px; }
.history-stop-label small { font-size: 9px; }

.history-stop-stem {
  width: 3px;
  background: repeating-linear-gradient(180deg, var(--road-accent) 0 7px, transparent 7px 13px);
  box-shadow: none;
}

.history-stop.is-upper .history-stop-stem { top: 78px; height: 79px; }
.history-stop.is-lower .history-stop-stem { top: 216px; height: 55px; }

.history-stop-node {
  top: 151px;
  width: 58px;
  height: 58px;
  border: 3px solid #fff;
  border-radius: 19px;
  color: #071321;
  background:
    linear-gradient(145deg, #fff 0%, color-mix(in srgb, var(--road-accent) 28%, #f6fbff) 100%);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--road-accent) 72%, transparent),
    6px 7px 0 color-mix(in srgb, var(--road-accent) 24%, rgba(7, 19, 33, .12)),
    0 12px 22px rgba(7, 19, 33, .23),
    0 2px 0 #fff inset;
  transform: translateX(-50%) translateZ(38px) rotateX(-8deg) rotate(-3deg);
}

.history-stop.is-lower .history-stop-node {
  transform: translateX(-50%) translateZ(38px) rotateX(-8deg) rotate(3deg);
}

.history-stop-node::before {
  position: absolute;
  top: 7px;
  left: 8px;
  width: 12px;
  height: 5px;
  border-radius: 999px;
  content: "";
  background: rgba(255, 255, 255, .85);
}

.history-stop-node b { font-size: 13px; }

.history-stop:hover .history-stop-node,
.history-stop:focus-visible .history-stop-node {
  transform: translateX(-50%) translateZ(60px) rotateX(-8deg) rotate(2deg) scale(1.1);
}

.history-stop.is-active .history-stop-node {
  color: #071321;
  box-shadow:
    0 0 0 3px var(--road-accent),
    8px 9px 0 color-mix(in srgb, var(--road-accent) 28%, rgba(7, 19, 33, .1)),
    0 17px 30px rgba(7, 19, 33, .28),
    0 0 28px color-mix(in srgb, var(--road-accent) 26%, transparent);
  transform: translateX(-50%) translateZ(74px) rotateX(-8deg) rotate(2deg) scale(1.25);
}

.history-stop.is-active .history-stop-label {
  border: 1px solid color-mix(in srgb, var(--road-accent) 32%, transparent);
  background: rgba(255, 255, 255, .82);
}

.history-stop.is-active .history-stop-label time {
  font-size: 26px;
  text-shadow: none;
}

.history-hint {
  margin-top: 13px;
  color: #4f5c69;
  font-size: 9px;
}

@media (prefers-reduced-motion: reduce) {
  .submit-button { animation: none; }
  .submit-button::before { transition: none; }
}

@media (max-width: 1100px) {
  .apply-section {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-block: 64px 70px;
  }

  .apply-intro h2 { max-width: 640px; }
  .application-form { padding-top: 0; }
}

@media (max-width: 800px) {
  .apply-section {
    gap: 24px;
    padding: 52px 23px 58px;
  }

  .apply-intro .section-kicker { margin-bottom: 23px; }
  .apply-intro h2 { font-size: 40px; }
  .application-note { margin-top: 22px; }
  .field-grid { grid-template-columns: 1fr; }
  .application-form label { margin-bottom: 15px; }
  .file-field { min-height: 78px; }

  .history-road-route,
  .history-stop { height: 340px; }

  .history-road-surface { top: 126px; height: 80px; }
  .history-stop.is-upper .history-stop-label { top: 0; }
  .history-stop.is-lower .history-stop-label { top: 238px; }
  .history-stop.is-upper .history-stop-stem { top: 69px; height: 66px; }
  .history-stop.is-lower .history-stop-stem { top: 187px; height: 49px; }
  .history-stop-node { top: 130px; width: 54px; height: 54px; }
  .history-stop.is-active .history-stop-node {
    transform: translateX(-50%) translateZ(62px) rotateX(-8deg) rotate(2deg) scale(1.18);
  }
}

/* Compact swipe-only story journey */
.history {
  padding: 60px 0 54px;
}

.history-heading {
  grid-template-columns: minmax(150px, .55fr) minmax(0, 2.45fr);
  gap: 3vw;
}

.history-heading .overline { margin-bottom: 9px; }

.history-heading h2 {
  max-width: 880px;
  font-size: clamp(38px, 4.1vw, 60px);
  line-height: 1;
}

.history-spotlight-wrap {
  margin: 28px 8.2vw 14px;
}

.history-spotlight {
  min-height: 220px;
  padding: 19px 24px 21px;
  border-radius: 22px;
}

.history-spotlight-meta {
  padding-bottom: 12px;
}

.history-spotlight-grid {
  grid-template-columns: minmax(105px, .38fr) minmax(330px, 1.62fr) 105px;
  gap: 23px;
  min-height: 160px;
}

.history-spotlight-grid > time {
  font-size: clamp(51px, 5.5vw, 82px);
}

.history-spotlight-copy {
  padding: 13px 0 8px;
}

.history-spotlight-copy h3 {
  margin-bottom: 8px;
  font-size: clamp(27px, 2.6vw, 41px);
}

.history-spotlight-copy > p {
  margin-bottom: 11px;
  font-size: 12px;
  line-height: 1.46;
}

.history-spotlight-copy li {
  padding: 6px 10px 6px 22px;
  font-size: 8px;
}

.history-3d-mark {
  width: 98px;
  height: 98px;
}

.history-year-picker { display: none; }

.history-road-route,
.history-stop {
  height: 315px;
}

.history-road-route::after {
  top: 151px;
  height: 78px;
}

.history-road-surface {
  top: 116px;
  height: 74px;
}

.history-stop {
  cursor: grab;
}

.history-road-viewport.is-dragging .history-stop {
  cursor: grabbing;
}

.history-stop.is-upper .history-stop-label { top: 0; }
.history-stop.is-lower .history-stop-label { top: 216px; }
.history-stop.is-upper .history-stop-stem { top: 62px; height: 66px; }
.history-stop.is-lower .history-stop-stem { top: 176px; height: 38px; }

.history-stop-node {
  top: 121px;
  width: 52px;
  height: 52px;
}

.history-stop:hover .history-stop-node {
  transform: translateX(-50%) translateZ(38px) rotateX(-8deg) rotate(-3deg);
}

.history-stop:hover .history-stop-label {
  transform: none;
}

.history-stop.is-active .history-stop-node {
  transform: translateX(-50%) translateZ(64px) rotateX(-8deg) rotate(2deg) scale(1.17);
}

.history-progress {
  margin-top: 0;
}

.history-hint {
  margin-top: 8px;
}

@media (max-width: 1100px) {
  .history-spotlight-grid {
    grid-template-columns: minmax(100px, .35fr) minmax(300px, 1.65fr);
  }

  .history-3d-mark { display: none; }
}

@media (max-width: 800px) {
  .history { padding: 48px 0 46px; }

  .history-heading {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .history-heading > div:nth-child(2) { margin-top: 0; }

  .history-spotlight-wrap {
    margin: 26px 23px 12px;
  }

  .history-spotlight {
    min-height: 0;
    padding: 18px 19px 20px;
    border-radius: 19px;
  }

  .history-spotlight-grid {
    display: block;
    min-height: 0;
    padding-top: 14px;
  }

  .history-spotlight-grid > time {
    margin-bottom: 12px;
    font-size: 62px;
  }

  .history-spotlight-copy { padding: 0; }
  .history-spotlight-copy h3 { font-size: 29px; }
  .history-spotlight-copy > p { font-size: 11px; }

  .history-road-route,
  .history-stop {
    height: 292px;
  }

  .history-road-route::after { top: 137px; }
  .history-road-surface { top: 104px; height: 70px; }
  .history-stop.is-upper .history-stop-label { top: 0; }
  .history-stop.is-lower .history-stop-label { top: 196px; }
  .history-stop.is-upper .history-stop-stem { top: 60px; height: 55px; }
  .history-stop.is-lower .history-stop-stem { top: 162px; height: 32px; }
  .history-stop-node { top: 108px; }
}

/* Compact story composition: explanation and footsteps share one viewport */
.history { padding: 62px 0 54px; }

.history-heading {
  grid-template-columns: minmax(150px, .55fr) minmax(0, 2.45fr);
  gap: 3vw;
}

.history-heading .overline { margin-bottom: 10px; }

.history-heading h2 {
  max-width: 900px;
  font-size: clamp(38px, 3.7vw, 58px);
  line-height: 1;
}

.history-spotlight-wrap {
  margin: 25px 8.2vw 12px;
}

.history-spotlight {
  min-height: 205px;
  padding: 18px 24px 20px;
  border-radius: 22px;
  box-shadow:
    0 20px 43px rgba(7, 19, 33, .19),
    0 2px 0 rgba(255, 255, 255, .1) inset,
    -7px 8px 0 rgba(7, 19, 33, .065),
    0 0 34px color-mix(in srgb, var(--road-accent) 8%, transparent);
}

.history-spotlight-meta {
  padding-bottom: 11px;
}

.history-spotlight-meta span,
.history-spotlight-meta small { font-size: 9px; }

.history-spotlight-grid {
  grid-template-columns: minmax(105px, .42fr) minmax(320px, 1.58fr) minmax(82px, .3fr);
  gap: 22px;
  min-height: 142px;
}

.history-spotlight-grid > time {
  font-size: clamp(52px, 5.2vw, 80px);
}

.history-spotlight-copy { padding: 14px 0 9px; }

.history-spotlight-copy h3 {
  margin-bottom: 7px;
  font-size: clamp(27px, 2.4vw, 38px);
}

.history-spotlight-copy > p {
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.45;
}

.history-spotlight-copy ul { gap: 6px; }

.history-spotlight-copy li {
  padding: 6px 10px 6px 21px;
  font-size: 8px;
}

.history-spotlight-copy li::before { left: 9px; width: 5px; height: 5px; }

.history-3d-mark {
  width: 88px;
  height: 88px;
}

.history-year-picker {
  gap: 14px;
  margin: 0 8.2vw 8px;
  padding: 8px 10px 8px 14px;
  border-radius: 13px;
}

.history-year-picker > span { font-size: 8px; }
.history-year-picker > div { gap: 5px; }

.history-year-picker button {
  min-width: 53px;
  min-height: 33px;
  padding-inline: 10px;
  border-radius: 9px;
  font-size: 10px;
}

.history-road-route,
.history-stop { height: 260px; }

.history-road-route {
  padding-inline: max(23px, calc(50vw - 72px));
}

.history-road-route::after {
  top: 124px;
  height: 76px;
}

.history-road-surface {
  top: 95px;
  height: 66px;
}

.road-footsteps { inset: 9px 25px; }
.road-footsteps i { width: 8px; height: 15px; }

.history-stop {
  width: 144px;
  flex-basis: 144px;
}

.history-stop-label {
  left: 5px;
  width: 134px;
  padding: 6px 7px;
}

.history-stop.is-upper .history-stop-label { top: 0; }
.history-stop.is-lower .history-stop-label { top: 184px; }
.history-stop-label time { font-size: 20px; }
.history-stop-label small { font-size: 8px; line-height: 1.25; }

.history-stop.is-upper .history-stop-stem {
  top: 56px;
  height: 48px;
}

.history-stop.is-lower .history-stop-stem {
  top: 151px;
  height: 31px;
}

.history-stop-node {
  top: 99px;
  width: 52px;
  height: 52px;
  border-radius: 17px;
}

.history-stop.is-active .history-stop-node {
  transform: translateX(-50%) translateZ(62px) rotateX(-8deg) rotate(2deg) scale(1.18);
}

.history-stop.is-active .history-stop-label time { font-size: 23px; }
.history-progress { margin-top: 8px; }
.history-hint { margin-top: 7px; }

@media (max-width: 1050px) {
  .history-spotlight-grid {
    grid-template-columns: minmax(100px, .42fr) minmax(280px, 1.58fr);
  }

  .history-3d-mark { display: none; }
}

@media (max-width: 800px) {
  .history { padding: 52px 0 48px; }

  .history-heading {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .history-heading > div:nth-child(2) { margin-top: 0; }
  .history-heading h2 { font-size: 40px; }

  .history-spotlight-wrap { margin: 25px 23px 12px; }

  .history-spotlight {
    min-height: 330px;
    padding: 19px 18px 21px;
    border-radius: 20px;
  }

  .history-spotlight-grid {
    display: block;
    min-height: auto;
    padding-top: 18px;
  }

  .history-spotlight-grid > time {
    margin-bottom: 18px;
    font-size: 68px;
  }

  .history-spotlight-copy { padding: 0; }
  .history-spotlight-copy h3 { font-size: 31px; }
  .history-spotlight-copy > p { font-size: 12px; }

  .history-year-picker {
    margin: 0 23px 7px;
    padding: 9px;
  }

  .history-road-route,
  .history-stop { height: 250px; }

  .history-road-route {
    padding-inline: max(23px, calc(50vw - 62px));
  }

  .history-road-route::after { top: 119px; }
  .history-road-surface { top: 91px; height: 64px; }
  .history-stop { width: 124px; flex-basis: 124px; }
  .history-stop-label { width: 114px; }
  .history-stop.is-upper .history-stop-label { top: 0; }
  .history-stop.is-lower .history-stop-label { top: 178px; }
  .history-stop.is-upper .history-stop-stem { top: 54px; height: 44px; }
  .history-stop.is-lower .history-stop-stem { top: 145px; height: 31px; }
  .history-stop-node { top: 94px; width: 50px; height: 50px; }
  .history-stop.is-active .history-stop-node {
    transform: translateX(-50%) translateZ(54px) rotateX(-8deg) rotate(2deg) scale(1.14);
  }

  .history-progress { margin-top: 5px; }
  .history-hint {
    margin-inline: 23px;
    line-height: 1.5;
  }
}

/* Playful hero actions and a compact, focused purpose section */
.hero-actions {
  gap: 16px;
  flex-wrap: wrap;
}

.button-playful {
  position: relative;
  min-height: 60px;
  padding: 7px 8px 7px 22px;
  gap: 18px;
  overflow: visible;
  border-radius: 19px;
  font-size: 14px;
  letter-spacing: -.01em;
  box-shadow: 0 7px 0 rgba(0, 0, 0, .24), 0 14px 28px rgba(0, 0, 0, .2);
  transform: translateY(0) rotate(0);
  transition:
    transform 220ms cubic-bezier(.2, .8, .2, 1),
    box-shadow 220ms ease,
    background 220ms ease,
    border-color 220ms ease;
}

.button-playful::before,
.button-playful::after {
  position: absolute;
  width: 7px;
  height: 7px;
  content: "";
  border: 2px solid currentColor;
  opacity: .56;
  transform: rotate(45deg);
  transition: transform 280ms ease, opacity 280ms ease;
}

.button-playful::before {
  top: -7px;
  right: 47px;
}

.button-playful::after {
  right: 14px;
  bottom: -6px;
  width: 5px;
  height: 5px;
}

.button-primary.button-playful {
  border: 1px solid rgba(255, 255, 255, .34);
  background: linear-gradient(145deg, #ff3548, #f01935 60%, #c90f2a);
  box-shadow:
    0 7px 0 #93091d,
    0 15px 30px rgba(240, 25, 53, .3),
    inset 0 1px 0 rgba(255, 255, 255, .32);
}

.button-ghost.button-playful {
  border: 1px solid rgba(255, 255, 255, .48);
  background: rgba(8, 20, 36, .56);
  box-shadow:
    0 7px 0 rgba(0, 0, 0, .42),
    0 15px 30px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px);
}

.button-buddy {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, .78);
  border-radius: 15px 18px 15px 18px;
  background: #fff;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, .17),
    inset 0 -5px 0 rgba(225, 232, 241, .75);
  transform: rotate(3deg);
  transition: transform 260ms cubic-bezier(.2, .9, .2, 1);
}

.button-buddy i {
  position: absolute;
  top: 13px;
  left: 11px;
  width: 5px;
  height: 6px;
  border-radius: 50%;
  background: #101b2a;
  box-shadow: 13px 0 0 #101b2a;
}

.button-buddy i::after {
  position: absolute;
  top: 9px;
  left: 5px;
  width: 9px;
  height: 5px;
  content: "";
  border-bottom: 2px solid #f01935;
  border-radius: 0 0 10px 10px;
}

.button-ghost .button-buddy {
  background: #bfe5ff;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, .2),
    inset 0 -5px 0 rgba(67, 141, 207, .25);
}

.button-playful:hover {
  transform: translateY(-4px) rotate(-1deg);
}

.button-playful:hover::before {
  opacity: 1;
  transform: rotate(135deg) scale(1.15);
}

.button-playful:hover::after {
  opacity: .92;
  transform: rotate(-45deg) scale(1.2);
}

.button-playful:hover .button-buddy {
  transform: translateY(-2px) rotate(-7deg) scale(1.06);
}

.button-primary.button-playful:hover {
  background: linear-gradient(145deg, #ff5161, #f01935 60%, #d51330);
  box-shadow:
    0 9px 0 #93091d,
    0 19px 36px rgba(240, 25, 53, .38),
    inset 0 1px 0 rgba(255, 255, 255, .4);
}

.button-playful:active {
  transform: translateY(5px) rotate(0);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .34);
}

.button-playful:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}

.purpose-section {
  padding: 72px 8.2vw 70px;
}

.purpose-heading {
  grid-template-columns: minmax(150px, .62fr) minmax(0, 2.38fr);
  gap: 4vw;
  margin-bottom: 34px;
}

.purpose-heading h2 {
  max-width: 880px;
  font-size: clamp(40px, 4.15vw, 63px);
  line-height: .98;
}

.purpose-summary {
  max-width: 680px;
  margin: 18px 0 0;
  color: #aeb9c7;
  font-size: 15px;
  line-height: 1.62;
}

.purpose-stage {
  gap: 20px;
}

.purpose-card {
  min-height: 330px;
  padding: 24px 26px 26px;
  border-radius: 23px;
}

.purpose-card::after {
  right: 26px;
  bottom: 25px;
  left: 26px;
}

.purpose-card.is-visible:hover,
.purpose-mission.is-visible:hover {
  transform: translateY(-6px) rotateY(0) translateZ(20px);
}

.purpose-card-top {
  padding-bottom: 17px;
}

.purpose-card-top > span {
  width: 40px;
  height: 40px;
  font-size: 11px;
}

.purpose-card-top small {
  padding: 7px 10px;
  font-size: 10px;
}

.purpose-card-copy {
  max-width: min(72%, 520px);
  padding: 64px 0 28px;
}

.purpose-label {
  margin-bottom: 9px;
  font-size: 12px;
}

.purpose-card-copy h3 {
  font-size: clamp(31px, 2.8vw, 44px);
  font-weight: 500;
  line-height: 1;
}

.purpose-detail {
  max-width: 520px;
  margin: 15px 0 0;
  color: #b4bfcc;
  font-size: 14px;
  line-height: 1.55;
}

.purpose-orbit {
  top: 75px;
  right: 28px;
  width: 135px;
  opacity: .82;
}

.purpose-flow {
  right: 26px;
  bottom: 19px;
  left: 26px;
}

.purpose-marquee {
  display: none;
}

@media (max-width: 900px) {
  .purpose-section {
    padding: 62px 23px 60px;
  }

  .purpose-heading {
    grid-template-columns: 1fr;
    gap: 21px;
    margin-bottom: 28px;
  }

  .purpose-heading h2 {
    font-size: clamp(39px, 8.5vw, 55px);
  }

  .purpose-stage {
    grid-template-columns: 1fr;
  }

  .purpose-card {
    min-height: 290px;
  }

  .purpose-card-copy {
    max-width: 78%;
    padding-top: 56px;
  }
}

@media (max-width: 560px) {
  .hero-actions {
    align-items: stretch;
  }

  .button-playful {
    width: 100%;
  }

  .purpose-card {
    min-height: 305px;
    padding: 21px 20px 23px;
  }

  .purpose-card-copy {
    max-width: 100%;
    padding: 76px 0 28px;
  }

  .purpose-card-copy h3 {
    max-width: 85%;
    font-size: 31px;
  }

  .purpose-detail {
    max-width: 92%;
    font-size: 13px;
  }

  .purpose-orbit {
    top: 70px;
    right: 14px;
    width: 105px;
    opacity: .65;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button-playful,
  .button-playful::before,
  .button-playful::after,
  .button-buddy {
    transition: none;
  }
}

/* Final purpose copy hierarchy: the official Vision and Mission lead */
.button-playful {
  min-height: 58px;
  padding: 0 26px;
  gap: 0;
}

.purpose-heading {
  align-items: end;
  margin-bottom: 26px;
}

.purpose-heading .overline {
  margin-bottom: 7px;
}

.purpose-heading h2 {
  max-width: none;
  font-size: clamp(24px, 2vw, 31px);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -.025em;
}

.purpose-card {
  min-height: 350px;
}

.purpose-card-copy {
  max-width: 92%;
  padding: 70px 0 30px;
}

.purpose-card-copy h3 {
  max-width: 720px;
  font-size: clamp(32px, 3vw, 47px);
  font-weight: 420;
  line-height: 1.04;
  letter-spacing: -.04em;
}

.purpose-orbit {
  opacity: .5;
}

@media (max-width: 900px) {
  .purpose-heading {
    gap: 13px;
    margin-bottom: 24px;
  }

  .purpose-heading h2 {
    font-size: 26px;
  }

  .purpose-card {
    min-height: 315px;
  }

  .purpose-card-copy {
    max-width: 94%;
    padding-top: 68px;
  }

  .purpose-card-copy h3 {
    font-size: clamp(31px, 7vw, 42px);
  }
}

@media (max-width: 560px) {
  .purpose-card {
    min-height: 330px;
  }

  .purpose-card-copy {
    padding-top: 84px;
  }

  .purpose-card-copy h3 {
    max-width: 100%;
    font-size: clamp(29px, 8.4vw, 36px);
  }
}

/* Livelier WhatsApp contact control */
.whatsapp-button {
  right: 22px;
  bottom: 22px;
  width: 64px;
  height: 64px;
  overflow: visible;
  border: 3px solid rgba(255, 255, 255, .92);
  background: linear-gradient(145deg, #42ea7e, #20c963 58%, #109b45);
  box-shadow:
    0 8px 0 #087a35,
    0 17px 34px rgba(10, 116, 54, .34),
    inset 0 2px 0 rgba(255, 255, 255, .35);
  animation: whatsappFloat 4.2s ease-in-out infinite;
}

.whatsapp-button::before {
  position: absolute;
  inset: -8px;
  content: "";
  border: 2px solid rgba(37, 211, 102, .42);
  border-radius: inherit;
  opacity: 0;
  animation: whatsappRipple 3.2s ease-out infinite;
  pointer-events: none;
}

.whatsapp-button:hover {
  background: linear-gradient(145deg, #58f18e, #25d366 58%, #11a84a);
  box-shadow:
    0 10px 0 #087a35,
    0 22px 42px rgba(10, 116, 54, .42),
    inset 0 2px 0 rgba(255, 255, 255, .44);
  transform: translateY(-5px) rotate(-3deg) scale(1.04);
  animation-play-state: paused;
}

.whatsapp-button:active {
  transform: translateY(5px) scale(.97);
  box-shadow:
    0 3px 0 #087a35,
    0 9px 20px rgba(10, 116, 54, .3);
}

.whatsapp-mark {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  font-size: 0;
  transform: none;
  transition: transform 260ms cubic-bezier(.2, .9, .2, 1);
}

.whatsapp-mark::after {
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 10px;
  height: 10px;
  content: "";
  border-bottom: 3px solid #fff;
  border-left: 3px solid #fff;
  background: #20c963;
  transform: rotate(-18deg);
}

.whatsapp-mark i {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 20px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  transform: rotate(-17deg);
}

.whatsapp-button:hover .whatsapp-mark {
  transform: rotate(7deg) scale(1.08);
}

.whatsapp-status {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 13px;
  height: 13px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #ff2438;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .24);
}

.whatsapp-label {
  position: absolute;
  right: calc(100% + 13px);
  width: max-content;
  padding: 9px 13px;
  border: 1px solid rgba(7, 19, 33, .1);
  border-radius: 13px;
  opacity: 0;
  background: #fff;
  color: #0b1828;
  box-shadow: 0 10px 28px rgba(7, 19, 33, .18);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  transform: translateX(8px) scale(.94);
  transform-origin: right center;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.2, .9, .2, 1);
}

.whatsapp-label::after {
  position: absolute;
  top: 50%;
  right: -5px;
  width: 9px;
  height: 9px;
  content: "";
  background: #fff;
  transform: translateY(-50%) rotate(45deg);
}

.whatsapp-button:hover .whatsapp-label,
.whatsapp-button:focus-visible .whatsapp-label {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.whatsapp-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}

@keyframes whatsappFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-5px) rotate(1.5deg); }
}

@keyframes whatsappRipple {
  0% { opacity: .65; transform: scale(.84); }
  72%, 100% { opacity: 0; transform: scale(1.35); }
}

@media (max-width: 600px) {
  .whatsapp-button {
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 58px;
    height: 58px;
  }

  .whatsapp-mark {
    width: 32px;
    height: 32px;
  }

  .whatsapp-mark i {
    font-size: 18px;
  }

  .whatsapp-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-button,
  .whatsapp-button::before {
    animation: none;
  }
}

/* Opaque mobile navigation and job menus */
@media (max-width: 800px) {
  .site-header:has(.nav.is-open) {
    border-color: rgba(255, 255, 255, .12);
    background: #071321;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .32);
  }

  .nav {
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 1;
    background: linear-gradient(180deg, #071321 0%, #0a1a2c 56%, #071321 100%);
    color: #fff;
    box-shadow: -20px 0 55px rgba(0, 0, 0, .4);
  }

  .nav::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    opacity: .32;
    background-image:
      linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
  }

  .nav a {
    color: #fff;
    border-color: rgba(255, 255, 255, .14);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .3);
  }

  .nav a:hover,
  .nav a:focus-visible {
    color: #fff;
  }

  .jobs-popover {
    overflow: hidden;
    border: 1px solid #dfe3e8;
    border-radius: 0 0 18px 18px;
    opacity: 1;
    background: #fff;
    color: #071321;
    box-shadow: 0 24px 55px rgba(0, 0, 0, .34);
  }

  .jobs-popover button,
  .jobs-popover > a,
  .popover-head {
    background: #fff;
  }

  .jobs-popover button:hover,
  .jobs-popover button:focus-visible,
  .jobs-popover > a:hover,
  .jobs-popover > a:focus-visible {
    background: #f1f4f7;
  }
}

/* Mobile viewport flow: natural hero height and a true full-screen menu */
body.menu-open {
  overflow: hidden;
  touch-action: none;
}

body.menu-open .whatsapp-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 800px) {
  :root {
    --site-header-height: 76px;
  }

  html {
    scroll-padding-top: var(--site-header-height);
  }

  .site-header {
    z-index: 2001;
    height: calc(var(--site-header-height) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }

  .site-header.scrolled,
  .site-header:has(.nav.is-open) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .hero {
    display: flex;
    min-height: 100svh;
    height: auto;
    flex-direction: column;
    padding-top: calc(
      var(--site-header-height) +
      env(safe-area-inset-top) +
      24px
    );
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
    overflow-x: clip;
    overflow-y: visible;
  }

  .hero-content {
    position: relative;
    z-index: 2;
    width: auto;
    margin: 0 23px;
    padding-top: 0;
  }

  .hero .eyebrow {
    margin-bottom: 20px;
    font-size: 10px;
    line-height: 1.45;
  }

  .hero h1 {
    font-size: clamp(3rem, 12vw, 4.25rem);
    line-height: .94;
    letter-spacing: -.04em;
  }

  .hero-copy {
    margin: 24px 0 26px;
    font-size: 15px;
    line-height: 1.55;
  }

  .hero-actions {
    position: static;
    width: min(100%, 330px);
    max-width: none;
  }

  .hero-footer {
    position: relative;
    z-index: 3;
    left: auto;
    right: auto;
    bottom: auto;
    display: grid;
    width: auto;
    height: auto;
    margin: 34px 23px 0;
    padding: 22px 0 2px;
    grid-template-columns: 1fr;
    gap: 15px;
    align-items: start;
  }

  .hero-footer p,
  .hero-footer p:nth-child(3) {
    display: flex;
    min-width: 0;
    font-size: 12px;
    line-height: 1.45;
  }

  .nav {
    position: fixed;
    z-index: 2000;
    inset: 0;
    width: 100vw;
    min-height: 100svh;
    height: 100dvh;
    padding:
      calc(var(--site-header-height) + env(safe-area-inset-top) + 28px)
      28px
      calc(34px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100%);
    transition:
      transform .28s cubic-bezier(.2, .75, .2, 1),
      opacity .2s ease,
      visibility 0s linear .28s;
    -webkit-overflow-scrolling: touch;
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition-delay: 0s;
  }

  .nav a {
    flex: 0 0 auto;
  }

  .menu-toggle {
    z-index: 2002;
    background: #071321;
  }
}

@media (max-width: 800px) and (max-height: 700px) {
  .nav {
    padding-top: calc(
      var(--site-header-height) +
      env(safe-area-inset-top) +
      16px
    );
  }

  .nav a {
    padding: 13px 0;
    font-size: 21px;
  }

}

/* A clear visual bridge between company direction and core values */
.profile-values-divider {
  position: relative;
  z-index: 3;
  display: grid;
  min-height: 168px;
  grid-template-columns: 120px minmax(0, 1fr) 240px;
  gap: 34px;
  overflow: hidden;
  align-items: center;
  padding: 30px 8.2vw;
  border-top: 1px solid rgba(7, 19, 33, .1);
  border-bottom: 1px solid rgba(7, 19, 33, .14);
  color: #071321;
  background:
    linear-gradient(90deg, rgba(240, 25, 53, .08), transparent 24%),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(7, 19, 33, .035) 80px),
    #f2f1ed;
}

.profile-values-divider::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 9px;
  content: "";
  background: linear-gradient(180deg, #ff3146, #ef1935 58%, #a70b21);
  box-shadow: 8px 0 25px rgba(239, 25, 53, .18);
}

.profile-values-index {
  color: #ef1935;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2em;
}

.profile-values-copy {
  display: grid;
  grid-template-columns: minmax(160px, .42fr) minmax(340px, 1.58fr);
  gap: 28px;
  align-items: center;
}

.profile-values-copy small {
  color: #687382;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .18em;
  line-height: 1.45;
  text-transform: uppercase;
}

.profile-values-copy strong {
  max-width: 780px;
  font-size: clamp(27px, 2.5vw, 40px);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -.035em;
}

.profile-values-steps {
  position: relative;
  width: 190px;
  height: 88px;
  justify-self: end;
  perspective: 700px;
}

.profile-values-steps i {
  position: absolute;
  width: 76px;
  height: 56px;
  border: 1px solid rgba(7, 19, 33, .15);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 15px 28px rgba(7, 19, 33, .12);
  transform: rotateX(58deg) rotateZ(-18deg);
}

.profile-values-steps i:nth-child(1) {
  top: 30px;
  left: 3px;
  background: #071321;
}

.profile-values-steps i:nth-child(2) {
  top: 16px;
  left: 56px;
  border-color: rgba(239, 25, 53, .35);
  background: #ef1935;
}

.profile-values-steps i:nth-child(3) {
  top: 2px;
  left: 109px;
  background: #fff;
}

@media (max-width: 950px) {
  .profile-values-divider {
    grid-template-columns: 80px minmax(0, 1fr);
    min-height: 150px;
  }

  .profile-values-copy {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .profile-values-steps {
    display: none;
  }
}

@media (max-width: 620px) {
  .profile-values-divider {
    grid-template-columns: 1fr;
    gap: 11px;
    min-height: 0;
    padding: 30px 23px 32px 34px;
  }

  .profile-values-copy strong {
    font-size: 28px;
  }
}

/* Evidence-led awards presentation inside Our Story */
.history-spotlight {
  min-height: 430px;
}

.history-spotlight-grid {
  grid-template-columns: minmax(112px, .34fr) minmax(440px, 1.3fr) minmax(238px, .62fr);
  gap: 28px;
  min-height: 340px;
}

.history-spotlight-grid > time {
  align-self: start;
  padding-top: 48px;
}

.history-spotlight-copy {
  padding: 24px 0 18px;
}

.history-evidence-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
}

.history-evidence-label span,
.history-evidence-label small {
  border: 1px solid color-mix(in srgb, var(--road-accent) 52%, transparent);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 9px;
  font-weight: 850;
}

.history-evidence-label span {
  padding: 7px 10px;
  color: var(--road-accent);
  background: color-mix(in srgb, var(--road-accent) 10%, transparent);
}

.history-evidence-label small {
  padding: 7px 9px;
  color: #b9c4d1;
  border-color: rgba(255,255,255,.14);
}

.history-spotlight-copy .history-award-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.history-spotlight-copy .history-award-list li {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 48px;
  padding: 8px 12px 8px 9px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  color: #edf3fa;
  background: linear-gradient(100deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
  box-shadow: 0 8px 18px rgba(0,0,0,.09);
}

.history-spotlight-copy .history-award-list li::before {
  content: none;
}

.history-award-list li > span {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--road-accent) 14%, rgba(255,255,255,.04));
  font-size: 16px;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.24));
}

.history-award-list li strong {
  font: inherit;
}

.history-record-note {
  margin: 10px 0 0 !important;
  color: #8f9bab !important;
  font-size: 9px !important;
  line-height: 1.45 !important;
}

.history-proof-visual {
  position: relative;
  display: block;
  width: 100%;
  min-width: 230px;
  height: 292px;
  justify-self: end;
  color: white;
  perspective: 900px;
  transform-style: preserve-3d;
}

.history-proof-glow {
  position: absolute;
  right: 2%;
  bottom: 13%;
  width: 84%;
  height: 45%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--road-accent) 28%, transparent);
  filter: blur(34px);
  opacity: .68;
  transform: rotateX(70deg) translateZ(-80px);
}

.history-award-rings {
  position: absolute;
  z-index: 0;
  right: -12px;
  bottom: 34px;
  width: 188px;
  height: 112px;
  border: 1px solid color-mix(in srgb, var(--road-accent) 45%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 18px color-mix(in srgb, var(--road-accent) 8%, transparent),
    0 0 0 38px color-mix(in srgb, var(--road-accent) 5%, transparent),
    0 0 40px color-mix(in srgb, var(--road-accent) 18%, transparent);
  opacity: .86;
  transform: rotateX(67deg) rotateZ(-8deg) translateZ(-42px);
}

.history-award-icon-stage {
  position: absolute;
  z-index: 3;
  inset: 2px 5px 30px;
  transform-style: preserve-3d;
  transform: rotateY(-8deg) rotateX(2deg);
}

.history-award-icon-stage::before {
  position: absolute;
  z-index: -1;
  right: 11px;
  bottom: 25px;
  width: 172px;
  height: 176px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 34px;
  content: "";
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018));
  box-shadow: 0 26px 48px rgba(0,0,0,.26), 0 1px 0 rgba(255,255,255,.08) inset;
  transform: translateZ(-30px) rotateZ(5deg);
}

.history-award-emblem {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.48);
  color: #7d4a00;
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,232,166,.9) 44%, rgba(214,153,33,.92));
  box-shadow:
    0 22px 34px rgba(0,0,0,.34),
    0 0 24px color-mix(in srgb, var(--road-accent) 24%, transparent),
    0 2px 0 rgba(255,255,255,.9) inset,
    0 -3px 8px rgba(113,67,0,.22) inset;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.2,.8,.2,1), box-shadow .75s ease;
}

.history-award-emblem b {
  display: block;
  line-height: 1;
  filter: drop-shadow(0 10px 9px rgba(95,53,0,.24));
}

.history-award-emblem small {
  color: #2e2009;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.history-award-emblem-primary {
  z-index: 4;
  top: 31px;
  left: 45px;
  width: 142px;
  height: 154px;
  gap: 9px;
  border-radius: 38px;
  transform: translateZ(90px) rotateY(7deg) rotateZ(-3deg);
  animation: historyEmblemFloat 7.8s ease-in-out infinite alternate;
}

.history-award-emblem-primary b {
  font-size: 70px;
}

.history-award-emblem-primary small {
  max-width: 112px;
  font-size: 7.5px;
  line-height: 1.3;
  text-align: center;
}

.history-icon-year {
  position: absolute;
  z-index: 7;
  right: 1px;
  bottom: 17px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: white;
  background: rgba(5,13,23,.86);
  box-shadow: 0 13px 24px rgba(0,0,0,.3);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  transform: translateZ(112px) rotateZ(5deg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.history-year-orbit {
  position: absolute;
  z-index: 2;
  color: #f7c64a;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--road-accent) 55%, transparent));
  line-height: 1;
}

.history-year-orbit-one {
  top: 14px;
  right: 12px;
  font-size: 32px;
  transform: translateZ(40px) rotate(12deg);
}

.history-year-orbit-two {
  top: 94px;
  left: 2px;
  font-size: 24px;
  transform: translateZ(64px) rotate(-13deg);
}

.history-year-orbit-three {
  right: 30px;
  bottom: 56px;
  font-size: 17px;
  transform: translateZ(78px) rotate(7deg);
}

.history-award-pedestal {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 6px;
  width: 205px;
  height: 25px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(23,33,47,.92), color-mix(in srgb, var(--road-accent) 32%, #1a2430), rgba(8,15,25,.95));
  box-shadow: 0 16px 22px rgba(0,0,0,.34), 0 -1px 0 rgba(255,255,255,.18) inset;
  transform: rotateX(64deg) translateZ(-8px);
}

.history-award-pedestal i {
  position: absolute;
  inset: 5px 13px;
  border: 1px solid color-mix(in srgb, var(--road-accent) 42%, transparent);
  border-radius: inherit;
}

.history-award-pedestal i + i {
  inset: 9px 39px;
}

.history-proof-visual:hover .history-award-emblem-primary {
  transform: translate3d(-3px,-6px,108px) rotateY(4deg) rotateZ(-2deg);
  box-shadow:
    0 29px 42px rgba(0,0,0,.4),
    0 0 34px color-mix(in srgb, var(--road-accent) 32%, transparent),
    0 2px 0 rgba(255,255,255,.92) inset;
}

@keyframes historyEmblemFloat {
  from { translate: 0 0; }
  to { translate: 0 -5px; }
}

@media (max-width: 1120px) {
  .history-spotlight-grid {
    grid-template-columns: minmax(105px, .3fr) minmax(390px, 1.35fr) minmax(190px, .52fr);
    gap: 20px;
  }

  .history-proof-visual { min-width: 190px; transform: scale(.86); transform-origin: right center; }
}

@media (max-width: 900px) {
  .history-spotlight-grid {
    grid-template-columns: minmax(110px, .3fr) minmax(0, 1.7fr);
  }

  .history-proof-visual {
    grid-column: 1 / -1;
    width: min(360px, 100%);
    min-width: 0;
    height: 220px;
    justify-self: center;
    transform: scale(.82);
    transform-origin: center top;
  }
}

@media (max-width: 800px) {
  .history-spotlight { min-height: 0; }
  .history-spotlight-grid > time { padding-top: 0; }
  .history-evidence-label { flex-wrap: wrap; }
  .history-spotlight-copy .history-award-list { align-items: stretch; }
  .history-spotlight-copy .history-award-list li { width: 100%; font-size: 11px; }
  .history-record-note { font-size: 10px !important; }
  .history-proof-visual { margin: 22px auto -13px; }
}

@media (prefers-reduced-motion: reduce) {
  .history-award-emblem { animation: none; transition: none; }
}

/* Expanded What we do and animated industry coverage */
.solutions .service-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.solutions .service-card {
  min-height: 458px;
  padding: 27px;
}

.solutions .service-card:nth-child(2),
.solutions .service-card:nth-child(3),
.solutions .service-card:nth-child(5),
.solutions .service-card:nth-child(6) {
  background: linear-gradient(145deg, rgba(12,23,38,.96), rgba(8,12,18,.98));
}

.solutions .service-card-intro {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  padding-top: 88px;
}

.solutions .service-card h3 {
  margin-bottom: 15px;
  font-size: clamp(26px, 2vw, 34px);
}

.solutions .service-card p {
  margin-bottom: 18px;
  font-size: 13.5px;
  line-height: 1.62;
}

.solutions .service-object {
  top: 49px;
  right: 21px;
  width: 108px;
  height: 108px;
}

.solutions .service-points {
  gap: 7px;
}

.solutions .service-points li {
  padding: 7px 10px;
  font-size: 10px;
}

.solutions .service-card .service-outcome {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: auto 0 0;
  padding-top: 19px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: #f3f6fa;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.service-outcome span {
  color: var(--red);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.industries-showcase {
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin-top: 24px;
  padding: 34px 0 29px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 16%, rgba(46,130,255,.17), transparent 27%),
    radial-gradient(circle at 8% 86%, rgba(237,27,47,.13), transparent 28%),
    linear-gradient(120deg, rgba(255,255,255,.045), rgba(3,9,17,.38));
  box-shadow: 0 28px 60px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.05) inset;
}

.industries-showcase::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .09;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 54px 54px;
  pointer-events: none;
}

.industries-heading {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 30px;
  padding: 0 34px 28px;
}

.industries-heading > div > small {
  color: var(--red);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.industries-heading h3 {
  max-width: 680px;
  margin: 10px 0 0;
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 540;
  line-height: 1.04;
  letter-spacing: -.045em;
}

.industries-heading h3 em {
  color: #77879c;
  font-style: normal;
  font-weight: 430;
}

.industries-count {
  display: grid;
  min-width: 96px;
  padding: 13px 16px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  background: rgba(4,11,20,.48);
  box-shadow: 0 15px 28px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.07) inset;
  text-align: center;
}

.industries-count strong {
  color: white;
  font-size: 34px;
  line-height: 1;
}

.industries-count small {
  margin-top: 5px;
  color: #8e9aaa;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.industries-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.industry-marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: 7px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.industry-track {
  display: flex;
  width: max-content;
  gap: 12px;
  padding-left: 12px;
  will-change: transform;
}

.industry-track-forward {
  animation: industryMarqueeForward 42s linear infinite;
}

.industry-track-reverse {
  animation: industryMarqueeReverse 46s linear infinite;
}

.industries-showcase:hover .industry-track,
.industries-showcase:focus-within .industry-track {
  animation-play-state: paused;
}

.industry-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 16px 8px 9px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  color: #d8dee6;
  background: rgba(4,11,20,.72);
  box-shadow: 0 10px 22px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.045) inset;
  font-size: 12px;
  font-weight: 650;
}

.industry-pill b {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
  border-radius: 50%;
  background: rgba(237,27,47,.09);
  font-size: 17px;
  line-height: 1;
}

@keyframes industryMarqueeForward {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 6px)); }
}

@keyframes industryMarqueeReverse {
  from { transform: translateX(calc(-50% - 6px)); }
  to { transform: translateX(0); }
}

@media (max-width: 1180px) {
  .solutions .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .solutions .service-grid {
    grid-template-columns: 1fr;
  }

  .solutions .service-card {
    min-height: 430px;
  }

  .industries-showcase {
    margin-inline: -7px;
    padding-top: 28px;
    border-radius: 22px;
  }

  .industries-heading {
    grid-template-columns: 1fr auto;
    gap: 14px;
    padding: 0 20px 21px;
  }

  .industries-heading h3 {
    font-size: 28px;
  }

  .industries-count {
    min-width: 76px;
    padding: 11px 12px;
    border-radius: 17px;
  }

  .industries-count strong {
    font-size: 28px;
  }

  .industry-pill {
    min-height: 44px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .industries-heading {
    align-items: start;
  }

  .industries-heading h3 {
    font-size: 25px;
  }

  .industries-count {
    min-width: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .industry-track {
    animation: none;
    will-change: auto;
  }

  .industry-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Individual visual identity for the six service cards */
.solutions .service-card {
  --service-accent: #48a6ff;
  --service-accent-rgb: 72,166,255;
  isolation: isolate;
  background:
    linear-gradient(155deg, rgba(var(--service-accent-rgb),.11), transparent 42%),
    linear-gradient(145deg, rgba(17,31,51,.97), rgba(5,10,17,.99));
}

.solutions .service-telecom { --service-accent: #42b8ff; --service-accent-rgb: 66,184,255; }
.solutions .service-broadband { --service-accent: #36dfbd; --service-accent-rgb: 54,223,189; }
.solutions .service-software { --service-accent: #9e83ff; --service-accent-rgb: 158,131,255; }
.solutions .service-ai { --service-accent: #f0557a; --service-accent-rgb: 240,85,122; }
.solutions .service-growth { --service-accent: #ffc247; --service-accent-rgb: 255,194,71; }
.solutions .service-success { --service-accent: #55d582; --service-accent-rgb: 85,213,130; }

.solutions .service-card::before {
  inset: 0 0 auto;
  width: auto;
  height: 188px;
  aspect-ratio: auto;
  border-radius: inherit;
  background:
    radial-gradient(circle at 80% 37%, rgba(var(--service-accent-rgb),.32), transparent 27%),
    linear-gradient(135deg, rgba(var(--service-accent-rgb),.105), transparent 53%);
  opacity: 1;
  transform: none;
}

.solutions .service-card::after {
  z-index: 0;
  background:
    linear-gradient(180deg, transparent 0 38%, rgba(3,8,14,.1) 52%, rgba(3,8,14,.48) 100%),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(var(--service-accent-rgb),.035) 39px 40px),
    linear-gradient(120deg, rgba(255,255,255,.055), transparent 22% 78%, rgba(var(--service-accent-rgb),.055));
}

.solutions .service-card:hover {
  border-color: rgba(var(--service-accent-rgb),.46);
  background:
    linear-gradient(155deg, rgba(var(--service-accent-rgb),.16), transparent 43%),
    linear-gradient(145deg, #102039, #070c14);
  box-shadow:
    0 42px 80px rgba(0,0,0,.34),
    0 0 0 1px rgba(var(--service-accent-rgb),.12),
    0 0 42px rgba(var(--service-accent-rgb),.09);
}

.service-visual {
  position: absolute;
  z-index: 1;
  top: 46px;
  right: 20px;
  width: 154px;
  height: 132px;
  perspective: 800px;
  transform-style: preserve-3d;
  animation: serviceVisualFloat 7.8s ease-in-out infinite alternate;
}

.service-card:nth-child(2n) .service-visual { animation-delay: -2.1s; }
.service-card:nth-child(3n) .service-visual { animation-delay: -4.4s; }

.service-symbol {
  position: absolute;
  z-index: 6;
  top: 1px;
  right: 0;
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.2), rgba(var(--service-accent-rgb),.16)),
    rgba(6,14,24,.76);
  box-shadow:
    0 18px 32px rgba(0,0,0,.36),
    0 0 24px rgba(var(--service-accent-rgb),.22),
    0 1px 0 rgba(255,255,255,.32) inset;
  font-size: 34px;
  line-height: 1;
  transform: translateZ(56px) rotateZ(4deg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.service-visual > span,
.service-visual > i {
  position: absolute;
  display: block;
  border: 1px solid rgba(var(--service-accent-rgb),.38);
  background: rgba(var(--service-accent-rgb),.055);
  box-shadow: 0 0 28px rgba(var(--service-accent-rgb),.1) inset;
}

.service-visual > i {
  z-index: 5;
  width: 10px;
  height: 10px;
  border-color: rgba(255,255,255,.82);
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 12px white, 0 0 26px rgba(var(--service-accent-rgb),.8);
}

.service-visual-telecom > span {
  right: 17px;
  bottom: 3px;
  border-width: 1px 0 0 1px;
  border-radius: 100% 0 0;
  transform: rotate(45deg);
}
.service-visual-telecom > span:nth-of-type(1) { width: 118px; height: 118px; opacity: .35; }
.service-visual-telecom > span:nth-of-type(2) { right: 36px; bottom: 22px; width: 82px; height: 82px; opacity: .6; }
.service-visual-telecom > span:nth-of-type(3) { right: 54px; bottom: 40px; width: 47px; height: 47px; opacity: .9; }
.service-visual-telecom > i { right: 68px; bottom: 54px; }

.service-visual-broadband > span {
  border-radius: 50%;
  transform: rotateX(66deg) rotateZ(-12deg);
}
.service-visual-broadband > span:nth-of-type(1) { inset: 22px -4px 3px 4px; }
.service-visual-broadband > span:nth-of-type(2) { inset: 38px 17px 18px 27px; }
.service-visual-broadband > span:nth-of-type(3) { inset: 53px 39px 34px 50px; }
.service-visual-broadband > i { left: 67px; bottom: 34px; }

.service-visual-software > span {
  height: 66px;
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(var(--service-accent-rgb),.12), transparent),
    rgba(8,16,27,.58);
  transform: rotateY(-17deg) rotateZ(-3deg);
}
.service-visual-software > span:nth-of-type(1) { z-index: 1; right: 41px; bottom: 4px; width: 106px; opacity: .42; }
.service-visual-software > span:nth-of-type(2) { z-index: 2; right: 22px; bottom: 20px; width: 98px; opacity: .7; }
.service-visual-software > span:nth-of-type(3) { z-index: 3; right: 4px; bottom: 36px; width: 90px; }
.service-visual-software > i { right: 77px; bottom: 54px; }

.service-visual-ai > span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(var(--service-accent-rgb),.18);
  box-shadow: 0 0 18px rgba(var(--service-accent-rgb),.22);
}
.service-visual-ai > span::after {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 67px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, rgba(var(--service-accent-rgb),.65), transparent);
  transform-origin: left;
}
.service-visual-ai > span:nth-of-type(1) { left: 9px; bottom: 20px; }
.service-visual-ai > span:nth-of-type(1)::after { transform: rotate(-40deg); }
.service-visual-ai > span:nth-of-type(2) { left: 42px; top: 29px; }
.service-visual-ai > span:nth-of-type(2)::after { width: 50px; transform: rotate(25deg); }
.service-visual-ai > span:nth-of-type(3) { right: 29px; bottom: 10px; }
.service-visual-ai > i { left: 78px; top: 66px; }

.service-visual-growth > span {
  bottom: 5px;
  width: 25px;
  border-radius: 9px 9px 2px 2px;
  background: linear-gradient(180deg, rgba(var(--service-accent-rgb),.28), rgba(var(--service-accent-rgb),.07));
  transform: rotateY(-12deg);
}
.service-visual-growth > span:nth-of-type(1) { left: 9px; height: 35px; opacity: .55; }
.service-visual-growth > span:nth-of-type(2) { left: 45px; height: 63px; opacity: .75; }
.service-visual-growth > span:nth-of-type(3) { left: 81px; height: 95px; }
.service-visual-growth > i { left: 90px; top: 23px; }

.service-visual-success > span {
  border-radius: 50%;
  transform: rotateX(62deg) rotateZ(10deg);
}
.service-visual-success > span:nth-of-type(1) { inset: 3px 2px 4px 4px; opacity: .25; }
.service-visual-success > span:nth-of-type(2) { inset: 25px 25px 23px 29px; opacity: .55; }
.service-visual-success > span:nth-of-type(3) { inset: 47px 51px 43px 54px; opacity: .9; }
.service-visual-success > i { left: 72px; bottom: 43px; }

@keyframes serviceVisualFloat {
  from { transform: translate3d(0,0,0) rotateY(-2deg); }
  to { transform: translate3d(-3px,-6px,16px) rotateY(3deg); }
}

@media (max-width: 800px) {
  .service-visual {
    right: 15px;
    transform: scale(.9);
    transform-origin: right top;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-visual { animation: none; }
}

/* Principal design refinement: What we do */
.solutions {
  padding: clamp(92px, 8vw, 122px) clamp(24px, 8.2vw, 140px) clamp(98px, 9vw, 132px);
  background:
    radial-gradient(circle at 88% 10%, rgba(71, 126, 205, .11), transparent 29%),
    radial-gradient(circle at 7% 92%, rgba(237, 27, 47, .065), transparent 25%),
    #071321;
}

.solutions::before {
  opacity: .025;
  background-size: 88px 88px;
}

.solutions .section-heading {
  margin-bottom: clamp(48px, 5vw, 66px);
}

.solutions .section-heading h2 {
  max-width: 920px;
  font-size: clamp(44px, 4.7vw, 72px);
  line-height: 1.02;
}

.solutions .section-heading h2 em {
  color: #95a2b3;
}

.solutions-lead {
  max-width: 650px;
  margin-top: 24px;
  color: #aab4c2;
  font-size: 16px;
  line-height: 1.7;
}

.solutions .service-grid {
  gap: clamp(18px, 1.6vw, 24px);
  perspective: none;
}

.solutions .service-card,
.solutions .service-card:nth-child(2),
.solutions .service-card:nth-child(3),
.solutions .service-card:nth-child(5),
.solutions .service-card:nth-child(6) {
  min-height: 430px;
  padding: 28px;
  border-color: rgba(255, 255, 255, .105);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(var(--service-accent-rgb), .045), transparent 38%),
    rgba(10, 22, 37, .9);
  box-shadow:
    0 20px 42px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .035);
  transform: none;
  transform-style: flat;
  transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.solutions .service-card::before {
  top: -48px;
  right: -58px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--service-accent-rgb), .13), transparent 68%);
  opacity: 1;
  transform: none;
}

.solutions .service-card::after {
  background: linear-gradient(115deg, rgba(255, 255, 255, .025), transparent 26% 78%);
}

.solutions .service-card:hover {
  border-color: rgba(var(--service-accent-rgb), .34);
  background:
    linear-gradient(145deg, rgba(var(--service-accent-rgb), .065), transparent 40%),
    rgba(10, 22, 37, .94);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .045);
  transform: none;
}

.solutions .service-card:hover::before {
  opacity: 1;
  transform: none;
}

.solutions .service-top {
  align-items: center;
}

.solutions .service-top span {
  color: #f04455;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .08em;
}

.solutions .service-top small {
  padding: 5px 9px;
  border-color: rgba(255, 255, 255, .11);
  color: #9da8b8;
  font-size: 9px;
  font-weight: 720;
  letter-spacing: .12em;
}

.solutions .service-visual {
  top: 67px;
  right: 25px;
  width: 52px;
  height: 52px;
  perspective: none;
  transform: none;
  animation: none;
}

.solutions .service-symbol {
  position: static;
  width: 52px;
  height: 52px;
  border-color: rgba(var(--service-accent-rgb), .22);
  border-radius: 15px;
  color: var(--service-accent);
  background: rgba(var(--service-accent-rgb), .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 27px;
  font-weight: 600;
  line-height: 1;
  transform: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.solutions .service-visual > span,
.solutions .service-visual > i {
  display: none;
}

.solutions .service-card-intro {
  max-width: 100%;
  margin-top: 0;
  padding-top: 78px;
  transform: none;
}

.solutions .service-card h3 {
  max-width: calc(100% - 62px);
  margin-bottom: 14px;
  font-size: clamp(25px, 2vw, 32px);
  font-weight: 560;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.solutions .service-card p {
  max-width: 38ch;
  margin-bottom: 20px;
  color: #aab4c2;
  font-size: 15px;
  line-height: 1.62;
}

.solutions .service-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}

.solutions .service-points li {
  position: relative;
  min-height: 42px;
  padding: 10px 2px 10px 16px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .085);
  border-radius: 0;
  color: #c7ced8;
  background: transparent;
  font-size: 13px;
  line-height: 1.4;
}

.solutions .service-points li::before {
  position: absolute;
  top: 17px;
  left: 1px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--service-accent);
  content: "";
  opacity: .9;
}

.solutions .service-card .service-outcome {
  gap: 10px;
  margin-top: auto;
  padding-top: 19px;
  border-color: rgba(255, 255, 255, .1);
  color: #f2f5f8;
  font-size: 13px;
  line-height: 1.4;
}

.solutions .service-outcome span {
  color: #f04455;
  font-size: 9px;
  letter-spacing: .12em;
}

.industries-showcase {
  margin-top: 24px;
  padding: 32px 0 27px;
  border-color: rgba(255, 255, 255, .105);
  border-radius: 22px;
  background: rgba(10, 22, 37, .82);
  box-shadow:
    0 20px 42px rgba(0, 0, 0, .16),
    inset 0 1px 0 rgba(255, 255, 255, .03);
}

.industries-showcase::before {
  opacity: .025;
  background-size: 72px 72px;
}

.industries-heading {
  align-items: center;
  padding: 0 32px 26px;
}

.industries-heading > div > small {
  color: #f04455;
  font-size: 10px;
  letter-spacing: .14em;
}

.industries-heading h3 {
  max-width: 660px;
  margin-top: 9px;
  font-size: clamp(28px, 2.7vw, 42px);
  font-weight: 530;
  line-height: 1.07;
}

.industries-heading h3 em {
  color: #98a5b7;
}

.industries-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.industries-count {
  min-width: 88px;
  padding: 11px 14px;
  border-color: rgba(255, 255, 255, .11);
  border-radius: 16px;
  background: rgba(4, 11, 20, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.industries-count strong {
  font-size: 30px;
}

.industries-count small {
  color: #9ba7b7;
  font-size: 9px;
}

.industries-motion-toggle {
  display: inline-flex;
  min-width: 82px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px;
  color: #dbe1e8;
  background: rgba(4, 11, 20, .42);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.industries-motion-toggle span {
  color: #f04455;
  font-size: 10px;
  line-height: 1;
}

.industries-motion-toggle:hover {
  border-color: rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .055);
}

.industries-motion-toggle:focus-visible {
  outline: 3px solid rgba(80, 155, 255, .42);
  outline-offset: 3px;
}

.industry-track-forward {
  animation-duration: 54s;
}

.industry-track-reverse {
  animation-duration: 58s;
}

.industries-showcase.is-paused .industry-track {
  animation-play-state: paused;
}

.industry-pill {
  min-height: 46px;
  gap: 10px;
  padding: 7px 15px 7px 8px;
  border-color: rgba(255, 255, 255, .105);
  color: #cbd3dd;
  background: rgba(4, 11, 20, .56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  font-size: 12px;
  font-weight: 620;
}

.industry-pill b {
  width: 30px;
  height: 30px;
  border-color: rgba(237, 27, 47, .2);
  color: #f15a69;
  background: rgba(237, 27, 47, .065);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
}

@media (max-width: 1180px) {
  .solutions .service-card,
  .solutions .service-card:nth-child(2),
  .solutions .service-card:nth-child(3),
  .solutions .service-card:nth-child(5),
  .solutions .service-card:nth-child(6) {
    min-height: 410px;
  }
}

@media (max-width: 800px) {
  .solutions {
    padding: 76px 22px 86px;
  }

  .solutions .section-heading {
    margin-bottom: 38px;
  }

  .solutions .section-heading > div:nth-child(2) {
    margin-top: 26px;
  }

  .solutions .section-heading h2 {
    font-size: clamp(40px, 11vw, 52px);
  }

  .solutions-lead {
    margin-top: 20px;
    font-size: 15px;
  }

  .solutions .service-card,
  .solutions .service-card:nth-child(2),
  .solutions .service-card:nth-child(3),
  .solutions .service-card:nth-child(5),
  .solutions .service-card:nth-child(6) {
    min-height: 0;
    padding: 24px;
  }

  .solutions .service-visual {
    top: 61px;
    right: 22px;
    transform: none;
  }

  .solutions .service-card-intro {
    padding-top: 72px;
  }

  .solutions .service-card h3 {
    max-width: calc(100% - 58px);
    font-size: 27px;
  }

  .industries-showcase {
    margin-inline: 0;
    padding-top: 26px;
  }

  .industries-heading {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 0 20px 22px;
  }

  .industries-controls {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .solutions .service-points {
    grid-template-columns: 1fr;
  }

  .solutions .service-card p {
    max-width: 100%;
  }

  .industries-heading h3 {
    font-size: 27px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .industry-track-forward,
  .industry-track-reverse {
    animation: none;
  }
}

/* Premium homepage narrative and hero-to-journey transition */
:root {
  --site-header-height: 76px;
}

.site-header {
  height: var(--site-header-height);
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding-inline: clamp(22px, 3.6vw, 64px);
  border-bottom-color: rgba(255, 255, 255, .1);
}

.site-header.scrolled {
  background: rgba(6, 16, 29, .86);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}

.brand {
  width: 136px;
}

.nav {
  justify-self: center;
  gap: clamp(28px, 2.3vw, 34px);
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  font-weight: 600;
}

.nav a {
  padding-block: 11px;
  transition: color 220ms ease;
}

.nav a:hover,
.nav a:focus-visible,
.nav a.is-active {
  color: #fff;
}

.nav a::after {
  right: auto;
  bottom: 5px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 250ms ease-out;
}

.nav a:hover::after,
.nav a:focus-visible::after,
.nav a.is-active::after {
  right: auto;
  transform: scaleX(1);
  transform-origin: left;
}

.jobs-trigger {
  min-width: 132px;
  height: 44px;
  padding: 0 8px 0 17px;
  gap: 13px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 14px;
  background: linear-gradient(145deg, #f42b40, #dc142d);
  box-shadow: 0 9px 22px rgba(237, 27, 47, .22), inset 0 1px 0 rgba(255, 255, 255, .25);
  font-size: 13px;
  transition: transform 250ms ease-out, box-shadow 250ms ease-out, background 250ms ease-out;
}

.jobs-trigger:hover {
  background: linear-gradient(145deg, #ff354a, #e31731);
  box-shadow: 0 12px 28px rgba(237, 27, 47, .3), inset 0 1px 0 rgba(255, 255, 255, .3);
  transform: translateY(-2px);
}

.jobs-trigger:active {
  transform: translateY(0);
}

.jobs-trigger span {
  width: 28px;
  height: 28px;
  background: rgba(83, 3, 16, .28);
}

.hero {
  isolation: isolate;
}

.hero::after {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 210px;
  content: "";
  background:
    radial-gradient(ellipse at 78% 100%, rgba(52, 128, 237, .24), transparent 48%),
    linear-gradient(180deg, transparent, rgba(4, 12, 22, .42) 52%, #06111f 100%);
  pointer-events: none;
}

.hero-content {
  padding-top: clamp(168px, 20vh, 228px);
}

.hero h1 {
  max-width: 790px;
  line-height: .99;
}

.hero-copy {
  max-width: 620px;
  margin: 27px 0 31px;
  color: #d0d6df;
  line-height: 1.62;
}

.hero-actions {
  gap: 12px;
}

.button-playful {
  min-height: 52px;
  padding: 0 20px;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: none;
  transition: transform 250ms ease-out, box-shadow 250ms ease-out, background 250ms ease-out, border-color 250ms ease-out;
}

.button-playful::before,
.button-playful::after {
  display: none;
}

.button-primary.button-playful {
  border-color: rgba(255, 255, 255, .22);
  background: linear-gradient(145deg, #f52d42, #dd152e);
  box-shadow: 0 11px 26px rgba(237, 27, 47, .24), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.button-ghost.button-playful {
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .065);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

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

.button-primary.button-playful:hover {
  box-shadow: 0 15px 32px rgba(237, 27, 47, .32), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.button-ghost.button-playful:hover {
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .1);
}

.transformation-journey {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 650px;
  padding: clamp(126px, 11vw, 168px) 8.2vw clamp(100px, 9vw, 136px);
  color: #fff;
  background:
    radial-gradient(ellipse at 78% -10%, rgba(47, 127, 242, .2), transparent 42%),
    radial-gradient(circle at 10% 82%, rgba(237, 27, 47, .075), transparent 28%),
    linear-gradient(180deg, #06111f 0%, #071625 46%, #071321 100%);
}

.transformation-journey::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .055;
  background-image:
    linear-gradient(rgba(255, 255, 255, .25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .25) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .42) 58%, transparent);
  mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .42) 58%, transparent);
}

.journey-bridge {
  position: absolute;
  z-index: 0;
  top: -170px;
  right: 0;
  left: 0;
  height: 330px;
  overflow: hidden;
  pointer-events: none;
}

.journey-bridge-glow {
  position: absolute;
  top: -94px;
  right: 4%;
  width: min(650px, 54vw);
  aspect-ratio: 1.35;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(67, 146, 255, .25), rgba(40, 103, 190, .08) 42%, transparent 70%);
  filter: blur(20px);
  animation: journeyBridgeGlow 7s ease-in-out infinite alternate;
}

.journey-bridge-line {
  position: absolute;
  right: 7%;
  width: min(980px, 72vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(74, 148, 255, .32) 32%, rgba(255, 255, 255, .72) 70%, rgba(237, 27, 47, .45), transparent);
  box-shadow: 0 0 13px rgba(59, 138, 255, .22);
  transform-origin: right center;
  animation: journeyBridgeFlow 6.8s ease-in-out infinite;
}

.journey-bridge-line-one {
  top: 143px;
  transform: rotate(-7deg);
}

.journey-bridge-line-two {
  top: 202px;
  width: min(760px, 58vw);
  opacity: .48;
  transform: rotate(5deg);
  animation-delay: -2.4s;
}

.journey-bridge-node {
  position: absolute;
  top: 154px;
  right: 20%;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #4d9bff;
  box-shadow: 0 0 12px #fff, 0 0 28px rgba(53, 134, 255, .85);
  animation: journeyBridgeNode 4.8s ease-in-out infinite;
}

.transformation-inner {
  position: relative;
  z-index: 2;
  width: min(1480px, 100%);
  margin: 0 auto;
}

.transformation-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
  column-gap: clamp(48px, 8vw, 126px);
  align-items: end;
  margin-bottom: clamp(68px, 7vw, 96px);
}

.transformation-heading .overline {
  grid-column: 1 / -1;
  margin-bottom: 18px;
  color: #f04a5b;
}

.transformation-heading h2 {
  max-width: 770px;
  margin: 0;
  font-size: clamp(48px, 5.4vw, 82px);
  font-weight: 520;
  line-height: 1;
  letter-spacing: -.052em;
}

.transformation-heading h2 em {
  color: #9eacbe;
}

.transformation-heading > p:last-child {
  max-width: 620px;
  margin: 0;
  color: #adb8c7;
  font-size: 16px;
  line-height: 1.72;
}

.transformation-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.transformation-track::before,
.transformation-track::after {
  position: absolute;
  top: 27px;
  right: 8%;
  left: 5%;
  height: 1px;
  content: "";
}

.transformation-track::before {
  background: rgba(255, 255, 255, .15);
}

.transformation-track::after {
  background: linear-gradient(90deg, #ed1b2f, #5aa4ff 58%, rgba(255, 255, 255, .7));
  box-shadow: 0 0 14px rgba(63, 142, 255, .26);
  transform: scaleX(0);
  transform-origin: left;
  animation: transformationLine 2.2s .25s cubic-bezier(.2, .75, .2, 1) forwards;
}

.transformation-step {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding-right: clamp(6px, 1vw, 16px);
  transition: transform 280ms ease-out;
}

.transformation-step:hover {
  transform: translateY(-5px);
}

.transformation-node {
  display: grid;
  width: 56px;
  height: 56px;
  margin-bottom: 28px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 17px;
  color: #fff;
  background: rgba(9, 24, 41, .9);
  box-shadow: 0 0 0 7px #071523, 0 10px 24px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: border-color 280ms ease-out, background 280ms ease-out, box-shadow 280ms ease-out;
}

.transformation-node span {
  color: #6aafff;
  font-size: 26px;
  line-height: 1;
  transition: color 280ms ease-out, transform 280ms ease-out;
}

.transformation-step:hover .transformation-node {
  border-color: rgba(93, 169, 255, .6);
  background: rgba(17, 41, 68, .96);
  box-shadow: 0 0 0 7px #071523, 0 14px 30px rgba(0, 0, 0, .25), 0 0 28px rgba(55, 139, 255, .12);
}

.transformation-step:hover .transformation-node span {
  color: #fff;
  transform: translateY(-2px);
}

.transformation-step small {
  display: block;
  margin-bottom: 12px;
  color: #f04a5b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

.transformation-step h3 {
  margin: 0 0 13px;
  font-size: clamp(22px, 2vw, 29px);
  font-weight: 570;
  line-height: 1.1;
  letter-spacing: -.035em;
}

.transformation-step p {
  max-width: 25ch;
  margin: 0;
  color: #9da9b9;
  font-size: 14px;
  line-height: 1.62;
}

@keyframes journeyBridgeGlow {
  from { opacity: .55; transform: translate3d(-1%, 0, 0) scale(.98); }
  to { opacity: .9; transform: translate3d(1.5%, 5px, 0) scale(1.04); }
}

@keyframes journeyBridgeFlow {
  0%, 100% { opacity: .18; filter: brightness(.82); }
  48% { opacity: .78; filter: brightness(1.18); }
}

@keyframes journeyBridgeNode {
  0%, 100% { opacity: .45; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes transformationLine {
  to { transform: scaleX(1); }
}

@media (max-width: 1100px) {
  .nav {
    gap: 22px;
  }

  .transformation-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .transformation-heading .overline {
    grid-column: auto;
    margin-bottom: -4px;
  }

  .transformation-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 44px 28px;
  }

  .transformation-track::before,
  .transformation-track::after {
    display: none;
  }
}

@media (max-width: 800px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .brand {
    width: 112px;
  }

  .nav {
    justify-self: auto;
    color: rgba(255, 255, 255, .82);
  }

  .nav a::after {
    bottom: 12px;
    width: 42px;
  }

  .jobs-trigger {
    min-width: 106px;
    height: 40px;
    padding-left: 13px;
    gap: 8px;
    border-radius: 12px;
    font-size: 11px;
  }

  .jobs-trigger span {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }

  .hero::after {
    height: 165px;
  }

  .hero h1 {
    line-height: .95;
  }

  .hero-copy {
    margin-block: 22px 25px;
  }

  .button-playful {
    width: 100%;
    min-height: 50px;
  }

  .transformation-journey {
    min-height: 0;
    padding: 108px 23px 88px;
  }

  .journey-bridge {
    top: -126px;
    height: 260px;
  }

  .journey-bridge-glow {
    top: -40px;
    right: -22%;
    width: 110vw;
  }

  .journey-bridge-line {
    right: -6%;
    width: 92vw;
  }

  .journey-bridge-line-one {
    top: 105px;
  }

  .journey-bridge-line-two {
    display: none;
  }

  .journey-bridge-node {
    top: 110px;
    right: 24%;
  }

  .transformation-heading {
    margin-bottom: 58px;
  }

  .transformation-heading h2 {
    font-size: clamp(42px, 12vw, 58px);
  }

  .transformation-heading > p:last-child {
    font-size: 15px;
    line-height: 1.65;
  }

  .transformation-track {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 0;
  }

  .transformation-track::before {
    display: block;
    top: 28px;
    right: auto;
    bottom: 48px;
    left: 27px;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, rgba(237, 27, 47, .7), rgba(77, 155, 255, .45), rgba(255, 255, 255, .12));
  }

  .transformation-step {
    min-height: 164px;
    padding: 0 0 38px 84px;
  }

  .transformation-step:hover {
    transform: none;
  }

  .transformation-node {
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: 56px;
    margin: 0;
  }

  .transformation-step p {
    max-width: 34ch;
  }
}

@media (max-width: 390px) {
  .brand {
    width: 101px;
  }

  .jobs-trigger {
    min-width: 96px;
    padding-left: 11px;
    font-size: 10px;
  }

  .menu-toggle {
    margin-left: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-bridge-glow,
  .journey-bridge-line,
  .journey-bridge-node,
  .transformation-track::after {
    animation: none;
  }

  .transformation-track::after {
    transform: scaleX(1);
  }

  .transformation-step,
  .transformation-node,
  .transformation-node span {
    transition: none;
  }
}

/* Compact enterprise header navigation */
@media (min-width: 1101px) {
  .site-header {
    grid-template-columns: auto max-content max-content;
    justify-content: start;
    padding-inline: 8.2vw;
  }

  .nav {
    width: auto;
    margin-left: 52px;
    justify-content: flex-start;
    gap: 44px;
    color: rgba(255, 255, 255, .75);
    font-size: 15px;
    font-weight: 580;
  }

  .nav a {
    display: flex;
    min-height: 52px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .nav a::after {
    right: auto;
    bottom: 5px;
    left: 0;
    width: 100%;
  }

  .header-actions {
    justify-self: start;
    margin-left: 36px;
  }

  .jobs-trigger {
    min-width: 128px;
    height: 44px;
    padding: 0 8px 0 18px;
    border-radius: 11px;
    box-shadow: 0 8px 20px rgba(237, 27, 47, .2), inset 0 1px 0 rgba(255, 255, 255, .22);
  }
}

@media (min-width: 801px) and (max-width: 1100px) {
  .site-header {
    grid-template-columns: auto max-content max-content;
    justify-content: start;
    padding-inline: 22px;
  }

  .brand {
    width: 112px;
  }

  .nav {
    width: auto;
    margin-left: 20px;
    justify-content: flex-start;
    gap: 18px;
    font-size: 13px;
    font-weight: 560;
  }

  .nav a {
    display: flex;
    min-height: 50px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .nav a::after {
    right: auto;
    bottom: 5px;
    left: 0;
    width: 100%;
  }

  .header-actions {
    justify-self: start;
    margin-left: 18px;
  }

  .jobs-trigger {
    min-width: 106px;
    height: 40px;
    padding: 0 7px 0 13px;
    gap: 8px;
    border-radius: 10px;
    font-size: 11px;
  }
}

/* 2026-08 navigation, solution identity and careers interaction refinement */
@media (min-width: 1101px) {
  .site-header {
    grid-template-columns: auto minmax(0, 1fr) max-content;
  }

  .nav {
    justify-self: end;
    margin-left: 0;
  }

  .header-actions {
    justify-self: end;
    margin-left: 36px;
  }
}

@media (min-width: 801px) and (max-width: 1100px) {
  .site-header {
    grid-template-columns: auto minmax(0, 1fr) max-content;
  }

  .nav {
    justify-self: end;
    margin-left: 0;
  }

  .header-actions {
    justify-self: end;
    margin-left: 18px;
  }
}

/* Make every solution card recognisable before its copy is read. */
.solutions .service-card,
.solutions .service-card:nth-child(2),
.solutions .service-card:nth-child(3),
.solutions .service-card:nth-child(5),
.solutions .service-card:nth-child(6) {
  background:
    linear-gradient(145deg, rgba(var(--service-accent-rgb), .11), transparent 47%),
    rgba(8, 20, 34, .94);
}

.solutions .service-telecom {
  background:
    radial-gradient(circle at 83% 19%, rgba(66, 184, 255, .22), transparent 26%),
    linear-gradient(145deg, rgba(22, 84, 127, .2), transparent 48%),
    #091727;
}

.solutions .service-broadband {
  background:
    radial-gradient(ellipse at 84% 18%, rgba(54, 223, 189, .2), transparent 27%),
    linear-gradient(145deg, rgba(24, 110, 95, .18), transparent 49%),
    #091a20;
}

.solutions .service-software {
  background:
    radial-gradient(circle at 84% 17%, rgba(158, 131, 255, .23), transparent 27%),
    linear-gradient(145deg, rgba(82, 55, 157, .19), transparent 50%),
    #121526;
}

.solutions .service-ai {
  background:
    radial-gradient(circle at 84% 17%, rgba(240, 85, 122, .27), transparent 27%),
    linear-gradient(145deg, rgba(132, 35, 77, .2), transparent 50%),
    #1a111f;
}

.solutions .service-growth {
  background:
    radial-gradient(circle at 84% 17%, rgba(255, 194, 71, .22), transparent 27%),
    linear-gradient(145deg, rgba(142, 93, 22, .2), transparent 50%),
    #1a1711;
}

.solutions .service-success {
  background:
    radial-gradient(circle at 84% 17%, rgba(85, 213, 130, .21), transparent 27%),
    linear-gradient(145deg, rgba(36, 119, 76, .2), transparent 50%),
    #0d1919;
}

.solutions .service-card::before {
  top: 0;
  right: 0;
  width: 48%;
  height: 190px;
  border-radius: 0 22px 0 100%;
  background:
    repeating-radial-gradient(circle at 74% 31%, rgba(var(--service-accent-rgb), .16) 0 1px, transparent 1px 20px),
    linear-gradient(145deg, rgba(var(--service-accent-rgb), .08), transparent 70%);
  opacity: .78;
}

.solutions .service-card:hover::before {
  opacity: 1;
  transform: scale(1.025);
}

.solutions .service-visual {
  top: 52px;
  right: 20px;
  width: 148px;
  height: 118px;
  perspective: 800px;
  transform-style: preserve-3d;
  animation: serviceVisualFloat 9s ease-in-out infinite alternate;
}

.solutions .service-symbol {
  position: absolute;
  z-index: 6;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  border-color: rgba(var(--service-accent-rgb), .38);
  border-radius: 20px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(var(--service-accent-rgb), .27), rgba(6, 14, 24, .78));
  box-shadow:
    0 18px 34px rgba(0, 0, 0, .32),
    0 0 28px rgba(var(--service-accent-rgb), .2),
    inset 0 1px 0 rgba(255, 255, 255, .19);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.05em;
  transform: translateZ(48px) rotateZ(3deg);
}

.solutions .service-symbol-svg {
  display: block;
  padding: 13px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 5px 10px rgba(var(--service-accent-rgb), .35));
}

.solutions .service-symbol-svg .service-icon-signal {
  fill: var(--service-accent);
  stroke: rgba(255, 255, 255, .9);
  stroke-width: 1.5;
}

.solutions .service-symbol-svg .service-icon-accent {
  color: var(--service-accent);
  stroke: currentColor;
  stroke-width: 3.1;
}

.solutions .service-visual > span,
.solutions .service-visual > i {
  display: block;
}

.solutions .service-card-intro {
  padding-top: 112px;
}

.solutions .service-card h3 {
  max-width: calc(100% - 86px);
}

.industries-heading {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.industries-heading h3 {
  max-width: 800px;
}

/* Match the Careers CTA to the primary View Jobs control. */
.jobs-style-cta {
  display: inline-flex;
  width: max-content;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 38px;
  padding: 0 8px 0 18px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, #f42b40, #dc142d);
  box-shadow: 0 9px 22px rgba(237, 27, 47, .24), inset 0 1px 0 rgba(255, 255, 255, .25);
  font-size: 13px;
  font-weight: 750;
  transition: transform 250ms ease-out, box-shadow 250ms ease-out, background 250ms ease-out;
}

.jobs-style-cta > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: rgba(83, 3, 16, .28);
  font-size: 12px;
}

.jobs-style-cta:hover {
  color: #fff;
  background: linear-gradient(145deg, #ff354a, #e31731);
  box-shadow: 0 13px 30px rgba(237, 27, 47, .32), inset 0 1px 0 rgba(255, 255, 255, .3);
  transform: translateY(-2px);
}

.job-availability-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.job-availability-legend span,
.job-status,
.modal-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.job-availability-legend span {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  color: #9ca7b5;
  background: rgba(5, 14, 25, .38);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.job-availability-legend i,
.job-status i,
.modal-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.available i,
.job-status.available i,
.modal-status.available i {
  background: #42d982;
  box-shadow: 0 0 12px rgba(66, 217, 130, .75);
}

.unavailable i,
.job-status.unavailable i,
.modal-status.unavailable i {
  background: #ff455b;
  box-shadow: 0 0 12px rgba(255, 69, 91, .7);
}

.job-row {
  grid-template-columns: 54px minmax(250px, 1.25fr) minmax(180px, .7fr) 138px 42px;
  gap: 18px;
}

.job-status {
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  color: #d1d8e0;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .03em;
}

.job-row.is-available {
  border-left-color: rgba(66, 217, 130, .45);
}

.job-row.is-unavailable {
  border-left-color: rgba(255, 69, 91, .5);
  opacity: .78;
}

/* Centred job details with a calmer, richer transition. */
.job-modal {
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 8, 15, .78);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  animation: jobModalBackdropIn .28s ease both;
}

.job-panel {
  position: relative;
  width: min(720px, calc(100vw - 48px));
  height: auto;
  max-height: min(780px, calc(100dvh - 48px));
  overflow-y: auto;
  padding: 54px 56px 48px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 26px;
  color: #f5f7fa;
  background:
    radial-gradient(circle at 90% 8%, rgba(46, 130, 255, .17), transparent 28%),
    radial-gradient(circle at 9% 92%, rgba(237, 27, 47, .1), transparent 26%),
    linear-gradient(145deg, #102139, #07101d 62%, #060b13);
  box-shadow: 0 42px 110px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: jobModalPanelIn .46s cubic-bezier(.2, .78, .2, 1) both;
}

.modal-close,
.modal-secondary-action {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  width: auto;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  padding: 0 7px 0 15px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 11px;
  color: #d8dee6;
  background: rgba(255, 255, 255, .055);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.modal-secondary-action span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  font-size: 20px;
  line-height: 1;
}

.modal-secondary-action:hover {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .1);
  transform: translateY(-2px);
}

.job-panel .eyebrow {
  margin-top: 24px;
  color: #a8b3c2;
}

.job-panel h2 {
  max-width: 600px;
  margin-bottom: 22px;
  color: #fff;
  font-size: clamp(38px, 5vw, 58px);
}

.modal-meta {
  flex-wrap: wrap;
}

.modal-meta > span {
  border-color: rgba(255, 255, 255, .13);
  color: #b5c0cd;
  background: rgba(255, 255, 255, .035);
}

.modal-meta .modal-status {
  padding-inline: 11px;
}

.modal-summary {
  margin: 34px 0;
  color: #b8c2cf;
  font-size: 16px;
}

.job-panel h3 {
  color: #f2f5f8;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.job-panel ul {
  margin-bottom: 32px;
  border-top-color: rgba(255, 255, 255, .11);
}

.job-panel li {
  border-bottom-color: rgba(255, 255, 255, .1);
  color: #b0bbc8;
  font-size: 14px;
}

.modal-primary-action {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 0 8px 0 18px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, #f42b40, #dc142d);
  box-shadow: 0 10px 24px rgba(237, 27, 47, .27), inset 0 1px 0 rgba(255, 255, 255, .24);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  transition: transform 240ms ease, box-shadow 240ms ease, background 240ms ease;
}

.modal-primary-action span {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 50%;
  background: rgba(83, 3, 16, .3);
  font-size: 15px;
}

.modal-primary-action:hover:not(:disabled) {
  background: linear-gradient(145deg, #ff354a, #e31731);
  box-shadow: 0 15px 34px rgba(237, 27, 47, .35), inset 0 1px 0 rgba(255, 255, 255, .28);
  transform: translateY(-2px);
}

.modal-primary-action:disabled {
  cursor: not-allowed;
  filter: grayscale(.45);
  opacity: .58;
}

@keyframes jobModalBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes jobModalPanelIn {
  from { opacity: 0; transform: translateY(24px) scale(.965); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1000px) {
  .job-row {
    grid-template-columns: 46px minmax(0, 1fr) auto 38px;
  }

  .job-meta {
    display: none;
  }
}

@media (max-width: 800px) {
  .solutions .service-visual {
    top: 58px;
    right: 16px;
    width: 128px;
    height: 106px;
    transform: scale(.88);
    transform-origin: right top;
  }

  .solutions .service-card-intro {
    padding-top: 102px;
  }

  .jobs-style-cta {
    min-width: 198px;
    margin-top: 30px;
  }

  .job-row {
    grid-template-columns: 40px minmax(0, 1fr) 34px;
    gap: 12px;
    padding-block: 16px;
  }

  .job-status {
    grid-column: 2;
    width: max-content;
    min-height: 29px;
    margin-top: -4px;
    padding-inline: 10px;
    font-size: 9px;
  }

  .job-arrow {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .job-modal {
    padding: 12px;
  }

  .job-panel {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    padding: 68px 22px 28px;
    border-radius: 20px;
  }

  .modal-close,
  .modal-secondary-action {
    top: 14px;
    right: 14px;
  }

  .job-panel .eyebrow {
    margin-top: 0;
  }

  .job-panel h2 {
    font-size: clamp(36px, 11vw, 48px);
  }

  .modal-primary-action {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .solutions .service-visual,
  .job-modal,
  .job-panel {
    animation: none;
  }
}

/* Seamless Our people photo rail and full-resolution preview */
.people-gallery {
  position: relative;
  z-index: 6;
  margin-top: -48px;
  padding: 0 0 34px;
  color: #fff;
  background:
    linear-gradient(180deg, transparent 0, rgba(7, 19, 33, .72) 46px, #071321 112px),
    #071321;
}

.people-gallery::before {
  position: absolute;
  top: 38px;
  right: 0;
  left: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(73, 151, 255, .38), rgba(255, 255, 255, .48), rgba(237, 27, 47, .34), transparent);
  box-shadow: 0 0 18px rgba(58, 139, 255, .22);
  opacity: .75;
  animation: peopleGalleryLight 7s ease-in-out infinite alternate;
}

.people-gallery-heading {
  display: flex;
  width: min(1450px, 84vw);
  align-items: baseline;
  justify-content: space-between;
  gap: 22px;
  margin: 0 auto 16px;
  padding-top: 58px;
}

.people-gallery-heading span {
  color: #f04859;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.people-gallery-heading p {
  margin: 0;
  color: #8e9cad;
  font-size: 11px;
}

.people-gallery-viewport {
  overflow: hidden;
  width: 100%;
  padding: 6px 0 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.people-gallery-track {
  display: flex;
  width: max-content;
  gap: 14px;
  padding-inline: 14px;
  animation: peopleGalleryMarquee 42s linear infinite;
  will-change: transform;
}

.people-gallery-viewport:hover .people-gallery-track,
.people-gallery-viewport:focus-within .people-gallery-track {
  animation-play-state: paused;
}

.people-photo-card {
  position: relative;
  width: clamp(190px, 18vw, 285px);
  aspect-ratio: 16 / 10;
  flex: 0 0 auto;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 17px;
  color: #fff;
  background: #0a1727;
  box-shadow: 0 15px 32px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .06);
  cursor: zoom-in;
  transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms cubic-bezier(.2, .75, .2, 1);
}

.people-photo-card::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 46%, rgba(3, 9, 17, .83) 100%);
  pointer-events: none;
}

.people-photo-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--people-photo-position, center);
  filter: saturate(.95) contrast(1.04) brightness(.92);
  transform: scale(1.02);
  transition: filter 360ms ease, transform 520ms cubic-bezier(.2, .75, .2, 1);
}

.people-photo-card > span {
  position: absolute;
  z-index: 2;
  right: 13px;
  bottom: 11px;
  left: 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #edf2f7;
  font-size: 11px;
  font-weight: 720;
}

.people-photo-card b {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .23);
  border-radius: 50%;
  color: #ff5264;
  background: rgba(5, 13, 23, .68);
  font-size: 8px;
}

.people-photo-card:hover,
.people-photo-card:focus-visible {
  border-color: rgba(91, 168, 255, .62);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .32), 0 0 30px rgba(46, 130, 255, .12);
  transform: translateY(-6px);
}

.people-photo-card:hover img,
.people-photo-card:focus-visible img {
  filter: saturate(1.05) contrast(1.02) brightness(1);
  transform: scale(1.075);
}

.culture-copy {
  margin-top: 8px;
}

.people-lightbox {
  position: fixed;
  z-index: 2300;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 7, 13, .9);
  -webkit-backdrop-filter: blur(22px) saturate(115%);
  backdrop-filter: blur(22px) saturate(115%);
  animation: peopleLightboxFade .3s ease both;
}

.people-lightbox-panel {
  position: relative;
  width: min(1180px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 26px;
  background: #071321;
  box-shadow: 0 48px 140px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: peopleLightboxPanelIn .52s cubic-bezier(.2, .78, .2, 1) both;
}

.people-lightbox-image {
  display: grid;
  max-height: calc(100dvh - 150px);
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(45, 110, 191, .11), transparent 46%),
    #030a13;
}

.people-lightbox-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 150px);
  object-fit: contain;
}

.people-lightbox-panel figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 76px;
  padding: 16px 22px;
  color: #fff;
  background: rgba(7, 19, 33, .98);
}

.people-lightbox-panel figcaption span {
  color: #f04a5b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.people-lightbox-panel figcaption strong {
  font-size: 16px;
  font-weight: 650;
}

.people-lightbox-close {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 16px;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  padding: 0 7px 0 15px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 11px;
  color: #fff;
  background: rgba(4, 11, 20, .68);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.people-lightbox-close span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  font-size: 20px;
}

.people-lightbox-close:hover {
  border-color: rgba(255, 255, 255, .5);
  background: rgba(237, 27, 47, .88);
  transform: translateY(-2px);
}

@keyframes peopleGalleryMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 7px)); }
}

@keyframes peopleGalleryLight {
  from { opacity: .35; filter: brightness(.85); }
  to { opacity: .9; filter: brightness(1.18); }
}

@keyframes peopleLightboxFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes peopleLightboxPanelIn {
  from { opacity: 0; transform: translateY(24px) scale(.965); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 800px) {
  .people-gallery {
    margin-top: -20px;
    padding-bottom: 24px;
  }

  .people-gallery-heading {
    width: calc(100% - 46px);
    padding-top: 43px;
  }

  .people-gallery-heading p {
    display: none;
  }

  .people-gallery-viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }

  .people-gallery-track {
    gap: 10px;
    padding-inline: 10px;
    animation-duration: 34s;
  }

  .people-photo-card {
    width: min(68vw, 245px);
    border-radius: 15px;
  }

  .culture-copy {
    margin-top: 8px;
  }

  .people-lightbox {
    padding: 12px;
  }

  .people-lightbox-panel {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 19px;
  }

  .people-lightbox-image,
  .people-lightbox-image img {
    max-height: calc(100dvh - 116px);
  }

  .people-lightbox-panel figcaption {
    min-height: 68px;
    padding: 14px 17px;
  }

  .people-lightbox-close {
    top: 12px;
    right: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .people-gallery-track {
    animation: none;
    will-change: auto;
  }

  .people-gallery-viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
    scroll-snap-type: x mandatory;
  }

  .people-photo-card {
    scroll-snap-align: center;
  }

  .people-gallery::before,
  .people-lightbox,
  .people-lightbox-panel {
    animation: none;
  }
}

/* Supplied award photography for matching Our Group years */
.history-proof-visual.has-photo {
  min-width: 250px;
}

.history-proof-visual.has-photo .history-proof-glow {
  opacity: .82;
}

.history-award-photo {
  position: absolute;
  z-index: 5;
  top: 7px;
  left: 50%;
  display: grid;
  width: min(220px, 92%);
  min-height: 252px;
  grid-template-rows: 205px auto;
  gap: 9px;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  text-align: left;
  cursor: zoom-in;
  transform: translateX(-50%) translateZ(92px) rotateY(-7deg) rotateZ(-1.5deg);
  transform-style: preserve-3d;
  animation: historyAwardPhotoFloat 7.6s ease-in-out infinite alternate;
  transition: transform .65s cubic-bezier(.2,.78,.2,1), filter .4s ease;
}

.history-award-photo:hover,
.history-award-photo:focus-visible {
  filter: brightness(1.06) saturate(1.04);
  transform: translateX(-50%) translateY(-7px) translateZ(118px) rotateY(-2deg) rotateZ(-.5deg);
}

.history-award-photo:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 5px;
  border-radius: 20px;
}

.history-award-photo-frame {
  position: relative;
  display: grid;
  height: 205px;
  overflow: hidden;
  place-items: center;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.035));
  box-shadow:
    0 28px 44px rgba(0,0,0,.42),
    0 0 28px color-mix(in srgb, var(--road-accent) 24%, transparent),
    0 2px 0 rgba(255,255,255,.34) inset,
    -8px 10px 0 rgba(0,0,0,.16);
  transform: translateZ(26px);
}

.history-award-photo-frame::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(112deg, transparent 12%, rgba(255,255,255,.18) 35%, transparent 57%);
  transform: translateX(-105%);
  transition: transform .8s cubic-bezier(.2,.75,.2,1);
  pointer-events: none;
}

.history-award-photo:hover .history-award-photo-frame::after,
.history-award-photo:focus-visible .history-award-photo-frame::after {
  transform: translateX(105%);
}

.history-award-photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: contain;
  background: #071321;
}

.history-award-photo-caption {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  background: rgba(5,13,23,.82);
  box-shadow: 0 14px 26px rgba(0,0,0,.3);
  transform: translateZ(58px);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.history-award-photo-caption b {
  color: var(--road-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
}

.history-award-photo-caption small {
  overflow: hidden;
  color: #dce4ee;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .09em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes historyAwardPhotoFloat {
  from { translate: 0 0; }
  to { translate: 0 -5px; }
}

@media (max-width: 1120px) {
  .history-proof-visual.has-photo {
    min-width: 210px;
  }

  .history-award-photo {
    width: min(210px, 94%);
  }
}

@media (max-width: 900px) {
  .history-proof-visual.has-photo {
    min-width: 0;
  }
}

@media (max-width: 800px) {
  .history-award-photo {
    top: 0;
    width: min(220px, 82vw);
    transform: translateX(-50%) rotateY(-4deg) rotateZ(-1deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .history-award-photo {
    animation: none;
    transition: none;
  }

  .history-award-photo-frame::after {
    transition: none;
  }
}

/* Company milestones: complete historical record with optional supporting photos */
.history-spotlight-wrap {
  margin: 54px clamp(23px, 5.4vw, 104px) 24px;
}

.milestone-showcase {
  --road-accent: #3a94ff;
  position: relative;
  min-height: 500px;
  overflow: hidden;
  isolation: isolate;
  padding: 28px clamp(24px, 2.7vw, 48px) 38px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 30px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--road-accent) 19%, transparent), transparent 31%),
    linear-gradient(135deg, rgba(255,255,255,.075), transparent 35%),
    #071321;
  box-shadow:
    0 34px 82px rgba(7,19,33,.28),
    0 2px 0 rgba(255,255,255,.11) inset,
    0 0 52px color-mix(in srgb, var(--road-accent) 10%, transparent);
  transform-style: preserve-3d;
  animation: milestoneReveal .82s cubic-bezier(.18,.78,.22,1) both;
}

.milestone-showcase::before,
.milestone-showcase::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.milestone-showcase::before {
  inset: 0;
  opacity: .48;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
}

.milestone-showcase::after {
  right: -8%;
  bottom: -49%;
  width: 57%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--road-accent) 20%, transparent);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, color-mix(in srgb, var(--road-accent) 20%, transparent) 0 1px, transparent 1px 36px);
  opacity: .42;
  transform: rotateX(66deg);
}

.milestone-showcase-light {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.milestone-showcase-light i {
  position: absolute;
  top: -65%;
  width: 10%;
  height: 240%;
  opacity: .11;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--road-accent) 40%, white), transparent);
  filter: blur(9px);
  transform: rotate(17deg);
  animation: milestoneLight 9s ease-in-out infinite alternate;
}

.milestone-showcase-light i:first-child { left: 14%; }
.milestone-showcase-light i:last-child { right: 15%; animation-delay: -4.5s; }

.milestone-showcase-meta {
  position: relative;
  z-index: 4;
  display: flex;
  min-height: 52px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.13);
}

.milestone-showcase-meta span,
.milestone-showcase-meta small {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
  line-height: 1.35;
  text-transform: uppercase;
}

.milestone-showcase-meta span {
  max-width: 62%;
  color: var(--road-accent);
}

.milestone-showcase-meta small { color: #9ba8b7; }

.milestone-showcase-body {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(130px,.44fr) minmax(340px,1.2fr) minmax(280px,.9fr);
  grid-template-areas: "year story media";
  gap: clamp(24px, 3vw, 54px);
  align-items: center;
  min-height: 390px;
  transform-style: preserve-3d;
}

.milestone-year {
  grid-area: year;
  color: #fff;
  font-size: clamp(74px, 8.2vw, 138px);
  font-weight: 710;
  line-height: .83;
  letter-spacing: -.075em;
  text-shadow:
    0 14px 36px color-mix(in srgb, var(--road-accent) 31%, transparent),
    0 0 52px color-mix(in srgb, var(--road-accent) 16%, transparent);
  transform: translateZ(55px);
}

.milestone-story {
  grid-area: story;
  padding-block: 30px 24px;
  transform: translateZ(34px);
}

.milestone-proof-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.milestone-proof-label span,
.milestone-proof-label small {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  color: #b8c4d1;
  font-size: 9px;
  font-weight: 820;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

.milestone-proof-label span {
  border-color: color-mix(in srgb, var(--road-accent) 50%, transparent);
  color: var(--road-accent);
  background: color-mix(in srgb, var(--road-accent) 9%, transparent);
}

.milestone-story h3 {
  max-width: 650px;
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(34px, 3.5vw, 58px);
  font-weight: 570;
  letter-spacing: -.052em;
  line-height: .98;
}

.milestone-story > p:not(.milestone-source-note) {
  max-width: 610px;
  margin: 0 0 20px;
  color: #b1bdca;
  font-size: 14px;
  line-height: 1.62;
}

.milestone-awards {
  display: grid;
  gap: 9px;
  max-width: 650px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.milestone-awards li {
  display: grid;
  min-height: 53px;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 11px;
  align-items: center;
  padding: 9px 14px 9px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  color: #edf3f9;
  background: linear-gradient(105deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow: 0 10px 24px rgba(0,0,0,.1);
}

.milestone-awards li > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: var(--road-accent);
  background: color-mix(in srgb, var(--road-accent) 13%, rgba(255,255,255,.04));
}

.milestone-awards svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.milestone-awards strong {
  font-size: 12px;
  font-weight: 680;
  line-height: 1.4;
}

.milestone-source-note {
  margin: 13px 0 0;
  color: #8492a2;
  font-size: 10px;
  line-height: 1.45;
}

.milestone-media {
  position: relative;
  grid-area: media;
  width: 100%;
  min-height: 340px;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.milestone-media-glow {
  position: absolute;
  right: 5%;
  bottom: 5%;
  width: 86%;
  height: 54%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--road-accent) 28%, transparent);
  filter: blur(38px);
  opacity: .7;
  transform: rotateX(69deg) translateZ(-55px);
}

.milestone-photo-button {
  position: absolute;
  z-index: 4;
  inset: 6px 0 auto 50%;
  display: grid;
  width: min(310px, 96%);
  gap: 10px;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  cursor: zoom-in;
  transform: translateX(-50%) translateZ(72px) rotateY(-4deg) rotateZ(-.7deg);
  transform-style: preserve-3d;
  transition: filter .35s ease, transform .65s cubic-bezier(.2,.78,.2,1);
}

.milestone-photo-button:hover,
.milestone-photo-button:focus-visible {
  filter: brightness(1.05) saturate(1.04);
  transform: translateX(-50%) translateY(-7px) translateZ(94px) rotateY(-1deg);
}

.milestone-photo-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 6px;
  border-radius: 20px;
}

.milestone-photo-frame {
  position: relative;
  display: grid;
  height: 275px;
  overflow: hidden;
  place-items: center;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.31);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.025));
  box-shadow:
    0 28px 50px rgba(0,0,0,.42),
    0 0 30px color-mix(in srgb, var(--road-accent) 18%, transparent),
    0 2px 0 rgba(255,255,255,.3) inset;
}

.milestone-photo-frame::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,.16) 39%, transparent 60%);
  transform: translateX(-110%);
  transition: transform .9s cubic-bezier(.2,.75,.2,1);
  pointer-events: none;
}

.milestone-photo-button:hover .milestone-photo-frame::after,
.milestone-photo-button:focus-visible .milestone-photo-frame::after {
  transform: translateX(110%);
}

.milestone-photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: #071321;
  object-fit: contain;
}

.milestone-photo-caption {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: rgba(4,12,21,.82);
  box-shadow: 0 12px 25px rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.milestone-photo-caption b {
  color: var(--road-accent);
  font-size: 11px;
  font-weight: 880;
  letter-spacing: .1em;
}

.milestone-photo-caption small {
  color: #d7e0ea;
  font-size: 8px;
  font-weight: 780;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.milestone-media-plinth {
  position: absolute;
  z-index: 2;
  right: 3%;
  bottom: 3px;
  width: 92%;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(17,28,41,.88), color-mix(in srgb, var(--road-accent) 30%, #1a2430), rgba(5,12,20,.94));
  box-shadow: 0 19px 28px rgba(0,0,0,.36), 0 -1px 0 rgba(255,255,255,.15) inset;
  transform: rotateX(68deg) translateZ(-15px);
}

.milestone-media-plinth i {
  position: absolute;
  inset: 8px 12%;
  border: 1px solid color-mix(in srgb, var(--road-accent) 40%, transparent);
  border-radius: inherit;
}

/* 2015: trophy-led and deliberately concise. */
.milestone-layout-trophy .milestone-showcase-body {
  grid-template-columns: minmax(145px,.5fr) minmax(320px,.9fr) minmax(330px,1.05fr);
}

.milestone-layout-trophy .milestone-photo-button { width: min(300px, 94%); transform: translateX(-50%) translateZ(88px) rotateY(7deg) rotateZ(1deg); }
.milestone-layout-trophy .milestone-photo-frame { height: 310px; }
.milestone-layout-trophy .milestone-story > p:not(.milestone-source-note) { max-width: 470px; }

/* 2021: the certificate leads the reading order. */
.milestone-layout-certificate .milestone-showcase-body {
  grid-template-columns: minmax(330px,1.05fr) minmax(125px,.4fr) minmax(360px,1.15fr);
  grid-template-areas: "media year story";
}

.milestone-layout-certificate .milestone-photo-button { transform: translateX(-50%) translateZ(76px) rotateY(5deg) rotateZ(-1deg); }
.milestone-layout-certificate .milestone-story { padding-left: 10px; }

/* 2022: the certificate bridges the date and the evidence. */
.milestone-layout-split .milestone-showcase-body {
  grid-template-columns: minmax(130px,.42fr) minmax(330px,1.02fr) minmax(350px,1.08fr);
  grid-template-areas: "year media story";
}

.milestone-layout-split .milestone-photo-button { transform: translateX(-50%) translateZ(74px) rotateY(-5deg) rotateZ(1deg); }
.milestone-layout-split .milestone-story { padding-left: 10px; }

/* 2025: a larger, quieter hero composition for the strongest record. */
.milestone-layout-hero {
  min-height: 570px;
  border-color: color-mix(in srgb, var(--road-accent) 45%, rgba(255,255,255,.16));
  background:
    radial-gradient(circle at 82% 26%, rgba(255,194,41,.22), transparent 30%),
    radial-gradient(circle at 18% 72%, rgba(58,148,255,.09), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 36%),
    #06111e;
  box-shadow:
    0 42px 92px rgba(7,19,33,.34),
    0 2px 0 rgba(255,255,255,.13) inset,
    0 0 68px rgba(255,194,41,.14);
}

.milestone-layout-hero .milestone-showcase-body {
  grid-template-columns: minmax(380px,1.12fr) minmax(135px,.37fr) minmax(380px,1.15fr);
  grid-template-areas: "story year media";
  min-height: 450px;
}

.milestone-layout-hero .milestone-year {
  align-self: start;
  padding-top: 55px;
  color: #ffcb46;
}

.milestone-layout-hero .milestone-story h3 { font-size: clamp(46px, 4.6vw, 76px); }
.milestone-layout-hero .milestone-media { min-height: 430px; }
.milestone-layout-hero .milestone-photo-button { width: min(390px, 98%); transform: translateX(-50%) translateZ(100px) rotateY(-3deg); }
.milestone-layout-hero .milestone-photo-frame { height: 365px; border-color: rgba(255,218,120,.45); }

.history-stop:focus-visible {
  outline: 2px solid var(--road-accent);
  outline-offset: -3px;
  border-radius: 18px;
}

@keyframes milestoneReveal {
  from { opacity: .35; transform: translateY(20px) rotateX(2.5deg) scale(.99); }
  to { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
}

@keyframes milestoneLight {
  from { translate: -35px 0; opacity: .05; }
  to { translate: 46px 0; opacity: .14; }
}

@media (max-width: 1180px) {
  .milestone-showcase-body,
  .milestone-layout-trophy .milestone-showcase-body,
  .milestone-layout-certificate .milestone-showcase-body,
  .milestone-layout-split .milestone-showcase-body,
  .milestone-layout-hero .milestone-showcase-body {
    grid-template-columns: minmax(110px,.34fr) minmax(310px,1fr) minmax(250px,.78fr);
    grid-template-areas: "year story media";
    gap: 22px;
  }

  .milestone-layout-hero .milestone-story h3 { font-size: clamp(40px, 4.4vw, 62px); }
  .milestone-layout-hero .milestone-photo-button { width: min(330px, 96%); }
}

@media (max-width: 920px) {
  .milestone-showcase,
  .milestone-layout-hero { min-height: 0; }

  .milestone-showcase-body,
  .milestone-layout-trophy .milestone-showcase-body,
  .milestone-layout-certificate .milestone-showcase-body,
  .milestone-layout-split .milestone-showcase-body,
  .milestone-layout-hero .milestone-showcase-body {
    grid-template-columns: minmax(100px,.3fr) minmax(0,1fr);
    grid-template-areas:
      "year story"
      "media media";
    min-height: 0;
  }

  .milestone-layout-hero .milestone-year { align-self: center; padding-top: 0; }
  .milestone-media,
  .milestone-layout-hero .milestone-media { width: min(430px, 100%); min-height: 390px; justify-self: center; }
  .milestone-photo-button,
  .milestone-layout-trophy .milestone-photo-button,
  .milestone-layout-certificate .milestone-photo-button,
  .milestone-layout-split .milestone-photo-button,
  .milestone-layout-hero .milestone-photo-button { width: min(340px, 92%); transform: translateX(-50%) translateZ(55px) rotateY(-2deg); }
  .milestone-layout-hero .milestone-photo-frame { height: 320px; }
}

@media (max-width: 680px) {
  .history-spotlight-wrap { margin: 28px 16px 15px; }

  .milestone-showcase,
  .milestone-layout-hero {
    padding: 20px 18px 27px;
    border-radius: 23px;
  }

  .milestone-showcase-meta { min-height: 45px; padding-bottom: 14px; }
  .milestone-showcase-meta span,
  .milestone-showcase-meta small { font-size: 9px; }

  .milestone-showcase-body,
  .milestone-layout-trophy .milestone-showcase-body,
  .milestone-layout-certificate .milestone-showcase-body,
  .milestone-layout-split .milestone-showcase-body,
  .milestone-layout-hero .milestone-showcase-body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "year"
      "story"
      "media";
    gap: 0;
  }

  .milestone-year,
  .milestone-layout-hero .milestone-year {
    padding-top: 28px;
    font-size: clamp(72px, 24vw, 102px);
  }

  .milestone-story,
  .milestone-layout-certificate .milestone-story,
  .milestone-layout-split .milestone-story { padding: 28px 0 18px; }
  .milestone-story h3,
  .milestone-layout-hero .milestone-story h3 { font-size: clamp(34px, 10.5vw, 46px); }
  .milestone-story > p:not(.milestone-source-note) { font-size: 13px; }
  .milestone-awards strong { font-size: 11px; }

  .milestone-media,
  .milestone-layout-hero .milestone-media { min-height: 330px; }
  .milestone-photo-button,
  .milestone-layout-trophy .milestone-photo-button,
  .milestone-layout-certificate .milestone-photo-button,
  .milestone-layout-split .milestone-photo-button,
  .milestone-layout-hero .milestone-photo-button { width: min(290px, 90vw); transform: translateX(-50%) rotateY(-1deg); }
  .milestone-photo-frame,
  .milestone-layout-trophy .milestone-photo-frame,
  .milestone-layout-hero .milestone-photo-frame { height: 260px; }
  .milestone-media-plinth { right: 6%; width: 88%; }
}

@media (prefers-reduced-motion: reduce) {
  .milestone-showcase,
  .milestone-showcase-light i { animation: none; }

  .milestone-photo-button,
  .milestone-photo-frame::after { transition: none; }
}

/* Complete milestone visual system: real photos where supplied, icon scenes elsewhere */
.milestone-awards li {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.milestone-record-icon {
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

.milestone-awards li > small {
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--road-accent) 38%, transparent);
  border-radius: 999px;
  color: var(--road-accent);
  background: color-mix(in srgb, var(--road-accent) 8%, transparent);
  font-size: 8px;
  font-weight: 820;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
}

.milestone-awards li.has-photo-record {
  border-color: color-mix(in srgb, var(--road-accent) 34%, rgba(255,255,255,.14));
  background: linear-gradient(105deg, color-mix(in srgb, var(--road-accent) 11%, rgba(255,255,255,.06)), rgba(255,255,255,.025));
}

.milestone-photo-stack {
  position: absolute;
  z-index: 4;
  inset: 6px 0 auto;
  display: grid;
  justify-items: center;
  perspective: 1200px;
}

.milestone-photo-stack .milestone-photo-button,
.milestone-layout-trophy .milestone-photo-stack .milestone-photo-button,
.milestone-layout-certificate .milestone-photo-stack .milestone-photo-button,
.milestone-layout-split .milestone-photo-stack .milestone-photo-button,
.milestone-layout-hero .milestone-photo-stack .milestone-photo-button {
  position: relative;
  inset: auto;
  left: auto;
  width: min(320px, 96%);
  transform: translateZ(78px) rotateY(-4deg) rotateZ(-.7deg);
}

.milestone-layout-trophy .milestone-photo-stack .milestone-photo-button {
  width: min(300px, 94%);
  transform: translateZ(88px) rotateY(7deg) rotateZ(1deg);
}

.milestone-layout-certificate .milestone-photo-stack .milestone-photo-button {
  transform: translateZ(76px) rotateY(5deg) rotateZ(-1deg);
}

.milestone-layout-split .milestone-photo-stack .milestone-photo-button {
  transform: translateZ(74px) rotateY(-5deg) rotateZ(1deg);
}

.milestone-layout-hero .milestone-photo-stack .milestone-photo-button {
  width: min(390px, 98%);
  transform: translateZ(100px) rotateY(-3deg);
}

.milestone-photo-stack .milestone-photo-button:hover,
.milestone-photo-stack .milestone-photo-button:focus-visible,
.milestone-layout-trophy .milestone-photo-stack .milestone-photo-button:hover,
.milestone-layout-certificate .milestone-photo-stack .milestone-photo-button:hover,
.milestone-layout-split .milestone-photo-stack .milestone-photo-button:hover,
.milestone-layout-hero .milestone-photo-stack .milestone-photo-button:hover {
  transform: translateY(-7px) translateZ(94px) rotateY(-1deg);
}

.milestone-icon-stage {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(300px, 94%);
  min-height: 282px;
  place-items: center;
  perspective: 900px;
  transform: translate(-50%, -50%) translateZ(65px);
  transform-style: preserve-3d;
}

.milestone-icon-orbit {
  position: absolute;
  inset: 6% 0 0;
  border: 1px solid color-mix(in srgb, var(--road-accent) 30%, transparent);
  border-radius: 50%;
  opacity: .72;
  transform: rotateX(68deg) translateZ(-32px);
}

.milestone-icon-orbit::before,
.milestone-icon-orbit::after,
.milestone-icon-orbit i {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--road-accent) 24%, transparent);
  border-radius: 50%;
  content: "";
}

.milestone-icon-orbit::before { inset: 16%; }
.milestone-icon-orbit::after { inset: 33%; }
.milestone-icon-orbit i:nth-child(1) { inset: 47%; background: var(--road-accent); box-shadow: 0 0 24px var(--road-accent); }
.milestone-icon-orbit i:nth-child(2) { top: 15%; right: 20%; width: 8px; height: 8px; background: #fff; box-shadow: 0 0 18px #fff; }
.milestone-icon-orbit i:nth-child(3) { bottom: 18%; left: 12%; width: 6px; height: 6px; background: var(--road-accent); box-shadow: 0 0 15px var(--road-accent); }

.milestone-icon-tile {
  position: relative;
  display: grid;
  width: 185px;
  min-height: 172px;
  place-content: center;
  gap: 13px;
  border: 1px solid color-mix(in srgb, var(--road-accent) 54%, rgba(255,255,255,.28));
  border-radius: 36px;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(255,255,255,.2), transparent 37%),
    color-mix(in srgb, var(--road-accent) 22%, #0a1726);
  box-shadow:
    0 34px 54px rgba(0,0,0,.42),
    0 0 42px color-mix(in srgb, var(--road-accent) 24%, transparent),
    0 2px 0 rgba(255,255,255,.24) inset;
  transform: rotateX(7deg) rotateY(-11deg) rotateZ(2deg) translateZ(55px);
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.78,.2,1), box-shadow .35s ease;
}

.milestone-icon-tile::after {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 27px;
  content: "";
}

.milestone-icon-tile b {
  color: #fff;
  font-size: 68px;
  font-weight: 540;
  line-height: .85;
  text-shadow: 0 8px 25px color-mix(in srgb, var(--road-accent) 65%, transparent);
  transform: translateZ(34px);
}

.milestone-icon-tile small {
  color: color-mix(in srgb, var(--road-accent) 75%, white);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .18em;
  text-transform: uppercase;
  transform: translateZ(28px);
}

.milestone-icon-year {
  position: absolute;
  right: 4%;
  bottom: 5%;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 999px;
  color: #eef4fa;
  background: rgba(4,12,21,.76);
  box-shadow: 0 12px 26px rgba(0,0,0,.28);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .18em;
  transform: translateZ(68px) rotate(-3deg);
}

.milestone-icon-stage:hover .milestone-icon-tile {
  box-shadow:
    0 40px 62px rgba(0,0,0,.44),
    0 0 52px color-mix(in srgb, var(--road-accent) 30%, transparent),
    0 2px 0 rgba(255,255,255,.27) inset;
  transform: rotateX(3deg) rotateY(-4deg) rotateZ(1deg) translateY(-6px) translateZ(68px);
}

.milestone-layout-icon .milestone-showcase-body {
  grid-template-columns: minmax(130px,.44fr) minmax(360px,1.25fr) minmax(270px,.82fr);
}

.milestone-layout-icon .milestone-media {
  min-height: 320px;
}

.milestone-visual-icon .milestone-media-plinth {
  right: 8%;
  bottom: 12px;
  width: 84%;
}

@media (max-width: 1180px) {
  .milestone-layout-icon .milestone-showcase-body {
    grid-template-columns: minmax(110px,.34fr) minmax(310px,1fr) minmax(250px,.78fr);
  }
}

@media (max-width: 920px) {
  .milestone-layout-icon .milestone-showcase-body {
    grid-template-columns: minmax(100px,.3fr) minmax(0,1fr);
    grid-template-areas:
      "year story"
      "media media";
  }

  .milestone-icon-stage { width: min(360px, 100%); }
}

@media (max-width: 680px) {
  .milestone-layout-icon .milestone-showcase-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "year"
      "story"
      "media";
  }

  .milestone-awards li {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .milestone-awards li > small {
    grid-column: 2;
    justify-self: start;
    margin-top: -2px;
  }

  .milestone-icon-stage {
    width: min(290px, 86vw);
    min-height: 260px;
  }

  .milestone-icon-tile {
    width: 165px;
    min-height: 154px;
    border-radius: 31px;
  }

  .milestone-icon-tile b { font-size: 58px; }
  .milestone-visual-icon .milestone-media { min-height: 285px; }

  .milestone-photo-stack .milestone-photo-button,
  .milestone-layout-trophy .milestone-photo-stack .milestone-photo-button,
  .milestone-layout-certificate .milestone-photo-stack .milestone-photo-button,
  .milestone-layout-split .milestone-photo-stack .milestone-photo-button,
  .milestone-layout-hero .milestone-photo-stack .milestone-photo-button {
    width: min(290px, 90vw);
    transform: rotateY(-1deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .milestone-icon-tile { transition: none; }
  .milestone-icon-stage:hover .milestone-icon-tile { transform: rotateX(7deg) rotateY(-11deg) rotateZ(2deg) translateZ(55px); }
}

/* Milestone hierarchy polish: title-led, image-forward and intentionally varied. */
.history-spotlight-wrap {
  margin-top: 42px;
  margin-bottom: 20px;
}

.milestone-showcase,
.milestone-layout-hero {
  min-height: 540px;
  padding: 24px clamp(25px, 3vw, 50px) 32px;
  border-color: rgba(255, 255, 255, .12);
  border-radius: 28px;
  box-shadow:
    0 28px 72px rgba(7, 19, 33, .26),
    0 1px 0 rgba(255, 255, 255, .11) inset,
    0 0 44px color-mix(in srgb, var(--road-accent) 8%, transparent);
}

.milestone-showcase-meta {
  min-height: 44px;
  padding-bottom: 15px;
}

.milestone-showcase-meta span,
.milestone-showcase-meta small {
  font-size: 10px;
  letter-spacing: .15em;
}

.milestone-showcase-body,
.milestone-layout-icon .milestone-showcase-body,
.milestone-layout-trophy .milestone-showcase-body,
.milestone-layout-split .milestone-showcase-body,
.milestone-layout-hero .milestone-showcase-body {
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "year media"
    "story media";
  gap: 0 clamp(32px, 4.4vw, 76px);
  align-items: start;
  min-height: 438px;
  padding-top: 24px;
}

.milestone-year,
.milestone-layout-hero .milestone-year {
  align-self: end;
  margin: 0 0 15px;
  padding: 0;
  color: color-mix(in srgb, var(--road-accent) 82%, white);
  font-size: clamp(33px, 3.45vw, 54px);
  font-weight: 720;
  line-height: 1;
  letter-spacing: -.045em;
  text-shadow: 0 10px 30px color-mix(in srgb, var(--road-accent) 24%, transparent);
}

.milestone-story,
.milestone-layout-certificate .milestone-story,
.milestone-layout-split .milestone-story {
  align-self: start;
  padding: 0 0 10px;
  transform: translateZ(38px);
}

.milestone-proof-label {
  gap: 7px;
  margin-bottom: 13px;
}

.milestone-proof-label span,
.milestone-proof-label small {
  padding: 6px 9px;
  font-size: 8px;
  letter-spacing: .11em;
}

.milestone-story h3,
.milestone-layout-hero .milestone-story h3 {
  max-width: 720px;
  margin-bottom: 14px;
  font-size: clamp(46px, 4.7vw, 74px);
  font-weight: 620;
  line-height: .96;
  letter-spacing: -.055em;
}

.milestone-story > p:not(.milestone-source-note) {
  max-width: 650px;
  margin-bottom: 16px;
  color: #bac5d0;
  font-size: 15px;
  line-height: 1.58;
}

.milestone-awards {
  gap: 0;
  max-width: 680px;
  border-bottom: 1px solid rgba(255, 255, 255, .11);
}

.milestone-awards li,
.milestone-awards li.has-photo-record {
  min-height: 47px;
  padding: 9px 3px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .11);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.milestone-awards li.has-photo-record {
  background: linear-gradient(90deg, color-mix(in srgb, var(--road-accent) 10%, transparent), transparent 72%);
}

.milestone-awards li > span {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.milestone-awards strong {
  font-size: 12px;
  line-height: 1.45;
}

.milestone-source-note {
  max-width: 630px;
  margin-top: 11px;
  font-size: 9px;
  line-height: 1.5;
}

.milestone-media,
.milestone-layout-icon .milestone-media,
.milestone-layout-hero .milestone-media {
  align-self: stretch;
  min-height: 438px;
}

.milestone-media-glow {
  right: 0;
  bottom: 2%;
  width: 100%;
  height: 62%;
  opacity: .55;
  filter: blur(45px);
}

.milestone-photo-stack {
  inset: 0;
  align-content: center;
}

.milestone-photo-stack .milestone-photo-button,
.milestone-layout-trophy .milestone-photo-stack .milestone-photo-button,
.milestone-layout-certificate .milestone-photo-stack .milestone-photo-button,
.milestone-layout-split .milestone-photo-stack .milestone-photo-button,
.milestone-layout-hero .milestone-photo-stack .milestone-photo-button {
  display: block;
  width: min(420px, 100%);
  transform: translateZ(82px) rotateY(-2.5deg) rotateZ(-.35deg);
}

.milestone-photo-stack .milestone-photo-button:hover,
.milestone-photo-stack .milestone-photo-button:focus-visible,
.milestone-layout-trophy .milestone-photo-stack .milestone-photo-button:hover,
.milestone-layout-certificate .milestone-photo-stack .milestone-photo-button:hover,
.milestone-layout-split .milestone-photo-stack .milestone-photo-button:hover,
.milestone-layout-hero .milestone-photo-stack .milestone-photo-button:hover {
  transform: translateY(-6px) translateZ(98px) rotateY(-.5deg);
}

.milestone-photo-frame,
.milestone-layout-trophy .milestone-photo-frame,
.milestone-layout-hero .milestone-photo-frame {
  height: 392px;
  padding: 0;
  border-color: rgba(255, 255, 255, .12);
  border-radius: 19px;
  background: rgba(5, 13, 23, .45);
  box-shadow:
    0 34px 70px rgba(0, 0, 0, .4),
    0 0 34px color-mix(in srgb, var(--road-accent) 13%, transparent);
}

.milestone-photo-frame img {
  border-radius: 18px;
}

.milestone-photo-caption {
  position: absolute;
  z-index: 3;
  right: 13px;
  bottom: 13px;
  left: 13px;
  min-height: 42px;
  padding: 8px 11px;
  border-color: rgba(255, 255, 255, .14);
  border-radius: 11px;
  background: rgba(4, 12, 21, .76);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
}

.milestone-media-plinth {
  right: 1%;
  bottom: -2px;
  width: 98%;
  height: 26px;
  opacity: .72;
}

.milestone-icon-stage {
  width: min(350px, 100%);
  min-height: 350px;
}

.milestone-icon-tile {
  width: 196px;
  min-height: 182px;
  border-color: color-mix(in srgb, var(--road-accent) 38%, rgba(255, 255, 255, .18));
  box-shadow:
    0 30px 58px rgba(0, 0, 0, .35),
    0 0 38px color-mix(in srgb, var(--road-accent) 18%, transparent),
    0 1px 0 rgba(255, 255, 255, .2) inset;
}

/* 2015: tall trophy takes the visual lead. */
.milestone-layout-trophy .milestone-showcase-body {
  grid-template-columns: minmax(0, .92fr) minmax(400px, 1.08fr);
}

.milestone-layout-trophy .milestone-photo-stack .milestone-photo-button {
  width: min(435px, 100%);
  transform: translateZ(92px) rotateY(3deg) rotateZ(.3deg);
}

.milestone-layout-trophy .milestone-photo-frame { height: 414px; }

/* 2021: reverse the composition so the certificate is encountered first. */
.milestone-layout-certificate .milestone-showcase-body {
  grid-template-columns: minmax(390px, .96fr) minmax(0, 1.04fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "media year"
    "media story";
}

.milestone-layout-certificate .milestone-photo-stack .milestone-photo-button {
  width: min(430px, 100%);
  transform: translateZ(86px) rotateY(2deg) rotateZ(-.35deg);
}

.milestone-layout-certificate .milestone-photo-frame { height: 405px; }

/* 2022: title and evidence sit side by side with the date above the image. */
.milestone-layout-split .milestone-showcase-body {
  grid-template-columns: minmax(365px, .94fr) minmax(0, 1.06fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "year story"
    "media story";
  column-gap: clamp(38px, 5vw, 82px);
}

.milestone-layout-split .milestone-year { margin-bottom: 8px; }
.milestone-layout-split .milestone-media { min-height: 365px; }
.milestone-layout-split .milestone-photo-stack .milestone-photo-button { width: min(390px, 100%); }
.milestone-layout-split .milestone-photo-frame { height: 345px; }
.milestone-layout-split .milestone-story { padding-top: 32px; }

/* 2025: retain the strongest, quietest hero treatment. */
.milestone-layout-hero {
  min-height: 600px;
  box-shadow:
    0 38px 86px rgba(7, 19, 33, .32),
    0 1px 0 rgba(255, 255, 255, .12) inset,
    0 0 58px rgba(255, 194, 41, .12);
}

.milestone-layout-hero .milestone-showcase-body {
  grid-template-columns: minmax(0, .88fr) minmax(430px, 1.12fr);
  min-height: 500px;
}

.milestone-layout-hero .milestone-story h3 { font-size: clamp(54px, 5.2vw, 82px); }
.milestone-layout-hero .milestone-media { min-height: 500px; }
.milestone-layout-hero .milestone-photo-stack .milestone-photo-button { width: min(470px, 100%); }
.milestone-layout-hero .milestone-photo-frame { height: 455px; }

/* Subtle variation for icon-led years without changing their structure. */
.milestone-layout-icon.tone-green .milestone-icon-tile { transform: rotateX(6deg) rotateY(9deg) rotateZ(-1.5deg) translateZ(55px); }
.milestone-layout-icon.tone-red .milestone-icon-tile { transform: rotateX(8deg) rotateY(-7deg) rotateZ(-2deg) translateZ(55px); }
.milestone-layout-icon.tone-amber .milestone-icon-tile { transform: rotateX(5deg) rotateY(7deg) rotateZ(2deg) translateZ(55px); }

@media (max-width: 1180px) {
  .milestone-showcase-body,
  .milestone-layout-icon .milestone-showcase-body,
  .milestone-layout-trophy .milestone-showcase-body,
  .milestone-layout-certificate .milestone-showcase-body,
  .milestone-layout-split .milestone-showcase-body,
  .milestone-layout-hero .milestone-showcase-body {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .86fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "year media"
      "story media";
    gap: 0 30px;
  }

  .milestone-photo-stack .milestone-photo-button,
  .milestone-layout-trophy .milestone-photo-stack .milestone-photo-button,
  .milestone-layout-certificate .milestone-photo-stack .milestone-photo-button,
  .milestone-layout-split .milestone-photo-stack .milestone-photo-button,
  .milestone-layout-hero .milestone-photo-stack .milestone-photo-button { width: min(360px, 100%); }

  .milestone-photo-frame,
  .milestone-layout-trophy .milestone-photo-frame,
  .milestone-layout-certificate .milestone-photo-frame,
  .milestone-layout-split .milestone-photo-frame,
  .milestone-layout-hero .milestone-photo-frame { height: 370px; }
}

@media (max-width: 920px) {
  .milestone-showcase,
  .milestone-layout-hero { min-height: 0; }

  .milestone-showcase-body,
  .milestone-layout-icon .milestone-showcase-body,
  .milestone-layout-trophy .milestone-showcase-body,
  .milestone-layout-certificate .milestone-showcase-body,
  .milestone-layout-split .milestone-showcase-body,
  .milestone-layout-hero .milestone-showcase-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "year"
      "story"
      "media";
    min-height: 0;
    padding-top: 22px;
  }

  .milestone-year,
  .milestone-layout-hero .milestone-year {
    align-self: start;
    margin-bottom: 13px;
    font-size: clamp(31px, 6vw, 45px);
  }

  .milestone-story,
  .milestone-layout-split .milestone-story { padding-top: 0; }
  .milestone-story h3,
  .milestone-layout-hero .milestone-story h3 { font-size: clamp(43px, 7.4vw, 64px); }
  .milestone-media,
  .milestone-layout-icon .milestone-media,
  .milestone-layout-split .milestone-media,
  .milestone-layout-hero .milestone-media {
    width: min(520px, 100%);
    min-height: 420px;
    justify-self: center;
  }
}

@media (max-width: 680px) {
  .history-spotlight-wrap { margin: 28px 16px 15px; }

  .milestone-showcase,
  .milestone-layout-hero {
    padding: 18px 18px 22px;
    border-radius: 22px;
  }

  .milestone-showcase-body,
  .milestone-layout-icon .milestone-showcase-body,
  .milestone-layout-trophy .milestone-showcase-body,
  .milestone-layout-certificate .milestone-showcase-body,
  .milestone-layout-split .milestone-showcase-body,
  .milestone-layout-hero .milestone-showcase-body { padding-top: 18px; }

  .milestone-year,
  .milestone-layout-hero .milestone-year {
    margin-bottom: 11px;
    font-size: 31px;
  }

  .milestone-story h3,
  .milestone-layout-hero .milestone-story h3 {
    font-size: clamp(37px, 11.2vw, 48px);
    line-height: .98;
  }

  .milestone-story > p:not(.milestone-source-note) { font-size: 13px; }
  .milestone-awards strong { font-size: 11px; }

  .milestone-media,
  .milestone-layout-icon .milestone-media,
  .milestone-layout-split .milestone-media,
  .milestone-layout-hero .milestone-media { min-height: 350px; }

  .milestone-photo-stack .milestone-photo-button,
  .milestone-layout-trophy .milestone-photo-stack .milestone-photo-button,
  .milestone-layout-certificate .milestone-photo-stack .milestone-photo-button,
  .milestone-layout-split .milestone-photo-stack .milestone-photo-button,
  .milestone-layout-hero .milestone-photo-stack .milestone-photo-button {
    width: min(310px, 88vw);
    transform: none;
  }

  .milestone-photo-frame,
  .milestone-layout-trophy .milestone-photo-frame,
  .milestone-layout-certificate .milestone-photo-frame,
  .milestone-layout-split .milestone-photo-frame,
  .milestone-layout-hero .milestone-photo-frame { height: 325px; }

  .milestone-icon-stage {
    width: min(300px, 86vw);
    min-height: 305px;
  }

  .milestone-icon-tile {
    width: 170px;
    min-height: 158px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .milestone-layout-icon.tone-green .milestone-icon-tile,
  .milestone-layout-icon.tone-red .milestone-icon-tile,
  .milestone-layout-icon.tone-amber .milestone-icon-tile { transition: none; }
}

/* Official milestone photography: preserve every supplied frame and trophy edge. */
.milestone-photo-stack .milestone-photo-button,
.milestone-layout-trophy .milestone-photo-stack .milestone-photo-button,
.milestone-layout-certificate .milestone-photo-stack .milestone-photo-button,
.milestone-layout-split .milestone-photo-stack .milestone-photo-button,
.milestone-layout-hero .milestone-photo-stack .milestone-photo-button {
  display: grid;
  gap: 8px;
  align-content: center;
}

.milestone-photo-frame,
.milestone-layout-trophy .milestone-photo-frame,
.milestone-layout-certificate .milestone-photo-frame,
.milestone-layout-split .milestone-photo-frame,
.milestone-layout-hero .milestone-photo-frame {
  width: 100%;
  height: auto;
  min-height: 0;
  padding: clamp(9px, 1.1vw, 14px);
  border-color: rgba(255, 255, 255, .1);
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--road-accent) 9%, transparent), transparent 64%),
    rgba(4, 12, 21, .5);
}

.milestone-photo-frame img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 430px;
  border-radius: 12px;
  object-fit: contain;
  object-position: center;
}

.milestone-layout-trophy .milestone-photo-frame img { max-height: 455px; }
.milestone-layout-certificate .milestone-photo-frame img { max-height: 390px; }
.milestone-layout-split .milestone-photo-frame img { max-height: 420px; }
.milestone-layout-hero .milestone-photo-frame img { max-height: 485px; }

.milestone-photo-caption {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  min-height: 34px;
  padding: 5px 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (max-width: 680px) {
  .milestone-photo-frame,
  .milestone-layout-trophy .milestone-photo-frame,
  .milestone-layout-certificate .milestone-photo-frame,
  .milestone-layout-split .milestone-photo-frame,
  .milestone-layout-hero .milestone-photo-frame {
    height: auto;
    padding: 9px;
  }

  .milestone-photo-frame img,
  .milestone-layout-trophy .milestone-photo-frame img,
  .milestone-layout-certificate .milestone-photo-frame img,
  .milestone-layout-split .milestone-photo-frame img,
  .milestone-layout-hero .milestone-photo-frame img { max-height: 365px; }
}

/* Compact milestone viewport: keep the spotlight and timeline visible together. */
@media (min-width: 921px) {
  .history {
    padding: clamp(34px, 4.2vh, 48px) 0 clamp(28px, 3.5vh, 40px);
  }

  .history-heading {
    grid-template-columns: minmax(130px, .42fr) minmax(0, 2.58fr);
    gap: 2.4vw;
    padding-inline: 6.5vw;
  }

  .history-heading .overline { margin-bottom: 6px; }

  .history-heading h2 {
    max-width: 820px;
    font-size: clamp(34px, 3.15vw, 49px);
    line-height: 1;
  }

  .history-spotlight-wrap {
    margin: clamp(15px, 1.8vh, 20px) 6.5vw 8px;
  }

  .milestone-showcase,
  .milestone-layout-hero {
    min-height: 0;
    padding: 15px clamp(22px, 2.5vw, 38px) 18px;
    border-radius: 24px;
  }

  .milestone-showcase-meta {
    min-height: 32px;
    padding-bottom: 9px;
  }

  .milestone-showcase-meta span,
  .milestone-showcase-meta small { font-size: 9px; }

  .milestone-showcase-body,
  .milestone-layout-icon .milestone-showcase-body,
  .milestone-layout-trophy .milestone-showcase-body,
  .milestone-layout-certificate .milestone-showcase-body,
  .milestone-layout-split .milestone-showcase-body,
  .milestone-layout-hero .milestone-showcase-body {
    min-height: 318px;
    padding-top: 11px;
    column-gap: clamp(24px, 3vw, 48px);
  }

  .milestone-year,
  .milestone-layout-hero .milestone-year {
    margin-bottom: 8px;
    font-size: clamp(29px, 2.8vw, 43px);
  }

  .milestone-layout-hero .milestone-year {
    align-self: end;
    padding-top: 0;
  }

  .milestone-proof-label { margin-bottom: 8px; }

  .milestone-proof-label span,
  .milestone-proof-label small {
    padding: 5px 8px;
    font-size: 7px;
  }

  .milestone-story,
  .milestone-layout-certificate .milestone-story,
  .milestone-layout-split .milestone-story {
    padding-top: 0;
    padding-bottom: 5px;
  }

  .milestone-story h3,
  .milestone-layout-hero .milestone-story h3 {
    margin-bottom: 8px;
    font-size: clamp(34px, 3.65vw, 56px);
    line-height: .98;
  }

  .milestone-story > p:not(.milestone-source-note) {
    margin-bottom: 9px;
    font-size: 13px;
    line-height: 1.48;
  }

  .milestone-awards li,
  .milestone-awards li.has-photo-record {
    min-height: 38px;
    padding-block: 5px;
  }

  .milestone-awards li > span {
    width: 27px;
    height: 27px;
  }

  .milestone-awards strong { font-size: 11px; }

  .milestone-source-note {
    margin-top: 6px;
    font-size: 8px;
  }

  .milestone-media,
  .milestone-layout-icon .milestone-media,
  .milestone-layout-trophy .milestone-media,
  .milestone-layout-certificate .milestone-media,
  .milestone-layout-split .milestone-media,
  .milestone-layout-hero .milestone-media {
    min-height: 318px;
  }

  .milestone-photo-frame img,
  .milestone-layout-trophy .milestone-photo-frame img,
  .milestone-layout-certificate .milestone-photo-frame img,
  .milestone-layout-split .milestone-photo-frame img,
  .milestone-layout-hero .milestone-photo-frame img { max-height: 292px; }

  .milestone-layout-trophy .milestone-photo-stack .milestone-photo-button {
    width: min(330px, 100%);
  }

  .milestone-layout-certificate .milestone-photo-stack .milestone-photo-button {
    width: min(320px, 100%);
  }

  .milestone-layout-split .milestone-photo-stack .milestone-photo-button {
    width: min(330px, 100%);
  }

  .milestone-layout-hero .milestone-photo-stack .milestone-photo-button {
    width: min(350px, 100%);
  }

  .milestone-photo-caption {
    min-height: 27px;
    padding-top: 2px;
  }

  .milestone-photo-caption small { font-size: 7px; }

  .milestone-icon-stage {
    min-height: 290px;
    transform: scale(.88);
  }

  .history-road-route,
  .history-stop { height: 190px; }

  .history-road-route {
    padding-inline: max(23px, calc(50vw - 72px));
  }

  .history-road-route::after {
    top: 88px;
    height: 60px;
  }

  .history-road-surface {
    top: 67px;
    height: 55px;
  }

  .history-stop.is-upper .history-stop-label { top: 0; }
  .history-stop.is-lower .history-stop-label { top: 137px; }
  .history-stop.is-upper .history-stop-stem { top: 47px; height: 28px; }
  .history-stop.is-lower .history-stop-stem { top: 113px; height: 22px; }

  .history-stop-node {
    top: 70px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .history-stop.is-active .history-stop-node {
    transform: translateX(-50%) translateZ(54px) rotateX(-8deg) rotate(2deg) scale(1.13);
  }

  .history-stop-label time { font-size: 18px; }
  .history-stop.is-active .history-stop-label time { font-size: 20px; }
  .history-progress { margin-top: 3px; }
  .history-hint { margin-top: 3px; }
}

@media (min-width: 921px) and (max-height: 820px) {
  .history { padding-block: 28px 26px; }
  .history-heading h2 { font-size: clamp(32px, 3vw, 44px); }
  .history-spotlight-wrap { margin-top: 12px; }

  .milestone-showcase-body,
  .milestone-layout-icon .milestone-showcase-body,
  .milestone-layout-trophy .milestone-showcase-body,
  .milestone-layout-certificate .milestone-showcase-body,
  .milestone-layout-split .milestone-showcase-body,
  .milestone-layout-hero .milestone-showcase-body,
  .milestone-media,
  .milestone-layout-icon .milestone-media,
  .milestone-layout-trophy .milestone-media,
  .milestone-layout-certificate .milestone-media,
  .milestone-layout-split .milestone-media,
  .milestone-layout-hero .milestone-media { min-height: 286px; }

  .milestone-photo-frame img,
  .milestone-layout-trophy .milestone-photo-frame img,
  .milestone-layout-certificate .milestone-photo-frame img,
  .milestone-layout-split .milestone-photo-frame img,
  .milestone-layout-hero .milestone-photo-frame img { max-height: 258px; }

  .history-road-route,
  .history-stop { height: 172px; }

  .history-road-route::after { top: 80px; }
  .history-road-surface { top: 59px; }
  .history-stop-node { top: 62px; }
  .history-stop.is-upper .history-stop-stem { height: 20px; }
  .history-stop.is-lower .history-stop-label { top: 126px; }
  .history-stop.is-lower .history-stop-stem { top: 105px; height: 19px; }
}

/* Premium milestone objects: real cutouts and icons share one floating language. */
.milestone-photo-stack {
  inset: 0;
  align-content: center;
  overflow: visible;
}

.milestone-photo-stack .milestone-photo-button,
.milestone-layout-trophy .milestone-photo-stack .milestone-photo-button,
.milestone-layout-certificate .milestone-photo-stack .milestone-photo-button,
.milestone-layout-split .milestone-photo-stack .milestone-photo-button,
.milestone-layout-hero .milestone-photo-stack .milestone-photo-button {
  display: grid;
  width: min(420px, 100%);
  min-height: 0;
  place-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translateZ(82px);
  animation: milestoneObjectFloat 6.8s ease-in-out infinite;
}

.milestone-photo-stack .milestone-photo-button:hover,
.milestone-photo-stack .milestone-photo-button:focus-visible,
.milestone-layout-trophy .milestone-photo-stack .milestone-photo-button:hover,
.milestone-layout-certificate .milestone-photo-stack .milestone-photo-button:hover,
.milestone-layout-split .milestone-photo-stack .milestone-photo-button:hover,
.milestone-layout-hero .milestone-photo-stack .milestone-photo-button:hover {
  filter: brightness(1.035) saturate(1.02);
  transform: translateY(-5px) translateZ(96px) scale(1.015);
}

.milestone-photo-stack .milestone-photo-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--road-accent) 72%, white);
  outline-offset: 8px;
  border-radius: 4px;
}

.milestone-photo-object {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(306px, 34vh);
  object-fit: contain;
  object-position: center;
  filter:
    drop-shadow(0 26px 24px rgba(0, 0, 0, .34))
    drop-shadow(0 0 24px color-mix(in srgb, var(--road-accent) 18%, transparent));
}

.milestone-layout-trophy .milestone-photo-object {
  max-height: min(322px, 36vh);
}

.milestone-layout-certificate .milestone-photo-object {
  max-height: min(286px, 32vh);
}

.milestone-layout-split .milestone-photo-object {
  max-height: min(304px, 34vh);
}

.milestone-layout-hero .milestone-photo-object {
  max-height: min(322px, 36vh);
  filter:
    drop-shadow(0 30px 30px rgba(0, 0, 0, .4))
    drop-shadow(0 0 34px rgba(255, 194, 41, .2));
}

.milestone-photo-caption {
  position: static;
  display: flex;
  width: 100%;
  min-height: 22px;
  justify-content: center;
  gap: 9px;
  padding: 1px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.milestone-photo-caption b { font-size: 9px; }
.milestone-photo-caption small { color: #aebac8; font-size: 7px; }

.milestone-icon-stage {
  width: min(330px, 100%);
  min-height: 300px;
  overflow: visible;
  perspective: none;
}

.milestone-icon-ambient {
  position: absolute;
  inset: 13% 7% 6%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--road-accent) 24%, transparent), transparent 68%);
  filter: blur(18px);
  opacity: .82;
  transform: translateZ(-15px);
}

.milestone-icon-ambient i {
  position: absolute;
  border-radius: 50%;
  background: color-mix(in srgb, var(--road-accent) 58%, white);
  box-shadow: 0 0 20px color-mix(in srgb, var(--road-accent) 56%, transparent);
}

.milestone-icon-ambient i:first-child {
  top: 20%;
  right: 22%;
  width: 7px;
  height: 7px;
}

.milestone-icon-ambient i:last-child {
  bottom: 24%;
  left: 18%;
  width: 4px;
  height: 4px;
}

.milestone-icon-object {
  position: relative;
  z-index: 2;
  display: block;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: clamp(82px, 8vw, 118px);
  line-height: 1;
  filter:
    drop-shadow(0 28px 22px rgba(0, 0, 0, .36))
    drop-shadow(0 0 24px color-mix(in srgb, var(--road-accent) 22%, transparent));
  transform: translateZ(62px);
  animation: milestoneIconFloat 6.4s ease-in-out infinite;
}

.milestone-icon-label {
  position: absolute;
  z-index: 3;
  bottom: 16%;
  color: color-mix(in srgb, var(--road-accent) 58%, white);
  font-size: 9px;
  font-weight: 820;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 7px 18px rgba(0, 0, 0, .35);
}

.milestone-icon-stage:hover .milestone-icon-object {
  transform: translateY(-6px) translateZ(72px) scale(1.035);
}

.milestone-media-plinth,
.milestone-visual-icon .milestone-media-plinth {
  right: 16%;
  bottom: 8%;
  width: 68%;
  height: 17px;
  border: 0;
  background: rgba(0, 0, 0, .4);
  box-shadow: 0 0 24px rgba(0, 0, 0, .42);
  filter: blur(10px);
  opacity: .72;
  transform: rotateX(72deg) translateZ(-18px);
}

.milestone-media-plinth i { display: none; }

@keyframes milestoneObjectFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

@keyframes milestoneIconFloat {
  0%, 100% { translate: 0 0; rotate: -1deg; }
  50% { translate: 0 -9px; rotate: 1deg; }
}

@media (max-width: 920px) {
  .milestone-photo-object,
  .milestone-layout-trophy .milestone-photo-object,
  .milestone-layout-certificate .milestone-photo-object,
  .milestone-layout-split .milestone-photo-object,
  .milestone-layout-hero .milestone-photo-object { max-height: 340px; }

  .milestone-icon-stage { min-height: 330px; }
}

@media (max-width: 680px) {
  .milestone-photo-stack .milestone-photo-button,
  .milestone-layout-trophy .milestone-photo-stack .milestone-photo-button,
  .milestone-layout-certificate .milestone-photo-stack .milestone-photo-button,
  .milestone-layout-split .milestone-photo-stack .milestone-photo-button,
  .milestone-layout-hero .milestone-photo-stack .milestone-photo-button {
    width: min(306px, 84vw);
  }

  .milestone-photo-object,
  .milestone-layout-trophy .milestone-photo-object,
  .milestone-layout-certificate .milestone-photo-object,
  .milestone-layout-split .milestone-photo-object,
  .milestone-layout-hero .milestone-photo-object { max-height: 300px; }

  .milestone-icon-stage {
    width: min(280px, 82vw);
    min-height: 286px;
  }

  .milestone-icon-object { font-size: 86px; }
  .milestone-icon-label { bottom: 13%; }
}

@media (prefers-reduced-motion: reduce) {
  .milestone-photo-stack .milestone-photo-button,
  .milestone-icon-object { animation: none; }
}

/* One shared right-side anchor for physical awards and replacement icons. */
.milestone-visual {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: 0;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 2% 3%;
  transform: translateY(-50%);
  transform-style: preserve-3d;
}

.milestone-visual .milestone-photo-stack {
  position: relative;
  inset: auto;
  display: grid;
  width: 100%;
  height: auto;
  align-content: center;
  justify-items: center;
}

.milestone-visual .milestone-icon-stage {
  position: relative;
  top: auto;
  left: auto;
  display: flex;
  width: min(360px, 100%);
  min-height: 250px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 17px;
  overflow: visible;
  transform: none;
}

.milestone-visual .milestone-icon-ambient {
  inset: 0;
  width: 100%;
  height: 100%;
  margin: auto;
}

.milestone-visual .milestone-icon-object {
  font-size: clamp(112px, 10vw, 150px);
  transform: translateZ(62px);
}

.milestone-visual .milestone-icon-label {
  position: relative;
  z-index: 3;
  bottom: auto;
  margin: 0;
  padding: 0;
  transform: translateZ(40px);
}

.milestone-media-plinth,
.milestone-visual-icon .milestone-media-plinth {
  top: 73%;
  bottom: auto;
}

@media (max-width: 920px) {
  .milestone-visual { padding-inline: 5%; }

  .milestone-visual .milestone-icon-stage {
    width: min(350px, 90vw);
    min-height: 280px;
  }
}

@media (max-width: 680px) {
  .milestone-visual { padding: 3%; }

  .milestone-visual .milestone-icon-stage {
    width: min(286px, 82vw);
    min-height: 250px;
    gap: 14px;
  }

  .milestone-visual .milestone-icon-object { font-size: 108px; }
  .milestone-media-plinth,
  .milestone-visual-icon .milestone-media-plinth { top: 75%; }
}

/* Seamless milestone browser: one persistent panel, one scrollable year rail. */
.milestone-showcase-content {
  position: relative;
  z-index: 3;
  height: 100%;
  will-change: opacity, transform;
}

@media (min-width: 921px) {
  .history {
    min-height: min(100svh, 760px);
    padding: 24px 0 22px;
  }

  .history-heading {
    align-items: end;
  }

  .history-heading .overline {
    margin-bottom: 4px;
  }

  .history-heading h2 {
    font-size: clamp(32px, 2.9vw, 45px);
    line-height: .98;
  }

  .history-spotlight-wrap {
    margin-top: 12px;
    margin-bottom: 6px;
  }

  .milestone-showcase,
  .milestone-layout-stable {
    height: clamp(354px, 43vh, 400px);
    min-height: 0;
    padding: 13px clamp(22px, 2.5vw, 38px) 15px;
  }

  .milestone-showcase-meta {
    min-height: 29px;
    padding-bottom: 7px;
  }

  .milestone-showcase-body {
    height: calc(100% - 29px);
    min-height: 0;
    padding-top: 8px;
    grid-template-columns: minmax(0, 1.06fr) minmax(330px, .94fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "year media"
      "story media";
    column-gap: clamp(24px, 3vw, 48px);
  }

  .milestone-year {
    margin-bottom: 7px;
    font-size: clamp(29px, 2.65vw, 41px);
  }

  .milestone-proof-label {
    margin-bottom: 7px;
  }

  .milestone-story {
    min-height: 0;
    padding: 0 0 3px;
  }

  .milestone-story h3 {
    margin-bottom: 7px;
    font-size: clamp(32px, 3.35vw, 52px);
  }

  .milestone-story > p:not(.milestone-source-note) {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.43;
  }

  .milestone-awards li,
  .milestone-awards li.has-photo-record {
    min-height: 35px;
    padding-block: 4px;
  }

  .milestone-awards li > span {
    width: 25px;
    height: 25px;
  }

  .milestone-source-note {
    margin-top: 5px;
  }

  .milestone-media {
    min-height: 0;
    height: 100%;
  }

  .milestone-photo-object,
  .milestone-layout-trophy .milestone-photo-object,
  .milestone-layout-certificate .milestone-photo-object,
  .milestone-layout-split .milestone-photo-object,
  .milestone-layout-hero .milestone-photo-object {
    max-height: min(268px, 33vh);
  }

  .milestone-visual .milestone-icon-stage {
    min-height: 238px;
    transform: scale(.84);
  }

  .history-road-viewport {
    margin-top: 0;
  }

  .history-road-route,
  .history-stop {
    height: 158px;
  }

  .history-road-route::after {
    top: 70px;
    height: 52px;
  }

  .history-road-surface {
    top: 51px;
    height: 49px;
  }

  .history-stop.is-upper .history-stop-label { top: 0; }
  .history-stop.is-lower .history-stop-label { top: 110px; }
  .history-stop.is-upper .history-stop-stem { top: 42px; height: 17px; }
  .history-stop.is-lower .history-stop-stem { top: 91px; height: 17px; }

  .history-stop-node {
    top: 53px;
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .history-stop.is-active .history-stop-node {
    transform: translateX(-50%) translateZ(52px) rotateX(-8deg) rotate(2deg) scale(1.12);
  }

  .history-stop-label time { font-size: 17px; }
  .history-stop.is-active .history-stop-label time { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .milestone-showcase-content {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Full-viewport milestone composition with a roomier, easier-to-scan year rail. */
@media (min-width: 921px) {
  .history {
    display: grid;
    height: calc(100svh - var(--site-header-height));
    min-height: 720px;
    grid-template-rows: auto clamp(350px, 40vh, 390px) minmax(0, 1fr);
    align-content: stretch;
    padding: clamp(20px, 2.4vh, 30px) 0 0;
  }

  .history-heading {
    align-self: start;
  }

  .history-spotlight-wrap {
    display: flex;
    height: 100%;
    min-height: 0;
    margin: clamp(9px, 1.15vh, 13px) 6.5vw 7px;
  }

  .milestone-showcase,
  .milestone-layout-stable {
    height: 100%;
    min-height: 0;
    flex: none;
    width: 100%;
    overflow: hidden;
    padding: 13px clamp(24px, 2.65vw, 40px) 15px;
  }

  .milestone-showcase-content {
    height: 100%;
  }

  .milestone-showcase-meta {
    min-height: 29px;
    padding-bottom: 7px;
  }

  .milestone-showcase-body {
    height: calc(100% - 29px);
    min-height: 0;
    overflow: hidden;
    padding-top: 8px;
  }

  .milestone-year {
    font-size: clamp(31px, 2.7vw, 43px);
  }

  .milestone-story h3 {
    font-size: clamp(34px, 3.3vw, 50px);
  }

  .milestone-story {
    display: flex;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
  }

  .milestone-story > p:not(.milestone-source-note) {
    max-width: 700px;
    font-size: 12px;
    line-height: 1.45;
  }

  .milestone-awards li,
  .milestone-awards li.has-photo-record {
    min-height: 35px;
    padding-block: 4px;
  }

  .milestone-awards strong {
    font-size: 11px;
  }

  .milestone-source-note {
    margin-top: auto;
    padding-top: 5px;
  }

  .milestone-photo-object,
  .milestone-layout-trophy .milestone-photo-object,
  .milestone-layout-certificate .milestone-photo-object,
  .milestone-layout-split .milestone-photo-object,
  .milestone-layout-hero .milestone-photo-object {
    max-height: min(292px, 31vh);
  }

  .milestone-visual .milestone-icon-stage {
    min-height: 250px;
    transform: scale(.86);
  }

  .history-road-viewport {
    width: 100%;
    height: 100%;
    min-height: 0;
    align-self: stretch;
    margin-top: 0;
    padding-block: 6px 0;
    background:
      linear-gradient(180deg, rgba(255,255,255,.18), transparent 20%, transparent 82%, rgba(255,255,255,.12)),
      radial-gradient(ellipse at 50% 50%, rgba(49,139,255,.14), transparent 52%);
  }

  .history-road-route,
  .history-stop {
    height: 100%;
    min-height: 255px;
  }

  .history-road-route {
    padding-inline: max(34px, calc(50vw - 95px));
  }

  .history-stop {
    width: 190px;
    flex-basis: 190px;
  }

  .history-stop-label {
    left: 8px;
    width: 174px;
    min-height: 64px;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 16px;
  }

  .history-stop.is-upper .history-stop-label { top: 6%; }
  .history-stop.is-lower .history-stop-label {
    top: auto;
    bottom: 6%;
  }

  .history-stop-label time { font-size: 22px; }
  .history-stop.is-active .history-stop-label time { font-size: 26px; }
  .history-stop-label small {
    font-size: 10px;
    line-height: 1.35;
  }

  .history-road-route::after {
    top: calc(50% + 22px);
    height: 82px;
  }

  .history-road-surface {
    top: 50%;
    height: 72px;
    transform: translateY(-50%) rotateX(60deg) translateZ(-31px);
  }

  .history-stop-node {
    top: 50%;
    width: 56px;
    height: 56px;
    margin-top: -28px;
    border-radius: 18px;
  }

  .history-stop.is-upper .history-stop-stem {
    top: calc(6% + 70px);
    height: calc(44% - 70px);
  }

  .history-stop.is-lower .history-stop-stem {
    top: calc(50% + 28px);
    height: calc(44% - 90px);
  }

  .history-stop.is-active .history-stop-node {
    transform: translateX(-50%) translateZ(56px) rotateX(-8deg) rotate(2deg) scale(1.1);
  }
}

@media (min-width: 921px) and (max-height: 820px) {
  .history {
    min-height: 700px;
    grid-template-rows: auto 340px minmax(0, 1fr);
    padding: 18px 0 0;
  }

  .history-spotlight-wrap {
    margin-top: 9px;
    margin-bottom: 6px;
  }

  .milestone-photo-object,
  .milestone-layout-trophy .milestone-photo-object,
  .milestone-layout-certificate .milestone-photo-object,
  .milestone-layout-split .milestone-photo-object,
  .milestone-layout-hero .milestone-photo-object {
    max-height: min(255px, 31vh);
  }

  .history-road-viewport { min-height: 0; }
  .history-road-route,
  .history-stop { min-height: 245px; }
  .history-stop-label {
    min-height: 58px;
    padding-block: 8px;
  }
  .history-stop-label time { font-size: 20px; }
  .history-stop.is-active .history-stop-label time { font-size: 23px; }
  .history-stop-label small { font-size: 9px; }
}

/* Desktop hero: keep the complete opening story inside one visible viewport. */
@media (min-width: 801px) {
  .hero {
    height: 100svh;
    min-height: 700px;
  }

  .hero-content {
    padding-top: clamp(124px, 15.5vh, 170px);
  }

  .hero .eyebrow {
    margin-bottom: 18px;
  }

  .hero h1 {
    max-width: 760px;
    font-size: clamp(48px, 4.65vw, 76px);
    line-height: .95;
  }

  .hero-copy {
    max-width: 600px;
    margin: 22px 0 24px;
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.55;
  }

  .button-playful {
    min-height: 48px;
  }

  .hero-footer {
    height: 72px;
    gap: clamp(28px, 3vw, 48px);
  }
}

@media (min-width: 801px) and (max-height: 820px) {
  .hero {
    min-height: 640px;
  }

  .hero-content {
    padding-top: clamp(104px, 13.5vh, 122px);
  }

  .hero .eyebrow {
    margin-bottom: 14px;
  }

  .hero h1 {
    max-width: 690px;
    font-size: clamp(44px, 4.15vw, 66px);
  }

  .hero-copy {
    margin: 17px 0 19px;
    font-size: 15px;
    line-height: 1.48;
  }

  .button-playful {
    min-height: 46px;
  }

  .hero-footer {
    height: 62px;
  }
}

/* Premium service case-study modal */
.service-case-modal {
  --service-modal-accent: #45b7ff;
  --service-modal-accent-rgb: 69, 183, 255;
  position: fixed;
  z-index: 2600;
  inset: 0;
  display: grid;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  place-items: center;
  overflow: hidden;
  background: rgba(2, 8, 15, .76);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 220ms ease-out;
}

.service-case-modal.is-visible {
  opacity: 1;
}

.service-case-modal-panel {
  position: relative;
  width: min(84vw, 1420px);
  height: min(88dvh, 900px);
  max-height: 900px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 8%, rgba(var(--service-modal-accent-rgb), .18), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, .045), transparent 35%),
    #071321;
  box-shadow: 0 48px 120px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 255, 255, .08);
  opacity: 0;
  transform: translateY(16px) scale(.975);
  transition: opacity 220ms ease-out, transform 220ms cubic-bezier(.2, .72, .2, 1);
}

.service-case-modal.is-visible .service-case-modal-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.service-case-modal-close {
  position: absolute;
  z-index: 5;
  top: 18px;
  right: 18px;
  display: grid;
  width: 46px;
  height: 46px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 14px;
  color: #fff;
  background: rgba(5, 14, 25, .72);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .08);
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}

.service-case-modal-close span {
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}

.service-case-modal-close:hover,
.service-case-modal-close:focus-visible {
  border-color: rgba(var(--service-modal-accent-rgb), .62);
  background: rgba(var(--service-modal-accent-rgb), .14);
  transform: translateY(-2px);
}

.service-case-modal-scroll {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(var(--service-modal-accent-rgb), .55) rgba(255, 255, 255, .05);
  scrollbar-width: thin;
}

.service-case-modal-hero {
  display: grid;
  min-height: 52%;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: clamp(32px, 3.8vw, 60px);
  align-items: center;
  padding: clamp(46px, 5vw, 78px);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.service-case-modal-intro {
  min-width: 0;
}

.service-case-modal-number,
.service-case-modal-kicker {
  color: var(--service-modal-accent);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.service-case-modal-intro h2 {
  max-width: 100%;
  margin: 18px 0 22px;
  color: #fff;
  font-size: clamp(42px, 3.6vw, 64px);
  font-weight: 560;
  letter-spacing: -.058em;
  line-height: 1;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.service-case-modal-intro > p {
  max-width: 620px;
  margin: 0;
  color: #b8c3d0;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.7;
}

.service-case-modal-image {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 22px;
  background: #0a1b2c;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .36), 0 0 54px rgba(var(--service-modal-accent-rgb), .1);
}

.service-case-modal-image::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--service-modal-accent-rgb), .09), transparent 42% 70%, rgba(3, 10, 18, .18));
  content: "";
  pointer-events: none;
}

.service-case-modal-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-case-modal-details {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: clamp(34px, 5vw, 80px);
  padding: clamp(44px, 5vw, 76px);
}

.service-case-modal-details h3 {
  margin: 13px 0 24px;
  color: #fff;
  font-size: clamp(27px, 2.6vw, 42px);
  font-weight: 560;
  letter-spacing: -.04em;
  line-height: 1.08;
}

.service-case-modal-highlights ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-case-modal-highlights li {
  display: grid;
  min-height: 58px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: start;
}

.service-case-modal-highlights li span {
  color: var(--service-modal-accent);
  font-size: 10px;
  font-weight: 820;
}

.service-case-modal-highlights li strong {
  color: #dce3eb;
  font-size: 14px;
  font-weight: 560;
  line-height: 1.45;
}

.service-case-modal-story > p:not(.service-case-modal-kicker),
.service-case-modal-support p {
  max-width: 790px;
  margin: 0 0 14px;
  color: #adb9c7;
  font-size: 14px;
  line-height: 1.72;
}

.service-case-modal-support {
  margin-top: 30px;
  padding: 26px 28px 18px;
  border: 1px solid rgba(var(--service-modal-accent-rgb), .22);
  border-radius: 18px;
  background: rgba(var(--service-modal-accent-rgb), .065);
}

.service-case-modal-support h4 {
  margin: 0 0 16px;
  color: #fff;
  font-size: 17px;
  font-weight: 620;
}

body.service-modal-open .whatsapp-button {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .service-case-modal-panel {
    width: min(92vw, 880px);
  }

  .service-case-modal-hero,
  .service-case-modal-details {
    grid-template-columns: 1fr;
  }

  .service-case-modal-hero {
    gap: 30px;
  }

  .service-case-modal-image {
    order: -1;
  }
}

@media (max-width: 600px) {
  .service-case-modal {
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  .service-case-modal-panel {
    width: 100%;
    height: min(94dvh, 940px);
    border-radius: 20px;
  }

  .service-case-modal-close {
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .service-case-modal-hero,
  .service-case-modal-details {
    padding: 22px;
  }

  .service-case-modal-hero {
    padding-top: 66px;
  }

  .service-case-modal-intro h2 {
    font-size: clamp(40px, 12vw, 58px);
  }

  .service-case-modal-image {
    border-radius: 16px;
  }

  .service-case-modal-support {
    padding: 20px 18px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-case-modal,
  .service-case-modal-panel {
    transition: none;
  }
}

/* Interactive customer solution journey */
.customer-solutions {
  --customer-accent: #45b7ff;
  --customer-accent-rgb: 69, 183, 255;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(126px, 10vw, 160px) 8.2vw clamp(94px, 8vw, 128px);
  color: #fff;
  background:
    radial-gradient(ellipse at 78% -8%, rgba(var(--customer-accent-rgb), .17), transparent 38%),
    radial-gradient(circle at 9% 78%, rgba(237, 27, 47, .07), transparent 25%),
    linear-gradient(180deg, #06111f 0%, #071625 48%, #071321 100%);
  transition: background-color 420ms ease;
}

.customer-solutions::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .045;
  background-image:
    linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.52) 62%, transparent);
  mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.52) 62%, transparent);
}

.customer-solutions-inner {
  position: relative;
  z-index: 2;
  width: min(1480px, 100%);
  margin: 0 auto;
}

.customer-solutions-heading {
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(0, 1.8fr);
  gap: clamp(34px, 6vw, 94px);
  align-items: start;
}

.customer-solutions-heading h2 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(52px, 5.5vw, 88px);
  font-weight: 520;
  line-height: .98;
  letter-spacing: -.055em;
}

.customer-solutions-heading h2 em {
  color: #94a4b8;
  font-style: normal;
  font-weight: 300;
}

.customer-solutions-heading > div:last-child > p:last-child {
  max-width: 680px;
  margin: 26px 0 0;
  color: #aeb9c8;
  font-size: 16px;
  line-height: 1.7;
}

.customer-solution-tabs {
  display: grid;
  margin-top: clamp(48px, 5vw, 70px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.customer-solution-tab {
  --solution-accent: #45b7ff;
  --solution-accent-rgb: 69, 183, 255;
  position: relative;
  min-width: 0;
  min-height: 210px;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 86% 18%, rgba(var(--solution-accent-rgb), .12), transparent 31%),
    rgba(11, 26, 43, .82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  text-align: left;
  cursor: pointer;
  transition: transform 260ms ease-out, border-color 260ms ease-out, background 260ms ease-out, box-shadow 260ms ease-out;
}

.customer-solution-tab::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(125deg, rgba(255,255,255,.04), transparent 34% 78%);
  content: "";
  pointer-events: none;
}

.customer-solution-tab:hover,
.customer-solution-tab:focus-visible {
  border-color: rgba(var(--solution-accent-rgb), .48);
  background:
    radial-gradient(circle at 86% 18%, rgba(var(--solution-accent-rgb), .2), transparent 34%),
    rgba(13, 31, 51, .96);
  transform: translateY(-4px);
}

.customer-solution-tab.is-active {
  border-color: rgba(var(--solution-accent-rgb), .72);
  background:
    radial-gradient(circle at 84% 18%, rgba(var(--solution-accent-rgb), .26), transparent 36%),
    linear-gradient(145deg, rgba(var(--solution-accent-rgb), .1), rgba(10, 24, 40, .98) 58%);
  box-shadow: 0 18px 38px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(-5px);
}

.customer-solution-number {
  display: block;
  color: var(--solution-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
}

.customer-solution-icon {
  position: absolute;
  top: 17px;
  right: 18px;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  color: var(--solution-accent);
}

.customer-solution-icon .service-symbol {
  position: static;
  width: 50px;
  height: 50px;
  color: currentColor;
  transform: none;
}

.customer-solution-icon .service-symbol-svg {
  padding: 9px;
  border: 1px solid rgba(var(--solution-accent-rgb), .28);
  border-radius: 14px;
  background: rgba(var(--solution-accent-rgb), .08);
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.service-symbol-dia {
  position: relative !important;
  display: grid;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(var(--solution-accent-rgb), .3);
  border-radius: 14px;
  background: rgba(var(--solution-accent-rgb), .08);
}

.service-symbol-dia b {
  position: relative;
  z-index: 2;
  font-size: 13px;
  letter-spacing: .1em;
}

.service-symbol-dia i {
  position: absolute;
  width: 38px;
  height: 38px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .1;
}

.service-symbol-dia i:nth-child(3) { width: 28px; height: 28px; opacity: .16; }
.service-symbol-dia i:nth-child(4) { width: 17px; height: 17px; opacity: .24; }

.customer-solution-tab strong {
  display: block;
  max-width: calc(100% - 38px);
  margin-top: 60px;
  font-size: clamp(20px, 1.65vw, 27px);
  font-weight: 640;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.customer-solution-tab small {
  display: block;
  max-width: 27ch;
  margin-top: 12px;
  color: #aeb8c6;
  font-size: 12px;
  line-height: 1.5;
}

.customer-solution-tab > i {
  position: absolute;
  right: 22px;
  bottom: 0;
  left: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--solution-accent);
  opacity: 0;
  transform: scaleX(.28);
  transform-origin: left;
  transition: opacity 260ms ease-out, transform 260ms ease-out;
}

.customer-solution-tab.is-active > i {
  opacity: 1;
  transform: scaleX(1);
}

.customer-story-shell {
  height: 500px;
  min-height: 500px;
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
  background: #f5f5f2;
  box-shadow: 0 34px 80px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.7);
}

.customer-story-content {
  display: grid;
  height: 100%;
  min-height: inherit;
  grid-template-columns: minmax(0, 1.22fr) minmax(380px, .78fr);
  animation: customerStoryIn 480ms cubic-bezier(.2,.72,.2,1) both;
}

.customer-story-main {
  display: flex;
  min-width: 0;
  padding: clamp(34px, 4vw, 62px);
  flex-direction: column;
  color: #07101b;
  background:
    radial-gradient(circle at 86% 7%, rgba(var(--customer-accent-rgb), .12), transparent 28%),
    linear-gradient(145deg, #fff, #f2f2ef);
}

.customer-story-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #636d78;
  font-size: 10px;
  font-weight: 820;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.customer-story-label span {
  color: var(--customer-accent);
}

.customer-story-main h3 {
  max-width: 760px;
  margin: 22px 0 17px;
  font-size: clamp(40px, 4vw, 64px);
  font-weight: 560;
  line-height: .98;
  letter-spacing: -.055em;
}

.customer-story-summary {
  max-width: 720px;
  margin: 0;
  color: #4f5965;
  font-size: 16px;
  line-height: 1.62;
}

.customer-story-challenge {
  display: grid;
  max-width: 720px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(7,16,27,.14);
  grid-template-columns: 130px 1fr;
  gap: 22px;
}

.customer-story-challenge small,
.customer-story-outcome small {
  color: #747d87;
  font-size: 9px;
  font-weight: 820;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.customer-story-challenge p {
  margin: 0;
  color: #39434e;
  font-size: 13px;
  line-height: 1.55;
}

.customer-story-cta {
  display: inline-flex;
  min-height: 44px;
  width: fit-content;
  margin-top: auto;
  padding: 0 17px;
  align-items: center;
  gap: 20px;
  border-radius: 11px;
  color: #fff;
  background: #ed1b2f;
  box-shadow: 0 10px 22px rgba(237,27,47,.2);
  font-size: 12px;
  font-weight: 760;
  transition: transform 220ms ease-out, background 220ms ease-out, box-shadow 220ms ease-out;
}

.customer-story-cta:hover,
.customer-story-cta:focus-visible {
  background: #fa263b;
  box-shadow: 0 14px 28px rgba(237,27,47,.28);
  transform: translateY(-2px);
}

.customer-story-process {
  position: relative;
  display: flex;
  overflow: hidden;
  min-width: 0;
  padding: clamp(32px, 3.3vw, 52px);
  flex-direction: column;
  color: #fff;
  background:
    radial-gradient(circle at 82% 14%, rgba(var(--customer-accent-rgb), .2), transparent 32%),
    linear-gradient(145deg, #0b1b2d, #071321);
}

.customer-story-process::before {
  position: absolute;
  right: -80px;
  bottom: -110px;
  width: 310px;
  height: 310px;
  border: 1px solid rgba(var(--customer-accent-rgb), .16);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(var(--customer-accent-rgb), .04), 0 0 0 68px rgba(var(--customer-accent-rgb), .025);
  content: "";
}

.customer-story-process-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.customer-story-process-head small {
  color: #93a2b4;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.customer-story-process-head span {
  color: var(--customer-accent);
  font-size: 10px;
  font-weight: 760;
}

.customer-story-process ol {
  position: relative;
  z-index: 1;
  display: grid;
  margin: 28px 0 0;
  padding: 0;
  gap: 0;
  list-style: none;
}

.customer-story-process li {
  display: grid;
  min-height: 66px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.13);
  grid-template-columns: 42px 1fr;
  gap: 13px;
  align-items: start;
}

.customer-story-process li span {
  color: var(--customer-accent);
  font-size: 10px;
  font-weight: 820;
}

.customer-story-process li p {
  margin: 0;
  color: #c4ccd6;
  font-size: 12px;
  line-height: 1.55;
}

.customer-story-outcome {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 18px;
  border: 1px solid rgba(var(--customer-accent-rgb), .27);
  border-radius: 14px;
  background: rgba(var(--customer-accent-rgb), .08);
}

.customer-story-outcome small {
  display: block;
  margin-bottom: 8px;
  color: var(--customer-accent);
}

.customer-story-outcome strong {
  display: block;
  font-size: 16px;
  font-weight: 620;
  line-height: 1.35;
}

.solutions-sectors {
  padding-top: clamp(88px, 8vw, 118px);
}

.solutions-sectors .section-heading {
  margin-bottom: clamp(38px, 4vw, 58px);
}

.solutions-sectors .industries-showcase {
  margin-top: 0;
}

@keyframes customerStoryIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 1100px) {
  .customer-solutions-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }

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

  .customer-solution-tab {
    min-height: 190px;
  }

  .customer-story-shell {
    height: 570px;
    min-height: 570px;
  }

  .customer-story-content {
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  }

  .customer-story-main h3 {
    font-size: clamp(38px, 4.6vw, 52px);
  }
}

@media (max-width: 800px) {
  .customer-solutions {
    padding: 108px 23px 78px;
  }

  .customer-solutions-heading h2 {
    font-size: clamp(42px, 12vw, 58px);
  }

  .customer-solutions-heading > div:last-child > p:last-child {
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.6;
  }

  .customer-solution-tabs {
    margin-top: 38px;
    gap: 10px;
  }

  .customer-solution-tab {
    min-height: 178px;
    padding: 16px;
    border-radius: 15px;
  }

  .customer-solution-icon {
    top: 13px;
    right: 13px;
    width: 42px;
    height: 42px;
  }

  .customer-solution-icon .service-symbol {
    width: 42px;
    height: 42px;
  }

  .customer-solution-tab strong {
    max-width: 100%;
    margin-top: 52px;
    font-size: clamp(18px, 5vw, 22px);
  }

  .customer-solution-tab small {
    margin-top: 9px;
    font-size: 10px;
  }

  .customer-story-shell {
    height: auto;
    min-height: 0;
    margin-top: 12px;
    border-radius: 19px;
  }

  .customer-story-content {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .customer-story-main,
  .customer-story-process {
    padding: 28px 22px;
  }

  .customer-story-main h3 {
    margin-top: 18px;
    font-size: clamp(34px, 9.5vw, 46px);
  }

  .customer-story-summary {
    font-size: 14px;
  }

  .customer-story-challenge {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .customer-story-cta {
    margin-top: 28px;
  }

  .customer-story-process {
    min-height: 430px;
  }

  .solutions-sectors {
    padding-top: 78px;
  }
}

@media (max-width: 430px) {
  .customer-solution-tabs {
    grid-template-columns: 1fr;
  }

  .customer-solution-tab {
    min-height: 150px;
  }

  .customer-solution-tab strong {
    margin-top: 43px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .customer-story-content {
    animation: none;
  }

  .customer-solution-tab,
  .customer-solution-tab > i,
  .customer-story-cta {
    transition: none;
  }
}

/* Detailed customer success stories */
.customer-solutions {
  padding-top: clamp(116px, 9vw, 148px);
}

.customer-solutions-heading {
  grid-template-columns: minmax(190px, .58fr) minmax(0, 1.82fr);
  gap: clamp(34px, 5vw, 82px);
}

.customer-solutions-heading-copy .overline {
  margin-bottom: 18px;
  color: rgba(255,255,255,.62);
}

.customer-solutions-heading h2 {
  max-width: 1050px;
  font-size: clamp(48px, 5.25vw, 84px);
  text-transform: uppercase;
}

.customer-solutions-subtitle {
  margin: 26px 0 0 !important;
  color: #fff !important;
  font-size: clamp(23px, 2.15vw, 34px) !important;
  font-weight: 580;
  line-height: 1.18 !important;
  letter-spacing: -.035em;
}

.customer-solutions-description {
  max-width: 760px !important;
  margin-top: 14px !important;
  color: #aeb9c8 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.customer-solution-tabs {
  margin-top: clamp(42px, 4.2vw, 60px);
}

.customer-solution-tab {
  min-height: 270px;
  padding: 22px 22px 58px;
}

.customer-solution-category {
  display: block;
  max-width: calc(100% - 56px);
  margin-top: 46px;
  color: var(--solution-accent);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.customer-solution-tab strong {
  max-width: 100%;
  margin-top: 9px;
  font-size: clamp(20px, 1.55vw, 26px);
}

.customer-solution-tab small {
  max-width: 31ch;
  margin-top: 12px;
  color: #bac4d0;
  font-size: 11px;
  line-height: 1.55;
}

.customer-solution-explore {
  position: absolute;
  right: 22px;
  bottom: 21px;
  left: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255,255,255,.78);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .035em;
  transition: color 220ms ease-out;
}

.customer-solution-explore b {
  color: var(--solution-accent);
  font-size: 16px;
  font-weight: 500;
  transition: transform 220ms ease-out;
}

.customer-solution-tab:hover .customer-solution-explore,
.customer-solution-tab:focus-visible .customer-solution-explore,
.customer-solution-tab.is-active .customer-solution-explore {
  color: #fff;
}

.customer-solution-tab:hover .customer-solution-explore b,
.customer-solution-tab:focus-visible .customer-solution-explore b {
  transform: translateX(4px);
}

.customer-story-shell {
  height: auto;
  min-height: 1080px;
  margin-top: 22px;
  border-color: rgba(255,255,255,.14);
  background: #f4f4f1;
}

.customer-story-content {
  grid-template-columns: minmax(360px, .78fr) minmax(0, 1.22fr);
}

.customer-story-visual {
  position: relative;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #091728;
}

.customer-story-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.015);
  animation: customerStoryImageIn 900ms cubic-bezier(.2,.72,.2,1) both;
}

.customer-story-visual-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3,10,18,.04), transparent 42%, rgba(3,10,18,.88) 100%),
    linear-gradient(90deg, transparent 68%, rgba(7,19,33,.28));
}

.customer-story-visual::after {
  position: absolute;
  inset: 0;
  border-right: 1px solid rgba(var(--customer-accent-rgb), .16);
  background: radial-gradient(circle at 20% 14%, rgba(var(--customer-accent-rgb), .2), transparent 30%);
  content: "";
  pointer-events: none;
}

.customer-story-visual figcaption {
  position: absolute;
  z-index: 2;
  right: clamp(22px, 3vw, 44px);
  bottom: clamp(24px, 3.5vw, 52px);
  left: clamp(22px, 3vw, 44px);
  display: grid;
  gap: 8px;
}

.customer-story-visual figcaption span {
  color: #fff;
  font-size: clamp(18px, 1.55vw, 24px);
  font-weight: 670;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.customer-story-visual figcaption small {
  color: rgba(255,255,255,.68);
  font-size: 9px;
  font-weight: 720;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.customer-story-main {
  display: block;
  min-height: 1080px;
  padding: clamp(40px, 4.2vw, 64px);
  color: #07101b;
  background:
    radial-gradient(circle at 92% 4%, rgba(var(--customer-accent-rgb), .13), transparent 26%),
    linear-gradient(145deg, #fff, #f2f2ef);
}

.customer-story-main h3 {
  max-width: 830px;
  margin: 20px 0 15px;
  font-size: clamp(39px, 3.55vw, 58px);
}

.customer-story-summary {
  max-width: 760px;
  color: #4d5864;
  font-size: 15px;
  line-height: 1.63;
}

.customer-story-industry {
  display: flex;
  width: fit-content;
  margin-top: 22px;
  padding: 10px 13px;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(var(--customer-accent-rgb), .24);
  border-radius: 999px;
  background: rgba(var(--customer-accent-rgb), .075);
}

.customer-story-industry small,
.customer-story-section-label {
  color: #717b86;
  font-size: 9px;
  font-weight: 820;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.customer-story-industry strong {
  color: #1b2733;
  font-size: 11px;
  font-weight: 680;
}

.customer-story-narrative,
.customer-story-help,
.customer-story-results {
  max-width: 850px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(7,16,27,.13);
}

.customer-story-narrative h4 {
  max-width: 720px;
  margin: 0 0 13px;
  color: #0a1522;
  font-size: clamp(22px, 2vw, 29px);
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -.032em;
}

.customer-story-narrative p,
.customer-story-help > p:not(.customer-story-section-label) {
  max-width: 790px;
  margin: 0;
  color: #56616d;
  font-size: 13px;
  line-height: 1.62;
}

.customer-story-narrative p + p,
.customer-story-help > p + p {
  margin-top: 7px;
}

.customer-story-section-label {
  margin: 0 0 12px;
  color: var(--customer-accent);
}

.customer-story-results ul {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  list-style: none;
}

.customer-story-results li {
  display: grid;
  min-height: 62px;
  padding: 13px 14px;
  border: 1px solid rgba(7,16,27,.11);
  border-radius: 12px;
  background: rgba(255,255,255,.7);
  grid-template-columns: 27px 1fr;
  gap: 10px;
  align-items: start;
}

.customer-story-results li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.customer-story-results li span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  color: var(--customer-accent);
  background: rgba(var(--customer-accent-rgb), .11);
  font-size: 8px;
  font-weight: 820;
}

.customer-story-results li strong {
  color: #2b3540;
  font-size: 11px;
  font-weight: 640;
  line-height: 1.45;
}

.customer-story-close {
  display: flex;
  max-width: 850px;
  margin-top: 27px;
  padding-top: 23px;
  border-top: 1px solid rgba(7,16,27,.13);
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.customer-story-close > p {
  max-width: 520px;
  margin: 0;
  color: #313c48;
  font-size: 13px;
  font-weight: 570;
  line-height: 1.55;
}

.customer-story-close .customer-story-cta {
  flex: 0 0 auto;
  margin-top: 0;
  white-space: nowrap;
}

@keyframes customerStoryImageIn {
  from { opacity: .32; transform: scale(1.045); }
  to { opacity: 1; transform: scale(1.015); }
}

@media (max-width: 1180px) {
  .customer-solutions-heading {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .customer-story-shell,
  .customer-story-main {
    min-height: 1180px;
  }

  .customer-story-content {
    grid-template-columns: minmax(330px, .72fr) minmax(0, 1.28fr);
  }

  .customer-story-main {
    padding: 40px;
  }
}

@media (max-width: 800px) {
  .customer-solutions-heading h2 {
    font-size: clamp(39px, 11vw, 54px);
  }

  .customer-solutions-subtitle {
    font-size: clamp(22px, 6.5vw, 29px) !important;
  }

  .customer-solution-tabs {
    display: flex;
    margin-right: -23px;
    padding: 4px 23px 12px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .customer-solution-tabs::-webkit-scrollbar {
    display: none;
  }

  .customer-solution-tab {
    flex: 0 0 min(82vw, 310px);
    min-height: 246px;
    scroll-snap-align: start;
  }

  .customer-story-shell,
  .customer-story-main {
    min-height: 0;
  }

  .customer-story-content {
    display: grid;
    grid-template-columns: 1fr;
  }

  .customer-story-visual {
    min-height: clamp(330px, 92vw, 480px);
  }

  .customer-story-main {
    padding: 32px 23px 36px;
  }

  .customer-story-main h3 {
    font-size: clamp(34px, 9.4vw, 47px);
  }

  .customer-story-summary {
    font-size: 14px;
  }

  .customer-story-narrative,
  .customer-story-help,
  .customer-story-results {
    margin-top: 26px;
    padding-top: 21px;
  }

  .customer-story-narrative p,
  .customer-story-help > p:not(.customer-story-section-label) {
    font-size: 13px;
  }

  .customer-story-results ul {
    grid-template-columns: 1fr;
  }

  .customer-story-results li:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .customer-story-close {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 430px) {
  .customer-solution-tabs {
    grid-template-columns: none;
  }

  .customer-solution-tab {
    min-height: 238px;
  }

  .customer-solution-category {
    margin-top: 42px;
  }

  .customer-solution-tab strong {
    margin-top: 8px;
  }

  .customer-story-industry {
    width: 100%;
    align-items: flex-start;
    border-radius: 12px;
    flex-direction: column;
    gap: 5px;
  }

  .customer-story-close .customer-story-cta {
    width: 100%;
    justify-content: space-between;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .customer-story-visual img {
    animation: none;
  }
}

/* ── Chosen file, under the upload box ──────────────────────────────────────
   Added with the Laravel port: the form's own CSS had nothing for this, because
   the React page never showed what had been picked. */
.file-selected { margin: 10px 0 4px; font-size: 12px; color: var(--ink); }
.file-selected .file-selected-count { display: block; font-weight: 700; margin-bottom: 6px; }
.file-selected ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.file-selected li { display: flex; align-items: baseline; gap: 8px; line-height: 1.5; }
.file-selected li::before { content: "✓"; color: #1a7f37; font-weight: 700; }
.file-selected .file-selected-name { word-break: break-all; }
.file-selected .file-selected-size { color: #6d7480; white-space: nowrap; }
.file-selected.is-invalid .file-selected-count { color: var(--red); }
.file-selected.is-invalid li::before { content: "!"; color: var(--red); }