/* ============================================================ PARADIGM PROPERTY ADVISORY — single page site Dark, cinematic, immersive. Montserrat + Inter. ============================================================ */ :root { --navy: #020b17; --navy-2: #071528; --navy-3: #0d1f35; --blue: #436da8; --blue-light: #6b8fc4; --blue-pale: #eaf0f8; --grey: #dedfe0; --grey-dim: #8f9aa8; --charcoal: #3f4145; --line: rgba(107, 143, 196, 0.16); --card: rgba(13, 31, 53, 0.55); --card-hover: rgba(23, 45, 74, 0.75); --font-head: 'Montserrat', sans-serif; --font-body: 'Inter', sans-serif; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } html:focus-within { scroll-behavior: smooth; } body { background: var(--navy); color: var(--grey); font-family: var(--font-body); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; } /* overflow-x: hidden on silently breaks position:fixed pinning (ScrollTrigger) in some browsers. `clip` prevents sideways scroll without creating a scroll container; the html fallback covers older engines. */ html { overflow-x: hidden; } @supports (overflow: clip) { html, body { overflow-x: clip; } } ::selection { background: var(--blue); color: #fff; } img { max-width: 100%; display: block; } .wrap { width: min(1200px, 92vw); margin: 0 auto; } .section { padding: clamp(90px, 12vw, 160px) 0; position: relative; } section[id] { scroll-margin-top: 64px; } /* layering: content sections always paint above the pinned scenes (method / process), so a pinned canvas can never bleed through */ .section { z-index: 2; } .method, .process { position: relative; z-index: 1; } h1, h2, h3 { font-family: var(--font-head); color: #fff; } /* ---------- shared type ---------- */ .eyebrow { font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 28px; } .section-title { font-size: clamp(30px, 4.2vw, 54px); font-weight: 700; line-height: 1.14; letter-spacing: -0.01em; max-width: 20ch; margin-bottom: 24px; } .section-sub { max-width: 62ch; color: var(--grey-dim); font-size: clamp(15px, 1.35vw, 18px); margin-bottom: 56px; } .split-lines .sl-line { display: block; overflow: hidden; } .split-lines .sl-inner { display: block; } /* ---------- buttons ---------- */ .btn { font-family: var(--font-head); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 16px 30px; border-radius: 3px; border: 1px solid transparent; cursor: pointer; text-decoration: none; display: inline-block; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .35s, border-color .35s, color .35s; } .btn-apply { background: var(--blue); color: #fff; box-shadow: 0 0 0 rgba(67, 109, 168, 0); } .btn-apply:hover { background: var(--blue-light); transform: translateY(-2px); box-shadow: 0 12px 40px -8px rgba(67, 109, 168, 0.55); } .btn-ghost { border-color: var(--line); color: var(--grey); background: transparent; } .btn-ghost:hover { border-color: var(--blue-light); color: #fff; transform: translateY(-2px); } .btn-lg { padding: 20px 44px; font-size: 14px; } /* ============================================================ PRELOADER ============================================================ */ .preloader { position: fixed; inset: 0; z-index: 200; background: var(--navy); display: flex; align-items: center; justify-content: center; } .preloader-inner { text-align: center; } .preloader-icon { width: 64px; margin: 0 auto 22px; opacity: 0; } .preloader-word { font-family: var(--font-head); font-weight: 600; font-size: 22px; letter-spacing: 0.5em; color: #fff; margin-bottom: 26px; padding-left: 0.5em; /* balance tracking */ } .preloader-word span { display: inline-block; opacity: 0; transform: translateY(14px); } .preloader-bar { width: 180px; height: 1px; margin: 0 auto; background: rgba(107,143,196,.18); overflow: hidden; } .preloader-bar i { display: block; height: 100%; width: 100%; background: var(--blue-light); transform: scaleX(0); transform-origin: left; } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; gap: 40px; padding: 20px clamp(20px, 4vw, 56px); transition: background .5s, backdrop-filter .5s, padding .5s, box-shadow .5s; } .nav.scrolled { background: rgba(2, 11, 23, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-top: 12px; padding-bottom: 12px; box-shadow: 0 1px 0 var(--line); } .nav-brand img { height: 30px; width: auto; } .nav-links { display: flex; gap: 30px; margin-left: auto; } .nav-links a { font-family: var(--font-head); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey-dim); text-decoration: none; transition: color .3s; position: relative; } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px; background: var(--blue-light); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out); } .nav-links a:hover { color: #fff; } .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; } .nav-apply { padding: 12px 22px; font-size: 11px; } .nav-burger { display: none; background: none; border: 0; cursor: pointer; width: 40px; height: 40px; flex-direction: column; justify-content: center; gap: 7px; margin-left: auto; } .nav-burger span { display: block; height: 2px; background: #fff; transition: transform .4s var(--ease-out), opacity .3s; } .nav-burger.open span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); } .nav-burger.open span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; z-index: 99; background: rgba(2, 11, 23, 0.97); backdrop-filter: blur(20px); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; opacity: 0; pointer-events: none; transition: opacity .4s; } .mobile-menu.open { opacity: 1; pointer-events: auto; } .mobile-menu a { font-family: var(--font-head); font-size: clamp(22px, 6vw, 30px); font-weight: 600; color: #fff; text-decoration: none; padding: 8px 0; } .mobile-menu .btn { margin-top: 28px; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } #heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; } .hero-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 90% 65% at 30% 45%, transparent 0%, rgba(2,11,23,0.55) 75%, rgba(2,11,23,0.92) 100%), linear-gradient(to bottom, rgba(2,11,23,0.55) 0%, transparent 22%, transparent 62%, var(--navy) 100%); } .hero-content { position: relative; z-index: 2; width: min(1200px, 92vw); margin: 0 auto; padding: 110px 0 130px; } .hero-eyebrow { font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--blue-light); display: flex; align-items: center; gap: 14px; margin-bottom: 34px; } .hero-eyebrow .tick { width: 44px; height: 1px; background: var(--blue); display: inline-block; } .hero-title { font-size: clamp(42px, min(7vw, 11.5vh), 96px); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 34px; } .ht-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; } .ht-line > span { display: block; transform: translateY(110%); } .ht-accent { color: transparent; background: linear-gradient(100deg, var(--blue-light) 0%, #a9c4e8 55%, var(--blue) 100%); -webkit-background-clip: text; background-clip: text; } .hero-sub { max-width: 52ch; color: var(--grey-dim); font-size: clamp(15px, 1.4vw, 18px); margin-bottom: 44px; opacity: 0; } .hero-ctas { display: flex; gap: 18px; flex-wrap: wrap; opacity: 0; } .hero-pillars { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: clamp(20px, 6vw, 90px); padding: 26px 20px; border-top: 1px solid var(--line); background: rgba(2,11,23,0.35); backdrop-filter: blur(6px); } .hero-pillars span { font-family: var(--font-head); font-size: clamp(10px, 1.1vw, 13px); font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(222,223,224,0.5); opacity: 0; transform: translateY(10px); } .scroll-cue { position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%); z-index: 2; width: 1px; height: 56px; overflow: hidden; } .scroll-cue i { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: linear-gradient(to bottom, transparent, var(--blue-light)); animation: cueDrop 2.2s var(--ease-out) infinite; } @keyframes cueDrop { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } } /* ============================================================ STORY ============================================================ */ .story { background: radial-gradient(ellipse 60% 40% at 85% 0%, rgba(67,109,168,0.08), transparent 70%), var(--navy); border-top: 1px solid var(--line); } .story-lead { font-size: clamp(30px, 4.6vw, 58px); font-weight: 700; line-height: 1.14; letter-spacing: -0.015em; max-width: 22ch; margin-bottom: clamp(56px, 7vw, 100px); } .story-lead em, .story-p em { font-style: normal; color: var(--blue-light); } .story-grid { display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; gap: clamp(48px, 6vw, 110px); align-items: start; } .story-stats { position: sticky; top: 110px; display: grid; gap: 8px; } .sstat { padding: 26px 28px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); transition: border-color .4s, background .4s; } .sstat:hover { border-color: rgba(107,143,196,.4); background: var(--card-hover); } .sstat-num { font-family: var(--font-head); font-size: clamp(34px, 3.4vw, 46px); font-weight: 700; color: #fff; line-height: 1.1; } .sstat-num .count { color: transparent; background: linear-gradient(100deg, #fff 30%, var(--blue-light)); -webkit-background-clip: text; background-clip: text; } .sstat-label { font-size: 13.5px; color: var(--grey-dim); margin-top: 8px; line-height: 1.55; } .story-body { max-width: 62ch; } .story-p { font-size: clamp(16px, 1.45vw, 19px); color: #c3cbd6; margin-bottom: 30px; } .story-sign { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); } .story-sign-name { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: #fff; letter-spacing: 0.02em; } .story-sign-role { font-size: 13px; color: var(--blue-light); letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; } /* ============================================================ EXCLUSIVE ============================================================ */ .exclusive { background: radial-gradient(ellipse 70% 55% at 15% 100%, rgba(67,109,168,0.10), transparent 70%), linear-gradient(to bottom, var(--navy), var(--navy-2)); border-top: 1px solid var(--line); } .excl-statement { font-size: clamp(44px, 8.5vw, 120px); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; margin-bottom: clamp(50px, 6vw, 90px); } .excl-statement .w { display: inline-block; opacity: 0.12; transition: none; } .excl-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(48px, 6vw, 110px); align-items: start; } .excl-big { font-family: var(--font-head); font-size: clamp(19px, 2vw, 26px); font-weight: 500; line-height: 1.5; color: #fff; margin-bottom: 24px; } .excl-copy > p:not(.excl-big):not(.excl-note) { color: var(--grey-dim); margin-bottom: 36px; max-width: 56ch; } .excl-note { font-size: 13px; color: var(--grey-dim); margin-top: 16px; letter-spacing: .02em; } .excl-points { list-style: none; display: grid; gap: 0; } .excl-points li { display: flex; gap: 22px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line); } .excl-points li:first-child { border-top: 1px solid var(--line); } .excl-point-num { font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: .2em; color: var(--blue-light); white-space: nowrap; } .excl-points p { color: #c3cbd6; font-size: 15.5px; } /* ============================================================ DIFFERENT ============================================================ */ .different { background: var(--navy-2); border-top: 1px solid var(--line); } .diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .diff-card { position: relative; padding: 40px 34px 44px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); overflow: hidden; transition: border-color .45s, background .45s, transform .45s var(--ease-out); } .diff-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(340px 200px at var(--mx, 50%) var(--my, 0%), rgba(107,143,196,0.14), transparent 65%); opacity: 0; transition: opacity .45s; pointer-events: none; } .diff-card:hover { border-color: rgba(107,143,196,.45); transform: translateY(-4px); } .diff-card:hover::before { opacity: 1; } .diff-num { font-family: var(--font-head); font-size: 13px; font-weight: 600; letter-spacing: .22em; color: var(--blue-light); display: block; margin-bottom: 48px; } .diff-card h3 { font-size: 20px; font-weight: 600; margin-bottom: 14px; line-height: 1.3; } .diff-card p { font-size: 14.5px; color: var(--grey-dim); } /* ============================================================ METHOD ============================================================ */ .method { background: var(--navy); border-top: 1px solid var(--line); } /* the pinned scene must fit inside one viewport while pinned */ .method-pin { min-height: 100svh; display: flex; align-items: center; padding: 90px 0 30px; box-sizing: border-box; } /* .method-layout keeps .wrap's own width; auto margins centre it in the flex row */ .method-layout { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(40px, 5vw, 90px); align-items: center; } .method-copy .section-sub { margin-bottom: 40px; } .method-steps { list-style: none; display: grid; gap: 4px; } .method-steps li { padding: 16px 20px; border-left: 2px solid var(--line); transition: border-color .4s, background .4s, opacity .4s; opacity: 0.38; } .method-steps li.active { opacity: 1; border-left-color: var(--blue-light); background: linear-gradient(to right, rgba(67,109,168,0.10), transparent 75%); } .method-steps strong { display: block; font-family: var(--font-head); font-size: 15.5px; font-weight: 600; color: #fff; margin-bottom: 4px; } .method-steps span { font-size: 13.5px; color: var(--grey-dim); line-height: 1.55; display: block; } .method-viz { position: relative; aspect-ratio: 1 / 1; max-height: 62svh; } #methodCanvas { width: 100%; height: 100%; display: block; } .method-counter { position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; white-space: nowrap; } .method-counter span { font-family: var(--font-head); font-size: clamp(26px, 3vw, 40px); font-weight: 700; color: #fff; display: block; font-variant-numeric: tabular-nums; } .method-counter em { font-style: normal; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--blue-light); } /* ============================================================ TIERS ============================================================ */ .tiers { background: radial-gradient(ellipse 55% 45% at 90% 10%, rgba(67,109,168,0.09), transparent 70%), var(--navy-2); border-top: 1px solid var(--line); } .tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: stretch; } .tier-card { position: relative; padding: 42px 36px 96px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); transition: border-color .45s, transform .45s var(--ease-out), background .45s; } .tier-card:hover { border-color: rgba(107,143,196,.5); transform: translateY(-6px); background: var(--card-hover); } .tier-card.founder { background: linear-gradient(160deg, rgba(67,109,168,0.16), rgba(13,31,53,0.6) 55%); border-color: rgba(107,143,196,.35); } .tier-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 54px; } .tier-index { font-family: var(--font-head); font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--blue-light); } .tier-lock { width: 20px; height: 20px; color: var(--grey-dim); } .tier-card h3 { font-size: 22px; font-weight: 700; line-height: 1.3; margin-bottom: 16px; } .tier-card p { font-size: 14.5px; color: var(--grey-dim); } .tier-badge { position: absolute; left: 36px; bottom: 34px; font-family: var(--font-head); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--grey-dim); border: 1px solid var(--line); border-radius: 100px; padding: 8px 16px; } .tier-badge.open { color: #fff; border-color: var(--blue); background: rgba(67,109,168,0.18); } /* ============================================================ DEALS (engineered deals case studies) ============================================================ */ .deals { background: radial-gradient(ellipse 60% 45% at 15% 0%, rgba(67,109,168,0.10), transparent 70%), var(--navy); border-top: 1px solid var(--line); } .deal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .deal-card { position: relative; padding: 40px 38px 44px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); transition: border-color .45s, transform .45s var(--ease-out), background .45s; } .deal-card:hover { border-color: rgba(107,143,196,.5); transform: translateY(-5px); background: var(--card-hover); } .deal-card.rare { background: linear-gradient(160deg, rgba(67,109,168,0.15), rgba(13,31,53,0.6) 55%); border-color: rgba(107,143,196,.3); } .deal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; } .deal-index { font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--blue-light); } .deal-badge { font-family: var(--font-head); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-pale); border: 1px solid rgba(107,143,196,.4); background: rgba(67,109,168,0.14); border-radius: 100px; padding: 6px 13px; white-space: nowrap; } .deal-badge.everyday { color: #fff; border-color: var(--blue); background: rgba(67,109,168,0.3); } .deal-card h3 { font-size: 21px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; } .deal-asset { font-size: 13px; color: var(--grey-dim); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 26px; } .deal-metric { margin-bottom: 24px; } .deal-metric .count { font-family: var(--font-head); font-size: clamp(38px, 3.6vw, 52px); font-weight: 800; line-height: 1; color: transparent; background: linear-gradient(100deg, #fff 25%, var(--blue-light)); -webkit-background-clip: text; background-clip: text; display: inline-block; } .deal-metric em { display: block; font-style: normal; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-light); margin-top: 8px; } .deal-stats { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; } .deal-stats li { border: 1px solid var(--line); border-radius: 3px; background: rgba(2,11,23,0.35); padding: 10px 16px; } .deal-stats strong { display: block; font-family: var(--font-head); font-size: 15px; font-weight: 700; color: #fff; } .deal-stats span { font-size: 11.5px; color: var(--grey-dim); letter-spacing: .04em; text-transform: uppercase; } .deal-body { font-size: 14.5px; color: var(--grey-dim); } .deal-note { font-size: 12.5px; color: rgba(143,154,168,0.75); max-width: 88ch; line-height: 1.6; /* clear space below the card grid, including while the cards animate in */ margin-top: 52px; position: relative; clear: both; } /* ============================================================ SIMULATOR ============================================================ */ .simulator { background: radial-gradient(ellipse 65% 50% at 10% 0%, rgba(67,109,168,0.10), transparent 70%), var(--navy); border-top: 1px solid var(--line); } .sim-shell { display: grid; grid-template-columns: minmax(300px, 4fr) 8fr; gap: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); overflow: hidden; } .sim-controls { padding: clamp(28px, 3vw, 44px); border-right: 1px solid var(--line); display: grid; gap: 30px; align-content: start; } .sim-field label { display: block; font-family: var(--font-head); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--grey-dim); margin-bottom: 10px; } .sim-field output { display: block; font-family: var(--font-head); font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; color: #fff; margin-bottom: 12px; font-variant-numeric: tabular-nums; } .sim-field output small { font-size: 0.55em; color: var(--blue-light); font-weight: 600; } input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: linear-gradient(to right, var(--blue-light) var(--fill, 50%), rgba(107,143,196,.18) var(--fill, 50%)); border-radius: 2px; outline: none; cursor: pointer; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--blue); box-shadow: 0 0 0 4px rgba(67,109,168,0.25); transition: transform .2s; } input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); } input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--blue); box-shadow: 0 0 0 4px rgba(67,109,168,0.25); cursor: pointer; } .sim-scenarios { display: grid; gap: 6px; } .sim-scenario { font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: 13px 18px; background: transparent; color: var(--grey-dim); border: 1px solid var(--line); border-radius: 3px; cursor: pointer; transition: all .3s; } .sim-scenario:hover { color: #fff; border-color: rgba(107,143,196,.45); } .sim-scenario.active { background: rgba(67,109,168,0.2); border-color: var(--blue); color: #fff; } .sim-canvas-wrap { padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; } .sim-headline { display: flex; align-items: flex-start; gap: clamp(24px, 4vw, 60px); flex-wrap: wrap; margin-bottom: 26px; } .sim-sooner { align-self: center; } .sim-years span, .sim-engine span, .sim-vs span { font-family: var(--font-head); font-weight: 700; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; } .sim-years span { font-size: clamp(52px, 6vw, 84px); color: transparent; background: linear-gradient(100deg, #fff 20%, var(--blue-light)); -webkit-background-clip: text; background-clip: text; } .sim-engine span { font-size: clamp(30px, 3.4vw, 44px); color: var(--blue-light); } .sim-vs span { font-size: clamp(30px, 3.4vw, 44px); color: var(--grey-dim); } .sim-years em, .sim-engine em, .sim-vs em { display: block; font-style: normal; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-dim); margin-top: 8px; max-width: 24ch; } .sim-sooner { margin-left: auto; font-family: var(--font-head); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff; border: 1px solid var(--blue); background: rgba(67,109,168,0.16); padding: 12px 20px; border-radius: 100px; white-space: nowrap; } #simChart { width: 100%; height: 340px; display: block; } .sim-milestones { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; } .sim-mile { display: flex; gap: 14px; align-items: flex-start; } .sim-mile-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--blue-light); box-shadow: 0 0 12px rgba(107,143,196,0.9); margin-top: 5px; } .sim-mile-dot.dot2 { background: #fff; box-shadow: 0 0 12px rgba(255,255,255,0.8); } .sim-mile strong { display: block; font-family: var(--font-head); font-size: 13.5px; color: #fff; letter-spacing: .04em; } .sim-mile em { font-style: normal; font-size: 13px; color: var(--grey-dim); } .sim-disclaimer { font-size: 12.5px; color: rgba(143,154,168,0.75); max-width: 88ch; margin-top: 22px; line-height: 1.6; } /* ============================================================ PROCESS ============================================================ */ .process { background: var(--navy-2); border-top: 1px solid var(--line); overflow: hidden; } .process-pin { padding: clamp(80px, 9vw, 120px) 0 70px; } .process-head { margin-bottom: clamp(40px, 5vw, 70px); } .process-track { display: flex; gap: 8px; padding: 0 max(calc((100vw - 1200px) / 2), 4vw); width: max-content; } .pstep { flex: none; width: min(400px, 78vw); padding: 40px 36px 48px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); transition: border-color .4s, background .4s; } .pstep:hover { border-color: rgba(107,143,196,.45); background: var(--card-hover); } .pstep span { font-family: var(--font-head); font-size: clamp(40px, 4vw, 56px); font-weight: 800; color: transparent; -webkit-text-stroke: 1px rgba(107,143,196,0.5); display: block; margin-bottom: 34px; line-height: 1; } .pstep h3 { font-size: 20px; font-weight: 600; margin-bottom: 14px; } .pstep p { font-size: 14.5px; color: var(--grey-dim); } .process-progress { width: min(1200px, 92vw); margin: 56px auto 0; height: 1px; background: rgba(107,143,196,.15); } .process-progress i { display: block; height: 100%; width: 100%; background: var(--blue-light); transform: scaleX(0); transform-origin: left; } /* ============================================================ TEAM ============================================================ */ .team { background: var(--navy); border-top: 1px solid var(--line); } .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .team-card { padding: 38px 34px 42px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); transition: border-color .45s, transform .45s var(--ease-out), background .45s; } .team-card:hover { border-color: rgba(107,143,196,.45); transform: translateY(-4px); background: var(--card-hover); } .team-mono { width: 64px; height: 64px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 20px; color: #fff; background: linear-gradient(135deg, var(--blue) 0%, var(--navy-3) 100%); margin-bottom: 26px; letter-spacing: .05em; } .team-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 4px; } .team-role { display: block; font-size: 11.5px; font-weight: 600; font-family: var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 16px; } .team-card p { font-size: 14px; color: var(--grey-dim); } .team-card-note { background: linear-gradient(160deg, rgba(67,109,168,0.14), rgba(13,31,53,0.55) 60%); } /* ============================================================ FINAL CTA ============================================================ */ .final { background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(67,109,168,0.16), transparent 70%), linear-gradient(to bottom, var(--navy), var(--navy-2)); border-top: 1px solid var(--line); text-align: center; } .final .eyebrow { text-align: center; } .final-title { font-size: clamp(38px, 6vw, 82px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.08; margin: 0 auto clamp(48px, 5vw, 72px); max-width: 16ch; } .final-quals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: left; margin-bottom: clamp(48px, 5vw, 72px); } .fqual { padding: 32px 30px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); } .fqual h3 { font-size: 16px; font-weight: 600; margin-bottom: 10px; color: var(--blue-pale); } .fqual p { font-size: 14px; color: var(--grey-dim); } .final-cta { margin-bottom: clamp(48px, 5vw, 80px); } .final-note { font-size: 13.5px; color: var(--grey-dim); max-width: 52ch; margin: 20px auto 0; } .final-steps { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; } .fstep { display: flex; align-items: center; gap: 16px; text-align: left; } .fstep span { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--blue); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 15px; color: #fff; background: rgba(67,109,168,0.14); } .fstep strong { display: block; font-family: var(--font-head); font-size: 14px; color: #fff; } .fstep em { font-style: normal; font-size: 12.5px; color: var(--grey-dim); } .fstep-line { width: clamp(20px, 4vw, 70px); height: 1px; background: var(--line); } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: 1px solid var(--line); background: var(--navy); padding: 56px 0; } .footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: start; } .footer-brand img { height: 30px; width: auto; margin-bottom: 14px; } .footer-brand p { font-family: var(--font-head); font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--grey-dim); } .footer-contact { display: grid; gap: 6px; text-align: right; } .footer-contact a { color: var(--blue-pale); text-decoration: none; font-size: 14.5px; transition: color .3s; } .footer-contact a:hover { color: #fff; } .footer-fine { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 24px; } .footer-fine p { font-size: 12px; color: rgba(143,154,168,0.65); max-width: 90ch; } /* ============================================================ APPLY MODAL ============================================================ */ .modal { position: fixed; inset: 0; z-index: 150; display: none; } .modal.open { display: block; } .modal-backdrop { position: absolute; inset: 0; background: rgba(2,11,23,0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .modal-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(680px, 92vw); max-height: 90svh; overflow-y: auto; background: linear-gradient(170deg, var(--navy-3), var(--navy-2) 60%); border: 1px solid rgba(107,143,196,.35); border-radius: 8px; padding: clamp(30px, 4vw, 52px); box-shadow: 0 40px 120px -20px rgba(0,0,0,0.7); } .modal-close { position: absolute; top: 18px; right: 22px; background: none; border: 0; color: var(--grey-dim); font-size: 30px; line-height: 1; cursor: pointer; transition: color .3s; } .modal-close:hover { color: #fff; } .modal-card h3 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; margin-bottom: 18px; } .modal-policy { font-size: 14.5px; color: #c3cbd6; border-left: 2px solid var(--blue); background: rgba(67,109,168,0.08); padding: 16px 20px; border-radius: 0 4px 4px 0; margin-bottom: 30px; } .modal-policy strong { color: #fff; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-field { margin-bottom: 16px; } .form-field label { display: block; font-family: var(--font-head); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--grey-dim); margin-bottom: 8px; } .form-field .req { color: var(--blue-light); letter-spacing: .1em; font-size: 10px; } .form-field input, .form-field textarea { width: 100%; background: rgba(2,11,23,0.5); border: 1px solid var(--line); border-radius: 3px; color: #fff; font-family: var(--font-body); font-size: 15px; padding: 13px 16px; outline: none; transition: border-color .3s, box-shadow .3s; resize: vertical; } .form-field input:focus, .form-field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(67,109,168,0.2); } .modal-card .btn { width: 100%; margin-top: 8px; } .modal-fine { font-size: 12px; color: rgba(143,154,168,0.7); margin-top: 14px; text-align: center; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .nav-links { display: none; } .diff-grid, .tier-grid, .team-grid { grid-template-columns: repeat(2, 1fr); } .method-layout { grid-template-columns: 1fr; } .method-viz { max-width: 520px; margin: 0 auto; } .sim-shell { grid-template-columns: 1fr; } .sim-controls { border-right: 0; border-bottom: 1px solid var(--line); } } @media (max-width: 760px) { .nav-apply { display: none; } .nav-burger { display: flex; } .story-grid, .excl-grid { grid-template-columns: 1fr; } .story-stats { position: static; grid-template-columns: 1fr 1fr; } .diff-grid, .tier-grid, .team-grid, .final-quals, .deal-grid { grid-template-columns: 1fr; } .sim-milestones { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .footer-contact { text-align: left; } .form-row { grid-template-columns: 1fr; } .hero-pillars { flex-wrap: wrap; gap: 14px 26px; } .fstep-line { display: none; } .final-steps { flex-direction: column; align-items: flex-start; } .sim-sooner { margin-left: 0; } #simChart { height: 260px; } } @media (max-width: 520px) { .story-stats { grid-template-columns: 1fr; } } /* reduced motion / static mode: show everything, kill animation dependencies */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ht-line > span { transform: none; } .hero-sub, .hero-ctas, .hero-pillars span { opacity: 1; transform: none; } .excl-statement .w { opacity: 1; } .scroll-cue { display: none; } } html.static { scroll-behavior: auto; } html.static .ht-line > span { transform: none; } html.static .hero-sub, html.static .hero-ctas, html.static .hero-pillars span { opacity: 1; transform: none; } html.static .excl-statement .w { opacity: 1; } html.static .scroll-cue { display: none; } html.static .preloader { display: none; }