/* ===========================================================================
 * Cubicle Tracks — premium B2B corporate redesign
 *
 * Design tokens: deep navy + steel grey + crisp white, with a single
 * confident red accent for primary CTAs. Sharper typography, more
 * whitespace, fewer decorative effects. Layered on top of Flatsome.
 * ======================================================================= */
:root {
        --ct-navy:        #0b2545;
        --ct-navy-dark:   #061731;
        --ct-navy-soft:   #173763;
        --ct-steel:       #3a506b;
        --ct-mist:        #f4f6fb;
        --ct-line:        #dde3ee;
        --ct-line-strong: #c9d2e1;
        --ct-ink:         #16213a;
        --ct-mute:        #5d6779;
        --ct-accent:      #c8102e;
        --ct-accent-dark: #99081f;
        --ct-success:     #146c43;
}

/* ---- Typography -------------------------------------------------------- */
body {
        color: var(--ct-ink);
        font-feature-settings: "ss01", "ss02", "kern", "liga";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        line-height: 1.6;
}
h1, h2, h3, h4, h5, h6, .heading-font {
        color: var(--ct-navy);
        letter-spacing: -0.01em;
        font-weight: 700;
}
h1 { line-height: 1.15; }
h2 { line-height: 1.2;  }
.uppercase, .nav > li > a {
        letter-spacing: 0.04em;
}
p { color: var(--ct-ink); }
a { color: var(--ct-navy-soft); }
a:hover { color: var(--ct-accent); }

/* ---- Header retheme ---------------------------------------------------- */
.header-main {
        border-bottom: 1px solid var(--ct-line);
        box-shadow: 0 1px 0 rgba(11,37,69,0.02);
}
/* `.header-bottom` (the #wide-nav strip) is repurposed by inc/site-design.php
   as the second-row container for the main menu. Pre-hydration the source
   menu column is hidden so first paint already has the final layout — no
   header jump when the footer JS finishes the DOM moves. */
.header-bottom { display: none; }

/* Source slots in the white header-main row — hidden both during relocation
   and after, so there's no flash of unstyled content. */
html.ct-menu-relocating .header-main .flex-col.hide-for-medium.flex-left.flex-grow,
html.ct-menu-relocated  .header-main .flex-col.hide-for-medium.flex-left.flex-grow {
        display: none !important;
}
html.ct-menu-relocating .header-top a[href^="tel:"],
html.ct-menu-relocating .header-top a[href^="tel:"] ~ * { /* prevent the dark-bar phone briefly flashing */ }
html.ct-menu-relocating .header-top li.html_topbar_right { visibility: hidden; }

/* The styled second row only shows once the menu has actually been moved into it. */
html.ct-menu-relocated .header-bottom {
        display: block !important;
        background: #f5f7fb;
        border-top: 1px solid var(--ct-line);
        border-bottom: 3px solid var(--ct-accent);
}
html.ct-menu-relocated #wide-nav .container { padding: 0 15px; }
html.ct-menu-relocated #wide-nav .ct-wide-menu-holder { width: 100%; }
html.ct-menu-relocated #wide-nav ul.nav {
        flex-wrap: nowrap !important;
        justify-content: center;
        width: 100%;
        margin: 0 !important;
}
html.ct-menu-relocated #wide-nav ul.nav > li > a {
        padding: 14px 16px !important;
        font-size: 13.5px !important;
        letter-spacing: 0.02em;
        font-weight: 700;
        color: var(--ct-navy) !important;
        white-space: nowrap;
}
html.ct-menu-relocated #wide-nav ul.nav > li > a:hover,
html.ct-menu-relocated #wide-nav ul.nav > li.current-menu-item > a {
        color: var(--ct-accent) !important;
}
html.ct-menu-relocated #wide-nav ul.nav.nav-divided > li + li::before {
        border-color: var(--ct-line);
        height: 14px;
        align-self: center;
}

/* phone number relocated next to the logo in the white area */
.ct-header-phone {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-right: 22px;
        font-weight: 700;
        color: var(--ct-navy);
        font-size: 16px;
        line-height: 1.1;
}
.ct-header-phone a { color: var(--ct-navy) !important; text-decoration: none; }
.ct-header-phone a:hover { color: var(--ct-accent) !important; }
.ct-header-phone p { margin: 0; }
.ct-header-phone img { max-height: 22px; width: auto; }
.header-top {
        background: var(--ct-navy) !important;
        color: #e5ecf6;
        border-bottom: none !important;
}
.header-top a,
.header-top .nav > li > a,
.header-top .nav > li > a:hover {
        color: #ffffff;
}
.header-top .html_topbar_left,
.header-top .html_topbar_right {
        font-size: 13px;
        letter-spacing: 0.02em;
}
.nav-dropdown,
.nav > li > a {
        font-weight: 600;
}
.nav > li > a:hover { color: var(--ct-accent); }

/* logo: cap the height so it sits cleanly */
#logo img { max-height: 56px; width: auto; }

/* Below ~1200px hide the LOGIN text label so the phone fits comfortably */
@media (max-width: 1199px) {
        .account-item .account-login-text,
        li.account-item > a > span { display: none !important; }
}

/* ---- Buttons ----------------------------------------------------------- */
.button,
button,
input[type="submit"],
.button.primary {
        border-radius: 4px !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em;
        text-transform: none !important;
        transition: background .15s ease, transform .05s ease;
        box-shadow: none !important;
}
.button.primary,
button.primary,
input[type="submit"] {
        background: var(--ct-navy) !important;
        border-color: var(--ct-navy) !important;
}
.button.primary:hover,
button.primary:hover,
input[type="submit"]:hover {
        background: var(--ct-navy-dark) !important;
        border-color: var(--ct-navy-dark) !important;
}
.button.alert,
.button.success {
        background: var(--ct-accent) !important;
        border-color: var(--ct-accent) !important;
}
.button.alert:hover,
.button.success:hover {
        background: var(--ct-accent-dark) !important;
        border-color: var(--ct-accent-dark) !important;
}
.button.secondary,
.button.is-outline {
        background: transparent !important;
        color: var(--ct-navy) !important;
        border: 1px solid var(--ct-line-strong) !important;
}
.button.secondary:hover,
.button.is-outline:hover {
        background: var(--ct-navy) !important;
        color: #fff !important;
        border-color: var(--ct-navy) !important;
}
.button.larger, .button.large { padding: 0 26px; height: 48px; line-height: 48px; }

/* ---- Site-wide USP strip (rendered by inc/site-design.php) ------------- */
.ct-usp-strip {
        position: relative;
        z-index: 11;
        background: var(--ct-navy);
        color: #e8eef8;
        border-top: 1px solid var(--ct-navy-dark);
        border-bottom: 3px solid var(--ct-accent);
}

/* Belt-and-braces in case any page still uses a transparent header
 * template: flatten the header so the USP strip stays visible below it. */
.header.has-transparent,
.header.has-transparent .header-wrapper { position: static !important; }
.header.has-transparent .header-main { background-color: #ffffff !important; }
.ct-usp-inner {
        max-width: 1240px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        padding: 0 20px;
}
.ct-usp {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 18px;
        border-right: 1px solid rgba(255,255,255,0.07);
}
.ct-usp:last-child { border-right: none; }
.ct-usp svg {
        width: 28px; height: 28px;
        flex: 0 0 28px;
        color: #ffffff;
        opacity: 0.95;
}
.ct-usp strong {
        display: block;
        color: #ffffff;
        font-size: 14px;
        letter-spacing: 0.01em;
        line-height: 1.2;
}
.ct-usp span {
        display: block;
        color: #b8c6dd;
        font-size: 12px;
        line-height: 1.3;
        margin-top: 2px;
}
@media (max-width: 850px) {
        .ct-usp-inner { grid-template-columns: repeat(2, 1fr); }
        .ct-usp:nth-child(2) { border-right: none; }
}
@media (max-width: 480px) {
        .ct-usp-inner { grid-template-columns: 1fr; }
        .ct-usp { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
        .ct-usp:last-child { border-bottom: none; }
}

/* ---- Page banners ------------------------------------------------------ */
.page-title {
        background: var(--ct-mist) !important;
        border-bottom: 1px solid var(--ct-line);
}
.page-title .page-title-inner {
        min-height: 0;
        padding: 28px 0;
}
.page-title h1 { color: var(--ct-navy); font-size: 28px; margin: 0; }
.page-title .is-small { color: var(--ct-mute); }

/* ---- Section helpers --------------------------------------------------- */
.section-alt { background: var(--ct-mist); }
.section-navy { background: var(--ct-navy); color: #e5ecf6; }
.section-navy h1, .section-navy h2, .section-navy h3 { color: #ffffff; }
.section-navy a { color: #ffffff; text-decoration: underline; }

/* ---- Product cards (shop archive) ------------------------------------- */
.product-small.box {
        border: 1px solid var(--ct-line);
        border-radius: 6px;
        background: #ffffff;
        overflow: hidden;
        transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.product-small.box:hover {
        border-color: var(--ct-line-strong);
        box-shadow: 0 6px 20px rgba(11,37,69,0.08);
        transform: translateY(-2px);
}
.product-small .box-text {
        padding: 14px 14px 16px;
        border-top: 1px solid var(--ct-line);
        background: #fff;
}
.product-small .name { font-weight: 600; color: var(--ct-navy); }
.product-small .price { color: var(--ct-ink); font-weight: 700; }
.product-small .price del { color: var(--ct-mute); }

/* ---- Single product polish ------------------------------------------- */
.product-page-title { color: var(--ct-navy); }
.product-info .price { color: var(--ct-navy); }
.product-info .price .woocommerce-Price-amount { font-weight: 700; }

/* Trust strip under price/configurator on the product page */
.ct-product-trust {
        list-style: none;
        margin: 18px 0 4px;
        padding: 14px 16px;
        border: 1px solid var(--ct-line);
        border-left: 4px solid var(--ct-navy);
        background: var(--ct-mist);
        border-radius: 4px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 18px;
}
.ct-product-trust li {
        font-size: 14px;
        color: var(--ct-ink);
        line-height: 1.4;
        padding-left: 22px;
        position: relative;
}
.ct-product-trust li::before {
        content: "";
        position: absolute;
        left: 0; top: 4px;
        width: 14px; height: 14px;
        border-radius: 50%;
        background: var(--ct-success);
        box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px var(--ct-success);
}
.ct-product-trust li strong { color: var(--ct-navy); }
@media (max-width: 600px) {
        .ct-product-trust { grid-template-columns: 1fr; }
}

/* Spec table on product description */
.ct-spec-table {
        display: block;
        overflow-x: auto;
        width: 100%;
        border-collapse: collapse;
        margin: 8px 0 24px;
        font-size: 15px;
        background: #fff;
        border: 1px solid var(--ct-line);
}
.ct-spec-table th,
.ct-spec-table td {
        padding: 12px 16px;
        border-bottom: 1px solid var(--ct-line);
        text-align: left;
        vertical-align: top;
}
.ct-spec-table th {
        background: var(--ct-mist);
        color: var(--ct-navy);
        font-weight: 600;
        width: 38%;
}
.ct-spec-table tr:last-child th,
.ct-spec-table tr:last-child td { border-bottom: none; }

/* Benefit grid on product description */
.ct-benefit-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin: 18px 0 28px;
}
.ct-benefit {
        background: #fff;
        border: 1px solid var(--ct-line);
        border-radius: 6px;
        padding: 18px 18px 16px;
}
.ct-benefit h4 {
        color: var(--ct-navy);
        margin: 0 0 8px;
        font-size: 16px;
}
.ct-benefit p {
        margin: 0;
        font-size: 14px;
        color: var(--ct-mute);
        line-height: 1.5;
}
@media (max-width: 720px) {
        .ct-benefit-grid { grid-template-columns: 1fr; }
}

/* Tabs polish */
.woocommerce-tabs .tabbed > .nav > li > a {
        color: var(--ct-mute);
        font-weight: 600;
        border-bottom: 2px solid transparent;
}
.woocommerce-tabs .tabbed > .nav > li.active > a {
        color: var(--ct-navy);
        border-bottom-color: var(--ct-navy);
}

/* ---- Footer ----------------------------------------------------------- */
.footer-wrapper {
        background: var(--ct-navy) !important;
        color: #b8c6dd;
}
.footer-wrapper h3,
.footer-wrapper h4,
.footer-wrapper .widget-title { color: #fff !important; }
.footer-wrapper a { color: #d4def0; }
.footer-wrapper a:hover { color: #ffffff; }
.absolute-footer {
        background: var(--ct-navy-dark) !important;
        color: #94a3bd !important;
        border-top: 1px solid rgba(255,255,255,0.04);
}
.absolute-footer a { color: #d4def0; }

/* ---- Generic content polish ------------------------------------------ */
blockquote {
        border-left: 3px solid var(--ct-navy);
        background: var(--ct-mist);
        color: var(--ct-ink);
        padding: 14px 18px;
        font-style: normal;
        border-radius: 0 4px 4px 0;
}
.divider, hr { border-color: var(--ct-line) !important; }

/* Featured boxes (used on homepage "Why choose us") */
.featured-box .feature-img img,
.featured-box .icon-box-img svg { color: var(--ct-navy); }
.featured-box h3 { color: var(--ct-navy); font-size: 17px; }
.featured-box p { color: var(--ct-mute); font-size: 14px; }
.featured-box.icon-border .feature-img,
.featured-box .icon-box-img {
        border-color: var(--ct-line-strong) !important;
        color: var(--ct-navy);
}

/* Hero banner refresh */
.banner h1, .banner h2 { color: #ffffff; }
.banner .lead { color: rgba(255,255,255,0.92); }

/* Cards used on home/about */
.ct-card {
        background: #fff;
        border: 1px solid var(--ct-line);
        border-radius: 8px;
        padding: 28px 26px;
        height: 100%;
}
.ct-card h3 { margin-top: 0; color: var(--ct-navy); }
.ct-card .num {
        display: inline-block;
        font-size: 12px;
        letter-spacing: 0.12em;
        color: var(--ct-accent);
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 6px;
}

/* Tighten WooCommerce message banners */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
        border-radius: 4px;
        border-left-width: 4px;
}

/* Cart + checkout panel polish */
.cart-wrapper, .shop-table-container {
        border: 1px solid var(--ct-line);
        border-radius: 6px;
        background: #fff;
}

/* ==========================================================================
   Home page CRO sections (rendered by inc/home-cro.php)
   ========================================================================== */

/* Hero pill — sits above the H1 inside the banner */
.ct-hero-pill {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        padding: 7px 14px;
        margin-bottom: 18px;
        max-width: 100%;
        background: rgba(255,255,255,0.12);
        backdrop-filter: blur(6px);
        border: 1px solid rgba(255,255,255,0.25);
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.02em;
        border-radius: 18px;
        line-height: 1.3;
}
.ct-hero-pill a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.ct-hero-pill-dot {
        width: 8px; height: 8px;
        background: #14d36b;
        border-radius: 50%;
        box-shadow: 0 0 0 3px rgba(20,211,107,0.25);
        flex: 0 0 auto;
}
/* Hero CTA subtitle */
a.button .ct-cta-sub,
.button .ct-cta-sub {
        display: block;
        font-size: 11px;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0.01em;
        opacity: 0.85;
        margin-top: 2px;
        line-height: 1.2;
}

/* Generic section shell */
.ct-section { padding: 64px 0; }
.ct-section-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.ct-eyebrow {
        display: inline-block;
        margin: 0 0 8px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ct-accent);
}
.ct-h2 {
        font-size: 30px;
        line-height: 1.2;
        color: var(--ct-navy);
        margin: 0 0 28px;
        font-weight: 700;
}

/* --- Clients / trust strip ----------------------------------------------- */
.ct-clients { background: #fff; padding-bottom: 32px; }
.ct-client-row {
        list-style: none;
        margin: 24px 0 18px;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 14px;
}
.ct-client-row li {
        background: #f5f7fb;
        border: 1px solid var(--ct-line);
        border-radius: 8px;
        padding: 14px 12px;
        text-align: center;
        display: flex; flex-direction: column; gap: 4px;
}
.ct-client-row strong { color: var(--ct-navy); font-size: 14px; }
.ct-client-row span { color: #5b6b7f; font-size: 12px; line-height: 1.3; }
.ct-clients-foot { color: #5b6b7f; font-size: 14px; margin: 0; }
.ct-clients-foot a { color: var(--ct-navy); text-decoration: underline; font-weight: 600; }

/* --- Stats band ---------------------------------------------------------- */
.ct-stats { background: var(--ct-navy); color: #fff; padding: 38px 0; }
.ct-stats-row {
        list-style: none;
        margin: 0; padding: 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        text-align: center;
}
.ct-stats-row li { padding: 6px 8px; }
.ct-stat-num {
        display: block;
        font-size: 36px;
        font-weight: 800;
        letter-spacing: -0.01em;
        color: #fff;
        line-height: 1;
        margin-bottom: 8px;
}
.ct-stat-lbl { display: block; font-size: 13px; color: #c8d3e2; letter-spacing: 0.02em; }

/* --- Testimonials -------------------------------------------------------- */
.ct-testimonials { background: #f8fafc; }
.ct-testimonial-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
        margin: 10px 0 24px;
}
.ct-testimonial {
        background: #fff;
        border: 1px solid var(--ct-line);
        border-radius: 10px;
        padding: 24px;
        margin: 0;
        display: flex; flex-direction: column; gap: 12px;
        box-shadow: 0 1px 0 rgba(11,37,69,0.03);
}
.ct-stars { color: #f5a623; font-size: 18px; letter-spacing: 2px; line-height: 1; }
.ct-testimonial blockquote {
        margin: 0; padding: 0;
        border: 0;
        font-size: 15px;
        line-height: 1.55;
        color: #1b2a3d;
        font-style: normal;
        quotes: none;
}
.ct-testimonial figcaption {
        font-size: 13px;
        font-weight: 700;
        color: var(--ct-navy);
        margin-top: auto;
        padding-top: 6px;
        border-top: 1px solid var(--ct-line);
}
.ct-testimonial figcaption span { display: block; font-weight: 500; color: #5b6b7f; }
.ct-testimonials-foot { margin: 0; color: #5b6b7f; font-size: 14px; }
.ct-testimonials-foot a { color: var(--ct-accent); font-weight: 700; text-decoration: underline; }

/* --- Mini case study ----------------------------------------------------- */
.ct-case { background: #fff; }
.ct-case-grid {
        display: grid;
        grid-template-columns: 1.6fr 1fr;
        gap: 40px;
        align-items: start;
}
.ct-case-copy p { color: #2a3a52; line-height: 1.6; }
.ct-case-points {
        list-style: none; padding: 0; margin: 18px 0;
}
.ct-case-points li {
        padding: 6px 0 6px 28px;
        position: relative;
        color: #1b2a3d;
}
.ct-case-points li::before {
        content: "\2713";
        position: absolute;
        left: 4px; top: 6px;
        color: var(--ct-accent);
        font-weight: 700;
}
.ct-case-side .ct-case-card {
        background: var(--ct-navy);
        color: #fff;
        padding: 24px;
        border-radius: 10px;
        border-top: 4px solid var(--ct-accent);
}
.ct-case-card strong {
        display: block;
        font-size: 16px;
        margin-bottom: 12px;
        letter-spacing: 0.02em;
}
.ct-case-card ul { list-style: none; margin: 0; padding: 0; }
.ct-case-card li {
        padding: 7px 0 7px 22px;
        position: relative;
        color: #d5dfee;
        font-size: 14px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ct-case-card li:last-child { border-bottom: 0; }
.ct-case-card li::before {
        content: "";
        position: absolute;
        left: 0; top: 14px;
        width: 8px; height: 8px;
        background: var(--ct-accent);
        border-radius: 50%;
}

/* --- FAQ accordion ------------------------------------------------------- */
.ct-faq { background: #f8fafc; }
.ct-faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.ct-faq details {
        background: #fff;
        border: 1px solid var(--ct-line);
        border-radius: 8px;
        padding: 0;
        overflow: hidden;
}
.ct-faq details[open] { border-color: var(--ct-navy); }
.ct-faq summary {
        list-style: none;
        cursor: pointer;
        padding: 16px 48px 16px 20px;
        font-weight: 700;
        color: var(--ct-navy);
        position: relative;
        font-size: 16px;
}
.ct-faq summary::-webkit-details-marker { display: none; }
.ct-faq summary::after {
        content: "+";
        position: absolute;
        right: 18px; top: 50%;
        transform: translateY(-50%);
        font-size: 22px;
        font-weight: 400;
        color: var(--ct-accent);
        line-height: 1;
}
.ct-faq details[open] summary::after { content: "\2212"; }
.ct-faq-a {
        padding: 0 20px 18px;
        color: #2a3a52;
        line-height: 1.6;
}
.ct-faq-a a { color: var(--ct-accent); text-decoration: underline; }

/* --- Spec-buyer block ---------------------------------------------------- */
.ct-spec { background: #fff; }
.ct-spec-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 40px;
        align-items: start;
}
.ct-spec-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
}
.ct-spec-list li {
        background: #f5f7fb;
        border: 1px solid var(--ct-line);
        border-left: 4px solid var(--ct-accent);
        border-radius: 6px;
        padding: 14px 16px;
        font-size: 14px;
        color: #2a3a52;
        line-height: 1.45;
}
.ct-spec-list strong { color: var(--ct-navy); display: block; font-size: 14px; margin-bottom: 2px; }

/* --- Responsive collapse ------------------------------------------------- */
@media (max-width: 900px) {
        .ct-section { padding: 48px 0; }
        .ct-h2 { font-size: 24px; }
        .ct-client-row { grid-template-columns: repeat(2, 1fr); }
        .ct-stats-row { grid-template-columns: repeat(2, 1fr); gap: 28px; }
        .ct-testimonial-row { grid-template-columns: 1fr; }
        .ct-case-grid,
        .ct-spec-grid { grid-template-columns: 1fr; }
        .ct-spec-list { grid-template-columns: 1fr; }
}

/* --- Reviews / Trustpilot card ------------------------------------------ */
.ct-reviews { background: #f8fafc; }
.ct-reviews-card {
        background: #fff;
        border: 1px solid var(--ct-line);
        border-radius: 12px;
        padding: 32px;
        text-align: center;
        max-width: 760px;
        margin: 0 auto;
        box-shadow: 0 1px 0 rgba(11,37,69,0.03);
}
.ct-reviews-card .ct-stars { font-size: 24px; margin-bottom: 14px; }
.ct-reviews-lead { font-size: 17px; color: #1b2a3d; line-height: 1.55; margin: 0 0 18px; }
.ct-reviews-lead strong { color: var(--ct-navy); }
.ct-reviews-foot { font-size: 13px; color: #5b6b7f; margin: 14px 0 0; line-height: 1.55; }

/* --- Accessibility: focus rings on new interactive elements ------------- */
.ct-faq summary:focus-visible,
.ct-reviews-card a:focus-visible,
.ct-hero-pill a:focus-visible {
        outline: 2px solid var(--ct-accent);
        outline-offset: 3px;
        border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
        .ct-hero-pill-dot { box-shadow: 0 0 0 3px rgba(20,211,107,0.25); animation: none; }
}

/* --- Mobile pill wrapping ----------------------------------------------- */
@media (max-width: 600px) {
        .ct-hero-pill { font-size: 12px; padding: 6px 12px; gap: 8px; }
        .ct-reviews-card { padding: 24px 18px; }
        .ct-reviews-lead { font-size: 15px; }
}

/* ==========================================================================
   Contact Form 7 — main enquiry form
   ========================================================================== */
.ct-cf7 { max-width: 760px; }
.ct-cf7 p { margin: 0 0 16px; }
.ct-cf7 label {
        display: block;
        font-weight: 600;
        color: var(--ct-navy);
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: 6px;
}
.ct-cf7 label span {
        color: #5b6b7f;
        font-weight: 400;
        font-size: 12px;
        margin-left: 4px;
}
.ct-cf7 input[type="text"],
.ct-cf7 input[type="email"],
.ct-cf7 input[type="tel"],
.ct-cf7 input[type="number"],
.ct-cf7 select,
.ct-cf7 textarea {
        width: 100%;
        height: auto;
        min-height: 48px;
        padding: 12px 14px;
        border: 1px solid var(--ct-line);
        border-radius: 6px;
        background: #fff;
        font-size: 15px;
        color: #1b2a3d;
        line-height: 1.4;
        box-shadow: none;
        box-sizing: border-box;
        transition: border-color .15s, box-shadow .15s;
}
.ct-cf7 select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding-right: 40px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231b2a3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 14px 14px;
}
.ct-cf7 textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.ct-cf7 .ct-cf7-2col { margin-bottom: 16px; }
.ct-cf7 input:focus,
.ct-cf7 select:focus,
.ct-cf7 textarea:focus {
        outline: none;
        border-color: var(--ct-accent);
        box-shadow: 0 0 0 3px rgba(178,0,0,0.12);
}
.ct-cf7 input[type="file"] {
        font-size: 13px;
        color: #5b6b7f;
}
.ct-cf7-2col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
}
.ct-cf7-2col p { margin-bottom: 0; }
.ct-cf7-consent {
        background: #f5f7fb;
        border: 1px solid var(--ct-line);
        border-left: 4px solid var(--ct-accent);
        padding: 12px 14px;
        border-radius: 6px;
        font-size: 13px;
        color: #2a3a52;
        line-height: 1.5;
}
.ct-cf7-consent .wpcf7-list-item { margin: 0; display: block; }
.ct-cf7-consent input[type="checkbox"] { margin-right: 8px; }
.ct-cf7-consent a { color: var(--ct-accent); text-decoration: underline; }
.ct-cf7 .wpcf7-submit {
        background: var(--ct-accent);
        color: #fff;
        border: 0;
        padding: 14px 28px;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.02em;
        border-radius: 6px;
        cursor: pointer;
        transition: background .15s;
}
.ct-cf7 .wpcf7-submit:hover { background: #8c0000; }
.ct-cf7-foot {
        color: #5b6b7f;
        font-size: 13px;
        margin-top: 6px;
}
.ct-cf7-foot a { color: var(--ct-navy); font-weight: 600; }
.ct-cf7-optional { color: var(--ct-mute); font-weight: 400; font-size: 0.9em; }
.ct-cf7 .wpcf7-not-valid-tip {
        font-size: 12px;
        color: var(--ct-accent);
        margin-top: 4px;
        display: block;
}
.ct-cf7 .wpcf7-response-output {
        border: 1px solid var(--ct-line) !important;
        border-radius: 6px;
        padding: 12px 14px;
        font-size: 14px;
        margin: 16px 0 0;
}
@media (max-width: 700px) {
        .ct-cf7-2col { grid-template-columns: 1fr; gap: 0; }
        .ct-cf7-2col p { margin-bottom: 16px; }
}

/* ==========================================================================
   Font hardening + mobile simplification
   Forces a clean system-font stack so the site reads correctly even when
   Google Fonts is blocked (local dev, locked-down hospital networks, etc).
   ========================================================================== */

html, body,
body .heading-font,
body h1, body h2, body h3, body h4, body h5, body h6,
body .nav > li > a,
body input, body select, body textarea, body button,
body .ct-cf7 label,
body .button {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, "Liberation Sans", "Noto Sans",
                sans-serif !important;
        font-feature-settings: "kern" 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}
/* Kill the Dancing Script "alt-font" — looks like handwriting if it ever
   leaks into body copy via theme classes. */
body .alt-font,
body .header-top .alt-font {
        font-family: inherit !important;
        font-style: normal !important;
}

/* ==========================================================================
   Mobile header — declutter
   ========================================================================== */

@media (max-width: 849px) {
        /* The 4-up USP strip is too dense for mobile. Hide it; the same
           reassurance copy already lives in the hero pill + Configure CTA. */
        .ct-usp-strip { display: none !important; }

        /* Phone number row in the white header area — keep visible but
           shrink so it sits cleanly under the logo. */
        .ct-header-phone {
                margin: 0;
                font-size: 14px;
                gap: 6px;
        }
        .ct-header-phone img { max-height: 18px; }

        /* Logo: smaller to free up tap area */
        #logo img { max-height: 44px !important; }

        /* Hero text: don't go ALL CAPS / huge on small screens */
        .page-title h1,
        .banner h1 { font-size: 28px !important; line-height: 1.2 !important; }

        /* Hero pill: smaller padding so it doesn't dominate */
        .ct-hero-pill {
                font-size: 12px;
                padding: 5px 11px;
                gap: 7px;
                margin-bottom: 14px;
        }

        /* Section spacing tightens up on mobile */
        .ct-section { padding: 40px 0; }
        .ct-h2 { font-size: 22px; }
}

/* Phone in header — desktop alignment tightening (vertically centre with
   logo row, never wrap onto two lines).
   ========================================================================== */
@media (min-width: 850px) {
        .ct-header-phone {
                white-space: nowrap;
                line-height: 1;
                align-self: center;
        }
        .ct-header-phone img { height: 20px; max-height: 20px; }
}

/* ==========================================================================
   Spares & Components — enquiry-priced product CTA
   ========================================================================== */
.ct-spare-quote {
        border: 1px solid #e3e8f0;
        border-left: 3px solid #c8102e;
        background: #f7f9fc;
        border-radius: 4px;
        padding: 18px 20px;
        margin: 20px 0 24px;
}
.ct-spare-quote-head {
        display: flex;
        flex-direction: column;
        margin-bottom: 12px;
        line-height: 1.3;
}
.ct-spare-quote-head strong {
        color: #0b2545;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.01em;
}
.ct-spare-quote-head span {
        color: #5d6779;
        font-size: 13px;
        margin-top: 2px;
}
.ct-spare-quote-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #c8102e;
        color: #ffffff !important;
        padding: 11px 22px;
        border-radius: 4px;
        font-weight: 700;
        font-size: 14.5px;
        letter-spacing: 0.02em;
        text-decoration: none !important;
        line-height: 1;
}
.ct-spare-quote-btn:hover,
.ct-spare-quote-btn:focus {
        background: #a50d25;
        color: #ffffff !important;
}
.ct-spare-quote-foot {
        margin: 12px 0 0;
        font-size: 12.5px;
        color: #5d6779;
        line-height: 1.5;
}
.ct-spare-quote-foot a {
        color: #0b2545;
        font-weight: 600;
        text-decoration: none;
}
.ct-spare-quote-foot a:hover { text-decoration: underline; }

/* Shop-archive "Request a quote" button on spare cards */
.ct-spare-loop-btn,
.ct-spare-loop-btn.button {
        background: #0b2545 !important;
        color: #ffffff !important;
        border: 0 !important;
        font-weight: 600 !important;
        letter-spacing: 0.01em !important;
}
.ct-spare-loop-btn:hover,
.ct-spare-loop-btn.button:hover { background: #c8102e !important; }

/* ==========================================================================
   Contact form (CF7 #1107) — polish + responsive 2-col rows
   ========================================================================== */
.ct-cf7 .ct-cf7-row.ct-cf7-2col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 18px;
}
.ct-cf7 p { margin: 0 0 14px; }
.ct-cf7 label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #0b2545;
        letter-spacing: 0.01em;
}
.ct-cf7 label span {
        color: #c8102e;
        font-weight: 600;
}
.ct-cf7 input[type="text"],
.ct-cf7 input[type="email"],
.ct-cf7 input[type="tel"],
.ct-cf7 select,
.ct-cf7 textarea {
        width: 100%;
        margin-top: 4px;
        padding: 11px 13px;
        border: 1px solid #d2dae6;
        border-radius: 4px;
        font-size: 15px;
        font-weight: 400;
        color: #16213a;
        background: #ffffff;
        box-shadow: none;
        line-height: 1.4;
}
.ct-cf7 textarea { min-height: 140px; resize: vertical; }
.ct-cf7 input:focus,
.ct-cf7 select:focus,
.ct-cf7 textarea:focus {
        outline: 0;
        border-color: #0b2545;
        box-shadow: 0 0 0 3px rgba(11,37,69,0.12);
}
.ct-cf7 .wpcf7-not-valid-tip { color: #c8102e; font-size: 12.5px; margin-top: 4px; }
.ct-cf7 .ct-cf7-consent {
        font-size: 13px;
        color: #5d6779;
        background: #f4f6fb;
        padding: 12px 14px;
        border-radius: 4px;
        line-height: 1.55;
}
.ct-cf7 .ct-cf7-consent a { color: #0b2545; text-decoration: underline; }
.ct-cf7 .wpcf7-list-item { margin: 0; }
.ct-cf7 input[type="submit"],
.ct-cf7 .wpcf7-submit {
        background: #c8102e !important;
        color: #ffffff !important;
        border: 0 !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        letter-spacing: 0.03em;
        padding: 14px 30px !important;
        border-radius: 4px !important;
        text-transform: none !important;
        cursor: pointer;
}
.ct-cf7 input[type="submit"]:hover { background: #a50d25 !important; }
.ct-cf7 .ct-cf7-foot {
        font-size: 12.5px;
        color: #5d6779;
        margin-top: 14px;
        line-height: 1.55;
}
.ct-cf7 .ct-cf7-foot a {
        color: #0b2545;
        font-weight: 600;
        text-decoration: none;
}
.ct-cf7 .wpcf7-response-output {
        border-radius: 4px;
        padding: 12px 14px !important;
        font-size: 14px;
        margin: 18px 0 0 !important;
}
.ct-cf7 input[type="file"] {
        font-size: 13px;
        padding: 8px 0;
}

@media (max-width: 749px) {
        .ct-cf7 .ct-cf7-row.ct-cf7-2col {
                grid-template-columns: 1fr;
                gap: 0;
        }
}

/* ==========================================================================
   Mobile: slim phone + UK-Company top bar (replaces the dark Flatsome
   top-bar and the USP icon strip on phones — single tidy strip above the
   hamburger header).
   ========================================================================== */
.ct-mobile-topbar { display: none; }

@media (max-width: 849px) {
        /* Hide Flatsome's dense dark top-bar (CONTACT / hours / phone /
           socials) — replaced by the slim 2-up strip below. */
        #top-bar { display: none !important; }

        /* Mobile uses the off-canvas hamburger menu for navigation, so hide the
           relocated second-row nav strip entirely — keeps the mobile header to just
           the logo, cart and menu toggle and maximises the viewport. */
        html.ct-menu-relocated .header-bottom,
        .header-bottom { display: none !important; }

        .ct-mobile-topbar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: #0b2545;
                color: #ffffff;
                padding: 8px 14px;
                font-size: 13px;
                font-weight: 600;
                letter-spacing: 0.01em;
                line-height: 1;
                gap: 12px;
        }
        .ct-mobile-topbar a {
                color: #ffffff;
                text-decoration: none;
                display: inline-flex;
                align-items: center;
                gap: 6px;
        }
        .ct-mobile-topbar a:hover,
        .ct-mobile-topbar a:focus { color: #ffd66b; }
        .ct-mobile-topbar svg {
                width: 14px;
                height: 14px;
                flex: 0 0 14px;
        }
        .ct-mobile-topbar .ct-uk-badge {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                opacity: 0.92;
        }
        .ct-mobile-topbar .ct-uk-flag {
                width: 18px;
                height: 12px;
                border-radius: 2px;
                background:
                        linear-gradient(white, white) center/100% 2px no-repeat,
                        linear-gradient(white, white) center/2px 100% no-repeat,
                        linear-gradient(45deg, transparent 45%, white 45%, white 55%, transparent 55%),
                        linear-gradient(-45deg, transparent 45%, white 45%, white 55%, transparent 55%),
                        #c8102e;
        }
}

/* ==========================================================================
   About page — bespoke layout (uses raw HTML inside wp:html block)
   ========================================================================== */
.ct-about-hero {
        position: relative;
        min-height: 460px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-size: cover;
        background-position: center;
        color: #ffffff;
        overflow: hidden;
}
.ct-about-hero::before {
        content: "";
        position: absolute; inset: 0;
        background: linear-gradient(180deg, rgba(11,37,69,0.55) 0%, rgba(11,37,69,0.82) 100%);
}
.ct-about-hero-inner {
        position: relative;
        max-width: 820px;
        padding: 70px 24px;
}
.ct-about-hero .ct-eyebrow {
        display: inline-block;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        padding: 6px 14px;
        background: rgba(255,255,255,0.12);
        border: 1px solid rgba(255,255,255,0.25);
        border-radius: 999px;
        margin-bottom: 18px;
}
.ct-about-hero h1 {
        font-size: 42px;
        line-height: 1.15;
        letter-spacing: -0.01em;
        color: #ffffff;
        margin: 0 0 16px;
}
.ct-about-hero p.ct-sub {
        font-size: 18px;
        line-height: 1.55;
        color: #d9e3f3;
        max-width: 640px;
        margin: 0 auto;
}

.ct-about-section { padding: 70px 0; }
.ct-about-section.ct-alt { background: #f4f6fb; }
.ct-about-section.ct-dark {
        background: #0b2545;
        color: #ffffff;
}
.ct-about-section.ct-dark h2 { color: #ffffff; }
.ct-about-section.ct-dark p { color: #cdd9ee; }

.ct-about-wrap { max-width: 1140px; margin: 0 auto; padding: 0 22px; }
.ct-about-narrow { max-width: 820px; margin: 0 auto; padding: 0 22px; }

.ct-about-section h2 {
        font-size: 30px;
        line-height: 1.2;
        letter-spacing: -0.01em;
        color: #0b2545;
        margin: 0 0 16px;
}
.ct-about-section h2 + p.ct-lead {
        font-size: 17px;
        line-height: 1.65;
        color: #5d6779;
        margin: 0 0 28px;
}
.ct-about-section p { font-size: 16px; line-height: 1.7; color: #16213a; margin: 0 0 14px; }

.ct-split {
        display: grid;
        grid-template-columns: 1.05fr 1fr;
        gap: 44px;
        align-items: center;
}
.ct-split img {
        width: 100%;
        height: auto;
        border-radius: 6px;
        box-shadow: 0 18px 44px rgba(11,37,69,0.18);
        display: block;
}
.ct-split.ct-reverse > :first-child { order: 2; }
.ct-split.ct-reverse > :last-child { order: 1; }

.ct-cards-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
}
.ct-cards-3 .ct-card {
        background: #ffffff;
        border: 1px solid #e3e8f0;
        border-top: 3px solid #c8102e;
        border-radius: 4px;
        padding: 26px 24px;
}
.ct-cards-3 .ct-card .num {
        display: block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #c8102e;
        margin-bottom: 10px;
}
.ct-cards-3 .ct-card h3 {
        font-size: 18px;
        line-height: 1.3;
        color: #0b2545;
        margin: 0 0 10px;
}
.ct-cards-3 .ct-card p {
        font-size: 14.5px;
        line-height: 1.6;
        color: #4d5a72;
        margin: 0;
}

.ct-gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
}
.ct-gallery figure {
        margin: 0;
        position: relative;
        overflow: hidden;
        border-radius: 4px;
        aspect-ratio: 4 / 3;
}
.ct-gallery img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
}
.ct-gallery figure:hover img { transform: scale(1.04); }
.ct-gallery figcaption {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        background: linear-gradient(transparent, rgba(11,37,69,0.85));
        color: #ffffff;
        padding: 26px 16px 12px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.01em;
}

.ct-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        text-align: center;
}
.ct-stats .ct-stat strong {
        display: block;
        font-size: 38px;
        line-height: 1;
        color: #ffffff;
        font-weight: 700;
        margin-bottom: 6px;
}
.ct-stats .ct-stat span {
        display: block;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #9bb3d6;
}

.ct-sector-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 28px;
        list-style: none;
        padding: 0;
        margin: 22px 0 0;
}
.ct-sector-list li {
        font-size: 15px;
        color: #16213a;
        padding-left: 22px;
        position: relative;
        line-height: 1.45;
}
.ct-sector-list li::before {
        content: "";
        position: absolute;
        left: 0; top: 7px;
        width: 9px; height: 9px;
        background: #c8102e;
        border-radius: 2px;
}

.ct-about-cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: #c8102e;
        color: #ffffff !important;
        padding: 14px 26px;
        border-radius: 4px;
        font-weight: 700;
        text-decoration: none;
        font-size: 15px;
        letter-spacing: 0.02em;
        margin-top: 18px;
}
.ct-about-cta:hover { background: #a50d25; color: #ffffff !important; }

@media (max-width: 849px) {
        .ct-about-hero { min-height: 360px; }
        .ct-about-hero h1 { font-size: 28px; }
        .ct-about-hero p.ct-sub { font-size: 15px; }
        .ct-about-section { padding: 44px 0; }
        .ct-about-section h2 { font-size: 24px; }
        .ct-split { grid-template-columns: 1fr; gap: 24px; }
        .ct-split.ct-reverse > :first-child { order: 0; }
        .ct-split.ct-reverse > :last-child { order: 0; }
        .ct-cards-3 { grid-template-columns: 1fr; }
        .ct-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
        .ct-stats { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
        .ct-stats .ct-stat strong { font-size: 30px; }
        .ct-sector-list { grid-template-columns: 1fr; }
}

/* ============================================================ *
 * Vitesse track configurator (CT-0065 / CT-0046 / CT-0047 / CT-0077)
 * ============================================================ */
.ct-vitesse{
  display:grid;grid-template-columns:1fr;gap:24px;
  margin:24px 0;font-family:inherit;
}
@media (min-width:800px){
  .ct-vitesse{grid-template-columns:1fr 1fr;align-items:start;}
}
.ct-vitesse-spec table{
  width:100%;border-collapse:collapse;font-size:14px;
  border:1px solid #e6e8ec;border-radius:8px;overflow:hidden;
}
.ct-vitesse-spec th,.ct-vitesse-spec td{
  padding:9px 12px;text-align:left;vertical-align:top;
  border-bottom:1px solid #eef0f3;
}
.ct-vitesse-spec th{
  width:42%;background:#f7f9fc;font-weight:600;color:#324154;
}
.ct-vitesse-spec tr:last-child th,.ct-vitesse-spec tr:last-child td{border-bottom:0;}
.ct-vitesse-form{
  background:#fff;border:1px solid #e6e8ec;border-radius:10px;padding:20px;
  box-shadow:0 2px 6px rgba(20,30,50,0.04);
}
.ct-vitesse-h{
  margin:0 0 14px;font-size:18px;font-weight:700;color:#0c2340;
  letter-spacing:.2px;
}
.ct-vitesse-row{margin:0 0 18px;}
.ct-vitesse-row > label{
  display:block;font-weight:600;color:#0c2340;font-size:14px;margin-bottom:6px;
}
.ct-vitesse-input{
  display:flex;align-items:stretch;border:1px solid #cfd6df;border-radius:6px;
  overflow:hidden;background:#fff;max-width:280px;
}
.ct-vitesse-input input{
  border:0;padding:10px 12px;font-size:16px;width:100%;outline:none;background:transparent;
}
.ct-vitesse-input input:focus{outline:2px solid #0c2340;outline-offset:-2px;}
.ct-vitesse-unit{
  display:flex;align-items:center;padding:0 12px;background:#f3f5f8;color:#5c6b80;
  font-size:14px;border-left:1px solid #cfd6df;
}
.ct-vitesse-hint{font-size:12px;color:#5c6b80;margin:6px 0 0;}
.ct-vitesse-check{display:flex;align-items:center;gap:8px;font-weight:500;color:#324154;}
.ct-vitesse-check small{color:#5c6b80;font-weight:400;}
.ct-vitesse-radios{display:flex;flex-direction:column;gap:8px;}
.ct-vitesse-radios label{display:flex;align-items:center;gap:8px;font-weight:500;color:#324154;}
.ct-vitesse-radios small{color:#5c6b80;font-weight:400;}
.ct-vitesse-quote{
  margin-top:8px;padding:14px 16px;background:#0c2340;color:#fff;border-radius:8px;
}
.ct-vitesse-quote-label{font-size:12px;text-transform:uppercase;letter-spacing:1px;opacity:.8;}
.ct-vitesse-quote-price{font-size:28px;font-weight:800;line-height:1.1;margin:2px 0 4px;}
.ct-vitesse-quote-meta{font-size:12px;opacity:.85;}

/* Hide WooCommerce price + qty box on Vitesse product pages — form owns the price */
body.ct-vitesse-product .product .price{display:none;}
body.ct-vitesse-product .product form.cart .quantity{display:none;}
body.ct-vitesse-product .product form.cart .single_add_to_cart_button{
  background:#c8102e;color:#fff;border:0;padding:14px 28px;font-weight:700;
  border-radius:6px;margin-top:8px;
}


/* ==========================================================================
   Contact form popup overlay
   ========================================================================== */

.ct-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(10, 20, 40, 0.72);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 16px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: ct-fade-in .18s ease;
}
.ct-popup-overlay[hidden] { display: none !important; }

@keyframes ct-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ct-popup-modal {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(10, 20, 40, 0.28);
  width: 100%;
  max-width: 560px;
  padding: 28px 32px 24px;
  animation: ct-slide-up .2s ease;
}
@keyframes ct-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Prevent body scroll when popup is open */
body.ct-popup-active { overflow: hidden; }

.ct-popup-close {
  position: absolute;
  top: 14px; right: 16px;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #6b7a90;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.ct-popup-close:hover { color: #0c2340; background: #f3f5f8; }

.ct-popup-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #c8102e;
  margin: 0 0 5px;
}
.ct-popup-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0c2340;
  margin: 0 0 5px;
  line-height: 1.2;
}
.ct-popup-sub {
  font-size: 13.5px;
  color: #5c6b80;
  margin: 0 0 14px;
  line-height: 1.45;
}
.ct-popup-sub a { color: #0c2340; font-weight: 600; }

/* CF7 inside the popup */
.ct-popup-form-wrap .wpcf7 { margin: 0; }
.ct-popup-form-wrap .wpcf7-form p { margin: 0 0 10px; }
.ct-popup-form-wrap .ct-cf7-row.ct-cf7-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}
.ct-popup-form-wrap label { font-size: 12px; font-weight: 600; color: #324154; }
.ct-popup-form-wrap label span { color: #c8102e; font-weight: 400; margin-left: 2px; }
.ct-popup-form-wrap input[type="text"],
.ct-popup-form-wrap input[type="email"],
.ct-popup-form-wrap input[type="tel"],
.ct-popup-form-wrap select,
.ct-popup-form-wrap textarea {
  width: 100%;
  border: 1px solid #cfd6df;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 14px;
  color: #0c2340;
  background: #fff;
  margin-top: 3px;
  transition: border-color .15s;
}
.ct-popup-form-wrap input:focus,
.ct-popup-form-wrap select:focus,
.ct-popup-form-wrap textarea:focus {
  border-color: #0c2340;
  outline: none;
}
.ct-popup-form-wrap textarea { resize: vertical; min-height: 72px; }
.ct-popup-form-wrap input[type="file"] { font-size: 12px; margin-top: 3px; }
.ct-popup-form-wrap input[type="submit"],
.ct-popup-form-wrap .wpcf7-submit {
  background: #c8102e;
  color: #fff;
  border: none;
  padding: 11px 24px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background .18s;
  width: 100%;
  margin-top: 2px;
}
.ct-popup-form-wrap input[type="submit"]:hover,
.ct-popup-form-wrap .wpcf7-submit:hover { background: #a50d23; }

/* Trust icon strip */
.ct-popup-trust {
  display: flex;
  gap: 0;
  border-top: 1px solid #edf0f5;
  margin-top: 14px;
  padding-top: 12px;
}
.ct-popup-trust-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  border-right: 1px solid #edf0f5;
}
.ct-popup-trust-item:first-child { padding-left: 0; }
.ct-popup-trust-item:last-child  { border-right: none; padding-right: 0; }
.ct-popup-trust-item svg { flex-shrink: 0; color: #c8102e; }
.ct-popup-trust-item span {
  font-size: 11.5px;
  font-weight: 600;
  color: #324154;
  line-height: 1.3;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .ct-popup-modal { padding: 24px 18px 20px; }
  .ct-popup-form-wrap .ct-cf7-row.ct-cf7-2col { grid-template-columns: 1fr; gap: 0; }
  .ct-popup-overlay { padding: 12px 8px; }
  .ct-popup-trust { flex-direction: column; gap: 8px; }
  .ct-popup-trust-item { border-right: none; padding: 0; }
}


/* ==========================================================================
   Desktop nav: hide second-level sub-menus; clean flat navigation
   ========================================================================== */

@media screen and (min-width: 980px) {
  /* Hide all dropdown sub-menus */
  .header-nav-main .nav-dropdown { display: none !important; }

  /* Hide the dropdown caret arrow on parent items */
  .header-nav-main .has-dropdown > a .icon-angle-down,
  .header-nav-main .has-dropdown > a i[class*="icon-angle"] {
    display: none !important;
  }

  /* Items that are parent-only (href="#") become non-interactive labels */
  .header-nav-main .has-dropdown > a[href="#"] {
    pointer-events: none;
    cursor: default;
    opacity: .72;
  }
}


/* ==========================================================================
   "Get in touch" button in the main nav
   ========================================================================== */

.ct-popup-nav-item > a.nav-top-link {
  background: #c8102e !important;
  color: #fff !important;
  border-radius: 5px;
  padding: 6px 15px !important;
  margin-left: 6px;
  line-height: 1.5 !important;
  transition: background .16s !important;
}
.ct-popup-nav-item > a.nav-top-link:hover {
  background: #a50d23 !important;
  color: #fff !important;
}

/* Hide the "Get in touch" nav item on mobile (Contact link already triggers popup) */
@media (max-width: 979px) {
  .ct-popup-nav-item { display: none !important; }
}


/* ==========================================================================
   Disable sticky/fixed header on desktop
   On mobile Flatsome handles its own simplified sticky; leave that alone.
   ========================================================================== */

@media screen and (min-width: 980px) {
  /* Prevent the wrapper from becoming position:fixed when JS adds .stuck */
  .header-wrapper,
  .header-wrapper.stuck {
    position: relative !important;
    top: auto !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* Restore original header height (the customizer shrinks it to 70px when stuck) */
  .stuck .header-main {
    height: 91px !important;
  }
  .stuck #logo img {
    max-height: 91px !important;
  }
  .stuck .header-main .nav > li > a {
    line-height: 16px !important;
  }

  /* Keep elements Flatsome hides on scroll (top-bar, wide-nav with our nav) visible */
  .stuck .hide-for-sticky {
    display: flex !important;
  }
}

/* ==========================================================================
   Breadcrumb — compact on all viewports
   ========================================================================== */
.woocommerce-breadcrumb,
.product-page-title .woocommerce-breadcrumb {
        font-size: 11.5px !important;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--ct-mute) !important;
        line-height: 1.4;
}
.woocommerce-breadcrumb a,
.product-page-title .woocommerce-breadcrumb a { color: var(--ct-mute) !important; }
.woocommerce-breadcrumb a:hover,
.product-page-title .woocommerce-breadcrumb a:hover { color: var(--ct-accent) !important; }

/* Compress the grey page-title banner on product pages */
.product-page-title .page-title-inner {
        padding: 7px 0 !important;
}