:root { --navy:#13344b; --navy-mid:#1a4260; --teal:#3fd1bf; --teal-dark:#2fb9a7; --orange:#f5a623; --off-white:#f5f6f8; --mid-grey:#e4e7ec; --text:#242c36; --soft:#4a5568; --muted:#8a93a6; --white:#ffffff; --shadow:0 4px 24px rgba(19,52,75,0.10); --shadow-lg:0 10px 40px rgba(19,52,75,0.18); }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'DM Sans',sans-serif; color:var(--text); line-height:1.65; background:var(--white); font-size:18px; }
h1,h2,h3,h4 { font-family:'Sora',sans-serif; }
nav { background:var(--navy); position:sticky; top:0; z-index:1000; padding:0 2rem; box-shadow:0 2px 16px rgba(0,0,0,0.22); }
.nav-inner { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; height:72px; }
.nav-logo { display:flex; align-items:center; text-decoration:none; }
.nav-links { display:flex; list-style:none; gap:2rem; align-items:center; }
.nav-links a { color:rgba(255,255,255,0.82); text-decoration:none; font-size:0.9rem; font-weight:500; transition:color 0.2s; }
.nav-links a:hover,.nav-links a.active { color:var(--teal); }
.nav-cta { background:var(--teal)!important; color:var(--navy)!important; padding:0.5rem 1.3rem; border-radius:4px; font-weight:600!important; font-family:'Sora',sans-serif; }
.nav-cta:hover { background:var(--teal-dark)!important; }
.btn { font-family:'Sora',sans-serif; font-weight:600; font-size:0.95rem; padding:0.92rem 2rem; border-radius:5px; text-decoration:none; transition:all 0.2s; display:inline-block; }
.btn-teal { background:var(--teal); color:var(--navy); }
.btn-teal:hover { background:var(--teal-dark); transform:translateY(-1px); }
.btn-ghost { border:2px solid rgba(255,255,255,0.35); color:var(--white); }
.btn-ghost:hover { border-color:rgba(255,255,255,0.7); background:rgba(255,255,255,0.07); }
footer { background:rgba(10,28,40,0.85); border-top:1px solid rgba(255,255,255,0.07); padding:2rem 2rem; position:relative; z-index:1; }
.footer-inner { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.2rem; }
.footer-links { display:flex; gap:2rem; flex-wrap:wrap; }
.footer-links a { color:rgba(255,255,255,0.4); text-decoration:none; font-size:0.88rem; transition:color 0.2s; }
.footer-links a:hover { color:var(--teal); }
.footer-copy { color:rgba(255,255,255,0.25); font-size:0.82rem; }
@media (max-width:600px) { .nav-links { display:none; } }
body { background:var(--navy); }
.page-wrap { min-height:100vh; position:relative; display:flex; flex-direction:column; }
.bg-img { position:fixed; inset:0; background-image:url('./img/hero-city-skyline.jpg'); background-size:cover; background-position:center; z-index:0; }
.bg-img::after { content:''; position:absolute; inset:0; background:linear-gradient(160deg,rgba(19,52,75,0.97) 0%,rgba(19,52,75,0.93) 40%,rgba(19,52,75,0.82) 70%,rgba(19,52,75,0.75) 100%); }
nav { position:relative; z-index:1001; }
.contact-main { flex:1; display:flex; align-items:center; justify-content:center; padding:5rem 2rem; position:relative; z-index:1; }
.contact-inner { max-width:680px; width:100%; text-align:center; }
.eyebrow { display:inline-flex; align-items:center; gap:0.55rem; font-family:'Sora',sans-serif; font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--teal); margin-bottom:1.2rem; }
.eyebrow-dot { width:7px; height:7px; border-radius:50%; background:var(--orange); flex-shrink:0; }
.contact-inner h1 { font-size:clamp(2.2rem,3.8vw,3.4rem); font-weight:700; color:var(--white); line-height:1.12; margin-bottom:1.2rem; }
.contact-inner h1 .hl { color:var(--teal); }
.contact-sub { font-size:1.08rem; color:rgba(255,255,255,0.68); line-height:1.78; margin-bottom:2.8rem; max-width:520px; margin-left:auto; margin-right:auto; }
.email-block { margin-bottom:2.5rem; }
.email-link { display:inline-block; font-family:'Sora',sans-serif; font-size:clamp(1.4rem,2.8vw,2rem); font-weight:700; color:var(--teal); text-decoration:none; border-bottom:2px solid rgba(63,209,191,0.35); padding-bottom:4px; transition:border-color 0.2s,color 0.2s; }
.email-link:hover { color:var(--white); border-color:var(--white); }
.email-hint { font-size:0.88rem; color:rgba(255,255,255,0.4); margin-top:0.8rem; }
.next-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-bottom:3rem; text-align:left; }
.next-step { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:10px; padding:1.5rem; }
.next-step-num { font-family:'Sora',sans-serif; font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--orange); margin-bottom:0.5rem; }
.next-step h3 { font-family:'Sora',sans-serif; font-size:0.92rem; font-weight:700; color:var(--white); margin-bottom:0.3rem; }
.next-step p { font-size:0.85rem; color:rgba(255,255,255,0.55); line-height:1.6; }
.divider { display:flex; align-items:center; gap:1rem; margin-bottom:2rem; }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:rgba(255,255,255,0.1); }
.divider span { font-size:0.82rem; color:rgba(255,255,255,0.3); font-family:'Sora',sans-serif; letter-spacing:0.08em; text-transform:uppercase; }
.linkedin-block { margin-bottom:3rem; }
.linkedin-link { display:inline-flex; align-items:center; gap:0.7rem; font-family:'Sora',sans-serif; font-size:0.97rem; font-weight:600; color:rgba(255,255,255,0.7); text-decoration:none; border:1px solid rgba(255,255,255,0.18); border-radius:6px; padding:0.75rem 1.4rem; transition:all 0.2s; }
.linkedin-link:hover { color:var(--white); border-color:rgba(255,255,255,0.45); background:rgba(255,255,255,0.06); }
.linkedin-icon { width:20px; height:20px; flex-shrink:0; }
.linkedin-sub { font-size:0.85rem; color:rgba(255,255,255,0.35); margin-top:0.8rem; }
.urgency { background:rgba(63,209,191,0.07); border:1px solid rgba(63,209,191,0.2); border-radius:8px; padding:1.2rem 1.6rem; margin-bottom:3rem; }
.urgency p { font-size:0.95rem; color:rgba(255,255,255,0.75); line-height:1.65; font-style:italic; }
.urgency p strong { color:var(--teal); font-style:normal; }
@media(max-width:700px){ .next-steps{grid-template-columns:1fr;} .contact-inner h1{font-size:2rem;} .email-link{font-size:1.3rem;} }