:root {
  --red: #ed2b22;
  --black: #07090a;
  --paper: #eceeea;
  --white: #f6f7f2;
  --line: rgba(255, 255, 255, .16);
  --pad: clamp(22px, 5vw, 78px);
  --font: 'Manrope', 'Avenir Next', 'Century Gothic', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--black); color: var(--white); font-family: var(--font); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.world { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.grain { position: fixed; inset: 0; z-index: 1; opacity: .08; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }

.site-nav { position: fixed; inset: 0 0 auto; z-index: 30; height: 88px; padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.11); background: linear-gradient(180deg, rgba(5,7,8,.72), transparent); transition: height .35s, background .35s, backdrop-filter .35s, box-shadow .35s; }
.scrolled .site-nav { height: 70px; background: rgba(5,7,8,.78); backdrop-filter: blur(18px) saturate(1.1); box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.logo { width: 168px; }
.logo img { width: 100%; }
.site-nav nav { display: flex; gap: 32px; font-size: 10px; font-weight: 700; }
.site-nav nav a { position: relative; }
.site-nav nav a::after { content: ''; position: absolute; right: 100%; bottom: -7px; left: 0; height: 1px; background: var(--red); transition: right .3s; }
.site-nav nav a:hover::after { right: 0; }
.site-nav nav a.active::after { right: 0; }
.site-nav nav a.active { color: white; }
.support { padding: 10px 14px; border: 1px solid rgba(255,255,255,.7); font-size: 9px; font-weight: 800; text-transform: uppercase; transition: background .25s, border-color .25s; }
.support:hover { background: var(--red); border-color: var(--red); }

main, footer { position: relative; z-index: 2; }
.hero { min-height: 110svh; padding: 170px var(--pad) 70px; position: relative; display: grid; place-items: center; overflow: hidden; }
.hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(5,7,8,.18) 55%, rgba(5,7,8,.72) 100%); pointer-events: none; }
.hero-orbit { position: absolute; top: 51%; left: 50%; width: min(72vw, 940px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; transform: translate(-50%, -50%); }
.hero-orbit::before, .hero-orbit::after { content: ''; position: absolute; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.hero-orbit::before { inset: 7%; }
.hero-orbit::after { inset: -9%; }
.hero-orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 24px rgba(237,43,34,.7); }
.hero-orbit i:first-child { top: 10%; left: 23%; }
.hero-orbit i:nth-child(2) { right: -3px; top: 52%; }
.hero-orbit i:last-child { bottom: 13%; left: 18%; }
.hero-image { position: absolute; top: 53%; left: 50%; width: min(56vw, 720px); aspect-ratio: 1; margin: 0; overflow: hidden; border-radius: 50%; transform: translate(-50%, -50%) scale(.92); box-shadow: 0 45px 150px rgba(0,0,0,.55); transition: transform 1.8s cubic-bezier(.18,.8,.2,1), opacity .35s; will-change: transform; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; filter: blur(22px) saturate(.45) brightness(.55); transform: scale(1.16); transition: filter 2s cubic-bezier(.18,.8,.2,1), transform 2.2s cubic-bezier(.18,.8,.2,1); }
.loaded .hero-image { transform: translate(-50%, calc(-50% + var(--hero-drift, 0px))) scale(var(--hero-scale, 1)); opacity: var(--hero-opacity, 1); }
.loaded .hero-image img { filter: blur(0) saturate(.72) brightness(.56); transform: scale(1.02); }
.hero-image::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle, transparent 48%, rgba(5,7,8,.76) 93%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.hero-copy { position: relative; z-index: 4; text-align: center; transform: translateY(-4%); }
.eyebrow { margin: 0; color: #b5bbbc; font-size: 8px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; }
.eyebrow i { display: inline-block; width: 28px; height: 2px; margin-right: 10px; background: var(--red); vertical-align: middle; }
.hero h1 { margin: 28px 0; font-size: clamp(72px, 11.5vw, 174px); font-weight: 700; line-height: .76; letter-spacing: -.085em; }
.hero h1 em, h2 em, blockquote em { display: block; color: var(--red); font-style: normal; font-weight: 300; }
.glass-panel { background: rgba(5,7,8,.72); border: 1px solid rgba(255,255,255,.18); color: white; backdrop-filter: blur(18px); box-shadow: 0 30px 80px rgba(0,0,0,.24); }
.hero-panel { position: absolute; z-index: 6; right: var(--pad); bottom: 11%; width: min(360px, 27vw); padding: 29px; }
.panel-title { margin: 0 0 18px; color: var(--red); font-size: 9px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.glass-panel > p:not(.panel-title) { color: #b5bbbc; font-size: 12px; line-height: 1.8; }
.glass-panel > a { display: flex; justify-content: space-between; margin-top: 28px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.glass-panel > a span { color: var(--red); }
.hero-note { position: absolute; z-index: 5; bottom: 12%; left: var(--pad); width: 190px; margin: 0; color: #8c9394; font-size: 10px; line-height: 1.7; }

.intro { min-height: 820px; padding: 140px var(--pad); position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: 9vw; align-items: center; }
.intro-heading h2, .section-heading h2, .contact h2 { margin: 24px 0 0; font-size: clamp(56px, 7.7vw, 118px); line-height: .84; letter-spacing: -.07em; }
.intro-panel { max-width: 490px; padding: clamp(28px, 4vw, 52px); justify-self: end; }

.services { scroll-margin-top: 114px; background: rgba(7,9,10,.82); border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); }
.section-heading { padding: 120px var(--pad) 75px; display: grid; grid-template-columns: .6fr 1.4fr; align-items: end; }
.section-heading .eyebrow { align-self: start; padding-top: 15px; }
.section-heading h2 { margin: 0; }
.service-list { border-top: 1px solid #303435; }
.service-row { min-height: 165px; padding: 0 var(--pad); position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1fr .7fr auto; gap: 5vw; align-items: center; border-bottom: 1px solid #303435; transition: background .35s, padding .35s; }
.service-row::before { content: ''; position: absolute; z-index: -1; inset: 0 0 0 57%; background: linear-gradient(90deg, transparent, rgba(7,9,10,.18)), var(--service-image) center / cover; opacity: 0; filter: grayscale(1) contrast(1.1); transform: translateX(45px) scale(1.08); transition: opacity .45s, transform .7s cubic-bezier(.18,.8,.2,1); mix-blend-mode: multiply; }
.service-row::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, var(--red) 0 55%, rgba(237,43,34,.78) 100%); opacity: 0; transition: opacity .35s; }
.service-row h3 { position: relative; margin: 0; font-size: clamp(38px, 5vw, 74px); letter-spacing: -.055em; }
.service-row p { position: relative; color: #858c8e; font-size: 12px; line-height: 1.6; }
.service-row span { position: relative; color: var(--red); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.service-row:hover, .service-row:focus-visible { padding-left: calc(var(--pad) + 20px); background: var(--red); outline: none; }
.service-row:hover::before, .service-row:focus-visible::before { opacity: .7; transform: translateX(0) scale(1); }
.service-row:hover::after, .service-row:focus-visible::after { opacity: 1; }
.service-row:hover p, .service-row:focus-visible p { color: #ffd1ce; }
.service-row:hover span, .service-row:focus-visible span { color: white; }

.standard { min-height: 900px; padding: 80px var(--pad); position: relative; display: grid; place-items: center end; overflow: hidden; scroll-margin-top: 114px; }
.standard figure { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.standard figure::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,8,9,.3), rgba(6,8,9,.08)), linear-gradient(0deg, rgba(6,8,9,.6), transparent 45%); }
.standard figure img { width: 100%; height: 112%; object-fit: cover; filter: grayscale(.4) brightness(.62); will-change: transform; }
.standard-panel { position: relative; width: min(540px, 43vw); padding: clamp(35px, 5vw, 68px); text-align: left; background: rgba(5,7,8,.72); }
.standard-panel blockquote { margin: 18px 0 30px; font-size: clamp(44px, 4.9vw, 72px); line-height: .92; letter-spacing: -.06em; }
.standard-panel > p:not(.panel-title) { max-width: 460px; }

.proof { padding: 130px var(--pad); background: var(--paper); color: #0a0d0e; }
.proof .eyebrow { color: #666d6f; }
.proof blockquote { max-width: 1000px; margin: 48px 0 80px; font-size: clamp(48px, 7vw, 104px); line-height: .95; letter-spacing: -.065em; }
.client-line { display: flex; gap: 4vw; padding-top: 25px; overflow: auto; border-top: 1px solid rgba(10,14,16,.24); }
.client-line a { flex: 0 0 auto; color: #5f6668; font-size: 11px; font-weight: 700; text-transform: uppercase; transition: color .25s; }
.client-line a:hover { color: var(--red); }

.contact { min-height: 720px; padding: 120px var(--pad); display: grid; grid-template-columns: 1.25fr .75fr; gap: 8vw; align-items: center; scroll-margin-top: 114px; }
.contact-panel { padding: clamp(28px, 4vw, 52px); }
.contact-panel > a { margin-top: 0; padding: 19px 0; }
.contact-panel > a + a { border-top-color: rgba(255,255,255,.16); }

footer { padding: 70px var(--pad) 25px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 5vw; background: #050607; border-top: 1px solid #262a2b; }
footer img { width: 170px; }
footer > div { display: flex; flex-direction: column; }
footer small { margin-bottom: 14px; color: var(--red); font-size: 8px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
footer a, footer p { margin: 3px 0; color: #8d9496; font-size: 10px; line-height: 1.7; }
.copyright { grid-column: 1/-1; margin-top: 30px; padding-top: 18px; border-top: 1px solid #282b2d; color: #555c5e; font-size: 8px; text-transform: uppercase; }

.reveal { opacity: 0; transform: translateY(38px); transition: opacity .8s, transform 1s cubic-bezier(.18,.8,.2,1); }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .site-nav nav { display: none; }
  .hero { min-height: 950px; }
  .hero-orbit { width: 100vw; }
  .hero-image { width: 78vw; }
  .hero-panel { right: 22px; bottom: 7%; width: min(360px, calc(100vw - 44px)); }
  .hero-note { bottom: 30%; }
  .intro, .contact { grid-template-columns: 1fr; }
  .intro { gap: 70px; }
  .intro-panel { justify-self: stretch; max-width: 620px; }
  .section-heading { grid-template-columns: 1fr; gap: 35px; }
  .service-row { grid-template-columns: 1fr auto; }
  .service-row::before { inset: 0 0 0 45%; }
  .service-row p { grid-column: 1; grid-row: 2; margin-top: -35px; }
  .service-row span { grid-column: 2; grid-row: 1 / 3; }
  footer { grid-template-columns: 1fr 1fr; }
  footer > div:first-child { grid-column: 1/-1; }
}

@media (max-width: 600px) {
  .site-nav { height: 72px; }
  .logo { width: 138px; }
  .support { padding: 9px; font-size: 8px; }
  .hero { min-height: 830px; padding-top: 135px; }
  .hero h1 { font-size: clamp(63px, 19vw, 82px); }
  .hero-orbit { width: 124vw; }
  .hero-image { width: 92vw; }
  .hero-note { display: none; }
  .hero-panel { bottom: 5%; padding: 24px; }
  .intro { min-height: 720px; padding: 95px 22px; gap: 55px; }
  .intro-heading h2, .section-heading h2, .contact h2 { font-size: clamp(50px, 15vw, 70px); }
  .section-heading { padding: 90px 22px 60px; }
  .service-row { min-height: 145px; padding: 25px 22px; }
  .service-row::before { inset: 0 0 0 30%; }
  .service-row:hover { padding-left: 31px; }
  .service-row h3 { font-size: 34px; }
  .service-row p { max-width: 260px; margin-top: 5px; }
  .standard { min-height: 760px; padding: 60px 22px; place-items: end center; }
  .standard-panel { width: min(560px, 100%); text-align: left; }
  .standard-panel blockquote { font-size: 47px; }
  .proof { padding: 90px 22px; }
  .proof blockquote { margin: 40px 0 65px; font-size: 49px; }
  .contact { min-height: 680px; padding: 90px 22px; gap: 55px; }
  footer { grid-template-columns: 1fr; padding: 55px 22px 22px; }
  footer > div:first-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-image, .hero-image img, .reveal { transition: none; }
  .hero-image { transform: translate(-50%, -50%); }
  .hero-image img { filter: saturate(.72) brightness(.56); transform: none; }
  .reveal { opacity: 1; transform: none; }
  .world { display: none; }
}