:root{
    /* Restrained blue trust palette */
    --navy-900:#0a1a33;
    --navy-800:#0f2647;
    --navy-700:#173763;
    --blue-600:#1f5fd4;
    --blue-500:#2f7ff0;
    --blue-400:#5aa0ff;
    --sky-200:#c9e0ff;
    --ink:#0c1826;
    --slate:#4a5b73;
    --slate-light:#64748b;
    --line:#e2e9f2;
    --frost:rgba(255,255,255,.72);
    --white:#ffffff;
    --bg:#f5f8fc;

    --maxw:1160px;
    --radius:20px;
    --radius-sm:14px;

    /* Spacing scale */
    --s-1:.5rem; --s-2:.75rem; --s-3:1rem; --s-4:1.5rem;
    --s-5:2rem; --s-6:3rem; --s-7:4.5rem; --s-8:7rem;

    --ease-out:cubic-bezier(.23,1,.32,1);
  }

  /* Keyboard focus ring: one branded style everywhere (form fields keep their own ring) */
  :focus-visible{outline:2px solid var(--blue-500); outline-offset:2px}
  /* Faster taps on mobile: no double-tap-zoom delay on interactive elements */
  a, button, summary, input, select, textarea, label{touch-action:manipulation}
  summary{cursor:pointer}

  /* Skip link: hidden until focused, for keyboard and screen-reader users */
  .skip-link{position:absolute; left:12px; top:-52px; z-index:200; background:var(--navy-800); color:#fff;
    padding:.6rem 1.1rem; border-radius:0 0 10px 10px; font-weight:600; font-size:.9rem;
    transition:top .15s var(--ease-out)}
  .skip-link:focus{top:0}

  :root{
    --shadow-sm:0 1px 2px rgba(12,24,38,.06), 0 4px 14px rgba(12,24,38,.06);
    --shadow-md:0 10px 30px rgba(15,38,71,.10), 0 2px 8px rgba(15,38,71,.06);
    --shadow-lg:0 30px 60px rgba(10,26,51,.18);

    --font-display:'Sora', system-ui, sans-serif;
    --font-body:'Inter', system-ui, sans-serif;
  }

  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%}
  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--bg);
    line-height:1.6;
    font-size:18px;
    font-weight:300;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; margin:0; color:var(--ink)}
  h1{font-size:36px; line-height:1.2}
  h2{font-size:28px; line-height:1.25}
  h3{font-size:21px; line-height:1.35}
  h4{font-size:16px; line-height:1.4}
  p{margin:0; font-size:17px; font-weight:400; line-height:1.6}
  li{font-size:16px; font-weight:400; line-height:1.5}
  a{color:inherit; text-decoration:none}
  img{max-width:100%; display:block}

  .wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.15rem, 4vw, 2rem)}
  .eyebrow{
    font-family:var(--font-display); font-weight:600; font-size:.8rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--blue-600); display:inline-flex; align-items:center; gap:.55rem;
  }
  .eyebrow::before{content:""; width:26px; height:2px; background:var(--blue-500); border-radius:2px}

  /* ---------- NAV ---------- */
  /* Transparent over the hero video, turns solid once the hero scrolls past. */
  .nav{
    position:sticky; top:0; z-index:50;
    background:linear-gradient(180deg, rgba(10,26,51,.62) 0%, rgba(10,26,51,0) 100%);
    border-bottom:1px solid transparent;
    transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
  }
  /* Solid by default: some Android browsers and in-app WebViews drop backdrop-filter on a
     sticky element, and a translucent bar then lets hero text bleed through the nav. */
  .nav.scrolled{
    background:#f5f8fc;
    border-color:var(--line); box-shadow:0 6px 24px rgba(12,24,38,.05);
  }
  @supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    .nav.scrolled{
      background:rgba(245,248,252,.92);
      backdrop-filter:saturate(160%) blur(14px);
      -webkit-backdrop-filter:saturate(160%) blur(14px);
    }
  }
  /* Transparent state: light content over the dark hero */
  .nav:not(.scrolled){border-bottom-color:rgba(255,255,255,.18)}
  .nav:not(.scrolled) .brand{color:#fff}
  .nav:not(.scrolled) .brand .logo{background:#fff; border-radius:10px; padding:4px; box-shadow:0 2px 10px rgba(0,0,0,.3)}
  /* Dark backing, not translucent white: the hero video cycles through bright frames
     (concrete, white ducting) and a white-on-white toggle disappears on them. Same
     reasoning as the white tile behind the logo mark. */
  .nav:not(.scrolled) .nav-toggle{color:#fff; border-color:rgba(255,255,255,.55);
    background:rgba(10,26,51,.55); box-shadow:0 2px 10px rgba(0,0,0,.25)}
  .nav:not(.scrolled) .nav-toggle:hover{background:rgba(10,26,51,.72)}
  @media(min-width:1224px){
    .nav:not(.scrolled) .menu > li > a, .nav:not(.scrolled) .menu > li > .dtoggle{color:#e8eefa}
    .nav:not(.scrolled) .menu > li > a:hover, .nav:not(.scrolled) .menu > li > .dtoggle:hover{color:#fff; background:rgba(255,255,255,.14)}
    .nav:not(.scrolled) .menu > li > a[aria-current="page"]{color:#fff}
  }
  .nav-inner{display:flex; align-items:center; gap:1rem; height:74px}
  /* flex:0 1 auto, not flex:none — Android system font scaling enlarges the wordmark and
     a non-shrinking lockup pushed the menu button clean off the screen. It truncates now. */
  .brand{display:flex; align-items:center; gap:.65rem; font-family:var(--font-display); font-weight:700; letter-spacing:-.015em; font-size:1.03rem; color:var(--navy-800); white-space:nowrap; flex:0 1 auto; min-width:0; overflow:hidden; line-height:1.15}
  .brand > span:last-child{min-width:0; overflow:hidden; text-overflow:ellipsis}
  /* Legal suffix: same family, a touch smaller and calmer so the wordmark still leads */
  .brand-suffix{font-size:.84em; font-weight:500; opacity:.8; white-space:nowrap;
    letter-spacing:.02em} /* positive tracking: negative is for display sizes, not 12px */
  /* Bare mark, no app-icon tile: the wordmark carries the brand, the mark just signs it */
  .brand .logo{width:38px; height:38px; flex:none; display:grid; place-items:center;
    transition:background .35s, box-shadow .35s, padding .35s, transform .16s var(--ease-out);
    position:relative; overflow:hidden; border-radius:10px}
  /* One-time light sweep on load: a gloss passes over the mark once (ice/water glint).
     Runs once per page load — never loops (nav elements are seen too often for loops). */
  .brand .logo::after{content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(105deg, transparent 28%, rgba(90,160,255,.45) 44%, rgba(255,255,255,.95) 52%, rgba(90,160,255,.45) 60%, transparent 74%);
    transform:translateX(-130%) skewX(-16deg);
    animation:logoShine 1.2s ease-out .6s 1 both}
  @keyframes logoShine{to{transform:translateX(130%) skewX(-16deg)}}
  .brand:active .logo{transform:scale(.94)}
  /* Tablet: more room than a phone, less than desktop — one comfortable line */
  @media(min-width:820px) and (max-width:1223px){.brand{font-size:1.06rem}}
  /* Mobile: the mark anchors the brand — bigger box, tighter tile padding */
  @media(max-width:819px){
    .brand .logo{width:46px; height:46px}
    .brand{gap:.55rem}
    .nav-inner{gap:.6rem}
    .nav:not(.scrolled) .brand .logo{padding:3px}
    /* Full company name, always. Sized in vw so it tracks the screen instead of the
       device's text-size setting (which is what truncated it on Android), and allowed
       to wrap to two lines so nothing is ever cut off. */
    .brand{white-space:normal; font-size:clamp(13.5px, 4vw, 17px); line-height:1.18}
    .brand > span:last-child{overflow:visible; text-overflow:clip}
    /* Two lines, split at the natural break in the name: "Cooling Precision" then
       "Services Sdn. Bhd.". Keeping the whole name on one line left zero headroom at
       375px (177px needed against 177px available), so Android's text scaling clipped
       "Services". Each line is now ~25% shorter than the space it has. */
    .brand-name{display:flex; flex-direction:column; align-items:flex-start; min-width:0}
    .brand-w1, .brand-w2{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      max-width:100%; display:block}
    .brand-w2{margin-top:.04em}
    .brand-suffix{font-size:.84em}
  }
  .brand .logo img{width:100%; height:100%; object-fit:contain; display:block}
  /* Brand is one line at one size — balanced, matches the footer lockup. */

  .btn{
    --btn-bg:var(--blue-600); --btn-fg:#fff;
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    font-family:var(--font-display); font-weight:500; font-size:16px; letter-spacing:-.01em;
    line-height:1.25; /* explicit: <button> and <a class="btn"> otherwise differ ~6px */
    background:var(--btn-bg); color:var(--btn-fg);
    padding:.72rem 1.3rem; border-radius:11px; border:1px solid transparent; cursor:pointer;
    box-shadow:0 8px 20px rgba(31,95,212,.28); transition:transform .16s var(--ease-out), box-shadow .18s ease, background .18s ease; white-space:nowrap;
  }
  @media(hover:hover) and (pointer:fine){
    .btn:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(31,95,212,.36); background:var(--blue-500)}
    .btn.ghost:hover{background:#fff; border-color:var(--blue-400); box-shadow:var(--shadow-sm)}
  }
  .btn:active{transform:translateY(0) scale(.97)}
  /* Arrow nudges forward on hover: the button goes somewhere */
  .btn svg{transition:transform .18s var(--ease-out)}
  @media(hover:hover) and (pointer:fine){
    .btn:hover svg{transform:translateX(3px)}
  }
  .btn.ghost{--btn-bg:transparent; --btn-fg:var(--navy-800); box-shadow:none; border-color:var(--line)}
  .btn.lg{padding:.95rem 1.7rem; font-size:17px}
  .btn svg{width:17px; height:17px}

  /* ---------- HERO ---------- */
  .hero{
    position:relative; overflow:hidden;
    display:flex; flex-direction:column;
    min-height:100dvh; margin-top:-74px;
    background-color:var(--navy-900);
    background-image:url('hero-bg.jpg');
    background-size:cover;
    background-position:65% center;
    background-repeat:no-repeat;
  }
  .hero-mesh{position:absolute; inset:0; z-index:0}
  /* Scrim: heaviest on the left where the headline sits, lifts on the right to show the photo. */
  .hero-mesh::before{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(90deg, rgba(8,13,24,.66) 0%, rgba(8,13,24,.5) 45%, rgba(8,13,24,.26) 100%),
      linear-gradient(180deg, rgba(8,13,24,.4) 0%, rgba(8,13,24,.14) 45%, rgba(8,13,24,.34) 100%);
  }
  .hero .blob, .hero .hero-grid-lines{display:none}
  .blob{position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; will-change:transform}
  .blob.b1{width:520px; height:520px; left:-120px; top:-140px; background:radial-gradient(circle,#2f7ff0,transparent 68%); animation:drift1 22s ease-in-out infinite}
  .blob.b2{width:460px; height:460px; right:-100px; top:-60px; background:radial-gradient(circle,#5aa0ff,transparent 70%); animation:drift2 26s ease-in-out infinite}
  .blob.b3{width:600px; height:600px; right:6%; bottom:-260px; background:radial-gradient(circle,#1f5fd4,transparent 72%); animation:drift3 30s ease-in-out infinite}
  @keyframes drift1{50%{transform:translate3d(60px,50px,0) scale(1.12)}}
  @keyframes drift2{50%{transform:translate3d(-50px,40px,0) scale(1.08)}}
  @keyframes drift3{50%{transform:translate3d(-40px,-40px,0) scale(1.15)}}
  .hero-grid-lines{position:absolute; inset:0; z-index:1; opacity:.35;
    background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:60px 60px; mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 75%)}

  /* Reserve the nav's 74px: the hero is pulled up under the transparent bar, so without
     this the centred block drifts under the nav on short viewports (Android in-app browsers). */
  .hero-inner{position:relative; z-index:2; flex:1; display:flex; flex-direction:column;
    justify-content:center; padding-top:calc(74px + var(--s-6)); padding-bottom:var(--s-6)}
  .hero-inner > div{max-width:660px}

  /* Medley curve divider at the hero's foot, flowing into the navy stat band */
  .hero-curve{position:absolute; left:0; right:0; bottom:-1px; z-index:2; width:100%;
    height:clamp(60px, 8.5vw, 120px); display:block}
  .hero-curve path{fill:var(--navy-900)}
  /* Mobile: the desktop curve squashes badly at narrow widths — swap it for a living
     two-layer water line. Both layers are seamless 2x-wide waves drifting in opposite
     directions (transform-only, compositor-friendly). */
  .hero-wave{display:none}
  @media(max-width:819px){
    .hero-curve{display:none}
    .hero-wave{display:block; position:absolute; left:0; right:0; bottom:-1px; height:64px; z-index:2; overflow:hidden}
    /* 3 parallax layers: back (light, slow) -> mid -> front (navy gradient + crest light).
       Each layer = wrapper that BOBS vertically + inner svg that DRIFTS horizontally.
       Opposite directions + different periods = volumetric water. Transform-only. */
    .wvw{position:absolute; inset:0}
    .wvw .wv{position:absolute; bottom:-6px; left:0; width:200%; height:calc(100% + 6px); display:block}
    /* Drift-only (no vertical bob): parallax carries the 3D read at half the compositor cost —
       these run on top of a decoding video, so every layer counts */
    .w0 .wv{animation:waveDriftL 23s linear infinite}
    .w1 .wv{animation:waveDriftR 15s linear infinite}
    .w2 .wv{animation:waveDriftL 10s linear infinite}
  }
  @keyframes waveDriftL{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}
  @keyframes waveDriftR{from{transform:translate3d(-50%,0,0)} to{transform:translate3d(0,0,0)}}
  /* Offscreen sections get their continuous animations paused by JS (saves GPU while video plays) */
  .anim-paused .marquee-track, .anim-paused .blob,
  .anim-paused .wv, .anim-paused .wvw,
  .anim-paused .svc-tile .fic::after{animation-play-state:paused!important}
  .hero-foot{background:var(--navy-900)}
  .hero-stats{display:grid; grid-template-columns:repeat(2,1fr);
    gap:var(--s-4) var(--s-5); padding-top:var(--s-3); padding-bottom:var(--s-6)}
  @media(min-width:820px){.hero-stats{grid-template-columns:repeat(4,1fr)}}
  .hstat .num{font-family:var(--font-display); font-weight:700; font-size:clamp(26px,2.6vw,32px); color:#fff; letter-spacing:-.02em}
  .hstat .lbl{margin-top:.2rem; font-size:.88rem; color:#9fb4d1; line-height:1.4}
  @media(min-width:820px){
    .hstat{padding-left:var(--s-4); border-left:1px solid rgba(255,255,255,.14)}
    .hstat:first-child{padding-left:0; border-left:0}
  }

  /* Credentials line folded into the navy hero-foot (was a separate strip) */
  .hero-foot .hero-stats{padding-bottom:var(--s-4)}
  .hero-creds{display:flex; flex-wrap:wrap; align-items:center; padding-bottom:var(--s-6)}
  .hero-creds span{font-family:var(--font-display); font-weight:600; font-size:.72rem; letter-spacing:.1em;
    text-transform:uppercase; color:#8fa4c4; padding:0 1.35rem; border-left:1px solid rgba(255,255,255,.16); line-height:1.7}
  .hero-creds span:first-child{padding-left:0; border-left:0}
  @media(max-width:719px){.hero-creds{flex-direction:column; align-items:flex-start; gap:.4rem}
    .hero-creds span{border-left:0; padding:0}}

  .hero-eyebrow{color:var(--sky-200)}
  .hero-eyebrow::before{background:var(--blue-400)}
  /* Home hero uses a Display size above H1; floors at the H1 scale (36px) on small screens. */
  .hero h1{color:#fff; font-size:clamp(38px, 5vw, 68px); line-height:1.12; margin-top:var(--s-4); text-shadow:0 2px 28px rgba(6,10,18,.6)}
  .hero h1 .accent{color:#fff}
  @keyframes sheen{0%{background-position:150% 0} 20%,100%{background-position:-60% 0}}
  .hero-sub{color:#e8eefa; text-shadow:0 1px 18px rgba(6,10,18,.6); font-size:clamp(1.05rem,2.2vw,1.22rem); max-width:38ch; margin-top:var(--s-4); line-height:1.6}
  .hero-actions{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:var(--s-5)}
  .hero .btn.ghost{--btn-fg:#eaf2ff; border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.04)}
  .hero .btn.ghost:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.4)}
  .hero-meta{display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:var(--s-5); color:#9fb4d1; font-size:.9rem}
  .hero-meta span{display:inline-flex; align-items:center; gap:.5rem}
  .hero-meta svg{width:16px; height:16px; color:var(--blue-400)}

  /* Frosted glass stat card */
  .glass{
    position:relative; background:var(--frost);
    backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
    border:1px solid rgba(255,255,255,.6); border-radius:var(--radius);
    padding:var(--s-5); box-shadow:var(--shadow-lg);
  }
  .glass h3{font-size:18px; line-height:1.4; color:var(--navy-800); display:flex; align-items:center; gap:.6rem}
  .glass h3 svg{width:20px; height:20px; color:var(--blue-600)}
  .stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border-radius:var(--radius-sm); overflow:hidden; margin-top:var(--s-4)}
  .stat{background:rgba(255,255,255,.9); padding:1.05rem 1.1rem}
  .stat .num{font-family:var(--font-display); font-weight:700; font-size:1.7rem; color:var(--navy-800); letter-spacing:-.03em}
  .stat .lbl{font-size:.82rem; color:var(--slate); margin-top:.15rem}
  .glass .tag{margin-top:var(--s-4); font-size:.85rem; color:var(--slate); display:flex; align-items:flex-start; gap:.55rem; line-height:1.5}
  .glass .tag svg{width:17px; height:17px; color:var(--blue-600); flex:none; margin-top:2px}

  /* ---------- TRUST STRIP ---------- */
  /* ---------- SECTION SHELL ---------- */
  section[id]{scroll-margin-top:90px}
  .section{padding-block:var(--s-8)}
  /* Mobile density: sections breathe less on small screens (112px reads as a hole on a phone) */
  @media(max-width:640px){
    .section{padding-block:var(--s-6)}
  }
  .section-head{max-width:44ch; margin-bottom:var(--s-6)}
  .section-head.center{margin-inline:auto; text-align:center}
  .section-head h2{font-size:clamp(28px, 2.6vw, 34px); line-height:1.25; margin-top:var(--s-3)}
  .section-head p{color:var(--slate); font-size:1.1rem; margin-top:var(--s-3)}

  /* ---------- BENEFITS ---------- */
  .benefits{display:grid; gap:var(--s-4)}
  @media(min-width:820px){.benefits{grid-template-columns:repeat(3,1fr)}}
  .bcard{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    padding:var(--s-5); box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .bcard::after{content:""; position:absolute; left:0; top:0; height:4px; width:100%; background:linear-gradient(90deg,var(--blue-500),var(--blue-400)); transform:scaleX(0); transform-origin:left; transition:transform .35s ease}
  @media(hover:hover) and (pointer:fine){
    .bcard:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:#d3e2f6}
    .bcard:hover::after{transform:scaleX(1)}
  }
  .bicon{width:54px; height:54px; border-radius:15px; background:linear-gradient(150deg,#eaf2ff,#d6e6ff); display:grid; place-items:center; margin-bottom:var(--s-4); box-shadow:inset 0 0 0 1px rgba(31,95,212,.12)}
  .bicon svg{width:27px; height:27px; color:var(--blue-600)}
  .bcard h3{font-size:21px; line-height:1.35}
  .bcard p{color:var(--slate); margin-top:var(--s-2); font-size:1rem}
  .bcard .proof{margin-top:var(--s-4); padding-top:var(--s-3); border-top:1px solid var(--line); font-family:var(--font-display); font-weight:600; font-size:.86rem; color:var(--navy-700); display:flex; align-items:center; gap:.5rem}
  .bcard .proof svg{width:16px;height:16px;color:var(--blue-600)}


  /* ---------- FAQ ---------- */
  .faq-wrap{max-width:780px; margin-inline:auto}
  .faq{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:.85rem; box-shadow:var(--shadow-sm); overflow:hidden; transition:border-color .2s}
  .faq[open]{border-color:#cfe0f6}
  .faq summary{list-style:none; cursor:pointer; padding:1.15rem 1.35rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-family:var(--font-display); font-weight:600; font-size:1.06rem; color:var(--navy-800)}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary .ic{width:30px; height:30px; border-radius:9px; background:#eef4fc; display:grid; place-items:center; flex:none; transition:transform .3s ease, background .3s}
  .faq summary .ic svg{width:16px; height:16px; color:var(--blue-600); transition:transform .25s var(--ease-out)}
  /* Plus rotates into a close mark: open state is visible at a glance */
  .faq[open] summary .ic svg{transform:rotate(45deg)}
  /* Answer height animates where supported; elsewhere it opens instantly */
  @supports (interpolate-size: allow-keywords){
    :root{interpolate-size:allow-keywords}
    .faq::details-content{height:0; overflow:clip; transition:height .28s var(--ease-out), content-visibility .28s allow-discrete}
    .faq[open]::details-content{height:auto}
  }
  .faq[open] summary .ic{transform:rotate(45deg); background:var(--blue-600)}
  .faq[open] summary .ic svg{color:#fff}
  .faq .ans{padding:0 1.35rem 1.25rem; color:var(--slate); font-size:1rem; line-height:1.65}

  /* ---------- QUOTE FORM ---------- */
  .quote{background:var(--navy-900); position:relative; overflow:hidden}
  .quote .blob{opacity:.4}
  /* Mobile: the quote band's blue glow swells like a slow sea current —
     two glows drift in opposite phase (transform-only, compositor-friendly) */
  @media(max-width:819px){
    .quote .blob{opacity:.5}
    .quote .blob.b1, .statement .blob.b1{animation:sea1 14s ease-in-out infinite}
    .quote .blob.b3, .statement .blob.b3{animation:sea2 18s ease-in-out infinite}
  }
  @keyframes sea1{
    0%,100%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(90px,36px,0) scale(1.18)}
  }
  @keyframes sea2{
    0%,100%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(-110px,-44px,0) scale(1.12)}
  }
  .quote .qmesh{position:absolute; inset:0; z-index:0; background:
      radial-gradient(40% 50% at 15% 20%, rgba(47,127,240,.4), transparent 60%),
      radial-gradient(45% 55% at 88% 85%, rgba(31,95,212,.42), transparent 62%)}
  /* Single centred form (info column removed — contact still lives in the footer).
     Wide card + two-column interior so the card reads balanced, not tall. */
  .quote-inner{position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,880px); justify-content:center}
  .quote-inner .form-card{width:100%}
  .form-cols{display:grid; gap:0 1.5rem}
  @media(min-width:760px){
    .form-cols{grid-template-columns:1.05fr .95fr}
    .field-msg{display:flex; flex-direction:column; margin-bottom:1.05rem}
    .field-msg textarea{flex:1}
  }
  /* One CTA only: the secondary WhatsApp link was removed, so no second track and no pair gap. */
  .form-actions{display:grid}
  .form-card .form-actions .btn{padding:.95rem 1.7rem; font-size:17px; width:100%; margin-top:0;
    min-width:0} /* grid items default to min-width:auto and a nowrap label would overflow */
  @media(max-width:759px){
    /* Phones: label sized off screen width (not the device's text-size setting), tighter side
       padding, and allowed to wrap — otherwise a scaled-up label pushes past the card edge. */
    .form-card .form-actions .btn{padding:.9rem 1rem; font-size:clamp(15px, 4vw, 17px);
      white-space:normal; text-align:center}
  }
  .quote-copy h2{color:#fff; font-size:28px; line-height:1.25}
  .quote-copy p{color:#c3d3ea; margin-top:var(--s-3); font-size:1.1rem; max-width:40ch}
  .qlist{list-style:none; padding:0; margin:var(--s-5) 0 0; display:grid; gap:.85rem}
  .qlist li{display:flex; align-items:flex-start; gap:.75rem; color:#dbe6f6; font-size:1rem}
  .qlist svg{width:22px; height:22px; color:var(--blue-400); flex:none; margin-top:1px}
  .qcontact{margin-top:var(--s-6); padding-top:var(--s-5); border-top:1px solid rgba(255,255,255,.12); display:grid; gap:1rem}
  .qcontact a, .qcontact div{display:flex; align-items:flex-start; gap:.7rem; color:#eaf2ff; font-size:.96rem; line-height:1.5}
  .qcontact svg{width:19px; height:19px; color:var(--blue-400); flex:none; margin-top:3px}

  .form-card{background:#fff; border-radius:var(--radius); padding:clamp(1.5rem,4vw,2.4rem); box-shadow:var(--shadow-lg)}
  .form-card h3{font-size:21px; line-height:1.35}
  .form-card > p{color:var(--slate); font-size:.96rem; margin-top:.4rem; margin-bottom:var(--s-4)}
  .field{margin-bottom:1.05rem}
  .field label{display:block; font-family:var(--font-display); font-weight:600; font-size:.85rem; color:var(--navy-800); margin-bottom:.4rem}
  .field .req{color:var(--blue-600)}
  .field .opt{color:var(--slate-light); font-weight:500; font-size:.78rem}
  .field input::placeholder, .field textarea::placeholder{color:var(--slate-light); opacity:1}
  .field input, .field select, .field textarea{
    width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink);
    padding:.8rem .9rem; border:1px solid var(--line); border-radius:11px; background:#fbfcfe;
    transition:border-color .18s, box-shadow .18s, background .18s;
  }
  .field textarea{resize:vertical; min-height:104px}
  .field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--blue-500); background:#fff; box-shadow:0 0 0 4px rgba(47,127,240,.14)}
  /* Row-gap 0: stacked children already carry .field margin-bottom, and adding the grid
     gap on top made paired fields sit twice as far apart as the rest on phones. */
  .field-row{display:grid; gap:0}
  @media(min-width:520px){.field-row{grid-template-columns:1fr 1fr; column-gap:1.05rem}}
  .form-card .btn{width:100%; margin-top:var(--s-2)}
  /* Inline, not flex: the icon must ride with the first word when the text wraps. */
  .form-note{font-size:.82rem; color:var(--slate-light); text-align:center; margin-top:.9rem; line-height:1.55}
  .form-note svg{width:14px; height:14px; color:var(--blue-600); vertical-align:-2px; margin-right:.35rem}
  .form-success{display:none; text-align:center; padding:var(--s-4) 0}
  .form-success.show{display:block}
  .form-success .check{width:64px; height:64px; border-radius:50%; background:linear-gradient(150deg,var(--blue-500),var(--navy-700)); display:grid; place-items:center; margin:0 auto var(--s-4); box-shadow:0 12px 26px rgba(31,95,212,.4)}
  .form-success .check svg{width:32px; height:32px; color:#fff}
  .form-success h3{color:var(--navy-800)}
  .form-success p{color:var(--slate); margin-top:.5rem}

  /* ---------- FOOTER ---------- */
  footer{background:var(--navy-900); color:#9fb4d1; padding-block:var(--s-6) var(--s-5); border-top:1px solid rgba(255,255,255,.08)}
  .foot-inner{display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between; align-items:center}
  .foot-brand{display:flex; align-items:center; gap:.7rem; color:#fff; font-family:var(--font-display); font-weight:700}
  .foot-brand .logo{width:38px;height:38px;border-radius:10px;background:#fff;overflow:hidden;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.25)}
  .foot-brand .logo img{width:100%;height:100%;object-fit:contain;display:block}
  .foot-links{display:flex; flex-wrap:wrap; gap:1.2rem; font-size:.9rem}
  .foot-links a:hover{color:#fff}
  .foot-bottom{margin-top:var(--s-5); padding-top:var(--s-4); border-top:1px solid rgba(255,255,255,.08); font-size:.84rem; display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between}

  /* ---------- REVEAL (only hides when JS present) ---------- */
  .js .reveal{opacity:0; transform:translateY(18px); transition:opacity .55s var(--ease-out), transform .55s var(--ease-out)}
  .js .reveal.in{opacity:1; transform:none}
  .js .reveal.d1{transition-delay:.08s}
  .js .reveal.d2{transition-delay:.16s}
  .js .reveal.d3{transition-delay:.24s}
  /* Exit is faster than enter and skips the stagger delay (must follow the d-rules) */
  .js .reveal:not(.in){transition-duration:.3s; transition-delay:0s}


  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .blob{animation:none!important}
    .svc-tile .fic::after{animation:none!important}
    .hero-wave .wv, .hero-wave .wvw{animation:none!important}
    .brand .logo::after{animation:none!important}
    .js .reveal{opacity:1; transform:none; transition:none}
    .btn, .bcard, .gal a, .lb-btn, .nav-toggle{transition:none}
    .btn svg, .gal img, .faq summary .ic svg, .lb-img{transition:none}
    .js .proj-cat .gal a{opacity:1; animation:none}
    .hero-video{display:none; animation:none}
    .faq::details-content{transition:none}
    .hero h1 .accent{color:#fff}
  }

  /* ================= MULTI-PAGE NAV ================= */
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center; margin-left:auto; flex:none; width:44px; height:44px; border-radius:11px; border:1px solid var(--line); background:#fff; cursor:pointer; color:var(--navy-800); transition:background .2s, border-color .2s, transform .14s var(--ease-out)}
  .nav-toggle:hover{border-color:var(--blue-400)}
  .nav-toggle:active{transform:scale(.94)}
  .nav-toggle svg{width:22px; height:22px}
  .nav-toggle .ic-close{display:none}
  .nav-toggle[aria-expanded="true"] .ic-open{display:none}
  .nav-toggle[aria-expanded="true"] .ic-close{display:block}

  .menu{list-style:none; margin:0; padding:0}
  .menu > li > a, .menu > li > .dtoggle{
    display:flex; align-items:center; gap:.35rem; width:100%;
    font-family:var(--font-display); font-weight:600; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase;
    color:var(--slate); background:none; border:0; cursor:pointer;
    padding:.7rem .36rem; border-radius:9px; transition:color .2s, background .2s; white-space:nowrap;
  }
  .menu > li > a:hover, .menu > li > .dtoggle:hover{color:var(--blue-600); background:rgba(31,95,212,.07)}
  .menu > li > a[aria-current="page"]{color:var(--blue-600)}
  .menu .caret{width:13px; height:13px; flex:none; transition:transform .25s ease}
  .menu > li{position:relative}

  /* Dropdown panel */
  .submenu{list-style:none; margin:0; padding:.4rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-md); min-width:238px}
  .submenu a{display:block; padding:.62rem .75rem; border-radius:9px; font-size:.92rem; font-weight:500; color:var(--slate); transition:color .18s, background .18s}
  .submenu a:hover{color:var(--navy-800); background:#eef4fc}
  .submenu .sm-desc{display:block; font-size:.78rem; color:var(--slate-light); margin-top:1px; font-weight:400}

  /* ---- Mobile: stacked drawer ---- */
  @media(max-width:1223px){
    .nav-panel{
      display:none; position:absolute; left:0; right:0; top:100%;
      background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
      box-shadow:var(--shadow-md); padding:var(--s-3) clamp(1.15rem,4vw,2rem) var(--s-4); max-height:calc(100vh - 74px); overflow-y:auto;
    }
    .nav-panel.open{display:block}
    .menu > li > a, .menu > li > .dtoggle{font-size:.9rem; padding:.85rem .6rem; justify-content:space-between}
    .menu > li + li{border-top:1px solid var(--line)}
    .submenu{border:0; box-shadow:none; padding:0 0 .5rem .6rem; min-width:0; background:transparent}
    .submenu a{padding:.55rem .6rem}
    .drop > .submenu{display:none}
    .drop.open > .submenu{display:block}
    .drop.open .caret{transform:rotate(180deg)}
    .nav-panel .btn{width:100%; margin-top:var(--s-3); justify-content:center}
  }

  /* ---- Desktop: horizontal bar + hover dropdowns ---- */
  @media(min-width:1224px){
    .nav-toggle{display:none}
    .nav-panel{display:flex !important; align-items:center; gap:.7rem; margin-left:auto; position:static; background:none; border:0; box-shadow:none; padding:0; overflow:visible}
    .menu{display:flex; align-items:center; gap:.15rem}
    .menu > li + li{border:0}
    .drop > .submenu{
      position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-6px);
      opacity:0; visibility:hidden; transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);
    }
    .drop > .submenu::before{content:""; position:absolute; top:-12px; left:0; right:0; height:12px}
    .drop:hover > .submenu, .drop:focus-within > .submenu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
    .drop:hover .caret, .drop:focus-within .caret{transform:rotate(180deg)}
  }

  /* ================= INNER PAGE HERO ================= */
  .phero{position:relative; overflow:hidden; background:var(--navy-900); margin-top:-74px}
  .phero .qmesh{position:absolute; inset:0; z-index:0; background:
      radial-gradient(45% 60% at 15% 20%, rgba(47,127,240,.45), transparent 62%),
      radial-gradient(50% 60% at 85% 30%, rgba(90,160,255,.32), transparent 64%),
      radial-gradient(50% 60% at 70% 100%, rgba(23,55,99,.8), transparent 66%)}
  .phero-inner{position:relative; z-index:2; padding-top:calc(74px + var(--s-5)); padding-bottom:var(--s-7)}
  .phero h1{color:#fff; font-size:36px; line-height:1.2; margin-top:var(--s-3); max-width:20ch}
  .phero p{color:#c3d3ea; font-size:clamp(1.02rem,2vw,1.16rem); margin-top:var(--s-4); line-height:1.6; max-width:54ch}
  .crumb{display:flex; gap:.5rem; align-items:center; font-size:.85rem; color:#8fa8c8}
  .crumb a:hover{color:#fff}
  .crumb svg{width:13px;height:13px;opacity:.6}

  /* ================= GENERIC PAGE BITS ================= */
  .prose{max-width:68ch}
  .prose p + p{margin-top:var(--s-4)}
  .prose p{color:var(--slate); font-size:1.05rem}
  .lead{font-size:1.2rem !important; color:var(--ink) !important; font-weight:500}

  .split{display:grid; gap:var(--s-6)}
  @media(min-width:900px){.split{grid-template-columns:1fr 1fr; gap:var(--s-7); align-items:center}}

  .placeholder{
    border:2px dashed #c6d7ee; border-radius:var(--radius); background:#fff;
    padding:var(--s-6) var(--s-5); text-align:center; max-width:640px; margin-inline:auto;
  }
  .placeholder .pic{width:60px;height:60px;border-radius:16px;background:#eef4fc;display:grid;place-items:center;margin:0 auto var(--s-4)}
  .placeholder .pic svg{width:28px;height:28px;color:var(--blue-600)}
  .placeholder h3{font-size:21px; line-height:1.35}
  .placeholder p{color:var(--slate); margin-top:var(--s-3); font-size:1rem}
  .placeholder .btn{margin-top:var(--s-4)}

  .cta-band{background:var(--navy-900); position:relative; overflow:hidden}
  .cta-band .qmesh{position:absolute;inset:0;z-index:0;background:
      radial-gradient(40% 60% at 20% 30%, rgba(47,127,240,.4), transparent 62%),
      radial-gradient(45% 60% at 85% 80%, rgba(31,95,212,.4), transparent 64%)}
  .cta-inner{position:relative;z-index:2; text-align:center; padding-block:var(--s-7)}
  .cta-inner h2{color:#fff; font-size:28px; line-height:1.25}
  .cta-inner p{color:#c3d3ea; margin-top:var(--s-3); max-width:52ch; margin-inline:auto}
  .cta-inner .hero-actions{justify-content:center}

  /* ================= LOGO MARQUEE ================= */
  .logos{background:var(--bg); border-bottom:1px solid var(--line); padding-block:var(--s-6)}
  .logos-head{text-align:center; margin-bottom:var(--s-5)}
  .logos-head .eyebrow{justify-content:center}
  .logos-head p{color:var(--slate-light); font-size:15px; margin-top:.6rem}

  .marquee{
    position:relative; overflow:hidden;
    display:flex; flex-direction:column; gap:14px;
    /* fade the ends so logos enter/leave instead of hard-cutting */
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  }
  /* Two opposing rows: top drifts left, bottom drifts right. */
  .marquee-row{overflow:hidden}
  .marquee-track{
    display:flex; align-items:center;
    width:max-content; will-change:transform;
  }
  .marquee-track.to-left{animation:marquee 63s linear infinite}
  .marquee-track.to-right{animation:marquee 58s linear infinite reverse}
  /* NOTE: spacing lives on the items, NOT as track `gap`.
     With `gap`, 2N items have 2N-1 gaps, so translateX(-50%) lands half a gap
     short of the duplicate set and the loop visibly jumps. Uniform item slots fix it. */
  /* Track holds the set twice; -50% lands exactly on the duplicate = seamless */
  @keyframes marquee{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
  .marquee:hover .marquee-track, .marquee:focus-within .marquee-track{animation-play-state:paused}

  /* Uniform white tiles: source logos have mixed backgrounds (transparent, on-yellow,
     on-blue). Framing each ORIGINAL logo in an identical card unifies them without
     editing any artwork — the only brand-safe way to make them sit together. */
  .logo-item{
    flex:none; height:82px; width:170px; margin-inline:14px;
    display:flex; align-items:center; justify-content:center;
    background:#fff; border:1px solid var(--line); border-radius:14px;
    box-shadow:var(--shadow-sm); padding:0 22px;
  }
  /* px max-height, NOT 100%: a %-max-height can't resolve inside an auto-sized
     grid/flex track, so images fell back to natural size and got clipped. */
  .logo-item img{max-height:46px; max-width:126px; width:auto; height:auto; border-radius:6px}
  /* Bataras shows as a rounded yellow badge inside the standard white tile, with white space
     around it (matching the Ormond tile). */
  .logo-item.logo-full img{max-height:54px; max-width:110px; width:auto; height:auto; border-radius:9px}
  /* Optical balance: compact emblem marks read smaller than wide wordmarks at the same
     max-height, so give the small square marks a taller cap. */
  .logo-item img[src*="nexus"],
  .logo-item img[src*="1borneo"],
  .logo-item img[src*="kpj-healthcare"],
  .logo-item img[src*="yayasan-sabah"],
  .logo-item img[src*="duchess"]{max-height:54px}
  /* Panasonic fills the full width and reads dominant; pull it in slightly. */
  .logo-item img[src*="panasonic"]{max-width:110px}
  /* Mobile: bigger tiles + logos — 46px marks are hard to read on a phone */
  @media(max-width:640px){
    .logo-item{height:96px; width:196px; margin-inline:12px; padding:0 24px}
    .logo-item img{max-height:58px; max-width:150px}
    .logo-item img[src*="nexus"],
    .logo-item img[src*="1borneo"],
    .logo-item img[src*="kpj-healthcare"],
    .logo-item img[src*="yayasan-sabah"],
    .logo-item img[src*="duchess"]{max-height:66px}
    .logo-item img[src*="panasonic"]{max-width:132px}
    .logo-item.logo-full img{max-height:66px; max-width:130px}
    /* keep px/s constant with the wider 220px slot */
    .marquee-track.to-left{animation-duration:70s}
    .marquee-track.to-right{animation-duration:64s}
  }

  /* Placeholder tiles — delete once real logo files land */
  .logo-item.ph{
    border:2px dashed #cfdcee; border-radius:10px; color:#9db2ce;
    font-family:var(--font-display); font-weight:600; font-size:12px; letter-spacing:.1em;
    filter:none; opacity:1;
  }

  @media(prefers-reduced-motion:reduce){
    /* No auto-motion: let the user scroll each row themselves. */
    .marquee{-webkit-mask-image:none; mask-image:none}
    .marquee-row{overflow-x:auto}
    .marquee-track{animation:none}
  }

  /* ================= CAPABILITY SCHEDULE (Solutions) =================
     Ruled rows like an M&E contractor's capability statement:
     left column = discipline + brands, right column = scope of works. */
  .cap-sched{margin-top:var(--s-6); border-top:1px solid var(--line)}
  .cap-row{display:grid; gap:var(--s-3) var(--s-6); padding:2.4rem 0; border-bottom:1px solid var(--line)}
  @media(min-width:820px){
    .cap-row{grid-template-columns:190px 260px 1fr; align-items:start}
    /* rows without a photo: text starts at the head column, scope stays aligned */
    .cap-row:not(:has(.cap-photo)) > div:first-child{grid-column:2}
  }
  /* Real jobsite proof at a size that reads as proof, framed like the site's tiles */
  .cap-photo{margin:0; width:190px; height:140px; border-radius:14px; overflow:hidden;
    border:1px solid var(--line); box-shadow:var(--shadow-sm)}
  .cap-photo img{width:100%; height:100%; object-fit:cover; display:block}
  @media(max-width:819px){.cap-photo{width:100%; height:180px}}
  .cap-row h3{font-size:20px; line-height:1.35}
  .cap-brands{margin-top:.5rem; font-size:.92rem; line-height:1.55; color:var(--slate-light)}
  .cap-brands b{display:block; font-family:var(--font-display); font-weight:600; font-size:.76rem;
    letter-spacing:.08em; text-transform:uppercase; color:var(--slate); margin-bottom:.2rem}
  .cap-scope{list-style:none; padding:0; margin:0}
  @media(min-width:640px){.cap-scope{columns:2; column-gap:var(--s-5)}}
  .cap-scope li{break-inside:avoid; font-size:15.5px; color:var(--slate); padding:.3rem 0 .3rem 1.5rem; position:relative}
  /* Scope items read as "we do this": brand check instead of an anonymous dot */
  .cap-scope li::before{content:""; position:absolute; left:0; top:.5em; width:14px; height:14px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5fd4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
  .cap-row .hl{display:inline-flex; align-items:center; gap:.5rem; margin-top:var(--s-3);
    font-family:var(--font-display); font-weight:600; font-size:.86rem; color:var(--blue-600);
    background:linear-gradient(120deg,#eaf2ff,#f5faff); border:1px solid #d6e6ff; border-radius:10px; padding:.5rem .8rem}
  .cap-row .hl svg{width:16px; height:16px; flex:none}

  /* qlist was styled for the navy quote panel; on white cards it was near-invisible */
  .bcard .qlist li{color:var(--slate)}


  /* Work band: full-bleed strip of real site photos leading to the projects page */
  .workband{background:#fff; border-bottom:1px solid var(--line); padding-bottom:var(--s-6)}
  .workband-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:4px}
  .workband-grid a{display:block; overflow:hidden}
  .workband-grid img{width:100%; height:clamp(200px, 34vw, 460px); object-fit:cover; display:block;
    transition:transform .5s var(--ease-out)}
  @media(hover:hover) and (pointer:fine){
    .workband-grid a:hover img{transform:scale(1.04)}
  }
  .workband-line{display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
    flex-wrap:wrap; margin-top:var(--s-5)}
  .workband-line p{color:var(--slate); font-size:16px}




  /* Statement breather: one line over real work, generous air */
  /* Clean navy band (Zera pattern): the emptiness carries the sentence. Soft brand glow
     for depth, sea blobs for the sitewide water-motion language. */
  .statement{position:relative; background:var(--navy-900)}
  .statement::before{content:""; position:absolute; inset:0; background:
      radial-gradient(45% 65% at 50% 38%, rgba(47,127,240,.16), transparent 65%),
      radial-gradient(30% 50% at 82% 80%, rgba(31,95,212,.12), transparent 60%)}
  .statement .blob{opacity:.3}
  .statement-inner{position:relative; text-align:center; padding-block:var(--s-8);
    display:flex; flex-direction:column; align-items:center; gap:var(--s-5)}
  .statement h2{color:#fff; font-size:clamp(28px, 3.8vw, 48px); line-height:1.22; max-width:22ch; letter-spacing:-.02em}

  /* Footer: three columns - brand, pages, contact */
  .foot-grid{display:grid; gap:var(--s-6); padding-bottom:var(--s-5)}
  @media(min-width:820px){.foot-grid{grid-template-columns:1.4fr 1.2fr 1fr}}
  .foot-col .foot-label{font-family:var(--font-display); font-weight:600; font-size:.74rem;
    letter-spacing:.1em; text-transform:uppercase; color:#8fa4c4; margin-bottom:.9rem}
  .foot-col p{color:#c7d5ea; font-size:.95rem; line-height:1.65}
  /* Contact: icon-led rows so address / phones / email scan at a glance.
     Icons sit in mini brand badges (same ring language as .svc-badge) instead of bare glyphs. */
  .foot-contact-list{list-style:none; padding:0; margin:0; display:grid; gap:.85rem}
  .foot-contact-list li{display:flex; align-items:flex-start; gap:.75rem; color:#c7d5ea; font-size:.95rem; line-height:1.55}
  .foot-contact-list li > span:last-child{padding-top:4px}
  .fic{width:30px; height:30px; flex:none; border-radius:50%; padding:2px;
    background:linear-gradient(145deg, var(--blue-400) 0%, var(--blue-600) 60%, var(--navy-700) 100%)}
  .fic-in{width:100%; height:100%; border-radius:50%; background:var(--navy-800); display:grid; place-items:center}
  .fic svg{width:14px; height:14px; color:#fff}
  .foot-contact-list .meta{color:#8fa4c4}
  .foot-contact a{color:#fff; font-weight:600; transition:color .2s var(--ease-out)}
  .foot-contact a:hover{color:var(--blue-400)}
  /* Mobile footer: centred stack — brand, labels and rows all centre-aligned,
     each badge icon sits ABOVE its text */
  @media(max-width:819px){
    .foot-grid{text-align:center; gap:var(--s-5)}
    /* Mark ABOVE the wordmark, matching the icon-above-text rows below it. Side by side, a
       device with enlarged text made the lockup lopsided and the mark read as detached. */
    .foot-brand{flex-direction:column; justify-content:center; gap:.6rem;
      font-size:clamp(16px, 4.6vw, 19px); line-height:1.25}
    .foot-brand .logo{width:48px; height:48px}
    .foot-col .foot-label{margin-bottom:.7rem}
    .foot-col > p{margin-top:.7rem !important}
    .foot-contact-list{gap:.95rem}
    .foot-contact-list li{flex-direction:column; align-items:center; justify-content:center; gap:.45rem}
    .foot-contact-list li > span:last-child{padding-top:0; min-width:0}
    .foot-bottom{justify-content:center; text-align:center}
  }

  /* Coverage line: service-area answer at the point of decision */
  .coverage{margin-top:var(--s-5); padding-top:var(--s-4); border-top:1px solid rgba(255,255,255,.14)}
  .coverage .cov-label{font-family:var(--font-display); font-weight:600; font-size:.72rem;
    letter-spacing:.12em; text-transform:uppercase; color:#8fa4c4; margin-bottom:.5rem}
  .coverage p{color:#c3d3ea; font-size:.95rem; line-height:1.7}


  /* Work-video backgrounds: soft blur masks phone-video resolution (Singer-style),
     photo poster is the fallback; hidden entirely under reduced motion */
  .hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transform:translateZ(0); backface-visibility:hidden; opacity:0; transition:opacity .4s ease}
  /* No transform animation on the video (that stutters) — just a cheap opacity crossfade.
     The footage is real work, so it stays alive without an added zoom. */
  .hero-video.is-on{opacity:1}
  /* Once video is live, clip swaps dip to dark navy — never back to the static photo */
  .hero.video-live{background-image:none}
  .statement{overflow:hidden}
  .statement::before{z-index:1}
  .statement-inner{z-index:2}


  /* Service badge icons, Medley-style: gradient ring + navy disc + white glyph */
  .svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4); margin-top:var(--s-5)}
  @media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.svc-grid{grid-template-columns:1fr}}
  #services .bcard{text-align:center; display:flex; flex-direction:column; align-items:center}
  #services .bcard h3{min-height:0}
  .svc-badge{width:76px; height:76px; border-radius:50%; padding:3px; margin-bottom:var(--s-3);
    background:linear-gradient(145deg, var(--blue-400) 0%, var(--blue-600) 60%, var(--navy-700) 100%);
    box-shadow:0 8px 22px rgba(15,38,71,.18)}
  .svc-badge-in{width:100%; height:100%; border-radius:50%; background:var(--navy-800);
    display:grid; place-items:center}
  .svc-badge-in svg{width:34px; height:34px; color:#fff}

  /* Outcome ledger: ruled full-width rows replace the 3-card grid.
     Outcome | what it means | the proof, read left to right. */
  /* Dark sections (Medley pattern): navy bg, light section head */
  .sec-dark{background:var(--navy-900)}
  .sec-dark .section-head h2{color:#fff}
  .sec-dark .section-head p{color:#b9c9e2}

  /* Services: compact capability tiles, icon + label + chevron */
  .svc-tiles{display:grid; gap:var(--s-3); margin-top:var(--s-5)}
  @media(min-width:560px){.svc-tiles{grid-template-columns:repeat(2,1fr)}}
  /* Tablet 2-col: 9th tile would orphan — stretch it across the row */
  @media(min-width:560px) and (max-width:899px){.svc-tile:last-child{grid-column:1/-1}}
  @media(min-width:900px){.svc-tiles{grid-template-columns:repeat(3,1fr); gap:var(--s-4)}}
  .svc-tile{display:flex; align-items:center; gap:1rem;
    background:linear-gradient(135deg, rgba(47,127,240,.16), rgba(31,95,212,.08));
    border:1px solid rgba(90,160,255,.28); border-radius:16px;
    padding:1.05rem 1.15rem;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
  .svc-tile .fic{width:46px; height:46px; flex:none; position:relative}
  .svc-tile .fic-in svg{width:24px; height:24px}
  /* Breathing glow behind each badge: pre-blurred radial, opacity+transform only (no filters).
     Staggered phases so the grid shimmers gently instead of pulsing in unison. */
  .svc-tile .fic::after{content:""; position:absolute; inset:-9px; border-radius:50%; z-index:-1;
    background:radial-gradient(circle, rgba(90,160,255,.55), transparent 70%);
    animation:ficGlow 3.4s ease-in-out infinite}
  .svc-tile:nth-child(2n) .fic::after{animation-delay:-1.2s}
  .svc-tile:nth-child(3n) .fic::after{animation-delay:-2.3s}
  @keyframes ficGlow{
    0%,100%{opacity:.25; transform:scale(.92)}
    50%{opacity:.85; transform:scale(1.15)}
  }
  .svc-tile-label{font-family:var(--font-display); font-weight:600; font-size:1rem; color:#fff; flex:1; line-height:1.3}

  .ben-cards{display:grid; gap:var(--s-4); margin-top:var(--s-5)}
  @media(min-width:900px){.ben-cards{grid-template-columns:repeat(3,1fr)}}
  .ben-card{background:#fff; border-radius:18px; padding:2.4rem 1.9rem 2.1rem;
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s-3);
    box-shadow:0 24px 48px -28px rgba(3,10,24,.55)}
  .ben-card .svc-badge{margin-bottom:0}
  .ben-card h3{font-size:20px}
  .ben-card p{color:var(--slate); font-size:.97rem; line-height:1.65; max-width:34ch}
  .ben-card .ben-proof{margin-top:auto}
  .ben-card .btn{margin-top:.35rem}
  /* Outcome label sits with its on-brand badge; badge reuses the services ring, sized down for the ledger */
  .ben-proof{font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--blue-600); line-height:1.5}
  .bcard .qlist svg{color:var(--blue-600)}

  /* Process steps: ruled columns, no card boxes. The sequence reads left-to-right;
     no "Step 01" labels (the step name is the label). */
  .steps{list-style:none; counter-reset:none; margin:0; padding:0; display:grid; gap:var(--s-5)}
  @media(min-width:820px){.steps{grid-template-columns:repeat(4,1fr); gap:var(--s-4)}}
  .steps li{border-top:2px solid var(--blue-400); padding-top:var(--s-3)}
  /* Step badges: same mini brand-ring language as the footer/service icons */
  .steps .fic{display:inline-block; width:34px; height:34px; margin-bottom:.75rem}
  .steps .fic svg{width:16px; height:16px}
  .steps h3{font-size:18px}
  .steps p{font-size:15px; color:var(--slate); margin-top:.5rem}

  /* Service-card photo: bleeds to the card edges, replaces the icon tile */
  .bcard .card-photo{
    width:calc(100% + 2*var(--s-5)); max-width:none;
    margin:calc(-1*var(--s-5)) calc(-1*var(--s-5)) var(--s-4);
    border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    height:auto; aspect-ratio:16/10; object-fit:cover; display:block;
  }

  /* Services grid: reserve a 2-line title block so card bodies align across the row.
     Only at multi-column widths; in single column a reserve would read as a gap. */
  @media(min-width:560px){
    #services .bcard h3{min-height:2.7em}
  }


  /* Projects: editorial intro stats + category filter (award-level navigation) */
  .proj-intro{margin-bottom:var(--s-6)}
  /* Proof numbers live in the dark hero (same baseline language as the homepage hero) */
  .phero-stats{display:flex; flex-wrap:wrap; margin-top:var(--s-5); border-top:1px solid rgba(255,255,255,.16)}
  .phero-stats .pst{flex:1 1 150px; padding:1.1rem 1.4rem 0 1.4rem; border-left:1px solid rgba(255,255,255,.14)}
  .phero-stats .pst:first-child{border-left:0; padding-left:0}
  .phero-stats .num{font-family:var(--font-display); font-weight:700; color:#fff; font-size:clamp(24px,3vw,30px); letter-spacing:-.02em}
  .phero-stats .lbl{color:#c3d3ea; font-size:.9rem; margin-top:.2rem}
  @media(max-width:640px){
    .phero-stats{display:grid; grid-template-columns:1fr 1fr}
    .phero-stats .pst{border-left:0; padding-left:0}
    .phero-stats .pst:nth-child(2){border-left:1px solid rgba(255,255,255,.14); padding-left:1.2rem}
    .phero-stats .pst:last-child{grid-column:1/-1; border-left:0; border-top:1px solid rgba(255,255,255,.14); margin-top:1.1rem; padding:1.1rem 0 0 0}
  }
  /* App-style filter: one swipeable row, stuck just under the nav while browsing the gallery */
  .proj-filter{position:sticky; top:74px; z-index:30; display:flex; flex-wrap:nowrap; overflow-x:auto;
    gap:.5rem; padding:.8rem 0; background:var(--bg); border-bottom:1px solid var(--line);
    scroll-snap-type:x proximity; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .proj-filter::-webkit-scrollbar{display:none}
  .proj-filter button{scroll-snap-align:start; white-space:nowrap; flex:none}
  .proj-filter button{font-family:var(--font-display); font-weight:600; font-size:.82rem; padding:.5rem .95rem;
    border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--slate); cursor:pointer;
    transition:background .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out); white-space:nowrap}
  @media(hover:hover){.proj-filter button:hover{border-color:var(--blue-400); color:var(--navy-800)}}
  .proj-filter button[aria-selected="true"]{background:var(--navy-800); border-color:var(--navy-800); color:#fff}
  /* Mobile: slightly smaller pills in the sticky bar */
  @media(max-width:640px){
    .proj-filter{gap:.45rem}
    .proj-filter button{font-size:.78rem; padding:.42rem .8rem}
  }
  .proj-cat[hidden]{display:none}

  /* ================= PROJECT GALLERY ================= */
  .proj-cat + .proj-cat{margin-top:var(--s-7)}
  .proj-head h2{font-size:24px; line-height:1.3}
  .proj-head .meta{color:var(--slate-light); font-size:14px; margin-top:.35rem}
  /* Uniform grid: equal square tiles (display-only crop; lightbox still shows the full photo) */
  .gal{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:var(--s-4)}
  @media(max-width:899px){.gal{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:559px){.gal{grid-template-columns:1fr}}
  .gal a{display:block; aspect-ratio:1/1; border-radius:12px; overflow:hidden;
    box-shadow:var(--shadow-sm); cursor:zoom-in; transition:transform .16s var(--ease-out), box-shadow .2s ease}
  @media(hover:hover) and (pointer:fine){
    .gal a:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
  }
  .gal a:active{transform:scale(.98)}
  /* Photo leans toward you on hover: affordance for "click to view" */
  .gal img{transition:transform .45s var(--ease-out)}
  @media(hover:hover) and (pointer:fine){
    .gal a:hover img{transform:scale(1.045)}
  }
  /* Tiles cascade in as each category scrolls into view (delay set per tile by JS) */
  .js .proj-cat .gal a{opacity:0}
  .js .proj-cat.in .gal a{animation:tileIn .5s var(--ease-out) both; animation-delay:var(--d, 0ms)}
  @keyframes tileIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
  .gal img{width:100%; height:100%; object-fit:cover; display:block}
  /* One photo per row on the smallest screens: the 1:1 crop was cutting more than half
     off the very wide and very tall shots. Single column shows the frame as taken; the
     uniform grid stays wherever there is more than one column. Must sit AFTER the base
     rule above, or that rule wins on equal specificity. */
  @media(max-width:559px){
    .gal a{aspect-ratio:auto}
    .gal img{height:auto; object-fit:contain}
  }

  /* Small galleries: column count matches content so 2 photos don't float in a 3-column void */
  .gal.cols-2{grid-template-columns:repeat(2,1fr)}
  @media(max-width:559px){.gal.cols-2{grid-template-columns:1fr}}

  /* Lightbox: native <dialog>; gallery links keep real hrefs so no-JS still opens the photo */
  .lb{border:0; padding:0; margin:0; width:100vw; height:100vh; height:100dvh;
    max-width:100vw; max-height:100vh; max-height:100dvh; background:transparent}
  .lb[open]{display:flex; align-items:center; justify-content:center}
  .lb::backdrop{background:rgba(10,26,51,.92)}
  .lb-frame{margin:0; display:flex; flex-direction:column; align-items:center; gap:12px;
    max-width:min(1100px, 100%); padding:0 60px}
  @media(max-width:559px){.lb-frame{padding:0 10px}}
  .lb-img{max-width:100%; max-height:78vh; max-height:78dvh; width:auto; height:auto;
    border-radius:12px; box-shadow:var(--shadow-lg); background:var(--navy-800);
    transition:opacity .18s ease}
  .lb-frame figcaption{display:flex; align-items:baseline; gap:14px; color:#c7d8f2; font-size:14px; text-align:center}
  .lb-count{font-family:var(--font-display); font-weight:600; font-size:13px; color:#8fb0dd; white-space:nowrap}
  .lb-btn{position:fixed; z-index:2; width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#eaf2ff;
    transition:background .2s ease, transform .14s var(--ease-out)}
  @media(hover:hover) and (pointer:fine){
    .lb-btn:hover{background:rgba(255,255,255,.18)}
  }
  .lb-btn svg{width:22px; height:22px}
  .lb-close{top:16px; right:16px}
  .lb-close:active{transform:scale(.92)}
  .lb-prev{left:12px; top:50%; transform:translateY(-50%)}
  .lb-next{right:12px; top:50%; transform:translateY(-50%)}
  .lb-prev:active, .lb-next:active{transform:translateY(-50%) scale(.92)}
  .lb[open] .lb-frame{animation:lbIn .2s var(--ease-out)}
  @keyframes lbIn{from{opacity:0; transform:scale(.96)} to{opacity:1; transform:none}}
  @media(prefers-reduced-motion:reduce){.lb[open] .lb-frame{animation:none}}

  /* Office map + premises photo (contact page) */
  .map-row{display:grid; grid-template-columns:2fr 3fr; gap:14px; margin-top:var(--s-5); align-items:stretch}
  @media(max-width:767px){.map-row{grid-template-columns:1fr}}
  .map-photo{margin:0; position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); min-height:280px}
  .map-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%}
  .map-photo figcaption{position:absolute; left:0; right:0; bottom:0; padding:1.6rem .9rem .7rem;
    background:linear-gradient(transparent, rgba(10,26,51,.78)); color:#eaf2ff; font-size:.84rem}
  @media(max-width:767px){.map-photo{min-height:340px}}
  .map-embed{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line)}
  .map-embed iframe{display:block; width:100%; height:380px; border:0}
  @media(max-width:559px){.map-embed iframe{height:280px}}

  /* Award figure (about page) */
  .award-fig{margin:0; max-width:390px; justify-self:center}
  .award-fig img{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow-md); border:1px solid var(--line)}
  .award-fig figcaption{margin-top:.7rem; font-size:.86rem; color:var(--slate-light); text-align:center}