@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;1,600&family=DM+Sans:wght@400;500;600&display=swap');

:root { --ink:#08131e; --panel:#102331; --white:#f7f8f8; --muted:#a9bbc6; --line:rgba(255,255,255,.15); --blue:#61aede; --orange:#f26922; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--ink); }
body { min-height:100%; margin:0; color:var(--white); font-family:"DM Sans",Arial,sans-serif; }
.page-shell { min-height:100vh; isolation:isolate; overflow:hidden; position:relative; display:grid; grid-template-columns:minmax(0,1.32fr) minmax(355px,.68fr); grid-template-rows:1fr auto; background:linear-gradient(125deg,#07131e 0%,#0b202d 58%,#102b3a 100%); }
.grid { position:absolute; inset:0; z-index:-1; opacity:.32; background-image:linear-gradient(rgba(160,202,225,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(160,202,225,.1) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(to bottom,black,transparent 82%); }
.ambient { position:absolute; z-index:-1; border-radius:50%; filter:blur(4px); opacity:.65; animation:drift 12s ease-in-out infinite alternate; }
.ambient--blue { width:42rem; height:42rem; top:-22rem; left:-15rem; background:radial-gradient(circle,rgba(61,139,186,.52),transparent 68%); }
.ambient--orange { width:30rem; height:30rem; right:-12rem; bottom:-12rem; background:radial-gradient(circle,rgba(242,105,34,.28),transparent 68%); animation-delay:-6s; }
.hero { padding:clamp(2rem,5vw,5.5rem) clamp(2rem,7vw,8rem) 3rem; display:flex; min-height:calc(100vh - 3rem); flex-direction:column; justify-content:center; }
.brand { align-self:flex-start; position:absolute; top:clamp(1.7rem,4vw,3.5rem); left:clamp(2rem,7vw,8rem); display:block; width:clamp(10.5rem,15vw,14.5rem); transition:transform .25s ease; }
.brand:hover,.brand:focus-visible { transform:scale(1.035); }
.brand:focus-visible,.contact-item:focus-visible { outline:2px solid var(--blue); outline-offset:5px; }
.brand img { display:block; width:100%; height:auto; mix-blend-mode:screen; }
.hero__copy { max-width:46rem; animation:rise .7s .1s both; }
.eyebrow,.contact-card__kicker { margin:0 0 1.2rem; font-size:.68rem; font-weight:600; letter-spacing:.18em; color:var(--blue); }
.eyebrow { display:flex; align-items:center; gap:.7rem; }
.eyebrow span { width:2rem; height:2px; display:inline-block; background:var(--orange); }
h1,h2 { margin:0; font-family:"Barlow Condensed",Arial,sans-serif; text-transform:uppercase; }
h1 { font-size:clamp(3.5rem,7vw,7.25rem); font-weight:700; line-height:.86; letter-spacing:-.035em; }
h1 em { font-style:italic; font-weight:600; color:var(--orange); }
.intro { max-width:34rem; margin:2rem 0 0; color:var(--muted); font-size:1rem; line-height:1.7; }
.progress { width:min(31rem,100%); margin-top:clamp(3.5rem,8vh,7rem); animation:rise .7s .27s both; }
.progress__labels { display:flex; justify-content:space-between; margin-bottom:.65rem; color:var(--muted); font-size:.61rem; font-weight:600; letter-spacing:.13em; }
.progress__track { height:3px; overflow:hidden; background:rgba(255,255,255,.16); }
.progress__track span { width:72%; height:100%; display:block; position:relative; background:linear-gradient(90deg,var(--blue),var(--orange)); animation:load 1.6s .55s cubic-bezier(.2,.75,.25,1) both; }
.progress__track span::after { content:""; position:absolute; top:-3px; right:-1px; width:8px; height:8px; border:2px solid var(--orange); border-radius:50%; background:#123040; }
.contact-card { padding:clamp(2.5rem,5vw,5.5rem) clamp(2rem,5vw,4.8rem); min-height:calc(100vh - 3rem); display:flex; flex-direction:column; justify-content:center; background:rgba(8,20,30,.62); border-left:1px solid var(--line); backdrop-filter:blur(12px); animation:reveal .85s .15s both; }
.contact-card__kicker { color:var(--orange); }
h2 { max-width:20rem; font-size:clamp(2.3rem,3.4vw,3.6rem); line-height:.94; }
.contact-list { margin-top:3rem; border-top:1px solid var(--line); }
.contact-item { padding:1.25rem 0; display:flex; gap:1rem; color:var(--white); text-decoration:none; border-bottom:1px solid var(--line); font-size:.83rem; line-height:1.65; transition:color .2s ease,transform .2s ease; }
a.contact-item:hover { color:var(--blue); transform:translateX(.3rem); }
.contact-item svg { width:1.25rem; height:1.25rem; flex:0 0 auto; margin-top:.18rem; fill:none; stroke:var(--orange); stroke-linecap:round; stroke-linejoin:round; stroke-width:1.6; }
.contact-item strong { font-weight:600; }
address { font-style:normal; }
footer { grid-column:1 / -1; padding:1rem clamp(2rem,7vw,8rem); background:rgba(0,0,0,.16); color:#86a0af; font-size:.65rem; letter-spacing:.05em; }
@keyframes rise { from { opacity:0; transform:translateY(1.3rem); } to { opacity:1; transform:translateY(0); } }
@keyframes reveal { from { opacity:0; transform:translateX(2rem); } to { opacity:1; transform:translateX(0); } }
@keyframes load { from { width:0; } to { width:72%; } }
@keyframes drift { to { transform:translate(2rem,1.5rem) scale(1.08); } }
@media (max-width:800px) { .page-shell { display:block; } .hero { min-height:650px; padding-bottom:4rem; } .contact-card { min-height:unset; border-top:1px solid var(--line); border-left:0; } footer { padding:1rem 2rem; } }
@media (max-width:430px) { .hero { min-height:610px; padding-inline:1.5rem; } .brand { left:1.5rem; } h1 { font-size:3.25rem; } .intro { font-size:.91rem; } .contact-card { padding:2.5rem 1.5rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }