:root {
        --canvas: #f3f4f6;
        --white: #ffffff;
        --black: #0A0D14;
        --mid-grey: #6b7280;
        --light-grey: #e5e7eb;
        --green: #2DE27F;
        --green-dark: #0F2821;
        --soft: #F4F6F9;
        --grey-bg: #EAECEF;
        --headline-ms: 1200ms;
        --headline-ease: cubic-bezier(.33,1,.68,1); /* ease-out: quick start, soft landing */
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: var(--canvas); color: var(--black); font-family: "Roboto", system-ui, sans-serif;font-weight:400 ; }
h1{ font-weight: 700; font-size: 26px;line-height: 45px;}
h2,.h1{font-size: clamp(30px, 4.375vw, 56px);line-height:clamp(36px, 5.2vw, 66px);font-weight:700;}
h3,.h3{font-size:clamp(20px, 2.813vw, 36px);line-height: clamp(28px, 3.44vw, 46px);font-weight:700;color: var(--black);}
h4,.h4{font-size:clamp(18px, 1.5625vw, 20px);line-height:clamp(28px, 2.36vw, 30px);font-weight: 600;}
p{font-size:14px;line-height:20px;font-weight:400;}
    /* Page is locked to the intro (full width, no scrollbar) until "See how it all connects" is clicked (site.js) */
    /* + wheel/touch/keys blocked in site.js. The scrollbar's width (--scrollbar-w, measured in index.php) stays free on the
       right, so the layout doesn't jump sideways when the page unlocks and the scrollbar appears */
    html.locked {
        overflow: hidden;
        overscroll-behavior: none;
        padding-right: var(--scrollbar-w, 0px);
    }
    /* ...but the intro itself reaches across that strip, so it stays centred in the full window */
    html.locked .scene { margin-right: calc(-1 * var(--scrollbar-w, 0px)); }

    /* Opened from the header logo (index.php#connects): no intro, straight onto the page */
    html.skip-intro .scene { display: none; }
    .scene { --black: #0A0D14; position: relative; height: 100vh; padding: 30px; margin-bottom:30px; } /* intro text black matches web/ */
    /* "How we help" popup (site.js): the scene over a dimmed page, which stops scrolling while it's open */
    html.scene-open { overflow: hidden; }
    .scene.scene-popup {
        position: fixed; inset: 0; z-index: 200; height: auto; max-height: none; margin: 0;
        padding: clamp(12px, 2.5vw, 30px);
        background: rgba(10, 13, 20, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(4px);
    }
    .scene.scene-popup[hidden] { display: none; }
    .scene-close {       position: absolute; top: 12px; right: 12px; z-index: 40;
        width: 40px; height: 40px; border: 0; border-radius: 50%;
        display: none; align-items: center; justify-content: center;
        background: var(--soft); color: var(--black); font-size: 26px; line-height: 1; cursor: pointer;
    }
    .scene-close:hover { background: var(--green); }
    .scene-popup .scene-close { display: flex; }
    .scene-popup .seehow { display: none; } /* the popup closes with the × (or Esc / backdrop); the green button is only for the home intro */
    .card {
        position: relative; height: 100%; overflow: hidden;
        container-type: size; /* 50cqh = half the card height, used to centre the headline */
               border-radius: 5px;
background: var(--White, #FFF);
box-shadow: 0 0 10px 4px rgba(45, 226, 127, 0.20);
    }

    .headline {
        --headline-scale: .833;
        position: absolute; left: 50%; top: 20px; z-index: 5;
        width: min(1280px, calc(100% - 40px));
        transform-origin: 50% 0;
        transform: translate(-50%, calc(50cqh - 20px - 50%));
        text-align: center; font-weight: 700; font-size:clamp(24px, 2.5cqw, 26px);line-height:clamp(30px, 3.5cqw, 36px);
        color: #2DE27F;
        will-change: transform;
        pointer-events: none; /* its box overlaps the top of the building; let clicks reach the HVAC dots */
        transition: transform var(--headline-ms) var(--headline-ease);
    }
    .headline strong { display: block; color: #0A0D14; font-size:clamp(30px, 3cqw, 36px); line-height:clamp(40px, 4cqw, 46px); }
    .card.started .headline { transform: translate(-50%, 0) scale(var(--headline-scale)); }

    /* Building area below the headline */
    .stage-wrap {
        position: absolute; left: 0; right: 0; top:100px; bottom:20px;flex-direction: column;
        display: flex; align-items: center; justify-content: center; padding: 0 16px;
    }
   
     .stage {
        position: relative;
        width: min(100%, 1000px, (100vh - 60px - 170px) * 943 / 531);
        aspect-ratio: 943 / 531;
        container-type: inline-size; /* lets .info scale with the building (cqw) */
    }
    .floor {
        position: absolute; left: 0; width: 100%;
        opacity: 0; will-change: transform, opacity, filter;
    }

    .logo {
        position: absolute; z-index: 10;
        left:46%; top: 44.574%;   /* 439/943, 242/531 */
        width:13.817%; aspect-ratio: 1; /* 102/943 */
        display: flex; align-items: center; justify-content: center;
         border-radius: 50%;
        opacity: 0; transform: translate(-50%, -50%) scale(.4);
        transition: opacity .5s ease, transform .6s cubic-bezier(.34,1.56,.64,1);
    }
      .logo::before {
        content: ""; position: absolute; inset: 14.5%; border-radius: 50%;
        -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    }
    .logo svg { position: relative; display: block; width: 100%; height: auto; }
    .logo.show { opacity: 1; transform: translate(-37%, -37%) scale(1); }
    /* Once a tab is picked, the logo's green ring strengthens (Figma: 2px rgba(45,226,127,.5)) */
    .logo rect[stroke] { transition: stroke-opacity .4s ease; }
    .card.picked .logo rect[stroke] { stroke-opacity: .5; }

    /* Connection lines: every set's dots blink once the building is ready;
       the active tab's paths draw in */
    .lines { position: absolute; z-index: 6; pointer-events: none; }
    .lines svg { display: block; width: 100%; height: auto; overflow: visible; pointer-events: none; }
   
    .lines path {
        opacity: 0;
        clip-path: circle(0% at var(--cx) var(--cy)) view-box;
        transition: opacity .3s ease;
    }
    .lines.show path {
        opacity: 1;
        clip-path: circle(150% at var(--cx) var(--cy)) view-box;
        transition: opacity .3s ease, clip-path 1.3s cubic-bezier(.45,0,.25,1);
    }

    /* Dots = the filter groups holding circles (the lines' own glow group is also g[filter], so it's excluded) */
    .lines g:has(> circle) { opacity: 0; transition: opacity .4s; cursor: pointer; }
    .card.ready .lines g:has(> circle) { opacity: 1; pointer-events: auto; animation: blink 1.4s ease-in-out infinite; }
    /* After a selection, only the active set's dots keep blinking */
    .card.ready.picked .lines:not(.show) g:has(> circle) { animation: none; opacity: 1; }
    /* Active set's dots: stay visible and pulse their white centre to green (#2DE27F) */
    .card.ready.picked .lines.show g:has(> circle) { animation: none; opacity: 1; }
      .card.ready.picked .lines.show g:has(> circle) > circle:first-child { animation: blink-green 1.4s ease-in-out infinite; }
    @keyframes blink-green { 50% { fill: #2DE27F; } }

     .card.ready .lines.show .hvac-st2 { animation: blink-green 1.4s ease-in-out infinite; }
    @keyframes blink { 50% { opacity: .25; } }
    .info {
        position: absolute; z-index: 15; width: var(--w, 31.6%); /* 298/943; --w set per card in index.php */
        padding: clamp(5px, 2cqw, 16px) clamp(5px, 2cqw, 16px);
      border-radius: 5px;
border: 1px solid rgba(45, 226, 127, 0.50);
background: var(--White, #FFF);
        opacity: 0; pointer-events: none; transform: translateY(10px);
        transition: opacity .4s ease, transform .4s ease;
    } 
    .info.show { opacity: 1; transform: none; max-width:236px; transition-delay: .3s;z-index:7; }
    /* The active set's lines sit above its card (so the attached dot stays whole); other sets' dots stay under it */
    .lines.show { z-index: 8; }
    .info { left: var(--x); top: var(--y); }
    .card:not(.all) .info[data-key="hvac"] { translate: 0 -50%; left: auto; right: calc(100% - 44.85% + .2%); }
    /* Digital Appliances: same, on appliances.svg's top circle (left edge: 267/943 = 28.31%) */
    .card:not(.all) .info[data-key="appliances"] { translate: 0 -50%; left: auto; right: calc(100% - 29.31% + .2%); }
    /* Audio Visual + Connected Guest Technology: same vertical centring on their dot (--y = the dot's y, index.php) */
    .card:not(.all) .info:is([data-key="av"], [data-key="guest"]) { translate: 0 -50%; }
    .card.all .info {min-width:fit-content; padding:10px; left: var(--x-all, var(--x)); top: var(--y-all, var(--y)); width: max-content;
        background: linear-gradient(to bottom, rgba(236, 238, 242, .85), rgba(226, 229, 235, .85)); }
    .info h3 { font-size: clamp(18px, 2cqw, 20px);line-height: clamp(24px, 2cqw, 22px); font-weight: 700; color: var(--black); }
    .info p { margin-top: clamp(4px, 1cqw, 6px); font-size: clamp(14x, 1.6cqw, 14px); font-weight:400; line-height: 1.4; color: var(--mid-grey);
    }
    /* "All" tab: title only */
    .card.all .info p { display: none; }
    .all-graphic {
        position: absolute; z-index: 9; pointer-events: none;
        opacity: 0; transition: opacity .3s ease;
    }
    .all-graphic svg {
        display: block; width: 100%; height: auto; overflow: visible;
        clip-path: circle(0% at 50.95% 50.66%);
    }
    .card.all .all-graphic { opacity: 1; }
    /* Its labels (frosted title boxes) open their system's tab (index.php); the rest of the graphic stays click-through */
    .card.all .all-graphic g[data-figma-bg-blur-radius] { pointer-events: auto; cursor: pointer; }
    .card.all .all-graphic g[data-figma-bg-blur-radius]:hover { opacity: 1; }
    .card.all .all-graphic svg { clip-path: circle(80% at 50.95% 50.66%); transition: clip-path 1.4s cubic-bezier(.45,0,.25,1) .15s; }
    /* Marker dots: white centres (circle rings and path-drawn rings, not the logo's white letters) pulse to green */
    .card.all .all-graphic :is(.all-cls-53, g:not(:has(> .all-cls-12)) > .all-cls-52) { animation: blink-green 1.4s ease-in-out infinite; }
    /* The marker dots open their system's tab + info card too (site.js); the transparent stroke widens the small click target */
    .card.all .all-graphic :is(.all-cls-53, g:not(:has(> .all-cls-12)) > .all-cls-52) { pointer-events: all; cursor: pointer; stroke: transparent; stroke-width: 14px; }
    .card.all .lines, .card.all .info { opacity: 0 !important; visibility: hidden; }
    /* Tabs + replay: hidden until the sequence finishes, then fade up together */
    .maireplay {
        position: relative; z-index: 20; margin-top:-5px;
        display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
        width: max-content; max-width: calc(100% - 32px);
        opacity: 0; pointer-events: none;
        transform: translateY(16px);
        transition: opacity .5s ease, transform .5s ease;
    }
    .maireplay.show { opacity: 1; pointer-events: auto; transform: none; }

    /* Frosted tab bar: grey tabs, active tab turns white (the bar clips its corners) */
    .tabs-inner {
        position: relative; /* offsetParent for the tab-centring scroll in index.php */
        display: flex; align-items: center; height: 56px; overflow: hidden;
        border-radius: 12px; border: 1px solid rgba(255,255,255,.7);
        background: linear-gradient(to bottom, rgba(236,238,242,.85), rgba(226,229,235,.85));
        box-shadow: 0 6px 20px rgba(10,10,10,.08);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    }
    .tab {
        position: relative; z-index: 1; /* above the sliding highlight */
        height: 100%; padding: 0 20px; border: 0;
        background: none; color: var(--mid-grey);
        font: inherit; font-size: 16px; font-weight: 600; white-space: nowrap; cursor: pointer;
        transition: color .3s, background-color .3s;
    }
    .tab:hover { color: var(--black); }
    .tab.active { color: var(--black); font-weight: 700; }
    /* White highlight that slides from tab to tab; left/width are set from the active tab in index.php */
    .tab-indicator {
        position: absolute; top: 0; bottom: 0; left: 0; width: 0;
        background: var(--white); opacity: 0; pointer-events: none;
        transition: left .45s cubic-bezier(.65,0,.35,1), width .45s cubic-bezier(.65,0,.35,1), opacity .3s;
    }
    .tab-indicator.show { opacity: 1; }

    .replay {
        height: 52px; padding: 0 22px; border-radius: 999px;
        background: var(--white); border: 1px solid var(--light-grey); color: var(--black);
        font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
        transition: background .2s, color .2s;
    }
    .replay:hover { background: var(--black); color: var(--white); }

    /* "See how it all connects": sits on the card's bottom edge (Figma 198:12493) */
    .seehow {
        position: absolute; left: 50%; bottom: 8px; z-index: 30;
        height: 44px; padding: 0 22px; border: 0; border-radius: 5px;
border: 1px solid rgba(45, 226, 127, 0.20);
background: #2DE27F;
        
        color: var(--black);
        font: inherit; font-size:18px; font-weight: 700; white-space: nowrap; cursor: pointer;
        opacity: 0; pointer-events: none;
        transform: translate(-50%, 16px);
        transition: opacity .5s ease, transform .5s ease, box-shadow .2s;
    }
    .seehow.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
    .seehow:hover { box-shadow: 0 6px 20px rgba(0,0,0,.2); }

    /* Bootstrap resets: its .card / heading / paragraph defaults must not leak into the intro */
    .scene .card { display: block; border: 0; }
    .info h3, .info p { margin-bottom: 0; }

    /* Sticky header: frosted once scrolled, hides on scroll down, returns on scroll up */
    .site-header {
        position: sticky; top: 0; z-index: 100;
        width: 100%;  ; padding:0px 30px;
        display: flex; align-items: center; justify-content: space-between;
        background: #fff; border-bottom: 1px solid var(--light-grey);
        transition: transform .4s ease, background .3s ease, box-shadow .3s ease;
    }
    .site-header.scrolled {
        background: rgba(255,255,255,1);
        box-shadow: 0 1px 0 rgba(10,10,10,.08);
        -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    }
    .site-header.hidden { transform: translateY(-100%); }    /* Over a photo hero ($headerOverlay in inc_header.php, design: Build to Rent): transparent, white logo / links /
       "How we help", the page pulled up underneath it (-85px = the 84px bar + its border). Back to the white bar once
       scrolled or while the mobile menu is open */
    .site-header-over { margin-bottom: -85px; }
    html:not(.menu-open) .site-header-over:not(.scrolled):not(:has(.has-mega:hover)):not(:has(.has-mega:focus-within)) { background: transparent; border-bottom-color: transparent; }
    html:not(.menu-open) .site-header-over:not(.scrolled):not(:has(.has-mega:hover)):not(:has(.has-mega:focus-within)) .brand img { filter: brightness(0) invert(1); }
    html:not(.menu-open) .site-header-over:not(.scrolled):not(:has(.has-mega:hover)):not(:has(.has-mega:focus-within)) .nav-links a:not(.active) { color: var(--white); }
    html:not(.menu-open) .site-header-over:not(.scrolled):not(:has(.has-mega:hover)):not(:has(.has-mega:focus-within)) .btn-hdr-outline { border-color: var(--white); background: var(--white); }
    html:not(.menu-open) .site-header-over:not(.scrolled):not(:has(.has-mega:hover)):not(:has(.has-mega:focus-within)) .menu-toggle span,
    html:not(.menu-open) .site-header-over:not(.scrolled):not(:has(.has-mega:hover)):not(:has(.has-mega:focus-within)) .menu-toggle span::before,
    html:not(.menu-open) .site-header-over:not(.scrolled):not(:has(.has-mega:hover)):not(:has(.has-mega:focus-within)) .menu-toggle span::after { background: var(--white); }
    /* plain links keep the green hover on the transparent bar (the white-link rule is more specific than .nav-links a:hover) */
    html:not(.menu-open) .site-header-over:not(.scrolled):not(:has(.has-mega:hover)):not(:has(.has-mega:focus-within)) .nav-links > a:not(.active):hover { color: var(--green); }
    .site-header-over ~ .bt-hero .hl-frame { padding-top: 235px; } /* hero box stays where it was below the bar */
    .site-header .container {
        max-width: 1280px; min-height: 84px;
        display: flex; align-items: center; justify-content: space-between; gap: 30px;
    }
    .site-header .nav-links { margin-right: auto; }
    .site-header .nav-links a { color: var(--black); }
    .btn-hdr {
        display: inline-flex; align-items: center; height: 44px; padding: 0 20px;
        border-radius: 4px; border: 1px solid var(--black);
        color: var(--black); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
    }
    .btn-hdr-outline { --fill: var(--black); --fill-text: var(--white); }
    .btn-hdr-green { background: var(--green); border-color: var(--green); }

    /* Hover sweep (vatikaengineering.com .ctaPill): a fill wipes in from the left behind the label,
       text + icon turn --fill-text. Used by .btn-hdr and .btn-hl; each variant sets --fill / --fill-text. */
    .btn-hdr, .btn-hl { position: relative; isolation: isolate; overflow: hidden; transition: color .4s ease, border-color .4s ease; }
    .btn-hdr::before, .btn-hl::before {
        content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 100%; z-index: -1;
        background: var(--fill, var(--green-dark)); /* square: the button's overflow: hidden rounds it, so no sliver of the old background shows at the corners */
        transition: right .4s ease; border-radius:4px;
    }
    .btn-hl.btnSubmit::before{display:none;}
    .btn-hdr:hover::before, .btn-hl:hover::before, .btn-hdr:focus-visible::before, .btn-hl:focus-visible::before { right: 0; }
    /* The fill sits inside the 1px border, so the border also takes the fill colour: no ring of the old colour on hover */
    .btn-hdr:hover, .btn-hl:hover, .btn-hdr:focus-visible, .btn-hl:focus-visible { color: var(--fill-text, var(--white)); }
.btn-hl-green:hover{    background: var(--fill, var(--green-dark));}
.btn-hl-white:hover{background-color:transparent;}

    @media (prefers-reduced-motion: reduce) { .btn-hdr::before, .btn-hl::before { transition: none; } }
    .site-header .brand { width: 120px; display: flex; align-items: center; }

    .nav-links { display: flex; gap: 30px; font-size: 14px; font-weight: 500; }
    .nav-links a { position: relative;font-size: 14px; font-weight: 500; padding: 8px 0; color: var(--mid-grey); text-decoration: none; white-space: nowrap; transition: color .2s; }
    /* .nav-links a::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px;
        background: var(--green); transform: scaleX(0); transform-origin: left;
        transition: transform .3s ease;
    } */
    .nav-links a:hover { color: var(--green); }
    .nav-links a:hover::after { transform: scaleX(1); }
    /* Current page: bold green text, no underline (design); green in the mobile menu too */
    .site-header .nav-links a.active { color: var(--green); font-weight: 700; }
    .nav-links a.active::after { display: none; }

    /* Mega dropdowns (inc_header.php): Sectors / Solutions open on hover or keyboard focus, a full-width panel under the bar.
       The link row stretches to the bar's full height so the pointer never leaves the hover area on its way down to the panel */
    .site-header .nav-links { align-self: stretch; align-items: stretch; }
    .site-header .nav-links > a, .nav-item { display: flex; align-items: center; }
    .nav-item > a { display: flex; align-items: center; gap: 6px;height:100%; }
    .nav-caret { transition: transform .25s ease; }
    .nav-item:hover > a, .nav-item:focus-within > a { color: var(--green); }
    .nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: rotate(180deg); }
    .mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 99; background: var(--white); border-bottom: 1px solid var(--light-grey); box-shadow: 0 24px 40px rgba(10,13,20,.1);
        opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
    .nav-item:hover .mega, .nav-item:focus-within .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    .mega-inner { width: min(1120px, calc(100% - 60px)); margin: 0 auto; padding: 40px 0 40px; display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: start; }
    .mega-intro { align-self: stretch; }
    .mega-tag { display: block; margin-bottom: 20px; font-size: 11px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--green); }
    .hl .mega-intro h3 { margin: 0 0 20px; font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--black); }
    .mega-intro p { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: var(--mid-grey); }
    .site-header .nav-links .mega a { padding: 0; color: var(--black); white-space: normal; font-weight: 400; }
    .nav-links .mega a::after { display: none; }
    .site-header .nav-links .mega .mega-all { font-size: 14px; font-weight: 500; color: var(--green); }
    .mega-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
    .site-header .nav-links .mega .mega-extra { display: inline-flex; align-items: center; gap: 6px; }
    .mega-items { padding-left: 20px; }
    .mega-item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
    .mega-title { display: flex; align-items: center; gap: 12px; color: var(--green); }
    .mega-title strong { font-size: 15px; font-weight: 600; color: var(--black); }
    .mega-text { font-size:13px; line-height: 1.5; color: var(--mid-grey); }
    .mega-go { font-size:13px; font-weight: 500; color: var(--green); }
    .mega-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
    .site-header .nav-links .mega-cards .mega-item { grid-column: span 2; gap: 12px; padding: 20px; border: 1px solid var(--light-grey); border-radius: 4px; transition: border-color .2s ease, box-shadow .2s ease; }
    .site-header .nav-links .mega-cards .mega-item:nth-child(n+4) { grid-column: span 3; } /* 3 cards on the first row, the rest share the second */
    .mega-cards .mega-item:hover { border-color: var(--green); box-shadow: 0 6px 18px rgba(10,13,20,.06); }
    .mega-ico { display: inline-flex; }
    .mega-list { display: grid; align-self: stretch; margin-left: 20px; border-left: 1px solid var(--light-grey); } /* 20px, the divider, then the 20px of .mega-items' padding */
    /* Solutions list: icon tile | title + text | Explore, rows divided by a hairline */
    .site-header .nav-links .mega-list .mega-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 16px; row-gap: 2px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--light-grey); }
    .site-header .nav-links .mega-list .mega-item:last-child { border-bottom: 0; }
    .mega-list .mega-title { display: contents; }
    .mega-list .mega-ico { grid-row: 1 / span 2; grid-column: 1; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 8px; background: rgba(45,226,127,.12); }
    .mega-list .mega-ico svg { width: 18px; height: 18px; }
    .mega-list .mega-ico:has(> img) { background: none; } /* the tile image carries its own background */
    .mega-list .mega-ico img { display: block; width: 40px; height: 40px; }
    .mega-list .mega-title strong { grid-column: 2; grid-row: 1; align-self: end; }
    .mega-list .mega-text { grid-column: 2; grid-row: 2; align-self: start; padding-left: 0; }
    .mega-list .mega-go { grid-column: 3; grid-row: 1 / span 2; }    /* Arrow nudges right on hover / focus (Explore, View all) */
    .mega-go span, .mega-all span { display: inline-block; transition: transform .25s ease; }
    .mega-item:hover .mega-go span, .mega-item:focus-visible .mega-go span,
    .mega-all:hover span, .mega-all:focus-visible span { transform: translateX(5px); }
    @media (prefers-reduced-motion: reduce) { .mega-go span, .mega-all span { transition: none; } }
    .mega-item:hover .mega-title strong { color: var(--green); }    /* On a transparent header over a photo hero the bar links turn white; the panel stays white with dark text */
    html:not(.menu-open) .site-header-over:not(.scrolled):not(:has(.has-mega:hover)):not(:has(.has-mega:focus-within)) .nav-links .mega a:not(.mega-all) { color: var(--black); }
    html:not(.menu-open) .site-header-over:not(.scrolled):not(:has(.has-mega:hover)):not(:has(.has-mega:focus-within)) .nav-links .mega .mega-all,
    html:not(.menu-open) .site-header-over:not(.scrolled):not(:has(.has-mega:hover)):not(:has(.has-mega:focus-within)) .nav-links .mega .mega-go { color: var(--green); }
    .mobile-nav nav a.active { color: var(--green); }

    .header-actions { display: flex; align-items: center; gap: 12px; }

    /* CTA with a sweep fill on hover */
    .btn-cta {
        position: relative; overflow: hidden; isolation: isolate;
        display: inline-flex; align-items: center; justify-content: center; gap: 9px;
        height: 44px; padding: 0 22px; border-radius: 999px;
        background: var(--black); color: var(--white);
        font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
        transition: color .3s ease;
    }
    .btn-cta::before {
        content: ""; position: absolute; inset: 0; z-index: -1;
        background: var(--mid-grey); transform: scaleX(0); transform-origin: left;
        transition: transform .4s ease;
    }
    .btn-cta:hover::before { transform: scaleX(1); }
    .btn-cta svg { transition: transform .3s ease; }
    .btn-cta:hover svg { transform: translateX(3px); }

    /* Hamburger (mobile only) */
    .menu-toggle {
        display: none; position: relative; width: 42px; height: 42px;
        border: 0; background: none; cursor: pointer;
    }
    .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
        position: absolute; left: 9px; width: 24px; height: 2px; border-radius: 4px;
        background: var(--black); transition: transform .3s ease, background .3s ease;
    }
    .menu-toggle span { top: 20px; }
    .menu-toggle span::before, .menu-toggle span::after { content: ""; left: 0; }
    .menu-toggle span::before { transform: translateY(-7px); }
    .menu-toggle span::after { transform: translateY(7px); }
    .menu-toggle[aria-expanded="true"] span { background: transparent; }
    .menu-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
    .menu-toggle[aria-expanded="true"] span::after { transform: rotate(-45deg); }
    .mobile-nav {
        position: fixed; inset: 0 0 0 auto; z-index: 90; width: min(100%, 420px);
        display: flex; flex-direction: column; padding-top: 84px;
        background: var(--black); box-shadow: -18px 0 25px rgba(0,0,0,.35);
        transform: translateX(100%); visibility: hidden;
        transition: transform .35s ease, visibility 0s linear .35s;
    }
    .mobile-nav.show { transform: none; visibility: visible; transition: transform .35s ease; }
    .mobile-nav nav { display: flex; flex-direction: column; padding: 0 24px; overflow-y: auto; }
    .mobile-nav nav a {
        padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.14);
        color: var(--white); font-size: 16px; font-weight: 500; text-decoration: none;
    }
    .mobile-nav-footer { margin-top: auto; padding: 18px 24px; border-top: 1px solid rgba(255,255,255,.14); }
    .mobile-nav-footer .btn-cta { width: 100%; background: var(--white); color: var(--black); }
    .mobile-nav-footer .btn-cta::before { background: var(--light-grey); }
    .mobile-nav-footer { display: flex; flex-direction: column; gap: 12px; }
    /* "How we help": white outline on the black menu, fills white on hover */
    .mobile-nav-footer .btn-cta-outline { background: transparent; color: var(--white); border: 1px solid var(--white); transition: color .3s ease; }
    .mobile-nav-footer .btn-cta-outline::before { background: var(--white); }
    .mobile-nav-footer .btn-cta-outline:hover { color: var(--black); }
    .nav-overlay {
        position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.5);
        opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s linear .35s;
    }
    .nav-overlay.show { opacity: 1; visibility: visible; transition: opacity .35s; }
    html.menu-open { overflow: hidden; }
    html.menu-open .site-header { transform: none; background: var(--white); }

  .headerImg{max-width:100%;height: auto; margin-inline:auto;}

    /* ================= Home sections (Bootstrap grid + shared type) ================= */

    /* Shared typography: every section uses these h1 / h2 / h3 / p sizes */
   .hl .hl-lead { font-size: clamp(17px, 1.7vw, 22px); line-height: 1.75; }
    .hl-label { display: block; margin-bottom:20px;  font-size: 13px; font-weight: 600; letter-spacing: 4px;text-transform: uppercase; color: var(--green);  }
    .hl-dark h2, .hl-dark h3 { color: var(--white); }
    .hl-dark p { color: rgba(255,255,255,.65); }

    /* Section shell: 1280px frame with the thin vertical guide lines from the design */
    .hl-section { position: relative; overflow: hidden; }
    .hl-section.hl-hero h3{margin-block:24px;}
    .hl-section .hl-box h3{font-size:clamp(18px, 2vw, 20px);line-height:clamp(28px, 2.5vw, 30px);font-weight: 600;margin-block:10px;}
     .hl-section p{margin-block:0px 24px;   }
     .hl-section.hl-dark p { color: rgba(255, 255, 255, .7);}
    .hl-section p.hl-about-intro { font-size: clamp(16px, 1vw, 16px); line-height: 1.7; }
      /* .hl-section .hl-label{margin-bottom:0px;} */
.hl-solutions h3{margin-bottom:50px;}
.hl-light .hl-frame{border-inline: 1px solid #DBE2EE;}
.hl-dark .hl-frame{border-color: rgba(255, 255, 255, 0.15);}
.hl-frame {
        position: relative; max-width: 1280px; margin: 0 auto; padding:80px 30px;
        border-inline: 1px solid #DBE2EE;
    }
.hl-head.hl-head-sub> div{max-width:calc(100% - 110px);}
    .hl-frame-narrow { padding-inline:100px; }
    .hl-light { background: var(--soft); }
    .hl-grey  { background: var(--grey-bg); }
    .hl-white { background: var(--white); }
    .hl-dark  { background: var(--green-dark); --frame: rgba(255,255,255,.08); }
    .hl-green-lines { border-block: 1px solid rgba(45,226,127,.6); --frame: rgba(45,226,127,.6); }

    .hl-grey.sec-hero .hl-frame, .sd-hero .hl-frame {
        border-inline: 1px solid transparent;
        border-image: linear-gradient(0deg, rgba(45, 226, 127, 0.40) 36.45%, rgba(45, 226, 127, 0.00) 81.66%) 1;
    }
    /* Buttons + links */
    .btn-hl {border:0px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
        height: 52px; padding: 0 32px; border-radius: 4px;    font-size: 16px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer;
    }
    /* Hover sweep colours: see .btn-hdr, .btn-hl above */
    .btn-hl-green { background: var(--green); color: var(--black); }
    .btn-hl-white { background: var(--white); color: var(--black); }
    .btn-hl-outline { --fill: var(--black); height: 44px; padding: 0 20px; border: 1px solid var(--black); background: transparent; color: var(--black); font-size: 14px; }
    .btn-hl-dark { --fill: var(--green); --fill-text: var(--black); height: 44px; padding: 0 22px; background: #0a0d14; color: var(--white); font-size: 14px; }
    .hl-link {
        display: inline-flex; align-items: center;  gap: 10px;
        color: var(--green); font-size: 14px; font-weight: 500; text-decoration: none; transition: gap .2s;
    }
    .hl-link:hover, a:hover > .hl-link { gap: 12px; color: var(--green); }

    /* Icon tile: green square with faint crosshair guide lines */
    .hl-icon {
        position: relative; flex: 0 0 40px; width: 40px; height: 40px;
        display: inline-flex; align-items: center; justify-content: center;
       
        color: var(--green); font-size: 18px;
    }
    /* .hl-icon::before, .hl-icon::after { content: ""; position: absolute; pointer-events: none; }
    .hl-icon::before { inset: -1px -8px; border-block: 1px solid rgba(45,226,127,.15); }
    .hl-icon::after  { inset: -8px -1px; border-inline: 1px solid rgba(45,226,127,.15); } */

    /* Hero */
    /* Hero (matches web/ .hero) */
    .hl-hero { background: #000; --frame: rgba(45,226,127,.18); }
    .hl-hero .hl-frame {
        padding-top: 100px;
        border-inline: 1px solid transparent;
        border-image: linear-gradient(90deg, rgba(45, 226, 127, 0.20) 36.45%, rgba(45, 226, 127, 0.00) 81.66%) 1;
    }
    .hl-waves { position: absolute; left: 0; top: 160px; width: 100%; height: 560px; pointer-events: none; }
    .hl-hero-intro { position: relative; max-width: 1100px; }
    .hl .hl-hero-intro h2 {letter-spacing: -2px; color:#fff;font-weight: 400; }
    .hl-hero-intro .hl-lead {max-width:880px; margin:20px auto 20px; font-size: clamp(18px, 1.55vw, 24px); line-height: 1.73; color: var(--white); }
    .hl-hero-intro strong { font-weight: 700; }
    .hl-hero .hl-label { margin-bottom: 0; font-size: 13px; letter-spacing: 4px;  }
     .hl-challenge .hl-label{color:#FC494C;}
    .hl-cs { position: relative; max-width: 1160px; margin: 90px auto 0; align-items: flex-start; }
    @media (min-width: 992px) { .hl-cs-challenge { width:48%; } }
    .hl-challenge { margin-top:20px; min-height: 491px; padding: 30px; background: #3f3f3f; border-radius: 4px 0 0 4px; }
    .hl-challenge-img { display: block; width: 100%; max-width:500px; height: auto; margin: 24px auto 0; }
    .hl-challenge p { margin-top:16px; font-size:32px; line-height:36px; color: var(--white); }
    .hl-solution {
        padding: 60px 30px 40px; background: var(--white); border-radius: 4px;
        box-shadow: 0 0 12px 2px rgba(45,226,127,.35);
    }
  
    .mt-18{margin-top:18px;}
    .hl .hl-solution h2 { margin-top: 18px; font-size: clamp(20px, 2vw, 32px); font-weight: 400; line-height:clamp(28px, 2.5vw, 38px); letter-spacing: -.3px; color: var(--mid-grey); }
    .hl-solution h2 strong { font-weight: 700; color: var(--green); }
    .statements { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap:1px; }
    .statements li { display: flex; align-items: center; gap: 14px; font-size: 16px; line-height:24px; color: #0A0D14;font-weight: 500; }
    .statement-icon { display: block; flex: 0 0 56px; width: 56px; height: 56px; }
    .statements .statement-icon { flex-basis: 72px; width: 72px; height: 72px; }
    .row.hl-about-cards.g-4 { --bs-gutter-x: 10px; --bs-gutter-y: 10px; }
.hl-arrow.disabled {opacity:0.4;}
    /* About */
    .hl-box { padding: 20px 20px 24px; background: var(--white); border-radius: 5px; }
    .hl-box h3 { margin-top:1px;margin-bottom:0px; }
  .hl-box p { margin-bottom:0px; }
    /* Solutions */
    /* Green band sweeps left -> right on a loop. The gradient is 2x the frame and starts/ends transparent, so
       shifting it by one full tile (0% -> -200%) repeats seamlessly. */
    .hl-solutions .hl-frame {
        background: linear-gradient(
            to left,
            rgba(45,226,127,0) 0%,
            rgba(45,226,127,.22) 50%,
            rgba(45,226,127,0) 100%
        ), var(--soft);
        background-size: 200% 200%;
        animation: animateGlow 3.25s linear infinite;
    }
    @keyframes animateGlow {
        from { background-position: 0% 50%; }
        to   { background-position: -200% 50%; }
    }
    @media (prefers-reduced-motion: reduce) { .hl-solutions .hl-frame { animation: none; } }
    .hl-tile {
        position: relative; isolation: isolate;
        display: flex; flex-direction: column; justify-content: flex-end;
        height: 370px; padding: 30px; border-radius: 5px; overflow: hidden;
        background: linear-gradient(160deg, #262b29, #070908);
        background-size: cover; background-position: center;
        color: var(--white); text-decoration: none;
    }
    .hl-tile::before {
        content: ""; position: absolute; inset: 0; z-index: -1;
        background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.85));
    }
    .hl-tile h3 { font-size: 24px; color: var(--white); }
    .hl-tile p { color: rgba(255,255,255,.85); }

    /* Solution cards (matches web/ .sol-card). Closed: title + text link at the bottom.
       Open (hover/focus, or .sol-feature): title moves to the top, text + tags slide in,
       the link becomes a green button at the bottom. */
    .sol-card {
        position: relative; overflow: hidden; isolation: isolate;
        height: 100%; min-height: 508px; padding: 30px;
        display: flex; flex-direction: column; justify-content: flex-end;
        background: #000 top center / 100% auto no-repeat;
        border-radius: 4px;    background-size: cover;
        transition: border-color .4s ease; 
    }
    /* Solid black where the photo ends, easing out above it, so the title reads */
    .sol-card::before {
        content: ""; position: absolute; inset: 0; z-index: -1;        
        background: linear-gradient(to top, #000 0%, #000 24%, rgba(0,0,0,.55) 36%, rgba(0,0,0,.15) 50%, rgba(0,0,0,0) 62%);
    }
    /* Dark green tint, faded in when the card opens: photo stays visible, text area reads */
    .sol-card::after {
        content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
        background: linear-gradient(to bottom, rgba(10,40,30,.25) 0%, rgba(10,40,30,.55) 40%, rgba(12,42,32,.88) 75%, #0f2b22 100%);
        transition: opacity .4s ease; border:1px solid;border-color:transparent; border-radius:4px;
    }
     .sol-card:hover::after{ border-color: #2DE27F;transition: opacity .4s ease;}
    .sol-body { flex: 0 0 auto; transition: flex-grow .45s ease, padding .45s ease; }
    .hl .sol-card h3 { margin: 0; font-size:clamp(20px, 2.2vw, 26px);line-height:clamp(28px, 2.5vw, 32px);font-weight: 700; color: var(--white); transition: font-size .45s ease; }
    .sol-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s ease, opacity .3s ease; }
    .sol-more > div { overflow: hidden; }
    .hl .sol-card p { margin-top: 12px; max-width: 440px; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.92); }
    .sol-cta {
        align-self: flex-start; display: inline-flex; align-items: center;  gap: 10px;
        margin-top: 10px; padding: 0; border-radius: 4px; background: transparent;
        font-size: 14px; font-weight: 500; color: var(--green); text-decoration: none;
        transition: height .45s ease, padding .45s ease, margin .45s ease, background-color .3s ease, color .3s ease;
    }

    .sol-card:hover, .sol-card:focus-within, .sol-feature { border-color: rgba(45,226,127,.7); }
    .sol-card:hover::after, .sol-card:focus-within::after { opacity: 1; }
    .hl .sol-card:hover h3, .hl .sol-card:focus-within h3, .hl .sol-feature h3 { font-size: clamp(28px, 2.6vw, 38px); font-weight: 500; line-height: 1.18; }
    .sol-card:hover .sol-more, .sol-card:focus-within .sol-more, .sol-feature .sol-more { grid-template-rows: 1fr; opacity: 1; }
    .sol-card:hover .sol-cta, .sol-card:focus-within .sol-cta, .sol-feature .sol-cta {
        height: 48px; margin-top: 44px; padding: 0 28px; color: var(--black); background: var(--green);
        border: 1px solid #2DE27F;
    }
    .sol-cta:hover { color: var(--black); background: #25c56e !important; }

    /* Managed Services: no photo. Black with green wave lines across the top (design); opens on hover like the other cards
       (title moves up and grows, text + dark tags slide in, the link becomes the green button) */
    .sol-managed::before { background: #000; }
    .sol-managed::after {
        opacity: 1; inset: 0 0 auto; height: 62%;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 300' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0 50C80 70 160 60 240 50S400 30 480 60' stroke='%232de27f' stroke-opacity='.12' stroke-width='2'/%3E%3Cpath d='M0 140C90 160 170 110 260 125S400 175 480 145' stroke='%232de27f' stroke-opacity='.35' stroke-width='4'/%3E%3Cpath d='M0 200C100 190 180 225 280 212S420 200 480 210' stroke='%232de27f' stroke-opacity='.15' stroke-width='3'/%3E%3Cpath d='M0 292C120 272 240 300 360 286S450 282 480 286' stroke='%23ffffff' stroke-opacity='.08' stroke-width='3'/%3E%3Ccircle cx='275' cy='127' r='4' fill='%232de27f' fill-opacity='.45'/%3E%3Ccircle cx='388' cy='183' r='3' fill='%232de27f' fill-opacity='.45'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
    }
    .sol-managed { border-color: rgba(255,255,255,.06); }
    /* Hover / focus: the same dark green tint and green border as the photo cards, in place of the waves */
    .sol-managed:hover::after, .sol-managed:focus-within::after {
        inset: 0; height: auto;
        background: linear-gradient(to bottom, rgba(10,40,30,.25) 0%, rgba(10,40,30,.55) 40%, rgba(12,42,32,.88) 75%, #0f2b22 100%);
    }
    .sol-managed .sol-body { flex-grow: 0 !important; margin: 0; padding-top: 0 !important; }
    .sol-managed .sol-cta, .sol-managed:hover .sol-cta, .sol-managed:focus-within .sol-cta {
        height: auto; margin-top: 40px; padding: 0; background: none; color: var(--green);
    }
    .sol-managed .sol-cta { border: 1px solid transparent; }
    .sol-managed:hover .sol-cta, .sol-managed:focus-within .sol-cta {
        height: 48px; margin-top: 44px; padding: 0 28px; color: var(--black); background: var(--green); border-color: #2DE27F;
    }
    .sol-managed .sol-cta:hover { color: var(--black); background: #25c56e !important; }
    .sol-tags { list-style: none; display: flex; flex-wrap: wrap;  gap: 10px; margin: 20px 0 0; padding: 0; }
    .sol-tags li { padding: 3px 10px; border-radius: 4px; background: rgba(255,255,255,.18); color: #fff; font-size: 12px; font-weight: 500; }

    /* Process */
    .hl-process { list-style: none; margin: 0; padding: 0; }
    .hl-process li { position: relative; display: flex; align-items: flex-start; gap:20px; padding-bottom:20px; }
    .hl-process li:last-child { padding-bottom: 0; }
    /* Down arrow between steps, centred under the icon tile */
    .hl-process li:not(:last-child)::after {
        /* spans the gap from this 40px tile to the next one, so the arrow sits midway however tall the text is */
        content: ""; position: absolute; left: 20px; top: 40px; bottom: 0; transform: translateX(-50%);
        width: 11px; background: url("../images/icons/down_Ico.svg") center / 11px 11px no-repeat;
    }
    .hl-process .hl-icon img { display: block; width:65px; height: 65px; }
    .hl-process h3 { margin-bottom: 4px; font-size: 20px; font-weight: 600; line-height: 1.4; }
    .hl-process p { margin: 0; }
    /* Steps fade up one by one when the list scrolls into view (.anim is added by JS, .in on view) */
    .hl-process.anim li { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 450ms); }
    .hl-process.anim.in li { opacity: 1; transform: none;  }
    @media (prefers-reduced-motion: reduce) { .hl-process.anim li { transition: none; } }

    /* Section head with "View All" + slider arrows */
    .hl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap:10px; margin-bottom: 36px; }
    .hl-head p {   color: var(--mid-grey); }
    .hl-head-sub { margin-bottom: 34px; }
    .hl-head-sub .hl-controls { margin-bottom: 26px; } /* line the buttons up with the title, not the subtitle */
    .hl-controls { display: flex; align-items: center; gap: 10px; }
      .hl-arrow {
        width: 44px; height: 44px; border: 0; border-radius: 4px;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--green); color: var(--black); font-size: 18px; cursor: pointer; transition: transform .2s, background .25s;
    }
    .hl-arrow:hover { transform: translateY(-1px); }
    /* Enabled arrows are green; at either end of the slider the arrow turns white, no hover lift */
    .hl-arrow:disabled {opacity:0.4; background: var(--white); cursor: default; transform: none; }
    .hl-slider {
        display: flex; gap: 16px; padding-right:30px;
        overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    }
    .hl-slider::-webkit-scrollbar { display: none; }
    .hl-slider > * { flex: 0 0 auto; scroll-snap-align: start; }
    .hl-sector { width: 386px; max-width: 85vw; height: 530px; padding: 28px 28px 30px; border-radius: 4px; background-color: #111; }
    /* 3 full tiles across the frame (2 x 10px gaps); the slider's -30px margin / 30px padding cancel, so 100% = frame width */
    @media (min-width: 992px) { .hl-sector { width: calc((100% - 3px) / 3); } }
    .hl-sector::before { background: linear-gradient(to top, rgba(0,0,0,.92) 10%, rgba(0,0,0,.55) 35%, rgba(0,0,0,0) 60%); }
    /* Photo layer under the fade (sector + case cards); zooms in on hover/focus (the card clips it) */
    .hl-tile-img {
        position: absolute; inset: 0; z-index: -2;
        background: center / cover no-repeat;
        transition: transform .6s ease;
    }
    .hl-tile:hover .hl-tile-img, .hl-tile:focus-visible .hl-tile-img { transform: scale(1.08); }
    @media (prefers-reduced-motion: reduce) { .hl-tile-img { transition: none; } }
    /* Sector cards. Closed: title + small text link. Open (hover/focus): dark green tint + border,
       bigger title, text slides in, link becomes a green button, content lifts off the bottom. */
    .hl-sector {  transition: border-color .4s ease, padding .45s ease; }
    .hl-sector::after {
        content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
        background: linear-gradient(to bottom, rgba(10,40,30,.25) 0%, rgba(10,40,30,.55) 40%, rgba(12,42,32,.9) 75%, #0f2b22 100%);
        transition: opacity .4s ease;
    }
    .hl .hl-sector h3 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.4; transition: font-size .45s ease; }
    .hl .hl-sector p {
        max-height: 0; margin: 0; overflow: hidden; opacity: 0;
        font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.88);
        transition: max-height .45s ease, margin .45s ease, opacity .3s ease;
    }
    .hl-section{padding-inline:30px;}
    .hl-sector .hl-link { align-self: flex-start; margin-top: 10px; padding: 0; border-radius: 4px; transition: height .45s ease, padding .45s ease, margin .45s ease, background-color .3s ease, color .3s ease, gap .2s; }

    /* Open state: hover/focus, or .is-open (sectors page grid: one card stays open, site.js moves it on hover) */
    .hl-sector:hover, .hl-sector:focus-visible, .hl-sector.is-open { border-color: rgba(45,226,127,.7); padding-bottom:30px; }
    .hl-sector:hover::after, .hl-sector:focus-visible::after, .hl-sector.is-open::after { opacity: 1; }
    /* Hover photo (name-h.jpg) cross-fades over the default one */
    .hl-tile-img-h { opacity: 0; transition: opacity .45s ease, transform .6s ease; }
    .hl-sector:hover .hl-tile-img-h, .hl-sector:focus-visible .hl-tile-img-h, .hl-sector.is-open .hl-tile-img-h { opacity: 1; }
    .hl .hl-sector:hover h3, .hl .hl-sector:focus-visible h3, .hl .hl-sector.is-open h3 { font-size: 30px; font-weight: 500; line-height: 1.2; }
    .hl .hl-sector:hover p, .hl .hl-sector:focus-visible p, .hl .hl-sector.is-open p { max-height: 120px; margin-top: 8px; opacity: 1; }
    .hl-sector:hover .hl-link, .hl-sector:focus-visible .hl-link, .hl-sector.is-open .hl-link {
        height: 44px; margin-top: 30px; padding: 0 24px; color: var(--black); background: var(--green);
    }
    @media (hover: none) {
        /* Touch: no hover, so keep the text visible */
        .hl .hl-sector p { max-height: none; margin-top: 8px; opacity: 1; }
    }
    .hl-case { width: 847px; max-width: 88vw; height: 482px; justify-content: space-between; }
    /* Case studies Swiper (inc_case-studies.php): cards run past the frame on both sides (the section clips at the viewport),
       so the card moved on by "next" stays in view on the left. Sizes repeated here to beat Swiper's .swiper-slide defaults. */
    .hl-cases { overflow: visible; }
    /* Home sectors Swiper: same, 369px cards (design), the 4th peeking in past the frame */
    .hl-sectors { overflow: visible; }
    /* iOS Safari: let Swiper own the sideways swipe on its link slides (no native link drag / callout stealing the touch) */
    .swiper { touch-action: pan-y; }
    .swiper-slide { -webkit-touch-callout: none; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; }
    .swiper-slide img { -webkit-user-drag: none; pointer-events: none; }
    .swiper .swiper-slide{border:2px solid; border-color:#fff;}
    .swiper .swiper-slide:hover{    border-color: rgba(45, 226, 127, .7);}
    #cases.swiper .swiper-slide{border:0px;}

section.hl-section.hl-dark .swiper .swiper-slide{border-color:var(--green-dark);;}
section.hl-section.hl-dark .swiper .swiper-slide:hover{border-color:rgba(45, 226, 127, 0.7);}



    .hl-sectors .hl-sector { display: flex; width: 382px; max-width: 85vw; height: 530px; }
    .hl-cases .hl-case { display: flex; width:578px; max-width:73vw; height:450px; }
    /* Narrow variant (PBSA / Hotels): three cards fit across the frame (2 across on tablets); phones keep the 90% card from rwd.css.
       Percentages are of the swiper track, i.e. the frame's width; 10px gaps come from Swiper's spaceBetween. */
    @media (min-width: 768px) { .hl-cases.hl-cases-sm .hl-case { width: calc((100% - 10px) / 2); } }
    @media (min-width: 992px) { .hl-cases.hl-cases-sm .hl-case { width: calc((100% - 20px) / 3); } }
    /* Tighter text so the caption and "Read Case Study" each stay on one line in the narrower card */
    .hl-cases-sm .hl-case { padding: 26px 24px; }
    .hl-cases-sm .hl-case-foot { gap: 10px; }
    .hl-cases-sm .hl-case-foot div span { font-size: 12px; letter-spacing: .12em; white-space: nowrap; }
    .hl-cases-sm .hl-case-foot .hl-link { flex: none; font-size: 13px; white-space: nowrap; }
    .hl-cases-sm .hl-place { font-size: 13px; letter-spacing: .16em; }
    .hl-case::before { background: linear-gradient(rgba(0,0,0,.4), transparent 35%, transparent 55%, rgba(0,0,0,.75)); }
    .hl .hl-case h3 { margin: 0 0 10px; font-size: 20px; font-weight: 600; line-height: 1.4; text-transform: uppercase; }
    .hl-case { padding: 28px 30px; border-radius: 4px; background-color: #111; }
    .hl-place { display: inline-flex; align-items: center; gap: 10px; }
    .hl-place, .hl-case-foot div span { font-size: 14px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
    .hl-case-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
    .hl-case-foot strong { display: block; font-size: 40px; font-weight: 700; line-height: 1.1; }

    /* Proven at scale */
    .hl-stats { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-top: 50px; }
    .hl-stats::before, .hl-stats::after { content: ""; position: absolute; pointer-events: none; }
    .hl-stats::before { left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, rgba(45,226,127,.5), transparent); }
    .hl-stats::after { top: 50%; left: 10%; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(45,226,127,.5), transparent); }
    .hl-proven h2 { max-width: 500px; font-size: clamp(28px, 2.5vw, 36px); line-height: 1.25; letter-spacing: -.5px; }
    .hl-stat { display: flex; align-items: center; gap: 16px; padding: 45px 0; }
    .hl-stat:nth-child(even) { padding-left: 30px; }
    .hl-stat-icon { display: block; flex: 0 0 64px; width: 64px; height: 64px; }
    .hl-stat strong { display: block; font-size: 32px; font-weight: 700; line-height: 1.1; color: var(--black); }
    .hl-stat div span { display: block; margin-top: 6px; font-size: 14px; font-weight:700; color: #5d6370; }
    /* Count-up (site.js): digits keep a fixed width while counting; each stat waits (hidden) until its turn, then rises in */
    .hl-stat strong { font-variant-numeric: tabular-nums; }
    .hl-stat { transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
    .hl-stat.stat-wait { opacity: 0; transform: translateY(20px); }
    .hl-stat-icon { transition: transform .6s cubic-bezier(.3,1.5,.5,1); }
    .hl-stat.stat-wait .hl-stat-icon { transform: scale(.6); }
    .hl-clients-col { padding-top: 40px; }
    .hl .hl-clients-col > p {padding-top:30px; color: var(--mid-grey); }
    .hl-label-dark { margin:20px 0 10px; color: #343434; }
    /* Client logos: no box, centred in each half of the row (Figma) */
    .hl-logos { margin-top: 15px; --bs-gutter-x: 10px; --bs-gutter-y: 10px; }
    .hl-logo { height: 90px; display: flex; align-items: center; justify-content: center; }
    .hl-logo img { max-width: 70%; max-height: 52px; object-fit: contain; mix-blend-mode: multiply; } /* drops the logos' white backgrounds onto the grey */
    .hl-logo span { font-size: 22px; font-weight: 700; color: var(--black); }
  .hl-logo.digitApp img { max-width:100%; max-height:inherit;border-radius:5px;}
  .hl-logo.homLogo{height:auto; border-radius:5px;}
    /* Why clients choose */
    .hl-reasons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
    .hl-reason { overflow: hidden; border-radius: 3px; background: #000; }
    .hl-reason-img { aspect-ratio: 236 / 188; background: linear-gradient(160deg, #2a2f2c, #0b0d0c) center / cover; }
    .hl-reason-img img { display: block; width: 100%; height:auto;max-width:100%; object-fit: cover; }
    .hl-reason-body { padding: 20px 16px 24px; }
    .hl .hl-reason h3 { margin: 0 0 12px;font-size:clamp(18px, 2vw, 20px);line-height: 1.2; font-weight: 600; }
    .hl-reason-body p { margin: 0; } /* no Bootstrap bottom margin: the card ends just below the text */
    .hl-frame-split::before {
        content: ""; position: absolute; top: 0; left: -100vw; right: -100vw;
        border-top: 1px solid rgba(255,255,255,.08);
    }
  
    .hl .hl-frame-split h3 {  margin: 0;  font-weight: 700; color: var(--white); text-align: center; }
    .hl .hl-frame-split p { color: rgba(255,255,255,.85); }
    .hl-checks { list-style: none; margin: 30px 0 28px; padding: 0; display:flex; justify-content: center; gap: 16px; font-size: 14px; color: rgba(255,255,255,.9); }
    .hl-checks li { display: flex; align-items: center; gap:10px; }
    .hl-checks :is(svg, img) { flex: none; color: var(--green); margin-top:1px; }
    .hl-media { aspect-ratio: 746 / 420; border-radius: 4px; background: #000 center / cover no-repeat; }
    /* Video: frame still + green play button; the button hides and native controls show once playing */
    .hl-video { position: relative; overflow: hidden; }
    .hl-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
    .hl-play {
        position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
        border: 0; padding: 0; background: rgba(0,0,0,.15); color: var(--green); cursor: pointer;
        transition: background-color .3s ease;
    }
    .hl-play svg { width: clamp(56px, 10%, 74px); height: auto; border-radius: 50%; background: rgba(0,0,0,.25); transition: transform .3s ease; }
    .hl-play:hover { background: rgba(0,0,0,.05); }
    .hl-play:hover svg { transform: scale(1.08); }
    .hl-video.playing .hl-play { display: none; }
    /* "See integrated building technology in action" (inc_demo.php, design): one box the full frame width, the video
       as its background, the text vertically centred on the left over a dark fade so it stays readable */
    .hl-frame.hl-frame-split { padding: 63px 0 80px; }
    .hl-frame.hl-frame-split::before { display: none; } /* the design has no divider between "Why clients choose" and the video box */
    .hl-demo { position: relative; display: flex; align-items: center; min-height: 540px; overflow: hidden; background: #000; }
    .hl-demo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .hl-demo::before { content: ""; position: absolute; inset: 0; z-index: 1;
        background: linear-gradient(90deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.6) 35%, rgba(0,0,0,.2) 70%, rgba(0,0,0,.1) 100%); }
    /* Design: the video box runs from window edge to window edge (the frame is centred, so each side overhangs by 50vw - 50%,
       less half the scrollbar); the text is padded back in so it stays on the frame's left edge */
    @media (min-width: 992px) {
        /* .hl-demo { margin-inline: calc(50% - 50vw + var(--scrollbar-w, 0px) / 2); } */
        /* Text back on the frame's left edge: the frame is 1280px max with a 1px border, centred. (% can't be used here: it would
           refer to the now full-width .hl-demo.) The .hl-demo prefix beats the base padding below. */
        .hl-demo .hl-demo-body {     max-width: 1280px; margin: 0 auto;width:100%; }
    }
    .hl-demo-body { position: relative; z-index: 2; padding: 60px 30px; }
    .hl .hl-demo-body p { text-align: center;}
    .hl-demo .hl-checks { gap:40px; margin: 30px 0 28px; }
    .hl-dot { flex: none; width: 20px; height: 20px; margin-top: 4px; }
    @media (max-width: 767.98px) {
        .hl-frame.hl-frame-split { padding: 0 0 40px; }
        .hl-demo { min-height: 0; }
        .hl-demo::before { background: rgba(0,0,0,.7); }
        .hl-demo-body { padding: 48px 20px; }
        .hl .hl-frame-split h3 { font-size: 24px; line-height: 1.3; }
        .hl-demo .hl-checks { flex-direction: column; align-items: flex-start; width: fit-content; max-width: 100%; margin: 24px auto; gap: 12px; }
        .hl-demo .hl-demo-body p br { display: none; }
        .hl-demo .btn-hl { max-width: 100%; }
    }
    .hl-action-waves { position: absolute; left: 0; bottom: 20px; width: 100%; height: 300px; pointer-events: none; }

    /* Testimonials */
    #testimonials { scroll-margin-top: 80px; } /* "View All" from other pages lands below the header */
    .hl-quote { width: calc(50% - 3px); min-height: 320px; margin: 0; padding: 32px; display: flex; flex-direction: column; background: var(--white); border-radius: 5px; }
    .hl-role { margin-bottom: 14px; font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
    .hl-quote h3 { margin-bottom: 12px; }
    .hl-quote figcaption { margin-top: auto; padding-top:20px; display: flex; flex-direction: column; font-size: 14px; color: var(--mid-grey); }
    .hl-quote figcaption strong { color: var(--black); }
    .hl-stars { display: flex; gap: 4px; margin-bottom: 6px; color: #f5b301; }
.hl-slider#quotes{padding-right:8px;}
    /* Articles */
    .hl-article { height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 4px; background: #f8f8f8; color: var(--black); text-decoration: none; }
    .hl-article:hover { color: var(--black); }
    .hl-article-img { aspect-ratio: 400 / 226; background: linear-gradient(135deg, #d9dde0, #9aa3a8) center / cover; }
    .hl-article-body { flex: 1; display: flex; flex-direction: column; padding: 22px 20px 20px; }
    .hl-article-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 22px; font-size: 12px; color: var(--mid-grey); }
    .hl-tag { padding: 3px 8px; border-radius: 4px; background: var(--white); color: var(--green); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    .hl .hl-article h3 { margin: 0 0 10px; font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--black); }
    .hl .hl-article-text h3 { margin-bottom: 20px; font-size: clamp(26px, 2.2vw, 30px); font-weight: 400; line-height: 1.33; }
    .hl .hl-article p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--mid-grey);margin-bottom:10px; }
    .hl .hl-article p + p { margin-top: 10px; }
    .hl-article-text-body { margin-bottom:20px; }
    .hl-article-foot {margin-top: auto; padding-top: 18px; border-top: 1px solid #e1e3e6;
        display: flex; align-items: center; justify-content: space-between; color: var(--green); font-size: 14px; font-weight: 600;
    }
    .hl-article-foot svg { transition: transform .2s; }
    .hl-article:hover .hl-article-foot svg { transform: translateX(4px); }
    .sec-grid .hl-sector.ovbg{    border: 2px solid;}
  .sec-grid .hl-sector.ovbg:hover {    border-color: rgba(45, 226, 127, .7);}
    /* Contact */
    .hl-frame-contact { padding-block:80px 0px; }
    .hl #contact h2 { max-width: 340px; font-size: clamp(30px, 2.5vw, 36px); line-height: 1.2; }
    .hl #contact .col-lg-4 > p { max-width: 330px; font-size: 14px; color: var(--mid-grey); }
    .hl-form { padding: 30px; border-radius:6px 6px 0px 0px; background: var(--white); }
    /* Flush variant ($contactFlush): no space under the form, card squared off at the bottom */
    .hl-frame-contact.ct-flush { padding-bottom: 0; }
    .ct-flush .hl-form { border-radius: 4px 4px 0 0; }
    .hl-form .form-label { margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--black); }
    .hl-form .form-control, .hl-form .form-select {
        height: 56px; padding: 0 10px; border: 1px solid transparent; border-radius: 4px;
        background-color: #f3f3f4; font-size: 14px; color: var(--black);
        transition: border-color .2s, background-color .2s;
    }
    .hl-form textarea.form-control { height: 146px; padding: 12px 10px; resize: vertical; }
    .hl-form .form-select:has(option[value=""]:checked) { color: var(--mid-grey); }
    .hl-form .form-control::placeholder { color: var(--mid-grey); }
    .hl-form .form-control:focus, .hl-form .form-select:focus { border-color: var(--green); background-color: var(--white); box-shadow: none; }
    .hl-form .btn-hl { height: 52px; font-size: 14px; font-weight: 600; }
    .hl-form .hp-field { display: none; }
    /* Validation (vatikaengineering.com/contact): message line under each field, red border on the field */
    .field-error { display: block; min-height: 16px; margin: 4px 0 6px; font-size: 11px; color: #d9534f; }
    .hl-form .form-control.is-invalid, .hl-form .form-select.is-invalid { border-color: #d9534f; background-image: none; }
    .hl-form .form-select.is-invalid { background-image: var(--bs-form-select-bg-img); }
    .hl-form-status { margin: 0 0 16px; font-size: 14px; }
    .hl-form-error { color: #d9534f; }
    .hl-form-success { color: #146c43; }

    /* ================= Solutions page (solutions/index.php) ================= */
    .hl-dark h4 { color: var(--white); }

    /* Hero blueprint: four photos wired to the HiiLIFE block. Positions are % of a 1280 x 674 layout (the design),
       so photos, dots and the dashed SVG connectors stay aligned at any width. Below 992px it stacks (rwd.css). */
    .sp-hero .hl-frame { padding: 0 30px; }
    .sp-bp-intro .sp-bp-building { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 14px; font-weight: 500; color: var(--green); text-decoration: none; }
    .sp-bp { position: relative; aspect-ratio: 1280 / 674; }
    .sp-bp-intro { position: absolute; left: 20%; right: 20%; top: 9%; }
    .sp-bp-intro .hl-label { display: inline-block; margin-bottom: 14px; padding: 4px 10px; background: rgba(45,226,127,.08); }
    .sp-bp-intro h4 strong { font-weight: 600; color: #3f4651; }
    .hl .sp-bp-intro h1 { font-weight: 400; letter-spacing: -1px; }
    .sp-bp-intro h4 { max-width: 610px; margin: 20px auto 0;font-weight: 400;color: var(--mid-grey); }
    .sp-bp-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
    .sp-bp-lines path { fill: none; stroke: var(--green); stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; opacity: .8; animation: sp-line-flow 1s linear infinite; }
    /* Dashes flow along the path (drawn photo -> core), so the connectors read as feeding the hub */
    @keyframes sp-line-flow { to { stroke-dashoffset: -20; } }
    @media (prefers-reduced-motion: reduce) { .sp-bp-lines path { animation: none; } }
    .sp-bp-item { position: absolute; width: 16.17%; height: 37.24%; margin: 0; } /* no overflow clip: the label tag and dot overhang the photo */
    .sp-bp-hvac  { left: 2.5%;    top: 11.42%; }
    .sp-bp-av    { left: 81.17%;  top: 11.42%; }
    .sp-bp-app   { left: 15.625%; top: 53.41%; }
    .sp-bp-guest { left: 67.97%;  top: 53.41%; }
    .sp-bp-img {
        display: block; width: 100%; height: 100%; border-radius: 4px; background: linear-gradient(160deg, #262b29, #070908) center / cover;
        transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
    }
    /* Hover: photo lifts and grows a little with a green outline + glow, its connector dot pulses
       (scaled rather than zoomed inside, since the tag and dot overhang the photo edge) */
    .sp-bp-item:hover .sp-bp-img { transform: scale(1.05); box-shadow: 0 0 0 2px var(--green), 0 18px 40px rgba(45,226,127,.35); }
    .sp-bp-item figcaption, .sp-bp-dot { z-index: 1; transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; }
    .sp-bp-item:hover figcaption { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(45,226,127,.3); }
    /* Tag hover: a green fill sweeps in from the left behind the label */
    .sp-bp-item figcaption::before {
        content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--green);
        transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1);
    }
    .sp-bp-item:hover figcaption::before { transform: scaleX(1); }
    .sp-bp-item:hover .sp-bp-dot { animation: sp-dot-pulse 1.2s ease-in-out infinite; }
    @keyframes sp-dot-pulse { 50% { transform: scale(1.35); } }
    @media (prefers-reduced-motion: reduce) {
        .sp-bp-img, .sp-bp-item figcaption, .sp-bp-item figcaption::before, .sp-bp-dot { transition: none; }
        .sp-bp-item:hover .sp-bp-img { transform: none; }
        .sp-bp-item:hover .sp-bp-dot { animation: none; }
    }
    /* Frosted tag overhanging the photo edge */
    .sp-bp-item figcaption {
        position: absolute; padding: 6px 12px; border-radius: 3px; white-space: nowrap;
        background: rgba(236,238,242,.92); font-size: 12px; font-weight: 600; color: var(--black);
        -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    }
    .sp-bp-hvac figcaption  { right: -14px; top: 62%; }
    .sp-bp-av figcaption    { left: -12px;  top: 62%; }
    .sp-bp-app figcaption   { right: -18px; top: 58%; }
    .sp-bp-guest figcaption { left: -24px;  top: 8%; }
    /* Connector end points: bottom-centre of the top photos, inner side of the bottom ones */
    /* Same as the design's dot SVG (22px): white centre r4, green 50% ring to r8, green 20% ring to r11 */
    .sp-bp-dot {
        position: absolute; width: 22px; height: 22px; border-radius: 50%; translate: -50% -50%;
        background: radial-gradient(circle closest-side, #fff 0 36.4%, rgba(45,226,127,.5) 36.4% 72.7%, rgba(45,226,127,.2) 72.7% 100%);
    }
    .sp-bp-hvac .sp-bp-dot, .sp-bp-av .sp-bp-dot { left: 50%; top: 100%; }
    .sp-bp-app .sp-bp-dot   { left: 100%; top: 50%; }
    .sp-bp-guest .sp-bp-dot { left: 0;    top: 50%; }
    .sp-bp-core {
        position: absolute; left: 43.83%; width: 12.34%; top: 85.76%; bottom: 0;
        display: flex; align-items: center; justify-content: center; background: #000;
    }
    .sp-bp-core .footer-logo { width: 34%; }

    /* Core capabilities: centred active card (green body + glow), neighbours peek in at the sides (site.js) */
    .sp-caps { background: #000; --frame: rgba(255,255,255,.08); }
    .sp-caps .hl-frame { border-color: rgba(219, 226, 238, 0.24); }
    .hl .sp-caps h3 { color: var(--white); }
    /* Clip only sideways (the cards run past the frame); vertically the glow must spread freely, a hard edge shows otherwise */
    .sp-cap { position: relative; overflow-x: clip; overflow-y: visible; margin: 0 calc(50% - 50vw); padding: 60px 0 70px; } /* full-bleed: the side cards run off the window edges */
    /* Green glow behind the active card: a soft radial fade, reaching up behind the title */
    /* .sp-cap::before {
        content: ""; position: absolute; left: 50%; top: -120px; bottom: -40px; width: min(1100px, 100%); translate: -50% 0;
        background: radial-gradient(closest-side, rgba(45,226,127,.28), rgba(45,226,127,.08) 60%, transparent); pointer-events: none;
    } */
    /* Sizes from the design (1440 viewport): active card 630px wide, side cards 530px, 10px gaps; side cards sit
       41px lower with a shorter body (162px vs 194px), same 280px photo; all text centred */
    /* Light pool spreading below the active card (design: ~880px wide, brightest just under the card, gone by the
       section's end). Card bottom = 60px padding + 280px photo + 194px body = 534px. */
    .sp-cap::after {
        content: ""; position: absolute; left: 50%; top: -40px; bottom: -170px; width: min(1700px, 100%); translate: -50% 0;
        background: radial-gradient(closest-side, rgba(45,226,127,.6), rgba(45,226,127,.38) 40%, rgba(45,226,127,.14) 70%, transparent);
        pointer-events: none;
    }    .sp-cap-track { z-index: 1; } /* above the glow pool */
    .sp-cap-track { position: relative; display: flex; align-items: flex-start; gap: 10px; transition: transform .6s cubic-bezier(.4,0,.2,1); }
    .sp-cap-card {
        flex: 0 0 min(530px, 41.4%); margin-top: 0; display: flex; flex-direction: column; overflow: hidden;
        border-radius: 4px; background: #161616; cursor: pointer;
        transition: margin-top .5s ease, box-shadow .4s ease;
    }
    .sp-cap-img { height: 224px; background: linear-gradient(160deg, #262b29, #070908) center / cover; }
    .sp-cap-body {
        min-height: 156px; padding: 24px 30px; display: flex; flex-direction: column; align-items: center; text-align: center;
        transition: min-height .5s ease, background-color .4s ease;
    }
    /* Every card: title, text and a black "Explore Solution" button, centred; side cards sit on a dimmed green body, the open one on full green */
    .sp-cap-card { background: #1f6b41; }
    .hl .sp-cap-body h4 { margin-bottom: 6px; font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--black); }
    .sp-cap-body p { margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--black); }
    .sp-cap-body { background: #2f7f52; }
    .sp-cap-link { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 42px; padding: 0 24px; border-radius: 4px; background: #000; font-size: 14px; font-weight: 500; color: var(--white); text-decoration: none; }
    .sp-cap-card.active { flex-basis: min(630px, 49.2%); margin-top: 0; cursor: default; box-shadow: 0 0 0 1px rgba(45,226,127,.45), 0 0 90px rgba(45,226,127,.4); }
    .sp-cap-card.active .sp-cap-body { min-height: 196px; justify-content: center; background: var(--green); }
    .hl .sp-cap-card.active h4 { font-size: 28px; }
    .sp-cap-card.active p { font-size: 15px; color: var(--black); }
    .sp-cap-card.active .sp-cap-link { margin-top: 0; height: 52px; padding: 0 32px; font-size: 16px; }
    .sp-cap-link svg { display: none; }
    /* Side cards are 380px tall against the open card's 476px: centred on it, the gap above and below is the same (48px) */
    @media (min-width: 992px) {
        .sp-cap-track { align-items: center; }
        .sp-cap-card.active .sp-cap-img { height: 280px; }
    }

    /* HVAC control panel over the blurred photo: 2 x 2 glass room tiles + the 21°C dial card.
       Sized in cqw of the card (design: 630px card, so 1cqw = 6.3px) so it scales with the card width. */
    .sp-cap-panel {
        position: relative; overflow: hidden; container-type: inline-size;
        display: flex; align-items: center; background: #000;
    }
    .sp-panel-bg { position: absolute; inset: 0; background: center / cover; } /* the control panel is gone from the markup, so the photo shows as it is (was blurred and darkened under it) */
    /* cqw only resolves against the panel for its children, so the side padding and the gap live on them */
    .sp-panel-rooms { position: relative; flex: 0 0 50.3cqw; margin: 0 1.75cqw 0 6.35cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 1.75cqw; }
    .sp-room {
        position: relative; height: 16.7cqw; padding: 1.6cqw; border-radius: 4px; display: flex; flex-direction: column;
        background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    }
    .sp-room::after { content: ""; position: absolute; top: 2.3cqw; right: 2.2cqw; width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--green); }
    .sp-room-ico { width: 3.6cqw; height: 3.6cqw; display: grid; place-items: center; border-radius: 3px; background: rgba(0,0,0,.45); color: var(--green); }
    .sp-room-ico svg { width: 2cqw; height: auto; }
    .sp-room strong { margin-top: auto; font-size: 1.75cqw; font-weight: 600; line-height: 1.3; color: var(--white); }
    .sp-room > span:last-child { margin-top: .4cqw; font-size: 1.4cqw; color: rgba(255,255,255,.75); }
    .sp-panel-dial {
        position: relative; flex: 0 0 34.9cqw; height: 34.8cqw; padding: 1.5cqw; border-radius: 4px; background: #0d0d0d;
        display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    }
    /* Dial: green ring with a thin outer ring and an inner glow */
    .sp-dial {
        width: 17cqw; aspect-ratio: 1; margin-bottom: 2.4cqw; border-radius: 50%; border: 2px solid var(--green);
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        box-shadow: 0 0 0 .9cqw #0d0d0d, 0 0 0 calc(.9cqw + 1px) rgba(45,226,127,.6), inset 0 0 2cqw rgba(45,226,127,.35);
    }
    .sp-dial strong { font-size: 3.6cqw; font-weight: 700; line-height: 1; color: var(--white); }
    .sp-dial span { margin-top: .5cqw; font-size: 1.35cqw; line-height: 1.3; color: #9ca3af; }
    .sp-panel-dial > strong { font-size: 1.75cqw; font-weight: 600; color: var(--white); }
    .sp-panel-dial > span { max-width: 24cqw; margin-top: .4cqw; font-size: 1.4cqw; line-height: 1.4; color: var(--green); }
    .sp-cap-card.active .sp-cap-link svg { display: none; }
    /* Arrows 25px inside the frame, over the lower part of the side photos (60px padding + 41px offset + 185px);
       previous is white, next is green, as in the design */
    .sp-cap .hl-arrow { position: absolute; top: 298px; translate:0px -50%; z-index: 2; }
    /* arrows sit inside a centred 1280px column; on narrower screens they keep the 25px edge gap */
    .sp-cap-prev { left: max(50px, calc(50% - 614px)); background: var(--white); }
    .sp-cap-next { right: max(50px, calc(50% - 614px)); }
    .sp-cap .hl-arrow:disabled { opacity: .45; }
    @media (prefers-reduced-motion: reduce) { .sp-cap-track, .sp-cap-img, .sp-cap-card { transition: none; } }

    /* Framework section: wave along the bottom edge (design), behind the content */
    .sp-framework { position: relative; overflow: hidden; }
    .sp-framework .hl-frame { position: relative; z-index: 1; padding-block: 66px 120px; } /* design: less above, room below for the wave */
    .sp-framework-wave { position: absolute; left: 0; bottom: 28px; width: 100%; height: 61px; opacity: .55; pointer-events: none; transform: scaleY(-1); }
    .sp-framework-wave path { stroke: #166534; stroke-width: 4px; } /* flipped vertically, as in the design */
    .sp-framework .hl-process p { max-width: 340px;    color: rgba(255, 255, 255, .65); } /* design: step text wraps at ~340px, so Commission takes two lines like the others */
    /* Framework steps reuse .hl-process; titles are h4 here */
    .hl-process h4 { margin-bottom: 4px; }

    /* HVTechnical partners: five white logo tiles */
    .sp-partners { display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); gap: 10px; margin-top: 40px; }
    .sp-partners .hl-logo { border-radius: 3px; }

    /* ================= Sectors page (sectors/index.php) ================= */
    /* Hero: text left, photo collage right running to the frame edge (design: 646 x 604 white card, 15px padding, 10px gaps) */
    .sec-hero .hl-frame { padding-block: 56px 0; } /* photos end flush with the hero's bottom edge (design) */
    .sec-hero-wave { position: absolute; left: 0; bottom: 40px; width: 100%; height: 120px; pointer-events: none; }
    .hl .sec-hero h1 { max-width: 500px; font-weight: 400; letter-spacing: -1px; }
    .sec-hero h4 { max-width: 470px; margin: 20px 0 28px; font-weight: 400; color: var(--mid-grey); }
    /* "SECTORS" tag: a pale green chip (design) */
    .sec-hero .hl-label { display: inline-block; margin-bottom: 18px; padding: 4px 10px;border-radius: 5px;background: rgba(255, 255, 255, 0.41); }

    /* Photo deck (design): three cards, bottom-aligned; each one behind is shorter and shifted right, so only a strip of it shows.
       Sizes are shares of the deck: card 1 is 69.4% wide and full height, card 2 60.4% x 87%, card 3 54.7% x 79%. */
    .sec-deck { position: relative; aspect-ratio: 386 / 391; }
    .sec-deck-card {
        position: absolute; bottom: 0; border-radius: 4px 4px 0 0; background: linear-gradient(160deg, #262b29, #070908) center / cover;
        box-shadow: 0 10px 30px rgba(10,13,20,.18);
        opacity: 0; animation: sec-deck-in .9s cubic-bezier(.2,.7,.2,1) calc(.15s + var(--i, 0) * .15s) forwards;
    }
    /* Design: the front card is a full portrait photo; the two behind are just the narrow strips that show (each a window onto the
       left part of its photo), the third washed grey with a green arrow button. Card 1 is 69.1% wide; card 2 ends at 88.7%, card 3 at 100%. */
    .sec-deck-card:nth-child(1) { left: 0;      width: 69.1%; height: 100%; z-index: 3; background-position: center; }
    .sec-deck-card:nth-child(2) { left: 68%;    width: 20.7%; height: 87%;  z-index: 2; background-position: 22% center; }
    .sec-deck-card:nth-child(3) { left: 88.7%;  width: 11.3%; height: 79%;  z-index: 1; background-size: auto 135%; background-position: 10.5% 38%; }
    .sec-deck-card:nth-child(3)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255,255,255,.5); } /* grey wash */
    .sec-deck-card:nth-child(3)::after { /* green arrow button on the card's right edge */
        content: "\2192"; position: absolute; right: 0; top: 43%; display: grid; place-items: center; width: 44px; height: 44px;
        border-radius: 4px; background: var(--green); font-size: 18px; font-weight: 700; line-height: 1; color: var(--black);
     display:none;}
    @keyframes sec-deck-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) { .sec-deck-card { opacity: 1; animation: none; } }
    .sec-collage {
        display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 278px 283px; gap: 10px;
        margin-right: -30px; padding: 15px; border-radius: 4px; background: var(--white); box-shadow: 0 10px 40px rgba(10,13,20,.08);
    }
    .sec-collage-img {
        position: relative; overflow: hidden; grid-column: span 2; border-radius: 3px; background: #111;
        opacity: 0; animation: sec-collage-in .9s cubic-bezier(.2,.7,.2,1) calc(.15s + var(--i, 0) * .12s) forwards;
    }
    .sec-collage-img:nth-child(-n+2) { grid-column: span 3; }
    /* Photo layer: slow zoom in/out (offset per photo), a little more on hover (scale + transform compose) */
    .sec-collage-photo {
        position: absolute; inset: 0; background: linear-gradient(160deg, #262b29, #070908) center / cover;
        animation: sec-collage-zoom 12s ease-in-out calc(var(--i, 0) * -2.4s) infinite alternate;
        transition: transform .7s cubic-bezier(.2,.7,.2,1);
    }
    .sec-collage-img:hover .sec-collage-photo { transform: scale(1.06); }
    @keyframes sec-collage-in { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
    @keyframes sec-collage-zoom { from { scale: 1; } to { scale: 1.08; } }
    @media (prefers-reduced-motion: reduce) {
        .sec-collage-img { opacity: 1; animation: none; }
        .sec-collage-photo { animation: none; transition: none; }
        .sec-collage-img:hover .sec-collage-photo { transform: none; }
    }

    /* Sectors we serve: reuses the home sector cards (.hl-tile.hl-sector) in a 3-column grid; the last card is wide */
    .sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
    .sec-grid .hl-sector { width: auto; max-width: none; height: 533px; scroll-margin-top: 100px; } /* footer #anchors land below the header */
    .sec-grid .sec-wide { grid-column: span 2; }

    /* Why developers choose HiiLIFE (design: 283px cards, 11px gaps, right column dropped 102px, right-aligned in the frame) */
    .sec-why { overflow: hidden; }
    .sec-why .hl-frame { position: relative; }
    .hl .sec-why h3 { max-width: 420px; }
    /* Wave lines (inline SVG, stretched to the section) + green glow behind the cards */
    .sec-why-waves { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
    /* Dot on the bottom wave, at the path point (760, 592) of the 1440 x 725 viewBox */
    .sec-why-dot { position: absolute; left: 52.78%; top: 81.66%; width: 13px; height: 13px; translate: -50% -50%; border-radius: 50%; background: #2a7a4b; pointer-events: none; }
    .sec-why::before {
        content: ""; position: absolute; left: 67%; top: 62%; width: 640px; height: 520px; translate: -50% -50%;
        background: radial-gradient(closest-side, rgba(45,226,127,.32), rgba(45,226,127,.08) 60%, transparent); pointer-events: none;
    }
    .sec-reasons { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 283px)); justify-content: end; gap: 11px; align-items: start; }
    .sec-reasons-col { display: flex; flex-direction: column; gap: 11px; }
    .sec-reasons-col:last-child { margin-top: 102px; }
    .sec-reason {
        position: relative; overflow: hidden; min-height: 236px; padding: 30px 20px 26px; border-radius: 4px; background: var(--white);
        transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
    }
    /* Hover: card lifts with a shadow + thin green outline, a green line grows along the bottom (number badge stays still) */
    .sec-reason::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--green);
        transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1);
    }
    .sec-reason:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(45,226,127,.6), 0 18px 40px rgba(0,0,0,.35); }
    .sec-reason:hover::after { transform: scaleX(1); }
    .sec-num {
        display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 24px;
        border-radius: 50%; background: var(--green); color: var(--black); font-size: 16px; font-weight: 600;
    }
    @media (prefers-reduced-motion: reduce) {
        .sec-reason, .sec-reason::after { transition: none; }
        .sec-reason:hover { transform: none; }
    }
    .hl .sec-reason h4 { margin-bottom: 8px; line-height: 1.2; color: var(--black); }
    .hl .sec-reason p { margin: 0; color: var(--mid-grey); }

    /* Home solution cards: 10px gap between cards (overrides Bootstrap's g-2 = 8px; the sheet loads after Bootstrap) */
    .hl-sol-cards { --bs-gutter-x: 10px; --bs-gutter-y: 10px; }

    /* ================= 404 page (404.php) ================= */
    .nf-section { overflow: hidden; }
    .nf-section .hl-frame { position: relative; z-index: 1; padding-block: 90px; }
    .nf-code { margin: 6px 0 4px; font-size: clamp(90px, 14vw, 200px); line-height: 1; font-weight: 700; letter-spacing: -.04em; color: var(--green); opacity: .9; }
    .hl .nf-section h1 { color: var(--white); }
    .hl .nf-text { max-width: 560px; margin: 16px auto 32px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.8); }
    .nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 48px; }
    .nf-links a { display: inline-flex; align-items: center;  gap: 10px; font-size: 14px; font-weight: 500; color: var(--green); text-decoration: none; transition: color .2s; }
    .nf-links a:hover { color: var(--white); }

    /* ================= Main Contractors (sectors/main-contractors/) ================= */
    /* Hero: two photos side by side, dark copy card over the left one */
    .tc-hero { position: relative; padding: 0; background: var(--white); }
    .tc-hero-imgs { position: absolute; inset: 0; display: grid; grid-template-columns: 60fr 40fr; gap: 4px; } /* hero-left 60%, hero-right 40% */
    .tc-hero-imgs span { background: linear-gradient(160deg, #262b29, #070908) center / cover; }
    /* Card is solid black, 70px below the top and flush with the bottom edge of the photos */
    .tc-hero .hl-frame { position: relative; display: flex; align-items: stretch; padding: 70px 0 0; } /* 46vw keeps each photo ~1.08:1 as in the design, so the crop doesn't zoom on wide screens */
    .tc-hero-card { width: 100%; max-width: 640px; padding: 46px 30px 60px; border-radius: 4px 4px 0 0; background: #000; color: var(--white); }
    .tc-hero-card .sd-tag { padding: 0; border: 0; margin-bottom: 22px; color: var(--green); letter-spacing: .25em; }
    .hl .tc-hero-card h1 { margin: 0 0 28px; font-size: clamp(24px, 2.25vw, 32px); line-height: 1.3; font-weight: 400; letter-spacing: 0; color: var(--white); }
    .hl .tc-hero-card p { margin: 0 0 36px; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.9); }
    .tc-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
    .tc-hero-link { display: inline-flex; align-items: center;  gap: 10px; font-size: 13px; font-weight: 500; color: var(--green); text-decoration: none; }
    .tc-hero-link:hover { color: var(--white); }

    /* Problem: copy left, "traditional way" diagram right */
    .tc-problem { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
    .tc-problem-copy h3 { margin: 8px 0 24px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; font-weight: 700; }
    .hl .tc-problem-copy p { margin: 0 0 20px; font-size: 12px; line-height: 1.65; color: var(--mid-grey); }
    .hl .tc-problem-copy p.tc-until { margin: 36px 0 0; font-weight: 600; color: var(--mid-grey); }
    .tc-callout { margin-top: 24px; padding: 18px 20px; border: 1px solid var(--green); border-radius: 4px; background: #d6f3e3; font-size: 12px; font-weight: 600; line-height: 1.6; color: #0b5b32; }
    /* "Traditional way" diagram: card, four green-outlined boxes, mark-up row, main contractor.
       Connector lines are CSS: .tc-link-down (boxes to mark-ups) and .tc-link-in (mark-ups to the circle). */
    .tc-way { padding: 28px 18px 30px; border-radius: 4px; background: var(--white); }
    .tc-way-title { margin: 0 0 4px 0; padding: 0 0 0 4px; font-size: 14px; line-height: 1.4; font-weight: 600; }
    .hl .tc-way-sub { margin: 0 0 24px; padding-left: 4px; font-size: 11px; line-height: 1.4; color: var(--mid-grey); }
    .tc-way-boxes { display: grid; grid-template-columns: repeat(4, 1fr);  gap: 10px; text-align: center; }
    .tc-way-box { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 4px 12px; border: 1px solid var(--green); border-radius: 4px; font-size: 11px; font-weight: 700; color: var(--black); }
    .tc-way-ico { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--green); border-radius: 4px; background: rgba(45,226,127,.1); color: var(--green); }
    .tc-way-ico svg, .tc-way-ico img { width: 14px; height: 14px; }
    .tc-link-down, .tc-link-in { position: relative; display: block; }
    .tc-link-down { height: 34px; }
    .tc-link-down i { position: absolute; top: 0; width: 1px; height: 17px; background: var(--green); }
    .tc-link-down i:nth-of-type(1) { left: 12.5%; } .tc-link-down i:nth-of-type(2) { left: 37.5%; }
    .tc-link-down i:nth-of-type(3) { left: 62.5%; } .tc-link-down i:nth-of-type(4) { left: 87.5%; }
    .tc-link-down b { position: absolute; top: 17px; left: 12.5%; right: 12.5%; height: 1px; background: var(--green); }
    .tc-link-down s { position: absolute; top: 17px; width: 1px; height: 17px; background: var(--green); text-decoration: none; }
    .tc-link-down s:nth-of-type(1) { left: 16.67%; } .tc-link-down s:nth-of-type(2) { left: 50%; } .tc-link-down s:nth-of-type(3) { left: 83.33%; }
    .tc-link-down s::after, .tc-link-in i:nth-of-type(2)::after { content: ""; position: absolute; bottom: -1px; left: -3px; border: 3.5px solid transparent; border-top: 5px solid var(--green); border-bottom: 0; }
    .tc-way-mark { display: grid; grid-template-columns: repeat(3, 1fr);  gap: 10px; text-align: center; }
    .tc-way-mark span { padding: 9px 4px; border-radius: 2px; background: #f1f2f5; font-size: 10px; font-weight: 500; color: #444b57; }
    .tc-link-in { height: 66px; }
    .tc-link-in i { position: absolute; background: var(--green); }
    .tc-link-in i:nth-of-type(1) { left: 16.67%; top: 0; width: 1px; height: 52px; }   /* left mark-up down, then across to the circle */
    .tc-link-in i:nth-of-type(3) { left: 83.33%; top: 0; width: 1px; height: 52px; }   /* right mark-up down, then across to the circle */
    .tc-link-in i:nth-of-type(2) { left: 50%; top: 0; width: 1px; height: 58px; }      /* middle straight down into the circle */
    .tc-link-in::before, .tc-link-in::after { content: ""; position: absolute; top: 52px; height: 1px; background: var(--green); }
    .tc-link-in::before { left: 16.67%; width: calc(33.33% - 44px); }
    .tc-link-in::after  { right: 16.67%; width: calc(33.33% - 44px); }
    .tc-link-in i:nth-of-type(2)::after { left: -3px; bottom: -1px; }
    .tc-way-main { margin-top: -30px; text-align: center; }
    .tc-way-main-icon { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(45,226,127,.22); color: var(--black); }
    .tc-way-main-icon svg, .tc-way-main-icon img { width: 24px; height: 24px; }
    .tc-way-main strong { display: block; font-size: 14px; line-height: 1.3; }
    .tc-way-main span { font-size: 11px; color: var(--mid-grey); }

    /* Diagram animation (site.js adds .anim, then .in when it scrolls into view):
       boxes rise in, lines draw down, mark-ups fade in, lines draw to the circle, circle pops and pulses. */
    .tc-way.anim .tc-way-box { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
    .tc-way.anim .tc-link-down i, .tc-way.anim .tc-link-down s, .tc-way.anim .tc-link-in i { transform: scaleY(0); transform-origin: top; transition: transform .45s ease; }
    .tc-way.anim .tc-link-down b { transform: scaleX(0); transform-origin: center; transition: transform .5s ease; }
    .tc-way.anim .tc-way-mark span { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
    .tc-way.anim .tc-link-in::before { transform: scaleX(0); transform-origin: left; transition: transform .5s ease; }
    .tc-way.anim .tc-link-in::after { transform: scaleX(0); transform-origin: right; transition: transform .5s ease; }
    .tc-way.anim .tc-way-main-icon { opacity: 0; transform: scale(.5); transition: opacity .4s ease, transform .5s cubic-bezier(.3,1.5,.5,1); }
    .tc-way.anim .tc-way-main strong, .tc-way.anim .tc-way-main > span:last-child { opacity: 0; transition: opacity .5s ease; }

    .tc-way.anim.in .tc-way-box { opacity: 1; transform: none; }
    .tc-way.anim.in .tc-way-box:nth-child(2) { transition-delay: .12s; }
    .tc-way.anim.in .tc-way-box:nth-child(3) { transition-delay: .24s; }
    .tc-way.anim.in .tc-way-box:nth-child(4) { transition-delay: .36s; }
    .tc-way.anim.in .tc-link-down i { transform: none; transition-delay: .7s; }
    .tc-way.anim.in .tc-link-down b { transform: none; transition-delay: 1.1s; }
    .tc-way.anim.in .tc-link-down s { transform: none; transition-delay: 1.5s; }
    .tc-way.anim.in .tc-way-mark span { opacity: 1; transform: none; transition-delay: 1.8s; }
    .tc-way.anim.in .tc-way-mark span:nth-child(2) { transition-delay: 1.95s; }
    .tc-way.anim.in .tc-way-mark span:nth-child(3) { transition-delay: 2.1s; }
    .tc-way.anim.in .tc-link-in i { transform: none; transition-delay: 2.4s; }
    .tc-way.anim.in .tc-link-in::before, .tc-way.anim.in .tc-link-in::after { transform: none; transition-delay: 2.85s; }
    .tc-way.anim.in .tc-way-main-icon { opacity: 1; transform: none; transition-delay: 3.3s; animation: tc-pulse 2.4s ease-in-out 4s infinite; }
    .tc-way.anim.in .tc-way-main strong, .tc-way.anim.in .tc-way-main > span:last-child { opacity: 1; transition-delay: 3.7s; }
    @keyframes tc-pulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(45,226,127,.22); } 50% { box-shadow: 0 0 0 11px rgba(45,226,127,.06); } }
    @media (prefers-reduced-motion: reduce) {
        .tc-way.anim *, .tc-way.anim *::before, .tc-way.anim *::after { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
    }

    /* Clients */
    .tc-clients { text-align: center; }
    .tc-clients .hl-logos { margin-top: 28px; }

    /* Workflow: four white step cards, staggered */
    .tc-flow { overflow: hidden; }
    .tc-flow .hl-frame { position: relative; z-index: 1; padding-bottom: 170px; }
    .tc-flow .hl-label { letter-spacing: .25em; }
    .tc-flow-waves { position: absolute; left: 0; bottom: 0; width: 100%; height: 230px; pointer-events: none; }
    .tc-flow-dot { position: absolute; left: 50.4%; bottom: 62px; width: 12px; height: 12px; border-radius: 50%; background: #2c7a53; pointer-events: none; }
    .tc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: start; max-width: 1130px; margin: 56px auto 0; }
    .tc-step { padding: 24px 24px 30px; border-radius: 4px; background: var(--white); color: var(--black); }
    .tc-step:nth-child(1) { margin-top: 105px; }
    .tc-step:nth-child(2) { margin-top: 0; }
    .tc-step:nth-child(3) { margin-top: 43px; }
    .tc-step:nth-child(4) { margin-top: 85px; }
    .tc-step-num { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 22px; border-radius: 50%; background: var(--green); font-size: 16px; font-weight: 600; color: var(--black); }
    .hl .tc-step h4 { margin: 0 0 10px; font-size: 20px; line-height: 1.25; font-weight: 600; color: var(--black); }
    .hl .tc-step p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--mid-grey); }

    /* Margin-protected animation (site.js adds .anim, then .in on scroll): photo eases in, rows slide in from the right one by one, icons pop */
    .tc-margin.anim .tc-margin-img { opacity: 0; transform: scale(.96); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
    .tc-margin.anim .tc-points li { opacity: 0; transform: translateX(40px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1), border-color .3s ease, background .3s ease; }
    .tc-margin.anim .tc-points img { transform: scale(.4); transition: transform .5s cubic-bezier(.3,1.5,.5,1); }
    .tc-margin.anim.in .tc-margin-img { opacity: 1; transform: none; }
    .tc-margin.anim.in .tc-points li, .tc-margin.anim.in .tc-points img { opacity: 1; transform: none; }
    .tc-margin.anim.in .tc-points li:nth-child(1) { transition-delay: .3s; } .tc-margin.anim.in .tc-points li:nth-child(1) img { transition-delay: .6s; }
    .tc-margin.anim.in .tc-points li:nth-child(2) { transition-delay: .55s; } .tc-margin.anim.in .tc-points li:nth-child(2) img { transition-delay: .85s; }
    .tc-margin.anim.in .tc-points li:nth-child(3) { transition-delay: .8s; } .tc-margin.anim.in .tc-points li:nth-child(3) img { transition-delay: 1.1s; }
    .tc-margin.anim.in .tc-points li:nth-child(4) { transition-delay: 1.05s; } .tc-margin.anim.in .tc-points li:nth-child(4) img { transition-delay: 1.35s; }
    .tc-margin.anim.in .tc-points li:nth-child(5) { transition-delay: 1.3s; } .tc-margin.anim.in .tc-points li:nth-child(5) img { transition-delay: 1.6s; }
    .tc-points li:hover { border-color: var(--green); background: #f3fbf6; }
    .tc-margin.anim.in .tc-points li:hover { transition-delay: 0s; } /* no entrance delay on hover */
    @media (prefers-reduced-motion: reduce) { .tc-margin.anim .tc-margin-img, .tc-margin.anim .tc-points li, .tc-margin.anim .tc-points img { opacity: 1 !important; transform: none !important; transition: none !important; } }

    /* Client logos animation (site.js adds .anim, then .in on scroll): fade up one by one, gentle lift on hover */
    .tc-logos.anim > div { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
    .tc-logos.anim.in > div { opacity: 1; transform: none; }
    .tc-logos.anim.in > div:nth-child(2) { transition-delay: .15s; }
    .tc-logos.anim.in > div:nth-child(3) { transition-delay: .3s; }
    .tc-logos.anim.in > div:nth-child(4) { transition-delay: .45s; }
    .tc-logos .hl-logo { transition: transform .3s ease, box-shadow .3s ease; }
    .tc-logos .hl-logo:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(10,13,20,.08); }
    @media (prefers-reduced-motion: reduce) { .tc-logos.anim > div, .tc-logos .hl-logo { opacity: 1 !important; transform: none !important; transition: none !important; } }

    /* Workflow animation (site.js adds .anim, then .in on scroll): cards rise one by one, numbers pop, waves and dot fade in after */
    .tc-steps.anim .tc-step { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
    .tc-steps.anim .tc-step-num { transform: scale(.4); opacity: 0; transition: transform .5s cubic-bezier(.3,1.5,.5,1), opacity .3s ease; }
    .tc-steps.anim.in .tc-step { opacity: 1; transform: none; }
    .tc-steps.anim.in .tc-step-num { transform: none; opacity: 1; }
    .tc-steps.anim.in .tc-step:nth-child(1) { transition-delay: 0s; }
    .tc-steps.anim.in .tc-step:nth-child(2) { transition-delay: .45s; }
    .tc-steps.anim.in .tc-step:nth-child(3) { transition-delay: .9s; }
    .tc-steps.anim.in .tc-step:nth-child(4) { transition-delay: 1.35s; }
    .tc-steps.anim.in .tc-step:nth-child(1) .tc-step-num { transition-delay: .4s; }
    .tc-steps.anim.in .tc-step:nth-child(2) .tc-step-num { transition-delay: .85s; }
    .tc-steps.anim.in .tc-step:nth-child(3) .tc-step-num { transition-delay: 1.3s; }
    .tc-steps.anim.in .tc-step:nth-child(4) .tc-step-num { transition-delay: 1.75s; }
    .tc-flow-waves { transition: opacity 1.6s ease .3s; }
    .tc-flow-dot { transition: opacity .6s ease 2s, transform .6s cubic-bezier(.3,1.5,.5,1) 2s; }
    .tc-flow:has(.tc-steps.anim:not(.in)) .tc-flow-waves { opacity: 0; }
    .tc-flow:has(.tc-steps.anim:not(.in)) .tc-flow-dot { opacity: 0; transform: scale(.3); }
    @media (prefers-reduced-motion: reduce) {
        .tc-steps.anim .tc-step, .tc-steps.anim .tc-step-num, .tc-flow-waves, .tc-flow-dot { opacity: 1 !important; transform: none !important; transition: none !important; }
    }

    /* Where your margin is protected: photo left, icon rows right */
    .tc-margin { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
    .tc-margin-img { display: block; aspect-ratio: 560 / 430; border-radius: 4px; background: linear-gradient(160deg, #262b29, #070908) center / cover; }
    .tc-margin h3 { margin: 0 0 24px; font-size: clamp(22px, 2vw, 28px); }
    .tc-points { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
    .tc-points li { display: flex; align-items: center; gap: 16px; padding:5px 10px; border: 1px solid var(--light-grey); border-radius: 4px; background: #fafbfc; font-size: 16px; line-height: 1.45; color: var(--mid-grey); }
    .tc-points img { flex: none; width:64px; height:64px; }

    /* Cost breakdown cards */
    .tc-costs-title { margin: 0 0 32px; text-align: center; }
    .tc-costs { display: grid; grid-template-columns: repeat(3, 1fr);  gap: 10px; }
    .tc-cost { overflow: hidden; border-radius: 4px; background: var(--white); }
    .tc-cost-img { display: block; aspect-ratio: 400 / 207; background: linear-gradient(160deg, #262b29, #070908) center / cover; }
    .tc-cost-body { padding: 18px 20px 22px; }
    .hl .tc-cost-body h4 { margin: 8px 0 8px; font-size: 15px; line-height: 1.3; }
    .hl .tc-cost-body p { margin: 0 0 14px; font-size: 12px; line-height: 1.5; color: var(--mid-grey); }

    /* ================= Sector detail pages (sectors/pbsa.php) ================= */
    /* Small outlined tag ("PBSA", "BTR") */
    .sd-tag {
        display: inline-block; margin-bottom: 16px; padding: 3px 8px; border: 1px solid rgba(255,255,255,.35); border-radius: 4px;
        font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--white);
    }
   .sd-hero .sd-tag{background: rgba(0, 0, 0, 0.41);border-color:rgba(0, 0, 0, 0.41) ;}
    /* Hero: dark green with wave lines; the photo's lower 238px sits on white (design) */
    .sd-hero { background: linear-gradient(to bottom, var(--green-dark) calc(100% - 238px), var(--soft) 0); --frame: #F4F6F9; }
    .sd-hero .hl-frame { padding-bottom: 0; }
    .sd-hero-waves { position: absolute; left: 0; top: 0; width: 100%; height: 600px; pointer-events: none; }
    .hl .sd-hero h1 { max-width: 1180px; font-weight: 400; letter-spacing: -1px; color: var(--white); }
    .sd-hero h4 { max-width: 1000px; margin: 20px 0 28px; font-weight: 400; color: rgba(255,255,255,.8); }
    .hl .sd-hero .sd-hero-lead { max-width: 1000px; margin: 20px 0 28px; font-weight: 400; color: rgba(255,255,255,.8); } /* PBSA hero intro is a <p>, same look as the h4 */
    .sd-hero-img { position: relative; min-height: 240px; margin-top: 48px; border-radius: 4px; overflow: hidden; background: linear-gradient(160deg, #262b29, #070908); } /* the <img class="img-fluid w-100"> sets the height; the gradient shows until a photo exists */
    .sd-hero-img > img { display: block; }
    .sd-hero-cap {
        position: absolute; right: 20px; bottom: 20px; max-width: 360px; padding: 14px 18px;border-radius: 5px;
background: rgba(0, 0, 0, 0.80);        font-size: 14px; font-weight: 600; color: var(--white);
    }
    .sd-hero-cap .sd-tag {padding:0px; display: block; width: max-content; margin-bottom: 8px; }

    /* Team: text over the first two columns; photos staggered (top row: columns 3-4, next row: columns 2-3) */
    .sd-team { display: grid; grid-template-columns: 1fr repeat(3, minmax(0, 281px)); gap: 30px 15px; }
    .sd-team-intro { grid-column: 1 / 3; grid-row: 1; max-width: 520px; }
    .sd-team-intro p { color: var(--mid-grey); }
    .sd-person { margin: 0; }
    .sd-person:nth-of-type(1) { grid-column: 3; grid-row: 1; }
    .sd-person:nth-of-type(2) { grid-column: 4; grid-row: 1; }
    .sd-person:nth-of-type(3) { grid-column: 2; grid-row: 2; }
    .sd-person:nth-of-type(4) { grid-column: 3; grid-row: 2; }
    /* Photo; initials show on the gradient until the photo file is added */
    .sd-person-img {
        position: relative; display: grid; place-items: center; aspect-ratio: 281 / 274; border-radius: 3px;
        background: linear-gradient(160deg, #3a4a43, #0F2821) center / cover;
    }
    .sd-person-img:not([style*="url"])::after { content: attr(data-initials); font-size: 40px; font-weight: 700; color: rgba(255,255,255,.35); }
    .sd-person figcaption { display: flex; flex-direction: column; margin-top: 12px; }
    .sd-person strong { font-size: 15px; font-weight: 600; color: var(--black); }
    .sd-person figcaption span { font-size: 12px; color: var(--mid-grey); }

    /* Technical expertise: centred title + four image cards */
    .sd-center-title {  margin: 0 auto 40px; }
    .sd-expertise { display: grid; grid-template-columns: repeat(4, 1fr);  gap: 10px; text-align: left; }
    .sd-exp-card { overflow: hidden; border-radius: 4px; background: var(--white); }
    .sd-exp-img { display: block; aspect-ratio: 290 / 200; background: linear-gradient(160deg, #262b29, #070908) center / cover; }
    .sd-exp-body { padding: 20px 20px 24px; }
    .hl .sd-exp-body p { margin: 0;    color: var(--mid-grey);  }
    .hl .sd-exp-body p + p { margin-top: 14px; }
 .sd-exp-img.sdExp{ aspect-ratio:initial}
    /* Hotels (four cards): photos come in 600x311 and 446x311, so give them all the 446x311 frame, cropped to fill */
    .sd-expertise-4 .sd-exp-img.sdExp { aspect-ratio: 446 / 311; }
    .sd-expertise-4 .sd-exp-img.sdExp img { width: 100%; height: 100%; object-fit: cover; }
    .sd-expertise-3 { grid-template-columns: repeat(3, 1fr); }

    /* Aftercare banner: centred copy on a dark green glow */
    .sd-aftercare-wrap .hl-frame { padding-block: 40px; }
    /* Aftercare banner (design): green glow bottom-left melting into near-black, soft glow top-right, a wave line and two dots */
    .sd-aftercare { position: relative; overflow: hidden; isolation: isolate; padding:80px 40px; border-radius: 0; text-align: center; color: var(--white);
        background:
            radial-gradient(45% 110% at 12% 105%, #1f7a4c 0%, rgba(31,122,76,.75) 40%, rgba(31,122,76,0) 100%),
            radial-gradient(22% 90% at 98% 0%, rgba(31,110,70,.6) 0%, rgba(31,110,70,0) 100%),
            radial-gradient(18% 80% at 38% 0%, rgba(31,110,70,.35) 0%, rgba(31,110,70,0) 100%),
            linear-gradient(90deg, #15563a 0%, #17543a 30%, #0c1c18 62%, #0b0f14 100%);
        background-size: 150% 100%; background-position: 0% 0; animation: sd-glow-drift 9s ease-in-out infinite alternate; }
    @keyframes sd-glow-drift { to { background-position: 100% 0; } }
    @keyframes sd-dot-float { to { transform: translateY(-14px); } }
    .sd-aftercare::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 150px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 150' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0 25C100 48 200 55 330 45S470 20 560 22S760 85 860 90S1150 65 1280 48' stroke='%232DE27F' stroke-opacity='.4' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
    .sd-aftercare::after { content: ""; position: absolute; z-index: -1; left: 56%; top: 66%; width: 16px; height: 16px; border-radius: 50%; background: #1f6b46;
        box-shadow: 280px 120px 0 -2px #1f6b46; animation: sd-dot-float 4s ease-in-out infinite alternate; }
    @media (prefers-reduced-motion: reduce) { .sd-aftercare, .sd-aftercare::after { animation: none; } }
    .hl .sd-aftercare .hl-label { display: inline-block; margin-bottom: 14px; padding: 3px 10px; border-radius: 2px; background: rgba(45,226,127,.14); font-size: 11px; letter-spacing: .25em; }
    .hl .sd-aftercare h3 { max-width: 1000px; margin: 8px auto 20px; color: var(--white); }
    .hl .sd-aftercare p { max-width: 1040px; margin: 0 auto 16px; font-size: 14px; color: rgba(255,255,255,.9); }
    /* Image + text rows (photos run to the frame edge, rows touch) */
    .sd-row-img { display: block; aspect-ratio: 600 / 575; border-radius: 4px; background: linear-gradient(160deg, #262b29, #070908) center / cover; }
    .sd-row-text { max-width: 560px; padding: 30px 0 30px 40px; }
    .sd-row.flex-row-reverse .sd-row-text { padding: 30px 40px 30px 0; }
    .sd-row-text p { color: var(--mid-grey); }
.sd-row-img.sdExp{aspect-ratio:inherit; border-radius:5px; overflow: hidden;}
    /* Solution families slider: no green border on the open / hovered card (the id outranks the .hl-sector:hover / .is-open rules) */
    #sd-families .hl-sector { border-color: transparent; }
    /* FAQ: <details> cards, chevron turns when open */
    .sd-faq { display: flex; flex-direction: column; gap: 12px; }
    .sd-faq details { border: 1px solid var(--light-grey); border-radius: 4px; background: #fafbfc; }
    .sd-faq summary {
        display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px;
        font-size: 14px; font-weight: 600; color: var(--black); list-style: none; cursor: pointer;
    }
    .sd-faq summary::-webkit-details-marker { display: none; }
    .sd-faq summary svg { flex: none; transition: transform .3s ease; }
    .sd-faq details[open] summary svg { transform: rotate(180deg); }
    .hl .sd-faq details p { margin: -8px 24px 22px; color: var(--mid-grey); }

    /* ================= Contact page (contact.php) ================= */
    /* Hero: dark green with wave lines; the form card sits flush on its bottom edge, its white running into the map below */
    .ct-hero { background: var(--green-dark); --frame: rgba(45,226,127,.18); }
    .ct-hero .hl-frame { padding-bottom: 0; }
    .ct-hero-waves { position: absolute; left: 0; bottom: 0; width: 100%; height: 300px; pointer-events: none; }
    .ct-tag {
        display: inline-block; margin-bottom: 30px; padding: 6px 10px; border-radius: 3px; background: #000;
        font-size: 13px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--white);
    }
    .hl .ct-hero h1 {font-weight: 400; letter-spacing: -.5px; color: var(--white); }
    .hl .ct-hero .ct-intro p { max-width: 440px; margin: 20px 0 0; color: rgba(255,255,255,.85); }
    .ct-hq { margin-top: 70px; padding-bottom: 60px; }
    .hl .ct-hq h4 { margin-bottom: 20px; color: var(--white); }
    .ct-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
    .ct-list li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--white); }
    .ct-list svg { flex: none; color: var(--green); }
    .ct-list a { color: var(--white); font-weight: 600; text-decoration: none; transition: color .2s; }
    .ct-list a:hover { color: var(--green); }
    .ct-hero .hl-form { padding: 30px 40px 34px; border-radius: 4px 4px 0 0; }
    .hl .ct-hero .hl-form h4 { margin-bottom: 20px; color: var(--black); }
    .ct-hero .hl-form input.form-control, .ct-hero .hl-form .form-select { height: 46px; }
    /* Map */
    .ct-map { display: block; width: 100%; height: 440px; border: 0; border-radius: 4px; background: var(--light-grey); }
    /* Offices (design): two maps side by side, the office name and a green-pinned address under each */
    .ct-london { display: grid; grid-template-columns: 396fr 635fr; align-items: center; } /* text 38% | map 62% (design) */
    .ct-london .ct-map { height: 368px; border-radius: 0; }
    .hl .ct-london h4 { margin: 0 0 20px; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--black); }
    .ct-london ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
    .ct-london li { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--black); }
    .ct-london li svg { flex: none; color: var(--green); }
    .ct-london li a { color: inherit; text-decoration: none; font-weight: 500; }
    @media (max-width: 767.98px) { .ct-london { grid-template-columns: 1fr; gap: 24px; } .ct-london .ct-map { height: 300px; } }
    .ct-offices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .ct-office .ct-map { height: 368px; border-radius: 0; }
    .hl .ct-office h4 { margin:10px 0 5px; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--black); }
    .hl .ct-office p { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--black); }
    .ct-office p svg { flex: none; color: var(--green); }
    @media (max-width: 767.98px) { .ct-offices { grid-template-columns: 1fr; gap: 40px; } .ct-office .ct-map { height: 300px; } .ct-offices-frame { padding-bottom: 64px; } }
    /* Testimonials: two cards side by side, Trustpilot line under them */
    .ct-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .ct-quotes .hl-quote { width: auto; }
    .ct-rated { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 40px; font-size: 14px; color: var(--mid-grey); }
    .ct-rated .hl-stars { margin: 0; }
    .ct-rated a { font-weight: 600; color: var(--green); text-decoration: none; }

    /* ================= About page (about/index.php) ================= */
    /* Hero: centred intro on dark green, full-width photo under it; the black mission box overlaps the photo's foot */
    .ab-hero { background: var(--green-dark); --frame: rgba(45,226,127,.18); }
    .ab-hero .hl-frame { border-color: var(--frame); padding-bottom: 500px; } /* dark green text area, then the photo band (430px, frame width) the mission box overlaps (design) */
    .ab-hero-bg { position: absolute; inset: auto 0 0; height: 430px; background: center top / cover no-repeat; }
    .ab-hero .ct-hero-waves { bottom: 400px; height: 160px; } /* the wave line runs in the gap above the photo (design) */
    .ab-hero-bg::after { content: ""; position: absolute; inset: 0; background: rgba(9,22,18,.25); }
    .ab-hero .hl-frame, .ab-hero .ct-hero-waves { z-index: 1; }
    .hl .ab-hero h1 { max-width: 1000px; margin: 0 auto; font-weight: 400; letter-spacing: -1px; color: var(--white); }
    .ab-hero h4 { max-width: 1160px; margin: 24px auto 0; font-weight: 400; color: rgba(255,255,255,.9); }
    .ab-photo { height: 520px; background: linear-gradient(160deg, #262b29, #070908) center / cover no-repeat; }
    .ab-mission-wrap { overflow: visible; } /* .hl-section clips; the mission box has to reach up over the photo */
    .ab-mission-wrap .hl-frame { display: flow-root; padding-top: 0; } /* flow-root: the box's -170px stays inside, not collapsing onto the section */
    .ab-mission { position: relative; margin: -112px 60px 0; padding: 50px 40px; background: #000;z-index:1; }
    .ab-mission .ct-tag { margin-bottom: 30px; color: var(--green); background: rgba(45,226,127,.12); }
    .hl .ab-mission h3 { max-width: 560px; font-size: clamp(20px, 2vw, 28px); line-height: 1.3; font-weight: 400; color: var(--white); }
    .hl .ab-mission p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.9); }
    .hl .ab-mission p + p { margin-top: 16px; }
    .ab-specialists { margin-top: 70px; }
    .hlIcon.hl-icon-x{max-width:65px; height:auto; width:100%;}
    /* .hl-icon-x: icon tile with faint crosshair guide lines (about/ specialists, case-studies/ stats) */
    .hl-icon-x::before, .hl-icon-x::after { content: ""; position: absolute; pointer-events: none; }
    .hl-icon-x::before { inset: -1px -8px; border-block: 1px solid rgba(45,226,127,.25); }
    .hl-icon-x::after  { inset: -8px -1px; border-inline: 1px solid rgba(45,226,127,.25); }
    .ab-specialists .hl-icon { margin: 8px 8px 12px; }
    .ab-specialists .hl-icon img { display: block; width: 24px; height: 24px; object-fit: contain; }
    .ab-specialists .hl-box h3 { margin-top: 0; }

    /* Accreditations: grey cards, white logo tile left */
    .ab-accred { display: flex; align-items: center; gap: 16px; height: 100%; padding: 20px; border-radius: 4px; background: var(--soft); }
    .ab-accred-logo { flex: 0 0 160px; height: 100px; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: var(--white); }
    .ab-accred-logo img { max-width: 80%; max-height: 80px; object-fit: contain; }
    .ab-accred-logo span { font-size: 18px; font-weight: 700; color: var(--black); }
    .hl .ab-accred h4 { margin-bottom: 8px; }
    .hl .ab-accred p { margin: 0; color: var(--mid-grey); }
    /* Managed Services: a single centred accreditation, a white card on the light section (design) */
    .ms-accred { max-width: 440px; margin: 40px auto 0; padding: 24px; border-radius: 4px; background: var(--white); }
    .ms-accred-logo { display: flex; align-items: center; height: 64px; margin-bottom:10px; }
    .ms-accred-logo img { width: 64px; height: 64px; margin-left: -6px; object-fit: cover; } /* the file is a wide 240x150 with the round badge in the middle: crop to the badge so it lines up with the text edge */
    .ms-accred-logo span { font-size: 18px; font-weight: 700; color: var(--black); }
    .hl .ms-accred h4 { margin-bottom: 10px; font-size: 16px; font-weight: 500; color: var(--black); }
    .hl .ms-accred p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--mid-grey); }

    /* Team: heading + filter tabs, then 4-across cards (site.js filters them by data-group) */
    .ab-team-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 40px; }
    .hl .ab-team-head p { margin: 6px 0 0; color: rgba(255,255,255,.9); }
    .ab-tabs { display: flex; flex-wrap: wrap; gap: 12px; }
    .ab-tab {
        height: 36px; padding: 0 20px; border: 0; border-radius:4px; background: #0e1612;
        font: inherit; font-size: 14px; font-weight: 500; color: var(--white); cursor: pointer; transition: background .2s, color .2s;
    }
    .ab-tab:hover { background: #000; }
    .ab-tab.active { background: var(--green); color: var(--black); font-weight: 600; }
    .ab-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    .ab-member { margin: 0; overflow: hidden; border-radius: 4px; background: var(--white); }
    .ab-member[hidden] { display: none; }
    .ab-member .sd-person-img { aspect-ratio: 297 / 181; border-radius: 0; }
    .ab-member figcaption { padding: 20px; }
    .ab-member-tag { display: inline-block; margin-bottom: 8px; padding: 2px 8px; border-radius: 4px; background: rgba(45,226,127,.18); font-size: 11px; font-weight: 600; text-transform: uppercase; color: #13a85a; }
    .hl .ab-member h4 { margin-bottom: 8px; font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--black); }
    .ab-member .ab-member-role { display: block; font-size: 16px; color: var(--mid-grey); }
    .ab-member .ab-member-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 16px; font-weight: 600; color: var(--green); }
    /* Team popup (about/index.php, site.js): photo left, profile right, over a dimmed page */
    .ab-member { cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; }
    .ab-member:hover, .ab-member:focus-visible { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
    html.ab-modal-open { overflow: hidden; }
    .ab-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 36px 30px; background: rgba(10,13,20,.75); }
    .ab-modal[hidden] { display: none; }
    /* Card: photo + name on the left, the profile text on the right; the whole card scrolls when the text is long */
    .ab-modal-card { position: relative; display: flex; align-items: flex-start; gap:30px; width: min(900px, 100%); max-height: 100%; overflow-y: auto; padding:24px 60px 24px 24px; border-radius: 4px; background: var(--white); }
    .ab-modal-side { flex: 0 0 min(260px, 34%); }
    .ab-modal-photo { display: block; width: 100%; aspect-ratio: 1 / .94; border-radius: 16px; }
    .hl .ab-modal-side h3 { margin:16px 0 6px; font-size: clamp(20px, 1.6vw, 20px); line-height: 1.2; font-weight: 700; color: var(--black); }
    .ab-modal-role { display: block; font-size: 16px; line-height: 1.4; color: var(--mid-grey); }
    .ab-modal-text { flex: 1 1 0; min-width: 0; }
    .hl .ab-modal-text p { margin: 0 0 18px; color: var(--black); }
    .ab-modal-close { position: absolute; top: 20px; right: 20px; z-index: 2; width:40px; height:40px; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--green); color: var(--black); font-size:30px; font-weight:400; line-height: 1; cursor: pointer; }
    .demo-modal .demo-modal-card { display: block; width: min(640px, 100%); padding: 56px 32px 32px; } /* "Book a tour": the form fills the card */
    /* "Book a tour": square close button that stays 10px from the card's top and right while the form scrolls under it
       (sticky in the scrolling card; the negative bottom margin lets it sit over the form instead of pushing it down) */
    .demo-modal .demo-modal-card { scrollbar-width: none; } /* still scrolls (wheel/touch) on short screens, no visible bar */
    .demo-modal .demo-modal-card::-webkit-scrollbar { display: none; }
    .demo-modal .ab-modal-close { position: sticky; top: 10px; right: auto; width: 40px; height: 40px; margin: 10px 10px -50px auto; border-radius: 0; font-size: 30px; background: transparent; color: var(--black); }
    .demo-modal .ab-modal-close:hover { background: var(--light-grey); filter: none; } /* black cross, grey square on hover */
    .demo-modal .ab-modal-close:focus:not(:focus-visible) { outline: none; } /* no outline after a click; keyboard focus keeps it */
    .ab-modal-close:hover { filter: brightness(1.08); }    .ab-team-empty { grid-column: 1 / -1; color: rgba(255,255,255,.7); }
    /* Cards fade up one by one on first view and on every tab switch (site.js adds .anim, then .pop with --i) */
    .ab-team.anim .ab-member { opacity: 0; }
    .ab-team.anim .ab-member.pop { animation: step-in .7s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 150ms) both; }
    @media (prefers-reduced-motion: reduce) { .ab-team.anim .ab-member, .ab-team.anim .ab-member.pop { opacity: 1; animation: none; } }

    /* How to work with us: text left, staggered step cards right (reuses .sec-reasons) */
    .hl .ab-work p { color: var(--mid-grey); }
    .ab-work .sec-reason { min-height: 0; }
    /* Step cards fade up one by one in step order (.anim added by site.js, .in once in view). Keyframes move `translate`,
       not `transform`, so the card's hover lift still works after the animation */
    .js-steps.anim .sec-reason { opacity: 0; }
    .js-steps.anim.in .sec-reason { animation: step-in .9s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 400ms) both; }
    @keyframes step-in { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
    @media (prefers-reduced-motion: reduce) { .js-steps.anim .sec-reason, .js-steps.anim.in .sec-reason { opacity: 1; animation: none; } }
    .hl .ab-work-note { max-width: 840px; margin: 30px 0 0; }
    @media (min-width: 992px) { .hl .ab-work-note { margin-top: -30px; } } /* tucks in beside the dropped 4th card, as in the design */
    /* Contact (about/): form starts nearer the top, heading wraps narrower */
    .ab-page .ct-flush { padding-top: 45px; }
    .ab-page .ct-flush h3 { max-width: 340px; }
    .hl .hl-dark#contact .col-lg-4 > p { color: rgba(255,255,255,.9); } /* dark contact sections: the line beside the form near-white, as in the design (light ones keep mid-grey, line 723) */

    /* Partners + tech: three groups of 2 x 2 logo tiles */
    .hl .ab-partners-intro { max-width: 800px; margin: 10px auto 40px; color: var(--mid-grey); }
    .ab-pgroup { padding-bottom: 30px; text-align: center; } /* design: no grey box, a small centred green label over each group */
    .hl .ab-pgroup h4 { margin-bottom: 12px; }
    /* "Part of Hemani Ventures": text left, four group logos in a row on the right (about/index.php) */
    .ab-group { display: flex; align-items: center; gap: 20px; margin-top:80px; }
    .ab-group-text { flex: 0 0 calc(50% - 20px); max-width:800px; margin-bottom:30px; }
    .ab-group-text h3 { margin: 0 0 10px; }
    .ab-group-text p { margin: 0; }
    .ab-group-logos { flex: 0 0 calc(50% - 20px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .ab-group-logos img { width: 100%; aspect-ratio: 270 / 77; object-fit: cover; display: block; border-radius: 3px; } /* the KOMSA picture is a little taller than the others: same tile height */
    /* Hemani on its own row, centred above the three group companies; its white background drops onto the grey */
    .ab-group-logos img:first-child { grid-column: 1 / -1; width:211px; aspect-ratio: auto; justify-self: center; mix-blend-mode: multiply; border-radius: 0; }
    .ab-plogos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } /* four tiles per row, a short last row stays centred */
    .ab-plogos .hl-logo { flex: 0 0 calc((100% - 30px) / 4); height: 78px; border-radius: 3px; background: var(--white); }
    .ab-plogos .hl-logo span { font-size: 18px; text-align: center; }
    .ab-plogos .hl-logo img { max-width: 60%; max-height: 38px; } /* same logo sizing as the Technical Partners tiles */
    .ab-plogos .hl-logo img[src$="/mitsubishi-heavy.png"] { max-width: 76%; max-height: 44px; }
    .ab-plogos .hl-logo img[src$="/carrier.png"] { max-height: 46px; }
    .rs-news.buildlet{padding:80px 0px; background-color:#F4F6F9;}
    .rs-news.buildlet .hl-frame{border-inline: 1px solid;border-color: rgba(45, 226, 127, 0.36);}
.buildlet .rs-news-bg{    inset:0px;}
    /* Showroom: black, photo left, location details right */
    .ab-showroom { background: #000; --frame: rgba(255,255,255,.08); }
    .hl .ab-showroom h3, .hl .ab-showroom h4 { color: var(--white); }
    .hl .ab-showroom p { color: rgba(255,255,255,.7); }
    /* Photo takes 72% of the frame, the details sit in the rest after a 28px gap (design); stacked below 992px */
    .ab-showroom-row { display: grid; gap: 24px; align-items: center; }
    @media (min-width: 992px) { .ab-showroom-row { grid-template-columns: 72% minmax(0, 1fr); column-gap: 28px; } }
    .ab-showroom-img { display: block; aspect-ratio: 680 / 420; border-radius: 4px; background: linear-gradient(160deg, #262b29, #070908) center / cover; }
    .ab-showroom-info hr { margin: 30px 0; border-color: rgba(255,255,255,.4); opacity: 1; }
    /* Address and contact lines carry small green outline icons (design) */
    .ab-showroom-info .ab-line, .ab-showroom-info .ab-contact a { display: inline-flex; align-items: center; gap: 10px; }
    .ab-showroom-info .ab-line { display: flex; }
    .ab-showroom-info .bi { font-size: 16px; line-height: 1; color: var(--green); }
    .ab-showroom-info .ab-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
    .ab-showroom-info .ab-contact a { color: rgba(255,255,255,.7); text-decoration: none; transition: color .2s; }
    .ab-showroom-info .ab-contact a:hover { color: var(--green); }
    .ab-showroom-info h5 { margin-bottom: 10px; font-size: 20px; font-weight: 600; text-transform: none; color: var(--white); }

    /* Careers banner: blurred showroom photo behind centred text */
    .ab-careers { position: relative; overflow: hidden; isolation: isolate; padding: 80px 30px; border-radius: 4px; background: #111; text-align: center; }
    .ab-careers-bg { position: absolute; inset: -30px; z-index: -1; background: center / cover;  }
    .hl .ab-careers h3 { color: var(--white); }
    .hl .ab-careers p { margin: 12px 0 28px; color: rgba(255,255,255,.9); }

    /* ================= Resources page (resources/index.php) ================= */
    /* Hero: black with green wave lines, centred text; the featured article card overlaps its bottom edge */
    .rs-hero { background: #000; --frame: rgba(45,226,127,.18); }
    .rs-hero-waves { position: absolute; left: 0; bottom: 0; width: 100%; height: 320px; pointer-events: none; }
    .rs-hero .hl-frame { padding-bottom: 303px; }
    .rs-hero .ct-tag { padding: 0; background: none; }
    .hl .rs-hero h1 { max-width: 720px; margin: 0 auto; font-weight: 400; letter-spacing: -1px; color: var(--white); }
    .rs-hero h1 strong { font-weight: 700; }
    .hl .rs-hero p { max-width: 940px; margin: 24px auto 0; font-size: 16px; line-height: 26px; color: var(--white); }
    .rs-main { overflow: visible; }
    .rs-main .hl-frame { display: flow-root; padding-top: 0; } /* flow-root keeps the card's negative margin inside */

    /* Category pill + date line (featured card and grid cards) */
    .rs-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; background: rgba(45,226,127,.15); font-size: 12px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--green); }
    .rs-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;  gap: 10px; font-size: 13px; color: var(--mid-grey); }

    /* Featured article */
    .rs-featured { position: relative; margin-top: -219px; display: grid; grid-template-columns: 630fr 586fr; overflow: hidden; border-radius: 4px; background: var(--white); }
    .rs-featured-img { min-height: 448px; background: linear-gradient(160deg, #262b29, #070908) center / cover; }
    .rs-featured-body { display: flex; flex-direction: column; justify-content: center; padding: 32px 40px; }
    .hl .rs-featured h3 { margin: 24px 0 16px; }
    .hl .rs-featured p { margin: 0 0 26px; font-size: 16px; line-height: 26px; color: var(--mid-grey); }
    .rs-featured .btn-hl { align-self: flex-start; }
    .tc-insight .rs-featured { margin-top: 0; background: var(--soft); } /* Main Contractors: the card sits under its own heading on white, not overlapping a hero */

    /* Category filter */
    .rs-heading { margin: 60px 0 24px; scroll-margin-top: 100px; }
    /* Case-studies filters stay pinned below the header while the grid scrolls (like a sidebar nav) */
    .hl-section:has(.rs-sticky) { overflow: clip; } /* .hl-section's overflow:hidden would stop position:sticky working */
    main:has(.site-header.hidden) .rs-filters.rs-sticky { top: 0; } /* header slid away on scroll down: bar takes its place */
    .rs-filters.rs-sticky { transition: top .4s ease; position: sticky; top: 80px; z-index: 50; background: var(--soft); padding-block: 12px; margin-block: 0 18px; }
    .rs-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 30px; }
    .rs-viewall { margin-left: auto; }
    .rs-filter { display: inline-flex; align-items: center; height: 36px; padding: 0 24px; border-radius: 4px; background: var(--white); font-size: 14px; font-weight: 500; color: var(--mid-grey); text-decoration: none; transition: background .2s, color .2s; }
    .rs-filter:hover { color: var(--black); }
    .rs-filter.active { background: var(--green); color: var(--black); font-weight: 600; }

    /* Article grid */
    .rs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .rs-main .rs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Resources page: 2 columns */
    .rs-main .rs-card-media { aspect-ratio: 2.92 / 1; } /* two wide cards: picture ~207px high at 1440px, as in the design */
    .rs-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 4px; background: var(--white); color: var(--black); text-decoration: none; }
    /* The box (.rs-card-media) sets the picture's height, so every card's picture is the same size whatever the file's own shape */
    .rs-card-img { display: block; width: 100%; height: 100%; object-fit: cover; background: linear-gradient(160deg, #262b29, #070908) center / cover; transition: transform .6s ease; }
    .rs-card-media { overflow: hidden; aspect-ratio: 400 / 207; }
    .rs-card:hover .rs-card-img { transform: scale(1.05); }
    .rs-card-body { flex: 1; display: flex; flex-direction: column; padding: 22px 16px 24px;border-radius: 0 0 5px 5px;
background: #F4F6F9; }
    .hl .rs-card h4 { margin: 20px 0 10px; line-height: 1.3; }
    .hl .rs-main .rs-card h4, .hl .ar-recent .rs-card h4 { font-size: 16px; font-weight: 700; } /* Resources + article pages */
    .hl .rs-card p { margin: 0 0 20px; color: var(--mid-grey); }
    .rs-card .hl-link { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--light-grey); }
    .rs-empty { grid-column: 1 / -1; padding: 40px 0; color: var(--mid-grey); }
    @media (prefers-reduced-motion: reduce) { .rs-card-img { transition: none; } }

    /* Pagination */
    .rs-pager { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;  gap: 10px; margin-top: 10px; padding-top: 40px; border-top: 1px solid var(--light-grey); }
    .rs-page { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 4px; background: var(--white); font-size: 14px; font-weight: 500; color: var(--mid-grey); text-decoration: none; }
    .rs-page.active { background: var(--green); color: var(--black); font-weight: 700; }
    .rs-pager .btn-hl { height: 40px; padding: 0 20px; font-size: 15px; font-weight: 600; }
    .rs-pager .disabled { opacity: .4; pointer-events: none; }

    /* Newsletter: blurred photo behind centred text + email field */
    .rs-news { position: relative; overflow: hidden; isolation: isolate; background: #000; text-align: center; }
    .rs-news-bg { position: absolute; inset: -30px; z-index: -1; background: center / cover;  }
    .rs-news .hl-frame { border-inline: 0; padding-block: 52px; }
    .rs-news .rs-tag { margin-bottom: 20px; }
    .hl .rs-news h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.3; color: var(--white); }
    .hl .rs-news p { margin: 12px 0 28px; color: rgba(255,255,255,.9); }
    .rs-news-form { display: flex; justify-content: center; gap: 12px; max-width: 590px; margin: 0 auto; }
    .rs-news-form input { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border: 0; border-radius: 3px; font: inherit; font-size: 14px; }
    .rs-news-form input:focus { outline: 2px solid var(--green); }
    .rs-news-hs { max-width: 590px; margin: 0 auto; text-align: left; } /* HubSpot newsletter form */
    .hl .rs-news .rs-news-msg { min-height: 20px; margin: 12px 0 0; font-size: 14px; color: var(--green); }

    /* Article page (resources/hvac-and-environmental.php) */
    .ar-hero .hl-frame { padding-bottom: 0; }
    .ar-hero .ct-tag { padding: 0; background: none; }
    .hl .ar-hero h1 { max-width: 860px; margin: 0 auto; font-weight: 400; letter-spacing: -1px; color: var(--white); }
    .ar-date { display: block; margin: 16px 0 40px; font-size: 14px; color: rgba(255,255,255,.5); }
    .ar-hero-media { position: relative; max-width: 800px; margin: 0 auto; padding-bottom: 60px; }
    .ar-hero-img, .ar-split-img, .ar-risk-img { display: block; width: 100%; object-fit: cover; background: #0b0f0d; }
    .ar-hero-img { aspect-ratio: 800 / 420; border-radius: 4px; }
    .ar-share { position: absolute; top: 0; left: calc(100% + 32px); display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.6); }
    /* One sprite, share-ico.svg (37x135: facebook, X, linkedin stacked, each with its own green ring); each link shows its slice */
    .ar-share a { display: block; width: 37px; height: 37px; background: url("../images/icons/share-ico.svg") 0 0 / 37px 135px no-repeat; text-decoration: none; transition: opacity .2s; }
    .ar-share a.share-x  { background-position: 0 -46.5px; }
    .ar-share a.share-in { background-position: -.25px -98.5px; }
    .ar-share a:hover { opacity: .7; }
    .ar-text p { margin: 0 0 16px;  line-height: 22px; color: var(--mid-grey); }
    .ar-text p:last-child { margin-bottom: 0; }
    .ar-text a { color: var(--green); }
    .ar-summary .hl-frame, .ar-programme .hl-frame { padding-block: 60px; }
    .ar-summary h3, .ar-programme h3, .ar-margin h3, .ar-pair h3, .ar-recent h3 { margin-bottom: 24px; }
    .ar-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
    .ar-checks { list-style: none; display: grid; gap: 16px; }
    .ar-checks li { display: flex; gap: 12px; }
    .ar-checks img { flex: none; margin-top: 2px; }
    .hl .ar-checks p { margin: 0; line-height: 22px; color: var(--mid-grey); }
    .ar-margin .hl-frame, .ar-risk .hl-frame { padding-block: 60px; }
    .ar-split { display: grid; grid-template-columns: 47% 1fr; gap:36px; align-items: start; }
    .ar-risk-box { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; background: #000; }
    .ar-risk-body { padding: 40px; }
    .hl .ar-risk-body h3 { margin-bottom: 20px; font-size: clamp(22px, 2vw, 28px); line-height: 1.25; color: var(--white); }
    .hl .ar-risk-body p { margin: 0 0 16px; line-height: 22px; color: rgba(255,255,255,.75); }
    .ar-risk-img { height: 100%; min-height: 320px; }
    .ar-example .hl-frame { padding-block: 60px; }
    .ar-example h3 { margin-bottom: 24px; }
    .ar-table-wrap { margin: 28px 0; overflow-x: auto; }
    .ar-table { width: 100%; border-collapse: collapse; font-size: 15px; color: var(--black); }
    .ar-table th, .ar-table td { padding: 14px 20px; border-bottom: 1px solid var(--light-grey); text-align: right; white-space: nowrap; }
    .ar-table th:first-child { text-align: left; font-weight: 500; }
    .ar-table thead th { background: var(--soft); font-weight: 700; }
    .ar-table tfoot th, .ar-table tfoot td { border-bottom: 0; background: var(--soft); font-weight: 700; }
    .ar-pair .hl-frame { padding-block: 60px; }
    .ar-pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .ar-pair-card { padding: 32px; border-radius: 4px; background: var(--white); }
    .ar-pair-card h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.25; }
    .ar-recent .hl-frame { padding-block: 60px; }
    .ar-recent .rs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Case study page (case-studies/case.php): hero and overview reuse the article page's; these are its facts row and "MORE CASE STUDIES" block */
    .cd-bg { background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #0b0f0d; }
    .cd-overview .ar-split-img { border-radius: 2px; } /* a picture drawn as a background has no height of its own */
    .ar-hero .ct-tag { color: var(--green); }
    .cd-sub { display: block; margin: 16px 0 40px; font-size: 18px; line-height: 26px; color: rgba(255,255,255,.85); }
    /* sizes measured from the design at 1440px: values 28px (the short ones) / 20px (the sentences), labels 10.5px */
    .cd-facts .hl-frame { padding-block: 66px 53px; }
    .cd-row { display: grid; gap: 24px 40px; }
    .cd-row-3 { grid-template-columns: repeat(3, 1fr); padding-bottom: 36px; border-bottom: 1px solid var(--light-grey); }
    .cd-row-2 { grid-template-columns: repeat(3, 1fr); padding-top: 32px; }
    .cd-row-2 > :nth-child(2):last-child { grid-column: 2 / -1; } /* two items: the second takes the remaining two columns */
    .cd-label { display: block; margin-bottom: 12px; font-size:14px; font-weight: 600; letter-spacing: 3.5px; text-transform: uppercase; color: var(--green); }
    .hl .cd-facts h4, .hl .cd-facts p { margin: 0; font-size: clamp(16px, 1.44vw, 20px); line-height: 1.5; color: var(--black); }
    .cd-overview .hl-frame { padding-block: 94px 80px; }
    .cd-more { background: #060908; }
    .cd-more .hl-frame { padding-block: 60px; }
    .cd-more .hl-head { margin-bottom: 20px; }
    .cd-more .hl-head .hl-label { margin-bottom: 0; }
    .cd-more .hl-controls { display: flex; gap: 8px; }
    .cd-more .cs-feature { margin-top: 0; } /* same photo-card slider as the Case Studies page */
    .hl-section.cd-more .swiper .swiper-slide { border-color: #060908; }
    .hl-section.cd-more .swiper .swiper-slide:hover { border-color: rgba(45, 226, 127, .7); }

    /* ================= Case studies page (case-studies/index.php) ================= */
    /* Hero: black, centred intro, then a photo-card slider that runs off the right edge (reuses .hl-controls arrows) */
    .cs-hero { background: #000; --frame: rgba(255,255,255,.08); }
    .cs-hero .ct-tag { background: #222; }
    .hl .cs-hero h1 { font-weight: 400; letter-spacing: -1px; color: var(--white); }
    .cs-hero h1 strong { font-weight: 700; }
    .cs-hero h4 { max-width: 1040px; margin: 20px auto 0; font-weight: 400; color: var(--white); }
    /* Filter tabs + case grid on the dark hero: tabs centred; the white cards keep their own dark titles */
    .cs-hero .cs-filters { justify-content: center; margin: 40px 0 30px; scroll-margin-top: 100px; }
    .hl .cs-hero .rs-card h4 { max-width: none; font-weight: 700; color: var(--black); }
    .cs-hero-waves { position: absolute; left: 0; bottom: 60px; width: 100%; height: 160px; pointer-events: none; }
    .cs-feature { position: relative; margin-top: 60px; }
    /* Swiper track: slides run past the frame on both sides, out to the viewport edges where the section clips them,
       so a card moved on by "next" stays in view on the left (as on ipeafrica.com/our-work) */
.hl-section.cs-hero .swiper .swiper-slide{border-color:#000;}
.hl-section.cs-hero .swiper .swiper-slide:hover{border-color:rgba(45, 226, 127, .7);;}  

       .cs-feature .swiper { overflow: visible; }
    .cs-arrows { position: absolute; inset: 50% 0 auto; z-index: 2; display: flex; justify-content: space-between; translate: 0 -50%; pointer-events: none; }
    .cs-arrows .hl-arrow { pointer-events: auto; }
    .cs-feature .cs-slide {
        position: relative; isolation: isolate; overflow: hidden; width: min(545px, 85vw); height: 476px;
        display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 18px 24px; border-radius: 4px;
        background: #111; color: var(--white); text-decoration: none;
    }
    .cs-slide::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 5px;background: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.00) 35%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.92) 100%); } /* the photo is the .hl-tile-img span under this overlay */
        .cs-slide:hover::before {background: linear-gradient(180deg, rgba(15, 40, 33, 0.00) 50.07%, rgba(15, 40, 33, 0.80) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 71.92%);}
    .cs-slide:hover { color: var(--white); }
    .cs-slide:hover .hl-tile-img { transform: scale(1.06); }
    .cs-slide .hl-tile-img { transition: transform .6s ease; }
    .hl .cs-slide h3 { margin: 16px 0 6px; font-size: clamp(20px, 2vw, 28px); line-height: 1.3; font-weight: 500; color: var(--white); }
    .hl .cs-slide p { margin: 0; font-size: 16px; line-height: 24px; color: rgba(255,255,255,.9); }
    .cs-slide .cs-foot { border-color: rgba(255,255,255,.18); }
    .cs-slide .cs-foot strong { color: var(--white); }

    /* Sector + location line, card footer (link + headline number) */
    .cs-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--mid-grey); }
    .cs-meta b { font-weight: 700; letter-spacing: .1em; color: var(--black); }
    .cs-slide .cs-meta, .cs-slide .cs-meta b { color: var(--white); font-size: 12px; }
    /* Slider card: full tag + title with a green tag at rest; on hover the short tag/title in white */
    .cs-slide .cs-meta b { color: var(--green); transition: color .3s; }
    .cs-slide .cs-short { display: none; }
    .cs-slide:hover .cs-full { display: none; }
    .cs-slide:hover .cs-short { display: inline; }
    .cs-slide:hover .cs-meta b { color: var(--white); }
    /* Touch screens have no hover: the slide in focus (the active Swiper slide) shows the hover state instead */
    @media (hover: none), (max-width: 767.98px) {
        .cs-slide.swiper-slide-active::before { background: linear-gradient(180deg, rgba(15, 40, 33, 0.00) 50.07%, rgba(15, 40, 33, 0.80) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 71.92%); }
        .cs-slide.swiper-slide-active .hl-tile-img { transform: scale(1.06); }
        .cs-slide.swiper-slide-active .cs-full { display: none; }
        .cs-slide.swiper-slide-active .cs-short { display: inline; }
        .cs-slide.swiper-slide-active .cs-meta b { color: var(--white); }
    }
    .cs-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--light-grey); }
    .cs-slide .cs-foot { margin-top: 20px; }
    .cs-foot strong { font-size: 14px; font-weight: 700; color: #3f4651; }
    .rs-card .cs-foot .hl-link { margin: 0; padding: 0; border: 0; }
    .rs-card .cs-meta + h4 { margin-top: 18px; font-size: 16px; font-weight: 700; }
    .cs-heading { margin-bottom: 24px; scroll-margin-top: 100px; }

    /* Stats row */
    .cs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; }
    .cs-stats .hl-icon { margin-bottom: 20px; }
    .cs-stat-icon { display: block; width: 64px; height: 64px; margin: 0 auto 20px; }
    .cs-stats strong { display: block; font-size: clamp(30px, 2.8vw, 40px); font-weight: 700; line-height: 1.1; color: var(--black); }
    .cs-stats span:last-child { display: block; margin-top: 4px; font-size: 16px; color: #4b5563; }
    /* Stats fade up one by one when scrolled into view (.js-steps: site.js adds .anim, then .in; step-in keyframes from the About page) */
    .cs-stats.js-steps.anim > div { opacity: 0; }
    .cs-stats.js-steps.anim.in > div { animation: step-in .8s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 200ms) both; }
    @media (prefers-reduced-motion: reduce) { .cs-stats.js-steps.anim > div, .cs-stats.js-steps.anim.in > div { opacity: 1; animation: none; } }

    /* ================= Solution detail pages (solutions/hvac-climate.php) ================= */
    /* Hero: blurred photo, centred intro, then the "Building overview" control panel */
    .hv-hero { background: #050807; --frame: rgba(255,255,255,.06); border-bottom: 1px solid var(--green); isolation: isolate; overflow: hidden; } /* isolate: the panel glow (z -1) sits above the photo (z -2), below the content */
    .hv-hero-bg { position: absolute; z-index: -2; inset: -30px; background: center / cover;  }
    .hv-hero-waves { position: absolute; left: 0; top: 520px; width: 100%; height: 320px; pointer-events: none; }
    .hv-hero .hl-frame { padding-top: 58px; padding-bottom: 60px; border-color: rgba(219, 226, 238, 0.24); }
    .hv-hero .ct-tag { background: #222; }
    .hl .hv-hero h1 {margin: 0 auto; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.19; font-weight: 400; letter-spacing: -1px; color: var(--white); }
    .hv-hero h4 {margin: 20px auto 30px; font-weight: 400; color: var(--white); }

    .hv-panel { position: relative;  margin: 40px auto 0; border-radius: 6px; padding-inline:30px; color: var(--white); text-align:center;  }
    /* Green glow behind the panel (design image exported at 2160 x 1368, centred on the panel; the hero clips what spills out) */
    /* Green glow behind the panel (design image exported at 2160 x 1368, centred on the panel; the hero clips what spills out) */

    .hv-panel-bar { border-radius: 0 0 6px 6px; } /* the panel no longer clips its children, so the bar rounds its own corners */
    .hv-panel-head { padding: 22px 24px 16px; }
    .hv-panel-head strong { display: block; font-size: 20px; font-weight: 600; }
    .hv-panel-head span { font-size: 14px; color: #9ca3af; }
    .hv-panel-grid { display: grid; grid-template-columns: 1fr 1fr 1.6fr; grid-template-rows: auto auto; gap: 6px 6px; padding: 0 24px 20px; }
    .hv-room { position: relative; display: flex; flex-direction: column; min-height: 180px; padding: 10px; border-radius: 4px; background: #0e1118; }
    .hv-room-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 6px; background: #1a1e27; color: var(--green); font-size: 20px; }
    .hv-room-status { position: absolute; top: 26px; right: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
    .hv-room-status.warn { width: auto; height: auto; background: none; color: #f5a524; font-size: 12px; top: 20px; }
    .hv-room strong { margin-top: auto; font-size: 20px; font-weight: 500; }
    .hv-room > span:last-child { margin-top: 4px; font-size: 16px; color: #d1d5db; }
    .hv-temp { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-direction: column; padding: 18px 16px 20px; border-radius: 4px; background: var(--green); color: var(--black); }
    .hv-temp > strong { font-size: 16px; font-weight: 600; }
    .hv-dial { position: relative; width: 190px; height: 190px; margin: 14px auto 0; display: grid; place-items: center; text-align: center; }
    .hv-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    .hv-dial b { display: block; font-size: 46px; font-weight: 700; line-height: 1; }
    .hv-dial small { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; line-height: 1.4; }
    .hv-level { margin-top: auto; padding-top: 16px; font-size: 12px; color: #1f2b25; }
    .hv-level-track { position: relative; height: 4px; margin-top: 10px; border-radius: 2px; background: rgba(10,13,20,.2); }
    .hv-level-track::before { content: ""; position: absolute; inset: 0 50% 0 0; border-radius: 2px; background: var(--black); }
    .hv-level-track::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; translate: -50% -50%; border-radius: 50%; background: var(--black); }
    /* AV page variant: status pill under the room name, a screen illustration in the green panel */
    .hv-room > span.hv-pill { align-self: flex-start; margin-top: 10px; padding: 2px 9px; border-radius: 2px; font-size: 12px; font-weight: 500; }
    .hv-room > .hv-pill.active { background: #13291d; color: var(--green); }
    .hv-room > .hv-pill.standby { background: #3a2a0c; color: #f5a524; }
    .hv-room > .hv-pill.scheduled { background: #262a33; color: #c3c8d1; }
    .hv-room strong + .hv-pill { margin-bottom: 4px; }
    .hv-tv { display: block; width: 100%; max-width: 290px; margin: 14px auto 0; }
    .hv-temp-note { margin-top: 16px; text-align: center; font-size: 14px; font-weight: 600; }
    /* Appliances page: "FLEET VIEW" dial (icon + label inside the ring), caption under it */
    .hv-dial .hv-fleet-ico { position: static; display: block; width: 50px; height: 72px; margin: 0 auto; }
    .hv-dial .hv-fleet-label { display: block; margin-top: 10px; font-size: 20px; font-weight: 700; }
    .hv-temp-sub { margin-top: 18px; text-align: center; font-size: 12px; color: #1f4a35; }
    .hv-temp-sub + .hv-temp-note { margin-top: auto; padding-top: 20px; }
    /* Guest tech page: mini "Guest room" control panel inside the green box (2 x 2 tiles, each with a pill) */
    .hv-groom { margin-top: 16px; padding: 16px 16px 18px; border-radius: 4px; background: #000; color: var(--white); }
    .hv-groom + .hv-temp-note { margin-top: auto; padding-top: 18px; }
    .hv-groom-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; }
    .hv-groom-head::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
    .hv-groom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
    .hv-groom-tile { display: flex; flex-direction: column; align-items: flex-start;  gap: 10px; padding: 12px; border-radius: 6px; background: #1a3a2c; font-size: 13px; font-weight: 500; }
    .hv-groom-tile span { padding: 1px 8px; border-radius: 2px; background: #13291d; color: var(--green); font-size: 11px; }
    /* Services page: black warning disc in the green box; tech photo filling the right half; a single centred standards card */
    .hv-alert { display: grid; place-items: center; width: 182px; height: 182px; margin: 18px auto 0; border-radius: 50%; background: #000; color: #f5a524; font-size: 96px; line-height: 1; }
    .hv-alert-title { margin-top: 20px; text-align: center; font-size: 20px; font-weight: 700; }
    .hv-alert-title + .hv-temp-note { margin-top: 10px; }
    .hv-tech-split .hl-frame { padding-block: 120px; }
    .hv-tech-photo { position: absolute; top: 0; right: 0; bottom: 0; z-index:1; width: 50%; background: #111 center / cover no-repeat; background-size:100% auto; }
    @media (max-width: 991.98px) { .hv-tech-photo { position: static; display: block; width: auto; height: 320px; } .hv-tech-split .hl-frame { padding-block: 64px; } }
    .hv-standards.hv-one { grid-template-columns: minmax(0, 297px); justify-content: center; }
    @media (min-width: 992px) { .hv-standards.hv-three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 75%; margin-inline: auto; } } /* three cards, centred at the four-column card width; below 992px they swipe like the rest */
    /* Bottom banner split into two text columns (appliances: Warranty and Support / Resources & downloads) */
    .hl .hv-split p { max-width: 440px; margin-inline: auto; }
    .hv-integration.hv-split { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 60px; padding-inline: 90px; }
    /* Thin light divider centred between the two columns (design) */
    .hv-integration.hv-split::after { content: ""; position: absolute; left: 50%; top: 50%; height: 90px; translate: -50% -50%; border-left: 1px solid rgba(255,255,255,.45); }
    @media (max-width: 991.98px) { .hv-integration.hv-split::after { display: none; } }
    @media (max-width: 991.98px) { .hv-integration.hv-split { grid-template-columns: 1fr; padding-inline: 20px; } }
    .hv-panel-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; padding: 16px 30px; border-top: 1px solid #1d2a23; background: #08100c; }
    .hv-mode { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
    .hv-mode i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 6px; background: #163024; color: var(--green); font-size: 18px; font-style: normal; }
    .hv-mode small { display: block; font-size: 12px; font-weight: 400; color: #9ca3af; }
    .hv-adjust { margin-left: auto; display: inline-flex; align-items: center;  gap: 10px; padding: 8px 18px; border: 0; border-radius: 6px; background: #163024; color: var(--white); font: inherit; font-size: 14px; font-weight: 600; }
    .hv-adjust i { color: var(--green); }

    /* At a glance / The HiiLIFE difference: two white cards on dark green, joined by a dashed centre line */
    .hv-glance { background: var(--green-dark); --frame: rgba(255,255,255,.06); }
    .hv-glance .hl-frame { padding-bottom: 0; }
    .hv-glance-wrap { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0 62px; padding-bottom: 120px; }
    .hv-glance-wrap::before { content: ""; position: absolute; left: 50%; top: -80px; bottom: 0; border-left: 1px dashed rgba(45,226,127,.7); }
    .hv-glance-wrap::after { content: ""; position: absolute; left: 50%; top: -80px; width: 82px; height: 5px; translate: -50% 0; background: var(--green); }
    .hv-card { position: relative; align-self: start; padding: 29px 40px; border-radius: 4px; background: var(--white); }
    .hl .hv-integration p { max-width: 780px; margin-inline: auto; }
    /* HVAC "Integration & compatibility" (design): a green glow on the left melting into near-black, sweeping across
       the box and back on a loop. The glow layer is 3 boxes wide (left: -100%), so as it slides right the box's left
       edge shows near-black. Its first frame is the design: brightest low down a third across, near-black by the middle */
    .ab-careers-bg.hv-glow { background: #0b0f14; overflow: hidden; }
    .ab-careers-bg.hv-glow::before {
        content: ""; position: absolute; top: 0; bottom: 0; left: -100%; width: 300%;
        /* stops in layer %: box x = (layer % - 33.3) * 3, e.g. 33.3% = box left edge, 66.7% = box right edge */
        background:
            radial-gradient(8.7% 120% at 43.3% 105%, #1f7a4c 0%, #1b6a43 40%, rgba(24, 90, 58, .5) 70%, rgba(20, 70, 45, 0) 100%),
            linear-gradient(90deg, #0b0f14 0%, #0b0f14 20%, #17533a 33.3%, #1a5e3e 41.3%, #154a31 44.3%, #0f241b 48%, #0c1517 54%, #0b0f14 66.7%, #0b0f14 100%);
        animation: hv-glow-sweep 7s ease-in-out infinite alternate;
    }
    /* 20% of the 3-box layer = the glow travels 60% of the way across the box */
    @keyframes hv-glow-sweep { from { transform: translateX(0); } to { transform: translateX(20%); } }
    @media (prefers-reduced-motion: reduce) { .ab-careers-bg.hv-glow::before { animation: none; } }
    .hv-card:nth-child(2) { margin-top: 98px; }
    .hv-card::after { content: ""; position: absolute; top: 50%; width: 31px; border-top: 1px dashed rgba(45,226,127,.7); } /* joins the card's middle to the centre line, whatever the text height */
    .hv-card:nth-child(1)::after { left: 100%; }
    .hv-card:nth-child(2)::after { right: 100%; }
    .hl .hv-card h3 { margin-bottom: 20px; }
    .hl .hv-card p { margin: 0; line-height: 23px; color: var(--mid-grey); }
    .hl .hv-card p + p { margin-top: 18px; }
    .hv-card .hv-card-logo { display: block; height: 28px; width: auto; margin-top: 20px; } /* Samsung wordmark under the text (design) */
    .hv-card strong { display: block; color: var(--black); font-size: 14px; }

    /* What we deliver: green tab on the section join, numbered cards zig-zagging along a dashed centre line */
    .hv-deliver { overflow: visible; background: var(--white); }
    .hv-deliver .hl-frame { display: flow-root; padding-top: 0; } /* flow-root: the tab's -40px pulls only the tab up onto the dark section, not the whole section */
    .hv-deliver-tab { position: relative; z-index: 2; display: table; margin: 0 auto; translate: 0 -50%; /* centred on the section join */ padding: 12px 36px; border-radius:4px; background: var(--green); }
    .hl .hv-deliver-tab h3 { margin: 0; color: var(--black); }
    .hv-steps { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-top: -35px; padding: 44px 0 80px; } /* -35px: the tab's lower half */
    .hv-steps::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px dashed rgba(45,226,127,.8); }
    .hv-steps-col { display: flex; flex-direction: column; gap: 32px; }
    /* Design: two independent columns, the right one 40px lower; every card the same 111px height, so the dots on
       the centre line stay evenly spaced */
    .hv-steps-col:last-child { padding-top: 40px; }
    .hv-step { position: relative; display: flex; align-items: center; gap:10px; width: min(var(--w, 436px), calc(100% - var(--gap, 0px) - 16px)); /* never closer than 16px to the frame edge */ min-height:90px; padding:5px 16px 5px 12px;border-radius: 5px;background: rgba(45, 226, 127, 0.10);}
    .hv-steps-col:first-child .hv-step { align-self: flex-end; margin-right: var(--gap); }
    .hv-steps-col:last-child .hv-step { margin-left: var(--gap); }
    .hv-step .hl-icon { flex-basis: 48px; width: 48px; height: 48px; margin: 8px; font-size: 20px; }
    /* Fade up one by one, 01 to 08 (.js-steps: site.js adds .anim, then .in once in view; step-in keyframes from the About page) */
    .js-steps.anim :is(.hv-step, .hv-card), .hl-checks.js-steps.anim li { opacity: 0; }
    .hl-checks.js-steps.anim.in li { animation: step-in .7s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 180ms) both; } /* specification points */
    @media (prefers-reduced-motion: reduce) { .hl-checks.js-steps.anim li, .hl-checks.js-steps.anim.in li { opacity: 1; animation: none; } }
    .js-steps.anim.in .hv-step { animation: step-in .8s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 250ms) both; }
    .js-steps.anim.in .hv-card { animation: step-in .9s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 400ms) both; } /* At a glance / The HiiLIFE difference */
    @media (prefers-reduced-motion: reduce) { .js-steps.anim :is(.hv-step, .hv-card), .js-steps.anim.in :is(.hv-step, .hv-card) { opacity: 1; animation: none; } }
    .hv-step-num { display: block; font-size: 14px; color: var(--green); }
    .hl .hv-step p { margin: 6px 0 0; font-size: 14px; line-height: 23px; color: #374151; }
    /* Dashed connector from the card to the centre line, with a dot on the line */
    .hv-step::before { content: ""; position: absolute; top: 50%; width: var(--gap); border-top: 1px dashed rgba(45,226,127,.8); }
    .hv-step::after { content: ""; position: absolute; top: calc(50% - 5px); width: 11px; height: 11px; border-radius: 50%; background: var(--green); }
    .hv-steps-col:first-child .hv-step::before { left: 100%; }
    .hv-steps-col:first-child .hv-step::after { left: calc(100% + var(--gap) - 5px); }
    .hv-steps-col:last-child .hv-step::before { right: 100%; }
    .hv-steps-col:last-child .hv-step::after { right: calc(100% + var(--gap) - 6px); }
section.hl-section.hl-dark.bt-process { position: relative; }
.graphifill{min-height:150px; margin-inline:-30px; margin-top:-150px;position: relative;z-index:1;}
    .hv-step .hl-icon img { display: block; width: 24px; height: 24px; object-fit: contain; }
    /* Technical detail & specifications */
    .hv-tech { background: #F3F3F3; }
    .hl .hv-tech h3 { margin-bottom: 30px; color:#0A0D14; }
    .hv-tech .hl-frame { padding-block: 60px; }
    .hv-tech .hl-checks { max-width: 560px; margin: 0;display:grid;  gap:21px;color: #5B6370;font-weight: 400;font-size: 14px; }
    .hv-tech .hl-checks li { align-items: flex-start; font-size:14px; line-height: 21px; }
    /* Light variant (HVAC page design): soft grey section, dark heading, grey points */
    .hv-tech.hl-light { background: #E5E5E5; } /* design: neutral grey, set apart from the bluish --soft standards section below; keeps the green frame lines */
    .hl .hv-tech.hl-light h3 { color:#0A0D14;  }
    .hv-tech.hl-light .hl-checks { color: var(--mid-grey); }
    .hv-tech-img { display: block; aspect-ratio: 929 / 714; max-width: 620px; margin: 0 auto; background: center / contain no-repeat; } /* the photo's own ratio; its transparent margin makes the building ~495px wide, as in the design */
.hl-section.cd-more .swiper .swiper-slide{    border-color: #111;}
.hl-section.cd-more .swiper .swiper-slide:hover{    border-color: rgba(45, 226, 127, .7);}
    /* Standards & accreditations: four white cards */
    .hv-standards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 40px; text-align: left; }
    .hv-std { padding: 24px; border-radius: 4px; background: var(--white); }
    .hv-std-logo { display: flex; align-items: center; height: 70px; margin-bottom: 10px; }
    .hv-standards-sec .hl-frame { padding-top: 68px; padding-bottom: 88px; }
    .hv-standards-sec .hv-standards { margin-top: 28px; }
    /* Manufacturer card: one logo at a time (.is-on, moved every 2.5s by site.js, so any number of logos works), with a dot per logo */
    .hv-std-carousel { flex-direction: column; justify-content: center; gap: 10px; }
    .hv-std-slides { position: relative; width: 100%; height: 40px; }
    .hv-std-slides > * { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 40px; max-height: none; object-fit: contain;
        font-weight: 700; opacity: 0; transition: opacity .4s; }
    .hv-std-slides > .is-on { opacity: 1; }
    .hv-std-dots { display: flex; justify-content: center; gap: 4px; }
    .hv-std-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(45,226,127,.25); transition: background .4s; }
    .hv-std-dots i.is-on { background: var(--green); }

    /* Integration & compatibility: its own band, the full frame width, square corners, straight onto the contact section */
    .hv-integration-sec { border-top: 1px solid var(--light-grey); }
    .hv-integration-sec .ab-careers { padding: 72px 30px; border-radius: 0; }
    .hv-std-logo img { max-height: 56px; max-width: 90%; object-fit: contain; } /* design: logos ~56px tall, the wordmarks narrower */
    .hv-std-logos { display: grid; grid-template-columns: 1fr 1fr;  gap: 10px; margin-bottom: 18px; }
    .hv-std-logos span { display: grid; place-items: center; height: 32px; border-radius: 3px; background: #eef1f6; }
    .hv-std-logos img { max-height: 22px; max-width: 80%; object-fit: contain; }
    .hv-std-cibse { font-size: 30px; font-weight: 800; letter-spacing: -1px; color: #1d3fbb; }
    .hl .hv-std p { margin: 0; font-size: 16px; line-height: 26px; font-weight: 500; color: var(--black); }

    /* ================= Sector detail pages (sectors/build-to-rent.php) ================= */
    /* Hero: full-width photo; the intro sits in a dark translucent box the width of the frame, flush with its bottom */
    .bt-hero { background: #111 center / cover no-repeat; }
    .bt-hero .hl-frame { padding: 150px 0 0; border: 0; }
    .bt-hero-box { padding: 60px 40px 60px; background: rgba(5,8,7,.86); text-align: center; }
    .bt-hero .ct-tag { color: var(--green); background: #000; }
    .hl .bt-hero h1 { max-width: 1125px; margin: 0 auto; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.27; font-weight: 400; letter-spacing: -1px; color: var(--white); }
    .bt-hero h4 { max-width: 1060px; margin: 24px auto 30px; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.7; font-weight: 400; color: var(--white); }

    /* Challenge: centred heading + three white cards */
    .bt-challenge h3 { max-width: 1200px; margin: 0 auto 30px; }
    .bt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: left; }
    .bt-cards-4 { grid-template-columns: repeat(4, 1fr); }
    .bt-card { padding: 20px 20px 24px; border-radius: 4px; background: var(--white); }
    .bt-card .hl-icon { margin: 8px 8px 24px; }
    .hl .bt-card h4 { margin-bottom: 10px; }
    .hl .bt-card p { margin: 0; color: var(--mid-grey); }
.hl-section.hv-tech.hv-tech-split .hl-frame{padding-block:150px;}
@media (min-width: 992px) { .hl-section.hv-tech.hv-tech-split { display: flex; align-items: center; } .hv-tech-split > .hl-frame { width: 100%; } } /* text column centred against the photo */
    /* Process: step tabs under a wave; each step shows its info card + photo on the left, the building on the right */
    .bt-process .hl-frame { padding-top:60px; padding-bottom: 0; }
    .bt-process h3 {  margin: 0 auto 55px; color: var(--white); font-size:clamp(20px, 1.9vw, 30px);  line-height: clamp(28px, 2.vw, 40px);} /* plain values first: browsers without clamp() keep them */
    /* Steps slider (Swiper, site.js): the active step centred on black, the previous / next steps dimmed and peeking
       in at the sides; runs to the viewport edges (the section clips it) */
    .bt-slider { margin-inline: calc(40% - 40vw); overflow: visible; }
    .bt-slide { display: flex; align-items: center; gap: 20px; width: min(820px, 84vw); height:484px; padding: 26px 32px 46px; border-radius: 8px 8px 0 0; background: #0b1511; cursor: pointer; transition: background-color .6s ease; }
    .bt-slide > * { opacity: .45; transition: opacity .6s ease; }
   section.hl-section.hl-dark.bt-process .swiper .swiper-slide{border:0px; border-radius:0px; margin-right:0px!important;}
   section.hl-section.hl-dark.bt-process .swiper .swiper-slide:hover{border:0px;}

    .bt-slide.bt-on { background: #000; cursor: default;  } /* .bt-on: the step the tabs show (site.js) */
    .bt-slide.bt-on > * { opacity: 1; }
    .bt-step-info { flex: 0 0 161px; padding: 15px 13px; border-radius: 4px; background: var(--white); text-align: left; }
    .hl .bt-step-info h4 { margin-bottom: 9px; color: var(--black);  }
    .hl .bt-step-info p { margin: 0; color: var(--mid-grey); }
    .bt-step-img { flex: 1; align-self: stretch; background: center / contain no-repeat; }
    /* Desktop (design): every slide is 817 x 400 with its picture and card at fixed spots (--il/--it/--iw/--ih, --cl/--ct
       from build-to-rent.php), so the green circuit SVG across the track lands on the appliances, riser and dots */
    .bt-circuit { display: none; }
    @media (min-width: 992px) {
        .bt-slide { position: relative; display: block; padding: 0; }
        .bt-slide .bt-step-img { position: absolute; left: calc(var(--il) * 1.01); top: calc(var(--it) * 1); width: calc(var(--iw) * 1); height: calc(var(--ih) * .999); }
        /* design: the card is 252px wide at (--cl, --ct) in the 817 x 400 slide, title 20px, text 14px / 21px */
        .bt-slide .bt-step-info { position: absolute; left: calc(var(--cl) - 30px); top: var(--ct); width: 270px; padding: 20px 16px 28px; }
        .hl .bt-slide .bt-step-info h4 { margin-bottom: 8px; font-size: 20px; }
        .hl .bt-slide .bt-step-info p { font-size: 14px; line-height: 1.5; }
        .bt-circuit { display: block; position: absolute; left: 0; top: 0; z-index: 3; overflow: visible; pointer-events: none; transform: scaleX(1.0036); transform-origin: 0 0; } /* drawn for 817px slides (pitch 827px); the 820px slides sit 830px apart. It starts at the track's origin, where the first slide does */
        .bt-slide > * { opacity: 1; } /* design: the side slides' pictures and cards stay at full strength, only their background is lighter */
    }
    .bt-steps { position: relative; display: flex; justify-content: center; gap: 0 120px; padding:16px 0px; margin-top:10px; }
    .bt-steps-track { display: contents; }
    .bt-process { overflow-x: clip; }
    .bt-steps { z-index: 2; } /* above .graphifill, whose curve cuts the slides' bottom edge (Swiper and .graphifill are z-index 1) */
    .bt-steps .bt-step-tab { z-index: 1; }
    .hl .bt-why .rs-card h4 { font-size: 18px; line-height: 1.4; }
    .bt-step-tab { position: relative; border: 0; padding: 0; background: none; font: inherit; font-size:14px; color: rgba(255,255,255,.6); cursor: pointer; transition: color .3s; }
    .bt-step-tab:hover { color: var(--white); }
    .bt-step-tab.active { color: var(--green); font-weight: 600; }
    /* The dot on the green line; site.js sets its centre (left/top, relative to the section) as it rides the curve */
    .bt-wave-dot { position: absolute; z-index: 3; left: 0; top: 0; width: 14px; height: 14px; translate: -50% -50%; box-sizing: border-box; border: 3px solid var(--white); border-radius: 50%; background: var(--green); pointer-events: none; }

    /* ---------- Site footer ---------- */
    .site-footer { position: relative; overflow: hidden; padding: 0 clamp(16px, 5.5vw, 80px); background: #000; color: var(--white); }
    .footer-waves { position: absolute; left: 0; bottom: 0; width: 100%; height: 300px; pointer-events: none; }
    .footer-top {
        position: relative; max-width: 1280px; margin: 0 auto; padding: 80px 0 60px;
        display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 40px clamp(20px, 2.8vw, 40px);
    }
    .footer-logo { display: inline-block; width: 42px; color: var(--white); }
    .footer-logo svg { width: 100%; height: auto; transform: scaleY(-1); } /* SVG is drawn upside down, as in the header */
    .footer-brand p { max-width: 300px; margin: 13px 0 0; font-size:15px; line-height:20px; color: #b4b9c0; }
    .footer-col { display: flex; flex-direction: column; gap: 13px; }
    .footer-col h5 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; color: var(--white); }
    .footer-col a { font-size: 14px; line-height: 21px; color: #b4b9c0; text-decoration: none; white-space: nowrap; transition: color .2s; }
    .footer-col a:hover, .footer-bottom a:hover { color: var(--green); }
    /* Bold links column (About / Resources / Case Studies / Contact): styled like the column headings */
    .footer-main a { font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--white); }
    /* Follow us: social circles + the two header buttons */
    .footer-follow { align-items: flex-start; gap: 12px; }
    .footer-follow-label { font-size: 14px; line-height: 21px; color: #b4b9c0; }
    .footer-social { display: flex; gap: 8px; margin-bottom:10px; }
    .footer-col .footer-social a { display: block; width: 32px; height: 32px; border-radius: 50%; transition: opacity .2s; } /* the SVGs carry their own dark circle */
    .footer-social img { display: block; width: 100%; height: 100%; }
    .footer-col .footer-social a:hover { opacity: .75; }
    .footer-col .footer-btn { display: flex; align-items: center; justify-content: center; width: 111px; min-width: 100%; max-width: 160px; height:43px; border-radius: 4px; font-size:14px; font-weight: 500; color: var(--black); }
    .footer-col .footer-btn-white { background: var(--white); margin-bottom:10px; }
    .footer-col .footer-btn-green { background: var(--green); }
    .footer-col .footer-btn:hover { color: var(--black); opacity: .85; }
    .footer-bottom {font-weight: 400; position: relative; max-width: 1280px; margin: 0 auto; padding: 28px 0 32px;
        display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
        border-top: 1px solid rgba(255,255,255,.22); font-size: 13px; color: #9ca3af;
    }
    .sd-hero .btn-hl-green{border:1px solid var(--green);; }
    .sectTo-0 .hl-frame.hl-frame-split{padding-top:0px; padding-bottom:0px;}
    .footer-bottom nav { display: flex; gap: 24px; }
    .footer-bottom a { color: #9ca3af;font-size:13px; font-weight: 400; text-decoration: none; }
.priContan{padding-bottom: clamp(20px, 25px,40px);}
.priContan ul{padding-left:0px; list-style: none;}
.priContan li{position: relative; padding-left:20px; padding-bottom:10px;font-size: 14px;line-height: 20px;font-weight: 400;}
.priContan li::after{width:6px;height:6px; border-radius:50%; position:absolute; content:""; left:0px; top:8px; background-color: #050807;}
/* Solutions hero (.hv-hero): header + hero fit one screen (100vh) on desktop. The text sizes follow the viewport height; the panel
   picture takes whatever height is left (max-height 100%) and shrinks to fit, keeping its proportions. */
/* @media (min-width: 992px) and (min-height: 620px) {
    .hv-hero { min-height: calc(100vh - 85px); min-height: calc(100svh - 85px); }
    .hv-hero > .hl-frame { display: flex; flex-direction: column; height: calc(100vh - 85px); height: calc(100svh - 85px); padding-top: clamp(16px, 3vh, 58px); padding-bottom: clamp(16px, 3vh, 60px); }
    .hl .hv-hero h1 { font-size: clamp(28px, min(3.6vw, 4.6vh), 52px); }
    .hv-hero h4 { margin: clamp(8px, 1.6vh, 20px) auto clamp(14px, 2.4vh, 30px); font-size: clamp(14px, 1.9vh, 20px); }
    .hv-hero .btn-hl { height: clamp(40px, 5.2vh, 52px); }
    .hv-hero .ct-tag { align-self: center; }
    .hv-hero .hv-panel { flex: 1 1 0; min-height: 0; width: 100%; margin-top: clamp(14px, 2.6vh, 40px); border: 0; background: transparent; }
    .hv-hero .hv-panel > img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; }
} */

/* Side lines of every dark section share one fading green line (kept last so it wins over the per-section colours above). */
:is(.hl-dark, .hl-hero, .sp-caps, .ct-hero, .ab-hero, .ab-showroom, .rs-hero, .cs-hero, .hv-hero, .hv-glance) .hl-frame {
    border-inline: 1px solid transparent;
    border-image: linear-gradient(0deg, rgba(45, 226, 127, 0.20) 36.45%, rgba(45, 226, 127, 0.00) 81.66%) 1;
}
/* The video frame follows the "Why clients choose" frame, whose lines end at full strength: keep them solid here so the side lines run unbroken. */
.hl-dark .hl-frame.hl-frame-split { border-image: none; border-inline-color: rgba(45, 226, 127, 0.20); }

/* HVAC hero (Figma): rounded photo card inside the frame, text on the left over a dark fade, status cards floating on the right */
.hv-hero.hv-hero-card { background: var(--soft); border-bottom: 1px solid var(--green); overflow: visible; }
.hv-hero-card > .hl-frame { display: block; height: auto; padding: 20px 0 0; border: 0; border-image: none; }
.hv-hero-box { position: relative; display: flex; align-items: center; aspect-ratio: 16 / 9; padding: 40px 60px; border-radius: 8px 8px 0 0; overflow: hidden; background: #0a0a0a; isolation: isolate; }
.hv-hero-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hv-hero-copy { max-width: 700px; text-align: left; }
.hv-hero-card .hv-hero-copy .ct-tag { display: inline-block; margin-bottom: 30px; background: #222; color: var(--white); }
.hl .hv-hero-card h1 { margin: 0; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.19; letter-spacing: -1px; font-weight: 400; color: var(--white); }
.hv-hero-card h4 { margin: 24px 0 30px; max-width: 640px; font-size: 18px; line-height: 1.6; font-weight: 400; color: var(--white); }
.hv-float { position: absolute; right: 14%; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 22px; }
.hv-float-card { position: relative; display: grid; gap: 12px; width: 156px; padding: 10px; color: var(--white); border-radius: 10px; border: 1px solid #2DE27F; background: linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.08)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hv-float-card:nth-child(even) { margin-left: 90px; margin-right: -90px; }
.hv-float-card > img { display: block; width: 34px; height: 34px; }
.hv-float-card strong { font-size: 14px; font-weight: 500; line-height: 1.2; }
.hv-float-dot { position: absolute; top: 22px; right: 15px; width: 10px; height: 10px; translate: 0 -50%; border-radius: 50%; background: var(--green); }
.hv-float-dot.standby { background: #f5a524; }
.hv-float-dot.scheduled { background: #c3c8d1; }
.hv-float-card .hv-pill { justify-self: start; padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; line-height: 1.4; }
.hv-float-card .hv-pill.active { background: rgba(0,0,0,.5); color: var(--green); }
.hv-float-card .hv-pill.standby { background: rgba(0,0,0,.5); color: #f5a524; }
.hv-float-card .hv-pill.scheduled { background: rgba(0,0,0,.5); color: #d5d9e0; }
/* Status cards drift up and down, each on its own beat */
@keyframes hv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hv-float-card { animation: hv-float 5s ease-in-out infinite; }
.hv-float-card:nth-child(2) { animation-duration: 6s; animation-delay: -1.5s; }
.hv-float-card:nth-child(3) { animation-duration: 5.5s; animation-delay: -3s; }
.hv-float-card:nth-child(4) { animation-duration: 6.5s; animation-delay: -4.5s; }
@media (prefers-reduced-motion: reduce) { .hv-float-card { animation: none; } }
/* HVAC standards, manufacturer card (Figma): logos ~40px tall, left-aligned with the text; the dots stay centred under them */
.hv-std-slides > * { place-items: center start; }
.hv-std-slides > img { object-position: left center; }
/* Testimonial cards (Figma): bold 20px quote in black, no stars, name and role at 13px */
.hl .hl-quote { min-height: 280px; }
.hl .hl-quote p { font-size: 20px; line-height:30px; font-weight: 500; color: #0A0D14;}
.hl .hl-quote .hl-stars { display: none; }
.hl .hl-quote figcaption { font-size: 13px; line-height: 1.4; }
.hl .hl-quote figcaption strong { font-weight: 700; }
/* Technical partners tiles (Figma): ~78px tall, logos smaller than the generic .hl-logo */
.sp-partners .hl-logo { height: 78px; }
.sp-partners .hl-logo img { max-width:60%; max-height: 38px; }.sp-partners .hl-logo img[src$="/mitsubishi-heavy.png"] { max-width: 76%; max-height: 44px; }
.sp-partners .hl-logo img[src$="/samsung.png"] { max-width:60%; }
.sp-partners .hl-logo img[src$="/carrier.png"] { max-height: 46px; }
/* Partner tiles: rows wrap and a short last row is centred (desktop; below 992px they swipe, see rwd.css) */
@media (min-width: 992px) {
    .sp-partners { display: flex; flex-wrap: wrap; justify-content: center; }
    .sp-partners .hl-logo { flex: 0 0 calc((100% - (var(--cols, 5) - 1) * 10px) / var(--cols, 5)); }
}
/* Main Contractors hero: the sector hero (.sd-hero) on black, with a plain green label */
.sd-hero.sd-hero-solid { background: linear-gradient(to bottom, #000 calc(100% - 238px), var(--soft) 0); } /* black hero background (Leisure & Sports, Main Contractors), text styles stay as the standard sector hero */
.sd-hero-solid.sd-hero-pill > .hl-frame > .sd-tag { background: #222; color: var(--green); } /* Main Contractors: dark pill with green text on the black */
.sd-hero.sd-hero-black { background: linear-gradient(to bottom, #000 calc(100% - 238px), var(--soft) 0); }
.sd-hero-black > .hl-frame > .sd-tag { padding: 0; border: 0; background: none; color: var(--green); letter-spacing: .25em; }
.sd-hero-black .sd-hero-lead { max-width: none; }.hl .sd-hero-black h1 { max-width: 990px; font-size: 48px; line-height: 1.2; }
.hl .sd-hero-black .sd-hero-lead { font-size: 20px; line-height: 1.8; color: rgba(255,255,255,.9); }
@media (max-width: 991.98px) { .hl .sd-hero-black h1 { font-size: 34px; } .hl .sd-hero-black .sd-hero-lead { font-size: 16px; line-height: 1.6; } .sd-hero-black .sd-hero-lead br { display: none; } }.sd-hero-black .sd-hero-waves { top: 170px; } /* Figma: the wave lines run lower, behind the button and the top of the photo */
/* Main Contractors clients row (Figma): 80px tiles, logo frames at ~62% of the tile width (Antvic 82%); the frames' empty margins are clipped */
.tc-logos .hl-logo { height: 80px; overflow: hidden; }
.tc-logos .hl-logo img { flex: none; width: 62%; max-width: none; max-height: none; }
.tc-logos .hl-logo img[src$="/antvic.png"] { width: 82%; }
/* Testimonial cards with a role, a bold quote, a short text and stars (Main Contractors): the pre-Dandi look */
.hl .tq-classic .hl-quote { min-height: 320px; }
.hl .tq-classic .hl-quote .hl-role { font-size: 12px; }
.hl .tq-classic .hl-quote p { font-size: 14px; line-height: 1.6; font-weight: 400; color: var(--mid-grey); }
.hl .tq-classic .hl-quote .hl-stars { display: flex; }
.hl .tq-classic .hl-quote figcaption { font-size: 14px; }
.hv-hero-card .hv-hero-waves { top: 120px; z-index: 0; }

/* ---- Contact: hero matches the design (heading + phone/email left, 639px form card right, maps on white) ---- */
.ct-hero .hl-frame { padding-top: 86px; }
.ct-hero .hl-frame > .row { display: flex; flex-wrap: nowrap; gap: 48px; margin: 0; }
.ct-hero .hl-frame > .row > [class*="col-"] { width: auto; padding: 0; max-width: none; }
.ct-hero .hl-frame > .row > .col-lg-6:first-child { flex: 1 1 0; min-width: 0; }
.ct-hero .hl-frame > .row > .col-lg-6:last-child { flex: 0 0 639px; }
.ct-hero-waves { display: none; }
.hl .ct-hero h1 { max-width: 540px; }
.ct-list-lg { margin-top: 40px; gap: 14px; }
.ct-list-lg li { gap: 10px; font-size: 24px; font-weight: 600; }
.ct-list-lg svg { width: 32px; height: 32px; }
.ct-list-lg a { font-weight: 600; font-size:20px; }
.hl .ct-form-title { margin: 0; padding: 40px 40px 0; font-size: 22px; line-height: 30px; font-weight: 700; color: var(--black); }
.ct-hero .hs-form-frame { margin-top: -20px; }
.ct-office .ct-map { height: 435px; border-radius: 8px; }
.hl .ct-office h4 { margin: 28px 0 8px; font-size: 20px; line-height: 28px; }
.hl .ct-office p { font-size: 16px; }
.ct-offices-frame { padding-top: 80px; }
@media (max-width: 991.98px) {
    .ct-hero .hl-frame { padding-top: 80px; }
    .ct-hero .hl-frame > .row { flex-direction: column; gap: 40px; }
    .ct-hero .hl-frame > .row > .col-lg-6:last-child { flex: none; width: 100%; }
    .ct-list-lg li { font-size: 20px; }
    .ct-office .ct-map { height: 300px; }
}

/* About: showroom film (photo poster + play button, YouTube iframe on click) */
.ab-video { position: relative; overflow: hidden; }
.ab-video-play {
    position: absolute; top: 50%; left: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; padding: 0 0 0 4px;
    display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
    background: var(--green); color: var(--black); cursor: pointer; box-shadow: 0 8px 28px rgba(0,0,0,.35);
    transition: transform .25s ease, background .25s ease;
}
.ab-video-play:hover, .ab-video-play:focus-visible { transform: scale(1.08); background: var(--white); }
.ab-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }