:root { --ink:#071317; --cyan:#10b9c8; --coral:#ff6948; --cream:#f3f0e9; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.site-header { position:absolute; z-index:20; top:0; left:0; width:100%; height:96px; display:flex; align-items:center; justify-content:space-between; padding:0 5vw; color:white; border-bottom:1px solid rgba(255,255,255,.22); }
.brand img { width:156px; height:72px; object-fit:contain; }
nav { display:flex; gap:34px; font-size:13px; font-weight:700; letter-spacing:.06em; }
nav a:hover { color:#79edf6; }
.header-cta { border:1px solid rgba(255,255,255,.65); padding:14px 18px; font-size:13px; font-weight:700; }
.header-cta span,.primary-button span,.contact-action a span { color:var(--coral); margin-left:12px; }
.hero { height:min(900px,100vh); min-height:690px; position:relative; overflow:hidden; color:white; background:#071317; }
.hero-image { position:absolute; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,9,12,.9) 0%,rgba(2,9,12,.52) 46%,rgba(2,9,12,.12) 80%),linear-gradient(0deg,rgba(2,9,12,.68),transparent 45%); }
.hero-content { position:absolute; left:7vw; top:52%; transform:translateY(-43%); max-width:790px; }
.eyebrow,.section-kicker { font-size:12px; font-weight:800; letter-spacing:.22em; }
.eyebrow { display:flex; align-items:center; gap:13px; color:#b9eef2; }
.eyebrow span { width:34px; height:2px; background:var(--coral); }
h1,h2 { margin:0; line-height:.91; letter-spacing:-.055em; font-weight:800; }
h1 { font-size:clamp(74px,9.6vw,150px); }
h1 em,h2 em { color:var(--coral); font-family:Georgia,serif; font-weight:400; }
.hero-copy { font-size:clamp(18px,1.55vw,24px); line-height:1.5; margin:28px 0 32px; color:#e7f2f2; }
.hero-actions { display:flex; align-items:center; gap:30px; }
.primary-button { background:var(--cyan); color:#031013; padding:18px 22px; font-size:14px; font-weight:800; }
.text-link { font-size:13px; font-weight:700; border-bottom:1px solid rgba(255,255,255,.5); padding:12px 0; }
.text-link span { margin-left:10px; color:#78e5ee; }
.hero-proof { position:absolute; bottom:35px; right:5vw; display:flex; gap:14px; align-items:center; text-transform:uppercase; font-size:11px; letter-spacing:.18em; }
.hero-proof span { color:var(--coral); font-family:Georgia,serif; font-size:26px; }
.intro,.portfolio,.recognition { padding:120px 7vw; }
.section-kicker { color:#32828a; margin:0 0 30px; }
.intro-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:9vw; align-items:start; }
.intro h2,.portfolio h2,.recognition h2 { font-size:clamp(48px,6vw,92px); }
.intro-grid>div { padding-top:20px; font-size:18px; line-height:1.75; color:#4a575a; }
.signature { color:var(--ink); font-weight:800; border-left:3px solid var(--coral); padding-left:18px; margin-top:32px; }
.services { background:#071317; color:white; padding:120px 7vw; display:grid; grid-template-columns:.72fr 1.28fr; gap:7vw; }
.section-kicker.light { color:#6ed9e2; }
.section-heading h2 { font-size:clamp(52px,6.8vw,100px); }
.service-list { border-top:1px solid #375055; }
.service-row { display:grid; grid-template-columns:46px 1fr 1fr 26px; gap:25px; align-items:center; padding:31px 0; border-bottom:1px solid #375055; }
.service-row>span { color:var(--coral); font-size:12px; font-weight:800; }
.service-row h3 { font-size:23px; margin:0; }
.service-row p { color:#aebdc0; line-height:1.6; font-size:14px; margin:0; }
.service-row b { font-size:22px; color:var(--cyan); }
.portfolio-heading { display:flex; align-items:end; justify-content:space-between; gap:60px; margin-bottom:70px; }
.portfolio-heading>p { width:360px; line-height:1.7; color:#596466; }
.project-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.project-card { height:430px; margin:0; position:relative; overflow:hidden; background:#111; }
.project-card img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.project-card:hover img { transform:scale(1.035); }
.project-card:after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.78)); }
.project-card figcaption { position:absolute; z-index:2; left:28px; bottom:25px; color:white; }
.project-card figcaption span { display:block; color:#80e5ed; font-size:10px; letter-spacing:.17em; text-transform:uppercase; margin-bottom:8px; }
.project-card figcaption strong { font-size:26px; }
.project-1 { grid-column:span 2; height:620px; }
.reel-section { background:var(--coral); color:#071317; padding:100px 7vw; display:grid; grid-template-columns:.72fr 1.28fr; gap:7vw; align-items:center; }
.reel-copy .section-kicker { color:#071317; }
.reel-copy h2 { font-size:clamp(52px,6.8vw,96px); }
.reel-copy h2 em { color:white; }
.reel-copy>p:last-child { font-size:17px; line-height:1.7; max-width:420px; }
.reel-section video { width:100%; background:#000; box-shadow:18px 18px 0 rgba(7,19,23,.14); }
.recognition { display:grid; grid-template-columns:.72fr 1.28fr; align-items:center; gap:9vw; }
.recognition-image { max-height:720px; overflow:hidden; background:white; box-shadow:0 24px 60px rgba(7,19,23,.13); }
.recognition-image img { width:100%; height:100%; object-fit:contain; }
.recognition-copy>p:not(.section-kicker) { font-size:18px; line-height:1.7; max-width:600px; color:#526063; }
.recognition-copy small { color:#738084; }
.contact { padding:110px 7vw; background:#0c252a; color:white; display:grid; grid-template-columns:1.2fr .8fr; gap:9vw; align-items:end; }
.contact h2 { font-size:clamp(62px,8vw,120px); }
.contact-action p { color:#b5c9cc; line-height:1.7; font-size:17px; }
.contact-action a { display:block; width:max-content; margin:28px 0 20px; padding:17px 20px; background:var(--cyan); color:#071317; font-weight:800; }
.contact-action strong { font-size:24px; }
footer { background:#071317; color:#9db2b6; padding:30px 7vw; border-top:1px solid #264148; display:flex; justify-content:space-between; align-items:center; font-size:12px; }
footer img { width:110px; height:54px; object-fit:contain; }
.whatsapp-float { position:fixed; z-index:50; right:24px; bottom:24px; display:flex; align-items:center; gap:10px; color:white; background:#21b85a; padding:12px 17px 12px 12px; border-radius:40px; font-size:13px; font-weight:800; box-shadow:0 10px 30px rgba(0,0,0,.3); }
.whatsapp-float svg { width:27px; height:27px; fill:white; }
@media (max-width:900px) {
  .site-header { height:78px; padding:0 22px; }
  .brand img { width:120px; }
  nav { display:none; }
  .header-cta { padding:11px 13px; }
  .hero { min-height:700px; }
  .hero-content { left:25px; right:25px; }
  h1 { font-size:clamp(62px,20vw,96px); }
  .hero-copy br { display:none; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:12px; }
  .hero-proof { left:25px; right:auto; }
  .intro,.portfolio,.recognition { padding:85px 25px; }
  .intro-grid,.services,.reel-section,.recognition,.contact { grid-template-columns:1fr; }
  .intro-grid { gap:32px; }
  .services,.reel-section,.contact { padding:85px 25px; }
  .services { gap:55px; }
  .service-row { grid-template-columns:35px 1fr 24px; }
  .service-row p { grid-column:2/4; }
  .portfolio-heading { display:block; }
  .portfolio-heading>p { width:auto; margin-top:30px; }
  .project-grid { grid-template-columns:1fr; }
  .project-card,.project-1 { grid-column:auto; height:350px; }
  .reel-section { gap:45px; }
  .recognition-image { max-height:520px; }
  footer { flex-direction:column; gap:8px; text-align:center; }
  .whatsapp-float span { display:none; }
  .whatsapp-float { padding:13px; }
}