:root {
    /* Brand (from logo) */
    --amber: #f5ac32;
    --amber-d: #e3961a;
    --orange: #f16236;
    --magenta: #b1346e;
    --crimson: #c93446;

    /* Neutrals */
    --ink: #363435;
    --ink-2: #55514f;
    --muted: #8b857e;
    --cream: #f4efe4;
    --cream-2: #ece4d5;
    --ivory: #fbf8f2;
    --line: #e6dece;
    --white: #ffffff;
    --wa: #25d366;

    /* Gradients */
    --grad-warm: linear-gradient(120deg, var(--amber), var(--orange) 55%, var(--crimson));
    --grad-sun: linear-gradient(135deg, var(--amber), var(--orange));

    /* Type */
    --font: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

    /* Shape */
    --r-lg: 28px;
    --r-md: 18px;
    --r-sm: 12px;
    --shadow: 0 40px 80px -34px rgba(54, 52, 53, .38);
    --shadow-sm: 0 18px 40px -22px rgba(54, 52, 53, .30);
    --shadow-xs: 0 10px 26px -16px rgba(54, 52, 53, .32);
    --shadow-glow: 0 18px 40px -14px rgba(241, 98, 54, .5);

    --bs-primary: #363435;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 130px;
}

body {
    font-family: var(--font);
    color: var(--ink-2);
    background: var(--white);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font);
    color: var(--ink);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
}

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

a:hover {
    color: var(--orange);
}

img {
    max-width: 100%;
    /* Paired with the width/height attributes now on every <img>: the
       attributes give the browser the intrinsic ratio so it can reserve space
       before the file loads (CLS), while height:auto keeps the rendered box
       proportional. Container rules that set an explicit height win on
       specificity, so object-fit crops are unaffected. */
    height: auto;
}

::selection {
    background: var(--amber);
    color: var(--ink);
}

/* Let flex columns shrink below their content width so overflow:hidden
   children (e.g. the hero marquee) clip instead of forcing page width. */
.row>[class*="col"] {
    min-width: 0;
}

h1,
h2,
h3,
h4,
p,
.lead,
.section-title {
    overflow-wrap: break-word;
}

.section {
    padding: 80px 0;
}

.section-sm {
    padding: 64px 0;
}

.bg-cream {
    background: var(--cream);
}

.bg-cream-2 {
    background: var(--cream-2);
}

.bg-ivory {
    background: var(--ivory);
    position: relative;
    overflow: hidden;
}

.bg-ivory>.container {
    position: relative;
    z-index: 1;
}

.bg-ivory::before {
    content: '';
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .12;
    background: var(--grad-sun);
    top: -90px;
    right: -70px;
    z-index: 0;
    pointer-events: none;
}

.bg-ivory:nth-of-type(even)::before {
    right: auto;
    left: -70px;
    top: auto;
    bottom: -90px;
    background: radial-gradient(circle at 30% 30%, var(--magenta), transparent 70%);
    opacity: .1;
}

.bg-ink {
    background: var(--ink);
    color: #d6d2ce;
}

.bg-ink h1,
.bg-ink h2,
.bg-ink h3,
.bg-ink h4 {
    color: #fff;
}

.text-amber {
    color: var(--amber-d) !important;
}

.text-orange {
    color: var(--orange) !important;
}

.text-magenta {
    color: var(--magenta) !important;
}

.text-ink {
    color: var(--ink) !important;
}

/* gradient text */
.text-grad {
    background: var(--grad-warm);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Section heads */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--orange);
}

.eyebrow::before {
    content: '';
    width: 26px;
    height: 2px;
    background: var(--orange);
    border-radius: 2px;
    display: inline-block;
}

.section-title {
    font-size: clamp(2rem, 3.8vw, 3.1rem);
    margin-bottom: .6rem;
    font-weight: 800;
}

.section-lead {
    color: var(--muted);
    font-size: 1.1rem;
    max-width: 640px;
}

/* ---- Scroll progress bar ------------------------------------------- */
#scrollProgress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 2000;
    background: var(--grad-warm);
    transition: width .1s linear;
}

/* =====================================================================
   BUTTONS — modern, animated
   ===================================================================== */
.btn {
    --btn-bg: var(--ink);
    --btn-fg: #fff;
    --btn-bd: var(--ink);
    --btn-fill: var(--grad-sun);
    font-family: var(--font);
    font-weight: 700;
    letter-spacing: -.01em;
    border-radius: 100px;
    padding: .58rem 1.7rem;
    border: 1.5px solid var(--btn-bd);
    background: var(--btn-bg);
    color: var(--btn-fg);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    transition: transform .3s cubic-bezier(.34, 1.1, .5, 1), box-shadow .3s ease, color .32s ease, border-color .3s ease;
}

.btn:focus-visible {
    outline: 3px solid rgba(241, 98, 54, .4);
    outline-offset: 2px;
}

.btn-lg {
    padding: .72rem 2.15rem;
    font-size: 1.04rem;
}

.btn-sm {
    padding: .36rem 1.1rem;
    font-size: .86rem;
}

.btn .arw {
    transition: transform .3s cubic-bezier(.34, 1.1, .5, 1);
}

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

.btn:active {
    transform: translateY(-1px) scale(.99);
}

/* clean directional fill — slides in from the left, no origin jump */
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--btn-fill);
    transform: translateX(-101%);
    transition: transform .4s cubic-bezier(.45, .05, .2, 1);
}

.btn:hover::before {
    transform: translateX(0);
}

.btn-dark-pill {
    --btn-bg: var(--ink);
    --btn-fg: #fff;
    --btn-bd: var(--ink);
    --btn-fill: var(--grad-sun);
}

.btn-dark-pill:hover {
    --btn-fg: var(--ink);
    border-color: transparent;
    transform: translateY(-2px);
    background: var(--btn-bg);
    box-shadow: var(--shadow-glow);
}

.btn-amber {
    --btn-bg: var(--amber);
    --btn-fg: var(--ink);
    --btn-bd: transparent;
    background: var(--grad-sun);
    --btn-fill: var(--ink);
}

.btn-amber:hover {
    --btn-fg: #fff;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.btn-outline-dark2 {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-bd: var(--ink);
    --btn-fill: var(--ink);
}

.btn-outline-dark2:hover {
    --btn-fg: #fff;
    border-color: var(--ink);
    transform: translateY(-2px);
    color: #fff;
    box-shadow: var(--shadow-xs);
}

.btn-outline-soft {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-bd: var(--line);
    --btn-fill: var(--ink);
    padding: .44rem 1.3rem;
}

.btn-outline-soft:hover {
    --btn-fg: #fff;
    border-color: var(--ink);
    color: #fff;
}

.btn-ghost-light {
    --btn-bg: rgba(255, 255, 255, .1);
    --btn-fg: #fff;
    --btn-bd: rgba(255, 255, 255, .4);
    --btn-fill: #fff;
    backdrop-filter: blur(4px);
}

.btn-ghost-light:hover {
    --btn-fg: var(--ink);
    color: var(--btn-fg);
    border-color: #fff;
    transform: translateY(-2px);
}

.btn-wa {
    --btn-bd: var(--wa);
    --btn-fill: #1eb857;
    background: #fff;
    color: #1eb857;
}

.btn-wa:hover {
    --btn-fg: #fff;
    border-color: #1eb857;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -18px rgba(37, 211, 102, .8);
}

/* ---- Announcement bar ---------------------------------------------- */
.announce {
    background: var(--ink);
    color: #efece7;
    font-size: .86rem;
}

.announce .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: .6rem 0;
    position: relative;
}

.announce a {
    color: var(--amber);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.announce a:hover {
    color: #fff;
}

.announce .x {
    position: absolute;
    right: 12px;
    background: none;
    border: 0;
    color: #cfc9c2;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: transform .2s;
}

.announce .x:hover {
    color: #fff;
    transform: rotate(90deg);
}

/* ---- Top utility bar ------------------------------------------------ */
.topbar {
    background: var(--ink);
    color: #cfc9c2;
    font-size: .85rem;
}

.topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    gap: 1rem;
    flex-wrap: wrap;
}

.topbar a {
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    transition: color .2s;
}

.topbar a:hover {
    color: var(--amber);
}

.topbar .tb-left {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
}

.topbar .tb-div {
    width: 1px;
    height: 15px;
    background: rgba(255, 255, 255, .22);
}

.topbar .tb-right {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.topbar .tb-soc {
    display: flex;
    gap: .85rem;
}

.topbar .tb-soc a {
    font-size: 1rem;
}

.topbar .btn {
    padding: .3rem 1.1rem;
    font-size: .85rem;
}

/* ---- Main header (single inline row) -------------------------------- */
.site-head {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 1030;
    border-bottom: 1px solid var(--line);
    transition: box-shadow .3s ease, background .3s ease;
}

.site-head.stuck {
    box-shadow: 0 10px 30px -20px rgba(54, 52, 53, .5);
    background: rgba(255, 255, 255, .96);
}

.site-head .navbar {
    padding: 6px 0;
}

.brand-logo img {
    height: 88px;
    width: auto;
    display: block;
    transition: transform .3s ease, height .3s ease;
}

.brand-logo:hover img {
    transform: scale(1.03);
}

.site-head.stuck .brand-logo img {
    height: 70px;
    width: auto;
}

.site-head .navbar-nav {
    gap: .1rem;
}

@media (min-width:992px) {
    .site-head .navbar-nav {
        align-items: center;
    }
}

.site-head .nav-link {
    font-weight: 600;
    color: var(--ink-2);
    padding: .6rem 1rem !important;
    font-size: .96rem;
    position: relative;
}

.site-head .nav-link::after {
    content: '';
    border: 0;
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: .3rem;
    height: 2px;
    background: var(--grad-sun);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s cubic-bezier(.3, .7, .4, 1);
}

.site-head .nav-link:hover,
.site-head .nav-link.active {
    color: var(--ink);
}

.site-head .nav-link:hover::after,
.site-head .nav-link.active::after {
    transform: scaleX(1);
}

.site-head .nav-item.dropdown {
    position: relative;
}

/* Bootstrap's default caret is neutralised (border:0 on nav-link::after);
   we use an explicit .nav-caret icon so it never collides with the underline */
.site-head .nav-caret {
    font-size: .62rem;
    margin-left: .15rem;
    opacity: .6;
    transition: transform .25s ease, opacity .2s ease;
}

.site-head .dropdown:hover .nav-caret {
    transform: rotate(180deg);
    opacity: 1;
}

.site-head .dropdown-menu {
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: .45rem;
    margin-top: 14px;
    min-width: 274px;
    animation: ddIn .2s ease;
}

/* invisible bridge across the visual gap so the menu stays reachable on hover */
.site-head .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

@keyframes ddIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.site-head .dropdown-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    border-radius: 12px;
    padding: .55rem .65rem;
    font-weight: 600;
    font-size: .92rem;
    color: var(--ink-2);
    transition: background .18s, color .18s;
}

.site-head .dropdown-item:not(.view-all)>i {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--cream);
    color: var(--orange);
    display: grid;
    place-items: center;
    font-size: .95rem;
    flex: 0 0 auto;
    transition: background .18s, color .18s, transform .18s;
}

.site-head .dropdown-item:hover {
    background: var(--cream);
    color: var(--ink);
}

.site-head .dropdown-item:not(.view-all):hover>i {
    background: var(--grad-sun);
    color: #fff;
    transform: scale(1.06);
}

.site-head .dropdown-divider {
    margin: .4rem .35rem;
    opacity: .6;
}

.site-head .dropdown-item.view-all {
    justify-content: space-between;
    color: var(--orange);
    font-weight: 700;
}

.site-head .dropdown-item.view-all i {
    transition: transform .2s;
}

.site-head .dropdown-item.view-all:hover i {
    transform: translateX(4px);
}

@media (min-width:992px) {
    .site-head .nav-item.dropdown:hover>.dropdown-menu {
        display: block;
    }
}

/* =====================================================================
   HERO — creative
   ===================================================================== */
.hero {
    position: relative;
    padding: 60px 0 56px;
    overflow: hidden;
}

/* animated background blobs */
.hero-blobs {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    filter: blur(75px);
    opacity: .3;
}

.hero-blobs .blob {
    position: absolute;
    border-radius: 50%;
}

.hero-blobs .b1 {
    width: 340px;
    height: 340px;
    background: radial-gradient(circle at 30% 30%, var(--amber), transparent 70%);
    top: -150px;
    left: -130px;
    animation: blob 14s ease-in-out infinite;
}

.hero-blobs .b2 {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle at 30% 30%, var(--orange), transparent 70%);
    top: -110px;
    right: -110px;
    animation: blob 16s ease-in-out infinite reverse;
}

.hero-blobs .b3 {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle at 30% 30%, var(--magenta), transparent 70%);
    bottom: -150px;
    left: -90px;
    animation: blob 18s ease-in-out infinite;
}

@keyframes blob {

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

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

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

.hero .container {
    position: relative;
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-xs);
    border-radius: 100px;
    padding: .4rem .95rem;
    font-weight: 600;
    font-size: .85rem;
    color: var(--ink);
}

.hero-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange);
    position: relative;
}

.hero-badge .dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--orange);
    opacity: .4;
    animation: pulseDot 1.8s ease-out infinite;
}

@keyframes pulseDot {
    0% {
        transform: scale(.6);
        opacity: .5;
    }

    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}

.hero h1 {
    font-size: clamp(2.5rem, 5.6vw, 60px);
    letter-spacing: -.035em;
    font-weight: 800;
}

.hero .lead {
    font-size: 1.15rem;
    color: var(--ink-2);
    max-width: 480px;
}

.trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.6rem;
}

.trust-row span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: var(--ink);
    font-size: .92rem;
}

.trust-row i {
    color: var(--orange);
}

/* marquee logo strip */
.trusted-strip {
    color: var(--muted);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
}

.marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
    display: flex;
    gap: 2.4rem;
    width: max-content;
    animation: marquee 22s linear infinite;
}

.marquee:hover .marquee-track {
    animation-play-state: paused;
}

.marquee .lg {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--ink);
    font-size: 1rem;
    white-space: nowrap;
    opacity: .72;
}

.marquee .lg i {
    color: var(--muted);
}

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

/* hero creative composition */
.hero-stage {
    position: relative;
    max-width: 540px;
    margin-left: auto;
}

.hero-panel {
    position: relative;
    aspect-ratio: 1/1;
    display: grid;
    place-items: center;
}

.hero-panel img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 24px 30px rgba(54, 52, 53, .22));
}

.hero-panel::after {
    display: none;
}

.hero-panel .ph {
    color: #fff;
    text-align: center;
    z-index: 1;
    border: 2px dashed rgba(255, 255, 255, .55);
    border-radius: 20px;
    padding: 2.2rem 2rem;
    margin: 1.4rem;
}

.hero-panel .ph i {
    font-size: 4.5rem;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .2));
}

.hero-panel .ph .t {
    font-weight: 700;
    margin-top: .5rem;
}

.hero-panel .ph small {
    opacity: .85;
}

/* floating cards */
.float-card {
    position: absolute;
    background: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: .85rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, .6);
}

.float-card .fc-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    color: #fff;
    flex: 0 0 auto;
}

.float-card .fc-txt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

.float-card .k {
    font-family: var(--font);
    font-weight: 800;
    color: var(--ink);
    font-size: 1.02rem;
}

.float-card .l {
    font-size: .75rem;
    color: var(--muted);
}

.fc-rating {
    top: 6%;
    left: -4%;
    animation: floatY 5s ease-in-out infinite;
}

.fc-rating .fc-ico {
    background: var(--amber);
    color: var(--ink);
}

.fc-delivery {
    bottom: 10%;
    left: -5%;
    animation: floatY 6s ease-in-out infinite .8s;
}

.fc-delivery .fc-ico {
    background: var(--magenta);
}

.fc-years {
    top: 15%;
    right: -4%;
    animation: floatY 5.5s ease-in-out infinite .4s;
}

.fc-years .fc-ico {
    background: var(--ink);
}

.fc-clients {
    bottom: 6%;
    right: -4%;
    animation: floatY 6.5s ease-in-out infinite 1.2s;
}

.fc-clients .fc-ico {
    background: var(--orange);
}

@keyframes floatY {

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

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

/* decorative dashed ring */
.hero-ring {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 2px dashed rgba(54, 52, 53, .18);
    border-radius: 50%;
    right: 14%;
    bottom: -4%;
    animation: spinSlow 18s linear infinite;
    z-index: 0;
}

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

/* ---- Tints (placeholder photo blocks) ------------------------------ */
.tint-amber {
    background: linear-gradient(150deg, #ffd77e, var(--amber));
}

.tint-orange {
    background: linear-gradient(150deg, #ffa07e, var(--orange));
}

.tint-magenta {
    background: linear-gradient(150deg, #e07bab, var(--magenta));
}

.tint-crimson {
    background: linear-gradient(150deg, #e8697a, var(--crimson));
}

.tint-cream {
    background: var(--cream-2);
}

.ph {
    text-align: center;
    color: rgba(255, 255, 255, .95);
    padding: 1rem;
}

.ph.dark {
    color: var(--ink);
}

.ph i {
    font-size: 2.6rem;
}

.ph .t {
    font-weight: 700;
    margin-top: .4rem;
}

.ph small {
    opacity: .85;
    font-size: .72rem;
}

/* ---- Category cards ------------------------------------------------- */
.cat-card {
    background: var(--ivory);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 16px;
    box-shadow: var(--shadow-xs);
    transition: transform .3s cubic-bezier(.3, .7, .4, 1), box-shadow .3s ease;
    height: 100%;
    display: block;
}

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

.cat-card .thumb {
    border-radius: var(--r-sm);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    overflow: hidden;
    position: relative;
}

.cat-card .thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, .06));
}

.cat-card .thumb i {
    transition: transform .35s ease;
}

.cat-card:hover .thumb i {
    transform: scale(1.12) rotate(-4deg);
}

.cat-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.cat-card:hover .thumb img {
    transform: scale(1.07);
}

.cat-card .c-name {
    font-weight: 700;
    color: var(--ink);
    font-size: 1.08rem;
    text-align: center;
}

.cat-card .c-cta {
    text-align: center;
    color: var(--orange);
    font-weight: 700;
    font-size: .86rem;
    margin-top: .2rem;
}

.cat-card .c-cta i {
    transition: transform .25s;
}

.cat-card:hover .c-cta i {
    transform: translateX(4px);
}

/* ---- Feature row ---------------------------------------------------- */
.feat {
    text-align: left;
}

.feat .fi {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: var(--white);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    color: var(--orange);
    margin-bottom: 1.1rem;
    box-shadow: var(--shadow-xs);
    transition: transform .3s ease, background .3s ease, color .3s ease;
}

.feat:hover .fi {
    transform: translateY(-4px) rotate(-6deg);
    background: var(--grad-sun);
    color: #fff;
}

.feat h4 {
    font-size: 1.15rem;
    margin-bottom: .4rem;
}

.feat p {
    color: var(--muted);
    font-size: .94rem;
    margin: 0;
}

/* ---- Promo cards ---------------------------------------------------- */
.promo {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xs);
    background: var(--ivory);
    transition: transform .3s cubic-bezier(.3, .7, .4, 1), box-shadow .3s ease;
}

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

.promo .p-media {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    position: relative;
}

.promo .p-media i {
    transition: transform .4s ease;
}

.promo:hover .p-media i {
    transform: scale(1.14) rotate(-4deg);
}

.promo .p-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.promo:hover .p-media img {
    transform: scale(1.06);
}

.promo .p-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    flex: 1;
}

.promo h4 {
    font-size: 1.18rem;
}

.promo p {
    color: var(--muted);
    font-size: .92rem;
    margin: 0;
    flex: 1;
}

/* ---- Split feature -------------------------------------------------- */
.split-photo {
    border-radius: var(--r-lg);
    aspect-ratio: 5/4;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.split-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- Bento grid ----------------------------------------------------- */
.bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 16px;
}

.bento>* {
    border-radius: var(--r-md);
    overflow: hidden;
    min-height: 158px;
    transition: transform .3s ease;
}

.bento>*:hover {
    transform: translateY(-5px);
}

.bento .b-photo {
    display: grid;
    place-items: center;
}

.bento .b-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.bento .b-photo:hover img {
    transform: scale(1.05);
}

.bento .b-stat {
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

/* decorative concentric-ring SVG, auto-tinted per tile via currentColor */
.bento .b-stat>*:not(.b-deco) {
    position: relative;
    z-index: 1;
}

.bento .b-stat .b-deco {
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 150px;
    height: 150px;
    color: currentColor;
    opacity: .13;
    z-index: 0;
    pointer-events: none;
}

.bento .b-stat.on-amber .b-deco {
    opacity: .18;
}

.bento .b-stat.on-cream .b-deco {
    opacity: .1;
}

.bento .b-stat .num {
    font-size: clamp(2.3rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
}

.bento .b-stat .lbl {
    font-weight: 600;
    opacity: .9;
}

.bento .b-stat.on-ink {
    background: var(--ink);
    color: #fff;
}

.bento .b-stat.on-ink .num {
    color: #fff;
}

.bento .b-stat.on-amber {
    background: var(--grad-sun);
    color: var(--ink);
}

.bento .b-stat.on-cream {
    background: var(--ivory);
    color: var(--ink);
    border: 1px solid var(--line);
}

.bento .star {
    color: var(--amber);
}

.bento .b-stat.on-ink .star {
    color: var(--amber);
}

.col-span-2 {
    grid-column: span 2;
}

.row-span-2 {
    grid-row: span 2;
}

/* ---- Steps ---------------------------------------------------------- */
.step {
    padding: 0 .4rem;
    position: relative;
    text-align: center;
}

.step .n {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--ink);
    color: #fff;
    font-weight: 800;
    font-size: 1.25rem;
    display: grid;
    place-items: center;
    margin: 0 auto 1.1rem;
    transition: transform .3s ease, background .3s ease;
}

.step:hover .n {
    transform: rotate(-8deg) scale(1.05);
    background: var(--grad-sun);
    color: var(--ink);
}

.step h4 {
    font-size: 1.1rem;
}

.step p {
    color: var(--muted);
    font-size: .93rem;
}

/* Industries chips — equal height, aligned icon + label */
.ind-chip {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 100%;
    padding: 14px 16px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.ind-chip:hover {
    transform: translateY(-2px);
    border-color: var(--orange);
    background: #fff;
}

.ind-chip i {
    flex: 0 0 auto;
    width: 1.7rem;
    text-align: center;
    font-size: 1.25rem;
}

.ind-chip span {
    line-height: 1.25;
}

/* ---- Testimonials --------------------------------------------------- */
.quote {
    background: var(--ivory);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 30px;
    height: 100%;
    box-shadow: var(--shadow-xs);
    transition: transform .3s ease, box-shadow .3s ease;
    position: relative;
}

.quote::before {
    content: '\201C';
    position: absolute;
    top: 6px;
    right: 22px;
    font-size: 5rem;
    line-height: 1;
    color: var(--amber);
    opacity: .35;
    font-family: Georgia, serif;
}

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

.quote .stars {
    color: var(--amber-d);
    margin-bottom: .7rem;
}

.quote p {
    color: var(--ink-2);
    position: relative;
    z-index: 1;
}

.quote .who {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: 1.2rem;
}

.quote .av {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--grad-sun);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-weight: 800;
}

.quote .who strong {
    display: block;
    color: var(--ink);
}

.quote .who small {
    color: var(--muted);
}

/* ---- Testimonial slider -------------------------------------------- */
.tst-slider {
    position: relative;
}

.tst-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 4px 18px;
    margin: -4px -4px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tst-track::-webkit-scrollbar {
    display: none;
}

.tst-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.tst-slide .quote {
    height: 100%;
}

@media (min-width: 768px) {
    .tst-slide {
        flex-basis: calc((100% - 1.5rem) / 2);
    }
}

@media (min-width: 992px) {
    .tst-slide {
        flex-basis: calc((100% - 3rem) / 3);
    }
}

.tst-nav {
    display: flex;
    justify-content: center;
    gap: .8rem;
    margin-top: 2rem;
}

.tst-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}

.tst-btn:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
    transform: translateY(-2px);
}

.tst-btn:disabled {
    opacity: .4;
    cursor: default;
    transform: none;
    background: #fff;
    color: var(--ink);
    border-color: var(--line);
}

/* ---- FAQ ------------------------------------------------------------ */
.accordion-item {
    border: 1px solid var(--line);
    border-radius: var(--r-sm) !important;
    margin-bottom: .8rem;
    overflow: hidden;
    background: var(--ivory);
    transition: box-shadow .25s ease;
}

.accordion-item:has(.accordion-button:not(.collapsed)) {
    box-shadow: var(--shadow-xs);
}

.accordion-button {
    font-weight: 700;
    color: var(--ink);
    padding: 1.2rem 1.3rem;
    background: var(--ivory);
}

.accordion-button:not(.collapsed) {
    background: var(--cream);
    color: var(--orange);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button::after {
    background-size: 1rem;
}

.accordion-body {
    color: var(--muted);
}

/* ---- Page header ---------------------------------------------------- */
.page-head {
    background: var(--ink);
    color: #fff;
    padding: 76px 0 64px;
}

.page-head h1 {
    color: #fff;
    font-size: clamp(2.1rem, 4vw, 3.3rem);
}

.page-head .breadcrumb {
    --bs-breadcrumb-divider-color: #8a847f;
    margin: 0;
}

.page-head .breadcrumb a {
    color: #cfc9c2;
}

.page-head .breadcrumb .active {
    color: var(--amber);
}

/* ---- Contact -------------------------------------------------------- */
.contact-card {
    background: var(--ivory);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 24px;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    height: 100%;
    box-shadow: var(--shadow-xs);
    transition: transform .3s ease;
}

.contact-card:hover {
    transform: translateY(-4px);
}

.contact-card .c-ico {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--grad-sun);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 1.35rem;
}

.contact-card h4 {
    font-size: 1.05rem;
    margin-bottom: .2rem;
}

.contact-card a,
.contact-card p {
    color: var(--ink-2);
    margin: 0;
}

.form-control,
.form-select {
    border: 1.5px solid var(--line);
    border-radius: var(--r-sm);
    padding: .85rem 1rem;
    background: var(--white);
    transition: border-color .2s, box-shadow .2s;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 .22rem rgba(241, 98, 54, .14);
}

.form-label {
    font-weight: 600;
    color: var(--ink);
    font-size: .9rem;
}

/* ---- Footer --------------------------------------------------------- */
.site-footer {
    background: var(--ink);
    color: #a9a4a0;
    padding-top: 76px;
    position: relative;
    overflow: hidden;
}

.site-footer>.container {
    position: relative;
    z-index: 1;
}

.footer-svg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.footer-svg .mtn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: .9;
}

.footer-svg .dots {
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image: radial-gradient(rgba(255, 255, 255, .06) 1.4px, transparent 1.4px);
    background-size: 26px 26px;
}

.footer-glow {
    position: absolute;
    top: -140px;
    left: 50%;
    transform: translateX(-50%);
    width: 680px;
    max-width: 100%;
    height: 320px;
    background: radial-gradient(ellipse at center, rgba(245, 172, 50, .16), transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.site-footer img.f-logo {
    height: 76px;
    width: auto;
    margin-bottom: 1.1rem;
}

/* ---- layout ---- */
.site-footer .f-top {
    display: grid;
    grid-template-columns: 1fr 1.45fr;
    gap: 48px 52px;
    align-items: start;
}

.site-footer .f-nav {
    display: grid;
    grid-template-columns: .75fr 3fr;
    gap: 40px 56px;
    margin-top: 44px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.site-footer h5 {
    position: relative;
    margin-bottom: 1.35rem;
    padding-bottom: .7rem;
    color: #fff;
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.site-footer h5::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-sun);
}

/* ---- brand column ---- */
.site-footer .f-brand p {
    max-width: 38ch;
    font-size: .93rem;
    line-height: 1.75;
}

.site-footer .f-rating {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.1rem;
    padding: 9px 15px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    font-size: .86rem;
    transition: border-color .2s ease, background .2s ease;
}

.site-footer .f-rating:hover {
    border-color: rgba(245, 172, 50, .5);
    background: rgba(245, 172, 50, .1);
}

.site-footer .f-rating .f-stars {
    display: inline-flex;
    gap: 1px;
    color: var(--amber);
    font-size: .8rem;
}

.site-footer .f-rating strong {
    color: #fff;
    font-weight: 700;
}

.site-footer .f-soc {
    display: flex;
    gap: .55rem;
    margin-top: 1.4rem;
}

/* ---- contact cards ---- */
.site-footer .f-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.site-footer .f-card {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 18px 18px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .04);
    transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.site-footer .f-card:hover {
    border-color: rgba(245, 172, 50, .45);
    background: rgba(245, 172, 50, .07);
    transform: translateY(-2px);
}

.site-footer .f-card-wide {
    grid-column: 1 / -1;
}

.site-footer .f-card-ico {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: rgba(245, 172, 50, .14);
    color: var(--amber);
    font-size: .95rem;
}

.site-footer .f-card-txt {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.site-footer .f-card-lbl {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.site-footer .f-card strong {
    color: #fff;
    font-size: .93rem;
    font-weight: 600;
    line-height: 1.5;
    /* break-word, not anywhere: the email should only split if it genuinely
       cannot fit, never mid-domain while there is room left on the line. */
    overflow-wrap: break-word;
}

.site-footer .f-card-sub {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: #a9a4a0;
    font-size: .84rem;
}

.site-footer .f-card-sub i {
    color: var(--amber);
    font-size: .78rem;
}

.site-footer .f-card:hover strong {
    color: var(--amber);
}

/* ---- link lists ---- */
.site-footer a {
    color: #c2bdb9;
    transition: color .2s, padding-left .2s;
}

.site-footer a:hover {
    color: var(--amber);
}

.site-footer .f-links li {
    margin-bottom: .6rem;
}

.site-footer .f-links a {
    display: inline-block;
    font-size: .93rem;
}

.site-footer .f-links a:hover {
    color: var(--amber);
    padding-left: 5px;
}

/* 12 products flow into two balanced sub-columns instead of one long stack. */
.site-footer .f-links-split {
    columns: 4;
    column-gap: 32px;
}

.site-footer .f-links-split li {
    break-inside: avoid;
}

/* ---- bottom bar ---- */
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1.5rem;
    margin-top: 46px;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .85rem;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.footer-credit a {
    color: var(--amber);
    font-weight: 600;
}

.footer-credit a:hover {
    color: #fff;
    text-decoration: underline;
}

@media (max-width: 1199px) {
    .site-footer .f-top {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .site-footer .f-nav {
        grid-template-columns: .8fr 2.4fr;
        gap: 32px 40px;
    }

    .site-footer .f-links-split {
        columns: 3;
    }
}

/* 3 product sub-columns get too tight once the nav row narrows, so the longer
   names start wrapping. Drop to 2 before that happens. */
@media (max-width: 991px) {
    .site-footer .f-links-split {
        columns: 2;
    }
}

@media (max-width: 767px) {
    .site-footer .f-cards {
        grid-template-columns: 1fr;
    }

    .site-footer .f-nav {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 34px;
        padding-top: 32px;
    }

    .site-footer .f-links-split {
        columns: 2;
        column-gap: 20px;
    }

    .footer-bottom {
        justify-content: center;
        text-align: center;
        padding: 22px 0 80px 0;
    }
}

@media (max-width: 419px) {
    .site-footer .f-links-split {
        columns: 1;
    }
}

/* =====================================================================
   MESSAGE PAGES (404, thank-you)
   ===================================================================== */
.msg-panel {
    max-width: 760px;
    margin-inline: auto;
    padding: 48px 40px;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.msg-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 1.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 2.4rem;
}

.msg-icon-ok {
    background: rgba(37, 211, 102, .12);
    color: #1aa64b;
}

.msg-code {
    font-size: clamp(4.5rem, 14vw, 7.5rem);
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.04em;
    background: var(--grad-warm);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: .75rem;
}

.msg-title {
    margin: .5rem 0 0;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.02em;
}

.msg-lead {
    max-width: 56ch;
    margin: 1rem auto 0;
    color: var(--ink-2);
    font-size: 1.02rem;
}

.msg-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: 1.75rem;
}

.msg-links {
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
}

.msg-links-head {
    display: block;
    margin-bottom: .9rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.msg-links ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 0;
}

.msg-links a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: 8px 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--ivory);
    color: var(--ink);
    font-size: .88rem;
    font-weight: 600;
    transition: all .2s ease;
}

.msg-links a i {
    color: var(--muted);
    font-size: .82rem;
    transition: color .2s ease;
}

.msg-links a:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.msg-links a:hover i {
    color: var(--amber);
}

.msg-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1.1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-size: .92rem;
}

.msg-alt span {
    color: var(--muted);
    font-weight: 600;
}

.msg-alt a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--ink);
    font-weight: 700;
    transition: color .2s ease;
}

.msg-alt a:hover {
    color: var(--orange);
}

.msg-alt .msg-wa:hover {
    color: var(--wa);
}

@media (max-width: 575px) {
    .msg-panel {
        padding: 34px 22px;
    }

    .msg-actions .btn {
        width: 100%;
    }
}

/* =====================================================================
   MOBILE NAVIGATION (off-canvas)
   ---------------------------------------------------------------------
   Replaces the old .navbar-collapse, which expanded inline in the document
   and therefore scrolled the page behind it. Bootstrap's offcanvas locks the
   body; overscroll-behavior stops the scroll chaining to the page once the
   list hits its end. Head, tab bar and footer are fixed; only .mn-body moves.
   ===================================================================== */
.mobile-nav {
    width: min(420px, 92vw);
    border: 0;
    background: var(--white);
    box-shadow: -30px 0 60px -30px rgba(54, 52, 53, .45);
}

/* ---- head ---- */
.mobile-nav .mn-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}

.mobile-nav .mn-logo img {
    height: 46px;
    width: auto;
}

.mobile-nav .mn-close {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--amber);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink);
    font-size: 1.15rem;
    transition: background .2s ease, color .2s ease;
}

.mobile-nav .mn-close:hover,
.mobile-nav .mn-close:focus-visible {
    background: var(--amber);
    color: #fff;
}

/* ---- tab bar ---- */
.mobile-nav .mn-tabs {
    flex-shrink: 0;
    flex-wrap: nowrap;
    border-bottom: 1px solid var(--line);
    background: var(--white);
}

.mobile-nav .mn-tabs .nav-item {
    flex: 1 1 0;
}

.mobile-nav .mn-tabs .nav-link {
    width: 100%;
    padding: 15px 6px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: var(--ivory);
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: color .2s ease, background .2s ease;
}

.mobile-nav .mn-tabs .nav-link:hover {
    color: var(--ink-2);
}

.mobile-nav .mn-tabs .nav-link.active {
    background: var(--white);
    border-bottom-color: var(--orange);
    color: var(--orange);
}

/* ---- scrolling body ---- */
.mobile-nav .mn-body {
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ---- link lists ---- */
.mobile-nav .mn-list {
    margin: 0;
}

.mobile-nav .mn-list li+li a {
    border-top: 1px solid var(--line);
}

.mobile-nav .mn-list a {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 17px 20px;
    border-left: 3px solid transparent;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
    transition: background .2s ease, color .2s ease;
}

.mobile-nav .mn-list a i {
    width: 1.15rem;
    flex-shrink: 0;
    color: var(--muted);
    font-size: .95rem;
    transition: color .2s ease;
}

.mobile-nav .mn-list a:hover {
    background: var(--ivory);
}

.mobile-nav .mn-list a.is-current {
    background: var(--ivory);
    border-left-color: var(--orange);
    color: var(--orange);
}

.mobile-nav .mn-list a.is-current i {
    color: var(--orange);
}

.mobile-nav .mn-list a.mn-all {
    color: var(--orange);
    font-weight: 700;
}

.mobile-nav .mn-list a.mn-all i {
    color: inherit;
    width: auto;
}

/* ---- contact pane ---- */
.mobile-nav .mn-contact {
    margin: 0;
    padding: 6px 0;
}

.mobile-nav .mn-contact li {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 15px 20px;
}

.mobile-nav .mn-contact li+li {
    border-top: 1px solid var(--line);
}

.mobile-nav .mn-contact>li>i {
    width: 1.15rem;
    flex-shrink: 0;
    margin-top: .2rem;
    color: var(--orange);
}

.mobile-nav .mn-contact span {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .95rem;
}

.mobile-nav .mn-contact a {
    color: var(--ink);
    font-weight: 600;
}

.mobile-nav .mn-contact a:hover {
    color: var(--orange);
}

.mobile-nav .mn-contact .mn-plain {
    color: var(--ink-2);
    font-weight: 500;
}

.mobile-nav .mn-soc {
    display: flex;
    gap: .6rem;
    padding: 18px 20px;
    border-top: 1px solid var(--line);
}

.mobile-nav .mn-soc a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    background: var(--ivory);
    border: 1px solid var(--line);
    color: var(--ink);
    transition: all .2s ease;
}

.mobile-nav .mn-soc a:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* ---- footer CTA ---- */
.mobile-nav .mn-foot {
    flex-shrink: 0;
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    background: var(--ivory);
}

/* The Quick-Connect FAB stack (z-index 9998) would otherwise float over the
   panel, exactly as it did over the quote modal. Bootstrap sets no body class
   for an open offcanvas, so match on the panel itself. */
body:has(.offcanvas.show) .cn-cb-fab-stack {
    opacity: 0;
    pointer-events: none;
}

/* =====================================================================
   GET-A-QUOTE MODAL
   ---------------------------------------------------------------------
   Single-column card that reuses the .spec-sheet language from the product
   pages: dark ink head band with a warm radial glow, a thin trust strip, the
   form, and a talk-to-us footer. The head and footer stay put while the form
   scrolls (modal-dialog-scrollable), so the card never outgrows a short laptop
   viewport the way the old two-panel layout did.
   ===================================================================== */
.quote-modal .modal-dialog {
    max-width: 560px;
}

.quote-modal .modal-content {
    border: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow);
}

/* ---- Head band ---- */
.quote-modal .qm-head {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    padding: 26px 30px 22px;
    background: var(--ink);
    color: #fff;
}

.quote-modal .qm-head::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, rgba(241, 98, 54, .5), transparent 62%);
    pointer-events: none;
}

.quote-modal .qm-head>* {
    position: relative;
    z-index: 1;
}

.quote-modal .qm-logo {
    height: 40px;
    width: auto;
    margin-bottom: .9rem;
}

.quote-modal .qm-head h4 {
    margin: 0 0 .35rem;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.quote-modal .qm-head p {
    margin: 0;
    max-width: 44ch;
    color: rgba(255, 255, 255, .72);
    font-size: .9rem;
}

.quote-modal .qm-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    display: grid;
    place-items: center;
    transition: background .2s ease;
}

.quote-modal .qm-close:hover {
    background: rgba(255, 255, 255, .26);
}

/* ---- Trust strip ---- */
.quote-modal .qm-trust {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.3rem;
    margin: 0;
    padding: 12px 30px;
    background: var(--ivory);
    border-bottom: 1px solid var(--line);
}

.quote-modal .qm-trust li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--ink-2);
    font-size: .8rem;
    font-weight: 600;
}

.quote-modal .qm-trust i {
    color: var(--orange);
    font-size: .85rem;
}

/* ---- Form ---- */
.quote-modal .qm-body {
    padding: 24px 30px;
}

.quote-modal .form-label {
    margin-bottom: .3rem;
    color: var(--ink-2);
    font-size: .82rem;
    font-weight: 600;
}

.quote-modal .qm-opt {
    color: var(--muted);
    font-weight: 500;
    font-size: .74rem;
}

.quote-modal .form-control,
.quote-modal .form-select {
    padding: .6rem .85rem;
    border-radius: var(--r-sm);
    font-size: .92rem;
}

.quote-modal .qm-consent .form-check-label {
    color: var(--ink-2);
    font-size: .84rem;
}

.quote-modal .qm-note {
    margin: .6rem 0 0;
    text-align: center;
    color: var(--muted);
    font-size: .8rem;
}

/* ---- Footer ---- */
.quote-modal .qm-foot {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1.1rem;
    padding: 14px 30px;
    background: var(--ivory);
    border-top: 1px solid var(--line);
    font-size: .86rem;
}

.quote-modal .qm-foot span {
    color: var(--muted);
    font-weight: 600;
}

.quote-modal .qm-foot a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--ink);
    font-weight: 700;
    transition: color .2s ease;
}

.quote-modal .qm-foot a:hover {
    color: var(--orange);
}

.quote-modal .qm-foot .qm-wa:hover {
    color: var(--wa);
}

/* The Quick-Connect FAB stack sits at z-index 9998, above Bootstrap's modal
   (1055). On mobile it becomes a bottom bar and covers the modal footer, so
   fold it away for as long as any modal is open. */
body.modal-open .cn-cb-fab-stack {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 575px) {
    .quote-modal .qm-head {
        padding: 22px 20px 18px;
    }

    .quote-modal .qm-trust,
    .quote-modal .qm-foot {
        padding-left: 20px;
        padding-right: 20px;
    }

    .quote-modal .qm-body {
        padding: 20px;
    }
}

.soc {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    display: grid;
    place-items: center;
    color: #fff !important;
    transition: all .25s ease;
}

.soc:hover {
    background: var(--grad-sun);
    color: var(--ink) !important;
    transform: translateY(-3px);
}

/* ---- Floating buttons + back-to-top -------------------------------- */
.fab-wrap {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
}

.fab:hover {
    transform: scale(1.1) translateY(-2px);
    color: #fff;
}

.fab-wa {
    background: var(--wa);
}

.fab-wa::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, .5);
    animation: ring 2.4s ease-out infinite;
}

@keyframes ring {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, .5);
    }

    70% {
        box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.fab-call {
    background: var(--grad-sun);
    color: var(--ink);
}

.fab-call:hover {
    color: var(--ink);
}

#backTop {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 1039;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .3s, transform .3s, visibility .3s, background .2s, color .2s;
    cursor: pointer;
}

#backTop.show {
    opacity: 1;
    visibility: visible;
    transform: none;
}

#backTop:hover {
    background: var(--ink);
    color: #fff;
}

/* =====================================================================
   SECTION DECORATION — subtle hero-style accents
   ===================================================================== */
.section.deco,
.deco {
    position: relative;
    overflow: hidden;
}

.section.deco>.container,
.deco>.container {
    position: relative;
    z-index: 1;
}

.sec-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .16;
    z-index: 0;
    pointer-events: none;
}

.sec-blob.a {
    background: var(--grad-sun);
    width: 360px;
    height: 360px;
}

.sec-blob.m {
    background: radial-gradient(circle at 30% 30%, var(--magenta), transparent 70%);
    width: 320px;
    height: 320px;
}

.sec-blob.tr {
    top: -80px;
    right: -70px;
}

.sec-blob.bl {
    bottom: -90px;
    left: -80px;
}

/* =====================================================================
   CTA — redesigned gradient panel
   ===================================================================== */
.cta-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: linear-gradient(120deg, var(--amber), var(--orange) 52%, var(--crimson));
    color: #fff;
    padding: clamp(36px, 5vw, 64px);
    box-shadow: 0 40px 80px -32px rgba(201, 52, 70, .5);
}

.cta-panel h2 {
    color: #fff;
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
}

.cta-panel .eyebrow {
    color: #fff;
}

.cta-panel .eyebrow::before {
    background: #fff;
}

.cta-panel p {
    color: rgba(255, 255, 255, .92);
}

.cta-panel .c-blob {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    z-index: 0;
}

.cta-panel .c-blob.one {
    width: 240px;
    height: 240px;
    top: -90px;
    right: -40px;
}

.cta-panel .c-blob.two {
    width: 150px;
    height: 150px;
    bottom: -70px;
    right: 22%;
    background: rgba(255, 255, 255, .1);
}

.cta-panel .c-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .5;
    background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 38px 38px;
    -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000, transparent 60%);
    mask-image: radial-gradient(120% 100% at 100% 0%, #000, transparent 60%);
}

.cta-panel .cta-inner {
    position: relative;
    z-index: 1;
}

.cta-panel .btn-white {
    --btn-bg: #fff;
    --btn-fg: var(--ink);
    --btn-bd: #fff;
    --btn-fill: var(--ink);
}

.cta-panel .btn-white:hover {
    --btn-fg: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .4);
}

/* =====================================================================
   DARK SHOWCASE PANEL — reuses the CTA panel language
   ===================================================================== */
.panel-dark {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--ink);
    color: #fff;
    padding: clamp(40px, 5vw, 72px);
    box-shadow: var(--shadow);
}

.panel-dark .p-inner {
    position: relative;
    z-index: 1;
}

.panel-dark .p-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    z-index: 0;
    pointer-events: none;
}

.panel-dark .p-blob.one {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--orange), transparent 70%);
    opacity: .42;
    top: -110px;
    left: -70px;
}

.panel-dark .p-blob.two {
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, var(--magenta), transparent 70%);
    opacity: .36;
    bottom: -100px;
    right: -50px;
}

.panel-dark .c-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .4;
    background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(120% 100% at 0% 0%, #000, transparent 65%);
    mask-image: radial-gradient(120% 100% at 0% 0%, #000, transparent 65%);
}

.panel-dark h2,
.panel-dark .section-title {
    color: #fff;
}

.panel-dark .eyebrow {
    color: var(--amber);
}

.panel-dark .eyebrow::before {
    background: var(--amber);
}

.panel-dark .step h4 {
    color: #fff;
}

.panel-dark .step p {
    color: rgba(255, 255, 255, .72);
}

.panel-dark .step .n {
    background: var(--grad-sun);
    color: var(--ink);
}

.panel-dark .step:hover .n {
    background: #fff;
}

/* =====================================================================
   ANIMATIONS — reveal on scroll + stagger
   ===================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1), color .7s cubic-bezier(.2, .7, .3, 1);
    transition-delay: var(--d, 0s);
    will-change: opacity, transform;
}

.reveal.in {
    opacity: 1;
    transform: none;
}

.reveal-left {
    transform: translateX(-30px);
}

.reveal-right {
    transform: translateX(30px);
}

.reveal-zoom {
    transform: scale(.94);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-blobs,
    .float-card,
    .hero-ring,
    .marquee-track,
    .hero-badge .dot::after,
    .fab-wa::after {
        animation: none !important;
    }
}

/* ---- Responsive ----------------------------------------------------- */
@media (max-width: 1199px) {
    .float-card {
        padding: .7rem .8rem;
    }

    .float-card .l {
        font-size: .7rem;
    }
}

@media (max-width: 991px) {
    .section {
        padding: 72px 0;
    }

    .bento {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-stage {
        min-height: auto;
        margin-top: 2.5rem;
        width: 100%;
        max-width: 400px;
        margin-inline: auto;
    }

    .brand-logo img,
    .site-head.stuck .brand-logo img {
        height: 58px;
        width: auto;
    }

}

@media (max-width: 575px) {
    .bento {
        grid-template-columns: 1fr 1fr;
    }

    .float-card .l {
        display: block;
    }

    .hero-panel {
        transform: none;
    }

    /* tighter padding so 2-up steps / CTA buttons don't cramp on phones */
    .panel-dark {
        padding: 32px 20px;
    }

    .cta-panel {
        padding: 30px 22px;
    }

    .cta-panel .btn-lg {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
        font-size: .98rem;
    }

    .cta-panel .btn {
        white-space: nowrap;
    }

    /* Industry chips: give labels room so long words (e.g. Pharmaceutical) don't clip */
    .ind-chip {
        padding: 12px 12px;
        gap: .5rem;
    }

    .ind-chip i {
        width: 1.35rem;
        font-size: 1.05rem;
    }

    .ind-chip span {
        min-width: 0;
        font-size: .82rem;
        overflow-wrap: break-word;
    }
}

/* =====================================================================
   INNER PAGES — page head decoration, variant rows, spec grids
   Added for the product-detail and content patterns. Reuses the
   .panel-dark / .cta-panel decorative language so inner pages read as
   the same site as the homepage.
   ===================================================================== */

/* ---- Page head: compact, decorated band carrying crumbs + H1 only ---- */
.page-head {
    position: relative;
    overflow: hidden;
    padding: 46px 0 52px;
}

.page-head .container {
    position: relative;
    z-index: 1;
}

.page-head h1 {
    font-size: clamp(2.2rem, 4.4vw, 3.5rem);
    max-width: 18ch;
}

/* concentric rings — same language as the bento stat cards */
.page-head .pg-rings {
    position: absolute;
    top: 50%;
    right: -70px;
    transform: translateY(-50%);
    width: 420px;
    height: 420px;
    z-index: 0;
    color: #fff;
    opacity: .09;
    pointer-events: none;
}

/* warm hairline closing the band */
.page-head::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--grad-warm);
    z-index: 2;
}

.page-head .h-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    z-index: 0;
    pointer-events: none;
}

.page-head .h-blob.one {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--orange), transparent 70%);
    opacity: .40;
    top: -120px;
    right: -60px;
}

.page-head .h-blob.two {
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, var(--magenta), transparent 70%);
    opacity: .30;
    bottom: -140px;
    left: -70px;
}

.page-head .c-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .5;
    background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 38px 38px;
    -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000, transparent 60%);
    mask-image: radial-gradient(120% 100% at 100% 0%, #000, transparent 60%);
}

.page-head .lead {
    color: #cfc9c2;
    max-width: 60ch;
}

/* Breadcrumb without Bootstrap's list markup dependency */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    margin-bottom: 1.1rem;
    padding: 0;
    list-style: none;
}

.crumbs li {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #cfc9c2;
}

.crumbs li+li::before {
    content: '/';
    color: #8a847f;
}

.crumbs a {
    color: #cfc9c2;
}

.crumbs a:hover {
    color: var(--amber);
}

.crumbs .current {
    color: var(--amber);
    font-weight: 600;
}

/* ---- Product hero (sits under the page head) ------------------------ */
.prod-hero {
    padding: 64px 0 72px;
    position: relative;
    overflow: hidden;
}

.prod-hero .ph-lead {
    font-size: 1.12rem;
    color: var(--ink-2);
    max-width: 54ch;
}

.prod-hero .ph-points {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1.6rem;
    margin-top: 1.3rem;
}

.prod-hero .ph-points span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
}

.prod-hero .ph-points i {
    color: var(--orange);
}

/* tinted stage holding the product cut-out */
.prod-stage {
    position: relative;
    max-width: 520px;
    margin-inline: auto;
}

.prod-stage .ps-panel {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: var(--r-lg);
    display: grid;
    place-items: center;
    padding: 15%;
    box-shadow: var(--shadow);
}

.prod-stage .ps-panel img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 18px 22px rgba(54, 52, 53, .18));
}

/* soft ring echoing the homepage hero */
.prod-stage .ps-ring {
    position: absolute;
    inset: -7%;
    border-radius: 50%;
    border: 1.5px dashed var(--line);
    z-index: -1;
    pointer-events: none;
}

.prod-stage .float-card.fc-ply {
    left: -8%;
    top: 14%;
}

.prod-stage .float-card.fc-custom {
    right: -6%;
    bottom: 16%;
}

@media (max-width: 991.98px) {
    .prod-stage {
        max-width: 420px;
    }

    .prod-stage .float-card.fc-ply {
        left: -2%;
    }

    .prod-stage .float-card.fc-custom {
        right: -2%;
    }
}

@media (max-width: 420px) {

    .prod-stage .float-card .l {
        display: none;
    }

    .prod-stage .float-card {
        padding: .6rem .75rem;
    }
}

/* ---- Variant rows (one per product sub-type) ------------------------ */
.variant {
    padding: 56px 0;
    border-top: 1px solid var(--line);
}

.variant:first-of-type {
    border-top: 0;
}

.variant .v-media {
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-sm);
}

/* the product images are square and carry their own background, so the frame
   matches their ratio — they fill it exactly, with nothing cropped */
.variant .v-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.variant h2 {
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    margin-bottom: .55rem;
}

.variant .v-lead {
    color: var(--ink-2);
}

/* ---- Specification sheet -------------------------------------------- */
.spec-sheet {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.spec-sheet .ss-head {
    background: var(--ink);
    color: #fff;
    padding: 18px 26px;
    display: flex;
    align-items: center;
    gap: .8rem;
    position: relative;
    overflow: hidden;
}

.spec-sheet .ss-head::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, rgba(241, 98, 54, .45), transparent 60%);
    pointer-events: none;
}

.spec-sheet .ss-head i {
    color: var(--amber);
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
}

.spec-sheet .ss-head h3 {
    color: #fff;
    font-size: 1.02rem;
    margin: 0;
    position: relative;
    z-index: 1;
    letter-spacing: 0;
}

.spec-sheet .ss-body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 34px;
    padding: 8px 26px 22px;
}

.spec-sheet .ss-row {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    padding: 13px 0;
    border-bottom: 1px dashed var(--line);
}

/* bottom row of each column sits against the footer rule */
.spec-sheet .ss-row:nth-last-child(-n+2) {
    border-bottom: 0;
}

.spec-sheet .ss-row dt {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    font-weight: 700;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* dotted leader, the way a real spec sheet reads */
.spec-sheet .ss-row .lead-dots {
    flex: 1 1 auto;
    border-bottom: 1px dotted #d3c8b3;
    transform: translateY(-3px);
    min-width: 12px;
}

.spec-sheet .ss-row dd {
    margin: 0;
    font-weight: 700;
    color: var(--ink);
    font-size: .95rem;
    text-align: right;
    flex: 0 1 auto;
}

.spec-sheet .ss-foot {
    background: var(--ivory);
    border-top: 1px solid var(--line);
    padding: 15px 26px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    font-size: .9rem;
    color: var(--ink-2);
}

@media (max-width: 767.98px) {
    .spec-sheet .ss-body {
        grid-template-columns: 1fr;
        padding: 6px 20px 18px;
    }

    .spec-sheet .ss-head,
    .spec-sheet .ss-foot {
        padding-inline: 20px;
    }
}

/* ---- In-page jump nav for long product pages ------------------------ */
.jump-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 18px 0 0;
}

.jump-nav a {
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink-2);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: .34rem .9rem;
    transition: border-color .2s, color .2s, transform .2s;
}

.jump-nav a:hover {
    color: var(--orange);
    border-color: var(--orange);
    transform: translateY(-2px);
}

@media (max-width: 767.98px) {
    .page-head {
        padding: 56px 0 46px;
    }

    .variant {
        padding: 40px 0;
    }

    .variant .v-media {
        aspect-ratio: 1;
    }
}

/* ---- Promo media holding a cut-out (transparent) product ------------ */
/* The original studio PNGs have their background baked in and are square,
   so object-fit:cover suits them. Cut-outs are odd aspect ratios and must
   be contained over the tint instead, or cover crops the product. */
/* ---- Contact page: map frame + light contact list -------------------- */
.map-wrap {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    aspect-ratio: 21/9;
    background: var(--cream);
}

.map-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.f-contact-light a {
    color: var(--ink);
    font-weight: 600;
}

.f-contact-light a:hover {
    color: var(--orange);
}

@media (max-width: 767.98px) {
    .map-wrap {
        aspect-ratio: 4/3;
    }
}

/* ---- Legal / long-form prose (privacy, terms) ----------------------- */
.legal {
    max-width: 74ch;
}

.legal h2 {
    font-size: 1.45rem;
    margin: 2.6rem 0 .8rem;
    scroll-margin-top: 130px;
}

.legal h2:first-of-type {
    margin-top: 0;
}

.legal p,
.legal li {
    color: var(--ink-2);
}

.legal ul {
    padding-left: 1.1rem;
}

.legal li {
    margin-bottom: .55rem;
}

.legal li strong {
    color: var(--ink);
}

.legal .updated {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--ivory);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: .35rem 1rem;
    margin-bottom: 1.8rem;
}

/* sticky contents rail */
.legal-toc {
    position: sticky;
    top: 130px;
    background: var(--ivory);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 20px 22px;
}

.legal-toc h3 {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
    margin-bottom: .9rem;
}

.legal-toc ol {
    list-style: none;
    counter-reset: toc;
    margin: 0;
    padding: 0;
}

.legal-toc li {
    counter-increment: toc;
    margin-bottom: .5rem;
    font-size: .9rem;
}

.legal-toc li::before {
    content: counter(toc) ".";
    color: var(--orange);
    font-weight: 700;
    margin-right: .45rem;
}

.legal-toc a {
    color: var(--ink-2);
}

.legal-toc a:hover {
    color: var(--orange);
}

/* ---- Blog listing: topic label on the post card --------------------- */
.post-topic {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: .5rem;
}

.promo .p-body h3 {
    font-size: 1.05rem;
    line-height: 1.3;
    margin-bottom: .3rem;
}

/* =====================================================================
   CONTACT INFO CARDS — one brand colour each, not four identical boxes
   ===================================================================== */
.cinfo {
    --c: var(--amber);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 26px 24px 24px;
    overflow: hidden;
    isolation: isolate;
    transition: transform .35s cubic-bezier(.34, 1.1, .5, 1), box-shadow .35s ease, border-color .35s ease;
}

/* soft colour wash that grows on hover */
.cinfo::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: var(--c);
    opacity: .10;
    filter: blur(24px);
    z-index: -1;
    transition: transform .45s ease, opacity .35s ease;
}

.cinfo:hover {
    transform: translateY(-6px);
    border-color: var(--c);
    box-shadow: var(--shadow-sm);
}

.cinfo:hover::before {
    transform: scale(1.5);
    opacity: .18;
}

.cinfo .ci-ico {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    color: #fff;
    background: var(--c);
    margin-bottom: 1rem;
    transition: transform .35s cubic-bezier(.34, 1.1, .5, 1);
}

.cinfo:hover .ci-ico {
    transform: rotate(-6deg) scale(1.06);
}

.cinfo .ci-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .35rem;
}

.cinfo .ci-value {
    font-weight: 800;
    font-size: 1.06rem;
    color: var(--ink);
    line-height: 1.35;
    letter-spacing: -.01em;
    word-break: break-word;
}

.cinfo .ci-value a {
    color: var(--ink);
}

.cinfo .ci-value a:hover {
    color: var(--c);
}

.cinfo .ci-sub {
    font-size: .87rem;
    color: var(--muted);
    margin-top: .3rem;
}

/* arrow only where the card actually goes somewhere */
.cinfo .ci-go {
    margin-top: auto;
    padding-top: 1rem;
    font-size: .84rem;
    font-weight: 700;
    color: var(--c);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.cinfo .ci-go i {
    transition: transform .3s cubic-bezier(.34, 1.1, .5, 1);
}

.cinfo:hover .ci-go i {
    transform: translateX(4px);
}

.cinfo.c-amber {
    --c: var(--amber-d);
}

.cinfo.c-wa {
    --c: var(--wa);
}

.cinfo.c-orange {
    --c: var(--orange);
}

.cinfo.c-magenta {
    --c: var(--magenta);
}

@media (max-width: 575.98px) {
    .cinfo {
        padding: 22px 20px 20px;
    }
}

/* ---- Read-only field (auto-filled product on the enquiry form) ------- */
.form-control.is-locked {
    background: var(--ivory);
    color: var(--ink);
    font-weight: 600;
    cursor: default;
}

.form-control.is-locked:focus {
    border-color: var(--line);
    box-shadow: none;
}


@media (max-width: 575.98px) {
    .qc {
        left: 14px;
        bottom: 18px;
    }

    .qc-l-txt {
        display: none;
    }

    .qc-launcher {
        padding: .55rem;
        border-radius: 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qc-panel {
        animation: none;
    }
}

/* =====================================================================
   BLOG ARTICLE
   ===================================================================== */
.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.3rem;
    margin-top: 1.1rem;
    font-size: .87rem;
    color: #cfc9c2;
}

.article-meta .am-topic {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 100px;
    padding: .2rem .8rem;
    font-weight: 700;
    font-size: .76rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--amber);
}

.article-meta i {
    color: var(--amber);
    margin-right: .35rem;
}

.article {
    max-width: 72ch;
}

.article>p {
    margin-bottom: 1.15rem;
}

.article h2 {
    font-size: clamp(1.5rem, 2.4vw, 1.95rem);
    margin: 2.8rem 0 .9rem;
    scroll-margin-top: 130px;
}

.article h3 {
    font-size: 1.22rem;
    margin: 2.2rem 0 .7rem;
    scroll-margin-top: 130px;
}

.article ul,
.article ol {
    margin: 0 0 1.3rem;
    padding-left: 1.15rem;
}

.article li {
    margin-bottom: .6rem;
    color: var(--ink-2);
}

.article li::marker {
    color: var(--orange);
}

.article li strong {
    color: var(--ink);
}

.article a {
    color: var(--orange);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.article a:hover {
    color: var(--crimson);
}

/* key takeaways */
.takeaways {
    background: var(--ivory);
    border: 1px solid var(--line);
    border-left: 3px solid var(--amber);
    border-radius: var(--r-md);
    padding: 22px 24px;
    margin-bottom: 2rem;
}

.takeaways h2 {
    font-size: .78rem !important;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--muted);
    margin: 0 0 .9rem !important;
}

.takeaways ul {
    margin: 0;
    padding-left: 1.05rem;
}

.takeaways li {
    font-size: .93rem;
    margin-bottom: .5rem;
}

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

/* inline call-out to a product page */
.article-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 20px 24px;
    margin: 2.2rem 0;
}

.article-cta p {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
    max-width: 46ch;
}

.article-share {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-size: .88rem;
    color: var(--muted);
}

.article-share a {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    color: var(--ink);
    transition: all .25s ease;
}

.article-share a:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
    transform: translateY(-2px);
}


@media (prefers-reduced-motion: reduce) {
    .qc-wa-panel {
        animation: none;
    }
}

/* =====================================================================
   QUICK CONNECT — original widget CSS, ported verbatim.
   Only --ti-primary / --ti-dark are retargeted to the brand palette,
   so the button and popup design is unchanged from the original.
   ===================================================================== */
/* ---------- Theme tokens ---------- */
:root {
    --ti-primary: #f16236;
    /* Himalaya orange */
    --ti-dark: #363435;
    /* Himalaya charcoal */
}

/* ---------- Floating Action Buttons (stack) ---------- */
.cn-cb-fab-stack {
    position: fixed;
    bottom: 28px;
    left: 28px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
}

.cn-cb-fab {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ti-primary) 0%, var(--ti-dark) 100%);
    border: 2px solid rgba(255, 255, 255, 0.85);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(241, 98, 54, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cn-cb-fab--wa {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
}

.cn-cb-fab--wa:hover {
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5), 0 4px 10px rgba(0, 0, 0, 0.15);
}

.cn-cb-fab--wa .cn-cb-fab-pulse {
    background: #25D366;
}

.cn-cb-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 30px rgba(241, 98, 54, 0.5), 0 4px 10px rgba(0, 0, 0, 0.15);
}

.cn-cb-fab:active {
    transform: scale(0.96);
}

.cn-cb-fab svg {
    width: 26px;
    height: 26px;
    position: relative;
    z-index: 2;
}

/* Re-assert fill — global path{fill:none} (navslider.css) strips FAB icons */
.cn-cb-fab svg path {
    fill: #fff;
}

/* Tooltip label on hover */
.cn-cb-fab[data-label]::before {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    background: #0f172a;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 7px 12px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.cn-cb-fab[data-label]::after {
    content: '';
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    border: 6px solid transparent;
    border-right-color: #0f172a;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cn-cb-fab[data-label]:hover::before,
.cn-cb-fab[data-label]:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.cn-cb-fab-pulse {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: var(--ti-primary);
    opacity: 0.45;
    animation: cnCbPulse 2.4s ease-out infinite;
    z-index: 0;
}

.cn-cb-fab--wa .cn-cb-fab-pulse {
    animation-delay: 1.2s;
}

@keyframes cnCbPulse {
    0% {
        transform: scale(1);
        opacity: 0.45;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

/* ---------- Overlay ---------- */
.cn-cb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
    animation: cnCbFadeIn 0.25s ease forwards;
}

.cn-cb-overlay[hidden] {
    display: none;
}

@keyframes cnCbFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ---------- Modal Container ---------- */
.cn-cb-modal {
    background: #0f172a;
    border-radius: 16px;
    width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    max-width: 460px;
    margin: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #f1f5f9;
    animation: cnCbSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    background-image:
        radial-gradient(circle at 20% 0%, rgba(241, 98, 54, 0.18) 0%, transparent 45%),
        radial-gradient(circle at 80% 100%, rgba(54, 52, 53, 0.25) 0%, transparent 45%);
    flex-shrink: 0;
}

@keyframes cnCbSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }

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

/* Custom scrollbar inside modal */
.cn-cb-modal {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.cn-cb-modal::-webkit-scrollbar {
    width: 6px;
}

.cn-cb-modal::-webkit-scrollbar-track {
    background: transparent;
}

.cn-cb-modal::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.cn-cb-modal::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0;
}

/* ---------- Close button ---------- */
.cn-cb-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    z-index: 10;
}

.cn-cb-close:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* ---------- Tabs ---------- */
.cn-cb-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 52px 18px 0;
}

.cn-cb-tab {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 9px 6px;
    cursor: pointer;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    transition: color 0.2s, background 0.2s;
    text-align: center;
    line-height: 1.2;
}

.cn-cb-tab svg {
    transition: transform 0.2s;
}

.cn-cb-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}

.cn-cb-tab.is-active {
    color: #f16236;
    background: rgba(241, 98, 54, 0.18);
}

.cn-cb-tab.is-active svg {
    transform: translateY(-2px);
}

/* ---------- Header ---------- */
.cn-cb-header {
    padding: 14px 24px 10px;
    text-align: center;
}

.cn-cb-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.cn-cb-brand-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--ti-primary), var(--ti-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(241, 98, 54, 0.35);
}

.cn-cb-brand-name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: #fff;
}

.cn-cb-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.3px;
    color: #fff;
}

/* ---------- Body ---------- */
.cn-cb-body {
    padding: 4px 24px 18px;
    position: relative;
}

.cn-cb-pane {
    display: none;
}

.cn-cb-pane.is-active {
    display: block;
    animation: cnCbPaneIn 0.3s ease forwards;
}

@keyframes cnCbPaneIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

/* ---------- Form fields ---------- */
.cn-cb-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #94a3b8;
    margin: 8px 0 4px;
}

.cn-cb-input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.2s, background 0.2s;
    outline: none;
    box-sizing: border-box;
}

.cn-cb-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.cn-cb-input:focus {
    border-color: #f16236;
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 0 0 3px rgba(241, 98, 54, 0.18);
}

.cn-cb-input.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

.cn-cb-input option {
    background: #1e293b;
    color: #f1f5f9;
}

.cn-cb-textarea {
    resize: vertical;
    min-height: 88px;
    font-family: inherit;
}

.cn-cb-input[type="date"],
.cn-cb-input[type="time"] {
    color-scheme: dark;
}

/* Phone */
.cn-cb-phone-wrap {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px;
}

.cn-cb-cc {
    padding: 13px 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}

.cn-cb-cc:focus {
    border-color: #f16236;
}

.cn-cb-cc option {
    background: #1e293b;
    color: #fff;
}

/* Two-column row */
.cn-cb-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ---------- Submit ---------- */
.cn-cb-submit {
    width: 100%;
    margin-top: 14px;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--ti-primary) 0%, var(--ti-dark) 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
    box-shadow: 0 6px 18px rgba(241, 98, 54, 0.3);
    letter-spacing: 0.2px;
}

.cn-cb-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(241, 98, 54, 0.45);
}

.cn-cb-submit:active:not(:disabled) {
    transform: translateY(0);
}

.cn-cb-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ---------- Cookie / privacy consent ---------- */
.cn-cb-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #94a3b8;
    cursor: pointer;
}

.cn-cb-consent input {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: #f16236;
    flex-shrink: 0;
    cursor: pointer;
}

.cn-cb-consent a {
    color: #f16236;
    text-decoration: none;
}

.cn-cb-consent a:hover {
    text-decoration: underline;
}

.cn-cb-consent.is-invalid span {
    color: #fecaca;
}

.cn-cb-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cnCbSpin 0.7s linear infinite;
    display: inline-block;
}

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

/* ---------- Fine print ---------- */
.cn-cb-fineprint {
    font-size: 11.5px;
    color: #94a3b8;
    text-align: center;
    margin: 10px 0 0;
    line-height: 1.5;
}

.cn-cb-fineprint a {
    color: #f16236;
    text-decoration: none;
}

.cn-cb-fineprint a:hover {
    text-decoration: underline;
}

/* ---------- Success state ---------- */
.cn-cb-success {
    text-align: center;
    padding: 32px 16px;
    animation: cnCbPaneIn 0.4s ease;
}

.cn-cb-success-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.15);
    border: 2px solid rgba(16, 185, 129, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cnCbPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cn-cb-success-icon svg {
    stroke: #10b981;
}

@keyframes cnCbPop {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

.cn-cb-success h3 {
    margin: 0 0 8px;
    font-size: 22px;
    color: #fff;
}

.cn-cb-success-msg {
    margin: 0;
    color: #94a3b8;
    font-size: 14.5px;
    line-height: 1.55;
}

/* ---------- Error banner ---------- */
.cn-cb-error-banner {
    margin-top: 16px;
    padding: 12px 14px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 10px;
    color: #fecaca;
    font-size: 13.5px;
    text-align: center;
}

/* ---------- Footer ---------- */
.cn-cb-footer {
    padding: 10px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.cn-cb-footer strong {
    color: #fff;
    font-weight: 600;
}

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
    .cn-cb-fab-stack {
        bottom: 12px;
        right: 12px;
        left: 12px;
        gap: 10px;
        flex-direction: row;
        align-items: stretch;
        justify-content: stretch;
    }

    .cn-cb-fab {
        flex: 1 1 50%;
        width: auto;
        height: 46px;
        border-radius: 999px;
        border: 1.5px solid rgba(255, 255, 255, 0.25);
        gap: 8px;
        padding: 0 12px;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .cn-cb-fab:active {
        transform: scale(0.97);
    }

    .cn-cb-fab:hover {
        transform: none;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12);
    }

    .cn-cb-fab svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .cn-cb-fab[data-label]::before {
        position: static;
        transform: none;
        background: transparent;
        box-shadow: none;
        padding: 0;
        opacity: 1;
        color: #fff;
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: 0.2px;
    }

    #cnCbFab[data-label]::before {
        content: 'Call Us';
    }

    #cnCbWaFab[data-label]::before {
        content: 'WhatsApp';
    }

    .cn-cb-fab[data-label]::after {
        display: none;
    }

    .cn-cb-fab-pulse {
        display: none;
    }

    .cn-cb-modal {
        max-width: 100%;
    }

    .cn-cb-tab span {
        font-size: 11px;
    }

    .cn-cb-title {
        font-size: 18px;
    }

    .cn-cb-header {
        padding: 20px 20px 12px;
    }

    .cn-cb-body {
        padding: 6px 20px 20px;
    }

    .cn-cb-phone-wrap {
        grid-template-columns: 100px 1fr;
    }

    .footer__copyright {
        padding-bottom: 60px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .cn-cb-fab-pulse,
    .cn-cb-modal,
    .cn-cb-overlay,
    .cn-cb-pane,
    .cn-cb-success-icon,
    .cn-cb-spinner {
        animation: none !important;
    }
}

/* ---- Quick Connect: real logo in the modal header (replaces plain text) --- */
.cn-cb-brand-logo {
    height: 64px;
    width: auto;
    display: block;
}

@media (max-width: 480px) {
    .cn-cb-brand-logo {
        height: 48px;
    }
}

/* =====================================================================
   ARTICLE LAYOUT — reading column + contents rail
   ===================================================================== */

/* Long post titles need a wider, slightly smaller H1 than a product page,
   or a 60-character headline stacks four lines deep. */
.page-head.is-article h1 {
    font-size: clamp(1.85rem, 3.4vw, 2.7rem);
    max-width: 30ch;
}

/* Sizing the columns to the content removes the dead space that a capped
   .article inside a wide Bootstrap column was creating. */
.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 56px;
    align-items: stretch;
    max-width: 1180px;
    margin-inline: auto;
}

.article-layout .article {
    max-width: none;
}

/* the reading column is wider now, so give the type a little more size and
   leading to keep the line comfortable to track */
.article-layout .article {
    font-size: 1.06rem;
    line-height: 1.75;
}

.article-layout .article h3 {
    font-size: 1.28rem;
}

/* ---- contents rail ---- */
.article-toc {
    position: sticky;
    top: 128px;
    padding-left: 18px;
    border-left: 2px solid var(--line);
}

.article-toc h2 {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--muted);
    margin: 0 0 1rem;
    font-weight: 700;
}

.article-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: toc;
}

.article-toc li {
    counter-increment: toc;
    margin: 0;
}

.article-toc a {
    display: flex;
    gap: .6rem;
    padding: .42rem 0 .42rem 14px;
    margin-left: -20px;
    border-left: 2px solid transparent;
    font-size: .92rem;
    line-height: 1.45;
    color: var(--muted);
    font-weight: 500;
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease;
}

.article-toc a::before {
    content: counter(toc);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--line-2, #d3c8b3);
    flex: none;
    transition: color .2s ease;
}

.article-toc a:hover {
    color: var(--ink);
}

.article-toc a:hover::before {
    color: var(--orange);
}

.article-toc a.is-current {
    color: var(--ink);
    font-weight: 700;
    border-left-color: var(--orange);
}

.article-toc a.is-current::before {
    color: var(--orange);
}

@media (max-width: 991.98px) {
    .article-layout {
        grid-template-columns: 1fr;
        gap: 32px;
        max-width: 760px;
    }

    .article-toc {
        position: static;
        padding: 18px 20px;
        border-left: 0;
        background: var(--ivory);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
    }

    .article-toc a {
        margin-left: 0;
        padding-left: 10px;
    }
}

/* ---- related articles grid ---- */
.post-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: transform .35s cubic-bezier(.34, 1.1, .5, 1), box-shadow .35s ease, border-color .3s ease;
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-sm);
    border-color: var(--line-2, #d9cfba);
}

.post-card .pc-media {
    aspect-ratio: 16/10;
    overflow: hidden;
    display: grid;
    place-items: center;
}

.post-card .pc-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

/* transparent cut-outs float on the tint instead of filling it */
.post-card:hover .pc-media img {
    transform: scale(1.05);
}

.post-card .pc-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.post-card .pc-topic {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: .45rem;
}

.post-card h3 {
    font-size: 1.02rem;
    line-height: 1.32;
    margin: 0 0 .5rem;
}

.post-card h3 a {
    color: var(--ink);
}

.post-card h3 a:hover {
    color: var(--orange);
}

.post-card .pc-meta {
    margin-top: auto;
    padding-top: .8rem;
    font-size: .8rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ---- Article featured image ----------------------------------------- */
.article-hero {
    margin: 0 0 1.8rem;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--cream);
}

.article-hero img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- Blog listing: let the image keep its own aspect ratio ----------- */
/* The product grid crops to 1:1, which suits square studio shots but slices
   the top and bottom off a 16:9 blog image. This lets the image set its own
   height, so any future image at a different ratio is also shown uncropped. */
.promo .p-media.is-natural {
    aspect-ratio: auto;
    display: block;
}

.promo .p-media.is-natural img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* post cards can also carry a natural-ratio image */
.post-card .pc-media.is-natural {
    aspect-ratio: auto;
    display: block;
}

.post-card .pc-media.is-natural img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ---- Product stage holding a finished image (background included) ----- */
/* The default stage pads and contains, which suits a transparent cut-out.
   Images that already have their own designed background must fill the panel
   instead, or the panel's tint frames them and reads as a box inside a box. */
.prod-stage .ps-panel.is-photo {
    padding: 0;
    overflow: hidden;
}

.prod-stage .ps-panel.is-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;
}

/* =====================================================================
   HEADER — centred nav, action button, 3-column products mega menu
   ===================================================================== */
.site-head .nav-actions {
    flex: 0 0 auto;
    margin-left: auto;
}

@media (min-width: 992px) {
    .site-head .navbar-collapse {
        display: flex;
        align-items: center;
    }

    /* keep the centred nav truly centred rather than offset by the button */
    .site-head .navbar-nav.mx-auto {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ---- mega menu ---- */
.site-head .mega-menu {
    padding: 22px 24px 16px;
    min-width: 0;
    width: min(860px, calc(100vw - 48px));
}

/* Popper is disabled on this one (data-bs-display="static"), so we position it
   ourselves — centred under the Products link instead of hanging off one edge. */
@media (min-width: 992px) {
    .site-head .nav-item.dropdown:has(.mega-menu) {
        position: static;
    }

    .site-head .mega-menu {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        /* The shared ddIn keyframes animate transform to `none`, which wipes out
           the translateX(-50%) above for the length of the animation — the panel
           opens off-centre and then snaps across. This variant keeps the centring
           inside every keyframe so it never moves horizontally. */
        animation-name: ddInMega;
    }

    @keyframes ddInMega {
        from {
            opacity: 0;
            transform: translate(-50%, 8px);
        }

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

.site-head .mega-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 22px;
}

.site-head .mega-col>ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-head .mega-head {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0 .65rem .5rem;
    margin-bottom: .2rem;
    border-bottom: 1px solid var(--line);
}

.site-head .mega-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--line);
    font-weight: 700;
    font-size: .9rem;
    color: var(--orange);
}

.site-head .mega-foot i {
    transition: transform .25s cubic-bezier(.34, 1.1, .5, 1);
}

.site-head .mega-foot:hover i {
    transform: translateX(4px);
}

/* ---- mobile: single column, no fixed width, button full width ---- */
@media (max-width: 991.98px) {
    .site-head .mega-menu {
        width: 100%;
        padding: 14px 10px 10px;
    }

    .site-head .mega-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .site-head .mega-head {
        margin-top: .6rem;
    }

    .site-head .nav-actions {
        margin: .6rem 0 .3rem;
    }

    .site-head .nav-actions .btn {
        width: 100%;
    }
}

/* =====================================================================
   WHOLE-CARD CLICK TARGETS
   The primary link in a product/blog card carries Bootstrap's
   .stretched-link, so the entire card is clickable. That needs the card
   itself to be the positioned ancestor, and any other control inside it
   (e.g. "Ask for Price") lifted above the invisible overlay.
   ===================================================================== */
.promo,
.post-card {
    position: relative;
}

.promo .btn:not(.stretched-link),
.post-card .btn:not(.stretched-link) {
    position: relative;
    z-index: 2;
}

/* the pointer should read as clickable anywhere on the card */
.promo:has(.stretched-link),
.post-card:has(.stretched-link) {
    cursor: pointer;
}

/* the title still gets its own hover colour even though the overlay is on top */
.promo:hover .p-body h3 a,
.post-card:hover .pc-body h3 a {
    color: var(--orange);
}

/* the card title carries the stretched link, so it must not look like a link */
.promo .p-body h4 a,
.promo .p-body h3 a,
.post-card .pc-body h3 a {
    color: inherit;
    text-decoration: none;
}

/* ---- Inline form feedback ------------------------------------------- */
.form-status {
    display: none;
    border-radius: var(--r-sm);
    padding: .7rem .9rem;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.45;
}

.form-status.is-busy,
.form-status.is-ok,
.form-status.is-error {
    display: block;
}

.form-status.is-busy {
    background: var(--ivory);
    border: 1px solid var(--line);
    color: var(--ink-2);
}

.form-status.is-ok {
    background: #eef3e9;
    border: 1px solid #b9cfa6;
    color: #3f5b2c;
}

.form-status.is-error {
    background: #fbeaec;
    border: 1px solid #eab6bd;
    color: #8f2230;
}

/* the widget sits on a dark panel, so it needs its own tones */
.cn-cb-form .form-status {
    margin-top: 14px;
}

.cn-cb-form .form-status.is-busy {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .16);
    color: #cfd6e4;
}

.cn-cb-form .form-status.is-ok {
    background: rgba(16, 185, 129, .14);
    border-color: rgba(16, 185, 129, .4);
    color: #8ff0c8;
}

.cn-cb-form .form-status.is-error {
    background: rgba(239, 68, 68, .14);
    border-color: rgba(239, 68, 68, .4);
    color: #fecaca;
}

/* ============================================================
   International phone input (intl-tel-input v17)
   ============================================================
   The plugin wraps every <input type="tel"> in a .iti div at runtime. v17
   ships that wrapper as `display:inline-block`, so the Bootstrap label — also
   inline-block — lands on the same line as the field and the field shrinks to
   its content. Forcing the wrapper back to a block-level, full-width element
   restores the same layout every other control uses. */
.iti {
    display: block;
    width: 100%;
}

.iti input[type="tel"] {
    width: 100%;
    padding-left: 52px;
}

/* The wrapper also breaks Bootstrap's `.form-control ~ .invalid-feedback`
   sibling match, so the validation message never shows. Re-establish it
   through the wrapper. */
.was-validated .iti:has(input:invalid)~.invalid-feedback {
    display: block;
}

/* Keep the flag button and its country list above adjacent form controls,
   and above the quote modal / quick-connect overlay panels. */
.iti__flag-container {
    z-index: 3;
}

.iti__country-list {
    z-index: 5;
}