@import url('https://use.typekit.net/quz8iny.css'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css'); @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=Source+Sans+3:wght@400;500;600&display=swap'); :root{ --bg:#141B29;--surface:#202B3D;--border:#3A4A61; --text-primary:#E8E9EC;--text-secondary:#9AA2AF; --accent:#B85F4C;--accent-hover:#C9705C; --link:#3D6E9C;--link-hover:#4C81B2; --font-display:'freightdispcmp-pro','Source Serif 4',Georgia,serif; --font-display-full:'freight-display-pro','Source Serif 4',Georgia,serif; --font-body:'freight-sans-pro','Source Sans 3',Helvetica,Arial,sans-serif; --text-xs:clamp(0.69rem, calc(0 * (100vw - 22.5rem) + 0.69rem), 0.69rem); --text-s:clamp(0.83rem, calc(0 * (100vw - 22.5rem) + 0.83rem), 0.83rem); --text-m:clamp(1rem, calc(0 * (100vw - 22.5rem) + 1rem), 1rem); --text-l:clamp(1.2rem, calc(0 * (100vw - 22.5rem) + 1.2rem), 1.2rem); --text-eyebrow:var(--text-xs); --h2:clamp(1.44rem, calc(0.011555555555555558 * (100vw - 22.5rem) + 1.44rem), 2.22rem); --h1:clamp(1.73rem, calc(0.018222222222222223 * (100vw - 22.5rem) + 1.73rem), 2.96rem); --h6:clamp(0.69rem, calc(0.00014814814814814828 * (100vw - 22.5rem) + 0.69rem), 0.7rem); --h5:clamp(0.83rem, calc(0.0016296296296296295 * (100vw - 22.5rem) + 0.83rem), 0.94rem); --h4:clamp(1rem, calc(0.003703703703703704 * (100vw - 22.5rem) + 1rem), 1.25rem); --h3:clamp(1.2rem, calc(0.0069629629629629625 * (100vw - 22.5rem) + 1.2rem), 1.67rem); --gutter:clamp(20px,5vw,40px); --wrap-width:1100px; --radius-sm:2px;--radius-md:4px;--radius-lg:6px; --border-w:0.5px; } *{box-sizing:border-box} html{font-size:16px;scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}} body{margin:0;background:var(--bg);color:var(--text-secondary);font-family:var(--font-body);font-size:var(--text-m);line-height:1.65;-webkit-font-smoothing:antialiased} .wrap{max-width:var(--wrap-width);margin:0 auto;padding:0 var(--gutter)} a{color:var(--link);text-decoration:none} a:hover{color:var(--link-hover)} /* one definition per heading level — every context reuses this, none re-declares font/size/weight/colour locally */ h1{font-size:var(--h1);font-family:var(--font-display);font-weight:500;line-height:1.1;letter-spacing:-0.015em;color:var(--text-primary);margin:0 0 1.8rem} h2{font-size:var(--h2);font-family:var(--font-display);font-weight:400;line-height:1.15;letter-spacing:-0.01em;color:var(--text-primary);margin:2.4rem 0 1.2rem} h3{font-size:var(--h3);font-family:var(--font-display);font-weight:400;font-style:italic;line-height:1.2;color:var(--text-primary);margin:2.4rem 0 0.6rem} h4{font-size:var(--h4);font-family:var(--font-body);font-weight:600;line-height:1.3;letter-spacing:0.01em;color:var(--text-primary);margin:1.8rem 0 0.6rem} h5,h6{font-family:var(--font-body);font-weight:500;text-transform:uppercase;letter-spacing:0.08em;color:var(--accent);line-height:1.4;margin:1.2rem 0 0.6rem} h5{font-size:var(--h5)} h6{font-size:var(--h6)} /* a heading is always the leading element of its block — the block's own layout (section padding, container gap) supplies the space above it. */ h1:first-of-type,h2:first-of-type,h3:first-of-type,h4:first-of-type,h5:first-of-type,h6:first-of-type{margin-top:0} .eyebrow{font-size:var(--text-eyebrow);letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);margin:0 0 12px} #bg-pattern{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0);background-size:28px 28px;-webkit-mask-image:linear-gradient(90deg, transparent 0%, black 35%, black 65%, transparent 100%);mask-image:linear-gradient(90deg, transparent 0%, black 35%, black 65%, transparent 100%)} /* nav */ .site-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;height:88px;padding-top:20px;background:rgba(20,27,41,0.5)} .site-nav__inner{width:100%;max-width:var(--wrap-width);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between} .site-nav img{height:56px;display:block} .site-nav__logo-link{display:block} .site-nav__links{display:flex;gap:32px} .site-nav__links a{color:var(--text-secondary);font-size:var(--text-l);font-weight:400} .site-nav__toggle{display:none;position:relative;background:transparent;border:var(--border-w) solid var(--border);border-radius:var(--radius-sm);width:44px;height:44px;cursor:pointer;padding:0} .site-nav__toggle span{display:block;position:absolute;left:50%;top:50%;width:18px;height:2px;background:var(--text-primary);transform:translate(-50%,-50%) translateY(-5px);transition:transform 150ms ease,opacity 150ms ease} .site-nav__toggle span:nth-child(2){transform:translate(-50%,-50%)} .site-nav__toggle span:nth-child(3){transform:translate(-50%,-50%) translateY(5px)} .site-nav__drawer{display:none;flex-direction:column;padding:0 var(--gutter) 12px;position:absolute;top:100%;left:0;right:0;width:100%;background:rgba(32,43,61,0.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:var(--border-w) solid var(--border)} .site-nav__drawer a{min-height:44px;display:flex;align-items:center;color:var(--text-secondary);font-size:var(--text-l);font-weight:400;border-top:var(--border-w) solid var(--border)} .site-nav.open .site-nav__drawer{display:flex} .site-nav.open .site-nav__toggle span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)} .site-nav.open .site-nav__toggle span:nth-child(2){opacity:0} .site-nav.open .site-nav__toggle span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)} /* hero */ .hero{position:relative;overflow:hidden;min-height:86vh;display:flex;align-items:flex-end;padding:168px 0 80px} .hero__bg{position:absolute;inset:-5% -5%;z-index:0} .hero__bg img{width:100%;height:100%;object-fit:cover;display:block} .hero__overlay{position:absolute;inset:0;z-index:1} .hero__glow{position:absolute;width:640px;height:640px;left:-8%;top:-15%;border-radius:50%;background:radial-gradient(circle, rgba(61,110,156,0.35) 0%, rgba(61,110,156,0) 70%);z-index:1;pointer-events:none} .hero__inner{max-width:680px;position:relative;z-index:2} .hero .eyebrow{font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,0.65)} .hero h1{max-width:640px} .hero .lead{font-size:var(--text-l);color:var(--text-secondary);max-width:520px;margin-bottom:36px;line-height:1.6} /* buttons —