:root {
  --navy: #03152f;
  --midnight: #071e3d;
  --royal: #0648a8;
  --teal: #0fa6a6;
  --gold: #c9a85c;
  --soft-white: #f6f8fc;
  --light-gray: #e8edf5;
  --muted: #aab8cc;
  --ink: #10243d;
  --body-text: #53647a;
  --white: #ffffff;
  --container: 1180px;
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 20px 50px rgba(3, 21, 47, 0.1);
  --transition: 220ms ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 106px; }
body { margin: 0; font-family: Inter, Avenir, "Segoe UI", Arial, sans-serif; color: var(--body-text); background: var(--soft-white); line-height: 1.65; -webkit-font-smoothing: antialiased; }
body.menu-open, body.modal-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(212, 175, 55, 0.75); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 1000; top: 10px; left: 10px; padding: 10px 16px; border-radius: 8px; background: var(--gold); color: var(--navy); font-weight: 800; transform: translateY(-150%); transition: transform var(--transition); }
.skip-link:focus { transform: translateY(0); }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { padding: 110px 0; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--ink); line-height: 1.15; letter-spacing: -0.035em; }
h1 { font-size: clamp(2.8rem, 5.1vw, 4.65rem); }
h2 { margin-bottom: 24px; font-size: clamp(2.15rem, 4vw, 3.25rem); }
h3 { font-size: 1.2rem; }
em { color: var(--teal); font-style: normal; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; color: #c7d4e7; font-size: 0.71rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.eyebrow span { width: 28px; height: 2px; background: var(--gold); }
.eyebrow.dark { color: var(--royal); }
.eyebrow.centered { justify-content: center; }
.eyebrow.centered span:last-child { display: inline-block; }
.button-group { display: flex; flex-wrap: wrap; gap: 14px; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 14px; padding: 13px 22px; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; font-weight: 750; line-height: 1.2; transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition), border-color var(--transition); }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--gold); color: var(--navy); box-shadow: 0 10px 26px rgba(201, 168, 92, 0.22); }
.button-primary:hover { background: #d7ba74; box-shadow: 0 15px 32px rgba(201, 168, 92, 0.3); }
.button-secondary, .button-outline { border-color: rgba(255, 255, 255, 0.25); color: var(--white); background: rgba(255, 255, 255, 0.05); }
.button-secondary:hover, .button-outline:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.1); }
.button-gold { background: var(--gold); color: var(--navy); box-shadow: 0 10px 24px rgba(201, 168, 92, 0.2); }
.button-gold:hover { background: #d7ba74; box-shadow: 0 14px 30px rgba(201, 168, 92, 0.28); }
.button-light { background: var(--white); color: var(--royal); }
.button-small { min-height: 43px; padding: 10px 17px; font-size: 0.86rem; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--teal); font-size: 0.88rem; font-weight: 800; }
.text-link span { transition: transform var(--transition); }
.text-link:hover span { transform: translateX(4px); }

.site-header { position: fixed; z-index: 100; top: 0; right: 0; left: 0; color: var(--white); transition: background var(--transition), box-shadow var(--transition), backdrop-filter var(--transition); }
.site-header.scrolled { background: rgba(3, 21, 47, 0.97); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14); }
.navbar { display: flex; height: 96px; align-items: center; justify-content: flex-start; }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; color: #f7f9fc; }
.brand-mark { position: relative; display: block; width: 96px; height: 78px; flex: 0 0 96px; overflow: hidden; background: radial-gradient(circle at 50% 52%, rgba(55, 198, 207, 0.13), transparent 66%); }
.brand-mark img { position: absolute; top: -44px; left: -147px; width: 385px; max-width: none; filter: brightness(1.08) saturate(1.06); mix-blend-mode: screen; }
.brand-name { flex: 0 0 auto; color: #f7f9fc; font-size: 1.55rem; font-weight: 950; letter-spacing: 0.12em; line-height: 0.9; text-shadow: 0 2px 14px rgba(247, 249, 252, 0.15); }
.brand-name small { display: block; margin-top: 9px; color: #37c6cf; font-size: 0.66rem; font-weight: 850; letter-spacing: 0.4em; line-height: 1; text-shadow: 0 2px 12px rgba(55, 198, 207, 0.21); }
.nav-menu { display: flex; flex: 0 1 auto; align-items: center; margin-left: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(24px, 2.25vw, 34px); margin: 0; padding: 0; list-style: none; }
.nav-links a { position: relative; padding: 10px 0; color: #cbd7e8; font-size: 0.86rem; font-weight: 650; transition: color var(--transition); }
.nav-links a::after { position: absolute; right: 0; bottom: 2px; left: 0; height: 2px; background: var(--gold); content: ""; transform: scaleX(0); transition: transform var(--transition); }
.nav-links a:hover, .nav-links a.active { color: var(--white); }
.nav-links a.active::after, .nav-links a:hover::after { transform: scaleX(1); }
.menu-toggle { display: none; width: 44px; height: 44px; margin-left: auto; padding: 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.menu-toggle span { display: block; width: 24px; height: 2px; margin: 5px 0; background: var(--white); transition: transform var(--transition), opacity var(--transition); }

.hero { position: relative; min-height: 760px; overflow: hidden; padding: 160px 0 80px; color: #cbd7e7; background: radial-gradient(circle at 78% 35%, rgba(0, 122, 133, 0.19), transparent 30%), linear-gradient(125deg, var(--navy) 10%, var(--midnight) 58%, #06294c 100%); }
.hero::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 54px 54px; content: ""; mask-image: linear-gradient(to bottom, black, transparent 90%); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(20px); opacity: .5; }
.hero-glow-one { top: 20%; right: 2%; width: 330px; height: 330px; background: rgba(6, 72, 168, .22); }
.hero-glow-two { bottom: -18%; left: -8%; width: 400px; height: 400px; background: rgba(0, 122, 133, .13); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr .98fr; gap: 80px; align-items: center; }
.hero h1 { max-width: 680px; margin-bottom: 26px; color: var(--white); font-size: clamp(2.65rem, 4.45vw, 4.15rem); }
.hero h1 span, .hero h1 em { display: block; white-space: nowrap; }
.hero h1 em { color: #69cbd0; }
.hero-lead { max-width: 660px; margin-bottom: 34px; color: #b9c7d9; font-size: 1.06rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 35px; color: #aebdd1; font-size: .76rem; font-weight: 650; }
.hero-trust span { display: flex; align-items: center; gap: 7px; }
.hero-trust i { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: rgba(0, 122, 133, .28); color: #70d2d8; font-size: .65rem; font-style: normal; }
.system-visual { position: relative; min-height: 490px; perspective: 900px; }
.system-card { border: 1px solid rgba(164, 202, 228, .16); background: linear-gradient(145deg, rgba(16, 46, 80, .92), rgba(5, 28, 56, .94)); box-shadow: 0 28px 80px rgba(0, 0, 0, .35); backdrop-filter: blur(14px); }
.main-system-card { position: absolute; z-index: 2; top: 74px; left: 6%; width: 88%; padding: 24px; border-radius: 20px; transform: rotateY(-3deg) rotateX(2deg); transition: translate .45s ease-out; }
.card-topline, .card-topline > div { display: flex; align-items: center; justify-content: space-between; }
.card-topline > div { gap: 10px; color: #e6eff8; font-size: .82rem; font-weight: 750; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ed3a2; box-shadow: 0 0 0 5px rgba(62, 211, 162, .1); }
.live-badge { padding: 4px 9px; border-radius: 50px; color: #6edfb8; background: rgba(62, 211, 162, .1); font-size: .64rem; font-weight: 800; text-transform: uppercase; }
.metric-row { display: grid; grid-template-columns: 1fr 1.5fr; gap: 26px; align-items: end; margin: 27px 0 25px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.08); }
.metric-row small, .workflow-title small { display: block; color: #8296af; font-size: .66rem; }
.metric-row strong { display: block; margin: 3px 0; color: var(--white); font-size: 2rem; }
.metric-up { color: #5fd7b0; font-size: .62rem; font-weight: 700; }
.mini-chart { position: relative; display: flex; height: 66px; align-items: end; gap: 7px; overflow: hidden; }
.mini-chart::after { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 15%, rgba(124,218,232,.14) 48%, transparent 72%); content: ""; opacity: 0; pointer-events: none; transform: translateX(-115%); }
.mini-chart i { flex: 1; min-width: 5px; border-radius: 4px 4px 0 0; background: linear-gradient(#1b7cce, rgba(6,72,168,.18)); transform: scaleY(0); transform-origin: center bottom; }
.mini-chart i:nth-child(1) { height: 28%; }.mini-chart i:nth-child(2) { height: 40%; }.mini-chart i:nth-child(3) { height: 34%; }.mini-chart i:nth-child(4) { height: 58%; }.mini-chart i:nth-child(5) { height: 51%; }.mini-chart i:nth-child(6) { height: 76%; }.mini-chart i:nth-child(7) { height: 91%; background: linear-gradient(#30aab5, rgba(0,122,133,.2)); }
.workflow-title { display: flex; align-items: center; justify-content: space-between; color: #dfeaf5; font-size: .76rem; font-weight: 700; }
.workflow { position: relative; display: flex; align-items: center; margin-top: 15px; }
.flow-node { flex: 0 0 84px; padding: 11px 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; color: #9bb0c8; background: rgba(255,255,255,.025); font-size: .56rem; }
.flow-node b { display: block; margin-bottom: 3px; color: #5d7c9c; font-size: .49rem; }
.flow-node-active { border-color: rgba(0, 168, 181, .45); color: #89e3e8; background: rgba(0, 122, 133, .13); }
.workflow > i { position: relative; height: 1px; flex: 1; background: linear-gradient(90deg, #295373, #168d99); }
.workflow > i::after { position: absolute; inset: -4px 0; background-image: radial-gradient(circle, rgba(117,236,238,.95) 0 2px, rgba(64,204,211,.3) 3px, transparent 5px); background-repeat: no-repeat; background-position: 0 50%; content: ""; opacity: 0; filter: drop-shadow(0 0 4px rgba(76,218,222,.5)); }
.floating-card { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-radius: 13px; transition: translate .45s ease-out; }
.floating-card strong, .floating-card small { display: block; }
.floating-card strong { color: #eef5fb; font-size: .7rem; }.floating-card small { color: #8699b1; font-size: .55rem; }
.floating-card-left { top: 28px; left: -3%; }.floating-card-right { z-index: 5; top: 215px; right: -3%; }
.floating-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: #89e5e8; background: rgba(0,122,133,.22); }
.calendar-icon { color: #efcf65; background: rgba(212,175,55,.13); }.check { display: grid; width: 20px; height: 20px; margin-left: 7px; place-items: center; border-radius: 50%; color: #5fe0b3; background: rgba(62,211,162,.12); font-size: .65rem; }
.completion-card { position: absolute; z-index: 4; right: 9%; bottom: 16px; display: flex; align-items: center; gap: 13px; padding: 14px 18px; border-radius: 14px; transition: translate .45s ease-out; }
.completion-card strong, .completion-card small { display: block; }.completion-card strong { color: #eaf1f8; font-size: .72rem; }.completion-card small { color: #8498b0; font-size: .55rem; }
.progress-ring { --progress: 86%; position: relative; display: grid; width: 43px; height: 43px; place-items: center; border-radius: 50%; background: conic-gradient(#22adb7 var(--progress), rgba(255,255,255,.1) 0); }
.progress-ring::before { position: absolute; width: 33px; height: 33px; border-radius: 50%; background: #0d294a; content: ""; }.progress-ring span { position: relative; z-index: 1; color: #91e3e6; font-size: .55rem; font-weight: 800; }
.visual-orbit { position: absolute; border: 1px solid rgba(63, 135, 181, .15); border-radius: 50%; }.visual-orbit::after { position: absolute; top: 48%; left: -3px; width: 6px; height: 6px; border-radius: 50%; background: rgba(69,183,201,.44); box-shadow: 0 0 9px rgba(69,183,201,.25); content: ""; }.orbit-one { inset: -10px 15px 0; }.orbit-two { inset: 40px -50px 38px; }

.system-visual:not(.visible) .floating-card, .system-visual:not(.visible) .completion-card { opacity: 0; }
.system-visual.visible .main-system-card { animation: dashboard-float 8s ease-in-out .15s infinite; }
.system-visual.visible .floating-card-left { animation: dashboard-card-enter .55s ease-out .2s both, followup-card-float 6.4s ease-in-out .85s infinite; }
.system-visual.visible .floating-card-right { animation: dashboard-card-enter .55s ease-out .38s both, booking-card-drift 7.7s ease-in-out 1.05s infinite; }
.system-visual.visible .completion-card { animation: dashboard-card-enter .55s ease-out .55s both, completion-card-float 9.1s ease-in-out 1.2s infinite; }
.system-visual.visible .mini-chart i { animation: chart-bar-rise .65s cubic-bezier(.2,.8,.25,1) forwards; }
.system-visual.visible .mini-chart i:nth-child(1) { animation-delay: .3s; }.system-visual.visible .mini-chart i:nth-child(2) { animation-delay: .37s; }.system-visual.visible .mini-chart i:nth-child(3) { animation-delay: .44s; }.system-visual.visible .mini-chart i:nth-child(4) { animation-delay: .51s; }.system-visual.visible .mini-chart i:nth-child(5) { animation-delay: .58s; }.system-visual.visible .mini-chart i:nth-child(6) { animation-delay: .65s; }.system-visual.visible .mini-chart i:nth-child(7) { animation-delay: .72s; }
.system-visual.visible .mini-chart::after { animation: chart-shimmer 5.8s ease-in-out 1.8s infinite; }
.system-visual.visible .workflow > i:first-of-type::after { animation: workflow-dot-first 9s linear 1.1s infinite; }
.system-visual.visible .workflow > i:last-of-type::after { animation: workflow-dot-second 9s linear 1.1s infinite; }
.system-visual.visible .flow-node:nth-of-type(1) { animation: flow-node-one 9s ease 1.1s infinite; }.system-visual.visible .flow-node:nth-of-type(2) { animation: flow-node-two 9s ease 1.1s infinite; }.system-visual.visible .flow-node:nth-of-type(3) { animation: flow-node-three 9s ease 1.1s infinite; }
.system-visual.visible .status-dot { animation: status-dot-pulse 3.4s ease-in-out infinite; }.system-visual.visible .live-badge { animation: live-badge-breathe 4.2s ease-in-out .4s infinite; }.system-visual.visible .check { animation: check-icon-pulse 3.8s ease-in-out 1.2s infinite; }
.system-visual.visible .orbit-one { animation: dashboard-orbit-clockwise 34s linear infinite; }.system-visual.visible .orbit-two { animation: dashboard-orbit-counterclockwise 43s linear infinite; }
.progress-ring.is-complete { animation: progress-ring-pulse 5.4s ease-in-out infinite; }
.system-visual.is-parallax-active .main-system-card, .system-visual.is-parallax-active .floating-card, .system-visual.is-parallax-active .completion-card { will-change: transform, translate; }

@keyframes dashboard-float { 0%, 100% { transform: translate3d(0,0,0) rotateY(-3deg) rotateX(2deg); } 50% { transform: translate3d(0,-8px,0) rotateY(-3deg) rotateX(2deg); } }
@keyframes dashboard-card-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes followup-card-float { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-7px,0); } }
@keyframes booking-card-drift { 0%, 100% { transform: translate3d(0,0,0); } 38% { transform: translate3d(5px,-4px,0); } 72% { transform: translate3d(-3px,3px,0); } }
@keyframes completion-card-float { 0%, 100% { transform: translate3d(0,0,0); } 35% { transform: translate3d(-2px,5px,0); } 70% { transform: translate3d(2px,-5px,0); } }
@keyframes chart-bar-rise { from { transform: scaleY(0); opacity: .35; } to { transform: scaleY(1); opacity: 1; } }
@keyframes chart-shimmer { 0%, 72%, 100% { opacity: 0; transform: translateX(-115%); } 82% { opacity: .42; } 94% { opacity: 0; transform: translateX(115%); } }
@keyframes workflow-dot-first { 0% { opacity: 0; background-position: 0 50%; } 3% { opacity: .85; } 29% { opacity: .85; background-position: 100% 50%; } 33%, 100% { opacity: 0; background-position: 100% 50%; } }
@keyframes workflow-dot-second { 0%, 34% { opacity: 0; background-position: 0 50%; } 37% { opacity: .85; } 63% { opacity: .85; background-position: 100% 50%; } 67%, 100% { opacity: 0; background-position: 100% 50%; } }
@keyframes flow-node-one { 0%, 8% { border-color: rgba(80,214,218,.45); color: #9ce6e8; background: rgba(15,166,166,.1); } 15%, 100% { border-color: rgba(255,255,255,.09); color: #9bb0c8; background: rgba(255,255,255,.025); } }
@keyframes flow-node-two { 0%, 31% { border-color: rgba(255,255,255,.09); color: #9bb0c8; background: rgba(255,255,255,.025); } 34%, 42% { border-color: rgba(80,214,218,.45); color: #9ce6e8; background: rgba(15,166,166,.1); } 49%, 100% { border-color: rgba(255,255,255,.09); color: #9bb0c8; background: rgba(255,255,255,.025); } }
@keyframes flow-node-three { 0%, 64% { border-color: rgba(0,168,181,.45); color: #89e3e8; background: rgba(0,122,133,.13); } 67%, 75% { border-color: rgba(95,226,206,.7); color: #c1f8ed; background: rgba(23,185,162,.18); } 82%, 100% { border-color: rgba(0,168,181,.45); color: #89e3e8; background: rgba(0,122,133,.13); } }
@keyframes status-dot-pulse { 0%, 100% { opacity: .85; box-shadow: 0 0 0 5px rgba(62,211,162,.08); } 50% { opacity: 1; box-shadow: 0 0 0 8px rgba(62,211,162,.02), 0 0 12px rgba(62,211,162,.2); } }
@keyframes live-badge-breathe { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
@keyframes check-icon-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(62,211,162,0); } 50% { transform: scale(1.06); box-shadow: 0 0 10px rgba(62,211,162,.18); } }
@keyframes dashboard-orbit-clockwise { to { transform: rotate(360deg); } }
@keyframes dashboard-orbit-counterclockwise { to { transform: rotate(-360deg); } }
@keyframes progress-ring-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.services { background: var(--soft-white); }
.section-heading { display: grid; grid-template-columns: 1.35fr .65fr; gap: 80px; align-items: end; margin-bottom: 55px; }
.section-heading h2 { max-width: 680px; margin-bottom: 0; }.section-heading > p { max-width: 500px; margin: 0 0 6px; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service-card { position: relative; display: flex; min-height: 315px; flex-direction: column; justify-content: center; overflow: hidden; padding: 32px; border: 1px solid #dce4ee; border-radius: var(--radius); background: var(--white); box-shadow: 0 14px 38px rgba(3, 21, 47, .045); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.service-card:hover { border-color: #b9cede; box-shadow: var(--shadow); transform: translateY(-6px); }
.service-card.featured { border-top: 3px solid var(--teal); }
.card-number { position: absolute; top: 25px; right: 28px; color: #cad5e2; font-size: .72rem; font-weight: 800; }
.service-icon { display: grid; width: 48px; height: 48px; margin-bottom: 25px; place-items: center; border-radius: 12px; color: var(--royal); background: #eaf2fc; }
.service-icon svg { width: 25px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.service-card.featured .service-icon { color: var(--teal); background: #e4f4f4; }
.service-card h3 { max-width: 260px; margin-bottom: 13px; font-size: 1.15rem; }.service-card p { margin: 0; color: #687991; font-size: .87rem; line-height: 1.7; }
.service-cta { position: relative; overflow: hidden; min-height: 335px; padding: 34px; border-radius: var(--radius); color: var(--white); background: linear-gradient(140deg, var(--royal), var(--teal)); box-shadow: 0 20px 44px rgba(6,72,168,.18); }
.service-cta::after { position: absolute; right: -70px; bottom: -80px; width: 220px; height: 220px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; content: ""; box-shadow: 0 0 0 38px rgba(255,255,255,.035), 0 0 0 76px rgba(255,255,255,.025); }
.service-cta .spark { display: block; margin-bottom: 45px; color: #f1d76e; font-size: 1.4rem; }.service-cta p { margin-bottom: 7px; color: #d5e5ee; font-size: .76rem; }.service-cta h3 { max-width: 280px; margin-bottom: 28px; color: var(--white); font-size: 1.5rem; }.service-cta .button { position: relative; z-index: 2; }

.why-us { position: relative; overflow: hidden; color: #b8c7da; background: linear-gradient(122deg, var(--navy), var(--midnight)); }
.why-us::after { position: absolute; top: -250px; right: -260px; width: 700px; height: 700px; border: 1px solid rgba(52,142,171,.12); border-radius: 50%; content: ""; box-shadow: 0 0 0 90px rgba(6,72,168,.025), 0 0 0 180px rgba(0,122,133,.02); }
.why-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: center; }
.why-copy h2 { color: var(--white); }.why-copy h2 em { color: #71c1c7; }.why-copy > p:not(.eyebrow) { max-width: 490px; margin-bottom: 32px; }.why-copy > .why-intro { margin-bottom: 19px; }.why-copy > .why-principle { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 32px; padding: 12px 15px 12px 25px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; color: #edf4fb; background: rgba(255,255,255,.045); font-size: .73rem; font-weight: 850; letter-spacing: .055em; line-height: 1.45; }.why-principle::before { position: absolute; top: 12px; bottom: 12px; left: 12px; width: 3px; border-radius: 3px; background: var(--gold); content: ""; }.why-principle em { color: #58d1d5; font-style: normal; }
.benefit-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.benefit-item { min-height: 190px; padding: 27px; border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); background: rgba(255,255,255,.035); transition: background var(--transition), transform var(--transition); }
.benefit-item:hover { background: rgba(255,255,255,.07); transform: translateY(-4px); }.benefit-item > span { display: block; margin-bottom: 25px; color: var(--gold); font-size: .68rem; font-weight: 800; }.benefit-item h3 { margin-bottom: 9px; color: var(--white); font-size: 1rem; letter-spacing: -.01em; }.benefit-item p { margin: 0; color: #94a8bf; font-size: .79rem; }

.process { background: var(--white); }
.center-heading { max-width: 750px; margin: 0 auto 60px; text-align: center; }.center-heading h2 { margin-bottom: 16px; }.center-heading > p:last-child { margin: 0; }
.process-list { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.process-list::before { position: absolute; top: 69px; right: 9%; left: 9%; height: 1px; background: linear-gradient(90deg, rgba(50,83,108,.1), rgba(80,111,135,.34) 16%, rgba(80,111,135,.34) 84%, rgba(50,83,108,.1)); content: ""; }
.process-list::after { position: absolute; z-index: 1; top: 63px; right: 9%; left: 9%; height: 13px; background-image: radial-gradient(circle, rgba(179,255,250,.95) 0 2px, rgba(55,198,207,.72) 3px, rgba(55,198,207,.2) 5px, transparent 9px); background-position: -90px center; background-repeat: no-repeat; background-size: 90px 13px; content: ""; opacity: 0; filter: drop-shadow(0 0 5px rgba(55,198,207,.38)); pointer-events: none; }
.process-list.is-active::after { animation: process-flow-horizontal 15s linear .85s infinite; }
.process-list li { position: relative; padding: 0 18px; text-align: center; }
.process-list li.reveal { transition-duration: 680ms; transition-timing-function: cubic-bezier(.2,.75,.25,1); }
.process-list li.reveal:nth-of-type(1) { transition-delay: 60ms; }.process-list li.reveal:nth-of-type(2) { transition-delay: 160ms; }.process-list li.reveal:nth-of-type(3) { transition-delay: 260ms; }.process-list li.reveal:nth-of-type(4) { transition-delay: 360ms; }.process-list li.reveal:nth-of-type(5) { transition-delay: 460ms; }
.step-number { display: block; margin-bottom: 20px; color: var(--royal); font-size: .65rem; font-weight: 850; letter-spacing: .12em; }
.step-icon { position: relative; z-index: 2; display: grid; width: 64px; height: 64px; margin: 0 auto 24px; place-items: center; border: 7px solid var(--white); border-radius: 50%; color: #087f89; background: linear-gradient(145deg, #f9ffff, #dff2f3); box-shadow: 0 0 0 1px rgba(20,139,149,.3), 0 8px 24px rgba(3,49,74,.09), inset 0 0 0 1px rgba(255,255,255,.85); }
.step-icon::before { position: absolute; inset: 4px; border: 1px solid rgba(55,198,207,.2); border-radius: inherit; content: ""; }
.step-icon svg { position: relative; z-index: 1; width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.process-list.is-active li:nth-of-type(1) { --process-step-delay: .85s; }.process-list.is-active li:nth-of-type(2) { --process-step-delay: 3.85s; }.process-list.is-active li:nth-of-type(3) { --process-step-delay: 6.85s; }.process-list.is-active li:nth-of-type(4) { --process-step-delay: 9.85s; }.process-list.is-active li:nth-of-type(5) { --process-step-delay: 12.85s; }
.process-list.is-active .step-icon { animation: process-step-highlight 15s ease-in-out var(--process-step-delay) infinite; }
.process-list.is-active .step-icon::before { animation: process-step-ring-highlight 15s ease-in-out var(--process-step-delay) infinite; }
.process-list.is-active .step-icon svg { animation: process-icon-highlight 15s ease-in-out var(--process-step-delay) infinite; }
.process-list h3 { margin-bottom: 10px; font-size: 1rem; }.process-list p { margin: 0; color: #607188; font-size: .84rem; line-height: 1.6; }

@keyframes process-flow-horizontal { 0% { opacity: 0; background-position: -90px center; } 3% { opacity: .85; } 80% { opacity: .85; background-position: calc(100% + 90px) center; } 84%, 100% { opacity: 0; background-position: calc(100% + 90px) center; } }
@keyframes process-flow-vertical { 0% { opacity: 0; background-position: center -90px; } 3% { opacity: .85; } 80% { opacity: .85; background-position: center calc(100% + 90px); } 84%, 100% { opacity: 0; background-position: center calc(100% + 90px); } }
@keyframes process-step-highlight { 0%, 8%, 100% { color: #087f89; background: linear-gradient(145deg, #f9ffff, #dff2f3); box-shadow: 0 0 0 1px rgba(20,139,149,.3), 0 8px 24px rgba(3,49,74,.09), inset 0 0 0 1px rgba(255,255,255,.85); transform: translate3d(0,0,0) scale(1); } 2.5%, 4.5% { color: #a4771f; background: linear-gradient(145deg, #fffdf7, #f8eed8); box-shadow: 0 0 0 1px rgba(214,178,94,.72), 0 0 0 7px rgba(214,178,94,.1), 0 9px 26px rgba(3,49,74,.11), 0 0 24px rgba(201,168,92,.28), inset 0 0 14px rgba(214,178,94,.12); transform: translate3d(0,-1px,0) scale(1.035); } }
@keyframes process-step-ring-highlight { 0%, 8%, 100% { border-color: rgba(55,198,207,.2); box-shadow: none; } 2.5%, 4.5% { border-color: rgba(214,178,94,.72); box-shadow: inset 0 0 9px rgba(214,178,94,.16); } }
@keyframes process-icon-highlight { 0%, 8%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); transform: scale(1); } 2.5%, 4.5% { filter: brightness(1.12) drop-shadow(0 0 3px rgba(214,178,94,.45)); transform: scale(1.04); } }

.work { color: #a8bbcf; background: #061a35; }.work .section-heading h2 { color: var(--white); }.work .section-heading h2 em { color: #6cbfc5; }.work .section-heading > p { color: #91a6bd; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.project-card { overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius); background: #0a2343; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }.project-card:hover { border-color: rgba(15,166,166,.48); box-shadow: 0 22px 50px rgba(0,0,0,.2); transform: translateY(-6px); }
.project-media { position: relative; display: flex; height: 220px; flex-direction: column; align-items: center; justify-content: center; gap: 12px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.08); color: #8fa6bd; background: linear-gradient(145deg, #0d3158, #0a4052); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-align: center; }
.project-media::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 32px 32px; content: ""; mask-image: linear-gradient(to bottom, black, transparent); }
.project-media::after { position: absolute; width: 145px; height: 145px; border: 1px solid rgba(55,198,207,.14); border-radius: 50%; content: ""; box-shadow: 0 0 0 32px rgba(15,166,166,.025); }
.project-placeholder-icon { position: relative; z-index: 1; display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(55,198,207,.28); border-radius: 12px; color: #57cdd3; background: rgba(3,21,47,.42); font-size: 1.35rem; }.project-media > span:last-child { position: relative; z-index: 1; }
.project-body { padding: 27px; }.project-category { margin-bottom: 9px; color: #58c5c5; font-size: .62rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }.project-body h3 { min-height: 2.3em; margin-bottom: 12px; color: var(--white); font-size: 1.15rem; }.project-body > p:not(.project-category) { min-height: 82px; color: #a5b6c8; font-size: .82rem; }.project-link { padding: 0; border: 0; color: #69d0d0; background: transparent; cursor: pointer; }
.case-study { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }.case-study h4 { margin: 14px 0 4px; color: #60c8cb; font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; }.case-study h4:first-child { margin-top: 0; }.case-study p { margin: 0; color: #a9bacb; font-size: .76rem; line-height: 1.6; }
.project-materials { display: flex; flex-wrap: wrap; gap: 7px; margin: 9px 0 2px; padding: 0; list-style: none; }.project-materials li { padding: 5px 8px; border: 1px solid rgba(105,208,208,.2); border-radius: 999px; color: #9ddfe0; background: rgba(55,198,207,.055); font-size: .6rem; font-weight: 700; letter-spacing: .02em; }

.project-media-image { isolation: isolate; background: #071e3d; }
.project-media-image::before { z-index: 1; background: linear-gradient(180deg, rgba(3,21,47,.03) 35%, rgba(3,21,47,.58) 100%); content: ""; mask-image: none; }
.project-media-image::after { display: none; }
.project-featured-image { width: 100%; height: 100%; object-fit: cover; object-position: center 34%; transition: transform 650ms cubic-bezier(.2,.75,.25,1); }
.project-featured-image-glow-haven { object-position: center top; }
.project-featured-image-social-media { object-position: center 46%; }
.project-featured-image-video-editing { object-position: center 52%; }
.project-card-has-image:hover .project-featured-image { transform: scale(1.045); }
.project-modal-open { display: inline-flex; min-height: 40px; align-items: center; gap: 8px; font-weight: 800; }
.project-modal-open span { transition: transform var(--transition); }
.project-modal-open:hover span { transform: translate(2px, -2px); }

/* Reusable portfolio project modal */
.project-modal[hidden] { display: none; }
.project-modal { position: fixed; z-index: 1100; inset: 0; display: grid; overflow: auto; padding: 18px; place-items: center; background: rgba(2,13,31,.82); opacity: 0; backdrop-filter: blur(12px); overscroll-behavior: contain; transition: opacity 220ms ease; }
.project-modal.is-open { opacity: 1; }
.project-modal-panel { position: relative; width: min(1180px, 100%); max-height: calc(100dvh - 36px); overflow: hidden; border: 1px solid rgba(91,210,216,.22); border-radius: 24px; background: #071e3d; box-shadow: 0 36px 100px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.035) inset; transform: translateY(18px) scale(.985); transition: transform 260ms cubic-bezier(.2,.75,.25,1); }
.project-modal.is-open .project-modal-panel { transform: translateY(0) scale(1); }
.project-modal-close { position: absolute; z-index: 8; top: 16px; right: 16px; display: grid; width: 42px; height: 42px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: #f7f9fc; background: rgba(3,21,47,.82); box-shadow: 0 8px 22px rgba(0,0,0,.22); cursor: pointer; transition: color var(--transition), border-color var(--transition), background var(--transition), transform var(--transition); }
.project-modal-close:hover { border-color: rgba(55,198,207,.7); color: #37c6cf; background: #09284c; transform: rotate(3deg); }
.project-modal-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.project-modal-layout { display: grid; max-height: calc(100dvh - 36px); grid-template-columns: minmax(300px,.78fr) minmax(0,1.32fr); overflow-y: auto; scrollbar-color: rgba(55,198,207,.42) rgba(255,255,255,.04); }
.project-modal-details { padding: 45px 36px 38px; border-right: 1px solid rgba(255,255,255,.08); background: linear-gradient(150deg, rgba(11,46,82,.96), rgba(5,27,56,.98)); }
.project-modal-label { margin-bottom: 11px; color: #37c6cf; font-size: .65rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.project-modal-details h2 { max-width: 410px; margin-bottom: 30px; color: #f7f9fc; font-size: clamp(1.85rem,3vw,2.55rem); }
.project-detail-section { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); }
.project-detail-section + .project-detail-section { margin-top: 18px; }
.project-detail-section h3 { margin-bottom: 7px; color: #d8aa45; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.project-detail-section p { margin: 0; color: #adc0d3; font-size: .78rem; line-height: 1.7; }
.project-modal-features ul { display: grid; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
.project-modal-features li { position: relative; padding-left: 18px; color: #c2d0de; font-size: .74rem; line-height: 1.5; }
.project-modal-features li::before { position: absolute; top: .65em; left: 1px; width: 6px; height: 6px; border-radius: 50%; background: #37c6cf; box-shadow: 0 0 9px rgba(55,198,207,.45); content: ""; }
.project-gallery { min-width: 0; padding: 58px 28px 24px; background: radial-gradient(circle at 75% 12%, rgba(15,166,166,.11), transparent 35%), #06162f; }
.project-gallery-stage { position: relative; height: clamp(360px,48vh,550px); overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: #020916; box-shadow: 0 18px 50px rgba(0,0,0,.28); touch-action: pan-y; user-select: none; }
.project-gallery-filters[hidden] { display: none; }
.project-gallery-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.project-gallery-filters button { min-height: 36px; padding: 8px 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: #b8c7d8; background: rgba(10,37,69,.78); font: inherit; font-size: .68rem; font-weight: 800; cursor: pointer; transition: color var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition); }
.project-gallery-filters button:hover { border-color: rgba(55,198,207,.58); color: #f7f9fc; }
.project-gallery-filters button[aria-pressed="true"] { border-color: #37c6cf; color: #03152f; background: #37c6cf; box-shadow: 0 0 18px rgba(55,198,207,.18); }
.project-gallery-track { display: flex; height: 100%; transform: translate3d(0,0,0); transition: transform 420ms cubic-bezier(.25,.7,.25,1); will-change: transform; }
.project-gallery-slide { display: grid; min-width: 100%; height: 100%; flex: 0 0 100%; margin: 0; padding: clamp(10px,2vw,22px); place-items: center; background: radial-gradient(circle at center, rgba(19,61,91,.35), transparent 70%); }
.project-gallery-slide img { width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; }
.project-gallery-control { position: absolute; z-index: 2; top: 50%; display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #f7f9fc; background: rgba(3,21,47,.78); box-shadow: 0 8px 22px rgba(0,0,0,.24); cursor: pointer; transform: translateY(-50%); transition: color var(--transition), border-color var(--transition), background var(--transition); }
.project-gallery-control:hover { border-color: #37c6cf; color: #37c6cf; background: rgba(5,37,69,.96); }
.project-gallery-previous { left: 13px; }
.project-gallery-next { right: 13px; }
.project-gallery-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 13px 2px 10px; }
.project-gallery-caption-block p { margin: 0; color: #f7f9fc; font-size: .82rem; font-weight: 800; }
.project-gallery-category { display: block; margin-bottom: 3px; color: #d5b24b; font-size: .59rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.project-gallery-category[hidden] { display: none; }
.project-gallery-actions { display: flex; flex: none; align-items: center; gap: 14px; }
.project-gallery-counter { color: #66d4da; font-size: .68rem; font-weight: 800; letter-spacing: .08em; }
.project-gallery-watch { color: #37c6cf; font-size: .68rem; font-weight: 800; text-decoration: none; }
.project-gallery-watch[hidden] { display: none; }
.project-gallery-thumbnails { display: flex; gap: 8px; overflow-x: auto; padding: 3px 2px 9px; overscroll-behavior-inline: contain; scrollbar-color: rgba(55,198,207,.42) transparent; scrollbar-width: thin; }
.project-gallery-thumbnails button { width: 78px; height: 55px; flex: 0 0 78px; overflow: hidden; padding: 3px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: #0a2545; opacity: .62; cursor: pointer; transition: opacity var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.project-gallery-thumbnails button:hover { opacity: .9; transform: translateY(-2px); }
.project-gallery-thumbnails button[aria-current="true"] { border-color: #37c6cf; opacity: 1; box-shadow: 0 0 0 2px rgba(55,198,207,.12), 0 0 18px rgba(55,198,207,.14); }
.project-gallery-thumbnails img { width: 100%; height: 100%; border-radius: 5px; object-fit: cover; }
.project-gallery-hint { margin: 7px 0 0; color: #768ca4; font-size: .62rem; text-align: center; }

.about { overflow: hidden; background: #f1f5fa; }
.about-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 95px; align-items: center; }
.about-visual { position: relative; display: grid; min-height: 480px; place-items: center; }
.about-orbit { position: relative; display: grid; width: 390px; height: 390px; place-items: center; }
.orbit-glow { position: absolute; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(15,166,166,.15), rgba(6,72,168,.06) 46%, transparent 72%); filter: blur(4px); }
.orbit-ring { position: absolute; border-radius: 50%; transform-origin: center; will-change: transform; }
.orbit-ring-outer { inset: 8px; border: 1px dashed rgba(75,130,165,.37); animation: orbit-clockwise 42s linear infinite; }
.orbit-ring-middle { inset: 55px; border: 1px solid rgba(15,166,166,.25); box-shadow: 0 0 28px rgba(15,166,166,.035) inset; animation: orbit-counterclockwise 56s linear infinite; }
.orbit-ring-inner { inset: 103px; border: 1px dotted rgba(6,72,168,.35); animation: orbit-clockwise 68s linear infinite; }
.orbit-ring::before, .orbit-ring::after { position: absolute; border-radius: 50%; content: ""; }
.orbit-ring-outer::before { inset: 34px; border: 1px solid rgba(6,72,168,.08); }
.orbit-ring-middle::after { inset: 21px; border: 1px dashed rgba(15,166,166,.12); }
.orbit-node { position: absolute; display: block; width: 8px; height: 8px; border: 2px solid #f1f5fa; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(15,166,166,.1), 0 0 12px rgba(15,166,166,.2); }
.node-one { top: 12%; right: 19%; }.node-two { bottom: 17%; left: 10%; width: 6px; height: 6px; background: var(--royal); }
.node-three { top: -4px; left: 47%; background: var(--gold); box-shadow: 0 0 0 4px rgba(201,168,92,.1); }.node-four { right: -4px; bottom: 35%; width: 6px; height: 6px; }
.node-five { bottom: 6%; left: 18%; width: 7px; height: 7px; background: var(--royal); }
.orbit-core { position: relative; z-index: 3; display: grid; width: 118px; height: 118px; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: radial-gradient(circle at 38% 30%, #0b4d80, var(--midnight) 64%, var(--navy)); box-shadow: 0 18px 38px rgba(3,21,47,.22), 0 0 0 9px rgba(255,255,255,.65), 0 0 0 10px rgba(15,166,166,.13), 0 0 40px rgba(15,166,166,.15); }
.orbit-brand-mark { position: relative; display: block; width: 90px; height: 76px; overflow: hidden; }
.orbit-brand-mark img { position: absolute; top: -40px; left: -131px; width: 344px; max-width: none; filter: brightness(1.12) saturate(1.06); mix-blend-mode: screen; }
.about-label { position: absolute; z-index: 5; padding: 9px 16px; border: 1px solid #d4e0e9; border-radius: 30px; color: var(--ink); background: rgba(255,255,255,.94); box-shadow: 0 10px 24px rgba(3,21,47,.09); font-size: .7rem; font-weight: 800; letter-spacing: .02em; backdrop-filter: blur(6px); animation: label-float 7s ease-in-out infinite; }
.about-label::before { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgba(15,166,166,.1); content: ""; vertical-align: 1px; }
.label-strategy { top: 42px; right: 4%; animation-delay: -1.5s; }.label-strategy::before { background: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,92,.11); }
.label-systems { bottom: 55px; left: 2%; animation-delay: -4s; }.label-systems::before { background: var(--royal); box-shadow: 0 0 0 3px rgba(6,72,168,.1); }
.label-creativity { right: -1%; bottom: 110px; animation-delay: -5.5s; }
.about-copy > p:not(.eyebrow) { margin-bottom: 34px; font-size: .94rem; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #d7e0ea; }
.stats-grid div { padding: 25px 18px 0 0; }.stats-grid div + div { padding-left: 18px; border-left: 1px solid #d7e0ea; }
.stats-grid strong, .stats-grid span { display: block; }.stats-grid strong { margin-bottom: 7px; color: var(--royal); font-size: 1.15rem; }.stats-grid span { color: #6d7e91; font-size: .7rem; line-height: 1.35; }

@keyframes orbit-clockwise { to { transform: rotate(360deg); } }
@keyframes orbit-counterclockwise { to { transform: rotate(-360deg); } }
@keyframes label-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -7px, 0); } }

.toolkit { overflow: hidden; background: #f2f6fa; }.toolkit .center-heading { margin-bottom: 46px; }.tool-marquees { display: grid; gap: 18px; }.tool-marquee { overflow: hidden; outline: 0; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }.tool-track { display: flex; width: max-content; will-change: transform; }.tool-sequence { display: flex; flex: none; gap: 18px; padding-right: 18px; }.tool-item { position: relative; isolation: isolate; display: flex; width: 236px; min-height: 82px; flex: 0 0 236px; align-items: center; gap: 13px; overflow: hidden; padding: 13px 15px; border: 1px solid #d7e3ec; border-radius: 14px; background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(247,251,253,.94)); box-shadow: 0 10px 28px rgba(3,21,47,.065), inset 0 1px 0 rgba(255,255,255,.95); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }.tool-item::before { position: absolute; z-index: -1; top: 50%; left: -18px; width: 112px; height: 112px; border-radius: 50%; background: radial-gradient(circle, rgba(55,198,207,.14), rgba(55,198,207,.045) 42%, transparent 70%); content: ""; transform: translateY(-50%); }.tool-item:nth-child(3n)::before { background: radial-gradient(circle, rgba(201,168,92,.13), rgba(201,168,92,.04) 42%, transparent 70%); }.tool-item:hover, .tool-item:focus-visible { border-color: rgba(15,166,166,.38); outline: 0; box-shadow: 0 16px 34px rgba(3,21,47,.11), 0 0 0 3px rgba(15,166,166,.07), inset 0 1px 0 #fff; transform: translateY(-3px); }.tool-logo, .tool-logo-placeholder { position: relative; display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border: 1px solid rgba(6,72,168,.1); border-radius: 12px; background: linear-gradient(145deg, rgba(239,247,253,.96), rgba(234,247,246,.9)); box-shadow: 0 7px 18px rgba(6,72,168,.075), inset 0 1px 0 rgba(255,255,255,.95); }.tool-logo::before, .tool-logo-placeholder::before { position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(circle, rgba(55,198,207,.13), transparent 68%); content: ""; }.tool-logo img { position: relative; z-index: 1; width: 82%; height: 82%; max-width: 82%; max-height: 82%; object-fit: contain; filter: drop-shadow(0 3px 7px rgba(3,21,47,.1)); }.tool-logo-placeholder { color: var(--royal); font-size: .72rem; font-weight: 950; letter-spacing: .04em; }.tool-logo-placeholder::after { position: relative; z-index: 1; content: attr(data-fallback); }.tool-copy { display: flex; min-width: 0; align-items: center; }.tool-copy strong { display: block; color: var(--ink); font-size: .82rem; line-height: 1.25; }.tool-marquee-left .tool-track { animation: toolkit-scroll-left 52s linear infinite; }.tool-marquee-right .tool-track { animation: toolkit-scroll-right 52s linear infinite; }.tool-marquee:hover .tool-track, .tool-marquee:focus-within .tool-track { animation-play-state: paused; }
@keyframes toolkit-scroll-left { to { transform: translate3d(-50%,0,0); } }
@keyframes toolkit-scroll-right { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }

.cta-section { overflow: hidden; padding: 100px 0; background: linear-gradient(125deg, #061b38, var(--midnight) 55%, #06475b); }.cta-inner { position: relative; text-align: center; }.cta-inner::before, .cta-inner::after { position: absolute; top: 50%; width: 310px; height: 310px; border: 1px solid rgba(255,255,255,.06); border-radius: 50%; content: ""; transform: translateY(-50%); }.cta-inner::before { left: -290px; box-shadow: 0 0 0 60px rgba(255,255,255,.02); }.cta-inner::after { right: -290px; box-shadow: 0 0 0 60px rgba(255,255,255,.02); }.cta-spark { margin-bottom: 15px; color: var(--gold); font-size: 1.35rem; }.cta-inner h2 { max-width: 750px; margin: 0 auto 18px; color: var(--white); }.cta-inner h2 em { color: #6dc1c7; }.cta-inner > p:not(.eyebrow) { max-width: 610px; margin: 0 auto 30px; color: #a9bbcf; }.centered-buttons { justify-content: center; }

.contact { background: var(--white); }.contact-grid { display: grid; grid-template-columns: .76fr 1.24fr; gap: 90px; align-items: start; }.contact-grid > * { min-width: 0; }.contact-copy > p:not(.eyebrow) { margin-bottom: 35px; }.contact-detail { display: flex; align-items: center; gap: 15px; margin: 18px 0; }.contact-detail > span { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 11px; color: var(--royal); background: #eaf2fc; }.contact-detail small, .contact-detail strong, .contact-detail a { display: block; }.contact-detail small { color: #8a99ab; font-size: .66rem; }.contact-detail strong, .contact-detail a { color: var(--ink); font-size: .82rem; font-weight: 750; }.contact-detail a:hover { color: var(--royal); }.contact-form { padding: 35px; border: 1px solid #dce4ec; border-radius: var(--radius); background: #f9fbfd; box-shadow: var(--shadow); }.ghl-form-embed { width: 100%; margin-inline: auto; overflow: hidden; }.ghl-form-embed iframe { display: block; width: 100% !important; max-width: 100%; overflow: hidden; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.form-field { margin-bottom: 18px; }.form-field label { display: block; margin-bottom: 7px; color: var(--ink); font-size: .72rem; font-weight: 800; }.form-field label span { color: var(--royal); }.form-field input, .form-field select, .form-field textarea { width: 100%; border: 1px solid #d1dce7; border-radius: 8px; color: var(--ink); background: var(--white); transition: border-color var(--transition), box-shadow var(--transition); }.form-field input, .form-field select { height: 49px; padding: 0 14px; }.form-field textarea { min-height: 125px; padding: 12px 14px; resize: vertical; }.form-field input::placeholder, .form-field textarea::placeholder { color: #99a7b7; }.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--teal); outline: 0; box-shadow: 0 0 0 3px rgba(15,166,166,.11); }.form-field input[aria-invalid="true"], .form-field select[aria-invalid="true"], .form-field textarea[aria-invalid="true"] { border-color: #bd3341; }.submit-button { width: 100%; border: 0; }.form-note { margin: 11px 0 0; text-align: center; color: #77879a; font-size: .68rem; }.booking-option { margin: 10px 0 0; text-align: center; color: #65768a; font-size: .72rem; }.booking-option a { color: var(--teal); font-weight: 850; }.booking-option a:hover { text-decoration: underline; }.form-status { display: none; margin-top: 16px; padding: 13px 15px; border: 1px solid #a5ded0; border-radius: 8px; color: #116349; background: #e9f8f3; font-size: .78rem; font-weight: 700; }.form-status.show { display: block; }.form-status.error { border-color: #efc0c5; color: #8c2530; background: #fff0f1; }

.site-footer { padding-top: 75px; color: #91a5bc; background: var(--navy); }.footer-grid { display: grid; grid-template-columns: 1.45fr .62fr .9fr 1fr; gap: 55px; padding-bottom: 58px; }.footer-brand > p { max-width: 350px; margin: 18px 0 15px; font-size: .8rem; }.footer-brand .footer-tagline { margin-top: 22px; margin-bottom: 0; color: #62cbd0; font-size: .68rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }.footer-email { color: #d5e2ef; font-size: .78rem; font-weight: 750; }.footer-email:hover { color: var(--gold); }.social-placeholders { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }.social-placeholders span { padding: 5px 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; color: #788da5; font-size: .58rem; }.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }.footer-column h2 { margin-bottom: 8px; color: var(--white); font-size: .76rem; letter-spacing: .03em; }.footer-column a { font-size: .75rem; transition: color var(--transition); }.footer-column > a:hover { color: var(--white); }.footer-action p { margin-bottom: 10px; font-size: .75rem; }.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.08); }.footer-bottom p { margin: 0; font-size: .66rem; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease, transform 700ms ease; }.reveal.delay-one { transition-delay: 110ms; }.reveal.delay-two { transition-delay: 220ms; }.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1020px) {
  html { scroll-padding-top: 96px; }
  .hero-grid { gap: 35px; }.hero { min-height: 740px; }.hero h1 { font-size: clamp(2.7rem, 5.7vw, 3.8rem); }.system-visual { transform: scale(.92); transform-origin: center; }
  .navbar { height: 86px; }.brand { gap: 6px; }.brand-mark { width: 79px; height: 64px; flex-basis: 79px; }.brand-mark img { top: -36px; left: -121px; width: 316px; }.brand-name { font-size: 1.22rem; }.brand-name small { margin-top: 7px; font-size: .54rem; }.nav-menu { margin-left: auto; }.nav-links { gap: 20px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }.why-grid { gap: 50px; }
  .process-list { max-width: 720px; grid-template-columns: 1fr; gap: 24px; margin-right: auto; margin-left: auto; }
  .process-list::before { display: block; top: 32px; right: auto; bottom: 32px; left: 32px; width: 1px; height: auto; }
  .process-list::after { top: 26px; right: auto; bottom: 26px; left: 26px; width: 13px; height: auto; background-position: center -90px; background-size: 13px 90px; }
  .process-list.is-active::after { animation: process-flow-vertical 15s linear .85s infinite; }
  .process-list li { display: grid; min-height: 108px; grid-template-columns: 64px 1fr; grid-template-rows: auto auto 1fr; gap: 0 20px; padding: 0; text-align: left; }
  .step-number { grid-column: 2; grid-row: 1; margin: 2px 0 3px; text-align: left; }
  .step-icon { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  .process-list h3 { grid-column: 2; grid-row: 2; margin: 0 0 7px; }.process-list p { grid-column: 2; grid-row: 3; }
  .project-grid { gap: 16px; }.project-body { padding: 22px; }.about-grid, .contact-grid { gap: 55px; }.footer-grid { grid-template-columns: 1.4fr .7fr 1fr; }.footer-action { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.08); }.footer-action h2, .footer-action p { margin: 0; }
  .system-visual.visible .floating-card-left { animation: dashboard-card-enter .5s ease-out .2s both; }.system-visual.visible .floating-card-right { animation: dashboard-card-enter .5s ease-out .35s both; }.system-visual.visible .completion-card { animation: dashboard-card-enter .5s ease-out .5s both; }
  .system-visual.visible .mini-chart::after, .system-visual.visible .workflow > i::after, .system-visual.visible .flow-node, .progress-ring.is-complete { animation: none !important; }
  .main-system-card, .floating-card, .completion-card { translate: none !important; }
}

@media (max-width: 900px) {
  .project-modal-layout { grid-template-columns: 1fr; }
  .project-modal-details { padding: 42px 34px 34px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .project-modal-details h2 { max-width: 620px; }
  .project-modal-features ul { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 24px; }
  .project-gallery { padding: 32px 26px 24px; }
  .project-gallery-stage { height: min(56vw,460px); min-height: 330px; }
}

@media (max-width: 820px) {
  .section { padding: 85px 0; }.menu-toggle { display: block; }
  .nav-menu { position: fixed; top: 0; right: 0; bottom: 0; width: min(82vw, 360px); display: flex; flex: none; flex-direction: column; align-items: stretch; justify-content: center; margin-left: 0; padding: 85px 36px 40px; background: rgba(3,21,47,.985); box-shadow: -20px 0 50px rgba(0,0,0,.25); transform: translateX(105%); transition: transform 300ms ease; }.nav-menu.open { transform: translateX(0); }.nav-links { flex-direction: column; align-items: stretch; gap: 8px; }.nav-links a { display: block; padding: 13px 0; font-size: 1.05rem; }.menu-toggle { position: relative; z-index: 3; }.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hero { min-height: auto; padding: 140px 0 90px; }.hero-grid { grid-template-columns: 1fr; }.hero-copy { text-align: center; }.hero-copy .eyebrow, .hero-copy .button-group, .hero-trust { justify-content: center; }.hero-copy h1, .hero-lead { margin-right: auto; margin-left: auto; }.system-visual { width: min(100%, 570px); min-height: 460px; margin: 5px auto 0; transform: none; }
  .section-heading { grid-template-columns: 1fr; gap: 20px; }.why-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; }.why-copy { max-width: 640px; }.about-visual { order: 2; min-height: 390px; }.project-grid { grid-template-columns: 1fr; }.project-card { display: grid; grid-template-columns: .9fr 1.1fr; }.project-media { height: 100%; min-height: 275px; }.project-body > p:not(.project-category) { min-height: auto; }.footer-grid { grid-template-columns: 1.4fr .8fr 1fr; gap: 35px; }
}

@media (max-width: 600px) {
  html { scroll-padding-top: 88px; }
  .container { width: min(calc(100% - 28px), var(--container)); }.section { padding: 72px 0; }.navbar { height: 72px; justify-content: space-between; gap: 14px; }.navbar > .brand { min-width: 0; max-width: calc(100% - 58px); gap: 4px; white-space: nowrap; }.navbar .brand-name { min-width: 0; overflow: hidden; font-size: 1rem; line-height: .95; text-overflow: clip; white-space: nowrap; }.navbar .brand-name small { margin-top: 5px; font-size: .46rem; letter-spacing: .34em; line-height: 1; }.navbar .brand-mark { width: 50px; height: 42px; flex: 0 0 50px; }.navbar .brand-mark img { top: -24px; left: -77px; width: 204px; }.menu-toggle { flex: 0 0 44px; margin-left: 0; }
  .hero { padding: 120px 0 68px; }.hero h1 { font-size: clamp(1.9rem, 8.8vw, 2.5rem); }.hero h1 em { display: block; }.hero-lead { font-size: .96rem; }.hero-copy .button-group { flex-direction: column; }.hero-copy .button { width: 100%; }.hero-trust { gap: 12px; }.system-visual { min-height: 390px; margin-top: 10px; }.main-system-card { top: 63px; left: 2%; width: 96%; padding: 17px; }.floating-card-left { top: 13px; left: 0; }.floating-card-right { top: 200px; right: 0; }.completion-card { right: 4%; bottom: 5px; }.metric-row { margin: 20px 0; }.flow-node { flex-basis: 70px; }.visual-orbit { display: none; }
  .services-grid, .benefit-list { grid-template-columns: 1fr; }.service-card, .service-cta { min-height: 0; }.benefit-item { min-height: 0; }.process-list { gap: 22px; }.process-list::before { top: 27px; bottom: 27px; left: 27px; }.process-list::after { top: 21px; bottom: 21px; left: 21px; }.process-list li { min-height: 104px; grid-template-columns: 54px 1fr; column-gap: 16px; }.step-icon { width: 54px; height: 54px; border-width: 6px; }.step-icon svg { width: 22px; height: 22px; }
  .project-card { display: block; }.project-media { height: 225px; min-height: 0; }.about-grid { gap: 30px; }.about-visual { min-height: 350px; transform: none; }.about-orbit { width: 310px; height: 310px; }.orbit-ring-middle { inset: 44px; }.orbit-ring-inner { inset: 82px; }.orbit-core { width: 104px; height: 104px; }.orbit-brand-mark { width: 80px; height: 68px; }.orbit-brand-mark img { top: -35px; left: -115px; width: 302px; }.label-strategy { top: 22px; right: 1%; }.label-systems { bottom: 33px; left: 1%; }.label-creativity { right: 0; bottom: 88px; }.stats-grid { grid-template-columns: 1fr; }.stats-grid div { padding: 17px 0; }.stats-grid div + div { padding-left: 0; border-top: 1px solid #d7e0ea; border-left: 0; }.cta-section { padding: 75px 0; }.centered-buttons { flex-direction: column; }.centered-buttons .button { width: 100%; }
  .toolkit .center-heading { margin-bottom: 36px; }.tool-marquees { gap: 14px; }.tool-sequence { gap: 12px; padding-right: 12px; }.tool-item { width: 210px; min-height: 74px; flex-basis: 210px; padding: 11px 12px; }.tool-logo, .tool-logo-placeholder { width: 42px; height: 42px; flex-basis: 42px; }.tool-copy strong { font-size: .76rem; }
  .project-modal { padding: 0; place-items: stretch; }
  .project-modal-panel { width: 100%; max-height: 100dvh; min-height: 100dvh; border: 0; border-radius: 0; }
  .project-modal-layout { max-height: 100dvh; }
  .project-modal-close { top: 12px; right: 12px; }
  .project-modal-details { padding: 68px 20px 28px; }
  .project-modal-details h2 { margin-bottom: 24px; font-size: 1.75rem; }
  .project-detail-section + .project-detail-section { margin-top: 15px; }
  .project-modal-features ul { grid-template-columns: 1fr; }
  .project-gallery { padding: 24px 14px 20px; }
  .project-gallery-stage { height: 260px; min-height: 0; border-radius: 12px; }
  .project-gallery-slide { padding: 8px; }
  .project-gallery-control { width: 40px; height: 40px; }
  .project-gallery-previous { left: 8px; }.project-gallery-next { right: 8px; }
  .project-gallery-thumbnails button { width: 68px; height: 49px; flex-basis: 68px; }
  .project-gallery-hint { margin-top: 5px; }
  .contact-grid { gap: 38px; }.contact-form { padding: 23px 17px; }.form-row { grid-template-columns: 1fr; gap: 0; }.footer-grid { grid-template-columns: 1fr 1fr; }.footer-brand { grid-column: 1 / -1; }.footer-action { grid-column: 1 / -1; flex-direction: column; align-items: flex-start; }.footer-bottom { align-items: flex-start; gap: 8px; flex-direction: column; }
  .system-visual.visible .status-dot, .system-visual.visible .live-badge, .system-visual.visible .check, .system-visual.visible .orbit-one, .system-visual.visible .orbit-two { animation: none; }
}

@media (max-width: 380px) {
  .navbar { height: 68px; gap: 10px; }
  .navbar > .brand { max-width: calc(100% - 54px); gap: 3px; }
  .navbar .brand-mark { width: 44px; height: 38px; flex-basis: 44px; }
  .navbar .brand-mark img { top: -21px; left: -69px; width: 181px; }
  .navbar .brand-name { font-size: .9rem; letter-spacing: .1em; }
  .navbar .brand-name small { margin-top: 4px; font-size: .42rem; letter-spacing: .3em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .orbit-ring, .about-label { animation: none !important; }
  .process-list::after { display: none; }
  .process-list .step-icon, .process-list .step-icon::before, .process-list .step-icon svg { animation: none !important; transform: none !important; }
  .system-visual .main-system-card, .system-visual .floating-card, .system-visual .completion-card, .system-visual .status-dot, .system-visual .live-badge, .system-visual .check, .system-visual .visual-orbit, .system-visual .flow-node, .progress-ring { animation: none !important; opacity: 1; translate: none !important; }
  .system-visual .mini-chart i { animation: none !important; opacity: 1; transform: scaleY(1); }
  .system-visual .mini-chart::after, .system-visual .workflow > i::after { display: none; }
  .project-card-has-image:hover .project-featured-image, .project-modal-close:hover, .project-gallery-thumbnails button:hover { transform: none; }
  .project-gallery-track { transition: none !important; will-change: auto; }
  .tool-marquee { overflow: visible; mask-image: none; }.tool-track { width: 100%; animation: none !important; transform: none !important; will-change: auto; }.tool-sequence { width: 100%; flex-wrap: wrap; justify-content: center; padding: 0; }.tool-sequence[aria-hidden="true"] { display: none; }
}