/* ==========================================================================
   Sky Air Cooler - Main Stylesheet
   1.  Variables & Reset
   2.  Typography & Helpers
   3.  Buttons
   4.  Animations (fade-up / reveal)
   5.  Loader
   6.  Topbar
   7.  Header + Navigation (transparent -> solid on scroll)
   8.  Hero / Banner slider
   9.  Highlights
   10. About
   11. Counters
   12. Products
   13. Why Choose Us
   14. Benefits / Technology
   15. Applications
   16. Process
   17. Calculator
   18. Reviews
   18b. Trusted clients marquee
   19. Blogs
   20. FAQ
   21. Contact
   22. Footer
   22b. Inner pages (page hero, category intro, model cards)
   23. Quote popup
   24. Floating buttons
   25. Responsive
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES & RESET
   ========================================================================== */
:root {
    --teal: #0d7f92;
    --teal-dark: #095f6e;
    --teal-darker: #063f4a;
    --teal-light: #4bb3c4;
    --teal-lighter: #e6f5f8;
    --accent: #f5a623;

    --ink: #10222a;
    --body: #111;
    --line: #e2ebee;
    --soft: #f4f9fa;
    --white: #ffffff;

    --font-head: 'Barlow', 'Segoe UI', sans-serif;
    --font-body: 'Poppins', 'Segoe UI', sans-serif;
    /* geometric wide-tracked sans that matches the "AIR COOLER" wordmark */
    --font-brand: 'Montserrat', 'Barlow', 'Segoe UI', sans-serif;

    --radius: 14px;
    --radius-lg: 22px;
    --shadow-sm: 0 4px 18px rgba(16, 34, 42, .06);
    --shadow: 0 14px 40px rgba(16, 34, 42, .10);
    --shadow-lg: 0 26px 60px rgba(9, 95, 110, .18);

    --ease: cubic-bezier(.22, .61, .36, 1);
    /* near-expo ease-out: moves early, then glides to a stop. Kept separate
       from --ease so tightening the reveal never changes hover timings. */
    --ease-reveal: cubic-bezier(.16, 1, .3, 1);
    --header-h: 102px;
    --topbar-h: 42px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 10px);
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.75;
    color: var(--body);
    background: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    /* long model numbers, emails and URLs would otherwise set a minimum width
       that a phone-width column cannot meet, and push the layout sideways */
    overflow-wrap: break-word;
}

body.is-locked {
    overflow: hidden;
}

/* The browser hides [hidden] with display:none, but that is a plain UA rule -
   any component that sets its own display (flex, grid) beats it and the
   element stays on screen. Everything JS toggles via .hidden relies on this. */
[hidden] {
    display: none !important;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
}

a {
    color: var(--teal);
    text-decoration: none;
    transition: color .3s var(--ease);
}

a:hover {
    color: var(--teal-dark);
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

button {
    cursor: pointer;
    border: 0;
    background: none;
    color: inherit;
}

::selection {
    background: var(--teal);
    color: #fff;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--soft);
}

::-webkit-scrollbar-thumb {
    background: var(--teal-light);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--teal);
}

/* ==========================================================================
   2. TYPOGRAPHY & HELPERS
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-head);
    color: var(--ink);
    margin: 0 0 .6em;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.01em;
}

p {
    margin: 0 0 1.1em;
}

p:last-child {
    margin-bottom: 0;
}

/* visible to screen readers and search engines, not on screen */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.container {
    width: 100%;
    max-width: 1340px;
    margin-inline: auto;
    padding-inline: 20px;
}

.section {
    padding: 100px 0;
    position: relative;
}

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

.section--dark {
    background:
        radial-gradient(900px 500px at 10% 0%, rgba(75, 179, 196, .22), transparent 60%),
        linear-gradient(135deg, var(--teal-darker) 0%, #0a2b34 55%, #071e25 100%);
    color: rgba(255, 255, 255, .78);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
    color: #fff;
}

.section__head {
    max-width: 760px;
    margin: 0 auto 60px;
    text-align: center;
}

.section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-brand);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--teal);
    background: var(--teal-lighter);
    border-radius: 100px;
    padding: 7px 18px;
    margin-bottom: 18px;
}

/* fan glyph echoes the propeller mark in the logo */
.section__eyebrow::before {
    content: '\f863';
    font-family: 'Font Awesome 7 Pro';
    font-weight: 300;
    font-size: 13px;
    line-height: 1;
    letter-spacing: normal;
    color: var(--teal);
    animation: spin 3s linear infinite;
}

.section__head--light .section__eyebrow {
    background: rgba(255, 255, 255, .10);
    color: var(--teal-light);
}

.section__head--light .section__eyebrow::before {
    color: var(--teal-light);
}

/* On a dark band the light-mode chip is a hard white pill and the outline
   button is teal-on-teal - both are wrong. Scoped to --dark so every dark
   section picks it up without needing a modifier class in the markup. */
.section--dark .section__eyebrow {
    color: var(--teal-light);
    background: rgba(75, 179, 196, .14);
    border: 1px solid rgba(75, 179, 196, .32);
}

.section--dark .section__eyebrow::before {
    color: var(--teal-light);
}

.section--dark .btn--outline {
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

/* the collision dots have to be white too, or they vanish into the background */
.section--dark .btn--outline::before,
.section--dark .btn--outline::after {
    background-color: #fff;
}

.section--dark .btn--outline:hover {
    border-color: #fff;
    color: var(--teal-darker);
}

.section__title {
    font-size: clamp(23px, calc(14.67px + 2.135vw), 42px);
    margin-bottom: 18px;
}

/* Only the accent span the markup actually wrote gets the teal. initSplitHeadings
   wraps every word in .w > .w__in, and a bare "span" selector caught those too,
   which turned entire headings teal instead of just the highlighted phrase. */
.section__title span:not(.w):not(.w__in) {
    color: var(--teal);
}

.section--dark .section__title span:not(.w):not(.w__in) {
    color: var(--teal-light);
}

.section__lead {
    font-size: clamp(15px, calc(14.12px + 0.225vw), 17px);
    text-align: justify;
}


/* ---- long-form landing page copy ----
   .section__head caps at 760px and centres, which is right for a two line
   intro and wrong for eight hundred words. This runs the full container and
   ranges left instead. The two column split above 1200px keeps the measure
   near sixty characters, so the width does not cost readability. */
.locprose {
    margin: 0 0 26px;
    color: var(--body);
}

/* Opening copy under a section head. The pull-up closes the gap .section__head
   leaves behind, so it is applied only when the block actually follows one -
   after an ordinary paragraph it collided with the line above instead. */
.locprose--intro {
    margin: 0 0 50px;
}

.section__head+.locprose--intro {
    margin-top: -24px;
}

/* ---- product gallery (component/product-gallery.php) ---- */
.pgal__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 20px;
}

.pgal__item {
    margin: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .45s var(--ease), border-color .45s var(--ease),
        box-shadow .45s var(--ease);
}

.pgal__item:hover {
    transform: translateY(-6px);
    border-color: rgba(75, 179, 196, .5);
    box-shadow: var(--shadow);
}

/* square, to match the product shots - see .pcard__media for the same reason */
.pgal__item img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--white);
    transition: transform .6s var(--ease);
}

.pgal__item:hover img {
    transform: scale(1.05);
}

.pgal__item figcaption {
    padding: 12px 14px 13px;
    border-top: 1px solid var(--line);
    color: var(--body);
    font-size: 13.4px;
    line-height: 1.45;
    text-align: center;
}

/* ---- one block per product category ---- */
.catblock {
    margin: 0 0 4px;
    padding-top: 8px;
}

.catblock__title {
    margin: 0 0 14px;
    color: var(--ink);
    font-size: clamp(21px, calc(18.8px + 0.56vw), 26px);
    line-height: 1.3;
}

/* the grid that follows a category block needs air under it before the next
   heading starts */
.catblock+.models__grid {
    margin-bottom: 54px;
}

.locprose p {
    margin-bottom: 17px;
    font-size: 15.6px;
    line-height: 1.85;
}

.locprose p:last-child {
    margin-bottom: 0;
}

.locprose h3 {
    margin: 30px 0 12px;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.35;
}

.locprose h3:first-child {
    margin-top: 0;
}

.locprose strong {
    color: var(--ink);
    font-weight: 600;
}

.locprose a {
    color: var(--teal);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* No column-count here. It was added when the page carried one long block of
   copy, where two columns kept the measure readable. The copy is now split
   into a short block per section, and a two column rule on a single paragraph
   fills the left half and leaves the right half empty. Full width, one
   column. */

.section--dark .section__lead {
    color: rgba(255, 255, 255, .74);
}

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .02em;
    padding: 10px 20px;
    border-radius: 10px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .35s var(--ease);
    position: relative;
    white-space: nowrap;
}

.btn i {
    transition: transform .35s var(--ease);
}

.btn:hover i {
    transform: translateX(4px);
}

.btn--lg {
    padding: 16px 34px;
    font-size: 16px;
}

.btn--block {
    display: flex;
    width: 100%;
}

/* "collision" hover: two dots slide in from both edges, meet in the middle
   and expand to flood the button. Sized to cover a full-width btn--block. */
@keyframes btnCollideLeft {
    0% {
        left: -20px;
        width: 20px;
        height: 20px;
    }

    50% {
        left: 50%;
        width: 20px;
        height: 20px;
    }

    100% {
        left: 50%;
        width: 520px;
        height: 520px;
    }
}

@keyframes btnCollideRight {
    0% {
        right: -20px;
        width: 20px;
        height: 20px;
    }

    50% {
        right: 50%;
        width: 20px;
        height: 20px;
    }

    100% {
        right: 50%;
        width: 520px;
        height: 520px;
    }
}

.btn--primary {
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%);
    color: #fff;
    box-shadow: 0 10px 26px rgba(13, 127, 146, .32);
    /* isolate: keeps the z-index:-1 dots above the gradient but under the label */
    isolation: isolate;
    overflow: hidden;
}

.btn--primary::before,
.btn--primary::after {
    content: '';
    position: absolute;
    top: 50%;
    z-index: -1;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--teal-darker);
}

.btn--primary::before {
    left: -20px;
    transform: translate(-50%, -50%);
}

.btn--primary::after {
    right: -20px;
    transform: translate(50%, -50%);
}

.btn--primary:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(13, 127, 146, .42);
}

.btn--primary:hover::before {
    animation: btnCollideLeft .8s both;
}

.btn--primary:hover::after {
    animation: btnCollideRight .8s both;
}

/* same collision hover as btn--primary, so a primary + outline pair behaves
   identically. Only the fill colour differs - teal instead of teal-darker,
   since this one starts from a transparent background. */
.btn--outline {
    border-color: var(--teal);
    color: var(--teal);
    background: transparent;
    isolation: isolate;
    overflow: hidden;
}

.btn--outline::before,
.btn--outline::after {
    content: '';
    position: absolute;
    top: 50%;
    z-index: -1;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--teal);
}

.btn--outline::before {
    left: -20px;
    transform: translate(-50%, -50%);
}

.btn--outline::after {
    right: -20px;
    transform: translate(50%, -50%);
}

.btn--outline:hover {
    color: #fff;
    transform: translateY(-3px);
    /* the label holds its teal until the dots have met in the middle - flipping
       it to white any earlier leaves white text on a white button */
    transition: color .25s var(--ease) .4s,
        transform .35s var(--ease),
        border-color .35s var(--ease),
        box-shadow .35s var(--ease);
}

.btn--outline:hover::before {
    animation: btnCollideLeft .8s both;
}

.btn--outline:hover::after {
    animation: btnCollideRight .8s both;
}

/* WhatsApp recolour. Not a third button style - the shape, size, borders and
   the colliding-dot hover all still come from .btn--outline; this only swaps
   the brand colour, because a WhatsApp button that is not green stops being
   recognisable at a glance.
   Three tones, all from WhatsApp's own palette: the bright #25D366 does the
   border, the icon and the hover fill, which is what makes it read as
   WhatsApp instantly. The label is the dark #075E54, because #25D366 on white
   sits near 2:1 and the wordmark would be hard to read at this size. */
.btn--outline.btn--wa {
    border-color: #25d366;
    color: #075e54;
}

.btn--outline.btn--wa i {
    color: #25d366;
    transition: color .25s var(--ease) .4s;
}

.btn--outline.btn--wa::before,
.btn--outline.btn--wa::after {
    background-color: #25d366;
}

.btn--outline.btn--wa:hover,
.btn--outline.btn--wa:hover i {
    color: #fff;
}

.btn--outline.btn--wa:hover {
    border-color: #25d366;
    box-shadow: 0 12px 26px rgba(37, 211, 102, .32);
}

.btn--ghost {
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(6px);
}

.btn--ghost:hover {
    background: #fff;
    color: var(--teal-dark);
    border-color: #fff;
    transform: translateY(-3px);
}

/* ==========================================================================
   4. ANIMATIONS
   ========================================================================== */
/* No blanket `will-change` here. It used to promote every one of the ~100
   animated elements to its own compositor layer for the whole session, which
   is what made scrolling stutter. JS sets it only while an element animates. */
/* opacity finishes before the movement does, so an element is already readable
   while it is still gently settling - that is what reads as smooth rather than
   as a slide that snaps to a stop */
[data-animate] {
    opacity: 0;
    transition:
        opacity .75s var(--ease-reveal),
        transform 1.05s var(--ease-reveal);
}

/* the hair of scale is what gives the card a sense of coming forward rather
   than just sliding - kept at .985 so text never blurs on the way in */
[data-animate="fade-up"] {
    transform: translateY(42px) scale(.985);
}

[data-animate="fade-down"] {
    transform: translateY(-42px);
}

[data-animate="fade-left"] {
    transform: translateX(48px);
}

[data-animate="fade-right"] {
    transform: translateX(-48px);
}

[data-animate="zoom-in"] {
    transform: scale(.9);
}

[data-animate].is-visible {
    opacity: 1;
    transform: none;
}

/* ---- split heading reveal (markup built by initSplitHeadings) -------------
   Each word sits in a masked box and slides up out of it. This is what gives
   the heading its own motion instead of riding the block fade.
   -------------------------------------------------------------------------- */
.w {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    /* the mask would otherwise clip descenders on g, y, p */
    padding-bottom: .14em;
    margin-bottom: -.14em;
}

.w__in {
    display: inline-block;
    transform: translateY(105%);
    transition: transform .95s var(--ease-reveal);
}

.is-visible .w__in,
[data-split].is-visible .w__in {
    transform: none;
}

/* A block holding a split heading only fades - otherwise the block and the
   words both travel upwards and the movement reads as doubled.
   Kept as two rules on purpose: one invalid selector in a list drops the whole
   rule, so a browser without :has() would lose the direct case as well. */
[data-animate][data-split] {
    transform: none;
}

[data-animate]:has([data-split]) {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* JS skips splitting entirely here, but guard the styles too */
    .w__in {
        transform: none;
        transition: none;
    }

    .section__eyebrow::before,
    .footer__fan,
    .clients__track,
    .reviews__track,
    .flags__track,
    .errorpage__fan,
    .thanks__fan,
    .thanks__pulse,
    .thanks__mark img,
    .loader__pulse,
    .loader__fan,
    .loader__bar,
    .hero__slide.is-active img,
    .hero__dots button.is-active::after,
    .btn--primary:hover::before,
    .btn--primary:hover::after,
    .btn--outline:hover::before,
    .btn--outline:hover::after,
    .pcard__btn:hover::before,
    .pcard__btn:hover::after {
        animation: none;
    }

    /* without the fill animation the labels must not go white */
    .btn--outline:hover {
        background: var(--teal);
        color: #fff;
        transition-delay: 0s;
    }

    .pcard__btn:hover {
        background: var(--teal);
        color: #fff;
        transition-delay: 0s;
    }

    .pcard__overlay {
        transition: none;
    }

    /* banners swap in place instead of sliding and drifting */
    .hero__slide.is-active,
    .hero__slide.is-active img {
        animation: none;
    }

    /* without its sweep animation the streak would just sit there */
    .hero__slide.is-active::after {
        display: none;
    }

    html {
        scroll-behavior: auto;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes floatY {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-16px);
    }
}

@keyframes blobDrift {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(40px, -30px) scale(1.08);
    }

    66% {
        transform: translate(-30px, 25px) scale(.95);
    }
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(38px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulseRing {
    0% {
        box-shadow: 0 0 0 0 rgba(75, 179, 196, .55);
    }

    70% {
        box-shadow: 0 0 0 22px rgba(75, 179, 196, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(75, 179, 196, 0);
    }
}

@keyframes scrollDot {
    0% {
        opacity: 0;
        transform: translate(-50%, 0);
    }

    40% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, 16px);
    }
}

/* ==========================================================================
   5. LOADER  (markup: component/loader.php)
   ========================================================================== */
.loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 30px;
    background:
        radial-gradient(520px 360px at 50% 44%, rgba(75, 179, 196, .22), transparent 68%),
        linear-gradient(160deg, var(--teal-darker) 0%, #0a2b34 55%, #061b22 100%);
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
}

.loader.is-done {
    opacity: 0;
    visibility: hidden;
}

.loader__mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 110px;
    height: 110px;
    transition: transform .3s var(--ease);
}

/* the mark drifts up as the screen clears */
.loader.is-done .loader__mark {
    transform: translateY(-16px) scale(.92);
}

/* ring of light expanding out from behind the blades */
.loader__pulse {
    position: absolute;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: rgba(75, 179, 196, .16);
    animation: pulseRing 2.4s ease-out infinite;
}

.loader__fan {
    position: relative;
    width: 84px;
    height: 84px;
    transform-origin: 50% 50%;
    animation: spin 1.5s linear infinite;
    filter: drop-shadow(0 0 18px rgba(75, 179, 196, .5));
}

/* indeterminate bar - no real load percentage exists to report */
.loader__track {
    width: min(190px, 56vw);
    height: 3px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, .12);
}

.loader__bar {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--teal), var(--teal-light));
    animation: loaderSlide 1.25s var(--ease) infinite;
}

@keyframes loaderSlide {
    from {
        transform: translateX(-110%);
    }

    to {
        transform: translateX(360%);
    }
}

/* ==========================================================================
   6. TOPBAR
   ========================================================================== */
.topbar {
    position: fixed;
    inset: 0 0 auto 0;
    /* below the header (1000): the mobile drawer and its overlay sit inside the
       header, so anything ranked above it would punch through the dimmed sheet */
    z-index: 999;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    /* fully transparent over the banner - the hero's own top scrim keeps the
       text readable, and the bar slides away as soon as the page scrolls */
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    font-size: 13.5px;
    color: rgba(255, 255, 255, .90);
    transition: transform .4s var(--ease), opacity .35s var(--ease);
}

.topbar.is-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.topbar__contact {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}

.topbar__contact li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar__contact i {
    color: var(--teal-light);
    font-size: 12px;
}

.topbar__contact a {
    color: inherit;
}

.topbar__contact a:hover {
    color: var(--teal-light);
}

.topbar__right {
    display: flex;
    align-items: center;
    gap: 22px;
}

.topbar__country {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 0;
}

.topbar__country>i {
    color: var(--teal-light);
    font-size: 12px;
}

.topbar__country-caret {
    font-size: 10px;
    transition: transform .3s var(--ease);
}

.topbar__country:hover .topbar__country-caret {
    transform: rotate(180deg);
}

.topbar__country-list {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all .32s var(--ease);
}

.topbar__country:hover .topbar__country-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.topbar__country-list a {
    display: block;
    padding: 8px 18px;
    color: var(--body);
    font-size: 14px;
}

.topbar__country-list a:hover {
    background: var(--teal-lighter);
    color: var(--teal);
}

.topbar__social {
    display: flex;
    gap: 8px;
}

.topbar__social a {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 12px;
    transition: all .3s var(--ease);
}

.topbar__social a:hover {
    background: var(--teal-light);
    color: #fff;
    transform: translateY(-3px);
}

/* ==========================================================================
   7. HEADER + NAVIGATION
   ========================================================================== */
.header {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: transparent;
    transition:
        background .45s var(--ease),
        box-shadow .45s var(--ease),
        top .4s var(--ease),
        height .4s var(--ease);
}

/* scrolled state -> solid background */
.header.is-sticky {
    top: 0;
    height: 84px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 30px rgba(16, 34, 42, .12);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.header__logo img {
    height: 84px;
    /* the tag carries width="300" height="161" so the browser can reserve the
       space before the GIF lands. Every rule here sizes by height only, and
       without this the 300 would come through as a presentational hint and
       stretch the logo across the nav - auto puts it back on its own ratio
       while keeping the shift protection. */
    width: auto;
    transition: height .4s var(--ease), filter .4s var(--ease);
    /* logo art is dark on transparent -> invert it over the dark banner */
    filter: brightness(0) invert(1);
}

.header.is-sticky .header__logo img {
    height: 72px;
    filter: none;
}

.header__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--teal), var(--teal-light));
    transition: width .1s linear;
    opacity: 0;
}

.header.is-sticky .header__progress {
    opacity: 1;
}

/* Nav */
.nav__list {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    padding: 10px 8px;
    border-radius: 8px;
    position: relative;
    transition: color .3s var(--ease), background .3s var(--ease);
    text-transform: uppercase;
}

.nav__link i {
    font-size: 11px;
    transition: transform .3s var(--ease);
}

.nav__link::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    background: var(--teal-light);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--ease);
}

.nav__item:hover>.nav__link::after,
.nav__link.is-active::after {
    transform: scaleX(1);
}

.nav__item:hover>.nav__link i {
    transform: rotate(180deg);
}

.header.is-sticky .nav__link {
    color: var(--ink);
}

.header.is-sticky .nav__link:hover,
.header.is-sticky .nav__link.is-active {
    color: var(--teal);
}

.header.is-sticky .nav__link::after {
    background: var(--teal);
}

/* Dropdown */
.nav__item--has-child {
    position: relative;
}

.nav__dropdown {
    position: absolute;
    top: calc(100% - -10px);
    left: 0;
    min-width: 310px;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: all .35s var(--ease);
    border-top: 3px solid var(--teal);
    z-index: 1;
}

.nav__item--has-child:hover>.nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav__dropdown a {
    display: block;
    padding: 10px 22px;
    font-size: 14.5px;
    color: var(--body);
    transition: all .3s var(--ease);
}

.nav__dropdown a:hover {
    background: var(--teal-lighter);
    color: var(--teal);
    padding-left: 30px;
}

.header__actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header.is-sticky .header__cta {
    box-shadow: 0 8px 20px rgba(13, 127, 146, .28);
}

/* Mobile toggle */
.header__toggle {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.header__toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all .3s var(--ease);
}

.header.is-sticky .header__toggle {
    background: var(--teal-lighter);
    border-color: var(--line);
}

.header.is-sticky .header__toggle span {
    background: var(--teal-dark);
}

.nav__close {
    display: none;
}

.nav__mobile-cta {
    display: none;
}

.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 30, 37, .55);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: all .4s var(--ease);
    z-index: 1001;
}

.nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   8. HERO / BANNER SLIDER
   The banner artwork carries its own headline and products, so nothing is
   overlaid on it - only the arrows, dots and a scrim for the transparent header.
   ========================================================================== */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--teal-darker);
}

/* keeps the transparent header readable over bright banner tops */
.hero::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 3;
    height: calc(var(--topbar-h) + var(--header-h) + 50px);
    background: linear-gradient(to bottom, rgba(4, 30, 37, .70), rgba(4, 30, 37, .28) 60%, transparent);
    pointer-events: none;
}

.hero__slides {
    /* grid stacking: every slide shares one cell, so the box never collapses
       and the height always follows this ratio */
    display: grid;
    width: 100%;
    /* taller than the 1920x900 artwork, so object-fit trims a little off each
       side - lower the second number for more height, raise it for less crop */
    aspect-ratio: 1920 / 1060;
    /* on an ultrawide monitor the ratio alone would make the banner ~1400px
       tall, and on a short laptop or a phone in landscape it would fill the
       whole screen - cap it and let object-fit take up the slack */
    max-height: 90vh;
}

.hero__slide {
    grid-area: 1 / 1;
    /* the scrim and the copy are positioned against this */
    position: relative;
    overflow: hidden;
    visibility: hidden;
    /* the outgoing banner stays put and stays visible until the incoming one
       has fully covered it - otherwise there is an empty frame in between */
    transition: visibility 0s linear 1.4s;
}

.hero__slide.is-active {
    visibility: visible;
    z-index: 2;
    transition: visibility 0s linear 0s;
    animation: heroPushIn 1.15s var(--ease) both;
}

/* ---- parallax push ---------------------------------------------------------
   The incoming banner slides in over the one already on screen while its own
   photo drifts the other way at a slower rate. The gap between the two speeds
   is what reads as depth. Only the incoming slide animates - the outgoing one
   holds its position underneath until it is fully covered.
   -------------------------------------------------------------------------- */
@keyframes heroPushIn {
    from {
        transform: translateX(100%);
    }

    to {
        transform: none;
    }
}

@keyframes heroPushInBack {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: none;
    }
}

/* the banner <img> sits in a <picture> for the phone crop - contents keeps
   the picture out of layout, so the img still sizes against the slide */
.hero__slide picture {
    display: contents;
}

.hero__slide img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

/* ---- banner copy ----
   Two of the three banners are bright, so the text needs its own ground. A
   left-to-right scrim darkens the side the copy sits on and fades out before
   the product, which is on the right in all three shots.
   ::before, not ::after - ::after already carries the light sweep that runs as
   a new banner lands, and a scrim there killed it. */
.hero__slide::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
            rgba(4, 30, 37, .86) 0%,
            rgba(4, 30, 37, .66) 30%,
            rgba(4, 30, 37, .22) 52%,
            transparent 70%);
}

.hero__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;

    /* The slide holds its visibility for 1.4s after it stops being active, so
       the artwork does not blink out before the incoming banner covers it.
       The copy cannot wait that long - every slide puts its text in the same
       place on the left, so the outgoing and incoming words sat on top of each
       other for the whole hand-off. Fade it out on its own, quicker timeline
       and bring the new one in once the banner has landed. */
    opacity: 0;
    transition: opacity .35s var(--ease);

    /* the box spans the whole banner; only the copy itself should take clicks,
       or it sits over the arrows' hit area */
    pointer-events: none;
}

.hero__slide.is-active .hero__content {
    opacity: 1;
    transition: opacity .55s var(--ease) .35s;
}

.hero__text {
    pointer-events: auto;
}

.hero__content>.container {
    width: 100%;
}

.hero__text {
    max-width: 620px;
    /* clears the transparent header sitting over the top of the banner */
    padding-top: calc(var(--topbar-h) + var(--header-h));
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 7px 16px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px);
    color: #fff;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* a <p>, not a heading - the page's single H1 is the screen-reader one at the
   top of the section, and three rotating headings would fight it */
.hero__title {
    margin: 0 0 16px;
    color: #fff;
    font-family: var(--font-head);
    font-size: clamp(30px, calc(19.4px + 2.7vw), 56px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.01em;
}

.hero__title span {
    color: var(--teal-light);
}

.hero__lead {
    margin: 0 0 28px;
    max-width: 540px;
    color: rgba(255, 255, 255, .82);
    font-size: clamp(15px, calc(13.7px + 0.34vw), 18px);
    line-height: 1.75;
}

@media (max-width: 991px) {
    .hero__text {
        max-width: 100%;
    }

    /* Below this width the 1920x1060 crop stops leaving room for the copy - at
       768px it gave a 426px banner for a 418px block, which is 8px of
       clearance. Drop the ratio and let a minimum height carry it; object-fit
       keeps the artwork filling the frame either way. */
    .hero__slides {
        aspect-ratio: auto;
        min-height: 500px;
    }

    /* the product drifts to the middle once the banner is narrow, so the scrim
       covers more of the frame rather than just the left edge */
    .hero__slide::before {
        background: linear-gradient(90deg,
                rgba(4, 30, 37, .90) 0%,
                rgba(4, 30, 37, .78) 45%,
                rgba(4, 30, 37, .52) 100%);
    }
}

@media (max-width: 767px) {

    /* a phone needs more again: the title wraps to two lines and the lead to
       four. min-height beats max-height in CSS, so the copy still fits on a
       short landscape screen. */
    .hero__slides {
        min-height: 580px;
    }

    /* the block stays centred in the frame - only the text alignment changes */
    .hero__text {
        text-align: center;
    }

    /* the lead carries a max-width, so it needs centring in its own right */
    .hero__lead {
        margin: 0 auto 22px;
    }

    /* The product sits right of centre in all three shots, but not at the same
       point in each - the night cooler is at 84% of the frame, the other two
       nearer 72%. A single value clipped one banner or another, so each slide
       carries its own --pos and this is the only place it is read. */
    .hero__slide img {
        object-position: var(--pos, 76%) 50%;
    }

    /* Vertical rather than left-to-right. On a narrow frame the horizontal
       version covered the whole picture, product included; this keeps the ground
       behind the words dark and lets the foot of the frame come through. */
    .hero__slide::before {
        background: linear-gradient(180deg,
                rgba(4, 30, 37, .92) 0%,
                rgba(4, 30, 37, .86) 38%,
                rgba(4, 30, 37, .52) 62%,
                rgba(4, 30, 37, .18) 100%);
    }

    .hero__eyebrow {
        margin-bottom: 12px;
    }
}

/* One animation, not two: the entry parallax and the slow settle live in the
   same keyframes, so there is no jump where a second animation would take over. */
.hero__slide.is-active img {
    animation: heroPushImg 5.6s var(--ease) both;
}

@keyframes heroPushImg {
    0% {
        transform: translateX(-24%) scale(1.2);
    }

    21% {
        transform: translateX(0) scale(1.07);
    }

    100% {
        transform: none;
    }
}

@keyframes heroPushImgBack {
    0% {
        transform: translateX(24%) scale(1.2);
    }

    21% {
        transform: translateX(0) scale(1.07);
    }

    100% {
        transform: none;
    }
}

/* light sweeping across the seam as the new banner lands */
.hero__slide.is-active::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .20) 50%, transparent 62%);
    animation: heroSweep 1.3s var(--ease) both;
}

@keyframes heroSweep {
    from {
        transform: translateX(-105%);
    }

    to {
        transform: translateX(105%);
    }
}

/* stepping backwards flips every direction */
.hero__slides.is-back .hero__slide.is-active {
    animation-name: heroPushInBack;
}

.hero__slides.is-back .hero__slide.is-active img {
    animation-name: heroPushImgBack;
}

.hero__slides.is-back .hero__slide.is-active::after {
    animation-name: heroSweepBack;
}

@keyframes heroSweepBack {
    from {
        transform: translateX(105%);
    }

    to {
        transform: translateX(-105%);
    }
}

/* Arrows */
.hero__arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: clamp(15px, calc(14.12px + 0.225vw), 17px);
    color: #fff;
    background: rgba(6, 40, 48, .38);
    border: 1px solid rgba(255, 255, 255, .32);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: all .35s var(--ease);
}

.hero:hover .hero__arrow,
.hero__arrow:focus-visible {
    opacity: 1;
}

.hero__arrow:hover {
    background: var(--teal);
    border-color: var(--teal);
    box-shadow: 0 10px 26px rgba(13, 127, 146, .5);
}

.hero__arrow--prev {
    left: 26px;
}

.hero__arrow--next {
    right: 26px;
}

.hero__arrow--prev:hover {
    transform: translateY(-50%) translateX(-4px);
}

.hero__arrow--next:hover {
    transform: translateY(-50%) translateX(4px);
}

/* Dots with an autoplay progress fill */
.hero__dots {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    gap: 10px;
}

.hero__dots button {
    position: relative;
    overflow: hidden;
    width: 34px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .35);
    transition: width .35s var(--ease);
}

.hero__dots button.is-active {
    width: 62px;
}

.hero__dots button::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 4px;
    background: var(--teal-light);
}

/* duration must match DELAY in initHeroSlider() so the bar tracks the autoplay */
.hero__dots button.is-active::after {
    animation: heroDotFill 5s linear forwards;
}

/* autoplay pauses on hover, so the fill has to pause with it */
.hero__slides:hover~.hero__dots button.is-active::after {
    animation-play-state: paused;
}

@keyframes heroDotFill {
    to {
        width: 100%;
    }
}

/* ==========================================================================
   9. HIGHLIGHTS
   ========================================================================== */
.highlights {
    position: relative;
    z-index: 5;
    /* no negative pull-up: the banner artwork has its own text near the bottom
       and these cards would sit on top of it */
    padding: 70px 0 20px;
}

.highlights__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.highlight-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 34px 28px;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
    position: relative;
    overflow: hidden;
}

.highlight-card::before {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 4px;
    background: linear-gradient(90deg, var(--teal), var(--teal-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease);
}

.highlight-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.highlight-card:hover::before {
    transform: scaleX(1);
}

.highlight-card__icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 25px;
    color: var(--teal);
    background: var(--teal-lighter);
    margin-bottom: 20px;
    transition: all .45s var(--ease);
}

.highlight-card:hover .highlight-card__icon {
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    color: #fff;
    transform: rotate(-8deg) scale(1.06);
}

.highlight-card h4 {
    font-size: clamp(16px, calc(14.25px + 0.449vw), 20px);
    margin-bottom: 8px;
}

.highlight-card p {
    font-size: 14.5px;
    margin: 0;
}

/* ==========================================================================
   10. ABOUT
   ========================================================================== */
.about__grid {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 64px;
    /* stretch, not center: the photo tracks the height of the text beside it
       instead of floating in the middle with a gap above and below */
    align-items: stretch;
}

.about__media {
    position: relative;
    /* the floating badges sit outside the photo, so leave them room */
    padding: 26px 0 34px;
}

.about__media-main {
    position: relative;
    height: 100%;
    min-height: 460px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: linear-gradient(140deg, var(--teal-dark), var(--teal-darker));
}

.about__media-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--ease);
}

.about__media:hover .about__media-main img {
    transform: scale(1.06);
}

/* scrim so the caption stays legible over the photo */
.about__media-main::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 48%;
    background: linear-gradient(to top, rgba(4, 38, 46, .88), transparent);
    pointer-events: none;
}

.about__media-caption {
    position: absolute;
    left: 26px;
    bottom: 22px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .03em;
    color: #fff;
}

.about__media-caption i {
    color: var(--teal-light);
}

.about__experience {
    position: absolute;
    left: -24px;
    top: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    color: #fff;
    padding: 18px 24px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    animation: floatY 6s ease-in-out infinite;
}

.about__experience strong {
    font-family: var(--font-head);
    font-size: clamp(22px, calc(14.11px + 2.022vw), 40px);
    font-weight: 800;
    line-height: 1;
}

.about__experience span {
    font-size: 12.5px;
    line-height: 1.35;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.about__pillars {
    display: grid;
    gap: 20px;
    margin: 30px 0;
}

.about__pillar {
    display: flex;
    gap: 18px;
    padding: 20px 22px;
    background: var(--soft);
    border-radius: var(--radius);
    border-left: 4px solid var(--teal);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.about__pillar:hover {
    transform: translateX(8px);
    box-shadow: var(--shadow-sm);
}

.about__pillar>i {
    font-size: 24px;
    color: var(--teal);
    flex-shrink: 0;
    margin-top: 4px;
}

.about__pillar h4 {
    font-size: clamp(15.8px, calc(14.84px + 0.247vw), 18px);
    margin-bottom: 4px;
}

.about__pillar p {
    font-size: 14.5px;
    margin: 0;
}

.about__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Centred under a full-width grid rather than beside a column of text, with
   room above so the buttons read as the section's close and not as another
   row of the grid. */
.about__actions--center {
    justify-content: center;
    margin-top: 42px;
}

/* ==========================================================================
   11. COUNTERS
   ========================================================================== */
.counters {
    position: relative;
    isolation: isolate;
    padding: 96px 0;
    background-image: url('../img/11.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* photo stays put while the section scrolls over it */
    background-attachment: fixed;
}

/* brand overlay - the photo alone is too light for white numbers */
.counters::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(900px 520px at 15% 0%, rgba(75, 179, 196, .32), transparent 62%),
        linear-gradient(135deg, rgba(6, 63, 74, .93) 0%, rgba(9, 95, 110, .86) 48%, rgba(4, 26, 33, .93) 100%);
}

.counters__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    text-align: center;
}

.counter {
    position: relative;
    overflow: hidden;
    padding: 36px 22px 32px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .15);
    transition: transform .45s var(--ease), background .45s var(--ease),
        border-color .45s var(--ease), box-shadow .45s var(--ease);
}

/* accent bar that draws in on hover */
.counter::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg, var(--teal), var(--teal-light));
    transform: scaleX(0);
    transition: transform .45s var(--ease);
}

.counter:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, .10);
    border-color: rgba(75, 179, 196, .5);
    box-shadow: 0 22px 46px rgba(2, 20, 26, .45);
}

.counter:hover::after {
    transform: scaleX(1);
}

/* solid fill by default: a translucent teal circle disappears into the teal
   overlay behind it, so the icon needs its own contrast */
.counter__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 25px;
    color: #fff;
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%);
    box-shadow: 0 10px 24px rgba(4, 30, 37, .45);
    transition: all .45s var(--ease);
}

.counter:hover .counter__icon {
    color: var(--teal-dark);
    background: #fff;
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 14px 30px rgba(4, 30, 37, .55);
}

.counter__value {
    display: block;
    font-family: var(--font-head);
    font-size: clamp(24px, calc(15.24px + 2.247vw), 44px);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 6px;
}

.counter__label {
    display: block;
    font-family: var(--font-brand);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}

/* ==========================================================================
   12. PRODUCTS
   ========================================================================== */
/* Category tabs: list on the left, photo + detail on the right */
.products__tabs {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    gap: 30px;
    align-items: start;
    margin-bottom: 70px;
}

/* the panel runs taller than the tab list, so the tabs hold their place while
   the detail beside them scrolls past */
.ptabs__nav {
    display: grid;
    gap: 12px;
    position: sticky;
    top: calc(var(--header-h) + 30px);
}

.ptab {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: left;
    padding: 18px 20px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
    transition: all .4s var(--ease);
}

.ptab__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 20px;
    color: var(--teal);
    background: var(--teal-lighter);
    transition: all .4s var(--ease);
}

.ptab__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ptab__text strong {
    font-family: var(--font-head);
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
    transition: color .4s var(--ease);
}

.ptab__text small {
    font-size: 12.5px;
    color: var(--body);
    transition: color .4s var(--ease);
}

.ptab__caret {
    margin-left: auto;
    font-size: 12px;
    color: var(--teal-light);
    transition: all .4s var(--ease);
}

.ptab:hover {
    border-color: var(--teal-light);
    transform: translateX(4px);
}

.ptab.is-active {
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    border-color: transparent;
    box-shadow: 0 14px 30px rgba(13, 127, 146, .34);
    transform: none;
}

.ptab.is-active .ptab__icon {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.ptab.is-active .ptab__text strong {
    color: #fff;
}

.ptab.is-active .ptab__text small {
    color: rgba(255, 255, 255, .8);
}

.ptab.is-active .ptab__caret {
    color: #fff;
    transform: translateX(3px);
}

/* Panels */
.ptabs__panels {
    position: relative;
}

.ppanel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.ppanel[hidden] {
    display: none;
}

.ppanel.is-active {
    animation: fadeSlideIn .45s var(--ease) both;
}

.ppanel__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--teal-lighter);
}

.ppanel__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease);
}

.ppanel:hover .ppanel__media img {
    transform: scale(1.05);
}

.ppanel__badge {
    position: absolute;
    left: 18px;
    bottom: 18px;
    font-family: var(--font-brand);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(6, 63, 74, .78);
    backdrop-filter: blur(4px);
    padding: 8px 16px;
    border-radius: 100px;
}

.ppanel__body {
    padding: 0 30px 32px;
}

.ppanel__body h4 {
    font-size: clamp(18.4px, calc(16.38px + 0.517vw), 23px);
    margin-bottom: 10px;
}

.ppanel__body>p {
    font-size: 15px;
    margin-bottom: 20px;
}

.ppanel__specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 22px;
    margin-bottom: 26px;
}

.ppanel__specs li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--body);
}

.ppanel__specs i {
    flex-shrink: 0;
    margin-top: 4px;
    font-size: 14px;
    color: var(--teal);
}

.ppanel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Filter */
.products__filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}

.filter-btn {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 14.5px;
    padding: 11px 24px;
    border-radius: 100px;
    background: var(--soft);
    color: var(--body);
    border: 1px solid var(--line);
    transition: all .35s var(--ease);
}

.filter-btn:hover {
    color: var(--teal);
    border-color: var(--teal-light);
}

.filter-btn.is-active {
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(13, 127, 146, .3);
}

/* three across, matching the model grid on the category pages - these are the
   same cards, so they need the same room to breathe */
.products__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.product-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

/* the filter buttons only add the class - without this the card stays on
   screen and the filter looks broken */
.product-card.is-hidden,
.pcard.is-hidden {
    display: none;
}

.product-card__media {
    height: 170px;
    display: grid;
    place-items: center;
    font-size: 58px;
    color: var(--teal);
    background:
        radial-gradient(300px 160px at 50% 30%, rgba(75, 179, 196, .22), transparent 70%),
        var(--teal-lighter);
    position: relative;
    overflow: hidden;
}

.product-card__media i {
    transition: transform .6s var(--ease);
}

.product-card:hover .product-card__media i {
    transform: scale(1.12) rotate(15deg);
}

.product-card__tag {
    position: absolute;
    top: 14px;
    left: 14px;
    font-family: var(--font-head);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--teal);
    padding: 5px 12px;
    border-radius: 100px;
}

.product-card__body {
    padding: 24px 22px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-card__body h4 {
    font-size: clamp(15.4px, calc(14.48px + 0.236vw), 17.5px);
    margin-bottom: 8px;
    line-height: 1.3;
}

.product-card__body>p {
    font-size: 14px;
    margin-bottom: 16px;
}

.product-card__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.product-card__specs li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--teal-dark);
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 5px 12px;
}

.product-card__btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 14px;
    color: var(--teal);
}

.product-card__btn i {
    transition: transform .35s var(--ease);
}

.product-card:hover .product-card__btn i {
    transform: translateX(5px);
}

/* ==========================================================================
   13. WHY CHOOSE US
   ========================================================================== */
/* Split layout: the heading holds the left column and stays put while the
   reasons scroll past it. Breaks up the run of centred-heading-plus-grid
   sections above and below. */
.why__layout {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 64px;
    align-items: start;
}

.why__intro {
    position: sticky;
    top: calc(var(--header-h) + 30px);
}

.why__intro .section__title {
    margin-bottom: 18px;
}

.why__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px 26px;
    margin-top: 32px;
}

.why__call {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(15px, calc(14.12px + 0.225vw), 17px);
    color: #fff;
}

.why__call i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 15px;
    color: var(--teal-light);
    background: rgba(75, 179, 196, .12);
    border: 1px solid rgba(75, 179, 196, .30);
    transition: all .35s var(--ease);
}

.why__call span {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.why__call small {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    color: rgba(255, 255, 255, .58);
}

.why__call:hover {
    color: #fff;
}

.why__call:hover i {
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    border-color: transparent;
    transform: scale(1.08);
}

.why__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.why-card {
    position: relative;
    overflow: hidden;
    padding: 30px 26px 28px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .10);
    transition: transform .45s var(--ease), border-color .45s var(--ease),
        background .45s var(--ease), box-shadow .45s var(--ease);
}

/* teal wash that fades in from the top-left corner */
.why-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13, 127, 146, .38), transparent 62%);
    opacity: 0;
    transition: opacity .45s var(--ease);
}

.why-card>* {
    position: relative;
    z-index: 1;
}

.why-card:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, .07);
    border-color: rgba(75, 179, 196, .55);
    box-shadow: 0 20px 42px rgba(2, 18, 24, .5);
}

.why-card:hover::before {
    opacity: 1;
}

/* outlined numeral: a filled one at this size fights the heading, and the old
   near-transparent fill was invisible */
.why-card__num {
    position: absolute;
    top: 20px;
    right: 22px;
    font-family: var(--font-head);
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(75, 179, 196, .40);
    transition: all .45s var(--ease);
}

.why-card:hover .why-card__num {
    -webkit-text-stroke-color: rgba(120, 214, 230, .95);
    transform: translateY(-3px);
}

.why-card__icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    margin-bottom: 20px;
    font-size: 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    box-shadow: 0 10px 22px rgba(3, 24, 30, .45);
    transition: transform .45s var(--ease);
}

.why-card:hover .why-card__icon {
    transform: rotate(-8deg) scale(1.08);
}

.why-card h4 {
    font-size: clamp(16.7px, calc(15.69px + 0.258vw), 19px);
    margin-bottom: 8px;
}

.why-card p {
    font-size: 14.5px;
    margin: 0;
    color: rgba(255, 255, 255, .74);
}

/* ==========================================================================
   14. BENEFITS / TECHNOLOGY
   ========================================================================== */
.benefits__grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 70px;
    align-items: center;
}

.benefits .section__head {
    text-align: left;
    margin: 0 0 30px;
}

.benefits__list {
    display: grid;
    gap: 16px;
    margin-top: 28px;
}

.benefits__list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 20px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: #fff;
    transition: all .4s var(--ease);
}

.benefits__list li:hover {
    border-color: var(--teal-light);
    box-shadow: var(--shadow-sm);
    transform: translateX(6px);
}

.benefits__list i {
    color: var(--teal);
    font-size: 18px;
    margin-top: 5px;
    flex-shrink: 0;
}

.benefits__list strong {
    display: block;
    font-family: var(--font-head);
    font-size: 16.5px;
    color: var(--ink);
}

.benefits__list span {
    font-size: 14px;
}

/* Flow diagram */
.flow {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 38px 32px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.flow__step {
    background: #fff;
    border-radius: var(--radius);
    padding: 24px 20px;
    box-shadow: var(--shadow-sm);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.flow__step:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.flow__icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 24px;
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
}

.flow__step h4 {
    font-size: clamp(15.8px, calc(14.84px + 0.247vw), 18px);
    margin-bottom: 6px;
}

.flow__step p {
    font-size: 14px;
    margin: 0;
}

.flow__arrow {
    color: var(--teal-light);
    font-size: clamp(16px, calc(14.25px + 0.449vw), 20px);
    padding: 12px 0;
    animation: floatY 2.6s ease-in-out infinite;
}

/* ==========================================================================
   15. APPLICATIONS
   ========================================================================== */
/* all 15 at once - 5 across, 3 rows */
.applications__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

/* the mobile HVLS pages carry eight shots, not fifteen. Five across would
   leave a row of three hanging, so those pages ask for four and get two even
   rows. Only the widest step is overridden - the max-width blocks further
   down still take it to 4, 3 and 2 as the screen narrows. */
.applications__grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* and square rather than the 3:4 portrait the homepage band uses - four wide
   at this size would otherwise run very tall */
.applications__grid--4 .app-card {
    aspect-ratio: 1 / 1;
}

.app-card {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--teal-darker);
    box-shadow: var(--shadow-sm);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.app-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease);
}

.app-card::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 70%;
    background: linear-gradient(to top, rgba(3, 27, 34, .94) 10%, rgba(3, 27, 34, .55) 48%, transparent);
    transition: opacity .45s var(--ease);
}

.app-card__body {
    position: absolute;
    z-index: 1;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 11px;
}

.app-card__icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    transition: transform .45s var(--ease);
}

.app-card__title {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.25;
    color: #fff;
}

.app-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.app-card:hover img {
    transform: scale(1.08);
}

.app-card:hover .app-card__icon {
    transform: rotate(-8deg) scale(1.12);
}


/* ==========================================================================
   16. PROCESS
   ========================================================================== */
.process__steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
    position: relative;
}

.process__steps::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--teal-light) 0 10px, transparent 10px 20px);
    opacity: .55;
}

.process-step {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 22px;
    text-align: center;
    position: relative;
    transition: all .45s var(--ease);
}

.process-step:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow);
    border-color: var(--teal-light);
}

.process-step__num {
    width: 54px;
    height: 54px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    box-shadow: 0 8px 20px rgba(13, 127, 146, .3);
    position: relative;
    z-index: 1;
}

.process-step h4 {
    font-size: clamp(15px, calc(14.12px + 0.225vw), 17px);
    margin-bottom: 8px;
}

.process-step p {
    font-size: 13.8px;
    margin: 0;
}

/* ==========================================================================
   17. CALCULATOR
   ========================================================================== */
.calculator__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 60px;
    align-items: center;
}

.calculator .section__head {
    text-align: left;
}

.calculator__notes {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.calculator__notes li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14.5px;
}

.calculator__notes i {
    color: var(--teal);
    margin-top: 5px;
}

.calculator__card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 36px 34px;
    box-shadow: var(--shadow);
}

.calc-form__row {
    margin-bottom: 18px;
}

.calc-form__row label {
    display: block;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 8px;
}

.calc-form__row input,
.calc-form__row select {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--soft);
    color: var(--ink);
    outline: none;
    transition: all .3s var(--ease);
}

.calc-form__row input:focus,
.calc-form__row select:focus {
    border-color: var(--teal-light);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(75, 179, 196, .15);
}

.calc-result {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px dashed var(--line);
    display: grid;
    gap: 14px;
    animation: fadeSlideIn .6s var(--ease) both;
}

.calc-result__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--teal-lighter);
    padding: 14px 18px;
    border-radius: 10px;
}

.calc-result__item span {
    font-size: 14px;
}

.calc-result__item strong {
    font-family: var(--font-head);
    font-size: clamp(16px, calc(14.25px + 0.449vw), 20px);
    color: var(--teal-dark);
}

.calc-result__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 14.5px;
}

/* ==========================================================================
   18. REVIEWS
   ========================================================================== */
.reviews__layout {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 60px;
    align-items: center;
}

.reviews__intro .section__title {
    margin-bottom: 28px;
}

/* the Google badge ships on a white background, so it gets a white card */
.reviews__badge {
    display: inline-flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 26px;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 18px 40px rgba(2, 20, 26, .35);
    margin-bottom: 28px;
}

.reviews__badge>img {
    width: 172px;
    height: auto;
}

.reviews__score {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.reviews__score strong {
    font-family: var(--font-head);
    font-size: clamp(22px, calc(14.11px + 2.022vw), 40px);
    font-weight: 800;
    line-height: 1;
    color: var(--ink);
}

.reviews__stars {
    display: block;
    color: #f5a623;
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 3px;
}

.reviews__score small {
    font-size: 13px;
    color: var(--body);
}

/* ---- vertical scroller --------------------------------------------------
   Same duplicate-and-translate trick as the client logo marquee, turned on
   its side. Margin rather than gap so -50% lands exactly on one full pass.
   -------------------------------------------------------------------------- */
.reviews__scroller {
    position: relative;
    height: 520px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
}

.reviews__track {
    animation: reviewsScroll 46s linear infinite;
}

.reviews__scroller:hover .reviews__track {
    animation-play-state: paused;
}

@keyframes reviewsScroll {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50%);
    }
}

.review-card {
    margin-bottom: 18px;
    padding: 26px 26px 24px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .11);
    transition: border-color .4s var(--ease), background .4s var(--ease);
}

.review-card:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(75, 179, 196, .45);
}

.review-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.review-card__stars {
    color: #f5a623;
    font-size: 13.5px;
    letter-spacing: 2px;
}

.review-card__g {
    font-size: clamp(15px, calc(14.12px + 0.225vw), 17px);
    color: rgba(255, 255, 255, .38);
}

.review-card p {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .84);
    margin-bottom: 20px;
}

.review-card__author {
    display: flex;
    align-items: center;
    gap: 13px;
}

.review-card__avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(15px, calc(14.12px + 0.225vw), 17px);
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
}

.review-card__author strong {
    display: block;
    font-family: var(--font-head);
    font-size: 16px;
    color: #fff;
    line-height: 1.3;
}

.review-card__author small {
    font-size: 13px;
    color: var(--teal-light);
}

/* ==========================================================================
   18b. TRUSTED CLIENTS MARQUEE
   ========================================================================== */
.clients {
    overflow: hidden;
}

.clients .section__head {
    text-align: left;
    max-width: 720px;
    margin-inline: 0;
    margin-bottom: 46px;
}

.clients__rows {
    /* soft fade so cards slide in and out instead of being cut off */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.clients__row {
    overflow: hidden;
    /* room for the hover lift and its shadow, which overflow would clip */
    padding: 14px 0;
}

.clients__track {
    display: flex;
    width: max-content;
    animation: clientsScroll 60s linear infinite;
}

.clients__row--2 .clients__track {
    animation-duration: 72s;
    animation-direction: reverse;
}

.clients__row:hover .clients__track {
    animation-play-state: paused;
}

/* the row is rendered twice, so one full pass is exactly half the track */
@keyframes clientsScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.client-card {
    flex: 0 0 auto;
    width: 210px;
    height: 140px;
    /* margin, not flex gap: keeps the 50% loop point exact */
    margin-right: 22px;
    /* flex, not grid: an auto grid track stretches to the image's intrinsic
       height, which makes max-height:100% on the image do nothing */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 28px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: all .4s var(--ease);
}

.client-card img {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    /* letterboxes any logo ratio inside the fixed box without distortion */
    object-fit: contain;
    filter: none;
    opacity: 1;
    transition: all .4s var(--ease);
}

.client-card:hover {
    transform: translateY(-6px);
    border-color: var(--teal-light);
    box-shadow: 0 14px 30px rgba(16, 34, 42, .13);
}

.client-card:hover img {
    filter: grayscale(1);
    opacity: .72;
}

/* ==========================================================================
   18a. COMPANY PROFILE PAGE
   ========================================================================== */
.cprofile__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 56px;
    align-items: center;
}

.cprofile__media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.cprofile__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cprofile__stamp {
    position: absolute;
    left: 20px;
    bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border-radius: 100px;
    background: rgba(6, 30, 37, .78);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
}

.cprofile__stamp i {
    color: var(--teal-light);
    /* fixed: sits in a pill that must not change height */
    font-size: 14px;
}

.cprofile__content p {
    margin-bottom: 16px;
}

.cprofile__content strong {
    color: var(--ink);
    font-weight: 600;
}

.cprofile__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

/* ---- at a glance ---- */
.cfacts__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.cfact {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 24px 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 3px solid var(--teal);
    border-radius: var(--radius);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.cfact:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-sm);
}

.cfact>i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--teal);
    /* fixed: an icon in a fixed row, not body copy */
    font-size: 22px;
}

.cfact__label {
    display: block;
    margin-bottom: 4px;
    color: var(--body);
    font-size: 12.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.cfact__value {
    display: block;
    color: var(--ink);
    font-family: var(--font-head);
    font-size: 17px;
    line-height: 1.4;
    overflow-wrap: break-word;
}

/* ---- mission & vision ---- */
.cmv__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

.cmv__card {
    padding: 36px 34px 34px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-lg);
    transition: transform .4s var(--ease), border-color .4s var(--ease);
}

.cmv__card:hover {
    transform: translateY(-6px);
    border-color: rgba(75, 179, 196, .5);
}

.cmv__card>i {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: rgba(75, 179, 196, .16);
    color: var(--teal-light);
    /* fixed: the circle around it does not shrink */
    font-size: 24px;
}

.cmv__card h4 {
    margin-bottom: 12px;
    font-size: 21px;
}

.cmv__card p {
    color: rgba(255, 255, 255, .78);
    line-height: 1.8;
}

/* ---- why choose us ---- */
.cwhy__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.cwhy__card {
    position: relative;
    padding: 32px 30px 30px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}

.cwhy__card:hover {
    transform: translateY(-7px);
    border-color: var(--teal-light);
    box-shadow: var(--shadow);
}

/* the index number is a watermark, so it may scale with the viewport */
.cwhy__num {
    position: absolute;
    top: 10px;
    right: 18px;
    color: var(--teal);
    font-family: var(--font-head);
    font-size: clamp(44px, calc(35.2px + 2.26vw), 64px);
    font-weight: 700;
    line-height: 1;
    opacity: .07;
    pointer-events: none;
}

.cwhy__card>i {
    display: block;
    margin-bottom: 18px;
    color: var(--teal);
    /* fixed: an icon glyph, not text */
    font-size: 30px;
}

.cwhy__card h4 {
    margin-bottom: 10px;
    color: var(--ink);
    font-size: 18px;
}

.cwhy__card p {
    color: var(--body);
    font-size: 14.8px;
    line-height: 1.8;
}

/* ---- what we make ---- */
.crange__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.crange__card {
    display: flex;
    flex-direction: column;
    padding: 30px 26px 26px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    color: inherit;
    transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}

.crange__card:hover {
    transform: translateY(-7px);
    border-color: var(--teal-light);
    box-shadow: var(--shadow);
}

.crange__card>i {
    margin-bottom: 16px;
    color: var(--teal);
    font-size: 28px;
}

.crange__card h4 {
    margin-bottom: 10px;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.4;
}

.crange__card p {
    /* pushes the link to the bottom so all four line up whatever the copy */
    flex: 1 1 auto;
    margin-bottom: 18px;
    color: var(--body);
    font-size: 14.3px;
    line-height: 1.75;
}

.crange__go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--teal);
    font-size: 14px;
    font-weight: 600;
}

.crange__go i {
    font-size: 13px;
    transition: transform .35s var(--ease);
}

.crange__card:hover .crange__go i {
    transform: translateX(5px);
}

/* ---- running cost ---- */
.ccost__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.ccost__cell {
    position: relative;
    padding: 34px 26px 28px;
    text-align: center;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.ccost__cell--best {
    background: linear-gradient(160deg, var(--teal-darker), #0a2b34);
    border-color: transparent;
    box-shadow: var(--shadow-lg);
}

.ccost__tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 15px;
    border-radius: 100px;
    background: var(--accent);
    color: #2b1b00;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ccost__cell strong {
    display: block;
    margin-bottom: 8px;
    color: var(--ink);
    font-family: var(--font-head);
    font-size: clamp(30px, calc(25.6px + 1.13vw), 40px);
    line-height: 1;
}

.ccost__cell--best strong {
    color: #fff;
}

.ccost__label {
    display: block;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
}

.ccost__cell--best .ccost__label {
    color: var(--teal-light);
}

.ccost__cell small {
    display: block;
    margin-top: 5px;
    color: var(--body);
    font-size: 13px;
}

.ccost__cell--best small {
    color: rgba(255, 255, 255, .66);
}

.ccost__more {
    margin-top: 28px;
    color: var(--body);
    font-size: 15px;
    text-align: center;
}

.ccost__more a {
    color: var(--teal);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================================
   18d. SINGLE PRODUCT PAGE
   ========================================================================== */
/* The overview sits on a tinted wash with two blurred blobs behind it, so it
   does not read as a plain white slab under the hero. */
.prodhero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(180deg, var(--soft) 0%, #fff 70%);
}

.prodhero::before,
.prodhero::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}

.prodhero::before {
    top: -140px;
    left: -120px;
    width: 460px;
    height: 460px;
    background: rgba(75, 179, 196, .3);
}

.prodhero::after {
    right: -160px;
    bottom: -180px;
    width: 520px;
    height: 520px;
    background: rgba(13, 127, 146, .16);
}

/* two columns of running text is a worse read than one measured column */
.prodabout {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.prodabout p {
    margin-bottom: 16px;
}

.prodabout p:last-child {
    margin-bottom: 0;
}

/* ---- gallery ---- */
/* on the split hero the gallery is a light card over a dark banner */
.page-hero--split .prodhero__gallery {
    padding: 18px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: calc(var(--radius-lg) + 8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 30px 70px rgba(3, 20, 26, .38);
}

.page-hero--split .prodgal__thumb {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
}

.page-hero--split .prodgal__thumb.is-active {
    background: #fff;
    border-color: var(--teal-light);
}

.page-hero--split .prodgal__thumb:hover {
    border-color: var(--teal-light);
}

.prodgal__stage {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(13, 127, 146, .16);
    overflow: hidden;
}

/* a soft ellipse under the unit so it stands on something */
.prodgal__stage::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 12%;
    width: 62%;
    height: 34px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(16, 34, 42, .17), transparent 70%);
    pointer-events: none;
}

.prodgal__stage img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    /* contain, not cover: a cooler cropped at the edges tells you nothing */
    object-fit: contain;
    /* the swap fades rather than snaps - main.js drops opacity, changes the
       src, then clears it again */
    transition: opacity .16s var(--ease), transform .6s var(--ease);
}

.prodgal__stage:hover img {
    transform: scale(1.04);
}

.prodgal__tag {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 9;
    padding: 7px 15px;
    border-radius: 100px;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

/* prev / next over the stage */
.prodgal__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(4px);
    color: var(--teal-dark);
    /* fixed: the disc around it does not change size */
    font-size: 16px;
    box-shadow: 0 6px 18px rgba(16, 34, 42, .14);
    /* always on: with the thumbnail strip gone these are the only visible
       clue that there is more than one image */
    opacity: 1;
    transition: opacity .3s var(--ease), background .3s var(--ease),
        color .3s var(--ease), transform .3s var(--ease);
}

.prodgal__nav--prev {
    left: 14px;
}

.prodgal__nav--next {
    right: 14px;
}

.prodgal__nav:hover {
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    border-color: transparent;
    color: #fff;
}

.prodgal__nav--prev:hover {
    transform: translateY(-50%) translateX(-3px);
}

.prodgal__nav--next:hover {
    transform: translateY(-50%) translateX(3px);
}

/* dots, sitting on the stage where the thumbnail strip used to be */
.prodgal__dots {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 2;
    display: flex;
    gap: 8px;
    padding: 7px 12px;
    transform: translateX(-50%);
    border-radius: 100px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(16, 34, 42, .12);
}

.prodgal__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(16, 34, 42, .26);
    transition: background .3s var(--ease), width .3s var(--ease);
}

.prodgal__dot:hover {
    background: var(--teal-light);
}

.prodgal__dot.is-active {
    /* stretched rather than just recoloured, so the position reads at a glance */
    width: 22px;
    border-radius: 100px;
    background: var(--teal);
}

.prodgal__thumbs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.prodgal__thumb {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    padding: 10px;
    cursor: pointer;
    background: var(--white);
    border: 2px solid var(--line);
    border-radius: var(--radius);
    transition: border-color .35s var(--ease), transform .35s var(--ease);
}

.prodgal__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.prodgal__thumb:hover {
    transform: translateY(-3px);
    border-color: var(--teal-light);
}

.prodgal__thumb.is-active {
    border-color: var(--teal);
    background: #fff;
}

/* ---- info column ---- */
.prodhero__title {
    margin: 6px 0 22px;
    color: var(--ink);
    font-size: clamp(24px, calc(19.6px + 1.13vw), 34px);
    line-height: 1.22;
}

.prodhero__title span {
    color: var(--teal);
}

/* the three headline figures read as one instrument panel, not three
   floating labels - hence the card and the dividers between them */
.prodhero__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 26px;
    padding: 18px 4px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(4px);
}

.prodhero__stats li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 14px;
}

.prodhero__stats li+li {
    border-left: 1px solid var(--line);
}

.prodhero__stats i {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    color: #fff;
    /* fixed: the disc around it is a fixed 38px */
    font-size: 16px;
    box-shadow: 0 6px 14px rgba(13, 127, 146, .3);
}

.prodhero__stats small {
    display: block;
    color: var(--body);
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.prodhero__stats strong {
    display: block;
    color: var(--ink);
    font-family: var(--font-head);
    font-size: 15px;
    line-height: 1.3;
}

.prodhero__info p {
    margin-bottom: 15px;
}

.prodhero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 26px;
}

.prodhero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px dashed var(--line);
}

.prodhero__trust li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--body);
    font-size: 13.5px;
    font-weight: 500;
}

.prodhero__trust i {
    color: var(--teal);
    /* fixed: a mark beside a single line of text */
    font-size: 15px;
}

/* ---- the same three blocks, reversed for the dark split hero ---- */
.page-hero--split .prodhero__stats {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: none;
}

.page-hero--split .prodhero__stats li+li {
    border-left-color: rgba(255, 255, 255, .16);
}

.page-hero--split .prodhero__stats small {
    color: rgba(255, 255, 255, .66);
}

.page-hero--split .prodhero__stats strong {
    color: #fff;
}

.page-hero--split .prodhero__trust {
    border-top-color: rgba(255, 255, 255, .18);
}

.page-hero--split .prodhero__trust li {
    color: rgba(255, 255, 255, .82);
}

.page-hero--split .prodhero__trust i {
    color: var(--teal-light);
}

/* the outline button reads teal-on-dark otherwise, which all but vanishes */
.page-hero--split .btn--outline:not(.btn--wa) {
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

/* the WhatsApp label is the dark #075E54, picked for legibility on white.
   On the dark hero that is the wrong way round - the border and icon keep
   the bright brand green, the label goes white. */
.page-hero--split .btn--outline.btn--wa {
    color: #fff;
}

/* ---- spec sheet ---- */
.prodspec__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    align-items: start;
}

.specsheet {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .45s var(--ease), transform .45s var(--ease);
}

.specsheet:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.specsheet__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 17px 24px;
    background: linear-gradient(120deg, var(--teal-darker) 0%, #0a2b34 55%, var(--teal-dark) 100%);
    color: #fff;
    font-size: 16px;
    letter-spacing: .02em;
}

.specsheet__head i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(75, 179, 196, .22);
    color: var(--teal-light);
    /* fixed: the disc around it is a fixed 32px */
    font-size: 15px;
}

.specsheet__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 16px;
    padding: 13px 24px;
    border-bottom: 1px solid var(--line);
}

/* zebra, so the eye tracks across a two column row without a rule */
.specsheet__row:nth-child(odd) {
    background: var(--soft);
}

.specsheet__row:last-child {
    border-bottom: 0;
}

.specsheet__row dt {
    color: var(--body);
    font-size: 14px;
}

.specsheet__row dd {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-head);
    font-size: 14.5px;
    font-weight: 600;
    overflow-wrap: break-word;
}

/* the one row the client wants noticed - the HVLS fans' PMSM motor. A teal
   wash and rule down the left beat the zebra, and the value goes teal */
.specsheet__row--key,
.specsheet__row--key:nth-child(odd) {
    background: var(--teal-lighter);
    box-shadow: inset 4px 0 0 var(--teal);
}

.specsheet__row--key dt {
    color: var(--ink);
    font-weight: 600;
}

.specsheet__row--key dd {
    color: var(--teal);
    font-weight: 700;
}

/* ---- build points ---- */
.prodbuild__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.buildcard {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 30px 28px 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    counter-increment: buildcard;
    transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}

/* ghost index in the corner - decorative, so it may scale with the viewport */
.buildcard::before {
    content: counter(buildcard, decimal-leading-zero);
    position: absolute;
    z-index: -1;
    top: -6px;
    right: 12px;
    color: var(--teal);
    font-family: var(--font-head);
    font-size: clamp(48px, calc(38.4px + 2.46vw), 70px);
    font-weight: 800;
    line-height: 1;
    opacity: .07;
    pointer-events: none;
}

.prodbuild__grid {
    counter-reset: buildcard;
}

.buildcard:hover {
    transform: translateY(-7px);
    border-color: var(--teal-light);
    box-shadow: var(--shadow);
}

.buildcard i {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    border-radius: 16px;
    background: var(--teal-lighter);
    color: var(--teal);
    /* fixed: the tile around it is a fixed 54px */
    font-size: 23px;
    transition: background .45s var(--ease), color .45s var(--ease);
}

.buildcard:hover i {
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    color: #fff;
}

.buildcard h4 {
    margin-bottom: 10px;
    color: var(--ink);
    font-size: 17.5px;
}

.buildcard p {
    color: var(--body);
    font-size: 14.6px;
    line-height: 1.8;
}

/* ---- shared enquiry form (component/enquiry-form.php) ---- */
/* Width and centring only. .contact__form is already a white card with its
   own border and shadow, so giving this wrapper a frame too drew the whole
   thing twice. */
.enquiry__card {
    max-width: 900px;
    margin: 0 auto;
}

/* ---- faq ---- */
.prodfaq__layout {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 52px;
    align-items: start;
}

/* the intro rides along beside the list rather than sitting above it, which
   is what keeps this from looking like the site-wide FAQ page */
.prodfaq__intro {
    position: sticky;
    top: calc(var(--header-h) + 30px);
}

.prodfaq__intro .btn {
    margin-top: 8px;
}

.prodfaq__list {
    display: grid;
    gap: 14px;
}

/* Two columns of questions side by side, for a long list. align-items:start
   matters - without it both columns stretch to the taller one, and an answer
   opening on the left drags empty space down the right. */
.prodfaq__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

@media (max-width: 991px) {
    .prodfaq__cols {
        grid-template-columns: minmax(0, 1fr);
    }
}

.prodfaq__list .faq-item {
    border-radius: var(--radius-lg);
}

/* the base rule is space-between, which worked when the row was just the
   question and the plus. With a number in front that spreads three items and
   leaves the question floating in the middle - pack them left instead and
   push only the plus to the far edge. */
.prodfaq__list .faq-item__q {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
}

.prodfaq__list .faq-item__q>i {
    margin-left: auto;
}

/* numbered marker, so a five item list reads as a sequence */
.prodfaq__num {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--teal-lighter);
    color: var(--teal);
    font-family: var(--font-head);
    /* fixed: the tile around it is a fixed 30px */
    font-size: 13px;
    font-weight: 700;
    transition: background .35s var(--ease), color .35s var(--ease);
}

.prodfaq__list .faq-item.is-open .prodfaq__num,
.prodfaq__list .faq-item:hover .prodfaq__num {
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    color: #fff;
}

.prodfaq__list .faq-item__a a {
    color: var(--teal);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- advantages ---- */
.prodadv__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 52px;
    align-items: center;
}

.prodadv__intro .btn {
    margin-top: 8px;
}

.prodadv__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
}

.prodadv__list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--radius);
    color: rgba(255, 255, 255, .84);
    font-size: 14.4px;
    line-height: 1.55;
    overflow-wrap: break-word;
    transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}

.prodadv__list li:hover {
    transform: translateX(4px);
    background: rgba(255, 255, 255, .09);
    border-color: rgba(75, 179, 196, .45);
}

.prodadv__list i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--teal-light);
    /* fixed: a bullet mark, sized to the line it sits on */
    font-size: 15px;
}

/* ==========================================================================
   18f. BLOG
   ========================================================================== */
/* shared by the post hero and the listing cards */
.postmeta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 18px;
}

.postmeta li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .8);
    font-size: 13.5px;
}

.postmeta i {
    color: var(--teal-light);
    /* fixed: a mark beside a single line of text */
    font-size: 14px;
}

/* the same list on a white card */
.postmeta--dark {
    margin: 0 0 12px;
}

.postmeta--dark li {
    color: var(--body);
}

.postmeta--dark i {
    color: var(--teal);
}

/* ---- listing ---- */
.bloglist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 28px;
}

.blogcard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}

.blogcard:hover {
    transform: translateY(-7px);
    border-color: var(--teal-light);
    box-shadow: var(--shadow);
}

.blogcard__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
}

.blogcard__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--soft);
}

.blogcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.blogcard:hover .blogcard__media img {
    transform: scale(1.05);
}

.blogcard__cat {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 7px 14px;
    border-radius: 100px;
    background: rgba(6, 30, 37, .8);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.blogcard__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 auto;
    padding: 24px 26px 24px;
}

.blogcard__body h3,
.blogcard__body h4 {
    /* pushes the link to the bottom so cards of different length still line up */
    flex: 1 1 auto;
    margin-bottom: 16px;
    color: var(--ink);
    font-size: 19.5px;
    line-height: 1.3;
}

.blogcard__go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--teal);
    font-size: 14.5px;
    font-weight: 600;
}

.blogcard__go i {
    font-size: 13px;
    transition: transform .35s var(--ease);
}

.blogcard:hover .blogcard__go i {
    transform: translateX(5px);
}

/* ---- the post ---- */
.blogpost__layout {
    display: grid;
    grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.blogpost__rail {
    /* follows the reader down a long article */
    position: sticky;
    top: calc(var(--header-h) + 26px);
}

.blogpost__figure {
    margin: 0 0 32px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.blogpost__figure img {
    display: block;
    width: 100%;
    height: auto;
}

.blogpost__body h2,
.blogpost__body h3,
.blogpost__body h4 {
    color: var(--ink);
    /* clears the sticky header when jumped to from the contents list */
    scroll-margin-top: calc(var(--header-h) + 24px);
}

.blogpost__body h2 {
    margin: 40px 0 16px;
    font-size: clamp(24px, calc(20.6px + 0.87vw), 32px);
    line-height: 1.25;
}

.blogpost__body h3 {
    margin: 0px 0 14px;
    padding-top: 0px;
    font-size: clamp(21px, calc(18.8px + 0.56vw), 26px);
    line-height: 1.3;
}

.blogpost__body h4 {
    margin: 26px 0 10px;
    font-size: 17.5px;
}

.blogpost__body p {
    margin-bottom: 17px;
    font-size: 15.6px;
    line-height: 1.85;
}

/* :not(.btn) matters - a .btn in the article is a button, not a body link.
   Without it this rule outranks .btn--primary's own colour (one class + one
   element beats one class), painting the label teal on a teal gradient and
   underlining both buttons in .postcta. */
.blogpost__body a:not(.btn) {
    color: var(--teal);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blogpost__body a:not(.btn):hover {
    color: var(--teal-dark);
}

.blogpost__body strong {
    color: var(--ink);
    font-weight: 600;
}

/* ---- enquiry form result line (component/enquiry-form.php) ---- */
.form-status {
    margin: 14px 0 0;
    padding: 11px 15px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--soft);
    color: var(--body);
    font-size: 14.5px;
    line-height: 1.6;
}

.form-status.is-ok {
    border-color: rgba(13, 127, 146, .35);
    background: var(--teal-lighter);
    color: var(--teal-dark);
    font-weight: 600;
}

.form-status.is-err {
    border-color: rgba(200, 60, 60, .35);
    background: #fdf2f2;
    color: #a32828;
    font-weight: 600;
}

/* ---- lists inside an article ----
   The imported posts lean on bulleted and numbered lists, so these need the
   same rhythm as .blogpost__body p rather than the browser default. */
.blogpost__body ul,
.blogpost__body ol {
    margin: 0 0 20px;
    padding-left: 22px;
}

.blogpost__body ul {
    list-style: disc;
}

.blogpost__body ol {
    list-style: decimal;
}

.blogpost__body li {
    margin-bottom: 9px;
    padding-left: 4px;
    font-size: 15.6px;
    line-height: 1.8;
}

.blogpost__body li::marker {
    color: var(--teal);
    font-weight: 700;
}

.blogpost__body li:last-child {
    margin-bottom: 0;
}

/* ---- spec tables ----
   Wrapped in .blogtable so a wide table scrolls inside its own box instead of
   pushing the whole page sideways on a phone. */
.blogtable {
    margin: 0 0 26px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    -webkit-overflow-scrolling: touch;
}

.blogtable table {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
    font-size: 14.6px;
}

.blogtable td,
.blogtable th {
    padding: 11px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    line-height: 1.6;
    vertical-align: top;
}

.blogtable tr:last-child td {
    border-bottom: 0;
}

/* the exported tables mark the label column up as <strong> rather than <th> */
.blogtable td:first-child {
    width: 38%;
    color: var(--ink);
    background: var(--soft);
}

.blogtable tr:first-child td {
    color: var(--ink);
    background: var(--teal-lighter);
    font-weight: 600;
}

/* ---- product shots dropped inside the copy ---- */
.blogpost__inlinefig {
    margin: 0 0 24px;
}

.blogpost__inlinefig img {
    display: block;
    max-width: 240px;
    height: auto;
    border-radius: var(--radius);
}

/* ---- key takeaways ---- */
.takeaways {
    margin-bottom: 30px;
    padding: 26px 28px 24px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-left: 3px solid var(--teal);
    border-radius: var(--radius);
    /* the contents list jumps here too */
    scroll-margin-top: calc(var(--header-h) + 24px);
}

.takeaways__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--ink);
    font-size: 17.5px;
}

.takeaways__head i {
    color: var(--teal);
    /* fixed: sits on the baseline of a single line heading */
    font-size: 18px;
}

.takeaways ul {
    display: grid;
    gap: 10px;
}

.takeaways li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: var(--body);
    font-size: 14.8px;
    line-height: 1.7;
}

.takeaways li i {
    flex: 0 0 auto;
    margin-top: 4px;
    color: var(--teal);
    font-size: 14px;
}

/* ---- industry cards inside the article ---- */
.industrygrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin: 22px 0 26px;
}

/* Three across, for a set of six. auto-fit spreads them five wide in a
   full-width container and leaves a single card stranded on the second row;
   fixing the count gives two even rows and lets each card keep its width. */
.industrygrid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 991px) {
    .industrygrid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .industrygrid--3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.industrycard {
    position: relative;
    overflow: hidden;
    padding: 28px 26px 26px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .45s var(--ease), border-color .45s var(--ease),
        box-shadow .45s var(--ease);
}

/* accent rule down the left edge, drawn in on hover. scaleY animates on the
   compositor, so this costs nothing next to animating height. */
.industrycard::before {
    content: '';
    position: absolute;
    left: 0;
    top: 24px;
    bottom: 24px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--teal), var(--teal-light));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .45s var(--ease);
}

.industrycard:hover {
    transform: translateY(-6px);
    border-color: rgba(75, 179, 196, .5);
    box-shadow: var(--shadow);
}

.industrycard:hover::before {
    transform: scaleY(1);
}

/* the icon sits in a tinted tile rather than floating loose above the text,
   and fills with the brand gradient on hover */
.industrycard i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: var(--teal-lighter);
    color: var(--teal);
    /* fixed: an icon glyph, not text */
    font-size: 20px;
    transition: background .45s var(--ease), color .45s var(--ease),
        transform .45s var(--ease);
}

.industrycard:hover i {
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    color: #fff;
    transform: translateY(-2px);
}

/* base type for the card outside .blogpost__body, which sets its own below */
.industrycard h4 {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.35;
}

.industrycard p {
    margin: 0;
    color: var(--body);
    font-size: 14.6px;
    line-height: 1.75;
}

.blogpost__body .industrycard h4 {
    margin: 0 0 7px;
    font-size: 16px;
    line-height: 1.35;
}

.blogpost__body .industrycard p {
    margin: 0;
    font-size: 14.2px;
    line-height: 1.7;
}

/* ---- in-article cta ---- */
.postcta {
    margin: 34px 0 8px;
    padding: 28px 30px 26px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(600px 300px at 20% 0%, rgba(75, 179, 196, .2), transparent 60%),
        linear-gradient(140deg, var(--teal-darker), #0a2b34);
}

.blogpost__body .postcta h4 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 20px;
}

.blogpost__body .postcta p {
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 15px;
}

.postcta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 20px;
}

.postcta .btn--outline {
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

/* ---- table of contents (component/toc.php) ---- */
.toc {
    padding: 20px 16px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.toc__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 16px;
}

.toc__head i {
    color: var(--teal);
    /* fixed: sits on the baseline of a single line heading */
    font-size: 16px;
}

/* only used once the rail stops being a sidebar */
.toc__toggle {
    display: none;
}

/* No inner scrollbar: a second scrolling area inside a page that already
   scrolls is awkward to use, and the list is short enough to show whole. */
.toc__list {
    display: grid;
    gap: 2px;
    /* the browser marker is off because the number is drawn by ::before
       below, inside the link, where it can be coloured and sit inside the
       highlight - leaving both on printed the number twice */
    list-style: none;
    counter-reset: toc;
    /* list-style:none drops the marker but NOT the browser's 40px
       padding-inline-start, which was pushing every entry off to the right */
    padding-left: 0;
}

.toc__list>li {
    counter-increment: toc;
}

.toc__link {
    display: block;
    padding: 7px 10px 7px 11px;
    border-left: 2px solid transparent;
    border-radius: 0 6px 6px 0;
    color: var(--body);
    font-size: 14px;
    line-height: 1.5;
    transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}

.toc__list>li>.toc__link::before {
    content: counter(toc) '. ';
    color: #9fb2b9;
    font-family: var(--font-head);
    font-weight: 600;
}

.toc__link:hover {
    color: var(--teal);
    background: var(--soft);
}

.toc__link.is-active {
    color: var(--teal-dark);
    background: var(--teal-lighter);
    border-left-color: var(--teal);
    font-weight: 600;
}

/* the sub labels already start with their own "1." etc, so no marker here */
.toc__sub {
    margin: 2px 0 6px 12px;
    padding-left: 8px;
    border-left: 1px solid var(--line);
    list-style: none;
}

.toc__link--sub {
    padding: 5px 8px;
    font-size: 13.2px;
}

/* ==========================================================================
   18e. EVENTS
   ========================================================================== */
/* a left aligned section head, for the ones that sit in a column rather than
   across the middle of the page */
.section__head--left {
    margin-left: 0;
    text-align: left;
}

.events__list {
    display: grid;
    gap: 28px;
}

.eventcard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}

.eventcard:hover {
    transform: translateY(-6px);
    border-color: var(--teal-light);
    box-shadow: var(--shadow);
}

/* photo beside the copy rather than above it - an event is read, not browsed,
   so the text wants the room */
.eventcard__inner {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: stretch;
    color: inherit;
}

.eventcard__media {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    background: var(--soft);
}

.eventcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.eventcard:hover .eventcard__media img {
    transform: scale(1.05);
}

.eventcard__kind {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 7px 14px;
    border-radius: 100px;
    background: rgba(6, 30, 37, .8);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.eventcard__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 32px 28px;
}

.eventcard__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-bottom: 12px;
}

.eventcard__meta li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--body);
    font-size: 13.5px;
}

.eventcard__meta i {
    color: var(--teal);
    /* fixed: a mark beside a single line of text */
    font-size: 14px;
}

.eventcard__body h3 {
    margin-bottom: 10px;
    color: var(--ink);
    font-size: clamp(20px, calc(17.8px + 0.56vw), 25px);
    line-height: 1.25;
}

.eventcard__body p {
    /* pushes the link to the bottom whatever the length of the excerpt */
    flex: 1 1 auto;
    margin-bottom: 18px;
    color: var(--body);
    font-size: 14.8px;
    line-height: 1.8;
}

.eventcard__go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--teal);
    font-size: 14.5px;
    font-weight: 600;
}

.eventcard__go i {
    font-size: 13px;
    transition: transform .35s var(--ease);
}

.eventcard:hover .eventcard__go i {
    transform: translateX(5px);
}

/* ---- the write-up ---- */
.eventpost__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr);
    gap: 46px;
    align-items: start;
}

.eventpost__figure {
    margin: 0 0 30px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.eventpost__figure img {
    display: block;
    width: 100%;
    height: auto;
}

.eventpost__body p {
    margin-bottom: 18px;
    font-size: 15.5px;
    line-height: 1.85;
}

.eventpost__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

/* ---- side column ---- */
.eventpost__side {
    display: grid;
    gap: 22px;
    /* follows the reader down the article on a tall screen */
    position: sticky;
    top: calc(var(--header-h) + 30px);
}

.eventfacts {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.eventfacts__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 16px 22px;
    background: linear-gradient(120deg, var(--teal-darker), #0a2b34 60%, var(--teal-dark));
    color: #fff;
    font-size: 15.5px;
}

.eventfacts__head i {
    color: var(--teal-light);
    /* fixed: sits on the baseline of a single line heading */
    font-size: 16px;
}

.eventfacts__row {
    padding: 13px 22px;
    border-bottom: 1px solid var(--line);
}

.eventfacts__row:last-child {
    border-bottom: 0;
}

.eventfacts__row:nth-child(odd) {
    background: var(--soft);
}

.eventfacts__row dt {
    margin-bottom: 3px;
    color: var(--body);
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.eventfacts__row dd {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-head);
    font-size: 14.8px;
    line-height: 1.45;
    overflow-wrap: break-word;
}

/* ---- next event ---- */
.eventnext {
    display: block;
    padding: 24px 24px 22px;
    border-radius: var(--radius-lg);
    background: linear-gradient(150deg, var(--teal-darker), #0a2b34);
    color: #fff;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.eventnext:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.eventnext__label {
    display: block;
    margin-bottom: 8px;
    color: var(--teal-light);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.eventnext__title {
    display: block;
    margin-bottom: 5px;
    color: #fff;
    font-family: var(--font-head);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
}

.eventnext__meta {
    display: block;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, .68);
    font-size: 13.2px;
}

.eventnext__go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--teal-light);
    font-size: 14px;
    font-weight: 600;
}

.eventnext__go i {
    font-size: 13px;
    transition: transform .35s var(--ease);
}

.eventnext:hover .eventnext__go i {
    transform: translateX(5px);
}

/* ==========================================================================
   18c. OUR PROJECTS PAGE
   ========================================================================== */
.projstats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

/* Light-theme cousin of the homepage .counter: same gradient icon disc and
   the same weight on the number, so the two stat blocks read as one family. */
.projstat {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 38px 24px 32px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}

/* teal rule that draws itself across the top on hover */
.projstat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--teal), var(--teal-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s var(--ease);
}

/* soft halo behind the disc, so the card is not a flat white rectangle */
.projstat::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: -70px;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-left: -100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(75, 179, 196, .18), transparent 68%);
    pointer-events: none;
}

.projstat:hover {
    transform: translateY(-7px);
    border-color: var(--teal-light);
    box-shadow: var(--shadow);
}

.projstat:hover::before {
    transform: scaleX(1);
}

.projstat i {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%);
    color: #fff;
    /* fixed: the disc around it is a fixed 64px */
    font-size: 25px;
    box-shadow: 0 10px 24px rgba(13, 127, 146, .34);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.projstat:hover i {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(13, 127, 146, .42);
}

.projstat strong {
    display: block;
    margin-bottom: 8px;
    color: var(--ink);
    font-family: var(--font-head);
    font-size: clamp(28px, calc(21.4px + 1.69vw), 43px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.01em;
}

.projstat span {
    display: block;
    color: var(--body);
    font-size: 13.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* the counter itself sits in a span inside the strong - keep it at the
   number's size, not the label's */
.projstat strong span {
    display: inline;
    color: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: none;
}

/* "Crore" after 2.5+ - at full size it crowds the two-column phone grid */
.projstat strong small {
    font-size: .55em;
    font-weight: 700;
}

/* the qualitative points under the numbers, as a row of pills */
.projstats__points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 14px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}

.projstats__points li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 11px 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
}

.projstats__points i {
    flex-shrink: 0;
    color: var(--teal);
    font-size: 18px;
}

/* ---- project cards ---- */
.projgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.projcard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}

.projcard:hover {
    transform: translateY(-7px);
    border-color: var(--teal-light);
    box-shadow: var(--shadow);
}

.projcard__media {
    position: relative;
    /* fixed ratio, so a row of cards lines up whatever the photo */
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--soft);
}

.projcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.projcard:hover .projcard__media img {
    transform: scale(1.07);
}

/* the number is the point of the card, so it sits on the photo */
.projcard__area {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 100px;
    background: rgba(6, 30, 37, .8);
    backdrop-filter: blur(6px);
    color: #fff;
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.projcard__area small {
    color: rgba(255, 255, 255, .72);
    font-size: 11.5px;
    font-weight: 500;
}

.projcard__body {
    padding: 16px 18px 18px;
}

.projcard__body h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
    color: var(--ink);
    font-size: 16.5px;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.projcard__body h4 i {
    flex: 0 0 auto;
    color: var(--teal);
    /* fixed: sits on the baseline of a single line title */
    font-size: 14px;
}

.projcard__body span {
    display: block;
    padding-left: 22px;
    color: var(--body);
    font-size: 13.5px;
}

/* ---- global presence slider ---- */
.flags__viewport {
    overflow: hidden;
    /* room for the hover lift, which overflow:hidden would otherwise clip */
    padding: 16px 0;
    /* cards slide in and out of a soft edge instead of being cut off */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.flags__track {
    display: flex;
    width: max-content;
    animation: flagsScroll 42s linear infinite;
}

.flags__viewport:hover .flags__track {
    animation-play-state: paused;
}

/* the row is printed twice, so one full pass is exactly half the track */
@keyframes flagsScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.flag-card {
    flex: 0 0 auto;
    /* flag stacked over its name, not beside it */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    /* margin, not flex gap: it keeps the 50% loop point exact */
    margin-right: 22px;
    padding: 26px 30px 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    /* the card is an <a> where the market has a landing page and a <div> where
       it does not, so the link defaults are reset here rather than inherited */
    color: inherit;
    text-decoration: none;
    transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}

/* keyboard users get the same affordance the mouse does */
a.flag-card:focus-visible {
    outline: 3px solid var(--teal-light);
    outline-offset: 3px;
}

.flag-card:hover {
    transform: translateY(-6px);
    border-color: var(--teal-light);
    box-shadow: 0 14px 30px rgba(16, 34, 42, .13);
}

.flag-card img {
    /* fixed, never fluid: the track is measured in pixels for the 50% loop,
       and a flag that resized mid-scroll would break the seam */
    width: 116px;
    height: 80px;
    object-fit: cover;
    border-radius: 9px;
    box-shadow: 0 4px 12px rgba(16, 34, 42, .22);
}

.flag-card span {
    color: var(--ink);
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
}

/* ---- category links (products.php) ---- */
.prodcats__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.prodcat {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 26px 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    color: inherit;
    transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}

.prodcat:hover {
    transform: translateY(-6px);
    border-color: var(--teal-light);
    box-shadow: var(--shadow);
}

.prodcat__count {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--teal-lighter);
    color: var(--teal);
    font-family: var(--font-head);
    /* fixed: the circle around it does not scale */
    font-size: 22px;
    font-weight: 700;
}

.prodcat h4 {
    margin-bottom: 6px;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.35;
}

.prodcat__go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--teal);
    font-size: 14px;
    font-weight: 600;
}

.prodcat__go i {
    font-size: 13px;
    transition: transform .35s var(--ease);
}

.prodcat:hover .prodcat__go i {
    transform: translateX(5px);
}

/* ---- sectors ---- */
/* the photo grid itself is .applications__grid, shared with the homepage */
.csectors__more {
    margin-top: 34px;
    text-align: center;
}

/* ---- closing cta ---- */
.cprofile-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 26px 40px;
}

.cprofile-cta__inner h3 {
    margin-bottom: 8px;
    font-size: clamp(22px, calc(18.7px + 0.85vw), 30px);
}

.cprofile-cta__inner p {
    color: rgba(255, 255, 255, .74);
    margin: 0;
}

.cprofile-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ==========================================================================
   18b. HAPPY CLIENTS PAGE
   The homepage shows the same logos as a marquee and the same kind of review
   in a horizontal scroller - both are teasers. On a page of its own nothing
   moves and nothing is clipped, so the whole list can actually be read.
   ========================================================================== */
.hclients__grid {
    display: grid;
    /* auto-fit rather than a fixed count: the tile keeps its proportions and
       the row simply holds fewer of them as the viewport narrows */
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 20px;
    margin-top: 46px;
}

.hclients__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 132px;
    padding: 22px 26px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}

.hclients__tile img {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    /* resting grey so twenty eight logos read as one wall instead of a clash
       of brand colours; the one under the cursor comes back to full colour */
    filter: grayscale(1);
    opacity: .74;
    transition: filter .4s var(--ease), opacity .4s var(--ease);
}

.hclients__tile:hover {
    transform: translateY(-6px);
    border-color: var(--teal-light);
    box-shadow: 0 14px 30px rgba(16, 34, 42, .13);
}

.hclients__tile:hover img {
    filter: none;
    opacity: 1;
}

/* deliberately not a flex row: once the sentence wraps to two or three lines
   on a phone the icon would sit vertically centred beside the block, adrift
   from the text. Inline keeps it attached to the first word. */
.hclients__note {
    margin: 34px auto 0;
    color: var(--body);
    font-size: 15px;
    line-height: 1.7;
    text-align: center;
}

.hclients__note i {
    margin-right: 9px;
    color: var(--teal);
    /* fixed: a label mark sized to the copy, not a heading that scales */
    font-size: 17px;
    vertical-align: -1px;
}

/* ---- reviews ---- */
.hreviews__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px 30px;
    max-width: 720px;
    margin: 0 auto 46px;
    padding: 20px 28px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--radius-lg);
}

.hreviews__badge>img {
    width: 116px;
    height: auto;
}

.hreviews__score {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hreviews__score strong {
    color: #fff;
    font-family: var(--font-head);
    font-size: 38px;
    line-height: 1;
}

.hreviews__stars {
    display: block;
    color: var(--accent);
    /* fixed: the stars sit on a baseline with the score, not in running text */
    font-size: 14px;
    letter-spacing: 2px;
}

.hreviews__score small {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
}

.hreviews__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.hreview {
    position: relative;
    padding: 30px 28px 26px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: var(--radius-lg);
    overflow-wrap: break-word;
    transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}

.hreview:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, .085);
    border-color: rgba(75, 179, 196, .5);
}

.hreview__mark {
    display: block;
    margin-bottom: 14px;
    color: var(--teal-light);
    /* fixed, not fluid: a decorative glyph, not text being read */
    font-size: 24px;
    opacity: .65;
}

.hreview p {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, .82);
    font-size: 15px;
    line-height: 1.75;
}

.hreview__author {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.hreview__avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(75, 179, 196, .2);
    border: 1px solid rgba(75, 179, 196, .42);
    color: var(--teal-light);
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;
}

.hreview__author strong {
    display: block;
    color: #fff;
    font-size: 15px;
}

.hreview__author small {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    color: rgba(255, 255, 255, .58);
    font-size: 12.5px;
}

/* ==========================================================================
   19. BLOGS
   ========================================================================== */
.blogs__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.blog-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all .45s var(--ease);
}

.blog-card:hover {
    transform: translateY(-9px);
    box-shadow: var(--shadow-lg);
}

.blog-card__media {
    height: 190px;
    display: grid;
    place-items: center;
    font-size: 52px;
    color: #fff;
    background:
        radial-gradient(320px 180px at 40% 30%, rgba(75, 179, 196, .55), transparent 70%),
        linear-gradient(140deg, var(--teal-dark), var(--teal-darker));
    position: relative;
}

.blog-card__media i {
    transition: transform .55s var(--ease);
}

.blog-card:hover .blog-card__media i {
    transform: scale(1.14);
}

.blog-card__date {
    position: absolute;
    left: 16px;
    bottom: 16px;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    color: var(--teal-dark);
    background: #fff;
    padding: 6px 14px;
    border-radius: 100px;
}

.blog-card__body {
    padding: 24px 24px 28px;
}

.blog-card__cat {
    display: inline-block;
    font-family: var(--font-head);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--teal);
    background: var(--teal-lighter);
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 12px;
}

.blog-card__body h4 {
    font-size: clamp(16.7px, calc(15.69px + 0.258vw), 19px);
    line-height: 1.35;
    margin-bottom: 10px;
}

.blog-card__body p {
    font-size: 14.5px;
    margin-bottom: 16px;
}

.blog-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 14px;
}

.blog-card__link i {
    transition: transform .35s var(--ease);
}

.blog-card:hover .blog-card__link i {
    transform: translateX(5px);
}

/* ==========================================================================
   20. FAQ
   ========================================================================== */
.faq__grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 60px;
    align-items: start;
}

.faq .section__head {
    text-align: left;
}

.faq__list {
    display: grid;
    gap: 14px;
}

.faq-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}

.faq-item.is-open {
    border-color: var(--teal-light);
    box-shadow: var(--shadow-sm);
}

.faq-item__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: left;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 16.5px;
    color: var(--ink);
    padding: 20px 24px;
    transition: color .3s var(--ease);
}

.faq-item__q:hover {
    color: var(--teal);
}

.faq-item__q i {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 12px;
    color: var(--teal);
    background: var(--teal-lighter);
    transition: all .4s var(--ease);
}

.faq-item.is-open .faq-item__q {
    color: var(--teal);
}

.faq-item.is-open .faq-item__q i {
    transform: rotate(135deg);
    background: var(--teal);
    color: #fff;
}

.faq-item__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s var(--ease);
}

.faq-item__a p {
    padding: 0 24px 22px;
    font-size: 15px;
    margin: 0;
}

/* ==========================================================================
   21. CONTACT
   ========================================================================== */
.contact__grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 40px;
    align-items: start;
}

.contact__info {
    display: grid;
    gap: 16px;
}

.contact-tile {
    display: flex;
    gap: 16px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    transition: all .4s var(--ease);
}

.contact-tile:hover {
    background: #fff;
    border-color: var(--teal-light);
    box-shadow: var(--shadow-sm);
    transform: translateY(-4px);
}

.contact-tile>i {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
}

.contact-tile h4 {
    font-size: 16px;
    margin-bottom: 4px;
}

.contact-tile p {
    font-size: 14.5px;
    margin: 0;
}

.contact-tile a {
    color: var(--body);
}

.contact-tile a:hover {
    color: var(--teal);
}

.contact__form {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 36px 34px;
    box-shadow: var(--shadow);
}

.form-row {
    margin-bottom: 18px;
}

.form-row--2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}

.form-field {
    margin-bottom: 18px;
}

.form-row .form-field {
    margin-bottom: 0;
}

.form-field label {
    display: block;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 8px;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--soft);
    color: var(--ink);
    outline: none;
    resize: vertical;
    transition: all .3s var(--ease);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #9fb0b7;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--teal-light);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(75, 179, 196, .15);
}

.form-field.has-error input,
.form-field.has-error textarea {
    border-color: #e05a5a;
    background: #fff5f5;
}

.form-error {
    display: none;
    font-size: 12.5px;
    color: #e05a5a;
    margin-top: 6px;
}

.form-field.has-error .form-error {
    display: block;
}

.contact-form__actions {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

/* ==========================================================================
   22. FOOTER
   ========================================================================== */
.footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: rgba(255, 255, 255, .76);
    font-size: 14.5px;
    background:
        /* brand accent line across the top */
        linear-gradient(90deg, var(--teal), var(--teal-light), var(--teal)) top / 100% 3px no-repeat,
        radial-gradient(900px 520px at 10% 0%, rgba(13, 127, 146, .30), transparent 62%),
        radial-gradient(760px 480px at 92% 100%, rgba(75, 179, 196, .16), transparent 60%),
        linear-gradient(165deg, #0a2c36 0%, #07222a 48%, #051920 100%);
}

/* faint blueprint grid, fading out towards the bottom */
.footer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
}

/* slowly turning fan watermarks in the empty side areas */
.footer__deco {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.footer__fan {
    position: absolute;
    line-height: 1;
    /* opacity only - a drop-shadow filter here would repaint every frame */
    color: rgba(96, 200, 218, .17);
    /* no translate here: the spin animation owns `transform` */
    animation: spin linear infinite;
    will-change: transform;
}

.footer__fan--lg {
    top: 6%;
    /* mostly bled off the edge so it never sits behind the contact text */
    right: -155px;
    font-size: clamp(147.2px, calc(10.13px + 35.146vw), 460px);
    animation-duration: 45s;
}

.footer__fan--sm {
    left: -75px;
    bottom: -70px;
    font-size: clamp(80px, calc(5.51px + 19.101vw), 250px);
    color: rgba(96, 200, 218, .13);
    animation-duration: 32s;
    animation-direction: reverse;
}

/* soft teal glow in the top-right corner */
.footer::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: -160px;
    right: -120px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(75, 179, 196, .26), transparent 68%);
    filter: blur(40px);
    pointer-events: none;
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
    gap: 44px;
    padding: 76px 20px 56px;
}

/* white knockout instead of the logo sitting on a white card - the card read
   as a pasted-on box against the dark footer */
.footer__logo {
    width: 235px;
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
    filter: brightness(0) invert(1);
    transition: opacity .4s var(--ease);
}

.footer__logo:hover {
    opacity: .85;
}

.footer__tagline {
    font-family: var(--font-head);
    font-style: italic;
    font-size: 15.5px;
    color: var(--teal-light);
    margin-bottom: 14px;
}

.footer__heading {
    font-size: clamp(16.3px, calc(15.34px + 0.247vw), 18.5px);
    color: #fff;
    margin-bottom: 24px;
    position: relative;
    padding-bottom: 14px;
}

/* two-tone underline: solid bar plus a detached dot */
.footer__heading::after,
.footer__heading::before {
    content: '';
    position: absolute;
    bottom: 0;
    height: 3px;
    border-radius: 3px;
}

.footer__heading::after {
    left: 0;
    width: 38px;
    background: linear-gradient(90deg, var(--teal), var(--teal-light));
}

.footer__heading::before {
    left: 44px;
    width: 8px;
    background: rgba(75, 179, 196, .45);
}

.footer__links {
    display: grid;
    gap: 11px;
}

.footer__links a {
    color: rgba(255, 255, 255, .86);
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    transition: color .3s var(--ease), transform .35s var(--ease);
}

.footer__links a::before {
    content: '\f054';
    font-family: 'Font Awesome 7 Pro';
    font-weight: 300;
    font-size: 9px;
    line-height: 1;
    /* keeps the chip on the first line when the label wraps */
    flex-shrink: 0;
    margin-top: 3px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--teal-light);
    background: rgba(75, 179, 196, .12);
    border: 1px solid rgba(75, 179, 196, .28);
    transition: all .35s var(--ease);
}

.footer__links a:hover {
    color: #fff;
    transform: translateX(6px);
}

.footer__links a:hover::before {
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    border-color: transparent;
    box-shadow: 0 6px 14px rgba(13, 127, 146, .45);
}

.footer__contact {
    display: grid;
    gap: 18px;
}

.footer__contact li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.footer__contact i {
    flex-shrink: 0;
    margin-top: 2px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 13px;
    color: var(--teal-light);
    background: rgba(75, 179, 196, .10);
    border: 1px solid rgba(75, 179, 196, .22);
    transition: all .35s var(--ease);
}

.footer__contact li:hover i {
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(13, 127, 146, .40);
}

.footer__contact a {
    color: rgba(255, 255, 255, .86);
}

.footer__contact a:hover {
    color: #fff;
}

.footer__social {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.footer__social a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 15px;
    transition: all .35s var(--ease);
}

.footer__social a:hover {
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    border-color: transparent;
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(13, 127, 146, .45);
}

/* Centres a footer heading and the two-part rule underneath it, which is
   otherwise pinned to the left edge of the column. */
.footer__heading.text-center {
    text-align: center;
}

.footer__heading.text-center::after {
    left: 50%;
    transform: translateX(-27px);
}

.footer__heading.text-center::before {
    left: 50%;
    transform: translateX(17px);
}

/* ---- locations we serve -------------------------------------------------
   Eighty six place names, so the job is to make them scannable rather than
   decorative: each group is labelled down the left and the names run as one
   wrapped line with a hairline between them, the way an index reads. */
.footer__serve {
    position: relative;
    padding: 42px 0 46px;
    border-top: 1px solid rgba(255, 255, 255, .10);
}

.footer__serve-group {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 8px 22px;
    padding: 16px 0;
}

.footer__serve-group+.footer__serve-group {
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.footer__serve-label {
    display: flex;
    align-items: center;
    /* top, not centre: against a three line list a vertically centred label
       reads as if it belongs to the middle row */
    align-self: start;
    padding-top: 3px;
    gap: 9px;
    color: var(--teal-light);
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.footer__serve-label i {
    /* fixed: a label mark, and it sits in a row that must not reflow */
    font-size: 15px;
}

.footer__serve-list {
    display: flex;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, .72);
    font-size: 13.8px;
    line-height: 1.7;
}

/* only the places with a landing page are links - see $servePages in
   component/footer.php. Brighter than the plain names around them, so it is
   clear which ones go somewhere. */
.footer__serve-list a {
    color: rgba(255, 255, 255, .92);
    text-underline-offset: 3px;
    text-decoration-color: rgba(75, 179, 196, .55);
    transition: color .3s var(--ease), text-decoration-color .3s var(--ease);
}

.footer__serve-list a:hover {
    color: var(--teal-light);
    text-decoration-color: var(--teal-light);
}

/* the rule belongs to the item before it, so a wrapped line never starts
   with a stray separator */
.footer__serve-list li:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 11px;
    margin: 0 9px;
    background: rgba(255, 255, 255, .22);
    vertical-align: -1px;
}

.footer__bottom {
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, .10);
    padding: 22px 0;
    font-size: 13.5px;
    background: rgba(0, 0, 0, .22);
}

/* teal glow riding along the divider */
.footer__bottom::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: min(620px, 80%);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--teal-light), transparent);
    opacity: .55;
}

.footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.footer__bottom p {
    margin: 0;
    color: #fff;
}

.footer__copy-sep {
    color: rgba(255, 255, 255, .28);
    margin: 0 4px;
}

.footer__copy a {
    color: var(--teal-light);
    font-weight: 500;
    position: relative;
}

.footer__copy a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s var(--ease);
}

.footer__copy a:hover {
    color: #fff;
}

.footer__copy a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.footer__policy {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* pipe between the policy links */
.footer__policy li+li::before {
    content: '|';
    color: rgba(255, 255, 255, .24);
    margin-right: 8px;
}

.footer__policy a {
    color: rgba(255, 255, 255, .80);
}

.footer__policy a:hover {
    color: var(--teal-light);
}

/* ==========================================================================
   22b. INNER PAGES  (page hero, category intro, model cards)
   ========================================================================== */
.page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* the header is transparent and sits over this */
    padding: calc(var(--topbar-h) + var(--header-h) + 66px) 0 66px;
    background:
        radial-gradient(800px 500px at 12% 0%, rgba(75, 179, 196, .26), transparent 62%),
        linear-gradient(140deg, var(--teal-darker) 0%, #0a2b34 55%, #061b22 100%);
}

/* One banner behind every page hero. It used to be set inline on each of the
   458 pages, which meant changing it was 458 edits - it lives here now, and a
   page that genuinely wants its own picture can still set the inline style,
   which beats this rule. */
.page-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('../img/breadcrumb.webp');
    background-size: cover;
    background-position: center;
    opacity: .16;
}

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .62);
    margin-bottom: 18px;
}

.breadcrumb a {
    color: rgba(255, 255, 255, .82);
}

.breadcrumb a:hover {
    color: var(--teal-light);
}

.breadcrumb i {
    font-size: 10px;
    color: rgba(255, 255, 255, .38);
}

.breadcrumb span[aria-current] {
    color: var(--teal-light);
}

.page-hero h1 {
    font-size: clamp(26px, calc(14.6px + 2.921vw), 52px);
    color: #fff;
    margin-bottom: 14px;
}

.page-hero p {
    max-width: 620px;
    font-size: clamp(15px, calc(14.12px + 0.225vw), 17px);
    color: rgba(255, 255, 255, .8);
    margin: 0;
}

/* ---- split hero: copy on the left, a light card riding over the banner on
        the right. Used by the single product pages. ---- */
.page-hero--split {
    padding-bottom: 76px;
}

.page-hero--split .page-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: 54px;
    align-items: center;
}

/* the column is already the constraint here - a second max-width would break
   the title onto more lines than it needs */
.page-hero--split h1 {
    max-width: none;
    margin-bottom: 16px;
}

.page-hero--split p {
    max-width: none;
}

/* ---- model cards ---- */
.models__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

/* for categories with only a model or two, so they do not sit stranded on the
   left of an empty three-column row */
.models__grid--center {
    grid-template-columns: repeat(auto-fit, minmax(280px, 370px));
    justify-content: center;
}

/* .pcard is only the grid cell and the scroll-reveal target. All the visuals
   and the pointer tilt live on .pcard__inner, because both effects animate
   `transform` and would otherwise overwrite each other. */
.pcard {
    display: flex;
    perspective: 900px;
}

.pcard__inner {
    /* JS writes these while the pointer is over the card */
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --shift-x: 0px;
    --shift-y: 0px;
    --glow-x: 50%;
    --glow-y: 0%;

    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform .35s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}

/* it is an <a> wrapping the whole card, so the global link colour must not
   bleed into the heading and specs */
.pcard__inner,
.pcard__inner:hover {
    color: inherit;
}

.pcard__inner:focus-visible {
    outline: 3px solid var(--teal-light);
    outline-offset: 3px;
}

.pcard:hover .pcard__inner {
    border-color: var(--teal-light);
    box-shadow: 0 26px 50px rgba(9, 95, 110, .22);
    /* the lift rides along with whatever tilt the pointer is asking for */
    transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-8px);
    /* follow the pointer, do not ease behind it */
    transition: transform .12s linear, box-shadow .45s var(--ease), border-color .45s var(--ease);
}

/* Square, to match the product shots. At 7/6 the frame was wider than the
   photo, so `cover` scaled the image up to fill the width and cut the bottom
   off the unit - the castors and base disappeared. Same ratio in, same ratio
   out, nothing is cropped. */
.pcard__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--soft);
}

.pcard__media img {
    width: 100%;
    height: 100%;
    /* `contain` keeps a differently-proportioned shot whole rather than
       cropping it; the square ones fill the frame either way */
    object-fit: contain;
    object-position: center;
    transition: transform .7s var(--ease);
    background-color: var(--white);
}

/* the photo drifts against the pointer, so it sits a layer behind the frame */
.pcard:hover .pcard__media img {
    transform: scale(1.08) translate(var(--shift-x), var(--shift-y));
    transition: transform .18s linear;
}

/* light following the cursor across the photo */
.pcard__sheen {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(220px circle at var(--glow-x) var(--glow-y),
            rgba(255, 255, 255, .38), transparent 62%);
    opacity: 0;
    transition: opacity .35s var(--ease);
}

.pcard:hover .pcard__sheen {
    opacity: 1;
}

.pcard__tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    font-family: var(--font-head);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #fff;
    background: var(--teal);
    padding: 5px 12px;
    border-radius: 100px;
}

/* An action bar that slides up along the bottom edge, rather than a wash over
   the whole photo - the cooler stays visible while the buttons are up. */
.pcard__overlay {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 14px 16px;
    background: linear-gradient(to top, rgba(5, 42, 51, .96) 30%, rgba(5, 42, 51, .72) 70%, transparent);
    transform: translateY(101%);
    transition: transform .45s var(--ease);
}

/* focus-within so the bar is reachable by keyboard, not just by pointer */
.pcard:hover .pcard__overlay,
.pcard:focus-within .pcard__overlay {
    transform: none;
}

.pcard__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 14px;
    color: var(--teal-dark);
    background: #fff;
    padding: 10px 18px;
    border-radius: 100px;
    /* same collision hover as the main buttons */
    isolation: isolate;
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .4s var(--ease), transform .4s var(--ease), color .3s var(--ease);
}

.pcard:hover .pcard__btn,
.pcard:focus-within .pcard__btn {
    opacity: 1;
    transform: none;
}

.pcard__btn::before,
.pcard__btn::after {
    content: '';
    position: absolute;
    top: 50%;
    z-index: -1;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--teal);
}

.pcard__btn::before {
    left: -16px;
    transform: translate(-50%, -50%);
}

.pcard__btn::after {
    right: -16px;
    transform: translate(50%, -50%);
}

/* the label holds its colour until the dots have met in the middle */
.pcard__btn:hover {
    color: #fff;
    transition: color .22s var(--ease) .34s;
}

.pcard__btn i {
    transition: transform .35s var(--ease);
}

.pcard__btn:hover i {
    transform: translateX(4px);
}

.pcard__btn:hover::before {
    animation: btnCollideSmallLeft .7s both;
}

.pcard__btn:hover::after {
    animation: btnCollideSmallRight .7s both;
}

/* a shorter throw than the page buttons - these pills are much narrower */
@keyframes btnCollideSmallLeft {
    0% {
        left: -16px;
        width: 16px;
        height: 16px;
    }

    50% {
        left: 50%;
        width: 16px;
        height: 16px;
    }

    100% {
        left: 50%;
        width: 260px;
        height: 260px;
    }
}

@keyframes btnCollideSmallRight {
    0% {
        right: -16px;
        width: 16px;
        height: 16px;
    }

    50% {
        right: 50%;
        width: 16px;
        height: 16px;
    }

    100% {
        right: 50%;
        width: 260px;
        height: 260px;
    }
}

.pcard__body {
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
    border-top: 2px solid var(--line);
    transition: border-color .45s var(--ease);
}

.pcard:hover .pcard__body {
    border-top-color: rgba(75, 179, 196, .45);
}

.pcard__body h4 {
    font-size: clamp(15.8px, calc(14.84px + 0.247vw), 18px);
    line-height: 1.3;
    margin-bottom: 16px;
    text-align: center;
    color: var(--teal);
}

.pcard__specs {
    display: grid;
    gap: 10px;
    margin-top: auto;
}

/* four specs (the HVLS fans, which add a size) sit two by two rather than
   stretching the card a row taller than its neighbours */
.pcard__specs:has(> li:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
}

/* measured against the card, not the screen - the same card is roomy in a
   three-up desktop row and cramped in the two-up phone grid, where the labels
   were clipping, so below 300px the pairs go back to one list */
.pcard__body {
    container-type: inline-size;
}

@container (max-width: 300px) {
    .pcard__specs:has(> li:nth-child(4)) {
        grid-template-columns: minmax(0, 1fr);
    }
}

.pcard__specs li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.pcard__specs>li>i {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    font-size: 12px;
    color: var(--teal);
    background: var(--teal-lighter);
}

.pcard__specs span {
    display: flex;
    flex-direction: column;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14.5px;
    color: var(--ink);
    line-height: 1.3;
}

.pcard__specs small {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--body);
}

/* ---- contact page ---- */
/* map and form share the row under the details */
.contact-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 30px;
    align-items: stretch;
}

/* the four detail cards run the full width above it */
.contact-page__info {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 40px;
}

/* Stacked, not side by side: at a quarter of the row the long addresses need
   the whole card width. The dark sweep on hover is what stops four near
   identical white boxes reading as a plain list. */
.ccard {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 26px 24px 24px;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid var(--line);
    transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}

/* teal sheet that rises from the floor of the card */
.ccard::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(420px 260px at 20% 0%, rgba(75, 179, 196, .32), transparent 66%),
        linear-gradient(160deg, var(--teal-dark), var(--teal-darker));
    transform: translateY(101%);
    transition: transform .5s var(--ease);
}

.ccard:hover {
    transform: translateY(-8px);
    border-color: transparent;
    box-shadow: 0 24px 46px rgba(3, 24, 30, .28);
}

.ccard:hover::before {
    transform: none;
}

/* an oversized copy of the icon, bled off the bottom-right corner */
.ccard__ghost {
    position: absolute;
    right: -22px;
    bottom: -26px;
    z-index: -1;
    font-size: clamp(37.8px, calc(2.66px + 9.011vw), 118px);
    line-height: 1;
    color: var(--teal-lighter);
    pointer-events: none;
    transition: color .5s var(--ease), transform .5s var(--ease);
}

.ccard:hover .ccard__ghost {
    color: rgba(255, 255, 255, .07);
    transform: rotate(-10deg) scale(1.06);
}

.ccard__tag {
    align-self: flex-start;
    margin-bottom: 18px;
    padding: 5px 13px;
    border-radius: 100px;
    font-family: var(--font-brand);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--teal);
    background: var(--teal-lighter);
    transition: all .45s var(--ease);
}

.ccard:hover .ccard__tag {
    color: #fff;
    background: rgba(255, 255, 255, .16);
}

.ccard__icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    margin-bottom: 18px;
    font-size: 19px;
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    box-shadow: 0 10px 22px rgba(13, 127, 146, .28);
    transition: all .45s var(--ease);
}

.ccard:hover .ccard__icon {
    color: var(--teal-dark);
    background: #fff;
    transform: rotate(-8deg) scale(1.08);
}

/* the links sit on the card floor so cards of different text length line up */
.ccard__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ccard__body h4 {
    font-size: clamp(15.4px, calc(14.48px + 0.236vw), 17.5px);
    margin-bottom: 7px;
    transition: color .45s var(--ease);
}

.ccard__body>p {
    font-size: 14.5px;
    margin-bottom: 14px;
    transition: color .45s var(--ease);
}

.ccard:hover .ccard__body h4 {
    color: #fff;
}

.ccard:hover .ccard__body>p {
    color: rgba(255, 255, 255, .76);
}

.ccard__links {
    display: grid;
    gap: 9px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    transition: border-color .45s var(--ease);
}

.ccard:hover .ccard__links {
    border-top-color: rgba(255, 255, 255, .18);
}

.ccard__links li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
}

.ccard__links i {
    flex-shrink: 0;
    margin-top: 5px;
    font-size: 12px;
    color: var(--teal);
    transition: color .45s var(--ease);
}

.ccard__links a {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    transition: color .45s var(--ease);
}

.ccard__links a:hover {
    color: var(--teal);
}

.ccard:hover .ccard__links i {
    color: var(--teal-light);
}

.ccard:hover .ccard__links a {
    color: #fff;
}

.ccard:hover .ccard__links a:hover {
    color: var(--teal-light);
}

.contact-page__form {
    padding: 34px 32px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(600px 340px at 85% 0%, rgba(75, 179, 196, .26), transparent 62%),
        linear-gradient(150deg, var(--teal-dark), var(--teal-darker));
    box-shadow: var(--shadow-lg);
}

.contact-page__form h3 {
    font-size: clamp(19.2px, calc(17.1px + 0.539vw), 24px);
    color: #fff;
    margin-bottom: 6px;
}

.contact-page__form-note {
    font-size: 14px;
    color: rgba(255, 255, 255, .72);
    margin-bottom: 24px;
}

.contact-page__form .form-field label {
    color: rgba(255, 255, 255, .88);
}

.contact-page__form .form-field input,
.contact-page__form .form-field textarea {
    background: rgba(255, 255, 255, .94);
    border-color: transparent;
}

.contact-page__form .form-field input:focus,
.contact-page__form .form-field textarea:focus {
    background: #fff;
    border-color: var(--teal-light);
    box-shadow: 0 0 0 4px rgba(75, 179, 196, .25);
}

.contact-page__form .form-error {
    color: #ffd9d9;
}

.form-field--consent {
    margin-bottom: 22px;
}

/* The consent row is a <label> inside .form-field, and `.form-field label`
   makes every label a bold block heading - which stacks the checkbox above
   its own text and bolds the sentence. Two classes to beat class+type. */
.form-field--consent .quote-check {
    display: flex;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 0;
}

/* ---- google map embed ---- */
.gmap {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

/* grows to match the form beside it rather than holding a fixed ratio */
.gmap__frame {
    position: relative;
    flex: 1;
    min-height: 340px;
    background: var(--soft);
}

.gmap__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.gmap__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px 26px;
    padding: 22px 26px;
    background: #fff;
    border-top: 1px solid var(--line);
}

.gmap__bar p {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin: 0;
    font-size: 14.5px;
}

.gmap__bar i {
    flex-shrink: 0;
    margin-top: 4px;
    color: var(--teal);
}

.gmap__bar span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gmap__bar strong {
    font-family: var(--font-head);
    font-size: 16px;
    color: var(--ink);
}

/* ---- network map ---- */
.network__map {
    padding: 26px;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

.network__map img {
    width: 100%;
    height: auto;
}

.network__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

.netchip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px 11px 14px;
    border-radius: 100px;
    background: #fff;
    border: 1px solid var(--line);
    transition: all .4s var(--ease);
}

.netchip i {
    font-size: 14px;
    color: var(--teal);
    transition: color .4s var(--ease);
}

.netchip span {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    transition: color .4s var(--ease);
}

.netchip small {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 11.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--body);
    transition: color .4s var(--ease);
}

.netchip:hover {
    transform: translateY(-4px);
    border-color: var(--teal-light);
    box-shadow: var(--shadow-sm);
}

/* the head office reads as the anchor of the network */
.netchip--ho {
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(13, 127, 146, .3);
}

.netchip--ho i,
.netchip--ho span,
.netchip--ho small {
    color: #fff;
}

.netchip--ho small {
    color: rgba(255, 255, 255, .82);
}

.netchip--ho:hover {
    border-color: transparent;
    box-shadow: 0 16px 30px rgba(13, 127, 146, .42);
}

/* ---- legal pages (terms, privacy, cookies) ---- */
.legal__grid {
    display: grid;
    grid-template-columns: .32fr .68fr;
    gap: 54px;
    align-items: start;
}

.legal__toc {
    position: sticky;
    top: calc(var(--header-h) + 30px);
    padding: 26px 24px;
    border-radius: var(--radius);
    background: var(--soft);
    border: 1px solid var(--line);
}

.legal__toc h3 {
    font-size: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--body);
    margin-bottom: 16px;
}

.legal__toc ol {
    display: grid;
    gap: 9px;
    counter-reset: toc;
}

.legal__toc li {
    counter-increment: toc;
}

.legal__toc a {
    display: flex;
    gap: 10px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--body);
}

.legal__toc a::before {
    content: counter(toc) ".";
    flex-shrink: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--teal-light);
}

.legal__toc a:hover {
    color: var(--teal);
}

.legal__body {
    max-width: 760px;
}

.legal__intro {
    padding: 22px 24px;
    margin-bottom: 34px;
    border-radius: var(--radius);
    background: var(--teal-lighter);
    border-left: 4px solid var(--teal);
    font-size: 15px;
}

.legal__section {
    /* clears the sticky header when jumped to from the contents list */
    scroll-margin-top: calc(var(--header-h) + 30px);
    padding-bottom: 30px;
}

.legal__section+.legal__section {
    border-top: 1px solid var(--line);
    padding-top: 30px;
}

.legal__section h2,
.legal__section h3 {
    font-size: clamp(17.6px, calc(15.67px + 0.494vw), 22px);
    margin-bottom: 12px;
}

.legal__section p,
.legal__section li {
    font-size: 15.5px;
}

.legal__section ul {
    display: grid;
    gap: 9px;
    margin: 0 0 1.1em;
}

.legal__section ul li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.legal__section ul li::before {
    content: '';
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-top: 10px;
    border-radius: 50%;
    background: var(--teal-light);
}

.legal__updated {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    padding: 7px 16px;
    border-radius: 100px;
    font-size: 13px;
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
}

/* ---- maintenance: care schedule ---- */
.care__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.care-card {
    position: relative;
    overflow: hidden;
    padding: 32px 28px 30px;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid var(--line);
    transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}

.care-card:hover {
    transform: translateY(-8px);
    border-color: var(--teal-light);
    box-shadow: var(--shadow-lg);
}

.care-card__step {
    position: absolute;
    top: 18px;
    right: 22px;
    font-family: var(--font-head);
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(75, 179, 196, .38);
    transition: -webkit-text-stroke-color .45s var(--ease);
}

.care-card:hover .care-card__step {
    -webkit-text-stroke-color: rgba(13, 127, 146, .8);
}

.care-card__icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    margin-bottom: 20px;
    font-size: 21px;
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    box-shadow: 0 10px 22px rgba(13, 127, 146, .3);
    transition: transform .45s var(--ease);
}

.care-card:hover .care-card__icon {
    transform: rotate(-8deg) scale(1.08);
}

.care-card h3 {
    font-size: clamp(16.7px, calc(15.69px + 0.258vw), 19px);
    margin-bottom: 10px;
}

.care-card__task {
    font-size: 15.5px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 8px;
}

.care-card__note {
    font-size: 14px;
    margin: 0;
}

/* ---- maintenance: procedures ---- */
.procs__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

.proc {
    padding: 30px 28px;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid var(--line);
}

.proc__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
}

.proc__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 19px;
    color: var(--teal);
    background: var(--teal-lighter);
}

.proc__head h4 {
    font-size: clamp(15.8px, calc(14.84px + 0.247vw), 18px);
    margin-bottom: 3px;
}

.proc__head p {
    font-size: 13.5px;
    margin: 0;
}

/* numbered rail down the left of the steps */
.proc__steps {
    display: grid;
    gap: 16px;
    counter-reset: proc;
    list-style: none;
    padding: 0;
}

.proc__steps li {
    counter-increment: proc;
    position: relative;
    padding-left: 44px;
    font-size: 15px;
}

.proc__steps li::before {
    content: counter(proc);
    position: absolute;
    left: 0;
    top: -1px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    color: var(--teal-dark);
    background: var(--teal-lighter);
    border: 1px solid rgba(75, 179, 196, .3);
}

/* the connecting line between the step markers */
.proc__steps li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 13px;
    top: 30px;
    bottom: -16px;
    width: 1px;
    background: rgba(75, 179, 196, .3);
}

.procs__warn {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 28px;
    padding: 20px 24px;
    border-radius: var(--radius);
    background: #fff5e8;
    border: 1px solid #ffd9ac;
    color: #8a5216;
    font-size: 14.5px;
}

.procs__warn i {
    flex-shrink: 0;
    margin-top: 3px;
    font-size: 17px;
    color: #d38017;
}

/* ---- warranty: cover periods ---- */
.warranty__periods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

.wperiod {
    padding: 34px 32px;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid var(--line);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.wperiod:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
}

/* the headline cover gets the filled treatment */
.wperiod--lead {
    color: rgba(255, 255, 255, .84);
    border-color: transparent;
    background:
        radial-gradient(520px 320px at 85% 0%, rgba(75, 179, 196, .3), transparent 62%),
        linear-gradient(150deg, var(--teal-dark), var(--teal-darker));
    box-shadow: var(--shadow-lg);
}

.wperiod__icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    margin-bottom: 22px;
    font-size: 21px;
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
}

.wperiod--lead .wperiod__icon {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
}

.wperiod__part {
    font-family: var(--font-brand);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 10px;
}

.wperiod--lead .wperiod__part {
    color: var(--teal-light);
}

.wperiod__value {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
}

.wperiod__value strong {
    font-family: var(--font-head);
    font-size: clamp(34.1px, calc(21.87px + 3.135vw), 62px);
    font-weight: 800;
    line-height: 1;
    color: var(--ink);
}

.wperiod--lead .wperiod__value strong {
    color: #fff;
}

.wperiod__value span {
    display: flex;
    flex-direction: column;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(16.7px, calc(15.69px + 0.258vw), 19px);
    color: var(--ink);
    line-height: 1.2;
}

.wperiod--lead .wperiod__value span {
    color: #fff;
}

.wperiod__value small {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--body);
}

.wperiod--lead .wperiod__value small {
    color: rgba(255, 255, 255, .7);
}

.wperiod__detail {
    font-size: 15px;
    margin: 0;
}

/* ---- warranty: inclusion / exclusion ---- */
.wscope__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

.wscope__col {
    padding: 30px 28px;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid var(--line);
}

.wscope__col h4 {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: clamp(16.7px, calc(15.69px + 0.258vw), 19px);
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.wscope__col--in h4 i {
    color: #1e9e63;
}

.wscope__col--out h4 i {
    color: #c9605a;
}

.wscope__col ul {
    display: grid;
    gap: 14px;
}

.wscope__col li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    font-size: 15px;
}

.wscope__col li i {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 11px;
}

.wscope__col--in li i {
    color: #1e9e63;
    background: #e4f6ec;
}

.wscope__col--out li i {
    color: #c9605a;
    background: #fbeceb;
}

/* ---- warranty: claim steps ---- */
.wclaim__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.wstep {
    position: relative;
    padding: 30px 26px;
    border-radius: var(--radius-lg);
    background: var(--soft);
    border: 1px solid var(--line);
    transition: transform .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease);
}

.wstep:hover {
    transform: translateY(-6px);
    background: #fff;
    border-color: var(--teal-light);
}

.wstep__num {
    position: absolute;
    top: 20px;
    right: 24px;
    font-family: var(--font-head);
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(75, 179, 196, .4);
}

.wstep__icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    margin-bottom: 18px;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
}

.wstep h4 {
    font-size: clamp(15.8px, calc(14.84px + 0.247vw), 18px);
    margin-bottom: 8px;
}

.wstep p {
    font-size: 14.5px;
    margin: 0;
}

.wclaim__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px 28px;
    margin-top: 40px;
    padding: 30px;
    border-radius: var(--radius-lg);
    background: var(--teal-lighter);
}

.wclaim__cta p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(16.7px, calc(15.69px + 0.258vw), 19px);
    color: var(--ink);
}

.wclaim__note {
    max-width: 720px;
    margin: 26px auto 0;
    text-align: center;
    font-size: 14px;
}

/* ---- troubleshooting ---- */
.tgroup+.tgroup {
    margin-top: 54px;
}

.tgroup__head {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 20px;
    margin-bottom: 26px;
    border-bottom: 2px solid var(--line);
}

.tgroup__icon {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    font-size: 22px;
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    box-shadow: 0 10px 22px rgba(13, 127, 146, .28);
}

.tgroup__head h3 {
    font-size: clamp(20px, calc(17.81px + 0.562vw), 25px);
    margin-bottom: 3px;
}

.tgroup__head p {
    font-size: 14.5px;
    margin: 0;
}

.tgroup__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.tissue {
    position: relative;
    padding: 26px 26px 24px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--teal-light);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-left-color .4s var(--ease);
}

.tissue:hover {
    transform: translateX(6px);
    border-left-color: var(--teal);
    box-shadow: var(--shadow-sm);
}

.tissue__num {
    position: absolute;
    top: 22px;
    right: 24px;
    font-family: var(--font-head);
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(75, 179, 196, .35);
}

.tissue h4 {
    font-size: clamp(15.8px, calc(14.84px + 0.247vw), 18px);
    margin-bottom: 16px;
    padding-right: 46px;
}

.tissue__row {
    display: grid;
    gap: 4px;
    font-size: 14.5px;
    margin-bottom: 12px;
}

.tissue__row:last-child {
    margin-bottom: 0;
}

.tissue__tag {
    font-family: var(--font-brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.tissue__row--cause .tissue__tag {
    color: #c07a2a;
}

.tissue__row--fix .tissue__tag {
    color: var(--teal);
}

.tissue__row--fix {
    padding-top: 12px;
    border-top: 1px dashed var(--line);
    color: var(--ink);
}

.trouble__cta,
.faqpage__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 26px;
    margin-top: 48px;
    padding: 36px 40px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(600px 340px at 88% 10%, rgba(75, 179, 196, .3), transparent 62%),
        linear-gradient(150deg, var(--teal-dark), var(--teal-darker));
}

.trouble__cta h3,
.faqpage__cta h3 {
    font-size: clamp(20px, calc(17.81px + 0.562vw), 25px);
    color: #fff;
    margin-bottom: 6px;
}

.trouble__cta p,
.faqpage__cta p {
    margin: 0;
    color: rgba(255, 255, 255, .78);
}

.faqpage__cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
}

.faqpage__cta .btn--outline {
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

/* ---- faq page groups ---- */
.faqgroup+.faqgroup {
    margin-top: 46px;
}

.faqgroup__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.faqgroup__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 19px;
    color: var(--teal);
    background: var(--teal-lighter);
}

.faqgroup__head h3 {
    font-size: clamp(18.4px, calc(16.38px + 0.517vw), 23px);
    margin: 0;
}

.faqgroup__count {
    margin-left: auto;
    font-family: var(--font-brand);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--body);
}

/* ---- 404 and thank you heroes ---- */
.errorpage,
.thanks {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    text-align: center;
    padding: calc(var(--topbar-h) + var(--header-h) + 80px) 0 84px;
    background: linear-gradient(150deg, var(--teal-darker) 0%, #0a2b34 55%, #061b22 100%);
}

.errorpage__bg,
.thanks__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(760px 460px at 50% 8%, rgba(75, 179, 196, .30), transparent 64%),
        radial-gradient(600px 400px at 88% 100%, rgba(13, 127, 146, .28), transparent 60%);
}

/* faint blades drifting behind the message */
.errorpage__fan,
.thanks__fan {
    position: absolute;
    z-index: -1;
    color: rgba(96, 200, 218, .10);
    line-height: 1;
    pointer-events: none;
    animation: spin linear infinite;
}

.errorpage__fan--a {
    top: -70px;
    left: -80px;
    font-size: clamp(96px, calc(6.61px + 22.921vw), 300px);
    animation-duration: 46s;
}

.errorpage__fan--b {
    bottom: -120px;
    right: -90px;
    font-size: clamp(121.6px, calc(8.37px + 29.034vw), 380px);
    animation-duration: 58s;
    animation-direction: reverse;
}

.thanks__fan {
    top: -90px;
    right: -80px;
    font-size: clamp(108.8px, calc(7.49px + 25.978vw), 340px);
    animation-duration: 52s;
}

.errorpage__inner,
.thanks__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* the numeral sits behind the headline as a watermark */
.errorpage__code {
    font-family: var(--font-head);
    font-size: clamp(84px, calc(15.65px + 17.53vw), 240px);
    font-weight: 800;
    line-height: .82;
    letter-spacing: -.04em;
    color: transparent;
    -webkit-text-stroke: 2px rgba(75, 179, 196, .40);
    margin-bottom: -18px;
}

.errorpage h1,
.thanks h1 {
    font-size: clamp(25px, calc(16.79px + 2.104vw), 46px);
    color: #fff;
    margin-bottom: 14px;
}

.errorpage p,
.thanks p {
    max-width: 560px;
    font-size: clamp(15px, calc(14.12px + 0.225vw), 17px);
    color: rgba(255, 255, 255, .8);
    margin: 0 auto;
}

.errorpage__actions,
.thanks__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

/* blueprint texture, fading out before it reaches the card */
.thanks__grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(circle at 50% 45%, transparent 28%, #000 72%);
    mask-image: radial-gradient(circle at 50% 45%, transparent 28%, #000 72%);
}

/* the confirmation reads as a panel rather than loose text on a gradient */
.thanks__card {
    max-width: 680px;
    margin-inline: auto;
    padding: 48px 44px 40px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .13);
    box-shadow: 0 34px 70px rgba(2, 18, 24, .45);
    backdrop-filter: blur(8px);
}

.thanks__mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    margin: 0 auto 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    box-shadow: 0 16px 36px rgba(13, 127, 146, .45);
}

/* ring of light pushing out from behind the blades */
.thanks__pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(75, 179, 196, .30);
    animation: pulseRing 2.8s ease-out infinite;
}

.thanks__mark img {
    position: relative;
    width: 52px;
    height: 52px;
    /* the mark is teal artwork; knock it out white against the teal badge */
    filter: brightness(0) invert(1);
    animation: spin 6s linear infinite;
}

.thanks__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    padding: 7px 18px;
    border-radius: 100px;
    font-family: var(--font-brand);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--teal-light);
    background: rgba(75, 179, 196, .13);
    border: 1px solid rgba(75, 179, 196, .3);
}

.thanks__badge i {
    font-size: 11px;
}

.thanks__urgent {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 14.5px;
    color: rgba(255, 255, 255, .66);
}

.thanks__urgent i {
    margin-right: 7px;
    color: var(--teal-light);
}

.thanks__urgent a {
    font-family: var(--font-head);
    font-weight: 700;
    color: #fff;
}

.thanks__urgent a:hover {
    color: var(--teal-light);
}

/* ---- shared link cards (404 suggestions, thank-you follow ups) ---- */
.notfound__grid,
.nextsteps__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.ncard {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 22px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
    color: inherit;
    transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}

.ncard:hover {
    transform: translateY(-5px);
    border-color: var(--teal-light);
    box-shadow: var(--shadow-sm);
    color: inherit;
}

.ncard__icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 18px;
    color: var(--teal);
    background: var(--teal-lighter);
    transition: all .4s var(--ease);
}

.ncard:hover .ncard__icon {
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    transform: rotate(-8deg) scale(1.07);
}

.ncard__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ncard__body strong {
    font-family: var(--font-head);
    font-size: 16.5px;
    color: var(--ink);
}

.ncard__body small {
    font-size: 13px;
    color: var(--body);
}

.ncard__go {
    margin-left: auto;
    font-size: 13px;
    color: var(--teal-light);
    transition: transform .35s var(--ease);
}

.ncard:hover .ncard__go {
    transform: translateX(4px);
    color: var(--teal);
}

/* ---- thank you: what happens next ---- */
.nextsteps__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.nstep {
    position: relative;
    padding: 32px 28px 30px;
    border-radius: var(--radius-lg);
    background: var(--soft);
    border: 1px solid var(--line);
    transition: transform .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease);
}

.nstep:hover {
    transform: translateY(-6px);
    background: #fff;
    border-color: var(--teal-light);
}

.nstep__num {
    position: absolute;
    top: 20px;
    right: 24px;
    font-family: var(--font-head);
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(75, 179, 196, .4);
}

.nstep__icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    margin-bottom: 20px;
    font-size: 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    box-shadow: 0 10px 22px rgba(13, 127, 146, .28);
}

.nstep h3 {
    font-size: clamp(16.7px, calc(15.69px + 0.258vw), 19px);
    margin-bottom: 8px;
}

.nstep p {
    font-size: 14.5px;
    margin: 0;
}

.nextsteps__meanwhile {
    margin-top: 56px;
    padding-top: 44px;
    border-top: 1px solid var(--line);
}

.nextsteps__meanwhile>h3 {
    font-size: clamp(16.8px, calc(14.96px + 0.472vw), 21px);
    text-align: center;
    margin-bottom: 24px;
}


/* ==========================================================================
   22c. STUDY ZONE  (calculator workbench, technology, coming soon)
   ========================================================================== */

/* ---- calculator workbench ----
   Inputs on the left share a single shell with the dark readout on the right,
   so the numbers stay in view while the measurements are being typed. */
.workbench {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 26px 60px rgba(16, 34, 42, .10);
}

.workbench__heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--teal-dark);
    padding-bottom: 16px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--line);
}

.workbench__heading i {
    font-size: 14px;
    color: var(--teal);
}

.workbench__heading--light {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .16);
}

.workbench__heading--light i {
    color: var(--teal-light);
}

.workbench__inputs {
    padding: 34px 34px 38px;
}

.workbench__dims {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.wfield {
    margin-bottom: 22px;
}

.wfield label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-head);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}

/* the unit rides inside the box so the number and its "ft" read as one value */
.wfield__box {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: var(--radius);
    background: var(--soft);
    border: 1.5px solid var(--line);
    transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}

.wfield__box:focus-within {
    background: #fff;
    border-color: var(--teal);
    box-shadow: 0 0 0 4px rgba(13, 127, 146, .10);
}

.wfield__box input,
.wfield__box select {
    width: 100%;
    padding: 13px 14px;
    border: 0;
    background: none;
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    appearance: none;
    outline: none;
}

/* number spinners fight the fixed-width unit label, so drop them */
.wfield__box input::-webkit-outer-spin-button,
.wfield__box input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

.wfield__box input[type=number] {
    -moz-appearance: textfield;
}

.wfield__unit {
    flex-shrink: 0;
    padding-right: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--body);
}

.wfield__box--select::after {
    content: '\f078';
    font-family: 'Font Awesome 7 Pro';
    font-weight: 300;
    position: absolute;
    right: 15px;
    font-size: 11px;
    color: var(--teal);
    pointer-events: none;
}

.wfield__box--select select {
    padding-right: 38px;
    cursor: pointer;
}

.wfield__hint {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--body);
}

.workbench__error {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--radius);
    font-size: 14px;
    color: #a4342b;
    background: rgba(200, 62, 48, .08);
}

.workbench__output {
    display: flex;
    flex-direction: column;
    padding: 34px 32px 32px;
    background:
        radial-gradient(360px 240px at 80% 0%, rgba(75, 179, 196, .26), transparent 66%),
        linear-gradient(165deg, var(--teal-darker), #061b22);
}

.wstat {
    padding: 16px 18px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
}

.wstat+.wstat,
.wstat__row {
    margin-top: 12px;
}

.wstat--accent {
    background: rgba(75, 179, 196, .16);
    border-color: rgba(75, 179, 196, .34);
}

.wstat__label {
    display: block;
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}

.wstat__value {
    display: block;
    font-family: var(--font-brand);
    font-size: clamp(22.4px, calc(17.32px + 1.303vw), 34px);
    line-height: 1.15;
    color: #fff;
    /* tabular figures stop the number jittering sideways as it recalculates */
    font-variant-numeric: tabular-nums;
}

.wstat--accent .wstat__value {
    color: var(--teal-light);
}

.wstat__value--sm {
    font-size: clamp(16.8px, calc(14.96px + 0.472vw), 21px);
}

.wstat__unit {
    display: block;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .55);
}

.wstat__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.wstat__row .wstat {
    margin-top: 0;
}

.workbench__output .btn {
    margin-top: auto;
    margin-bottom: 12px;
}

/* pushes the button to the floor even when the stats are short */
.workbench__output .wstat__row {
    margin-bottom: 24px;
}

.workbench__foot {
    margin: 0;
    font-size: 13px;
    text-align: center;
    color: rgba(255, 255, 255, .55);
}

/* ---- formula steps ---- */
.steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    list-style: none;
}

.steps__item {
    position: relative;
    padding: 30px 24px 24px;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid var(--line);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}

.steps__item:hover {
    transform: translateY(-6px);
    border-color: var(--teal-lighter);
    box-shadow: 0 18px 36px rgba(16, 34, 42, .10);
}

/* the step number sits half outside the card, over its top edge */
.steps__num {
    position: absolute;
    top: -16px;
    left: 24px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--font-brand);
    font-size: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    box-shadow: 0 8px 18px rgba(13, 127, 146, .30);
}

.steps__icon {
    display: block;
    margin-bottom: 14px;
    font-size: 26px;
    color: var(--teal);
}

.steps__item h4 {
    font-size: clamp(15px, calc(14.12px + 0.225vw), 17px);
    margin-bottom: 8px;
}

.steps__item p {
    font-size: 14.5px;
    margin-bottom: 16px;
}

.steps__math {
    display: block;
    padding: 9px 12px;
    border-radius: var(--radius);
    background: var(--soft);
    border: 1px dashed var(--teal-lighter);
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 600;
    color: var(--teal-dark);
}

/* ---- shared data table (ACH reference + comparison) ---- */
.achref__table,
.cmp {
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: #fff;
    /* a wide table must scroll inside its own box, never the page */
    overflow-x: auto;
}

.achref__table table,
.cmp table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
}

.achref__table th,
.achref__table td,
.cmp th,
.cmp td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.achref__table thead th,
.cmp thead th {
    font-family: var(--font-head);
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--teal-dark);
    border-bottom: 0;
}

.achref__table tbody th,
.cmp tbody th {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.achref__table td,
.cmp td {
    font-size: 14.5px;
    color: var(--body);
}

.achref__table tbody tr:last-child th,
.achref__table tbody tr:last-child td,
.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td {
    border-bottom: 0;
}

.achref__table tbody tr,
.cmp tbody tr {
    transition: background .3s var(--ease);
}

.achref__table tbody tr:hover,
.cmp tbody tr:hover {
    background: var(--soft);
}

.achref__table td:last-child strong {
    font-family: var(--font-brand);
    font-size: clamp(16.7px, calc(15.69px + 0.258vw), 19px);
    color: var(--teal);
}

/* our column is tinted the whole way down so the eye tracks it */
.cmp__ours {
    background: rgba(75, 179, 196, .07);
}

.cmp thead .cmp__ours {
    background: var(--teal);
}

.cmp tbody .cmp__ours {
    font-weight: 600;
    color: var(--teal-dark);
}

/* ---- notes / caveat panels ---- */
.achref__notes,
.cmp__caveat {
    margin-top: 30px;
    padding: 26px 28px;
    border-radius: var(--radius-lg);
    background: var(--soft);
    border-left: 4px solid var(--teal);
}

.achref__notes h4,
.cmp__caveat h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(15px, calc(14.12px + 0.225vw), 17px);
    margin-bottom: 14px;
}

.achref__notes h4 i,
.cmp__caveat h4 i {
    color: var(--teal);
}

.achref__notes ul {
    display: grid;
    gap: 9px;
    margin-bottom: 16px;
    padding-left: 20px;
    list-style: disc;
}

.achref__notes li {
    font-size: 14.5px;
}

.achref__notes>p:last-child,
.cmp__caveat p {
    margin: 0;
    font-size: 14.5px;
}

/* ---- technology: the three opening points ---- */
.tpoints {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    list-style: none;
}

.tpoints li {
    padding: 30px 26px;
    border-radius: var(--radius-lg);
    background: var(--soft);
    border: 1px solid var(--line);
    transition: transform .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease);
}

.tpoints li:hover {
    transform: translateY(-6px);
    background: #fff;
    border-color: var(--teal-lighter);
    box-shadow: 0 18px 36px rgba(16, 34, 42, .09);
}

.tpoints__icon {
    display: block;
    margin-bottom: 14px;
    font-size: 30px;
    color: var(--teal);
}

.tpoints h3 {
    font-size: clamp(15.8px, calc(14.84px + 0.247vw), 18px);
    margin-bottom: 9px;
}

.tpoints p {
    font-size: 14.5px;
    margin: 0;
}

/* ---- technology: how it works ---- */
.tech-how__grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: start;
}

/* the head sits inside the column, so it is left aligned rather than centred */
.tech-how__head {
    text-align: left;
    margin-bottom: 36px;
}

.tech-how__head .section__title {
    font-size: clamp(21px, calc(14.43px + 1.685vw), 36px);
}

.hsteps {
    display: grid;
    gap: 4px;
    list-style: none;
    counter-reset: none;
}

.hsteps__item {
    display: flex;
    gap: 18px;
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.hsteps__item:first-child {
    border-top: 0;
    padding-top: 0;
}

.hsteps__num {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--font-brand);
    font-size: 14px;
    color: var(--teal-light);
    background: rgba(75, 179, 196, .16);
    border: 1px solid rgba(75, 179, 196, .34);
}

.hsteps__text h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(15px, calc(14.12px + 0.225vw), 17px);
    color: #fff;
    margin-bottom: 6px;
}

.hsteps__text h4 i {
    font-size: 15px;
    color: var(--teal-light);
}

.hsteps__text p {
    font-size: 14.5px;
    color: rgba(255, 255, 255, .72);
    margin: 0;
}

/* ---- technology: framed artwork ----
   Both illustrations carry their own dark background, so they get a glass
   frame with a teal edge instead of a white card that would clash with them. */
.techshot {
    margin: 0;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255);
    border: 1px solid rgba(75, 179, 196, .28);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .32);
}

.techshot img {
    width: 100%;
    height: auto;
    border-radius: 14px;
}

.techshot figcaption {
    padding: 14px 6px 4px;
    font-size: 13.5px;
    text-align: center;
    color: rgb(1, 1, 1);
}

.techshot--wide {
    max-width: 1000px;
    margin: 0 auto;
}

/* ---- technology: benefit cards ---- */
.tbcards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.tbcard {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 30px 26px 28px;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid var(--line);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}

/* teal bar grows along the top edge on hover */
.tbcard::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    z-index: -1;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, var(--teal), var(--teal-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease);
}

.tbcard:hover {
    transform: translateY(-8px);
    border-color: transparent;
    box-shadow: 0 22px 44px rgba(16, 34, 42, .13);
}

.tbcard:hover::before {
    transform: none;
}

.tbcard__icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    margin-bottom: 18px;
    font-size: 21px;
    color: var(--teal-dark);
    background: var(--teal-lighter);
    transition: all .45s var(--ease);
}

.tbcard:hover .tbcard__icon {
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    transform: rotate(-8deg);
}

.tbcard h4 {
    font-size: clamp(15.8px, calc(14.84px + 0.247vw), 18px);
    margin-bottom: 9px;
}

.tbcard p {
    font-size: 14.5px;
    margin: 0;
}

/* ---- technology: applications on the dark band ---- */
.appgrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

/* against the near-black bottom of the band these need real edges, not a 5%
   white wash - the tinted top-left corner is what separates them from it */
.appgrid__item {
    padding: 28px 24px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(280px 180px at 0% 0%, rgba(75, 179, 196, .16), transparent 70%),
        rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    transition: transform .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}

.appgrid__item:hover {
    transform: translateY(-6px);
    background:
        radial-gradient(280px 180px at 0% 0%, rgba(75, 179, 196, .30), transparent 70%),
        rgba(255, 255, 255, .11);
    border-color: rgba(75, 179, 196, .55);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .28);
}

.appgrid__icon {
    display: block;
    margin-bottom: 14px;
    font-size: 28px;
    color: var(--teal-light);
}

.appgrid__item h4 {
    font-size: clamp(15.8px, calc(14.84px + 0.247vw), 18px);
    color: #fff;
    margin-bottom: 8px;
}

.appgrid__item p {
    font-size: 14.5px;
    color: rgba(255, 255, 255, .70);
    margin: 0;
}

/* the same grid on a white section - the dark band's white overlays would be
   invisible here, so the whole card flips to a bordered light panel */
.appgrid--light .appgrid__item {
    background: var(--soft);
    border-color: var(--line);
}

.appgrid--light .appgrid__item:hover {
    background: #fff;
    border-color: var(--teal-lighter);
    box-shadow: 0 18px 38px rgba(16, 34, 42, .10);
}

.appgrid--light .appgrid__icon {
    color: var(--teal);
}

.appgrid--light .appgrid__item h4 {
    color: var(--ink);
}

.appgrid--light .appgrid__item p {
    color: var(--body);
}

/* ---- technology: the closing case ---- */
.tech-why__inner {
    max-width: 820px;
    text-align: center;
}

.tech-why__lead {
    font-size: clamp(15.4px, calc(14.48px + 0.236vw), 17.5px);
    margin-bottom: 30px;
}

.tech-why__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

/* ---- coming soon ---- */
.page-hero--short {
    padding-bottom: 46px;
}

.soon__inner {
    max-width: 880px;
    text-align: center;
}

.soon__badge {
    position: relative;
    width: 118px;
    height: 118px;
    margin: 0 auto 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 42px;
    color: #fff;
    background: linear-gradient(135deg, var(--teal-dark), var(--teal));
    box-shadow: 0 18px 40px rgba(13, 127, 146, .32);
}

.soon__badge i {
    position: relative;
    z-index: 1;
}

/* three rings leaving on a stagger reads as "work in progress" */
.soon__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--teal);
    opacity: 0;
    animation: soonPulse 3s var(--ease) infinite;
}

.soon__ring:nth-child(2) {
    animation-delay: 1s;
}

.soon__ring:nth-child(3) {
    animation-delay: 2s;
}

@keyframes soonPulse {
    0% {
        transform: scale(1);
        opacity: .55;
    }

    100% {
        transform: scale(1.85);
        opacity: 0;
    }
}

.soon__title {
    font-size: clamp(27px, calc(17.93px + 2.326vw), 50px);
    margin: 12px 0 14px;
}

.soon__title span {
    color: var(--teal);
}

.soon__lead {
    max-width: 620px;
    margin: 0 auto;
    font-size: clamp(15px, calc(14.12px + 0.225vw), 17px);
}

.soon__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 46px 0;
    text-align: left;
    list-style: none;
}

.soon__list li {
    padding: 26px 24px;
    border-radius: var(--radius-lg);
    background: var(--soft);
    border: 1px solid var(--line);
    transition: transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}

.soon__list li:hover {
    transform: translateY(-6px);
    background: #fff;
    border-color: var(--teal-lighter);
}

.soon__list-icon {
    display: block;
    margin-bottom: 13px;
    font-size: clamp(19.2px, calc(17.1px + 0.539vw), 24px);
    color: var(--teal);
}

.soon__list h3 {
    font-size: clamp(15px, calc(14.12px + 0.225vw), 17px);
    margin-bottom: 8px;
}

.soon__list p {
    font-size: 14.5px;
    margin: 0;
}

.soon__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.soon__foot {
    margin: 26px 0 0;
    font-size: 14.5px;
    color: var(--body);
}

.soon__foot a {
    font-weight: 600;
    color: var(--teal);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.soon__foot a:hover {
    color: var(--teal-dark);
}

@media (prefers-reduced-motion: reduce) {
    .soon__ring {
        animation: none;
    }
}


/* ==========================================================================
   22d. PLANNING & MAPPING
   ========================================================================== */

/* ---- open space cooling system ---- */
.duct__grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 52px;
    align-items: center;
}

/* the illustration has its own dark background, so it gets a tinted mount
   rather than sitting raw on the white section */
.ductshot {
    margin: 0;
    padding: 12px;
    border-radius: var(--radius-lg);
    background: linear-gradient(150deg, var(--teal-lighter), var(--soft));
    border: 1px solid var(--line);
}

.ductshot img {
    width: 100%;
    height: auto;
    border-radius: 14px;
}

.airpath {
    display: grid;
    gap: 2px;
    list-style: none;
}

.airpath__step {
    display: flex;
    gap: 18px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
}

.airpath__step:first-child {
    border-top: 0;
    padding-top: 0;
}

.airpath__num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--font-brand);
    font-size: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    box-shadow: 0 8px 18px rgba(13, 127, 146, .26);
}

.airpath__step h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(15.4px, calc(14.48px + 0.236vw), 17.5px);
    margin-bottom: 7px;
}

.airpath__step h3 i {
    font-size: 15px;
    color: var(--teal);
}

.airpath__step p {
    font-size: 14.5px;
    margin: 0;
}

/* ---- mapping ---- */
.mapping__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 52px;
    align-items: center;
}

.mapping__body .section__title {
    font-size: clamp(21px, calc(14.43px + 1.685vw), 36px);
}

.mapping__list {
    display: grid;
    gap: 14px;
    margin-top: 26px;
    list-style: none;
}

.mapping__list li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    font-size: 15px;
    color: rgba(255, 255, 255, .80);
}

.mapping__list i {
    flex-shrink: 0;
    margin-top: 4px;
    font-size: 15px;
    color: var(--teal-light);
}

/* ---- company panels ---- */
.company__panel p {
    font-size: 14.5px;
}

/* ---- application chips ---- */
.appgrid--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* no body copy on these, so the icon and label centre together */
.appgrid__item--compact {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
}

.appgrid__item--compact .appgrid__icon {
    margin-bottom: 0;
    font-size: 26px;
}

.appgrid__item--compact h4 {
    font-size: 16px;
    margin-bottom: 0;
}

/* ---- energy comparison ---- */
.energy__highlight {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 26px;
    max-width: 800px;
    margin: 0 auto 42px;
    padding: 32px 34px;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

.energy__stat {
    text-align: center;
}

.energy__stat-label {
    display: block;
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--body);
}

.energy__stat-value {
    display: block;
    font-family: var(--font-brand);
    font-size: clamp(24.2px, calc(15.52px + 2.225vw), 44px);
    line-height: 1.1;
    color: var(--ink);
}

.energy__stat-value--good {
    color: var(--teal);
}

.energy__stat-note {
    display: block;
    font-size: 13px;
    color: var(--body);
}

.energy__vs {
    font-family: var(--font-brand);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--body);
    opacity: .6;
}

/* drops onto its own full-width line under both figures */
.energy__conclusion {
    flex-basis: 100%;
    margin: 0;
    padding-top: 22px;
    border-top: 1px dashed var(--line);
    font-size: 16.5px;
    text-align: center;
}

.energy__conclusion strong {
    color: var(--teal);
}

/* the five-column table has to scroll inside its own box, never the page */
.ptable {
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: #fff;
    overflow-x: auto;
}

.ptable table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.ptable th,
.ptable td {
    padding: 15px 18px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    font-size: 14.5px;
    white-space: nowrap;
}

.ptable thead th {
    font-family: var(--font-head);
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    background: var(--teal-dark);
    border-bottom: 0;
    white-space: normal;
}

.ptable tbody th {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    white-space: normal;
}

.ptable tbody tr:last-child th,
.ptable tbody tr:last-child td {
    border-bottom: 0;
}

.ptable tbody tr {
    transition: background .3s var(--ease);
}

.ptable tbody tr:hover {
    background: var(--soft);
}

/* our column is tinted the whole way down so the eye tracks it */
.ptable__ours {
    background: rgba(75, 179, 196, .08);
}

.ptable thead .ptable__ours {
    background: var(--teal);
}

.ptable tbody .ptable__ours {
    font-weight: 600;
    color: var(--teal-dark);
}

/* the two rows that carry the argument */
.ptable__key th,
.ptable__key td {
    font-size: 15.5px;
    font-weight: 700;
    background: rgba(16, 34, 42, .03);
}

.ptable__key .ptable__ours {
    background: rgba(75, 179, 196, .16);
    color: var(--teal-dark);
}

.energy__foot {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 22px 0 0;
    font-size: 13.5px;
    color: var(--body);
}

.energy__foot i {
    margin-top: 4px;
    color: var(--teal);
}

.energy__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 40px;
}


/* ==========================================================================
   22e. AIR COOLER PARTS
   ========================================================================== */

/* a group heading that reads as a label rather than another section title */
.partsgroup__head {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    max-width: 760px;
    margin-bottom: 38px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}

.partsgroup__icon {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    font-size: 24px;
    color: var(--teal-dark);
    background: var(--teal-lighter);
}

.partsgroup__head h3 {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 24px;
    margin-bottom: 7px;
}

.partsgroup__head h3 small {
    padding: 3px 11px;
    border-radius: 100px;
    font-family: var(--font-brand);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--teal);
    background: var(--teal-lighter);
}

.partsgroup__head p {
    font-size: 15px;
    margin: 0;
}

.partsgrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
}

/* the photos are cut-outs on white, so the card is a plain frame and the tint
   sits behind the product rather than around the whole card */
.partcard {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid var(--line);
    overflow: hidden;
    transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}

.partcard:hover {
    transform: translateY(-6px);
    border-color: var(--teal-light);
    box-shadow: 0 20px 40px rgba(16, 34, 42, .12);
}

.partcard__media {
    aspect-ratio: 1 / 1;
    padding: 18px;
    background:
        radial-gradient(180px 140px at 50% 25%, rgba(75, 179, 196, .16), transparent 70%),
        var(--soft);
}

.partcard__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .55s var(--ease);
}

.partcard:hover .partcard__media img {
    transform: scale(1.07);
}

.partcard__body {
    flex: 1;
    padding: 16px 16px 12px;
}

.partcard__body h4 {
    font-size: 16px;
    margin-bottom: 4px;
}

.partcard__body p {
    font-size: 13.5px;
    margin: 0;
}

.partcard__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    font-family: var(--font-head);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--teal);
    transition: background .35s var(--ease), color .35s var(--ease);
}

.partcard__link i {
    transition: transform .35s var(--ease);
}

.partcard:hover .partcard__link {
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
}

.partcard:hover .partcard__link i {
    transform: translateX(4px);
}

.parts-cta__inner {
    max-width: 780px;
    text-align: center;
}

.parts-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}


/* ==========================================================================
   23. QUOTE POPUP
   ========================================================================== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s var(--ease), visibility .4s var(--ease);
}

.modal.is-open {
    opacity: 1;
    visibility: visible;
}

.modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 25, 32, .70);
    backdrop-filter: blur(5px);
}

.modal__box {
    position: relative;
    width: 100%;
    max-width: 560px;
    /* margin:auto keeps it centred but never clips the top when it overflows;
       hidden clips the decorative circle instead of creating scrollbars */
    margin: auto;
    overflow: hidden;
    padding: 44px 44px 40px;
    border-radius: var(--radius-lg);
    background: var(--teal);
    box-shadow: 0 40px 90px rgba(3, 20, 26, .55);
    /* fade in with a small lift, settles just after the overlay */
    opacity: 0;
    transform: translateY(26px) scale(.97);
    transition: opacity .45s var(--ease) .06s, transform .45s var(--ease) .06s;
}

.modal.is-open .modal__box {
    opacity: 1;
    transform: none;
}

/* soft curve sweeping in from the right, like the reference layout */
.modal__box::before {
    content: '';
    position: absolute;
    right: -52%;
    bottom: -38%;
    width: 125%;
    height: 145%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    pointer-events: none;
}

.modal__box>* {
    position: relative;
    z-index: 1;
}

.modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 16px;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    transition: all .3s var(--ease);
}

.modal__close:hover {
    background: #fff;
    color: var(--teal-dark);
    transform: rotate(90deg);
}

.modal__title {
    font-size: clamp(19px, calc(13.74px + 1.348vw), 31px);
    line-height: 1.22;
    color: #fff;
    text-align: center;
    margin-bottom: 26px;
}

.quote-form__field {
    margin-bottom: 16px;
}

.quote-form input[type="text"],
.quote-form input[type="tel"],
.quote-form input[type="email"],
.quote-form select,
.quote-form textarea {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #f7fafb;
    color: var(--ink);
    font-size: 15px;
    outline: none;
    transition: all .3s var(--ease);
}

.quote-form input::placeholder,
.quote-form textarea::placeholder {
    color: #93a4ac;
}

.quote-form select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2310222a'%3E%3Cpath d='M8 11.2 2.8 6l1.1-1.1L8 9l4.1-4.1L13.2 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 15px;
    padding-right: 46px;
}

.quote-form input:focus,
.quote-form select:focus {
    border-color: var(--teal-darker);
    box-shadow: 0 0 0 4px rgba(6, 63, 74, .18);
}

.quote-form .has-error input,
.quote-form .has-error select {
    border-color: #ffb4b4;
    background: #fff3f3;
}

.quote-form .form-error {
    color: #ffe0e0;
    font-weight: 500;
}

/* consent checkbox */
.quote-form__consent {
    margin: 20px 0 8px;
}

/* Consent checkbox. The base is the LIGHT surface - the contact page and the
   homepage enquiry form, both white cards. The quote popup sits on a teal
   panel and reverses all of it further down; it used to be the other way
   round, which left a white box and a white link invisible on the white
   forms the moment the same markup was reused there. */
.quote-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--body);
}

.quote-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.quote-check__box {
    flex-shrink: 0;
    margin-top: 3px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background: #fff;
    border: 2px solid var(--line);
    font-size: 11px;
    color: var(--teal);
    transition: all .3s var(--ease);
}

.quote-check__box i {
    opacity: 0;
    transform: scale(.4);
    transition: all .25s var(--ease);
}

.quote-check input:checked+.quote-check__box {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
}

.quote-check input:checked+.quote-check__box i {
    opacity: 1;
    transform: none;
}

.quote-check input:focus-visible+.quote-check__box {
    box-shadow: 0 0 0 4px rgba(13, 127, 146, .22);
}

.form-field--consent.has-error .quote-check__box {
    border-color: #d9534f;
}

.quote-check__text a {
    color: var(--teal);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.quote-check__text a:hover {
    color: var(--teal-dark);
}

/* ---- reversed for the two dark panels: the quote popup and the contact
        page form. A teal link would all but disappear on either. ---- */
.quote-form .quote-check,
.contact-page__form .quote-check {
    color: rgba(255, 255, 255, .92);
}

.quote-form .quote-check__box,
.contact-page__form .quote-check__box {
    border-color: transparent;
}

.quote-form .quote-check input:checked+.quote-check__box,
.contact-page__form .quote-check input:checked+.quote-check__box {
    background: var(--teal-darker);
    border-color: transparent;
}

.quote-form .quote-check input:focus-visible+.quote-check__box,
.contact-page__form .quote-check input:focus-visible+.quote-check__box {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .35);
}

.quote-form__consent.has-error .quote-check__box,
.contact-page__form .form-field--consent.has-error .quote-check__box {
    border-color: #ffb4b4;
}

.quote-form .quote-check__text a,
.contact-page__form .quote-check__text a {
    color: #fff;
}

.quote-form .quote-check__text a:hover,
.contact-page__form .quote-check__text a:hover {
    color: var(--teal-lighter);
}

.quote-form__actions {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}

.quote-form__submit {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: clamp(15px, calc(14.12px + 0.225vw), 17px);
    color: #fff;
    background: #0c2b33;
    padding: 16px 36px;
    border-radius: 100px;
    box-shadow: 0 12px 28px rgba(3, 20, 26, .35);
    transition: all .35s var(--ease);
}

.quote-form__submit i {
    transition: transform .35s var(--ease);
}

.quote-form__submit:hover {
    background: #071e25;
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(3, 20, 26, .45);
}

.quote-form__submit:hover i {
    transform: translateX(5px);
}

@media (max-width: 560px) {
    .modal__box {
        padding: 40px 22px 30px;
    }

    .quote-form__actions {
        justify-content: stretch;
    }

    .quote-form__submit {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   24. FLOATING BUTTONS
   ========================================================================== */
/* ==========================================================================
   QUICK CONNECT WIDGET (component/quick-connect.php)
   The markup ships with the widget and uses its own cn-cb-* names, so the
   styling lives here in one block rather than being spread through the file.
   Everything is expressed in the site tokens, so a brand colour change picks
   this up with the rest of the page.
   ========================================================================== */
.cn-cb-fab-stack {
    position: fixed;
    /* clears the back-to-top button, which sits at right:22px bottom:24px */
    right: 22px;
    bottom: 86px;
    z-index: 901;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cn-cb-fab {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    box-shadow: 0 12px 28px rgba(13, 127, 146, .42);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.cn-cb-fab--wa {
    background: linear-gradient(135deg, #25d366, #128c7e);
    box-shadow: 0 12px 28px rgba(37, 211, 102, .38);
}

.cn-cb-fab svg {
    position: relative;
    z-index: 1;
    width: 26px;
    height: 26px;
}

.cn-cb-fab:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 18px 34px rgba(13, 127, 146, .5);
}

.cn-cb-fab--wa:hover {
    box-shadow: 0 18px 34px rgba(37, 211, 102, .48);
}

/* the ring that keeps pulsing so the button is noticed once */
.cn-cb-fab-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    animation: cnPulse 2.4s var(--ease) infinite;
    pointer-events: none;
}

.cn-cb-fab .cn-cb-fab-pulse {
    background: var(--teal-light);
}

.cn-cb-fab--wa .cn-cb-fab-pulse {
    background: #25d366;
}

@keyframes cnPulse {
    0% {
        opacity: .55;
        transform: scale(1);
    }

    70%,
    100% {
        opacity: 0;
        transform: scale(1.75);
    }
}

/* label that slides out on hover, so the icons are not a guessing game */
.cn-cb-fab::after {
    content: attr(data-label);
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    padding: 7px 13px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    font-family: var(--font-body);
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all .3s var(--ease);
}

.cn-cb-fab:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* ---- modal ---- */
.cn-cb-overlay {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(6, 30, 37, .62);
    backdrop-filter: blur(4px);
    overflow-y: auto;
    animation: cnFade .3s var(--ease);
}

@keyframes cnFade {
    from {
        opacity: 0;
    }
}

.cn-cb-modal {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: auto;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 70px rgba(4, 24, 30, .45);
    overflow: hidden;
    animation: cnRise .42s var(--ease-reveal);
}

@keyframes cnRise {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
}

.cn-cb-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    transition: background .3s var(--ease), transform .3s var(--ease);
}

.cn-cb-close:hover {
    background: rgba(255, 255, 255, .34);
    transform: rotate(90deg);
}

/* ---- tabs ---- */
.cn-cb-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--teal-darker);
}

.cn-cb-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 6px 13px;
    border: 0;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    background: transparent;
    color: rgba(255, 255, 255, .62);
    font-family: var(--font-body);
    font-size: 11.5px;
    line-height: 1.2;
    text-align: center;
    transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}

.cn-cb-tab svg {
    width: 20px;
    height: 20px;
}

.cn-cb-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}

.cn-cb-tab.is-active {
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border-bottom-color: var(--teal-light);
}

/* the close button is pinned to the modal's top right corner, which lands on
   top of the third tab - give that one room rather than moving the button,
   because the WhatsApp modal has no tab row for it to move into */
.cn-cb-tabs .cn-cb-tab:last-child {
    padding-right: 34px;
}

/* ---- header ---- */
.cn-cb-header {
    padding: 22px 24px 20px;
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
    color: #fff;
    text-align: center;
}

.cn-cb-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
    justify-content: center;
}

.cn-cb-brand-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.cn-cb-brand-icon i {
    /* fixed: the disc around it is a fixed 40px */
    font-size: 20px;
    /* one slow turn, the same idle motion the footer fans have */
    animation: spin 9s linear infinite;
}

.cn-cb-brand-name {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
}

.cn-cb-title {
    margin: 0;
    color: #fff;
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

/* ---- body and panes ---- */
.cn-cb-body {
    padding: 22px 24px 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.cn-cb-pane {
    display: none;
}

.cn-cb-pane.is-active {
    display: block;
    animation: cnFade .3s var(--ease);
}

.cn-cb-label {
    display: block;
    margin-bottom: 6px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
}

.cn-cb-input {
    width: 100%;
    margin-bottom: 14px;
    padding: 12px 14px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 14.5px;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}

.cn-cb-input::placeholder {
    color: #9bacb3;
}

.cn-cb-input:focus {
    outline: 0;
    background: #fff;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(13, 127, 146, .14);
}

.cn-cb-textarea {
    min-height: 96px;
    resize: vertical;
}

.cn-cb-phone-wrap {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 10px;
}

.cn-cb-cc {
    height: 46px;
    padding: 0 10px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 14px;
    cursor: pointer;
}

.cn-cb-cc:focus {
    outline: 0;
    border-color: var(--teal);
}

.cn-cb-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* ---- consent ---- */
.cn-cb-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 4px 0 16px;
    color: var(--body);
    font-size: 12.5px;
    line-height: 1.55;
    cursor: pointer;
}

.cn-cb-consent input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--teal);
    cursor: pointer;
}

.cn-cb-consent a {
    color: var(--teal);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- submit ---- */
.cn-cb-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 14px 20px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    color: #fff;
    font-family: var(--font-head);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 10px 24px rgba(13, 127, 146, .3);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s var(--ease);
}

.cn-cb-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(13, 127, 146, .4);
}

.cn-cb-submit:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}

.cn-cb-spinner {
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

/* ---- fine print, success, error ---- */
.cn-cb-fineprint {
    margin: 12px 0 0;
    color: var(--body);
    font-size: 11.5px;
    line-height: 1.6;
    text-align: center;
}

.cn-cb-fineprint a {
    color: var(--teal);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cn-cb-success {
    padding: 16px 6px 8px;
    text-align: center;
}

.cn-cb-success-icon {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--teal-lighter);
}

.cn-cb-success-icon svg {
    stroke: var(--teal);
}

.cn-cb-success h3 {
    margin-bottom: 8px;
    color: var(--ink);
    font-size: 21px;
}

.cn-cb-success-msg {
    margin: 0;
    color: var(--body);
    font-size: 14.5px;
    line-height: 1.7;
}

.cn-cb-error-banner {
    margin-top: 14px;
    padding: 12px 15px;
    border: 1px solid #f3c9c9;
    border-radius: 10px;
    background: #fdf2f2;
    color: #a3352f;
    font-size: 13.5px;
    line-height: 1.55;
}

/* ---- footer ---- */
.cn-cb-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 13px 20px;
    border-top: 1px solid var(--line);
    background: var(--soft);
    color: var(--body);
    font-size: 11.5px;
}

.cn-cb-footer strong {
    color: var(--teal-dark);
    font-weight: 700;
}

/* ---- whatsapp panel ---- */
.cn-cb-wa-tab {
    color: rgba(255, 255, 255, .66);
}

.cn-cb-wa-go {
    margin-top: 4px;
}

/* On a phone the two floating circles become a labelled bar across the
   bottom. Nothing about the buttons changes - same ids, same handlers - they
   just stop being round and start carrying their own short label. */
@media (max-width: 700px) {
    .cn-cb-fab-stack {
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: row;
        gap: 10px;
        /* the inset keeps the bar clear of the iOS home indicator */
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    }

    /* flex, not the base grid: the icon and the label have to sit side by
       side, and a single column grid would stack them */
    .cn-cb-fab {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: 50px;
        gap: 9px;
        border-radius: 100px;
    }

    .cn-cb-fab svg {
        width: 21px;
        height: 21px;
    }

    /* the tooltip becomes the label, sitting inside the pill */
    .cn-cb-fab::after {
        content: attr(data-short);
        position: static;
        transform: none;
        padding: 0;
        background: none;
        border-radius: 0;
        color: #fff;
        font-family: var(--font-head);
        font-size: 15.5px;
        font-weight: 700;
        opacity: 1;
        visibility: visible;
    }

    /* a pulsing ring behind a full width bar is far too much movement */
    .cn-cb-fab-pulse {
        display: none;
    }

    .cn-cb-fab:hover {
        transform: none;
    }

    /* the bar is fixed over the page, so the last of the footer would sit
       underneath it */
    body {
        padding-bottom: 72px;
    }

    /* and back-to-top has to clear it. Two classes because the base rule for
       .float-btn--top is declared later in this file and would otherwise win
       the tie - a media query adds no specificity of its own. */
    .float-btn.float-btn--top {
        bottom: 84px;
    }
}

@media (max-width: 480px) {
    .cn-cb-fab::after {
        font-size: 14.5px;
    }

    .cn-cb-overlay {
        padding: 12px;
    }

    .cn-cb-body {
        padding: 18px 18px 16px;
        max-height: 56vh;
    }

    .cn-cb-header {
        padding: 18px 18px 16px;
    }

    .cn-cb-title {
        font-size: 17.5px;
    }

    .cn-cb-tab span {
        font-size: 10.5px;
    }

    .cn-cb-phone-wrap {
        grid-template-columns: 92px minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {

    .cn-cb-fab-pulse,
    .cn-cb-overlay,
    .cn-cb-modal,
    .cn-cb-pane.is-active,
    .cn-cb-brand-icon i {
        animation: none;
    }
}

.float-btn {
    position: fixed;
    right: 22px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 22px;
    color: #fff;
    z-index: 900;
    box-shadow: var(--shadow);
    transition: all .35s var(--ease);
}

.float-btn:hover {
    color: #fff;
    transform: translateY(-4px) scale(1.06);
}

.float-btn--top {
    bottom: 24px;
    background: linear-gradient(135deg, var(--teal), var(--teal-light));
    font-size: 18px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
}

.float-btn--top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* ==========================================================================
   25. RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
    .nav__link {
        padding: 10px 10px;
        font-size: 14.5px;
    }

    .products__grid,
    .highlights__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .products__tabs {
        grid-template-columns: .9fr 1.1fr;
        gap: 22px;
    }

    .applications__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .hero__arrow--prev {
        left: 14px;
    }

    .hero__arrow--next {
        right: 14px;
    }
}

@media (max-width: 1080px) {
    .header__cta {
        display: none;
    }

    .process__steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .process__steps::before {
        display: none;
    }
}

@media (max-width: 991px) {
    :root {
        --header-h: 84px;
    }

    .hreviews__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* company profile */
    .cprofile__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .cprofile__media {
        max-height: 380px;
    }

    .cfacts__grid,
    .cwhy__grid,
    .crange__grid,
    .prodcats__grid,
    .projstats__grid,
    .projgrid,
    .prodbuild__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* single product page */
    .prodadv__layout,
    .prodfaq__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    /* the split hero stacks: copy first, then the gallery */
    .page-hero--split .page-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }

    /* Capped so the product does not blow up to full width once stacked, and
       centred - max-width on its own would leave it hugging the left edge.
       order lifts it above the copy: on a phone the product should be the
       first thing on screen, but the H1 stays first in the DOM. */
    .page-hero--split .prodhero__gallery {
        order: -1;
        max-width: 460px;
        margin-inline: auto;
    }

    /* stacked, so there is nothing left for the intro to stick beside */
    .prodfaq__intro {
        position: static;
    }

    /* events */
    .eventcard__inner,
    .eventpost__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    /* blog: the rail stops being a sidebar and becomes a collapsed panel
       above the article, so the contents list is still one tap away without
       pushing the first paragraph off the screen */
    .blogpost__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .blogpost__rail {
        position: static;
    }

    .toc {
        padding: 0;
        overflow: hidden;
    }

    .toc__head {
        display: none;
    }

    .toc__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        padding: 15px 20px;
        border: 0;
        cursor: pointer;
        background: transparent;
        color: var(--ink);
        font-family: var(--font-head);
        font-size: 15.5px;
        font-weight: 700;
    }

    .toc__toggle i {
        color: var(--teal);
        font-size: 14px;
        transition: transform .35s var(--ease);
    }

    .toc.is-open .toc__toggle i {
        transform: rotate(180deg);
    }

    .toc__list {
        max-height: 0;
        overflow: hidden;
        padding: 0 12px;
        transition: max-height .4s var(--ease), padding .4s var(--ease);
    }

    /* a cap for the open transition, not a height - set well clear of the
       longest list so nothing is ever cut off, and no inner scrollbar */
    .toc.is-open .toc__list {
        max-height: 1200px;
        padding: 0 12px 14px;
    }

    .eventcard__media {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .eventpost__side {
        position: static;
    }

    .contact__form {
        padding: 26px 20px 24px;
    }

    .prodhero__gallery {
        max-width: 460px;
    }

    /* ---- study zone ---- */
    .workbench {
        grid-template-columns: 1fr;
    }

    .steps,
    .tbcards,
    .appgrid,
    .tpoints,
    .soon__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* the diagram drops below the steps rather than shrinking past legibility */
    .tech-how__grid,
    .duct__grid,
    .mapping__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .appgrid--six,
    .partsgrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .header__logo img {
        height: 66px;
    }

    .header.is-sticky {
        height: 72px;
        /* backdrop-filter makes the header the containing block for its
           position:fixed children, so the moment the page is scrolled the
           drawer and its overlay would be cropped to the 72px header strip
           instead of the viewport. The background is 96% opaque already,
           so dropping the blur here costs nothing visually. */
        backdrop-filter: none;
    }

    .header.is-sticky .header__logo img {
        height: 54px;
    }

    .topbar__contact li:nth-child(2),
    .topbar__country {
        display: none;
    }

    .header__toggle {
        display: flex;
    }

    /* Off-canvas mobile nav */
    .nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 330px;
        max-width: 86vw;
        background: #fff;
        box-shadow: -10px 0 40px rgba(16, 34, 42, .18);
        padding: 84px 26px 30px;
        overflow-y: auto;
        /* the accordion nudges scrollTop when a panel opens below the fold */
        scroll-behavior: smooth;
        transform: translateX(105%);
        transition: transform .45s var(--ease);
        z-index: 1002;
        display: flex;
        flex-direction: column;
    }

    .nav.is-open {
        transform: translateX(0);
    }

    .nav__close {
        display: grid;
        place-items: center;
        position: absolute;
        top: 22px;
        right: 22px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--teal-lighter);
        color: var(--teal-dark);
        font-size: 17px;
    }

    .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav__item {
        border-bottom: 1px solid var(--line);
    }

    .nav__link {
        color: var(--ink);
        justify-content: space-between;
        padding: 15px 4px;
        border-radius: 0;
        font-size: 16px;
    }

    .nav__link::after {
        display: none;
    }

    .nav__item:hover>.nav__link i {
        transform: none;
    }

    .nav__item.is-expanded>.nav__link {
        color: var(--teal);
    }

    .nav__item.is-expanded>.nav__link i {
        transform: rotate(180deg);
    }

    .nav__dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .4s var(--ease);
        background: var(--soft);
    }

    /* JS overwrites this with the panel's measured height; the value here is
       only the fallback if scripting is off, so it errs on the generous side */
    .nav__item.is-expanded>.nav__dropdown {
        max-height: 600px;
    }

    .nav__dropdown a {
        padding: 11px 18px;
        font-size: 14px;
    }

    .nav__dropdown a:hover {
        padding-left: 24px;
    }

    .nav__mobile-cta {
        display: block;
        margin-top: 26px;
    }

    /* Layout */
    .section {
        padding: 76px 0;
    }

    /* arrows need a permanent tap target once there is no hover */
    .hero__arrow {
        opacity: 1;
        width: 42px;
        height: 42px;
        font-size: 14px;
    }

    .about__grid,
    .benefits__grid,
    .calculator__grid,
    .faq__grid,
    .contact__grid,
    .reviews__layout,
    .contact-page__grid,
    .legal__grid {
        grid-template-columns: 1fr;
        gap: 46px;
    }

    /* stacked above the text, so there is nothing left to stick beside */
    .legal__toc {
        position: static;
    }

    .models__grid,
    .care__grid,
    .wclaim__grid,
    .contact-page__info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .procs__grid,
    .warranty__periods,
    .wscope__grid,
    .tgroup__grid {
        grid-template-columns: 1fr;
    }

    .notfound__grid,
    .nextsteps__links,
    .nextsteps__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trouble__cta,
    .faqpage__cta {
        padding: 30px 26px;
    }

    /* no hover on touch - park the action bar open so the buttons stay reachable */
    .pcard__overlay {
        transform: none;
    }

    .pcard__btn {
        opacity: 1;
        transform: none;
    }

    .reviews__intro {
        text-align: center;
    }

    .reviews__badge {
        align-items: center;
    }

    .reviews__scroller {
        height: 460px;
    }

    .about__media {
        max-width: 520px;
        margin-inline: auto;
    }

    .benefits .section__head,
    .calculator .section__head,
    .faq .section__head {
        text-align: center;
        margin-inline: auto;
    }

    .counters {
        padding: 76px 0;
        /* iOS Safari and Android Chrome either ignore `fixed` or repaint the
           whole background every frame - not worth the jank on a phone */
        background-attachment: scroll;
    }

    .counters__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .blogs__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* three across was too tight once the tablet lost the fourth column */
    .highlights__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* the 1920x1060 ratio leaves a very short strip at tablet width */
    .hero__slides {
        aspect-ratio: 16 / 9;
    }

    /* stacked: the sticky heading has nothing to sit beside any more */
    .why__layout {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .why__intro {
        position: static;
        text-align: center;
        max-width: 760px;
        margin-inline: auto;
    }

    .why__actions {
        justify-content: center;
    }

    .applications__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .products__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* tabs stack above the panel once the two columns get too narrow */
    .products__tabs {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    /* stacked above the panel now, so there is nothing to stick beside */
    .ptabs__nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        position: static;
    }

    .ptab:hover {
        transform: none;
    }

    .footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px;
        padding-top: 60px;
    }
}

@media (max-width: 700px) {

    /* Phones lose the top bar entirely - the numbers it carried are all in the
       menu and the footer. Zeroing the variable is the important half: the
       header is positioned at top:var(--topbar-h) and every page hero pads by
       it, so both close the gap on their own. */
    :root {
        --topbar-h: 0px;
    }

    .topbar {
        display: none;
    }

    .hreviews__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hreviews__badge {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    /* a 132px label column leaves too little for the names themselves */
    .footer__serve-group {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    /* company profile */
    .cfacts__grid,
    .cmv__grid,
    .cwhy__grid,
    .crange__grid,
    .ccost__grid,
    .prodcats__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* projects stay two up: the cards are small and a single column would
       turn thirty three of them into an endless scroll */
    .projstats__grid,
    .projgrid {
        gap: 14px;
    }

    /* single product page */
    .prodspec__grid,
    .prodbuild__grid,
    .prodadv__list {
        grid-template-columns: minmax(0, 1fr);
    }

    /* no hover on touch, so the arrows have to stay put to be usable at all */
    .prodgal__nav {
        opacity: 1;
        width: 40px;
        height: 40px;
    }

    .prodgal__nav--prev {
        left: 8px;
    }

    .prodgal__nav--next {
        right: 8px;
    }

    /* three figures side by side leaves each one a 90px column */
    .prodhero__stats {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    /* stacked, so the divider belongs on top rather than down the side */
    .prodhero__stats li+li {
        border-left: 0;
        border-top: 1px solid var(--line);
        margin-top: 13px;
        padding-top: 13px;
    }

    .specsheet__row {
        padding: 12px 18px;
    }

    .projcard__body {
        padding: 13px 14px 15px;
    }

    .projcard__body h4 {
        font-size: 15px;
    }

    /* the pill would otherwise straddle the gap above the first card */
    .ccost__grid {
        gap: 30px;
    }

    .cprofile-cta__inner {
        display: block;
        text-align: center;
    }

    .cprofile-cta__actions {
        justify-content: center;
        margin-top: 24px;
    }

    /* ---- study zone ---- */
    .workbench__inputs,
    .workbench__output {
        padding: 26px 22px 28px;
    }

    /* three dimension boxes side by side get too narrow to read the value */
    .workbench__dims {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .workbench__dims .wfield:last-child {
        grid-column: 1 / -1;
    }

    .wstat__value {
        font-size: 29px;
    }

    .steps,
    .tbcards,
    .appgrid,
    .tpoints,
    .soon__list {
        grid-template-columns: 1fr;
    }

    .achref__notes {
        padding: 22px 20px;
    }

    /* A side-entering reveal has to travel 48px horizontally, which only stays
       off the scrollbar because the body clips it. On a phone there is no room
       for the movement to read anyway, so both directions fade upward. */
    [data-animate="fade-left"],
    [data-animate="fade-right"] {
        transform: translateY(36px);
    }

    .wstat__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .techshot,
    .ductshot {
        padding: 10px;
    }

    .hsteps__item,
    .airpath__step {
        gap: 14px;
    }

    .appgrid--six {
        grid-template-columns: 1fr;
    }

    /* two part cards still read fine on a phone - the photos are small */
    .partsgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .partsgroup__head {
        gap: 14px;
        margin-bottom: 28px;
    }

    .partsgroup__icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .parts-cta__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .energy__highlight {
        padding: 26px 22px;
        gap: 18px;
    }

    .energy__stat-value {
        font-size: 36px;
    }

    .tech-why__actions .btn,
    .energy__cta .btn {
        width: 100%;
        justify-content: center;
    }

    .soon__badge {
        width: 98px;
        height: 98px;
        font-size: 34px;
    }

    .soon__actions .btn,
    .tech-apps__cta .btn {
        width: 100%;
        justify-content: center;
    }

    .section {
        padding: 64px 0;
    }

    .section__head {
        margin-bottom: 44px;
    }

    /* A 2.13:1 banner is only a thin strip on a phone. The box is deepened in
       steps down the breakpoints - object-fit:cover takes the extra height by
       trimming the sides, so each step is a trade of width for presence. */
    .hero__slides {
        aspect-ratio: 4 / 3;
    }

    .hero__arrow {
        display: none;
    }

    .hero__dots {
        bottom: 16px;
    }

    .hero__dots button {
        width: 26px;
    }

    .hero__dots button.is-active {
        width: 46px;
    }

    .highlights {
        padding-top: 52px;
    }

    .counter {
        padding: 26px 16px 24px;
    }

    .counter__icon {
        width: 52px;
        height: 52px;
        font-size: 20px;
        margin-bottom: 14px;
    }

    .counter__label {
        font-size: 11.5px;
        letter-spacing: .09em;
    }

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

    .ppanel__body {
        padding: 0 22px 26px;
    }

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

    .highlights__grid,
    .products__grid,
    .why__grid,
    .blogs__grid {
        grid-template-columns: 1fr;
    }

    /* five steps in one column runs very long - keep them paired */
    .process__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .applications__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .page-hero {
        padding: calc(var(--topbar-h) + var(--header-h) + 44px) 0 46px;
    }

    .clients .section__head {
        margin-bottom: 34px;
    }

    .client-card {
        width: 155px;
        height: 105px;
        padding: 18px 20px;
        margin-right: 16px;
    }

    .about__media-main {
        min-height: 350px;
    }

    .about__experience {
        left: 0;
        padding: 14px 18px;
    }

    .about__experience strong {
        font-size: 32px;
    }

    .form-row--2 {
        grid-template-columns: 1fr;
    }

    .contact__form,
    .calculator__card {
        padding: 26px 20px;
    }

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

    .footer__fan--lg {
        font-size: 260px;
        right: -90px;
    }

    .footer__fan--sm {
        font-size: 150px;
        left: -50px;
        bottom: -50px;
    }

    .footer__bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

}

@media (max-width: 480px) {
    .container {
        padding-inline: 16px;
    }

    /* two logos a row beats one: at this width a single 132px tile per row
       turns twenty eight of them into an endless column */
    .hclients__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .hclients__tile {
        height: 96px;
        padding: 16px 18px;
    }

    .hero__slides {
        aspect-ratio: 5 / 4;
    }

    .section {
        padding: 54px 0;
    }

    /* the wide tracking pushes longer eyebrows past the screen edge */
    .section__eyebrow {
        font-size: 11.5px;
        letter-spacing: .1em;
        padding: 6px 14px;
    }

    .process__steps,
    .models__grid,
    .contact-page__info,
    .care__grid,
    .wclaim__grid,
    .notfound__grid,
    .nextsteps__links,
    .nextsteps__grid {
        grid-template-columns: 1fr;
    }

    .errorpage,
    .thanks {
        padding: calc(var(--topbar-h) + var(--header-h) + 50px) 0 60px;
    }

    .thanks__card {
        padding: 34px 22px 30px;
    }

    .wperiod__value strong {
        font-size: 48px;
    }

    .faqgroup__count {
        display: none;
    }

    .contact-page__form {
        padding: 26px 20px;
    }

    .network__map {
        padding: 12px;
    }

    .gmap__frame {
        min-height: 280px;
    }

    .gmap__bar {
        padding: 18px 20px;
    }

    .gmap__bar .btn {
        width: 100%;
        justify-content: center;
    }

    .network__list {
        gap: 9px;
        margin-top: 24px;
    }

    .netchip {
        padding: 9px 16px 9px 12px;
    }

    .netchip span {
        font-size: 14px;
    }

    .ptab {
        gap: 12px;
        padding: 14px 16px;
    }

    .ptab__icon {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    .ptab__text strong {
        font-size: 15.5px;
    }

    .counters__grid {
        gap: 14px;
    }

    .counter__value {
        font-size: 28px;
    }

    .app-card__body {
        left: 12px;
        right: 12px;
        bottom: 12px;
        gap: 9px;
    }

    .app-card__icon {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .app-card__title {
        font-size: 13.5px;
    }

    .reviews__scroller {
        height: 420px;
    }

    .review-card {
        padding: 20px 20px 18px;
    }

    .footer__policy {
        gap: 12px;
        justify-content: center;
    }

    .footer__policy li+li::before {
        margin-right: 12px;
    }
}

@media (max-width: 420px) {
    .hero__slides {
        aspect-ratio: 1 / 1;
    }

    .float-btn {
        right: 16px;
        width: 48px;
        height: 48px;
    }
}

/* ==========================================================================
   BLOG PAGINATION
   ========================================================================== */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 54px;
}

.pager__list {
    display: flex;
    align-items: center;
    justify-content: center;
    /* the row is nine items wide at its longest and will not fit a small phone
       in one line - without this the last step button is pushed off-screen.
       min-width:0 is the part that actually does it: a flex item defaults to
       min-width:auto, so the list would otherwise refuse to shrink below its
       content width and would never get narrow enough to wrap. */
    flex-wrap: wrap;
    min-width: 0;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pager__num,
.pager__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-head);
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    border: 1px solid var(--line);
    transition: all .25s var(--ease);
}

/* square-ish tap target: 44px is the smallest that stays comfortable on a phone */
.pager__num {
    width: 44px;
    height: 44px;
    font-size: 15px;
    color: var(--ink);
    background: var(--white);
}

.pager__step {
    height: 44px;
    padding: 0 20px;
    font-size: 14px;
    color: var(--teal-dark);
    background: var(--white);
}

.pager__num:hover,
.pager__step:hover {
    color: var(--white);
    background: var(--teal);
    border-color: var(--teal);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.pager__num.is-on {
    color: var(--white);
    background: var(--teal-dark);
    border-color: var(--teal-dark);
    cursor: default;
}

/* the ends of the range render as text, not links - same size so the row
   does not shift as the reader moves through the pages */
.pager__step.is-off {
    color: #a8b6bc;
    background: var(--soft);
    cursor: default;
}

.pager__gap {
    padding: 0 2px;
    color: var(--body);
    letter-spacing: 1px;
}

.pager__count {
    margin: 18px 0 0;
    text-align: center;
    font-size: 14px;
    color: var(--body);
}

@media (max-width: 575px) {
    .pager {
        gap: 8px 10px;
    }

    /* the word plus the arrow will not fit twice across a narrow phone, so
       the step buttons keep the arrow only */
    .pager__step {
        padding: 0 14px;
        font-size: 0;
    }

    .pager__step i {
        font-size: 15px;
    }

    .pager__num {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

@media (max-width: 400px) {
    .pager {
        gap: 8px;
    }

    .pager__list {
        gap: 6px;
    }

    .pager__num {
        width: 38px;
        height: 38px;
    }

    .pager__step {
        height: 38px;
        padding: 0 12px;
    }
}

/* ==========================================================================
   INSTALLATION WORK BY INDUSTRY  (our-projects.php)
   ========================================================================== */

/* Six columns divide by both three and two, so one grid gives three cards on
   the first row and two on the second without a second container. */
.installwork__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 26px;
}

.installcard {
    grid-column: span 2;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}

.installcard:nth-child(4),
.installcard:nth-child(5) {
    grid-column: span 3;
}

.installcard:hover {
    transform: translateY(-7px);
    border-color: var(--teal-light);
    box-shadow: var(--shadow);
}

/* The media box owns the ratio, not the image - giving the img height:100%
   alongside an aspect-ratio let it grow past the card and sit over the row
   below it. The last two photographs are 16:9 rather than 4:3, so their
   wider cards carry the ratio they were shot at. */
.installcard__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--soft);
}

.installcard:nth-child(4) .installcard__media,
.installcard:nth-child(5) .installcard__media {
    aspect-ratio: 16 / 9;
}

.installcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.installcard:hover .installcard__media img {
    transform: scale(1.05);
}

.installcard__body {
    padding: 16px 18px 18px;
}

.installcard__body h4 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--ink);
    font-size: 16.5px;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.installcard__body h4 i {
    flex: none;
    color: var(--teal);
    font-size: 17px;
}

@media (max-width: 991px) {

    /* two up - three 4:3 cards across a tablet leaves the photographs too
       small to make out what is mounted on the wall */
    .installcard,
    .installcard:nth-child(4),
    .installcard:nth-child(5) {
        grid-column: span 3;
    }

    /* Once the wide cards share a row with the 4:3 ones they have to match
       them: a grid row is as tall as its tallest card, so a 16:9 photo left
       a band of empty white under its caption. */
    .installcard:nth-child(4) .installcard__media,
    .installcard:nth-child(5) .installcard__media {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 575px) {

    /* one up */
    .installcard,
    .installcard:nth-child(4),
    .installcard:nth-child(5) {
        grid-column: span 6;
    }
}

/* the quote popup gained a requirement box - the inputs are a fixed height, a
   textarea is not, so it needs its own sizing and no horizontal drag handle */
.quote-form textarea {
    min-height: 96px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.6;
}

/* ==========================================================================
   QUOTE POPUP - compact layout
   ========================================================================== */

/* Seven fields stacked ran the box past the bottom of the screen. Pairing the
   short ones into two columns keeps the reading order exactly as it was -
   name, company, email, mobile, city, product, requirement - while halving
   the height. */
.quote-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}

.quote-form__field {
    margin-bottom: 12px;
}

/* the requirement box, the consent line, the button and the status message
   all run the full width */
.quote-form__field--wide,
.quote-form__consent,
.quote-form__actions,
.quote-form .form-status {
    grid-column: 1 / -1;
}

.quote-form input[type="text"],
.quote-form input[type="tel"],
.quote-form input[type="email"],
.quote-form select,
.quote-form textarea {
    padding: 13px 16px;
    font-size: 14.5px;
}

.quote-form select {
    background-position: right 14px center;
    padding-right: 40px;
}

.quote-form textarea {
    min-height: 70px;
}

/* the box itself can lose some of its generous padding at the same time */
#quoteModal .modal__box {
    max-width: 620px;
    padding: 34px 34px 30px;
}

#quoteModal .modal__title {
    margin-bottom: 22px;
    font-size: clamp(20px, 2.2vw, 26px);
    /* the close button sits in the top right corner - without this the last
       word of the heading runs underneath it on a narrow screen */
    padding-right: 44px;
}

@media (max-width: 575px) {

    /* one column again on a phone - two 150px boxes side by side are worse
       than a slightly longer form */
    .quote-form {
        grid-template-columns: 1fr;
    }

    #quoteModal .modal__box {
        padding: 28px 22px 26px;
    }
}

/* ==========================================================================
   PAGE SPEED
   ========================================================================== */

/* The first banner is already on screen when the page opens, so it does not
   slide in from the right. That entrance put it outside the viewport for its
   first paint - the moment the browser times the largest image by - and left
   an empty frame for a second. The push starts with the first rotation, when
   main.js adds .is-started. */
.hero__slides:not(.is-started) .hero__slide.is-active,
.hero__slides:not(.is-started) .hero__slide.is-active img {
    animation: none;
}

.hero__slides:not(.is-started) .hero__slide.is-active::after {
    display: none;
}

/* Sections below the first screen skip layout and paint until they come near
   the viewport. The homepage is ~2,400 elements and a phone was spending
   seconds laying all of them out before anyone scrolled. contain-intrinsic-size
   holds a placeholder height until a section has rendered once, after which
   the browser remembers its real height. None of these contain a
   position:fixed element, which this containment would re-anchor. */
#about,
#counters,
#products,
#why,
#technology,
#applications,
#process,
#calculator,
#clients,
#trusted-clients,
#global-presence,
#blogs,
#faq,
#contact,
.footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}

/* The highlight strip is on the first screen at every width, so it is drawn in
   place instead of waiting for main.js to reveal it - on a phone that wait was
   holding back the largest paint by seconds. :not(.is-visible) steps aside once
   JS has run, so the cards keep their hover movement. */
.highlights [data-animate]:not(.is-visible) {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   GET A QUOTE PAGE  (get-a-quote.php)
   What happens next and the direct lines on the left, the enquiry form on
   the right; one column below tablet width.
   ========================================================================== */
.quotepage__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px;
    align-items: start;
}

.quotepage__side {
    display: grid;
    gap: 24px;
}

.quotepage__panel {
    padding: 30px 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.quotepage__panel h3 {
    margin: 0 0 22px;
    font-size: 22px;
}

.quotepage__steps {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.quotepage__steps li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.quotepage__steps li > i,
.quotepage__contact i {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--teal-lighter);
    color: var(--teal);
    font-size: 18px;
}

.quotepage__steps h4 {
    margin: 0 0 4px;
    font-size: 16px;
}

.quotepage__steps p {
    margin: 0;
    color: var(--body);
    font-size: 14px;
    line-height: 1.6;
}

.quotepage__contact {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.quotepage__contact a {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--ink);
    font-weight: 600;
    overflow-wrap: anywhere;
    transition: color .3s var(--ease);
}

.quotepage__contact a:hover {
    color: var(--teal);
}

@media (max-width: 991px) {
    .quotepage__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- quote page: consumer / dealer tabs ---- */
.quotepage__main {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.quotepage__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.quotepage__tabs .filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.quotepage__tabs .filter-btn i {
    font-size: 16px;
}

.quotepage__tabpanel[hidden] {
    display: none;
}

.quotepage__note {
    margin: 0 0 22px;
    color: var(--body);
    font-size: 15px;
    line-height: 1.6;
}

/* the dealer City list stays locked until a state is picked */
.form-field select:disabled {
    opacity: .6;
    cursor: not-allowed;
}

@media (max-width: 575px) {
    .quotepage__tabs .filter-btn {
        flex: 1 1 0;
    }
}


/* ---- compact searchable dropdown (enhanceSelect in main.js) ----------------
   Used for State and City on the dealer form. The native select stays in the
   field underneath, invisible, so the form still submits and validates it.
   -------------------------------------------------------------------------- */
.fselect {
    position: relative;
}

.fselect [hidden] {
    display: none !important;
}

.form-field .fselect__native,
.form-field .fselect__native:disabled {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.fselect__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--soft);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: all .3s var(--ease);
}

.fselect__btn::after {
    content: '\f078';
    flex-shrink: 0;
    font-family: 'Font Awesome 7 Pro';
    font-weight: 300;
    font-size: 12px;
    line-height: 1;
    transition: transform .25s var(--ease);
}

.fselect.is-open .fselect__btn::after {
    transform: rotate(180deg);
}

.fselect__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fselect__btn.is-placeholder {
    color: var(--body);
}

.fselect__btn:focus-visible,
.fselect.is-open .fselect__btn {
    border-color: var(--teal-light);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(75, 179, 196, .15);
    outline: none;
}

.fselect__btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.form-field.has-error .fselect__btn {
    border-color: #e05a5a;
    background: #fff5f5;
}

.fselect__pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.form-field .fselect__search {
    width: 100%;
    margin: 0 0 6px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
    font-size: 14px;
    box-shadow: none;
}

.form-field .fselect__search:focus {
    border-color: var(--teal-light);
    background: #fff;
    box-shadow: none;
}

/* short on purpose - about six rows, then it scrolls */
.fselect__list {
    max-height: 220px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
}

.fselect__opt {
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

.fselect__opt.is-active {
    background: var(--teal-lighter);
}

.fselect__opt[aria-selected="true"] {
    color: var(--teal);
    font-weight: 600;
}

.fselect__group {
    padding: 8px 10px 4px;
    color: var(--body);
    font-family: var(--font-head);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.fselect__empty {
    padding: 8px 10px;
    color: var(--body);
    font-size: 14px;
}


/* ---- product tabs as an accordion on a phone (initProductTabs) --------------
   Below 700px main.js moves each panel directly under its own tab and adds
   .ptabs--accordion, so the photo opens right below the category that was
   tapped instead of after the whole list.
   -------------------------------------------------------------------------- */
.ptabs--accordion .ptabs__panels {
    display: none;
}

/* the caret points down at the panel it has opened */
.ptabs--accordion .ptab__caret {
    transform: rotate(0deg);
}

.ptabs--accordion .ptab.is-active .ptab__caret {
    transform: rotate(90deg);
}

/* ---- contact page: the common enquiry form inside the dark panel ----------
   contact.php now includes component/enquiry-form.php. That form brings its
   own white card (.contact__form), which the dark panel does not want, and
   its two-up rows are too tight for this narrow column.
   -------------------------------------------------------------------------- */
.contact-page__form .contact__form {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.contact-page__form .form-row--2 {
    grid-template-columns: minmax(0, 1fr);
}

/* ==================== Summarize with AI (reusable) ==================== */
.rc-ai-summary {
    --rc-ai-bg: #f3f5f9;
    --rc-ai-border: #e3e7ef;
    --rc-ai-heading: #0f1535;
    box-sizing: border-box;
    margin: 30px 0 0;
    padding: 24px 26px 26px;
    background: var(--rc-ai-bg);
    border: 1px solid var(--rc-ai-border);
    border-radius: 16px;
}

.rc-ai-summary *,
.rc-ai-summary *::before,
.rc-ai-summary *::after {
    box-sizing: border-box;
}

.rc-ai-title {
    display: block;
    margin-bottom: 16px;
    color: var(--rc-ai-heading);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
}

.rc-ai-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.rc-ai-summary .rc-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 11px;
    border: 1px solid transparent;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    transition: transform 0.25s, box-shadow 0.25s, filter 0.25s;
}

.rc-ai-btn svg {
    flex-shrink: 0;
}

.rc-ai-summary .rc-ai-chatgpt {
    background: #10a37f;
}

.rc-ai-summary .rc-ai-claude {
    background: #c15f3c;
}

.rc-ai-summary .rc-ai-google {
    background: #fff;
    border-color: #dadce0;
    color: #1f1f1f !important;
}

.rc-ai-summary .rc-ai-perplexity {
    background: #4f46e5;
}

.rc-ai-summary .rc-ai-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.45);
}

.rc-ai-summary .rc-ai-google:hover {
    color: #1f1f1f;
}

@media only screen and (max-width: 767px) {
    .rc-ai-summary {
        padding: 20px 18px;
    }

    .rc-ai-btns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .rc-ai-summary .rc-ai-btn {
        justify-content: center;
        padding: 12px 10px;
        font-size: 14.5px;
    }
}

/* ==================== Author card (reusable) ==================== */
.rc-author-card {
    --rc-author-accent: #f2901c;
    /* photo ring + role colour */
    --rc-author-bg-1: #23205a;
    /* gradient start */
    --rc-author-bg-2: #191545;
    /* gradient middle */
    --rc-author-bg-3: #2a2366;
    /* gradient end */
    --rc-author-text: #0f1535;
    /* text colour of the white button */
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 50px;
    margin: 0 0 60px;
    padding: 54px 60px;
    border-radius: 28px;
    background: #128693;
    box-shadow: 0 30px 60px -30px rgba(25, 21, 69, 0.55);
}

.rc-author-card *,
.rc-author-card *::before,
.rc-author-card *::after {
    box-sizing: border-box;
}



.rc-author-photo {
    position: relative;
    flex-shrink: 0;
    width: 240px;
    height: 240px;
    padding: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.04);
}

.rc-author-photo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    border-radius: 50%;
    border: 5px solid #07222b;
    object-fit: cover;
    object-position: center top;
    background: #fff;
}

/* stands in for the photo when $author_img is empty */
.rc-author-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid #07222b;
    background: #fff;
    color: #07222b;
    font-size: 4.5em;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

.rc-author-info {
    position: relative;
    z-index: 1;
    min-width: 0;
}



.rc-author-card .rc-author-name {
    margin: 0 0 8px;
    color: #fff;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.15;
}

.rc-author-role {
    display: block;
    margin-bottom: 18px;
    color: #07222b;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

.rc-author-card .rc-author-bio {
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 16.5px;
    line-height: 1.8;
}

.rc-author-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.rc-author-card .rc-author-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 26px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: 0.3s;
}

.rc-author-card .rc-author-btn-solid {
    background: #07222b;
    color: #fff;
}

.rc-author-card .rc-author-btn-solid:hover {
    background: transparent;
    color: #fff;
    border: 1.5px solid #fff;
}

.rc-author-card .rc-author-btn-line {
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}

.rc-author-card .rc-author-btn-line:hover {
    background: #0a66c2;
    border-color: #0a66c2;
    color: #fff;
}

.rc-author-btn svg {
    flex-shrink: 0;
    transition: transform 0.3s;
}

.rc-author-btn-solid:hover svg {
    transform: translateX(4px);
}

@media only screen and (max-width: 991px) {
    .rc-author-card {
        gap: 34px;
        padding: 42px 36px;
    }

    .rc-author-photo {
        width: 190px;
        height: 190px;
    }

    .rc-author-card .rc-author-name {
        font-size: 32px;
    }
}

@media only screen and (max-width: 767px) {
    .rc-author-card {
        flex-direction: column;
        text-align: center;
        gap: 26px;
        padding: 36px 22px;
        border-radius: 22px;
    }

    .rc-author-photo {
        width: 170px;
        height: 170px;
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.04);
    }

    .rc-author-card .rc-author-name {
        font-size: 28px;
    }

    .rc-author-role {
        font-size: 16px;
    }

    .rc-author-card .rc-author-bio {
        font-size: 15.5px;
    }

    .rc-author-actions {
        justify-content: center;
    }

    .rc-author-card .rc-author-btn {
        width: 100%;
        justify-content: center;
    }
}