/* ============================================================ Steppe & Sea — Renewable Energy Static build of the React prototype. Tokens follow colors_and_type.css; --navy uses the "deep" tweak default. ============================================================ */ /* Geist font is loaded via a in (with preconnect) instead of @import here, so the browser discovers and fetches it in parallel with this stylesheet rather than after it. */ @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('../fonts/Unbounded-VariableFont_wght.ttf') format('truetype-variations'), url('../fonts/Unbounded-VariableFont_wght.ttf') format('truetype'); } :root { --navy: #0E1A2B; --white: #FFFFFF; --horizon: #4C6A8A; --mist: #A9C0D6; --dune: #E9E2D6; --text-dark: #0D1B2A; --text-mid: #4A5568; --text-light: #8899AA; --border: #E2E8F0; --border-subtle:#F0F4F8; --ghost-stroke: rgba(169, 192, 214, .35); --ghost-hover: rgba(169, 192, 214, .12); --ff-display: 'Unbounded', system-ui, sans-serif; --ff-body: 'Geist', system-ui, sans-serif; --ff-mono: 'Geist Mono', ui-monospace, monospace; --radius-md: 7px; --ease-out-quint: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.45, 0, .55, 1); --section-pad-y: clamp(88px, 13vw, 168px); --section-pad-x: clamp(16px, 4vw, 52px); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--ff-body); font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--text-dark); background: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--navy); color: #fff; } img { display: block; } h1, h2, h3, p, ul, address { margin: 0; } address { font-style: normal; } .container { max-width: 1400px; margin: 0 auto; } .section { padding: var(--section-pad-y) var(--section-pad-x); } .section--dark { background: var(--navy); color: #fff; } .section--tint { background: var(--border-subtle); } /* ---------- Keyframes ---------- */ @keyframes ssHeroZoom { 0% { transform: scale(1.12) translate3d(0,0,0); } 100% { transform: scale(1.2) translate3d(-1.5%,-1%,0); } } @keyframes ssLineSweep { 0% { transform: translateX(-10%); opacity: .3; } 50% { transform: translateX(150%); opacity: 1; } 100% { transform: translateX(260%); opacity: .3; } } @keyframes ssNudge { 0%, 100% { transform: scaleX(.4); opacity: .45; } 50% { transform: scaleX(1); opacity: 1; } } @keyframes ssHeroRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Motion: reveal-on-scroll ---------- Hidden states only apply once JS adds .motion to , so content is always visible without JS / with reduced motion. */ .motion [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-out-quint), transform .9s var(--ease-out-quint); will-change: opacity, transform; } .motion [data-reveal].in { opacity: 1; transform: none; } .motion [data-rise="1"] { animation: ssHeroRise .95s var(--ease-out-quint) .1s both; } .motion [data-rise="2"] { animation: ssHeroRise .95s var(--ease-out-quint) .22s both; } .motion [data-rise="3"] { animation: ssHeroRise .95s var(--ease-out-quint) .42s both; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } html { scroll-behavior: auto; } } /* ---------- Shared primitives ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--ff-mono); font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--horizon); } .eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; opacity: .7; } .eyebrow--dark { color: var(--mist); } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; font-family: var(--ff-body); font-size: 14px; font-weight: 500; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .2s var(--ease-out-quint), background .2s, border-color .2s, color .2s; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn--lg { padding: 14px 28px; font-size: 15px; } .btn--white { background: #fff; color: var(--navy); } .btn--white:hover { background: #F0F4F8; } .btn--ghost { background: transparent; color: #fff; border-color: var(--ghost-stroke); } .btn--ghost:hover { background: var(--ghost-hover); border-color: var(--mist); } .icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 68px; display: flex; align-items: center; padding: 0 clamp(16px, 4vw, 52px); background: transparent; border-bottom: 1px solid transparent; transition: background .4s var(--ease-out-quint), border-color .4s, backdrop-filter .4s; } .nav.is-scrolled { background: rgba(13,27,42,.8); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-bottom-color: rgba(169,192,214,.16); } .nav__inner { flex: 1; max-width: 1400px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; } .nav__brand { text-decoration: none; color: #fff; font-family: var(--ff-display); font-weight: 600; font-size: 18px; letter-spacing: -.035em; white-space: nowrap; } .nav__center { display: flex; align-items: center; justify-content: center; gap: 30px; } .nav__center a { font-family: var(--ff-mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.82); text-decoration: none; transition: color .2s; } .nav__center a:hover { color: #fff; } .nav__cta { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: var(--radius-md); font-family: var(--ff-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: #fff; border: 1px solid rgba(255,255,255,.4); transition: border-color .2s, background .2s; } .nav__cta:hover { border-color: #fff; background: rgba(255,255,255,.08); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; width: 100%; height: clamp(640px, 100svh, 1040px); overflow: hidden; background: #0E1A2B; color: #fff; } .hero__bg { position: absolute; inset: -8%; background-image: url('../assets/photo-hero-wind.jpg'); background-size: cover; background-position: center 60%; filter: saturate(.92) brightness(.94); will-change: transform; } .motion .hero__bg { animation: ssHeroZoom 30s ease-in-out infinite alternate; } .hero__shade { position: absolute; inset: 0; } .hero__shade--v { background: linear-gradient(180deg, rgba(14,26,43,.5) 0%, rgba(14,26,43,.3) 35%, rgba(14,26,43,.4) 70%, rgba(14,26,43,.62) 100%); } .hero__shade--h { background: linear-gradient(90deg, rgba(14,26,43,.62) 0%, rgba(14,26,43,.32) 38%, rgba(14,26,43,0) 68%); } .hero__content { position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(120px,16vh,184px) clamp(16px,4vw,52px) clamp(28px,5vh,56px); max-width: 1400px; margin: 0 auto; } .hero__main { flex: 1; display: flex; flex-direction: column; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 13px; font-family: var(--ff-mono); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.9); } .hero__eyebrow-line { width: 24px; height: 1px; background: rgba(255,255,255,.7); } .hero__title { font-family: var(--ff-display); font-weight: 400; font-size: clamp(34px, 5.4vw, 84px); line-height: 1.0; letter-spacing: -.042em; margin: clamp(24px,3vw,44px) 0 0; color: #fff; text-wrap: balance; max-width: 17ch; } .hero__sub { max-width: 600px; margin-top: clamp(24px,3vw,40px); } .hero__lead { font-weight: 300; font-size: clamp(14px,1.05vw,16px); line-height: 1.7; color: rgba(255,255,255,.84); margin: 0 0 12px; } .hero__lead2 { font-weight: 300; font-size: clamp(13px,1vw,15px); line-height: 1.7; color: rgba(255,255,255,.66); } .hero__ctas { display: flex; gap: 12px; margin-top: clamp(24px,3vw,32px); flex-wrap: wrap; } .hero__meta { margin-top: clamp(28px,4vh,52px); } .hero__rule { position: relative; height: 1px; width: 100%; background: linear-gradient(90deg, rgba(255,255,255,.32), rgba(255,255,255,.06)); margin-bottom: 18px; } .hero__rule-sweep { position: absolute; left: 0; top: 0; height: 1px; width: 40%; background: linear-gradient(90deg, var(--mist), transparent); } .motion .hero__rule-sweep { animation: ssLineSweep 6s var(--ease-in-out) infinite; } .hero__meta-row { display: flex; justify-content: space-between; align-items: center; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.7); } .hero__scroll { display: inline-flex; align-items: center; gap: 12px; } .hero__scroll-nudge { display: inline-block; width: 30px; height: 1px; background: rgba(255,255,255,.6); transform-origin: left; } .motion .hero__scroll-nudge { animation: ssNudge 2.4s ease-in-out infinite; } /* ============================================================ TECHNOLOGIES ============================================================ */ .tech__intro { display: grid; grid-template-columns: 64px minmax(0,1fr) minmax(0,1.4fr); gap: clamp(16px,2vw,40px); align-items: flex-start; margin-bottom: clamp(48px,7vw,96px); } .tech__intro-head { grid-column: 1 / 3; } .tech__title { font-family: var(--ff-display); font-weight: 400; font-size: clamp(28px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -.04em; color: #fff; margin: 28px 0 0; text-wrap: balance; } .tech__lead { font-weight: 300; font-size: clamp(15px,1.1vw,18px); line-height: 1.8; color: rgba(255,255,255,.72); max-width: 500px; padding-top: clamp(40px, 4.2vw, 60px); } .tech__row { display: grid; grid-template-columns: 64px minmax(0,1fr) minmax(0,1.4fr); gap: clamp(16px,2vw,40px); align-items: baseline; padding: clamp(24px,2.6vw,36px) 0; border-top: 1px solid rgba(169,192,214,.22); } .tech__num { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .16em; color: var(--mist); } .tech__row-title { font-family: var(--ff-display); font-weight: 400; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -.03em; color: #fff; } .tech__row-desc { font-weight: 300; font-size: clamp(15px,1.05vw,17px); line-height: 1.7; color: rgba(255,255,255,.78); } .tech__endline { border-top: 1px solid rgba(169,192,214,.22); } /* ============================================================ CHALLENGE ============================================================ */ .challenge__grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: clamp(32px, 6vw, 100px); align-items: end; } .challenge__title { font-family: var(--ff-display); font-weight: 400; font-size: clamp(28px, 3.8vw, 56px); line-height: 1.04; letter-spacing: -.04em; color: var(--text-dark); margin: 28px 0 0; text-wrap: balance; max-width: 16ch; } .challenge__copy { margin-top: clamp(36px, 5vw, 56px); max-width: 600px; } .challenge__copy p { font-weight: 300; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.8; color: var(--text-mid); margin: 0 0 22px; } .challenge__copy p.challenge__closer { font-family: var(--ff-display); font-weight: 400; font-size: clamp(20px, 2vw, 28px); line-height: 1.3; letter-spacing: -.025em; color: var(--navy); margin: 12px 0 0; } .challenge__photo { position: relative; height: clamp(420px, 56vh, 560px); width: 100%; overflow: hidden; background: var(--border-subtle); } .challenge__photo img { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; max-width: none; transform: translate(-50%,-50%); object-fit: cover; } .challenge__photo-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(14,26,43,0) 62%, rgba(14,26,43,.22) 100%); } /* ============================================================ HOW WE HELP ============================================================ */ .help__intro { margin-bottom: clamp(48px,7vw,88px); max-width: 760px; } .help__title { font-family: var(--ff-display); font-weight: 400; font-size: clamp(28px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -.04em; color: var(--text-dark); margin: 28px 0 0; text-wrap: balance; } .help__lead { font-weight: 300; font-size: clamp(15px,1.1vw,18px); line-height: 1.8; color: var(--text-mid); margin: clamp(20px,2.5vw,28px) 0 0; max-width: 560px; } .help__endline { border-top: 1px solid var(--border); } .help-block { border-top: 1px solid var(--border); } .help-block__head { display: grid; grid-template-columns: 64px minmax(0,1fr) auto; gap: clamp(16px,2vw,32px); align-items: baseline; width: 100%; padding: clamp(28px,3.2vw,44px) 0 0; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; } .help-block__num { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .18em; color: var(--horizon); } .help-block__kicker { display: block; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-light); margin-bottom: 14px; } .help-block__title { display: block; font-family: var(--ff-display); font-weight: 400; font-size: clamp(22px, 2.8vw, 38px); line-height: 1.06; letter-spacing: -.035em; color: var(--text-dark); text-wrap: balance; } .help-block__toggle { justify-self: end; align-self: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 300; color: var(--horizon); transition: transform .45s var(--ease-out-quint), border-color .2s; } .help-block.is-open .help-block__toggle { transform: rotate(45deg); } .help-block__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-out-quint); } .help-block.is-open .help-block__panel { grid-template-rows: 1fr; } .help-block__panel-clip { overflow: hidden; } .help-block__body { display: grid; grid-template-columns: 64px minmax(0,1fr) minmax(0,1fr); gap: clamp(16px,2vw,32px); padding-top: 26px; padding-bottom: clamp(28px,3.2vw,44px); } .help-block__desc { font-weight: 300; font-size: clamp(15px,1.1vw,17px); line-height: 1.8; color: var(--text-mid); max-width: 520px; } .help-block__list-title { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-light); margin-bottom: 18px; } .help-block__items { list-style: none; margin: 0; padding: 0; } .help-block__items li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-subtle); font-weight: 300; font-size: 14.5px; line-height: 1.5; color: var(--text-dark); } .help-block__items li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--mist); margin-top: 8px; flex-shrink: 0; } /* Closed panel must not pad — padding lives on the body so the 0fr row really collapses. */ .help-block:not(.is-open) .help-block__head { padding-bottom: clamp(28px,3.2vw,44px); } /* ============================================================ CASES ============================================================ */ .cases__intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: clamp(28px,6vw,100px); align-items: flex-start; } .cases__title { font-family: var(--ff-display); font-weight: 400; font-size: clamp(28px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -.04em; color: var(--text-dark); margin: 28px 0 0; text-wrap: balance; } .cases__copy { max-width: 600px; padding-top: clamp(40px, 4.2vw, 60px); } .cases__copy p { font-weight: 300; font-size: clamp(15px,1.1vw,17px); line-height: 1.8; color: var(--text-mid); margin: 0 0 20px; } .cases__featured { margin-top: clamp(56px, 9vw, 112px); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(28px, 5vw, 72px); align-items: stretch; } .cases__media { position: relative; min-height: 360px; overflow: hidden; background: var(--border-subtle); } .cases__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cases__media-label { position: absolute; left: 20px; top: 20px; z-index: 2; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 12px rgba(14,26,43,.5); } .cases__case-title { font-family: var(--ff-display); font-weight: 400; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.03em; color: var(--text-dark); text-wrap: balance; } .cases__case-intro { font-weight: 300; font-size: clamp(15px,1.05vw,16px); line-height: 1.75; color: var(--text-mid); margin: 20px 0 32px; } .cases__parts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px,3vw,48px); } .cases__part { padding: 20px 0; border-top: 1px solid var(--border); } .cases__part-k { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--horizon); margin-bottom: 12px; } .cases__part-v { font-weight: 300; font-size: 14.5px; line-height: 1.65; color: var(--text-dark); } .cases__upcoming { margin-top: clamp(40px, 6vw, 72px); padding-top: 28px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; } .cases__upcoming-title { font-family: var(--ff-display); font-weight: 400; font-size: clamp(18px,2vw,24px); letter-spacing: -.02em; color: var(--text-light); } .cases__upcoming-note { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-light); } /* ============================================================ PEOPLE ============================================================ */ .people { padding: var(--section-pad-y) var(--section-pad-x) 0; } .people__intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: clamp(28px,6vw,100px); align-items: flex-start; } .people__title { font-family: var(--ff-display); font-weight: 400; font-size: clamp(28px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -.04em; color: var(--text-dark); margin: 28px 0 0; text-wrap: balance; } .people__lead { font-weight: 300; font-size: clamp(15px,1.1vw,18px); line-height: 1.8; color: var(--text-mid); max-width: 600px; padding-top: clamp(40px, 4.2vw, 60px); } .people__roles { margin-top: clamp(48px, 7vw, 88px); } .people__roles-title { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-light); margin-bottom: 8px; } .people__roles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 80px); } .people__role { padding: clamp(22px,2.4vw,30px) 0; border-top: 1px solid var(--border); } .people__role h3 { font-family: var(--ff-display); font-weight: 500; font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -.02em; color: var(--text-dark); margin: 0 0 10px; } .people__role p { font-weight: 300; font-size: 14.5px; line-height: 1.65; color: var(--text-mid); max-width: 480px; } /* Ecosystem band — full bleed */ .eco { position: relative; margin-top: clamp(72px, 10vw, 140px); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; min-height: clamp(460px, 66vh, 700px); overflow: hidden; display: flex; align-items: flex-end; } .eco__bg { position: absolute; inset: -8%; /* background-image set lazily by JS via [data-bg] once in view */ background-color: var(--navy, #0E1A2B); background-size: cover; background-position: center 55%; filter: saturate(.98); will-change: transform; } .eco__shade { position: absolute; inset: 0; } .eco__shade--v { background: linear-gradient(180deg, rgba(14,26,43,.28) 0%, rgba(14,26,43,.08) 42%, rgba(14,26,43,.62) 84%, rgba(14,26,43,.86) 100%); } .eco__shade--h { background: linear-gradient(90deg, rgba(14,26,43,.7) 0%, rgba(14,26,43,.3) 34%, rgba(14,26,43,0) 58%); } .eco__content { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; width: 100%; padding: clamp(40px,6vw,88px) clamp(16px,4vw,52px); } .eco__copy { max-width: 720px; } .eco__title { font-family: var(--ff-display); font-weight: 400; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -.035em; color: #fff; margin: 24px 0 0; text-wrap: balance; text-shadow: 0 2px 28px rgba(14,26,43,.6); } .eco__body { font-weight: 300; font-size: clamp(15px,1.1vw,17px); line-height: 1.75; color: rgba(255,255,255,.92); margin: 22px 0 0; max-width: 620px; text-shadow: 0 1px 20px rgba(14,26,43,.5); } .eco__closer { font-weight: 400; font-size: clamp(15px,1.1vw,17px); line-height: 1.6; color: #fff; margin: 18px 0 0; text-shadow: 0 1px 20px rgba(14,26,43,.5); } /* ============================================================ POC ============================================================ */ .poc__intro { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(28px,5vw,80px); align-items: flex-start; } .poc__title { font-family: var(--ff-display); font-weight: 400; font-size: clamp(28px, 3.8vw, 56px); line-height: 1.05; letter-spacing: -.04em; color: #fff; margin: 28px 0 0; text-wrap: balance; max-width: 18ch; } .poc__copy { max-width: 480px; padding-top: clamp(40px, 4.2vw, 60px); } .poc__copy p { font-weight: 300; font-size: clamp(15px,1.1vw,17px); line-height: 1.8; color: rgba(255,255,255,.78); margin: 0 0 20px; } .poc__lists { margin-top: clamp(48px, 7vw, 88px); display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(28px,5vw,80px); } .poc__list-title { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--mist); margin-bottom: 20px; } .poc__items { list-style: none; margin: 0; padding: 0; } .poc__items li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(169,192,214,.2); font-weight: 300; font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,.88); } .poc__items li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--mist); margin-top: 8px; flex-shrink: 0; } .poc__ctas { display: flex; gap: 12px; margin-top: clamp(40px,5vw,64px); flex-wrap: wrap; } /* ============================================================ FINAL CTA ============================================================ */ .cta { position: relative; overflow: hidden; background: #0E1A2B; color: #fff; } .cta__bg { position: absolute; inset: -8%; /* background-image set lazily by JS via [data-bg] once in view */ background-color: #0E1A2B; background-size: cover; background-position: center 62%; filter: saturate(.8) brightness(.7); will-change: transform; } .cta__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,26,43,.82) 0%, rgba(14,26,43,.7) 45%, rgba(14,26,43,.94) 100%); } .cta__content { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; padding: var(--section-pad-y) var(--section-pad-x); } .cta__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,520px); gap: clamp(40px, 7vw, 110px); align-items: center; } .cta__title { font-family: var(--ff-display); font-weight: 400; font-size: clamp(30px, 4.4vw, 60px); line-height: 1.06; letter-spacing: -.04em; color: #fff; margin: 28px 0 0; max-width: 18ch; text-wrap: balance; } .cta__p { font-weight: 300; font-size: clamp(15px,1.1vw,17px); line-height: 1.75; color: rgba(255,255,255,.82); margin: 22px 0 0; max-width: 520px; } .cta__card { background: rgba(13,27,42,.5); border: 1px solid rgba(169,192,214,.22); border-radius: 16px; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); padding: clamp(26px, 3vw, 40px); } .cta__form { display: flex; flex-direction: column; gap: 18px; } .cta__form-head { margin-bottom: 4px; } .cta__form-label { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--mist); margin-bottom: 10px; } .cta__form-heading { font-family: var(--ff-display); font-weight: 400; font-size: clamp(20px,2vw,26px); letter-spacing: -.025em; color: #fff; } .field { display: block; } .field__label { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-family: var(--ff-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--mist); } .field__req { color: #fff; opacity: .55; } .field__pill { font-size: 9px; letter-spacing: .12em; color: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.2); border-radius: 3px; padding: 1px 6px; } .field__input { width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(169,192,214,.28); border-radius: var(--radius-md); padding: 13px 16px; font-family: var(--ff-body); font-weight: 300; font-size: 15px; color: #fff; outline: none; transition: border-color .2s, background .2s; } .field__input::placeholder { color: rgba(255,255,255,.35); } .field__input:focus { background: rgba(255,255,255,.08); border-color: var(--mist); } .field__input--area { padding: 14px 16px; resize: vertical; min-height: 96px; } .cta__submit { margin-top: 4px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: var(--navy); border: 0; border-radius: var(--radius-md); padding: 15px 24px; cursor: pointer; font-family: var(--ff-body); font-size: 15px; font-weight: 500; transition: transform .2s var(--ease-out-quint), background .2s; } .cta__submit:hover { transform: translateY(-1px); background: #F0F4F8; } .cta__submit:disabled, .cta__submit.is-loading { opacity: .55; cursor: progress; transform: none; } /* Honeypot — kept in the layout but hidden from people and assistive tech. */ .cta__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .cta__form-error { margin: 2px 0 0; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .04em; color: #ffb4a8; } .cta__form-error[hidden] { display: none; } .cta__form-sub { margin: 2px 0 0; font-family: var(--ff-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); } .cta__success { min-height: 360px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 20px; } .cta__success[hidden] { display: none; } .cta__success-ring { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--mist); display: inline-flex; align-items: center; justify-content: center; } .cta__success p { font-family: var(--ff-display); font-weight: 400; font-size: clamp(20px,2vw,26px); line-height: 1.25; letter-spacing: -.02em; color: #fff; max-width: 24ch; } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--navy); color: #fff; padding: clamp(64px, 9vw, 120px) clamp(16px, 4vw, 52px) clamp(36px, 5vw, 52px); border-top: 1px solid rgba(255,255,255,.1); } .footer__grid { display: grid; grid-template-columns: minmax(0,1.4fr) repeat(4, minmax(0,1fr)); gap: clamp(24px, 4vw, 56px); padding-bottom: clamp(40px, 5vw, 56px); } .footer__brand { font-family: var(--ff-display); font-weight: 600; font-size: 20px; letter-spacing: -.035em; margin-bottom: 16px; } .footer__about { max-width: 340px; font-weight: 300; font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,.72); } .footer__col-label { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--mist); margin-bottom: 20px; } .footer__address { line-height: 1.9; font-size: 14px; font-weight: 300; color: rgba(255,255,255,.72); } .footer__links { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 300; } .footer__links a { color: #fff; text-decoration: none; transition: color .2s; } .footer__links a:hover { color: var(--mist); } .footer__bottom { padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .se-intro-grid { grid-template-columns: 1fr !important; gap: 24px !important; align-items: flex-start !important; } .se-cta-grid { grid-template-columns: 1fr !important; gap: 36px !important; align-items: flex-start !important; } .se-challenge-grid { grid-template-columns: 1fr !important; gap: 40px !important; } .se-challenge-photo{ height: clamp(300px, 50vh, 440px) !important; } .se-case-grid { grid-template-columns: 1fr !important; } .se-tech-row { grid-template-columns: 48px 1fr !important; } .se-tech-row p { grid-column: 2; margin-top: 12px; } .se-footer-grid { grid-template-columns: 1fr 1fr !important; } .tech__intro-head { grid-column: auto; } } @media (max-width: 680px) { .nav__center { display: none; } .nav__cta { display: none; } .se-help-head { grid-template-columns: 40px 1fr auto !important; } .se-help-body { grid-template-columns: 1fr !important; } .se-help-body > span:first-child { display: none; } .se-case-parts { grid-template-columns: 1fr !important; } .se-roles-grid { grid-template-columns: 1fr !important; } .se-poc-grid { grid-template-columns: 1fr !important; gap: 32px !important; } .se-footer-grid { grid-template-columns: 1fr !important; } }