@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');:root{--navy:#051631;--blue:#0968ff;--cyan:#42caff;--text:#0b2148;--muted:#62748d}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--text);background:#fff}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.container{width:min(1250px,calc(100% - 48px));margin:auto}.site-header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 3px 24px #071b3712}.nav{min-height:84px;display:flex;align-items:center;gap:24px}.logo img{width:175px;max-height:75px;object-fit:contain}.nav-links{margin-left:auto;display:flex;gap:21px;align-items:center}.nav-links a{font-size:12px;font-weight:700;white-space:nowrap}.nav-links a:hover,.text-link:hover{color:var(--blue)}.nav-button,.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;font-weight:800;transition:.25s}.nav-button{background:var(--blue);color:#fff;padding:14px 18px;font-size:12px;white-space:nowrap}.menu-toggle{display:none;border:0;background:transparent;font-size:25px}.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 85% 25%,#104d9a 0%,transparent 46%),linear-gradient(110deg,#041329,#06285b 72%,#04152c);color:white}.hero:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#62b7ff12 1px,transparent 1px),linear-gradient(90deg,#62b7ff12 1px,transparent 1px);background-size:50px 50px;mask-image:linear-gradient(90deg,#000,transparent 80%)}.hero-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:#0875ff44;filter:blur(110px);right:-250px;top:-160px}.hero-layout{position:relative;min-height:650px;display:grid;grid-template-columns:42% 58%;align-items:center;gap:20px}.hero-copy{padding:60px 0;z-index:3}.eyebrow{display:block;font-size:11px;letter-spacing:2.5px;font-weight:900;color:#49bfff;text-transform:uppercase}.hero h1{font-size:clamp(42px,4.3vw,67px);line-height:1.06;letter-spacing:-2.7px;margin:22px 0}.hero h1 em,h2 em,.page-hero h1 em{font-style:normal;color:#2386ff}.hero-copy>p{font-size:17px;line-height:1.7;color:#d3e6ff;max-width:510px}.actions{display:flex;gap:13px;margin-top:30px}.btn{padding:16px 22px;font-size:13px}.primary{background:var(--blue);color:white;box-shadow:0 8px 24px #006bff40}.ghost{color:white;border:1px solid #57b8ff}.light{background:white;color:#06419b}.btn:hover,.nav-button:hover{transform:translateY(-3px)}.proof{display:flex;flex-wrap:wrap;gap:18px;margin-top:58px;color:#b8d8f5;font-size:11px}.hero-stage{height:510px;position:relative;isolation:isolate}.stage-label{position:absolute;top:12px;right:16px;letter-spacing:3px;font-size:10px;color:#a8d9ff}.stage-card{position:absolute;border:2px solid #6ccaff66;background:#081b3a;overflow:hidden;box-shadow:0 20px 45px #0008,0 0 35px #127bff33;border-radius:14px}.stage-card img{width:100%;height:100%;object-fit:cover}.stage-cec{left:5%;top:13%;width:66%;height:49%;transform:rotate(-5deg)}.stage-jovan{right:0;top:8%;width:39%;height:56%;transform:rotate(5deg)}.stage-infinity{left:13%;bottom:9%;width:44%;height:37%;display:grid;place-items:center;padding:20px;background:radial-gradient(circle,#143e74,#020a1d)}.stage-infinity img{object-fit:contain}.stage-silver{right:6%;bottom:5%;width:38%;height:32%;display:grid;place-items:center;padding:14px;background:linear-gradient(135deg,#f7f3ff,#d5c7ff)}.stage-silver img{object-fit:contain}.stage-bottom{position:absolute;bottom:0;left:3%;font-size:10px;letter-spacing:2px;color:#8fcbff}.stage-bottom b{color:#fff;margin:0 7px}.section{padding:85px 0}.section-top{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:35px}.section-top>div{max-width:700px}.section-top>p{max-width:370px;color:var(--muted);line-height:1.7}.section h2,.cta h2{font-size:clamp(30px,3.2vw,46px);letter-spacing:-1.6px;line-height:1.15;margin:12px 0 0}.capabilities{background:#f4f8ff}.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.cap-card{border:1px solid #dce9fa;border-radius:18px;background:white;padding:30px;box-shadow:0 12px 32px #0526540a;min-height:250px;transition:.25s}.cap-card:nth-child(1){border-top:5px solid #147dff}.cap-card:nth-child(2){border-top:5px solid #6c5cff}.cap-card:nth-child(3){border-top:5px solid #00bfc9}.cap-card:nth-child(4){border-top:5px solid #ed63b0}.cap-card:hover,.project-card:hover{transform:translateY(-6px)}.cap-icon{font-size:39px;color:#0668ef}.cap-card h3{font-size:17px}.cap-card p{font-size:13px;color:var(--muted);line-height:1.7}.work{background:#061936;color:white}.work h2{color:white}.text-link{font-weight:800;color:#77caff;font-size:13px}.project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:19px}.project-card{background:white;border-radius:16px;overflow:hidden;color:var(--text);transition:.25s;box-shadow:0 18px 35px #0002}.project-art{height:190px;background:#eaf3ff;overflow:hidden}.project-art img{width:100%;height:100%;object-fit:cover}.project-art.contain{padding:16px;background:linear-gradient(135deg,#eaf2ff,#f8faff)}.project-art.contain img{object-fit:contain}.project-copy{padding:22px}.project-copy .eyebrow{font-size:9px;color:#116be0;letter-spacing:1.2px}.project-copy h3{font-size:17px;line-height:1.3;min-height:45px}.project-copy p{font-size:12px;line-height:1.7;color:var(--muted);min-height:103px}.arrow{font-size:12px;font-weight:800;color:var(--blue)}.platform-strip{background:linear-gradient(120deg,#edf6ff,#fff)}.platform-grid{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}.platform-grid p{line-height:1.8;color:var(--muted);margin:20px 0}.platform-stack{display:grid;gap:15px}.platform-stack>div{background:white;border:1px solid #dce8fa;border-left:5px solid #0d78ff;border-radius:15px;padding:19px 25px;display:grid;grid-template-columns:48px 1fr;gap:4px;box-shadow:0 10px 22px #0028580b}.platform-stack span{grid-row:span 2;color:#0871ff;font-weight:900;font-size:23px}.platform-stack strong{font-size:16px}.platform-stack small{color:var(--muted)}.impact{background:#fff}.journey{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}.journey>div{background:linear-gradient(145deg,#072657,#0c5ab2);border-radius:16px;padding:27px;color:white;min-height:175px}.journey b{font-size:32px;color:#62c8ff;display:block}.journey strong,.journey small{display:block;margin-top:12px}.journey small{color:#c3e3ff;font-size:12px}.cta{padding:75px 0;background:radial-gradient(circle at 85% 40%,#0c69b6,#041b3e 60%);color:white}.cta-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:70px;align-items:center}.cta p{line-height:1.7;color:#cce4ff}.footer{background:#020e22;color:#c7d8ed;padding:34px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.footer img{width:130px;background:white;border-radius:8px;padding:5px}.footer p{font-size:13px}.footer small{display:block;margin-top:7px;color:#7f99b9}.footer a{font-size:13px;color:#7acaff}.page-hero{background:radial-gradient(circle at 80% 20%,#1556a6,#04162f 70%);color:white;padding:95px 0}.page-hero h1{font-size:clamp(38px,5vw,64px);letter-spacing:-2px;line-height:1.08;max-width:860px;margin:15px 0}.page-hero p{max-width:760px;line-height:1.7;color:#c7dffa}.back{display:block;margin-bottom:28px;color:#a3d7ff;font-weight:700;font-size:13px}.detail{background:#f3f8ff}.detail-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:55px}.detail-image{border-radius:18px;overflow:hidden;box-shadow:0 24px 45px #001d4230;background:#fff}.detail-image img{width:100%;height:auto}.detail-image.contain{padding:35px}.detail-image.contain img{max-height:450px;object-fit:contain}.detail-text p{line-height:1.8;color:var(--muted)}.detail-text .btn{margin-top:20px}@media(max-width:1100px){.nav-links{gap:11px}.nav-links a{font-size:11px}.logo img{width:130px}.hero-layout{grid-template-columns:1fr 1fr}.project-grid,.cap-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:800px){.nav{min-height:75px}.menu-toggle{display:block;margin-left:auto}.nav-button{display:none}.nav-links{display:none;position:absolute;top:75px;left:0;right:0;background:white;padding:20px 24px;box-shadow:0 18px 30px #0002;flex-direction:column;align-items:stretch}.nav-links.open{display:flex}.nav-links a{font-size:14px;padding:10px}.hero-layout{grid-template-columns:1fr;min-height:auto}.hero-copy{padding:75px 0 10px}.hero-stage{height:430px}.platform-grid,.detail-grid,.cta-grid{grid-template-columns:1fr;gap:30px}.journey{grid-template-columns:repeat(2,1fr)}}@media(max-width:540px){.container{width:calc(100% - 30px)}.logo img{width:120px}.hero h1{font-size:43px}.hero-stage{height:320px}.stage-label{font-size:8px}.stage-bottom{font-size:7px}.proof{margin-top:32px}.section{padding:62px 0}.section-top{display:block}.cap-grid,.project-grid,.journey{grid-template-columns:1fr}.project-copy p{min-height:0}.section-top>p{margin-top:18px}.footer-inner{flex-direction:column;text-align:center}.actions{flex-wrap:wrap}.page-hero{padding:65px 0}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* PHASE 2.4 — Correct selectors for actual .hero-stage markup.
   All four images are shown in full; no absolute overlap or clipping. */
.hero-layout{grid-template-columns:minmax(0,42%) minmax(0,58%);gap:24px}
.hero-stage{
  position:relative; height:auto; min-height:490px; width:100%; min-width:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,195px); gap:16px;
  align-content:center; padding:42px 8px 36px;
}
.hero-stage .stage-label{top:5px;right:10px;left:10px;text-align:center;white-space:normal}
.hero-stage .stage-bottom{bottom:4px;left:0;right:0;text-align:center;line-height:1.5}
.hero-stage .stage-card{
  position:relative; inset:auto; top:auto;right:auto;bottom:auto;left:auto;
  width:100%;height:100%;min-width:0; transform:none;
  display:flex;align-items:center;justify-content:center;
  padding:12px;overflow:hidden;border-radius:16px;
  background:#09254b;
}
.hero-stage .stage-card img{
  width:100%;height:100%;max-width:100%;max-height:100%;
  object-fit:contain;object-position:center;transform:none;
}
.hero-stage .stage-cec{background:#e9f8ff;padding:8px}
.hero-stage .stage-jovan{background:#071a36;padding:6px}
.hero-stage .stage-infinity{background:radial-gradient(circle,#133b73,#020a1d);padding:12px}
.hero-stage .stage-silver{background:linear-gradient(135deg,#f7f3ff,#d5c7ff);padding:12px}
/* The portfolio cards also preserve complete branding. */
.project-art img{object-fit:contain}
.project-art{padding:10px}
@media(max-width:1100px){
 .hero-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .hero-stage{grid-template-rows:repeat(2,160px);min-height:420px;gap:12px}
}
@media(max-width:800px){
 .hero-layout{grid-template-columns:1fr}
 .hero-stage{max-width:690px;margin:0 auto 30px;grid-template-rows:repeat(2,190px);min-height:480px}
}
@media(max-width:540px){
 .hero-stage{grid-template-rows:repeat(2,125px);gap:9px;min-height:335px;padding:34px 0 32px}
 .hero-stage .stage-card{padding:6px;border-radius:10px}
 .hero-stage .stage-label{font-size:8px;letter-spacing:1.5px}
 .hero-stage .stage-bottom{font-size:7px;letter-spacing:1px}
}


/* =====================================================
   PHASE 2.5 — PREMIUM EDITORIAL PROJECT STAGE
   Replaces the earlier rigid 2x2 hero image layout.
   Original client images remain intact and uncropped.
===================================================== */
.hero{background:radial-gradient(ellipse at 76% 35%,#1554a8 0%,transparent 48%),linear-gradient(112deg,#03132d 0%,#062a5b 72%,#041a3c 100%)}
.hero-layout{grid-template-columns:minmax(0,44%) minmax(0,56%);gap:34px;min-height:710px}
.hero-copy{position:relative}
.hero-copy:after{content:"";display:block;width:84px;height:3px;background:linear-gradient(90deg,#19d5ff,#287bff);margin-top:32px;box-shadow:0 0 22px #1cbcff}
.hero-stage{
 position:relative; width:100%; height:auto; min-height:560px; min-width:0;
 display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
 grid-template-rows:245px 235px; gap:16px;
 align-content:center; padding:48px 2px 40px;
}
.hero-stage:before{content:"";position:absolute;inset:65px 5% 45px;z-index:-1;background:#006fff55;filter:blur(65px);border-radius:50%}
.hero-stage .stage-label{top:9px;left:0;right:0;text-align:center;color:#91d8ff;font-weight:700;letter-spacing:3px}
.hero-stage .stage-bottom{bottom:6px;left:0;right:0;text-align:center;color:#b8dcff}
.hero-stage .stage-card{
 position:relative;inset:auto;top:auto;right:auto;bottom:auto;left:auto;
 width:auto;height:auto;transform:none;min-width:0;display:flex;flex-direction:column;
 padding:0;overflow:hidden;border-radius:18px;
 background:linear-gradient(150deg,#0b315d,#06142c);
 border:1px solid #5cbcff8c;
 box-shadow:0 18px 38px #0007, inset 0 1px #ffffff22;
 transition:transform .3s ease,box-shadow .3s ease;
}
.hero-stage .stage-card:hover{transform:translateY(-5px);box-shadow:0 26px 48px #0009,0 0 28px #168bff66}
.hero-stage .stage-cec{grid-column:1 / span 4;grid-row:1;background:linear-gradient(135deg,#e5f8ff,#b5e4f5)}
.hero-stage .stage-jovan{grid-column:5 / span 2;grid-row:1;background:#071b36}
.hero-stage .stage-infinity{grid-column:1 / span 3;grid-row:2;background:radial-gradient(circle,#123b73,#020a1b)}
.hero-stage .stage-silver{grid-column:4 / span 3;grid-row:2;background:linear-gradient(135deg,#f8f4ff,#d5c7f6)}
.hero-stage .stage-media{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;padding:10px 12px 4px;overflow:hidden}
.hero-stage .stage-card img{width:100%;height:100%;max-height:100%;object-fit:contain;object-position:center;transform:none}
.hero-stage .stage-cec .stage-media{padding:10px 10px 2px}
.hero-stage .stage-jovan .stage-media{padding:8px 8px 2px}
.hero-stage .stage-infinity .stage-media{padding:8px 18px 2px}
.hero-stage .stage-silver .stage-media{padding:8px 18px 2px}
.hero-stage .stage-caption{flex:0 0 auto;display:block;padding:9px 12px 10px;text-align:center;background:#031a38e8;color:#b8e6ff;font-size:10px;font-weight:800;letter-spacing:1.6px;line-height:1.3}
.hero-stage .stage-cec .stage-caption{background:#073b70;color:white}
.hero-stage .stage-silver .stage-caption{background:#14204a;color:white}
@media(max-width:1100px){.hero-layout{grid-template-columns:minmax(0,43%) minmax(0,57%);gap:22px}.hero-stage{grid-template-rows:215px 210px;min-height:510px;gap:12px}}
@media(max-width:800px){.hero-layout{grid-template-columns:1fr;gap:0}.hero-copy{padding:65px 0 8px}.hero-stage{max-width:740px;margin:0 auto 30px;grid-template-rows:230px 220px;min-height:535px}}
@media(max-width:540px){.hero-stage{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:185px 180px 180px;gap:10px;min-height:0;padding:38px 0 38px}.hero-stage .stage-cec{grid-column:1 / -1;grid-row:1}.hero-stage .stage-jovan{grid-column:1 / -1;grid-row:2}.hero-stage .stage-infinity{grid-column:1;grid-row:3}.hero-stage .stage-silver{grid-column:2;grid-row:3}.hero-stage .stage-media{padding:6px}.hero-stage .stage-caption{font-size:8px;letter-spacing:.7px;padding:7px 3px}.hero-stage .stage-label{font-size:8px;letter-spacing:1.3px}.hero-stage .stage-bottom{font-size:7px;letter-spacing:.6px}}
@media(prefers-reduced-motion:reduce){.hero-stage .stage-card{transition:none}}