:root {
  --paper: #faf8f3;
  --navy: #172d3b;
  --blue: #306ba6;
  --muted: #526575;
  --line: #cbd3d7;
  --pale: #edf1f4;
  --gutter: max(6vw, calc((100vw - 1320px) / 2));
  --section-space: clamp(4.5rem, 8vw, 7.5rem);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 6rem; }
body { margin: 0; background: var(--paper); color: var(--navy); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
.skip { position: fixed; top: -6rem; left: 1rem; z-index: 100; background: white; padding: .75rem 1rem; }
.skip:focus { top: 1rem; }
.button { min-height: 3rem; padding: .875rem 1.375rem; display: inline-flex; align-items: center; justify-content: center; gap: 1.5rem; border: 1px solid transparent; border-radius: 4px; background: var(--blue); color: white; font-size: 1rem; line-height: 1.4; font-weight: 500; transition: background .2s ease, transform .2s ease; }
.button:hover { background: var(--navy); transform: translateY(-2px); }
.button.small { min-height: 2.75rem; padding: .625rem 1rem; font-size: .875rem; }
.text-link { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .9375rem; border-bottom: 1px solid #9eafb9; }
.text-link:hover { color: var(--blue); border-color: var(--blue); }
.site-header { position: fixed; inset: 0 0 auto; height: 5.5rem; padding: 0 var(--gutter); display: flex; align-items: center; gap: 2rem; z-index: 20; }
.brand { display: flex; width: 12rem; flex-shrink: 0; margin-right: auto; }
.brand svg { display: block; width: 100%; mix-blend-mode: multiply; }
.site-header nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); font-size: .9375rem; }
.site-header nav a { padding: .625rem 0; }
.site-header nav a:hover { color: var(--blue); }
.js .site-header { opacity: 0; visibility: hidden; }
.home-active .site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.menu-toggle { display: none; width: 2.75rem; height: 2.75rem; background: none; border: 0; color: var(--navy); font-size: 1.5rem; }
#mobile-nav { position: fixed; top: 4.5rem; left: 0; right: 0; padding: 1rem var(--gutter); background: var(--paper); border-bottom: 1px solid var(--line); z-index: 25; }
#mobile-nav a { display: block; padding: .75rem 0; }
.eyebrow, .chapter, .number, .stage-label { font-size: .875rem; line-height: 1.5; font-weight: 500; letter-spacing: .085em; color: var(--blue); }
.eyebrow { margin-bottom: 1.5rem; }
.story { position: relative; height: 100svh; }
.js .story { height: 620svh; }
.story-stage { position: sticky; top: 0; height: 100svh; isolation: isolate; overflow: clip; }
.story-copy { display: none; }
.js .story-copy { display: block; }
.story-scene { position: absolute; left: var(--gutter); top: 29%; width: 48%; max-width: 42rem; opacity: 0; visibility: hidden; z-index: 3; pointer-events: none; will-change: transform, opacity; }
.story-scene p { font-size: clamp(2.5rem, 4.3vw, 4.5rem); line-height: 1.15; letter-spacing: -.035em; font-weight: 400; text-wrap: balance; }
.story-scene em { font-style: normal; color: var(--blue); }
.story-scene .chapter { display: block; margin-bottom: 1.5rem; color: var(--muted); }
.scene-detail { font-size: 1.0625rem; line-height: 1.7; margin-top: 1.75rem; color: var(--muted); max-width: 34rem; }
.story-scene.opening { inset: 0; width: 100%; max-width: none; padding: 2rem var(--gutter); display: grid; place-items: center; text-align: center; opacity: 1; visibility: visible; }
.story-scene.opening p { font-size: clamp(2.25rem, 3.7vw, 4rem); line-height: 1.25; letter-spacing: -.03em; }
.story-scene.resolution { left: 5%; top: 65%; width: 90%; max-width: none; text-align: center; }
.story-scene.resolution p { font-size: clamp(2.25rem, 3.3vw, 3.5rem); line-height: 1.2; }
.story-mark { position: absolute; left: 0; top: 0; width: clamp(220px, 27vw, 410px); transform: translate(75vw,48svh) translate(-50%,-50%); z-index: 2; pointer-events: none; will-change: transform; mix-blend-mode: multiply; }
.js .story-mark { opacity: 0; }
.story-mark svg { width: 100%; height: auto; display: block; overflow: visible; }
.story-leaf { transform-origin: 0 0; will-change: transform, opacity; }
.home-copy { position: absolute; left: var(--gutter); top: 50%; width: 51%; max-width: 43rem; transform: translateY(-50%); z-index: 4; }
.js .home-copy { opacity: 0; visibility: hidden; }
.home-copy h1 { font-size: clamp(2.75rem, 4.6vw, 5rem); line-height: 1.12; letter-spacing: -.04em; font-weight: 500; margin-bottom: 1.5rem; }
h1 span { color: var(--blue); }
.home-copy .eyebrow { font-size: .8125rem; letter-spacing: .075em; }
.intro { max-width: 31rem; color: var(--muted); font-size: 1.0625rem; line-height: 1.75; margin-bottom: 2rem; }
.hero-actions { display: flex; gap: 1rem 1.5rem; flex-wrap: wrap; align-items: center; }
.story-cue { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: none; align-items: center; gap: .875rem; color: var(--muted); font-size: .875rem; z-index: 6; white-space: nowrap; }
.js .story-cue { display: flex; }
.cue-line { height: 1.75rem; width: 1px; background: var(--blue); }
.story-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; opacity: 0; }
.story-progress span { display: block; height: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; }
.story-skip { position: fixed; right: var(--gutter); top: 1.375rem; min-height: 2.75rem; align-items: center; gap: .5rem; display: none; opacity: 0; z-index: 30; font-size: .875rem; color: var(--muted); }
.js .story-skip { display: flex; }
.story-skip:focus-visible { opacity: 1 !important; pointer-events: auto !important; }
.home-active .story-skip { visibility: hidden; }
.home-baseline { position: absolute; bottom: 1.75rem; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 1rem; font-size: .875rem; color: var(--muted); z-index: 5; }
.js .home-baseline { opacity: 0; visibility: hidden; }
.home-baseline a { display: flex; align-items: center; gap: 1.25rem; min-height: 2.75rem; }
.section { padding: var(--section-space) var(--gutter); }
.section h2 { font-size: clamp(2rem, 3vw, 3rem); line-height: 1.2; letter-spacing: -.03em; font-weight: 500; max-width: 38rem; }
.section-head { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.5rem 6rem; align-items: start; margin-bottom: 3.5rem; }
.section-head .eyebrow { grid-column: 1 / -1; margin: 0; }
.section-head > p:not(.eyebrow) { color: var(--muted); max-width: 31rem; padding-top: .375rem; }
.grid { display: grid; gap: 2rem; }
.four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.three { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2.75rem; }
.service, .solution { border-top: 1px solid var(--line); padding-top: 1.5rem; min-width: 0; }
.service h3, .solution h3 { font-size: 1.25rem; line-height: 1.4; font-weight: 500; letter-spacing: -.015em; margin: 1.5rem 0 1rem; }
.service p, .solution p { font-size: 1rem; line-height: 1.75; color: var(--muted); }
.solution { display: flex; flex-direction: column; }
.solution p { margin-bottom: 1.5rem; }
.solution .tag { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--blue); font-size: .875rem; line-height: 1.6; }
.tinted { background: var(--pale); }
.workflow { margin-top: 4rem; padding: 2rem; border: 1px solid var(--line); background: var(--paper); }
.workflow-title { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem 2rem; color: var(--muted); font-size: .875rem; margin-bottom: 1.75rem; }
.workflow-title strong { color: var(--navy); font-weight: 500; letter-spacing: .04em; }
.pipeline { display: grid; grid-template-columns: 1fr 1.5rem 1fr 1.5rem 1fr; gap: 1rem; align-items: stretch; }
.pipeline article { border: 1px solid var(--line); padding: 1.5rem; min-width: 0; }
.pipeline article:last-child { border-color: var(--blue); }
.pipeline h4 { margin: .75rem 0 .5rem; font-weight: 500; line-height: 1.4; }
.pipeline p { font-size: 1rem; color: var(--muted); }
.pipeline .connector { align-self: center; justify-self: center; color: var(--blue); font-size: 1.5rem; }
.stage-label { font-size: .8125rem; letter-spacing: .04em; }
.process { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 2rem; }
.process article { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.process h3 { font-size: 1.125rem; line-height: 1.4; font-weight: 500; margin: 1.25rem 0 .75rem; }
.process p { color: var(--muted); font-size: 1rem; }
.about, .contact { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.about { background: var(--navy); color: var(--paper); }
.about .eyebrow { color: #9fcaff; }
.about p:not(.eyebrow) { color: #d2dce2; font-size: 1.0625rem; }
.about ul { list-style: none; padding: 0; margin: 1.75rem 0 0; }
.about li { border-bottom: 1px solid #49606e; padding: 1rem 0; }
.about li::before { content: '✓'; margin-right: .875rem; color: #9fcaff; }
.contact p:not(.eyebrow) { color: var(--muted); margin-top: 1.5rem; max-width: 32rem; }
.booking-panel { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.booking-panel h3 { font-size: 1.375rem; line-height: 1.4; font-weight: 500; }
.booking-panel .button { margin-top: 1.75rem; }
.draft-note { font-size: .9375rem; }
footer { padding: 2.5rem var(--gutter); border-top: 1px solid var(--line); display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; color: var(--muted); font-size: .875rem; }
.footer-name { font-size: 1.125rem; letter-spacing: .08em; color: var(--navy); font-weight: 500; }
footer span { margin-left: auto; }
@media(max-width: 1050px) {
 .site-header { gap: 1rem; }
 .brand { width: 10rem; }
 .site-header nav { gap: 1rem; font-size: .875rem; }
 .section-head { column-gap: 3rem; }
 .four { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2.5rem; }
 .process { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .three { gap: 1.75rem; }
 .pipeline { grid-template-columns: 1fr; }
 .pipeline .connector { transform: rotate(90deg); }
 .about, .contact { gap: 3rem; }
}
@media(max-width: 820px) {
 .site-header { height: 4.5rem; }
 .site-header nav { display: none; }
 .menu-toggle { display: block; }
}
@media(max-width: 720px) {
 :root { --gutter: 1.5rem; }
 .js .story { height: 580svh; }
 .story-scene { left: var(--gutter); top: 15%; width: calc(100% - 3rem); max-width: none; }
 .story-scene p { font-size: clamp(2rem, 7.8vw, 3rem); line-height: 1.2; letter-spacing: -.025em; }
 .story-scene .chapter { font-size: .8125rem; margin-bottom: 1.125rem; }
 .scene-detail { font-size: 1rem; line-height: 1.65; margin-top: 1.25rem; }
 .scene-detail br { display: none; }
 .story-scene.opening { inset: 0; width: 100%; }
 .story-scene.opening p { font-size: clamp(2rem, 7.5vw, 3rem); }
 .story-scene.resolution { top: 61%; left: var(--gutter); width: calc(100% - 3rem); }
 .story-scene.resolution p { font-size: clamp(2rem, 7vw, 2.75rem); }
 .story-mark { width: clamp(190px, 49vw, 235px); }
 .home-copy { top: 6.25rem; left: var(--gutter); width: calc(100% - 3rem); max-width: none; transform: none !important; }
 .home-copy h1 { font-size: clamp(2.25rem, 8.5vw, 3.25rem); margin-bottom: 1.25rem; }
 .home-copy .eyebrow { font-size: .8125rem; margin-bottom: 1.25rem; max-width: 24rem; }
 .intro { font-size: 1rem; line-height: 1.65; margin-bottom: 1.5rem; }
 .hero-actions { gap: .75rem 1.25rem; }
 .hero-actions .button { font-size: .9375rem; }
 .hero-actions .text-link { font-size: .875rem; }
 .story-cue { bottom: 1.75rem; font-size: .8125rem; }
 .home-baseline { bottom: 1rem; padding-top: .5rem; }
 .home-baseline > span { display: none; }
 .home-baseline a { margin-left: auto; }
 .site-header { gap: .5rem; }
 .brand { width: 9rem; }
 .button.small { font-size: .875rem; gap: .75rem; padding: .625rem .75rem; }
 .section-head { grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 2.5rem; }
 .section-head > p:not(.eyebrow) { padding: 0; }
 .section h2 { font-size: clamp(2rem, 7vw, 2.75rem); }
 .three, .about, .contact { grid-template-columns: 1fr; }
 .three { gap: 2.5rem; }
 .process { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; }
 .workflow { margin-top: 3rem; padding: 1.5rem; }
 .about, .contact { gap: 2.5rem; }
 footer { align-items: flex-start; flex-direction: column; gap: .75rem; }
 footer span { margin-left: 0; }
}
@media(max-width: 420px) {
 .four, .process { grid-template-columns: 1fr; }
 .site-header .button.small { display: none; }
 .workflow, .pipeline article { padding: 1.25rem; }
}
/* Motion is optional. Reflow takes priority when enlarged content cannot fit a stage. */
.static-story .story, .static-story.js .story { height: auto; }
.static-story .story-stage { position: relative; height: auto; min-height: 0; overflow: visible; padding: 8rem var(--gutter) 3rem; display: flex; flex-direction: column; gap: 2.5rem; }
.static-story .story-copy, .static-story .story-cue, .static-story .story-skip, .static-story .story-progress { display: none !important; }
.static-story .home-copy { position: static; width: 100%; max-width: 43rem; transform: none !important; opacity: 1 !important; visibility: visible !important; order: 1; }
.static-story .story-mark { position: static; transform: none !important; opacity: 1 !important; width: 8rem; order: 0; }
.static-story .story-leaf { transform: none !important; opacity: 1 !important; }
.static-story .home-baseline { position: static; opacity: 1 !important; visibility: visible !important; order: 2; }
@media(prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }