:root{
  --red:#ED1C24; --red-d:#C7141B;
  --blue:#43ABE0; --blue-d:#1E86BC;
  --orange:#F27C21;
  --ink:#12141A; --ink-2:#333A46; --dim:#6B7280;
  --paper:#FFFFFF;
  --d:'Outfit',system-ui,sans-serif;
  --b:'Plus Jakarta Sans',system-ui,sans-serif;
  --m:'Space Mono',ui-monospace,monospace;
  --gut:clamp(18px,4vw,60px);
  --hdrH:132px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--b);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.wrap{width:min(1280px,100% - var(--gut)*2);margin-inline:auto}
h1,h2,h3,h4{font-family:var(--d);font-weight:700;line-height:1.05;letter-spacing:-.02em;margin:0}
h2{font-size:clamp(30px,4.2vw,56px)}
h3{font-size:clamp(20px,2.1vw,28px)}
.lede{color:var(--dim);font-size:clamp(15px,1.25vw,18px)}
.lab{font-family:var(--m);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}

.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--b);font-weight:700;font-size:14px;
  padding:13px 24px;border-radius:100px;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,background .2s ease,border-color .2s ease,color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-r{background:var(--red);color:#fff}
.btn-r:hover{background:var(--red-d)}
.btn-w{background:#fff;color:var(--ink)}
.btn-o{border-color:rgba(255,255,255,.6);color:#fff}
.btn-o:hover{background:rgba(255,255,255,.14)}
.btn-ink{border-color:rgba(18,20,26,.2);color:var(--ink)}
.btn-ink:hover{border-color:var(--ink)}
.arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(4px)}

/* ================= HEADER : 3 layers inside one curved glass slab ============ */
.hdr{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:90;
  width:min(1580px,calc(100% - 28px));border-radius:26px;overflow:hidden;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.38);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 20px 50px -24px rgba(0,0,0,.55);
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}
.hdr.solid{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.97);border-color:rgba(18,20,26,.08);
  box-shadow:0 16px 40px -22px rgba(0,0,0,.35)}
.hrow{display:flex;align-items:center;padding-inline:clamp(16px,2.4vw,34px);position:relative}
.h1r{height:42px;justify-content:space-between;font-family:var(--m);font-size:10.5px;
  letter-spacing:.07em;color:rgba(255,255,255,.9)}
.h1r::after{content:"";position:absolute;left:clamp(16px,2.4vw,34px);right:clamp(16px,2.4vw,34px);
  bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.26) 0 37%,transparent 37% 63%,rgba(255,255,255,.26) 63% 100%)}
.hdr.solid .h1r{color:var(--dim)}
.hdr.solid .h1r::after{background:linear-gradient(90deg,rgba(18,20,26,.12) 0 37%,transparent 37% 63%,rgba(18,20,26,.12) 63% 100%)}
.h1r span{display:inline-flex;gap:16px;align-items:center}
.h2r{height:86px;justify-content:space-between;gap:12px}
.hspace{flex:none;width:clamp(150px,17vw,250px)}
.hnav{display:flex;gap:4px;flex:1;align-items:center}
.hnav.right{justify-content:flex-end}
.hnav a{padding:9px 14px;border-radius:100px;font-size:14px;font-weight:600;color:#fff;white-space:nowrap;
  transition:background .2s ease,color .2s ease}
.hdr.solid .hnav a{color:var(--ink-2)}
.hnav a:hover{background:rgba(255,255,255,.2)}
.hnav a.on{background:rgba(255,255,255,.26);color:#fff}
.hdr.solid .hnav a.on{background:rgba(18,20,26,.07);color:var(--ink)}
.h2r .btn-r{background:#fff;color:var(--ink)}
.h2r .btn-r:hover{background:#F1F2F4}
.hdr.solid .h2r .btn-r{background:var(--red);color:#fff}
.hdr.solid .h2r .btn-r:hover{background:var(--red-d)}
.hdr.solid .hnav a:hover{background:rgba(18,20,26,.06);color:var(--ink)}
.logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
  display:flex;align-items:center;justify-content:center}
.logo img{height:clamp(40px,4.4vw,66px);width:auto;
  filter:drop-shadow(0 3px 14px rgba(0,0,0,.4))}
.hdr.solid .logo img{filter:drop-shadow(0 2px 6px rgba(18,20,26,.12))}
.logo img{height:clamp(30px,3.1vw,42px);width:auto}
.burger{display:none;width:42px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.16);cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.burger i{width:16px;height:2px;background:#fff;display:block;border-radius:2px}
.hdr.solid .burger{border-color:rgba(18,20,26,.18);background:rgba(18,20,26,.05)}
.hdr.solid .burger i{background:var(--ink)}

/* ================= HERO : 3 scrubbed slides ================= */
.hero{position:relative;height:200vh}
.hero .pin{position:sticky;top:0;height:100svh;overflow:hidden;background:#0B0D12}
.hslide{position:absolute;inset:0;opacity:0;will-change:opacity;backface-visibility:hidden;contain:layout paint}
.hslide .art{position:absolute;inset:0}
.s1 .art{background:#0A6CB0 center/cover no-repeat}
.pstage{position:absolute;inset:0;overflow:hidden;z-index:2}
.pstage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24%;z-index:5;
  pointer-events:none;background:linear-gradient(180deg,rgba(1,94,153,0) 0%,rgba(1,94,153,.55) 42%,#015E99 68%,#015E99 100%)}
.pchar{position:absolute;bottom:6%;right:4%;height:118%;aspect-ratio:478/596;
  will-change:transform;transform-origin:50% 78%;contain:paint;
}
.pchar .pbody{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;
  filter:drop-shadow(0 24px 44px rgba(0,18,38,.4))}
.pchar .pup{position:absolute;will-change:transform;contain:paint}
.pchar #pe0{left:38.275%;top:56.208%;width:3.765%}
.pchar #pe1{left:55.634%;top:56.711%;width:4.183%}
.s2 .art{background:#6B0116}
.rstage{position:absolute;inset:0;overflow:hidden;z-index:2}
.rstage::after{content:"";position:absolute;left:0;right:0;top:0;height:26%;z-index:5;
  pointer-events:none;background:linear-gradient(180deg,#6B0116 0%,rgba(107,1,22,.72) 42%,rgba(107,1,22,0) 100%)}
.rchar{position:absolute;left:0;bottom:0;width:100%;aspect-ratio:16/9;
  will-change:transform;transform-origin:78% 96%;contain:paint;
}
.rchar .rbody{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.rchar .ri{position:absolute;will-change:transform;contain:paint}
.rchar #ri0{left:65.332%;top:86.372%;width:4.492%}
.rchar #ri1{left:84.082%;top:81.163%;width:5.273%}
.s3 .art{background:linear-gradient(180deg,#C9821A 0%,#D69022 46%,#C27C16 100%)}
.ostage{position:absolute;inset:0;overflow:hidden;z-index:2}
.ostage::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,#C9821A 0%,rgba(201,130,26,0) 15%),
             linear-gradient(90deg,#CE8A1E 0%,rgba(206,138,30,0) 15%)}
.ochar{position:absolute;right:0;left:auto;bottom:0;height:100%;width:auto;aspect-ratio:16/9;
  will-change:transform;transform-origin:72% 90%;contain:paint;
}
.ochar .obody{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.ochar .oi{position:absolute;will-change:transform;contain:paint}
.ochar #oi0{left:61.523%;top:59.288%;width:2.246%}
.ochar #oi1{left:70.264%;top:56.250%;width:2.539%}
/* no dark wash — the plates already leave clean space on the left */
.ph{position:absolute;right:5%;bottom:6%;z-index:3;font-family:var(--m);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.62);border:1px dashed rgba(255,255,255,.42);
  padding:7px 12px;border-radius:8px}
.hcopy{position:absolute;left:0;right:0;top:calc(var(--hdrH) + 17vh);z-index:4;padding-inline:var(--gut);color:#fff}
.hcopy .in{width:min(1280px,100%);margin-inline:auto;max-width:none}
.hcopy .lab{color:#fff;opacity:.95;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.hcopy h1{font-size:clamp(34px,5.6vw,80px);font-weight:800;margin:14px 0 0;max-width:16ch;
  text-shadow:0 2px 4px rgba(0,0,0,.28),0 10px 40px rgba(0,0,0,.45)}
.hcopy p{margin:16px 0 0;max-width:46ch;color:#fff;font-size:clamp(14px,1.2vw,17px);
  text-shadow:0 2px 10px rgba(0,0,0,.45)}
.hacts{margin-top:26px;display:flex;gap:11px;flex-wrap:wrap}
.hbar{position:absolute;left:var(--gut);bottom:6%;z-index:4;display:flex;gap:9px;align-items:center}
.hbar i{width:34px;height:3px;border-radius:3px;background:rgba(255,255,255,.34);display:block;transition:background .3s ease,width .3s ease}
.hbar i.on{background:#fff;width:56px}

/* ================= WE BUILD BRANDS ================= */
.wbb{position:relative;height:150vh;background:var(--paper)}
.wbb .pin{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.wbb-in{text-align:center;padding-inline:var(--gut)}
.wbb-in{position:relative}
.wbb h2{font-size:clamp(40px,10vw,150px);font-weight:800;letter-spacing:-.045em;line-height:.94;
  display:flex;gap:.22em;justify-content:center;flex-wrap:wrap;position:relative;z-index:3}
.wbb-glow{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.3);
  width:min(900px,86vw);aspect-ratio:1;border-radius:50%;z-index:1;opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(237,28,36,.14) 0%,rgba(67,171,224,.10) 42%,transparent 68%)}
.wbb-mark{position:absolute;left:-2%;bottom:-.06em;width:104%;height:.16em;z-index:2;overflow:visible}
.wbb-mark path{fill:none;stroke:var(--red);stroke-width:7;stroke-linecap:round}
.wbb-dot{position:absolute;border-radius:50%;z-index:1;opacity:0;pointer-events:none}
.wbb .l,.wbb .r{display:inline-block;will-change:transform,opacity}
.wbb .r{color:var(--red);position:relative}
.wbb .sub{margin:26px auto 0;max-width:56ch;opacity:0;transform:translateY(9px);
  transition:opacity .45s ease,transform .45s ease}
.wbb .sub.in{opacity:1;transform:none}

/* ================= INTRO CONTENT ================= */
.intro{padding-block:clamp(70px,9vw,130px);background:#F7F8FA;border-block:1px solid rgba(18,20,26,.07)}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start}
.intro h2{margin:14px 0 18px}
.icards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px}
.ic{padding:24px;border-radius:16px;background:#fff;border:1px solid rgba(18,20,26,.08)}
.ic b{display:block;font-family:var(--d);font-size:17px;margin-bottom:6px}
.ic p{margin:0;font-size:13.5px;color:var(--dim)}
.ic .n{font-family:var(--m);font-size:11px;color:var(--blue);display:block;margin-bottom:12px}

/* ================= ABOUT : interactive 3D field ================= */
#scene-root{position:relative;width:100%;height:100svh;min-height:600px;overflow:hidden;
    background:linear-gradient(180deg,#2E7BD6 0%,#1F66C4 46%,#17518F 100%)}
  three-d-stage:not(:defined) { visibility: hidden; }
  three-d-stage { position: absolute; inset: 0; width: 100%; height: 100%; }
  #vignette {
    position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(10,26,52,0.42) 0%, rgba(10,26,52,0.12) 34%, rgba(10,26,52,0) 58%),
      radial-gradient(120% 90% at 50% 62%, rgba(20,40,70,0) 42%, rgba(18,34,58,0.3) 84%, rgba(12,24,44,0.46) 100%);
  }
  #abtcard {
    position: absolute; left: 5vw; top: calc(50% + var(--hdrH) / 2); transform: translateY(-50%);
    width: min(38vw, 470px); box-sizing: border-box;
    padding: clamp(20px, 3.2vh, 40px) clamp(22px, 2.6vw, 38px) clamp(18px, 3vh, 36px);
    border-radius: clamp(18px, 2.4vh, 26px);
    background: linear-gradient(155deg, rgba(255,255,255,0.20), rgba(255,255,255,0.07) 46%, rgba(255,255,255,0.12));
    border: 1px solid rgba(255,255,255,0.34);
    box-shadow:
      0 24px 60px -20px rgba(6,20,44,0.6),
      inset 0 1px 0 rgba(255,255,255,0.5),
      inset 0 -1px 0 rgba(255,255,255,0.14);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    color: #f4f8ff;
    font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow: visible;
  }
  #abtcard .body { overflow: visible; }
  #abtcard .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: clamp(10px, 1.1vh, 11.5px); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(255,236,204,0.92); margin: 0 0 clamp(8px, 1.7vh, 18px);
  }
  #abtcard .eyebrow::before {
    content: ""; width: 22px; height: 1px; background: rgba(255,214,150,0.8);
  }
  #abtcard h1 {
    margin: 0 0 clamp(9px, 1.5vh, 16px);
    font-family: "Instrument Serif", Georgia, serif;
    font-weight: 400; font-size: clamp(22px, 3.9vh, 44px); line-height: 1.06;
    letter-spacing: -0.01em; text-wrap: pretty;
  }
  #abtcard h1 em { font-style: italic; color: #ffd89a; }
  #abtcard p strong { font-weight: 600; color: #ffe6bd; }
  #abtcard p {
    margin: 0 0 clamp(9px, 1.5vh, 16px);
    font-size: clamp(12px, 1.55vh, 15.5px); line-height: 1.58;
    color: rgba(240,246,255,0.86); text-wrap: pretty;
  }
  #abtcard .body p:last-child { margin-bottom: 0; }
  #abtcard .stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.3vw, 14px);
    margin: clamp(13px, 2.4vh, 26px) 0 0; padding-top: clamp(11px, 2vh, 22px);
    border-top: 1px solid rgba(255,255,255,0.22);
  }
  #abtcard .stats div { display: flex; flex-direction: column; gap: 3px; }
  #abtcard .stats b { font-size: clamp(16px, 2.1vh, 22px); font-weight: 600; letter-spacing: -0.01em; }
  #abtcard .stats span { font-size: clamp(9px, 1vh, 10.5px); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(235,243,255,0.62); }
  #abtcard a.cta {
    display: inline-flex; align-items: center; gap: 9px;
    margin-top: clamp(13px, 2.4vh, 26px);
    padding: clamp(9px, 1.3vh, 13px) clamp(16px, 1.6vw, 22px); border-radius: 999px;
    background: rgba(255,255,255,0.92); color: #12233d;
    font-size: clamp(12px, 1.4vh, 14px); font-weight: 600; text-decoration: none;
    box-shadow: 0 10px 24px -12px rgba(6,20,44,0.7);
  }
  #abtcard a.cta:hover { background: #fff; }
  #abtcard a.cta span { transition: transform .18s ease; }
  #abtcard a.cta:hover span { transform: translateX(3px); }
  @media (max-width: 1100px) { #abtcard { width: min(46vw, 440px); } }
  @media (max-width: 860px) {
    #abtcard {
      left: 4vw; right: 4vw; width: auto; top: auto; bottom: 5vh; transform: none;
      padding: 24px 22px;
    }
  }

/* ================= INDUSTRY SCENES ================= */
.scenes{position:relative}
.scenes .pin{position:sticky;top:0;height:100svh;overflow:hidden;background:#061420}
.scene{position:absolute;inset:0;opacity:0;will-change:opacity;backface-visibility:hidden;contain:layout paint}
.scene .bg{position:absolute;inset:0}
.scene .inner{position:relative;z-index:2;height:100%;width:min(1280px,100% - var(--gut)*2);
  margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);align-items:center;
  padding-top:calc(var(--hdrH) + 46px)}
.scene .txt{position:relative;z-index:3;padding-left:clamp(58px,7vw,120px)}
.scene .tag{font-family:var(--m);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#FF6B72}
.scene h3{font-size:clamp(26px,3.4vw,46px);margin:12px 0 10px;color:#F5F6F8}
.scene .sh{font-family:var(--d);font-weight:600;font-size:clamp(15px,1.5vw,20px);color:#CFD6E0;margin:0 0 14px}
.scene p{margin:0;color:rgba(226,232,240,.78);font-size:clamp(13.5px,1.15vw,16px);max-width:44ch}
.scene ul{margin:18px 0 0;padding:0;list-style:none;display:flex;gap:8px;flex-wrap:wrap}
.scene li{font-family:var(--m);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(226,232,240,.8);padding:6px 12px;border-radius:100px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.scene .art{position:relative;z-index:2;height:min(70vh,560px);display:grid;place-items:center}
.scene .art img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.5))}
/* the prop that hangs from the top edge and touches the copy */
.prop{position:absolute;left:clamp(-80px,-3.4vw,-24px);top:0;z-index:4;pointer-events:none}
.prop img{height:clamp(230px,44vh,410px);width:auto;display:block;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}

.sc-head{position:absolute;left:50%;top:calc(var(--hdrH) + 16px);transform:translateX(-50%);z-index:20;
  padding:10px 26px;border-radius:100px;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 14px 34px -16px rgba(0,0,0,.6);
  font-family:var(--d);font-weight:700;font-size:clamp(14px,1.5vw,19px);letter-spacing:-.01em;white-space:nowrap}
.sc-count{position:absolute;right:var(--gut);bottom:4.5%;z-index:20;font-family:var(--m);font-size:11px;
  letter-spacing:.14em;color:rgba(255,255,255,.45)}
.sc-rail{position:absolute;left:var(--gut);bottom:5%;z-index:20;display:flex;gap:6px}
.sc-rail i{width:22px;height:3px;border-radius:3px;background:rgba(255,255,255,.24);display:block;transition:.3s ease}
.sc-rail i.on{background:#FF4D55;width:38px}

/* ================= SHOWCASE CARD + MARQUEE ================= */
.showcase{padding-block:clamp(60px,7vw,110px);background:#F9FAFB;border-block:1px solid rgba(18,20,26,.07)}
.sc-card{position:relative;width:min(1400px,100% - var(--gut)*2);margin-inline:auto;
  border-radius:clamp(26px,3.4vw,48px);background:#fff;border:1px solid rgba(203,213,225,.5);
  box-shadow:0 40px 100px -20px rgba(0,0,0,.06);overflow:hidden;
  height:clamp(460px,58vw,600px);display:flex;flex-direction:column}
.sc-media{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;user-select:none;
  background:radial-gradient(120% 120% at 78% 78%,#DCE9F7 0%,#EEF3F9 46%,#F7F9FC 100%)}
.sc-media video{width:100%;height:100%;object-fit:cover;transform:scale(1.05);
  transition:transform 1s ease;display:block}
.sc-copy{position:relative;z-index:20;flex:1;padding:clamp(30px,4vw,64px) clamp(22px,4vw,64px) 0;
  display:flex;flex-direction:column;align-items:flex-start;
  opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.sc-copy.in{opacity:1;transform:none}
.sc-copy h2{font-family:var(--d);font-weight:600;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(30px,4vw,56px);color:#0A1B33;margin:0}
.sc-copy p{font-family:var(--b);font-size:clamp(13.5px,1.1vw,15px);color:#64748B;
  margin:18px 0 0;max-width:46ch;line-height:1.65}
.sc-btn{margin-top:26px;background:#0A152D;color:#fff;border:0;border-radius:100px;cursor:pointer;
  font-family:var(--b);font-weight:600;font-size:14px;padding:13px 26px;
  transition:transform .2s ease,background .2s ease}
.sc-btn:hover{transform:scale(1.04);background:#122145}

.sc-bar{position:absolute;bottom:clamp(18px,3vw,40px);left:50%;transform:translateX(-50%) translateY(12px);
  z-index:30;opacity:0;transition:opacity .55s ease .18s,transform .55s ease .18s}
.sc-bar.in{opacity:1;transform:translateX(-50%)}
.sc-bar nav{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.9);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  padding:6px;border-radius:100px;box-shadow:0 12px 40px rgba(0,0,0,.08);
  border:1px solid rgba(203,213,225,.4)}
.sc-logo{width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid #F1F5F9;
  box-shadow:0 1px 3px rgba(0,0,0,.06);display:grid;place-items:center;font-size:13px;color:#0A1B33;flex:none}
.sc-bar a.txt{font-size:12px;font-weight:600;color:#64748B;padding:8px 12px;border-radius:100px;white-space:nowrap}
.sc-bar a.txt:hover{color:#0A1B33}
.sc-pill{display:inline-flex;align-items:center;gap:5px;background:#fff;padding:8px 18px;border-radius:100px;
  font-size:12px;font-weight:600;color:#0A1B33;border:1px solid rgba(203,213,225,.6);
  box-shadow:0 1px 3px rgba(0,0,0,.06);transition:border-color .2s ease;white-space:nowrap}
.sc-pill:hover{border-color:#CBD5E1}
.sc-pill svg{width:13px;height:13px}

.mq{margin-top:clamp(24px,3vw,40px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq-track{display:flex;gap:16px;width:max-content;animation:mqRun 34s linear infinite;animation-play-state:paused}
.mq.live .mq-track{animation-play-state:running}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes mqRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-card{position:relative;height:96px;width:170px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;border-radius:100px;background:#fff;border:1px solid rgba(203,213,225,.6);
  box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:hidden;transition:border-color .25s ease}
.mq-card:hover{border-color:#CBD5E1}
.mq-card .wash{position:absolute;inset:0;transform:scale(1.5);opacity:0;
  transition:transform .4s ease,opacity .4s ease}
.mq-card:hover .wash{transform:scale(1);opacity:1}
.mq-card span{position:relative;z-index:2;font-family:var(--d);font-weight:600;font-size:15px;
  color:#0A1B33;letter-spacing:-.01em;transition:color .3s ease}
.mq-card:hover span{color:#fff}

@media (max-width:760px){
  .sc-card{height:auto;min-height:520px}
  .sc-bar{bottom:16px}
  .sc-bar a.txt{display:none}
  .mq-card{height:78px;width:140px}
}

/* ================= TESTIMONIALS ================= */
.tst{padding-block:clamp(70px,9vw,130px);background:#0F1117;color:#fff}
.tst h2{color:#fff}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.tcard{padding:28px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.tcard p{margin:0 0 20px;font-size:15px;color:rgba(255,255,255,.92)}
.who{display:flex;gap:12px;align-items:center;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
.av{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--d);font-weight:700;color:#fff;background:linear-gradient(140deg,var(--red),var(--orange))}
.who b{display:block;font-size:14px}
.who span{font-size:12px;color:rgba(255,255,255,.55)}
.strs{display:flex;gap:3px;margin-bottom:14px}
.strs svg{width:15px;height:15px;color:var(--orange)}

/* ================= ENQUIRY ================= */
.enq{padding-block:clamp(70px,9vw,130px);background:#F7F8FA}
.enq-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,5vw,70px);align-items:start}
.form{background:#fff;border:1px solid rgba(18,20,26,.09);border-radius:22px;padding:clamp(22px,3vw,36px);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.4)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;color:var(--ink-2)}
.fld input,.fld select,.fld textarea{width:100%;padding:12px 14px;border-radius:11px;font-family:var(--b);
  font-size:14.5px;border:1px solid rgba(18,20,26,.16);background:#fff;color:var(--ink)}
.fld textarea{min-height:104px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(67,171,224,.18)}
.form .btn{width:100%;justify-content:center;margin-top:6px}
.fnote{margin:14px 0 0;font-family:var(--m);font-size:10.5px;color:var(--dim);text-align:center}
.enq-side h2{margin:14px 0 16px}
.eitem{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid rgba(18,20,26,.08)}
.eitem svg{width:20px;height:20px;flex:none;color:var(--red);margin-top:3px}
.eitem b{display:block;font-family:var(--d);font-size:15.5px}
.eitem span{font-size:13.5px;color:var(--dim)}

/* ================= FOOTER ================= */
.ftr{background:#0B0D12;color:rgba(255,255,255,.7);padding-block:60px 26px}
.fg{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.1fr;gap:30px;margin-bottom:46px}
.fg h5{font-family:var(--m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin:0 0 14px;font-weight:400}
.fg ul{list-style:none;margin:0;padding:0}
.fg li{margin-bottom:9px;font-size:13.5px}
.fg li a:hover{color:var(--blue)}
.fabout img{height:40px;margin-bottom:16px}
.fabout p{font-size:13.5px;margin:0 0 16px;max-width:34ch}
.socs{display:flex;gap:9px}
.socs a{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05)}
.socs svg{width:15px;height:15px;color:#fff}
.socs a:hover{background:var(--red);border-color:var(--red)}
.fbtm{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-family:var(--m);font-size:10.5px;letter-spacing:.05em;color:rgba(255,255,255,.45)}

/* ---- footer : four layers ---- */
.f-cta{background:linear-gradient(100deg,var(--red) 0%,#C7141B 60%,#8E0F14 100%);color:#fff}
.f-cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding-block:clamp(28px,3.4vw,46px);flex-wrap:wrap}
.f-cta h3{font-size:clamp(21px,2.4vw,32px);color:#fff;margin:0 0 6px}
.f-cta p{margin:0;font-size:14px;color:rgba(255,255,255,.82)}
.f-cta .acts{display:flex;gap:10px;flex-wrap:wrap}
.f-cta .btn-w{background:#fff;color:var(--red);font-weight:700}
.f-cta .btn-o{border-color:rgba(255,255,255,.55);color:#fff}

.f-badges{background:#0F1218;border-bottom:1px solid rgba(255,255,255,.08)}
.f-badges .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.07)}
.fb{background:#0F1218;padding:22px 20px;display:flex;gap:12px;align-items:flex-start}
.fb svg{width:21px;height:21px;flex:none;color:var(--blue);margin-top:2px}
.fb b{display:block;font-family:var(--d);font-size:14.5px;color:#fff}
.fb span{font-size:12px;color:rgba(255,255,255,.5)}

.f-areas{border-top:1px solid rgba(255,255,255,.08);padding-top:24px;margin-top:36px}
.f-areas h5{margin-bottom:12px}
.f-chips{display:flex;flex-wrap:wrap;gap:7px}
.f-chips a{font-size:12px;padding:6px 13px;border-radius:100px;
  border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.66)}
.f-chips a:hover{border-color:var(--red);color:#fff}
.f-contact li{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;font-size:13.5px}
.f-contact svg{width:16px;height:16px;flex:none;color:var(--red);margin-top:3px}
.f-contact b{display:block;color:#fff;font-weight:600}
.fbtm a:hover{color:var(--blue)}
@media (max-width:900px){ .f-badges .wrap{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .f-badges .wrap{grid-template-columns:1fr} }

.rv{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

/* ================= RESPONSIVE ================= */
@media (max-width:1460px){
  .pchar{height:100%;bottom:2%;right:-1%}
  .rchar{width:126%;left:auto;right:-14%}
  .ochar{height:auto;width:124%;left:auto;right:-10%}
}
@media (max-width:1180px){
  :root{--hdrH:128px}
  .hnav a{padding:9px 10px;font-size:13px}
  .pchar{height:86%;bottom:0;right:-3%}
  .fg{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:900px){
  :root{--hdrH:112px}
  .hnav{display:none}
  .hnav.right{display:flex;flex:none;gap:0}
  .hnav.right a:not(.btn){display:none}
  .hnav.right .btn{margin-left:0 !important;padding:9px 13px;font-size:11.5px}
  .logo img{height:30px}
  .hdr .wrap{}
  .h2r{justify-content:space-between}
  .burger{order:-1}
  .burger{display:flex}
  .h2r{height:68px}
  .hspace{display:none}
  .logo img{height:38px}
  .logo{padding-inline:0;flex:1}
  .logo img{height:34px}
  .intro-grid,.enq-grid,.tgrid{grid-template-columns:1fr}
  .pchar{height:46%;right:-4%;bottom:0}
  .rchar{width:170%;left:auto;right:0}
  .ochar{height:auto;width:180%;left:auto;right:-14%}
  .icards{grid-template-columns:1fr}
  .scenes .pin{position:static;height:auto;overflow:visible}
  .scene{position:relative;inset:auto;opacity:1 !important;transform:none !important;
    padding-block:56px 44px;overflow:hidden}
  .scene .inner{height:auto;grid-template-columns:1fr;align-content:start;
    padding-top:26px;gap:16px}
  .scene .txt{padding-left:52px}
  .prop{left:-24px}
  .scene .art{height:min(34vh,250px)}
  .sc-rail,.sc-count{display:none}
  .sc-head{position:static;transform:none;display:block;width:max-content;
    margin:calc(var(--hdrH) + 18px) auto 6px;background:rgba(255,255,255,.72);
    border-color:rgba(255,255,255,.9)}
  .prop img{height:clamp(160px,24vh,220px)}
  .tgrid{gap:12px}
  .fg{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .h1r{display:none}
  :root{--hdrH:70px}
  .logo img{height:27px}
  .hnav.right .btn .arw{display:none}
  .hnav.right .btn{padding:9px 12px;font-size:11px}
  .frow{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
}


/* ---- inner page hero ---- */
.phero{position:relative;overflow:hidden;background:linear-gradient(160deg,#0C2130 0%,#061420 100%);
  color:#fff;padding-top:calc(var(--hdrH) + clamp(46px,6vw,86px));padding-bottom:clamp(46px,6vw,86px)}
.phero::after{content:"";position:absolute;inset:auto -10% -70% 40%;height:340px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(67,171,224,.22),transparent 70%)}
.phero .wrap{position:relative;z-index:2}
.crumb{font-family:var(--m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin:0 0 16px}
.crumb a:hover{color:#fff}
.phero h1{font-family:var(--d);font-weight:700;letter-spacing:-.03em;line-height:1.03;
  font-size:clamp(34px,5vw,68px);max-width:17ch;color:#fff;margin:0}
.phero p{margin:20px 0 0;max-width:56ch;color:rgba(232,238,247,.78);font-size:clamp(15px,1.25vw,18px)}
.phero .acts{margin-top:28px;display:flex;gap:11px;flex-wrap:wrap}
.phero .btn-o{border-color:rgba(255,255,255,.42);color:#fff}

/* ---- generic inner blocks ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.pcard4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pc{padding:26px;border-radius:16px;background:#fff;border:1px solid rgba(18,20,26,.09)}
.pc .n{font-family:var(--m);font-size:11px;color:var(--red);letter-spacing:.14em;display:block;margin-bottom:14px}
.pc h3{font-size:18px;margin-bottom:8px}
.pc p{margin:0;font-size:14px;color:var(--dim)}
.numbers{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(18,20,26,.1);
  border:1px solid rgba(18,20,26,.1);border-radius:16px;overflow:hidden}
.numbers div{background:#fff;padding:26px}
.numbers b{display:block;font-family:var(--d);font-size:clamp(26px,3vw,38px);line-height:1}
.numbers span{font-family:var(--m);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);margin-top:8px;display:block}
.tl{border-left:2px solid rgba(18,20,26,.1);padding-left:26px;margin-left:6px}
.tl-item{position:relative;padding-bottom:28px}
.tl-item::before{content:"";position:absolute;left:-33px;top:5px;width:12px;height:12px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 4px rgba(224,27,36,.14)}
.tl-item b{display:block;font-family:var(--d);font-size:17px;margin-bottom:5px}
.tl-item span{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.tl-item p{margin:8px 0 0;font-size:14px;color:var(--dim);max-width:52ch}

/* ---- contact page ---- */
.cgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,60px);align-items:start}
.cbox{padding:26px;border-radius:16px;background:#fff;border:1px solid rgba(18,20,26,.09);margin-bottom:14px}
.cbox h3{font-size:18px;margin-bottom:14px}
.cline{display:flex;gap:13px;align-items:flex-start;padding:11px 0;border-bottom:1px solid rgba(18,20,26,.07)}
.cline:last-child{border-bottom:0}
.cline svg{width:19px;height:19px;flex:none;color:var(--red);margin-top:3px}
.cline b{display:block;font-family:var(--d);font-size:16px}
.cline span{font-size:13.5px;color:var(--dim)}
.mapbox{border-radius:16px;overflow:hidden;border:1px solid rgba(18,20,26,.09);background:#EEF2F7;
  aspect-ratio:16/10;display:grid;place-items:center;text-align:center;padding:20px}
.mapbox p{margin:10px 0 0;font-size:13px;color:var(--dim)}
.mapbox svg{width:34px;height:34px;color:var(--red)}

@media (max-width:1000px){ .pcard4{grid-template-columns:1fr 1fr} }
@media (max-width:860px){ .split,.cgrid{grid-template-columns:1fr} }
@media (max-width:560px){ .pcard4,.numbers{grid-template-columns:1fr} }