/* High‑fidelity clone styles */
:root{
  --navy:#0B1F55;
  --navyDark:#091A45;
  --ink:#0A0F1F;
  --muted:#6B7280;
  --line:#E6EAF2;
  --soft:#DDE9FF;
  --accent:#FFB200;
  --warning:#FFB200;
  --article-one:#ADF4F7;
  --article-two:#FAF5B4;
  --article-three:#A6F5B9;
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6}
img{max-width:100%;display:block}
.container{width:min(1200px,92%);margin-inline:auto}
.between{display:flex;align-items:center;justify-content:space-between}
.wrap{flex-wrap:wrap;gap:16px}
.center{text-align:center}
.grid-2{display:grid;grid-template-columns:1.1fr 1fr;gap:48px}
.grid-3{display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:36px}
.grid-4{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:28px}
.section-gap{padding-block:26px}
@media (max-width:960px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

.btn{display:inline-block;background:var(--navy);color:#fff;padding:7px 22px;margin:7px 0;border-radius:999px;font-weight:700;border:2px solid var(--navy);transition:.2s;text-decoration-line:none;}
.btn:hover{background:var(--navyDark)}
.btn--outline{background:#fff;color:var(--navy)}
.btn--ghost{background:transparent;color:var(--navy);border:2px solid var(--line)}

.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--muted);font-weight:700}

.topbar{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink)}
.topbar .brand img{height:4rem}
.topbar .nav{display:flex;gap:24px}
.topbar .nav a{color:#1c2544;opacity:.9;font-weight:500;text-decoration-line:none;text-align:center;margin:auto;}
.topbar .nav a.active,.topbar .nav a:hover{color:var(--navy);font-weight:700;}
.topbar .nav a.btn,.topbar .nav a.btn:hover{color:white;font-weight:700;}

.hero{padding:72px 0 40px;overflow:hidden;background: linear-gradient(180deg, rgba(245,218,174,1) 71%, rgba(108,137,245,1) 100%);}
.hero__wrap{align-items:center}
.hero h1{font-family:Poppins,Inter,sans-serif;font-size:64px;line-height:1.05;margin:8px 0 10px;letter-spacing:-.01em}
.hero .accent{color:var(--accent)}
.hero .lead{max-width:60ch;color:#000000}
.hero__cta{margin:18px 0 22px}
.hero__facts{display:flex;gap:28px;margin-top:10px}
.fact .label{display:block;color:var(--muted);font-size:.86rem;margin-bottom:6px}
.fact .value{font-weight:800;color:var(--navy);font-size:28px}
.fact em{opacity:.6;font-style:normal;margin-left:4px}

.hero__art{position:relative}
.grad{
  background: linear-gradient(90deg,#2B56FF, #7bc6ff, #FFB200);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grid-cage{position:absolute;inset:-50px -120px auto auto;height:600px;width:600px;pointer-events:none;background:
    radial-gradient(circle at 50% 50%, rgba(11,31,85,.08), transparent 60%),
    linear-gradient(transparent 39px, var(--line) 40px),
    linear-gradient(90deg, transparent 39px, var(--line) 40px);
  background-size:100% 100%, 40px 40px, 40px 40px;border-radius:28px;filter:contrast(1.2)}
.sock{position:relative;z-index:2;width:min(460px,95%);margin:40px auto 0;filter:drop-shadow(0 28px 48px rgba(11,31,85,.24))}

.soft{background:var(--soft)}

.features .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.features .feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.features .feature h4{margin:0 0 6px;color:#142044}
.features .feature p{color:#51607a}
.features .feature video{width:20rem}

.trusted{padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.kpi{display:flex;align-items:center;gap:18px}
.kpi__label{font-weight:700;color:#3a4663}
.bar{width:160px;height:10px;background:#e7edfa;border-radius:999px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--navy)}
.kpi__value{font-weight:800;color:var(--navy)}
.logos{display:flex;gap:40px;align-items:center;opacity:.8}
.logos img{height:22px;filter:grayscale(1);opacity:.7}

.about{padding:72px 0}
.about__media img{border-radius:20px;box-shadow:0 24px 48px rgba(11,31,85,.12);width:35rem;}
.about .thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.counters{display:flex;gap:24px;margin:16px 0 22px}
.counters .count{display:block;color:var(--navy);font-weight:800;font-size:28px}
.counters span{color:#53607a}

.services{padding:64px 0}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.service-grid article{border:1px solid var(--line);border-radius:16px;padding:18px}

/* 1,4,7,... */
.service-grid article:nth-of-type(3n+1){ background: var(--article-one); }
/* 2,5,8,... */
.service-grid article:nth-of-type(3n+2){ background: var(--article-two); }
/* 3,6,9,... */
.service-grid article:nth-of-type(3n+3){ background: var(--article-three); }
/* 1,4,7,... slides */
.owl-stage > .owl-item:not(.cloned):nth-of-type(3n+1) article{ background: var(--article-one); }
/* 2,5,8,... slides */
.owl-stage > .owl-item:not(.cloned):nth-of-type(3n+2) article{ background: var(--article-two); }
/* 3,6,9,... slides */
.owl-stage > .owl-item:not(.cloned):nth-of-type(3n+3) article{ background: var(--article-three); }

.service-grid h4{margin:0 0 6px;color:#142044}
.service-grid p{color:#51607a}
.service-grid a{font-weight:600}

.video-cta{padding:64px 0;background:#f1f5ff}
.video-cta .copy h2{margin:0 0 8px}
.video .yt{height:240px;border-radius:20px;background:linear-gradient(135deg,#0d1e50, #1c2d6b);display:grid;place-items:center;color:#fff;font-size:36px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.12)}

.testimonials{padding:72px 0}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.review{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 12px 24px rgba(11,31,85,.06)}
.author{display:flex;gap:12px;align-items:center;margin-top:12px}
.author img{width:40px;height:40px;border-radius:999px;background:#e8eef8}
.author div{display:grid}

.projects{padding:64px 0}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.ph{border-radius:14px;background:linear-gradient(180deg,#f3f6ff,#e6ecff)}
.proj-grid article{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px}
.proj-grid h4{margin:8px 0 6px;color:#17224a}

.faq{padding:70px 0}
.accordion details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:10px 0}
.accordion summary{cursor:pointer;font-weight:700;color:#182248}

.cta-banner{padding:24px 0;background:var(--navy);color:#fff}
.cta-banner h3{margin:0 0 6px}
.cta-banner h3 span{color:var(--accent)}

.contact{padding:70px 0}
.form{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
input,textarea{border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;background:#fbfcff;outline:none}
input:focus,textarea:focus{border-color:var(--navy)}

/* wrapper */
.media-wrap{
  position: relative;
  display: inline-block;   /* or block if full width */
  width: 100%;
}
.media-wrap > img{
  display:block;
  width:100%;
  height:auto;
  border-radius:16px;
}

/* overlay card (desktop/tablet) */
.badge-card{
  position:absolute;
  top:12px;
  left:12px;
  max-width: clamp(220px, 30%, 340px);
  background: rgba(255,255,255,.94);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  box-shadow: 0 12px 24px rgba(11,31,85,.10);
  backdrop-filter: saturate(1.05) blur(6px);
  -webkit-backdrop-filter: saturate(1.05) blur(6px);
  z-index: 2;
}
.badge-card .btn--sm{
  padding:8px 12px;
  border-radius:10px;
  font-size:.9rem;
}

/* MOBILE: place card below image (not over it) */
@media (max-width:640px){
  .media-wrap{
    display: grid;         /* lets us reorder cleanly if needed */
  }
  .media-wrap > img{ order: 1; }
  .badge-card{
    position: static;      /* exits overlay mode */
    order: 2;
    margin-top: 8px;
    max-width: 100%;
    background:#fff;       /* remove glass effect on mobile */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 8px 18px rgba(11,31,85,.08);
    padding:10px 12px;
  }
}

.footer{background:#0a1027;color:#d7ddf0}
.footer .brand img{filter:invert(1)}
.footer .brand span{color:#fff;letter-spacing:.05em;font-weight:800}
.footer a{color:#d7ddf0}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:16px;padding:12px 0}
.social{display:flex;gap:10px;list-style:none;padding:0;margin:0}
.social a{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#12193a;color:#fff}

/* ===== Footer (exact like screenshot) ===== */
.footer{
  background:#0b0d13;            /* near-black */
  color:#d7ddf0;
  padding-top:64px;
}
.footer a{color:#d7ddf0;}
.footer a:hover{color:#ffffff}

/* Top grid (logo/desc, services, links, contact) */
.footer__top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:72px;
  align-items:start;
  padding-bottom:36px;
}
.footer .brand{display:flex;align-items:center;gap:12px}
.footer .brand img{height:64px;filter:invert(1)}
.footer .brand span{color:#fff;letter-spacing:.02em;font-weight:800}
.footer__desc{
  margin-top:28px;
  max-width:36ch;
  font-weight:700;
  color:#f3f4f6;
}

/* Column titles + lists */
.footer .col-title{
  font-size:22px;
  font-weight:800;
  color:#ffffff;
  margin:0 0 14px;
}
.footer .list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.footer .list a{opacity:.95}
.footer .list a:hover{opacity:1}

/* Contact column specifics */
.footer .phone{
  color:#2B56FF;
  font-weight:800;
  display:inline-block;
  margin-bottom:12px;
}
.footer .contact p{margin:.4rem 0;opacity:.95}

/* Divider line (above bottom bar) */
.footer .divider{
  height:1px;
  background:rgba(255,255,255,.18);
  margin:28px 0;
}

/* Bottom bar: left copyright, center links, right socials */
.foot-bottom{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:28px;
  padding:12px 0 26px;
  border-top:1px solid rgba(255,255,255,.18); /* thin rule like shot */
  color:#cdd4ea;
  font-size:.95rem;
}
.footer .foot-bottom {
  position: absolute;
  z-index: 1;
  bottom: 0;
  width: 100%;
  left: 0;
  padding: 0 4rem;
  background-color: black;
}

/* Center links with vertical separators */
.foot-links{
  display:flex;align-items:center;gap:18px;
}
.foot-links a{opacity:.95}
.foot-links a:hover{opacity:1}
.foot-links > * + *{
  position:relative;padding-left:18px;
}
.foot-links > * + *::before{
  content:"";position:absolute;left:0;top:50%;
  width:1px;height:14px;background:rgba(255,255,255,.35);
  transform:translateY(-50%);
}

/* Social icons: squared buttons with outline */
.social{display:flex;gap:12px;list-style:none;padding:0;margin:0}
.social a{
  display:inline-grid;place-items:center;
  width:36px;height:36px;border-radius:8px;
  border:1px solid rgba(255,255,255,.55);
  background:transparent;color:#ffffff;
}
.social a:hover{border-color:#ffffff;background:rgba(255,255,255,.08)}

/* Responsive */
@media (max-width:1100px){
  .footer__top{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:720px){
  .form .row{display:grid;grid-template-columns:1fr;}
  .footer__top{grid-template-columns:1fr}
  .footer__desc{max-width:unset}
  .foot-bottom{
    grid-template-columns:1fr;
    gap:14px;text-align:center;
  }
  .foot-links{justify-content:center;flex-wrap:wrap}
  .social{justify-content:center}
  .footer .foot-bottom{padding:0;}
}

@import url("https://fonts.googleapis.com/css2?family=Megrim&display=swap");

.footer{ position:relative; overflow:hidden; }
.footer__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }

#footer-3d,
#footer-3d canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* the big word behind the particles */
.footer-word{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:Megrim,cursive;
  font-size:clamp(64px,18vw,240px);
  color:#fc0; -webkit-text-stroke:clamp(1px,.8vw,6px) #c0f;
  opacity:.08; mix-blend-mode:screen; user-select:none; z-index:0;
}

/* keep your real footer content above the bg */
.footer-animation{ height:20rem; }


.to-top{position:fixed;right:16px;bottom:16px;height:40px;width:40px;border:none;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 20px rgba(11,31,85,.3);opacity:0;pointer-events:none;transition:opacity .2s, transform .2s}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{transform:translateY(-2px)}

@media (max-width:960px){
  .features .feature-grid{grid-template-columns:1fr}
  .service-grid{grid-template-columns:1fr}
  .review-grid{grid-template-columns:1fr}
}


.ticker{position:sticky;top:0;z-index:40;background:#f7f7f7;border-bottom:1px solid var(--line);overflow:hidden}
.ticker.is-full-bleed{width:100%;margin:0;}
.ticker__wrap{display:flex;width:max-content;will-change:transform;animation:ticker-scroll 35s linear infinite}
.ticker__track{display:flex;gap:1.5rem;padding:0.5rem 1rem;white-space:nowrap;flex-shrink:0;min-width:100%}
.ticker__item{list-style:none;font-size:0.9rem;color:var(--line);opacity:0.85}
@keyframes ticker-scroll{to{transform:translateX(-50%)}}@media (prefers-reduced-motion: reduce){.ticker__wrap{animation:none}}
  
.tabs-parent{display:flex;justify-content:center;}                                                        
.tabs{position:fixed; margin:-38px auto 10px; max-width:860px; display:flex; gap:.5rem;background:rgba(20,20,22,.9); border:1px solid #3a3b41; border-radius:14px; padding:.4rem;transform: translateY(-50%);bottom:10px;z-index:3000; /* floats into device area */}
.tab{appearance:none; border:1px solid #3a3b41; background:#1f2025; color:#e5e7eb; border-radius:10px;padding:.55rem .8rem; font-weight:600; cursor:pointer;}
.tab.is-active{ outline:2px solid #f59e0b; background:#2a2b31 }
.tab--cta{ margin-left:auto; background:#ffe580; color:#111827; border-color:#ffe580; text-decoration:none; display:inline-flex; align-items:center; }
@media (max-width:700px){ .tabs{ flex-wrap:wrap } .tab--cta{ width:100%; justify-content:center } }


/* Exact hero variant */
.hero--exact{padding-top:80px;padding-bottom:26px}
.hero--exact .display{font-family:Poppins,Inter,sans-serif;font-size:88px;line-height:0.98;letter-spacing:-.02em;font-weight:800;margin:6px 0 10px}
@media (max-width:1200px){
  .hero--exact .display{font-size:64px}
}
.eyebrow.blue{color:#2B56FF}
.btn--pill{border-radius:14px!important;padding:16px 22px!important;border:1px solid #ffffff!important}
.btn--warning-pill{ padding:12px 16px; border-radius:12px; background-color: #fd5d06;border-color: #fd5d06;border-radius: 999px;width: fit-content;}
.circle-btn{height:44px;width:44px;border-radius:50%;border:none;background:#3751E0;color:#fff;font-size:18px;margin-left:10px;cursor:pointer;box-shadow:0 10px 22px rgba(55,81,224,.35)}
.hero__art.exact{display:grid;place-items:end}
.hero__art.exact img{max-width:640px;width:100%}
.hero-cards{display:flex;gap:24px;margin-top:28px}
.hcard{flex:1;min-width:260px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 18px 12px;box-shadow:0 10px 24px rgba(11,31,85,.06)}
.hcard__top{display:flex;align-items:center;gap:8px;color:#0f1b36;font-weight:700}
.hcard .dot{height:8px;width:8px;border-radius:50%;background:#2B56FF;display:inline-block}
.hcard .label{color:#334971;font-weight:700}
.hcard__num{font-size:34px;font-weight:800;color:#0b1f55;margin-top:8px}
.hcard__num .unit{font-size:18px;opacity:.65;margin-left:6px}
.hcard__icon{margin-top:6px;font-size:28px;opacity:.85}

/* ===== Exact HERO (reference-accurate) ===== */
.hero--room{position:relative;overflow:hidden;padding-top:20px;padding-bottom:36px;contain:paint}
.hero__inner{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;width:max-content;}
@media (max-width:1100px){.hero__inner{grid-template-columns:1fr}}

.display-hero{font-family:Poppins,Inter,sans-serif;font-size:92px;line-height:0.96;font-weight:800;letter-spacing:-0.02em;margin:8px 0 14px}
@media (max-width:1300px){.display-hero{font-size:76px}}
@media (max-width:980px){.display-hero{font-size:56px}}

.lead--wide{max-width:68ch;color:#6a7691}

.btn--primary-pill{display:inline-flex;align-items:center;gap:10px;background:#0e1f57;border-color:#0e1f57;border-radius:14px;padding:16px 22px}

.hero__cards{display:flex;gap:24px;margin-top:28px;flex-wrap:wrap}
.hcard{flex:1 1 320px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 18px 12px;box-shadow:0 10px 24px rgba(11,31,85,.06)}
.hcard__head{display:flex;align-items:center;gap:8px}
.hcard .dot{width:8px;height:8px;border-radius:50%;background:#2B56FF}
.hcard .title{font-weight:700;color:#334971}
.hcard__body{display:flex;align-items:flex-end;justify-content:space-between;margin-top:10px}
.hcard .num{font-size:36px;font-weight:800;color:#0b1f55}
.hcard .unit{font-size:18px;opacity:.6;margin-left:6px}
.hcard .icon{opacity:.95}

.blue{color:#2B56FF}

/* Perspective room grid on right */
.room-bg{position:absolute; inset:0 0 0 40%; pointer-events:none}
.room-grid{position:absolute; right:-6%; top:-12%; width:120%; height:140%;
  --g: 44px;
  background-image:
    linear-gradient(transparent calc(var(--g) - 1px), rgba(8,13,30,.08) 1px),
    linear-gradient(90deg, transparent calc(var(--g) - 1px), rgba(8,13,30,.08) 1px);
  background-size:var(--g) var(--g), var(--g) var(--g);
  transform:perspective(1200px) rotateX(8deg) rotateY(-28deg) translateX(0);
  filter:contrast(1.05);
}

.tower-wrap{position:relative;display:grid;place-items:end;justify-self:center;}
.tower{max-width:700px;width:100%;height:auto;position:relative;z-index:2;transform:translateX(4%)}

.map-contact{height: 600px;}
.w-100{width:100%;}
.w-25{width:25%;}
.w-50{width:50%;}
.w-75{width:75%;}

/* 1) Make the grid column a proper containing block */
.hero__col { min-width: 0; }                     /* prevent grid overflow */
.hero__col.hero__right {
  position: relative;
  display: grid;
  place-items: end;
  overflow: hidden;                               /* keep children clipped */
  /* pick a responsive height for the art column */
  min-height: clamp(360px, 48vw, 640px);
}

/* 2) Constrain the tower wrapper */
.tower-wrap{
  position: relative;
  width: 100%;
  max-width: 700px;                               /* keeps it inside column */
  margin-inline: 0;                               /* no stray margins */
  aspect-ratio: 7 / 9;                            /* stable box for abs children */
  overflow: hidden;                               /* clip animated layers */
}

/* 3) Cross-fade layers stay inside the wrapper */
.tower-wrap .tower{
  position: absolute;
  inset: 0;                                       /* fill wrapper only */
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  animation: heroFade 12s ease-in-out infinite;
  /*filter: drop-shadow(0 28px 48px rgba(11,31,85,.24));*/
}

/* staggered delays */
.tower-wrap .tower:nth-child(1){ animation-delay: 0s; }
.tower-wrap .tower:nth-child(2){ animation-delay: 4s; }
.tower-wrap .tower:nth-child(3){ animation-delay: 8s; }

/* optional: pause on hover + respect reduced motion */
.tower-wrap:hover .tower{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){ .tower-wrap .tower{ animation: none; opacity: 1; } }

/* keyframes unchanged */
@keyframes heroFade{
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  28%  { opacity: 1; }
  34%  { opacity: 0; }
  100% { opacity: 0; }
}

/* shell */
.carousel{ position:relative; }
.carousel__viewport{
  overflow:hidden; width:100%; padding-bottom:1rem;
}
.carousel__track{
  display:flex; gap:18px; will-change: transform;
}

/* slide sizing (3-up / 2-up / 1-up) */
.carousel__track .review{
  flex: 0 0 calc((100% - 18px*2) / 3);
}
@media (max-width:1100px){
  .carousel__track .review{ flex-basis: calc((100% - 18px) / 2); }
}
@media (max-width:720px){
  .carousel__track .review{ flex-basis: 100%; }
}

/* arrows */
.carousel__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:#1c2544;
  display:grid; place-items:center; cursor:pointer; z-index:5;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.carousel__btn.prev{ left:-6px; }  /* tweak to fit your layout */
.carousel__btn.next{ right:-6px; }
.carousel__btn:disabled{ opacity:.5; cursor:default; }

/* dots */
.carousel__dots{ display:flex; gap:8px; justify-content:center; margin-top:10px; }
.carousel__dots button{
  width:8px; height:8px; border-radius:50%; border:none; background:#d9deee; cursor:pointer;
}
.carousel__dots button[aria-current="true"]{ background:#0B1F55; }



/* ============= MOBILE FRIENDLY OVERRIDES ============= */

/* Slightly earlier stack + tighter gaps */
@media (max-width: 1100px){
  .hero__inner{ grid-template-columns:1fr; gap:24px; }
}

/* Tablet-ish: stack sections, reduce paddings, calm the room grid */
@media (max-width: 820px){
  .container{ width:min(94%, 760px); }

  .hero,
  .hero--room{
    padding-top:56px;
    padding-bottom:24px;
  }

  .display-hero{ font-size:48px; line-height:1.04; letter-spacing:-.015em; }
  .hero .lead,
  .lead--wide{ font-size:0.98rem; max-width:65ch; }

  .hero__col.hero__right{
    min-height: clamp(260px, 54vw, 420px);
  }

  .hero h1{ font-size:48px; line-height:1.04; letter-spacing:-.015em; }

  .tower-wrap{
    max-width:520px;
    aspect-ratio: 4 / 5;     /* slightly squarer for small screens */
  }
  .tower-wrap .tower{
    object-fit: contain;
  }

  /* So the perspective grid doesn't spill on narrow screens */
  .room-bg{ inset: 0; }
  .room-grid{
    right: -10%;
    top: -8%;
    width: 140%;
    height: 120%;
    --g: 36px;               /* tighter grid cells on mobile */
    transform: perspective(900px) rotateX(6deg) rotateY(-20deg);
    opacity: .75;
  }

  .hero__cards{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    margin-top:20px;
  }
  .hcard{ padding:14px; border-radius:14px; }
  .hcard .num{ font-size:28px; }
  .hcard .unit{ font-size:16px; }

  /* Footer top area condense */
  .footer__top{
    grid-template-columns:1fr 1fr 1fr 1fr;
    gap:32px;
    padding-bottom:24px;
  }
  .foot-bottom{
    gap:10px;
  }
  .foot-links{ justify-content:center; flex-wrap:wrap; }
  .social{ justify-content:center; }
}

/* Phone: single column everywhere, smaller type & buttons */
@media (max-width: 680px){
  .container{ width:min(94%, 560px); }

  .display-hero{ font-size:40px; line-height:1.05; }
  .hero .lead,
  .lead--wide{ font-size:0.95rem; }

  .hero__col.hero__right{
    min-height: clamp(220px, 58vw, 360px);
    place-items: center;
  }

  .tower-wrap{
    max-width:420px;
    aspect-ratio: 1 / 1.2;   /* ensure it fits comfortably */
  }

  /* Optional: simplify/soften the background grid on phones */
  .room-grid{
    --g: 28px;
    opacity:.55;
    transform:none;          /* remove 3D tilt to avoid overflow */
  }

  .hero__cards{ grid-template-columns:1fr; }

  .service-grid{ grid-template-columns:1fr; }
  .proj-grid{ grid-template-columns:1fr; }

  .btn{ padding:10px 16px; font-size:.95rem; }
  .btn--primary-pill{ padding:12px 16px; border-radius:12px; }

  /* Ticker: smaller + non-sticky for cramped viewports */
  .ticker{ position:relative; }
  .ticker__wrap{ animation-duration: 50s; }
  .ticker__item{ font-size:.85rem; }


    .features .feature-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* Compact phones: trim spacing, lock widths */
@media (max-width: 560px){
  .hero,
  .hero--room{ padding-top:44px; padding-bottom:18px; }

  .display-hero{ font-size:34px; letter-spacing:-.01em; }
  .hero__cta{ margin:12px 0 16px; }

  .tower-wrap{
    max-width:360px;
    aspect-ratio: 1 / 1.25;
  }

  .hcard{ padding:12px; }
  .hcard .num{ font-size:24px; }
  .hcard .title{ font-size:.95rem; }

  .footer__top{ grid-template-columns:1fr; gap:22px; }

  /* Tabs floating UI */
  .tabs{ max-width:calc(100% - 16px); left:8px; right:8px; bottom:8px; }
  .tab{ padding:.5rem .7rem; font-size:.92rem; }
  .tab--cta{ width:100%; justify-content:center; }
}

/* Ultra-small screens: keep everything readable */
@media (max-width: 400px){
  .display-hero{ font-size:30px; }
  .btn, .btn--primary-pill{justify-content:center; }
  .hero__cards{ gap:10px; }
  .tower-wrap{ max-width:320px; }
}

/* Safety: prevent any transforms pushing art outside the column */
@media (max-width: 820px){
  .tower{ transform:none !important; }
}

/* Respect reduced motion for the cross-fade loop */
@media (prefers-reduced-motion: reduce){
  .tower-wrap .tower{ animation:none; opacity:1; }
}

/* base */
.topbar {
    --topbar-h: 68px;
}

    .topbar .container {
        min-height: var(--topbar-h);
    }

/* toggle button (hidden on desktop) */
.nav-toggle {
    display: none;
    height: 42px;
    width: 42px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
}

.nav-toggle__bar {
    display: block;
    width: 18px;
    height: 2px;
    background: #1c2544;
    border-radius: 2px;
}

/* sticky header */
.topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* backdrop shown only when menu is open (for outside-click) */
.mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 900; /* below the mobile nav (1000), above page */
}

.topbar.is-open + .mobile-backdrop {
    opacity: 1;
    pointer-events: auto;
}


.topbar.is-open .nav-toggle__bar:nth-child(2) {
    opacity: 0
}

.topbar.is-open .nav-toggle__bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg)
}

.topbar.is-open .nav-toggle__bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg)
}

/* MOBILE LAYOUT */
@media (max-width: 820px) {
    .topbar .nav {
        display: none;
    }
    /* hide desktop row */
    .nav-toggle {
        display: flex;
        flex-direction: column;
    }
    /* show burger */

    /* mobile panel */
    #site-nav {
        position: fixed;
        top: var(--topbar-h);
        left: 0;
        right: 0;
        display: grid; /* stacked links */
        gap: 0;
        background: #fff;
        border-top: 1px solid var(--line);
        box-shadow: 0 12px 24px rgba(0,0,0,.08);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: max-height .25s ease, opacity .2s ease, transform .2s ease;
        z-index: 1000;
    }
        /* link rows */
        #site-nav a {
            padding: 14px 18px;
            border-bottom: 1px solid var(--line);
            color: #1c2544;
            text-decoration: none;
            text-align: left;
            width: 100%;
        }
            #site-nav a:last-child {
              -bottom: none;
              width: -webkit-fill-available;
              width: -moz-available;
              color: #ffffff;
              margin: 0 1rem 1rem 1rem;
              text-align: center;
            }
            
            #site-nav a[role="menuitem"]{
              color:var(--navy) !important;
              text-align: left;
            }

    /* open state (toggled by JS) */
    .topbar.is-open #site-nav {
        max-height: 70vh;
        opacity: 1;
        transform: translateY(0);
    }

    /* prevent background scroll when menu open */
    body.nav-open {
        overflow: hidden;
    }

    /* make header content fit on one line */
    .topbar .container.between {
        gap: 12px;
    }

    .topbar .brand span {
        font-size: 1rem;
    }

    .proj-grid{ grid-template-columns:1fr; gap:14px; }
}

/* reduces sticky overlap on very small phones */
@media (max-width: 420px) {
    .topbar {
        --topbar-h: 60px;
    }

    .nav-toggle {
        height: 38px;
        width: 38px;
    }
}

/* full-bleed without horizontal overflow */
:root { --vw-safe: calc(100vw - (100vw - 100%)); }

.ticker { overflow: hidden; background-color: var(--navy); }
.ticker__wrap{
  display: flex;
  width: calc(var(--w, 1000px) * 2);   /* one track duplicated = 2x width */
  will-change: transform;
  animation: ticker-marquee var(--dur, 30s) linear infinite;
}
.ticker__track{
  display: flex;
  gap: 1.5rem;
  padding: 0.5rem 1rem;
  flex-shrink: 0;          /* critical: don't shrink! */
  list-style: none;
  margin: 0;
}
.ticker__item{ white-space: nowrap; }

/* The magic: move left by exactly one track width */
@keyframes ticker-marquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--w, 1000px))); }
}

/* Accessibility: honor reduced motion */
@media (prefers-reduced-motion: reduce){
  .ticker__wrap{ animation: none; transform: none; }
}



/* stop horizontal scrolling (modern + fallback) */
html{ overflow-x: clip; }
@supports not (overflow-x: clip){
  html, body{ overflow-x: hidden; }
}

/* --- Login dropdown --- */
.nav { position: relative; }

.nav__item.has-dropdown { position: relative; }
.nav__parent{
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:0; padding:0; margin:0;
  font: inherit; color:#1c2544; cursor:pointer;
}
.nav__parent:hover, .nav__parent:focus{ color: var(--navy); }
.nav__parent .caret{ transition: transform .18s ease; }

.nav__dropdown{
  position:absolute; top: calc(100% + 10px); right: 0;
  min-width: 240px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow: 0 18px 36px rgba(11,31,85,.12);
  padding:8px; display:none; z-index: 50;
}
.nav__dropdown li{ list-style:none; }
.nav__dropdown a{
  display:block; padding:10px 10px; border-radius:10px;
  color:#142044; text-decoration:none; font-weight:600;
}
.nav__dropdown a:hover{ background:#f7f9ff; color:#0B1F55; }

/* Open state */
.has-dropdown.is-open .nav__dropdown{ display:block; }
.has-dropdown.is-open .nav__parent .caret{ transform: rotate(180deg); }

/* Make it work nicely in mobile nav stacks */
@media (max-width: 960px){
  .has-dropdown{ width:100%; }
  .nav__parent{
    width:100%; justify-content:space-between; padding:10px 20px;
    border-top:1px solid rgba(0,0,0,.04);
  }
  .nav__dropdown{
    position:static; display:none; box-shadow:none; border-radius:10px;
    border:1px solid var(--line); margin:6px 0 10px; padding:6px;
  }
  .has-dropdown.is-open .nav__dropdown{ display:block; }
}
/* Desktop popover: cap height and enable scrolling */
.nav__dropdown{
  position:absolute; top: calc(100% - 16px); right:0;
  min-width:240px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 18px 36px rgba(11,31,85,.12);
  padding:8px; display:none; z-index:50;

  /* NEW: scrollable */
  max-height: min(60vh, 420px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Open state */
.has-dropdown.is-open .nav__dropdown{ display:block; }

/* Mobile: dropdown is inline; still allow internal scroll if tall */
@media (max-width:960px){
  #site-nav .nav__dropdown{
    position:static;
    box-shadow:none;
    border:1px solid var(--line); border-radius:12px;
    margin:6px 0 10px; padding:6px;

    /* collapsible + scrollable */
    max-height: 0;
    overflow-y: hidden; /* collapsed state */
    transition: max-height .24s ease;
  }
  #site-nav .has-dropdown.is-open .nav__dropdown{
    /* large cap so it doesn’t blow past the viewport; will scroll inside */
    max-height: 20vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.d-none{display:none!important;}
.d-block{display:block!important;}
.d-flex{display:flex!important;}
.m-auto{margin:auto!important;}
.m-0{margin:0!important;}
.m-1{margin:10px!important;}
.m-2{margin:20px!important;}
.m-3{margin:30px!important;}
.m-4{margin:40px!important;}
.m-5{margin:50px!important;}
.mt-0{margin-top:0!important;}
.mt-1{margin-top:10px!important;}
.mt-2{margin-top:20px!important;}
.mt-3{margin-top:30px!important;}
.mt-4{margin-top:40px!important;}
.mt-5{margin-top:50px!important;}
.mb-0{margin-bottom:0!important;}
.mb-1{margin-bottom:10px!important;}
.mb-2{margin-bottom:20px!important;}
.mb-3{margin-bottom:30px!important;}
.mb-4{margin-bottom:40px!important;}
.mb-5{margin-bottom:50px!important;}
.ms-0{margin-left:0!important;}
.ms-1{margin-left:10px!important;}
.ms-2{margin-left:20px!important;}
.ms-3{margin-left:30px!important;}
.ms-4{margin-left:40px!important;}
.ms-5{margin-left:50px!important;}
.me-0{margin-right:0!important;}
.me-1{margin-right:10px!important;}
.me-2{margin-right:20px!important;}
.me-3{margin-right:30px!important;}
.me-4{margin-right:40px!important;}
.me-5{margin-right:50px!important;}
.mx-0{margin-left:0!important;margin-right:0!important;}
.mx-1{margin-left:10px!important;margin-right:10px!important;}
.mx-2{margin-left:20px!important;margin-right:20px!important;}
.mx-3{margin-left:30px!important;margin-right:30px!important;}
.mx-4{margin-left:40px!important;margin-right:40px!important;}
.mx-5{margin-left:50px!important;margin-right:50px!important;}
.mx-auto{margin-left:auto!important;margin-right:auto!important;}
.my-0{margin-top:0!important;margin-bottom:0!important;}
.my-1{margin-top:10px!important;margin-bottom:10px!important;}
.my-2{margin-top:20px!important;margin-bottom:20px!important;}
.my-3{margin-top:30px!important;margin-bottom:30px!important;}
.my-4{margin-top:40px!important;margin-bottom:40px!important;}
.my-5{margin-top:50px!important;margin-bottom:50px!important;}
.p-auto{padding:auto!important;}
.p-0{padding:0!important;}
.p-1{padding:10px!important;}
.p-2{padding:20px!important;}
.p-3{padding:30px!important;}
.p-4{padding:40px!important;}
.p-5{padding:50px!important;}
.pt-0{padding-top:0!important;}
.pt-1{padding-top:10px!important;}
.pt-2{padding-top:20px!important;}
.pt-3{padding-top:30px!important;}
.pt-4{padding-top:40px!important;}
.pt-5{padding-top:50px!important;}
.pb-0{padding-bottom:0!important;}
.pb-1{padding-bottom:10px!important;}
.pb-2{padding-bottom:20px!important;}
.pb-3{padding-bottom:30px!important;}
.pb-4{padding-bottom:40px!important;} 
.pb-5{padding-bottom:50px!important;}
.ps-0{padding-left:0!important;}
.ps-1{padding-left:10px!important;}
.ps-2{padding-left:20px!important;}
.ps-3{padding-left:30px!important;}
.ps-4{padding-left:40px!important;}
.ps-5{padding-left:50px!important;}
.pe-0{padding-right:0!important;}
.pe-1{padding-right:10px!important;}
.pe-2{padding-right:20px!important;}
.pe-3{padding-right:30px!important;}
.pe-4{padding-right:40px!important;}
.pe-5{padding-right:50px!important;}
.px-0{padding-left:0!important;padding-right:0!important;}
.px-1{padding-left:10px!important;padding-right:10px!important;}
.px-2{padding-left:20px!important;padding-right:20px!important;}
.px-3{padding-left:30px!important;padding-right:30px!important;}
.px-4{padding-left:40px!important;padding-right:40px!important;}
.px-5{padding-left:50px!important;padding-right:50px!important;}
.py-0{padding-top:0!important;padding-bottom:0!important;}
.py-1{padding-top:10px!important;padding-bottom:10px!important;}
.py-2{padding-top:20px!important;padding-bottom:20px!important;}
.py-3{padding-top:30px!important;padding-bottom:30px!important;}
.py-4{padding-top:40px!important;padding-bottom:40px!important;}
.py-5{padding-top:50px!important;padding-bottom:50px!important;}
.text-primary{color:var(--navy)!important;}
.text-white{color:#fff!important;}
.text-black{color:#000!important;}
.text-center{text-align:center!important;}
.text-right{text-align:right!important;}
.text-left{text-align:left!important;}
.fs-1{font-size:1rem;}
.fw-100{font-weight: 100!important;}
.fw-200{font-weight: 200!important;}
.fw-300{font-weight: 300!important;}
.fw-400{font-weight: 400!important;}
.fw-500{font-weight: 500!important;}
.fw-600{font-weight: 600!important;}
.fw-700{font-weight: 700!important;}
.fw-800{font-weight: 800!important;}
.fw-900{font-weight: 900!important;}
.justify-content-center{justify-content: center;}
.image-border{border-radius: 16px;}
.image-communication{margin: auto;width: 100%;}
@media (min-width:992px){
  .d-lg-none{display:none!important;}
  .d-lg-block{display:block!important;}
  .d-lg-flex{display:flex!important;}
  .w-lg-100{width:100%!important;}
  .w-lg-75{width:75%!important;}
  .w-lg-50{width:50%!important;}
  .w-lg-25{width:25%!important;}
  .mt-lg-9{margin-top: 90px;}
  .mt-lg-10{margin-top: 100px;}
  .mt-lg-20{margin-top: 200px;}
  .careers-img{max-width:36rem; }
}