:root {
  --ink: #06111d;
  --ink-soft: #0c1d2c;
  --paper: #f4f6f7;
  --white: #ffffff;
  --blue: #009cf0;
  --blue-bright: #11b6ff;
  --muted: #657484;
  --line: rgba(7, 25, 39, 0.14);
  --heading: "Barlow Condensed", sans-serif;
  --body: "Manrope", sans-serif;
  --shadow: 0 24px 70px rgba(2, 14, 24, 0.2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 96px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.section { padding-block: 120px; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 1000; background: var(--blue); color: white; padding: 10px 16px; }
.skip-link:focus { top: 16px; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,.12);
  transition: background .3s ease, backdrop-filter .3s ease;
}
.site-header.scrolled { background: rgba(5, 16, 27, .92); backdrop-filter: blur(14px); }
.nav-shell { height: 88px; width: min(1320px, calc(100% - 48px)); margin: auto; display: flex; align-items: center; justify-content: space-between; }
.brand { width: 255px; }
.brand img { width: 100%; height: 62px; object-fit: contain; object-position: left center; }
.main-nav { display: flex; gap: 30px; align-items: center; color: rgba(255,255,255,.86); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.main-nav > a:not(.nav-cta) { position: relative; }
.main-nav > a:not(.nav-cta)::after { content:""; position:absolute; inset:auto 0 -8px; height:2px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:.25s; }
.main-nav > a:hover::after, .main-nav > a:focus-visible::after { transform: scaleX(1); }
.nav-cta { padding: 13px 18px; color: white; border: 1px solid rgba(0,156,240,.7); background: rgba(0,156,240,.14); }
.nav-cta:hover { background: var(--blue); }
.menu-toggle { display:none; width:44px; height:44px; border:0; background:transparent; padding:9px; }
.menu-toggle span { display:block; height:2px; margin:6px 0; background:white; transition:.3s; }

.hero { position: relative; min-height: 860px; height: 100svh; color: white; background: var(--ink); overflow: hidden; }
.hero-media, .hero-scrim, .hero-grid { position:absolute; inset:0; }
.hero-media { left:39%; }
.hero-media img { width:100%; height:100%; object-fit:cover; object-position:50% center; filter:saturate(.72) contrast(1.1); }
.hero-scrim { background: linear-gradient(90deg, #06111d 0%, #06111d 37%, rgba(6,17,29,.78) 54%, rgba(6,17,29,.18) 100%), linear-gradient(0deg, rgba(5,15,25,.6), transparent 46%); }
.hero-grid { opacity:.18; background-image: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(90deg,#000,transparent 70%); }
.hero::before { content:""; position:absolute; z-index:2; width:480px; height:480px; left:-210px; top:140px; border:1px solid rgba(0,156,240,.38); border-radius:50%; box-shadow:0 0 0 52px rgba(0,156,240,.04), 0 0 0 104px rgba(0,156,240,.03); }
.hero-content { position:relative; z-index:3; height:100%; display:flex; align-items:center; justify-content:space-between; padding-top:80px; }
.hero-copy { width:min(670px,63%); }
.eyebrow { margin:0 0 20px; color:#a9c5d7; font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.eyebrow span { display:inline-block; width:42px; height:2px; margin:0 12px 3px 0; background:var(--blue); }
.eyebrow.dark { color:#477086; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:var(--heading); line-height:.94; }
h1 { margin-bottom:28px; font-size:clamp(68px,7.2vw,108px); letter-spacing:-.035em; text-transform:uppercase; max-width:780px; }
h1 em, h2 em { color:var(--blue-bright); font-style:normal; }
.hero-lead { max-width:620px; color:#d5e0e7; font-size:clamp(17px,1.45vw,20px); line-height:1.7; }
.hero-actions { display:flex; gap:14px; margin:38px 0 48px; }
.button { min-height:54px; display:inline-flex; align-items:center; justify-content:center; padding:0 26px; border:1px solid transparent; font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; transition:transform .25s, background .25s, border-color .25s; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--blue); color:white; box-shadow:0 12px 34px rgba(0,156,240,.24); }
.button-primary:hover { background:#00adff; }
.button-ghost { border-color:rgba(255,255,255,.38); color:white; background:rgba(255,255,255,.02); }
.button-ghost:hover { border-color:white; }
.hero-proof { display:flex; gap:34px; }
.hero-proof div { display:flex; align-items:center; gap:10px; max-width:160px; }
.hero-proof strong { font-family:var(--heading); font-size:30px; color:var(--blue-bright); }
.hero-proof span { color:#b7c3cc; font-size:11px; line-height:1.35; }
.hero-panel { align-self:flex-end; width:280px; margin-bottom:90px; padding:28px; border-top:3px solid var(--blue); background:rgba(7,19,31,.85); backdrop-filter:blur(12px); box-shadow:var(--shadow); }
.panel-index { color:var(--blue-bright); font-family:var(--heading); font-size:18px; }
.hero-panel p { margin:24px 0 20px; color:#dce6ec; font-size:15px; }
.hero-panel a { display:block; font-family:var(--heading); font-size:28px; font-weight:700; color:white; }
.hero-panel small { color:#8fa4b2; }
.scroll-cue { position:absolute; z-index:4; left:24px; bottom:46px; color:#93a6b3; font-size:10px; letter-spacing:.16em; text-transform:uppercase; writing-mode:vertical-rl; }
.scroll-cue span { color:var(--blue); margin-top:10px; font-size:18px; }

.signal-strip { background:var(--blue); color:white; overflow:hidden; }
.signal-track { min-height:64px; display:flex; align-items:center; justify-content:center; gap:28px; white-space:nowrap; font-family:var(--heading); font-size:20px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.signal-track i { width:5px; height:5px; background:var(--ink); transform:rotate(45deg); }

.section-heading { display:grid; grid-template-columns:1.25fr .75fr; gap:80px; align-items:end; margin-bottom:54px; }
.section-heading h2, .process-intro h2, .contact h2 { margin-bottom:0; font-size:clamp(52px,5vw,76px); letter-spacing:-.025em; text-transform:uppercase; }
.section-heading > p { margin:0; color:var(--muted); max-width:490px; }
.service-grid { display:grid; grid-template-columns:1.15fr .85fr; grid-template-rows:440px 440px; gap:16px; }
.service-card { position:relative; overflow:hidden; color:white; min-height:0; background:var(--ink); }
.service-card-wide:nth-child(4) { grid-column:2; }
.service-card img { width:100%; height:100%; object-fit:cover; transition:transform .65s cubic-bezier(.2,.7,.2,1), filter .5s; }
.service-card:hover img { transform:scale(1.045); filter:saturate(1.08); }
.service-overlay { position:absolute; inset:0; background:linear-gradient(0deg, rgba(4,14,24,.96) 0%, rgba(4,14,24,.64) 42%, rgba(4,14,24,.05) 82%); }
.service-number { position:absolute; top:24px; right:25px; font-family:var(--heading); font-size:21px; color:var(--blue-bright); }
.service-content { position:absolute; inset:auto 34px 28px; }
.service-content > p { margin-bottom:5px; color:#9fc0d1; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.service-content h3 { margin-bottom:14px; font-size:clamp(32px,3.2vw,48px); text-transform:uppercase; }
.service-content ul { display:flex; flex-wrap:wrap; gap:6px 26px; list-style:none; margin:0; padding:0; color:#d0dce3; font-size:12px; }
.service-content li::before { content:""; display:inline-block; width:6px; height:6px; margin:0 8px 1px 0; background:var(--blue); }

.experience { position:relative; padding:140px 0; background:var(--ink); color:white; overflow:hidden; }
.experience-rail { position:absolute; top:20px; left:-24px; color:rgba(255,255,255,.025); font-family:var(--heading); font-size:118px; font-weight:800; white-space:nowrap; letter-spacing:.02em; }
.experience-inner { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; }
.experience-image { position:relative; height:650px; }
.experience-image::before { content:""; position:absolute; left:-28px; top:38px; width:84%; height:88%; border:1px solid rgba(0,156,240,.48); }
.experience-image img { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.85); box-shadow:var(--shadow); }
.experience-badge { position:absolute; z-index:2; right:-55px; bottom:48px; width:210px; aspect-ratio:1; display:flex; flex-direction:column; justify-content:center; padding:30px; background:var(--blue); }
.experience-badge strong { font-family:var(--heading); font-size:70px; line-height:.8; }
.experience-badge span { margin-top:14px; font-size:12px; line-height:1.45; }
.experience-copy h2 { font-size:clamp(60px,6vw,88px); text-transform:uppercase; }
.experience-copy > p:not(.eyebrow) { color:#aebdc7; font-size:17px; }
.experience-copy blockquote { margin:36px 0; padding:20px 0 20px 24px; border-left:3px solid var(--blue); color:white; font-size:18px; }
.value-row { display:flex; flex-wrap:wrap; gap:10px; }
.value-row span { padding:9px 13px; border:1px solid rgba(255,255,255,.15); color:#b7c8d2; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }

.process { display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; }
.process-intro { position:sticky; top:140px; align-self:start; }
.process-intro > p:last-child { max-width:420px; color:var(--muted); }
.process-steps { list-style:none; margin:0; padding:0; }
.process-steps li { display:grid; grid-template-columns:90px 1fr; gap:24px; padding:42px 0; border-top:1px solid var(--line); }
.process-steps li:last-child { border-bottom:1px solid var(--line); }
.process-steps > li > span { font-family:var(--heading); color:var(--blue); font-size:21px; }
.process-steps h3 { margin:0 0 8px; font-size:38px; text-transform:uppercase; }
.process-steps p { margin:0; color:var(--muted); }

.reasons { background:#0b2132; color:white; }
.reasons-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; }
.reasons-title h2 { font-size:clamp(60px,6vw,90px); text-transform:uppercase; }
.reasons-list { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.12); }
.reasons-list article { min-height:260px; padding:34px; background:#0b2132; }
.reasons-list strong { color:var(--blue-bright); font-family:var(--heading); font-size:18px; }
.reasons-list h3 { margin:38px 0 12px; font-size:30px; text-transform:uppercase; }
.reasons-list p { margin:0; color:#9fb2bf; font-size:14px; }

.contact { position:relative; background:var(--ink); color:white; overflow:hidden; }
.contact::before { content:"RM"; position:absolute; right:-5vw; bottom:-9vw; color:rgba(255,255,255,.025); font-family:var(--heading); font-size:35vw; font-weight:800; line-height:.7; }
.contact-glow { position:absolute; width:640px; height:640px; left:-300px; top:-150px; border-radius:50%; background:rgba(0,156,240,.12); filter:blur(90px); }
.contact-layout { position:relative; display:grid; grid-template-columns:.85fr 1.15fr; gap:100px; }
.contact-copy > p:not(.eyebrow) { color:#aebdc7; max-width:480px; }
.contact-details { margin-top:50px; display:grid; gap:18px; }
.contact-details a, .contact-details > div { display:grid; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.12); }
.contact-details span { color:#6f8898; font-size:10px; text-transform:uppercase; letter-spacing:.12em; }
.contact-details strong { margin-top:3px; font-size:15px; }
.contact-form { padding:44px; background:white; color:var(--ink); box-shadow:var(--shadow); }
.contact-form label { display:grid; gap:8px; margin-bottom:20px; color:#385164; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact-form input, .contact-form select, .contact-form textarea { width:100%; border:0; border-bottom:1px solid #cbd4da; border-radius:0; padding:12px 0; background:transparent; color:var(--ink); outline:none; text-transform:none; letter-spacing:normal; transition:border-color .2s; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color:var(--blue); }
.contact-form textarea { resize:vertical; }
.contact-form .button { width:100%; border:0; }
.form-note { margin:12px 0 0; color:#7a8994; font-size:11px; text-align:center; }

.site-footer { padding:34px 0; background:#030a11; color:white; border-top:1px solid rgba(255,255,255,.1); }
.footer-inner { display:grid; grid-template-columns:220px 1fr auto; align-items:center; gap:38px; }
.footer-inner img { width:210px; max-height:64px; object-fit:contain; object-position:left center; }
.footer-inner p { margin:0; color:#b5c3cc; font-size:13px; }
.footer-inner small { color:#617582; }
.footer-inner > a { color:var(--blue-bright); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.whatsapp-float { position:fixed; z-index:90; right:24px; bottom:24px; width:58px; height:58px; display:grid; place-items:center; padding:0; line-height:0; overflow:hidden; border-radius:50%; background:#25d366; color:white; box-shadow:0 12px 34px rgba(0,0,0,.28); transition:transform .25s; }
.whatsapp-float:hover { transform:translateY(-4px) scale(1.04); }
.whatsapp-float svg { display:block; width:28px; height:28px; margin:0; transform:none; fill:currentColor; }

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

@media (max-width: 980px) {
  .shell, .nav-shell { width:min(100% - 32px, 760px); }
  .section { padding-block:88px; }
  /* Keep the mobile header in document flow so hero copy can never slide behind it. */
  .site-header { position:relative; top:auto; background:rgba(5,16,27,.96); backdrop-filter:blur(12px); }
  .nav-shell { height:80px; }
  .brand { width:200px; }
  .brand img { height:58px; }
  .menu-toggle { display:block; z-index:2; }
  .menu-toggle.active span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
  .menu-toggle.active span:nth-child(2) { opacity:0; }
  .menu-toggle.active span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
  .site-header.scrolled { backdrop-filter:none; }
  .brand { position:relative; z-index:2; }
  .main-nav { position:fixed; top:0; left:0; width:100vw; height:100dvh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:100px max(32px,8vw); gap:24px; background:rgba(4,14,24,.98); transform:translateX(100%); transition:transform .35s ease; font-family:var(--heading); font-size:30px; text-transform:uppercase; }
  .main-nav.open { transform:none; }
  .nav-cta { margin-top:12px; font-family:var(--body); font-size:13px; }
  .hero { height:auto; min-height:0; }
  .hero-media { left:22%; opacity:.55; }
  .hero-scrim { background:linear-gradient(90deg,#06111d 0%,rgba(6,17,29,.86) 65%,rgba(6,17,29,.48)),linear-gradient(0deg,rgba(5,15,25,.78),transparent); }
  .hero-content { height:auto; min-height:0; align-items:flex-start; padding-top:48px; padding-bottom:84px; }
  .hero-copy { width:100%; max-width:700px; }
  h1 { font-size:clamp(60px,10.5vw,94px); }
  .hero-panel, .scroll-cue { display:none; }
  .hero-proof { gap:18px; }
  .section-heading, .experience-inner, .process, .reasons-layout, .contact-layout { grid-template-columns:1fr; gap:54px; }
  .service-grid { grid-template-columns:1fr 1fr; grid-template-rows:400px 400px; }
  .experience-image { height:560px; max-width:620px; }
  .experience-badge { right:-14px; }
  .process-intro { position:static; }
}

@media (max-width: 660px) {
  body { font-size:15px; }
  .shell, .nav-shell { width:calc(100% - 28px); }
  .brand { width:164px; }
  .brand img { height:50px; }
  .section { padding-block:72px; }
  .hero-media { left:0; opacity:.38; }
  .hero-scrim { background:linear-gradient(90deg,#06111d 0%,rgba(6,17,29,.9) 72%,rgba(6,17,29,.62)),linear-gradient(0deg,rgba(5,15,25,.92),rgba(5,15,25,.2) 70%); }
  .hero-content { padding-top:34px; padding-bottom:72px; }
  .eyebrow { display:flex; align-items:flex-start; flex-wrap:wrap; gap:6px 8px; max-width:100%; margin-bottom:16px; font-size:9px; letter-spacing:.08em; line-height:1.35; white-space:normal; }
  .eyebrow span { flex:0 0 26px; width:26px; margin-top:.45em; }
  h1 { max-width:100%; margin-bottom:22px; font-size:clamp(56px,14.5vw,76px); line-height:.88; letter-spacing:-.025em; }
  .hero-lead { max-width:34rem; font-size:15px; line-height:1.5; }
  .hero-actions { display:grid; margin:28px 0 34px; }
  .hero-actions .button { width:100%; }
  .hero-proof { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; width:100%; padding-top:4px; }
  .hero-proof div { display:grid; gap:5px; min-width:0; max-width:none; }
  .hero-proof strong { display:block; font-size:32px; line-height:1; }
  .hero-proof span { font-size:10px; line-height:1.25; }
  .signal-track { min-height:76px; justify-content:flex-start; width:max-content; padding-inline:20px; gap:20px; font-size:16px; animation:none; }
  .section-heading { gap:24px; margin-bottom:36px; }
  .section-heading h2, .process-intro h2, .contact h2 { font-size:48px; }
  .service-grid { display:grid; grid-template-columns:1fr; grid-template-rows:none; }
  .service-card, .service-card-wide:nth-child(4) { grid-column:auto; height:390px; }
  .service-content { inset:auto 22px 24px; }
  .service-content h3 { font-size:36px; }
  .service-content ul { display:grid; gap:4px; }
  .experience { padding:90px 0; }
  .experience-inner { gap:68px; }
  .experience-image { height:430px; }
  .experience-image::before { left:-10px; top:22px; }
  .experience-badge { right:-4px; bottom:-42px; width:155px; padding:20px; }
  .experience-badge strong { font-size:54px; }
  .experience-copy h2 { font-size:56px; }
  .process-steps li { grid-template-columns:50px 1fr; gap:10px; padding:32px 0; }
  .process-steps h3 { font-size:32px; }
  .reasons-list { grid-template-columns:1fr; }
  .reasons-list article { min-height:215px; }
  .contact-form { padding:26px 20px; }
  .form-row { grid-template-columns:1fr; gap:0; }
  .footer-inner { grid-template-columns:1fr; gap:18px; }
  .footer-inner > a { justify-self:start; }
  .whatsapp-float { width:54px; height:54px; right:16px; bottom:16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}