:root {
  --navy: #071522;
  --navy-2: #0b1d2c;
  --navy-3: #123047;
  --blue: #8ebddd;
  --white: #f6f3ec;
  --muted: #aab7bf;
  --line: rgba(246, 243, 236, .18);
  --page: min(1280px, calc(100vw - 64px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 116px; }
body { margin: 0; color: var(--white); background: var(--navy); font-family: Georgia, "Times New Roman", Times, serif; font-size: 17px; line-height: 1.5; }
button, input, textarea { font: inherit; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: -80px; left: 20px; padding: 12px 16px; color: var(--navy); background: var(--white); font-weight: 700; }
.skip-link:focus { top: 20px; }

.site-header { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 116px; display: flex; align-items: center; justify-content: space-between; padding-inline: max(32px, calc((100vw - 1280px) / 2)); border-bottom: 1px solid var(--line); background: rgba(7, 21, 34, .94); box-shadow: 0 12px 38px rgba(0, 0, 0, .14); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 15px; text-decoration: none; }
.brand-icon { width: 66px; height: 66px; object-fit: contain; filter: brightness(0) invert(1); }
.wordmark { width: 174px; display: flex; flex-direction: column; line-height: .82; }
.wordmark strong, .wordmark small { display: flex; justify-content: space-between; width: 100%; }
.wordmark strong { font-family: Didot, "Bodoni MT", Georgia, serif; font-size: 2.25rem; font-weight: 500; letter-spacing: 0; }
.wordmark small { margin-top: 12px; font-family: Georgia, "Times New Roman", serif; font-size: .61rem; font-weight: 700; line-height: 1; }
.wordmark strong span, .wordmark small span { display: block; }
.site-nav { display: flex; gap: 38px; align-items: center; }
.site-nav a { color: var(--muted); text-decoration: none; font-size: .95rem; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--white); }
.menu-button { display: none; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; }
.menu-button span { display: block; height: 2px; margin: 5px 0; background: var(--white); }

.hero { min-height: 760px; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, .86fr); gap: clamp(60px, 8vw, 130px); align-items: center; width: var(--page); margin-inline: auto; padding-top: 116px; }
.hero h1 { max-width: 760px; margin: 0; font-family: Didot, "Bodoni MT", Georgia, serif; font-size: clamp(4.2rem, 7.5vw, 8rem); font-weight: 400; line-height: .88; letter-spacing: -.055em; }
.hero-copy { max-width: 650px; margin: 36px 0; color: #c6d0d6; font-size: clamp(1.08rem, 1.55vw, 1.3rem); }
.primary-link { display: inline-flex; gap: 56px; align-items: center; padding: 14px 19px; border: 1px solid var(--white); text-decoration: none; font-size: 1rem; }
.primary-link:hover, .primary-link:focus-visible { color: var(--navy); background: var(--white); }

.capability-reel { min-width: 0; border: 1px solid rgba(246, 243, 236, .32); background: var(--navy-2); box-shadow: 0 35px 90px rgba(0, 0, 0, .35); touch-action: pan-y; }
.reel-window { overflow: hidden; }
.reel-track { display: flex; transition: transform .55s cubic-bezier(.22, .8, .22, 1); }
.reel-slide { position: relative; min-width: 100%; height: 470px; margin: 0; overflow: hidden; background: #10283a; }
.reel-image { position: absolute; inset: 0; overflow: hidden; }
.reel-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 21, 34, .95), transparent 55%); }
.reel-image span { position: absolute; display: block; border: 1px solid rgba(246, 243, 236, .28); }
.reel-slide-one .reel-image { background: radial-gradient(circle at 68% 26%, rgba(142, 189, 221, .42), transparent 34%), linear-gradient(145deg, #153a55, #071522 72%); }
.reel-slide-one .reel-image span:nth-child(1) { width: 54%; height: 42%; left: 11%; top: 18%; transform: rotate(-8deg); }
.reel-slide-one .reel-image span:nth-child(2) { width: 42%; height: 31%; right: 8%; top: 36%; transform: rotate(8deg); }
.reel-slide-one .reel-image span:nth-child(3) { width: 66%; height: 1px; left: 17%; top: 56%; border: 0; background: rgba(246, 243, 236, .4); }
.reel-slide-two .reel-image { background: linear-gradient(124deg, #071522, #1d4058 58%, #0a1b28); }
.reel-slide-two .reel-image span { width: 31%; height: 58%; top: 16%; transform: skewY(-7deg); background: rgba(246, 243, 236, .025); }
.reel-slide-two .reel-image span:nth-child(1) { left: 7%; }
.reel-slide-two .reel-image span:nth-child(2) { left: 35%; }
.reel-slide-two .reel-image span:nth-child(3) { left: 63%; }
.reel-slide-three .reel-image { background: radial-gradient(ellipse at 50% 100%, #26546f, #0b1d2c 58%, #071522); }
.reel-slide-three .reel-image span { left: 50%; top: 48%; width: 52%; height: 52%; border-radius: 50%; transform: translate(-50%, -50%); }
.reel-slide-three .reel-image span:nth-child(2) { width: 34%; height: 34%; }
.reel-slide-three .reel-image span:nth-child(3) { width: 16%; height: 16%; background: rgba(142, 189, 221, .22); }
.reel-slide figcaption { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 24px; font-size: 1.4rem; }
.reel-dots { height: 58px; display: flex; align-items: center; justify-content: center; gap: 13px; border-top: 1px solid var(--line); }
.reel-dots button { width: 9px; height: 9px; padding: 0; border: 1px solid var(--muted); border-radius: 50%; background: transparent; cursor: pointer; }
.reel-dots button.is-active { border-color: var(--white); background: var(--white); }

.paths { padding: 86px max(32px, calc((100vw - 1280px) / 2)); border-top: 1px solid var(--line); background: var(--navy-2); }
.paths-title { margin: 0 0 24px; color: var(--muted); font-size: .92rem; font-weight: 400; }
.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.path-card { min-width: 0; display: flex; min-height: 560px; flex-direction: column; border: 1px solid rgba(246, 243, 236, .25); background: #10283b; box-shadow: 0 22px 60px rgba(0, 0, 0, .18); text-decoration: none; overflow: hidden; transition: transform .24s ease, border-color .24s ease; }
.path-card:hover, .path-card:focus-visible { border-color: var(--white); transform: translateY(-7px); }
.path-image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: saturate(.72) contrast(1.04); }
.path-content { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 28px; padding: 30px; }
.path-card h3 { margin: 0; font-family: Didot, "Bodoni MT", Georgia, serif; font-size: clamp(2.2rem, 3vw, 3.5rem); font-weight: 400; line-height: .98; letter-spacing: -.035em; }
.path-card p { max-width: 310px; margin: 0; color: #bdc8ce; font-size: 1rem; line-height: 1.5; }

.contact { width: var(--page); margin-inline: auto; padding: 135px 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(70px, 9vw, 140px); align-items: start; }
.contact h2 { margin: 0; font-family: Didot, "Bodoni MT", Georgia, serif; font-size: clamp(2.7rem, 4.2vw, 4.75rem); font-weight: 400; line-height: .94; letter-spacing: -.045em; }
.contact-lines { margin-top: 42px; border-top: 1px solid var(--line); }
.contact-lines > * { display: block; padding: 22px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.contact-lines span, .contact-lines strong { display: block; }
.contact-lines span { margin-bottom: 6px; color: var(--muted); font-size: .82rem; }
.contact-lines strong { font-size: 1.08rem; font-weight: 400; overflow-wrap: anywhere; }
.contact-lines a:hover strong, .contact-lines a:focus-visible strong { color: var(--blue); }
.message-form { display: grid; gap: 27px; padding: 38px; border: 1px solid rgba(246, 243, 236, .25); background: var(--navy-2); box-shadow: 0 28px 70px rgba(0, 0, 0, .17); }
.form-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.message-form label, .message-form label > span { display: block; }
.message-form label > span { margin-bottom: 8px; color: #c3ccd1; font-size: .84rem; }
.message-form label i { color: #7f929e; font-style: italic; }
.message-form input, .message-form textarea { width: 100%; border: 0; border-bottom: 1px solid rgba(246, 243, 236, .28); border-radius: 0; padding: 12px 0; color: var(--white); background: transparent; outline: 0; }
.message-form textarea { min-height: 145px; resize: vertical; }
.message-form input:focus, .message-form textarea:focus { border-color: var(--blue); box-shadow: 0 1px 0 var(--blue); }
.form-action { display: flex; align-items: center; gap: 24px; }
.form-action button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 32px; padding: 15px 20px; border: 1px solid var(--white); color: var(--white); background: transparent; cursor: pointer; }
.form-action button:hover, .form-action button:focus-visible { color: var(--navy); background: var(--white); }
.form-action p { margin: 0; color: var(--muted); font-size: .82rem; }
.form-action p.is-success { color: #b9d8c0; }
.form-action p.is-error { color: #efb1a8; }

.agent { padding: 130px max(32px, calc((100vw - 1280px) / 2)); border-top: 1px solid var(--line); background: var(--navy-2); }
.agent-console { max-width: 1100px; margin-inline: auto; border: 1px solid rgba(246, 243, 236, .3); background: rgba(7, 21, 34, .88); box-shadow: 0 30px 80px rgba(0, 0, 0, .28); }
.agent-bar { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 28px; border-bottom: 1px solid var(--line); }
.agent-bar h2 { margin: 0; font-family: Didot, "Bodoni MT", Georgia, serif; font-size: 2rem; font-weight: 400; }
.agent-thread { min-height: 310px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 38px; }
.agent-thread p { max-width: 680px; margin: 0 0 24px; color: #d7dfe3; font-size: 1.15rem; }
.agent-thread button { padding: 12px 15px; border: 1px solid rgba(142, 189, 221, .3); color: #9dafba; background: rgba(142, 189, 221, .05); text-align: left; opacity: 1; }
.agent-input { display: grid; grid-template-columns: 1fr auto; border-top: 1px solid var(--line); }
.agent-input input { min-width: 0; padding: 21px; border: 0; color: var(--white); background: transparent; }
.agent-input button { width: 86px; border: 0; color: #6f8390; background: rgba(142, 189, 221, .08); }

.site-footer { min-height: 150px; width: var(--page); margin-inline: auto; display: grid; grid-template-columns: 1fr auto auto; gap: 48px; align-items: center; border-top: 1px solid var(--line); }
.site-footer .brand-icon { width: 44px; height: 44px; }
.site-footer .wordmark { width: 125px; }
.site-footer .wordmark strong { font-size: 1.58rem; }
.site-footer .wordmark small { margin-top: 9px; font-size: .45rem; }
.site-footer p, .site-footer > a:last-child { color: var(--muted); font-size: .8rem; }
.site-footer > a:last-child { text-decoration: none; }
:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; }

@media (max-width: 960px) {
  :root { --page: min(100% - 36px, 740px); }
  .hero { height: auto; min-height: 0; grid-template-columns: 1fr; gap: 70px; padding: 190px 0 100px; }
  .capability-reel { max-width: 680px; }
  .path-grid { grid-template-columns: 1fr; }
  .path-card { min-height: 0; display: grid; grid-template-columns: .9fr 1.1fr; }
  .path-image { height: 100%; aspect-ratio: auto; }
  .contact { min-height: 0; grid-template-columns: 1fr; gap: 70px; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 94px; }
  :root { --page: calc(100% - 32px); }
  .site-header { height: 94px; padding-inline: 16px; }
  .brand-icon { width: 48px; height: 48px; }
  .wordmark { width: 125px; }
  .wordmark strong { font-size: 1.6rem; }
  .wordmark small { margin-top: 9px; font-size: .46rem; }
  .menu-button { display: block; }
  .site-nav { position: absolute; top: 94px; left: 0; right: 0; display: none; padding: 20px; border-bottom: 1px solid var(--line); background: var(--navy); }
  .site-nav.is-open { display: grid; gap: 18px; }
  .hero { padding-top: 155px; }
  .hero h1 { font-size: clamp(3.5rem, 17vw, 5rem); }
  .reel-slide { height: 365px; }
  .paths { padding: 72px 16px; }
  .path-card { display: flex; }
  .path-image { height: auto; aspect-ratio: 3 / 2; }
  .path-card h3 { font-size: 2.65rem; }
  .contact { padding: 100px 0; }
  .contact h2 { font-size: 3.25rem; }
  .message-form { padding: 25px 20px; }
  .field-pair { grid-template-columns: 1fr; }
  .form-action { align-items: flex-start; flex-direction: column; }
  .agent { padding: 90px 16px; }
  .agent-thread { padding: 28px 20px; }
  .site-footer { min-height: 230px; grid-template-columns: 1fr; gap: 18px; padding: 45px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}
