/*
 	Theme Name:   Printing Child
 	Theme URI:    https://printing.ththeme.net/
 	Description:  Printing Child Theme
 	Author:       Ththeme WordPress team
 	Author URI:   #
 	Template:     printing
 	Version:      1.0
 	License:      GNU General Public License v2 or later
 	License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 	Tags:         full-width-template, theme-options, rtl-language-support, two-columns, left-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, sticky-post, threaded-comments
 	Text Domain:  printing-child
*/

/* =========================================================
   CUSTOM FONTS — CarteBlanche
   ========================================================= */

/* Glitten Regular */
@font-face {
    font-family: 'Glitten';
    src: url('assets/fonts/glitten/Glitten-Regular.woff') format('woff'),
         url('assets/fonts/glitten/Glitten-Regular.ttf') format('truetype'),
         url('assets/fonts/glitten/Glitten-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Glitten All Caps */
@font-face {
    font-family: 'Glitten All Caps';
    src: url('assets/fonts/glitten/GLITTEN ALL CAPS.woff') format('woff'),
         url('assets/fonts/glitten/GLITTEN ALL CAPS.ttf') format('truetype'),
         url('assets/fonts/glitten/GLITTEN ALL CAPS.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Monotype Corsiva */
@font-face {
    font-family: 'Monotype Corsiva';
    src: url('assets/fonts/monotype-corsiva/Monotype Corsiva Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Rubrik ExtraLight */
@font-face {
    font-family: 'Rubrik';
    src: url('assets/fonts/rubrik/Rubrik ExtraLight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rubrik';
    src: url('assets/fonts/rubrik/Rubrik ExtraLight Italic.otf') format('opentype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

/* Rubrik Light */
@font-face {
    font-family: 'Rubrik';
    src: url('assets/fonts/rubrik/Rubrik Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rubrik';
    src: url('assets/fonts/rubrik/Rubrik Light Italic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* Rubrik Regular */
@font-face {
    font-family: 'Rubrik';
    src: url('assets/fonts/rubrik/Rubrik.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rubrik';
    src: url('assets/fonts/rubrik/Rubrik Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Rubrik Medium */
@font-face {
    font-family: 'Rubrik';
    src: url('assets/fonts/rubrik/Rubrik Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rubrik';
    src: url('assets/fonts/rubrik/Rubrik Medium Italic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* Rubrik SemiBold */
@font-face {
    font-family: 'Rubrik';
    src: url('assets/fonts/rubrik/Rubrik SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rubrik';
    src: url('assets/fonts/rubrik/Rubrik SemiBold Italic.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* Rubrik Bold */
@font-face {
    font-family: 'Rubrik';
    src: url('assets/fonts/rubrik/Rubrik Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rubrik';
    src: url('assets/fonts/rubrik/Rubrik Bold Italic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

/* Base — Rubrik for all body text */
body,
p,
li,
td,
th,
input,
textarea,
select,
button,
label,
.woocommerce,
.woocommerce-page {
    font-family: 'Rubrik', sans-serif !important;
    font-weight: 400;
}

/* Headings — Glitten */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.entry-title,
.page-title,
.product_title,
.woocommerce-loop-product__title,
.site-title {
    font-family: 'Glitten', serif !important;
    font-weight: normal;
    letter-spacing: 0.02em;
}

/* Decorative accent — Monotype Corsiva for blockquotes / testimonials */
blockquote,
blockquote p,
.testimonial-content,
.wp-block-quote p {
    font-family: 'Monotype Corsiva', cursive !important;
    font-size: 1.15em;
    font-style: normal;
}

/* =========================================================
   BRAND TOKENS — CarteBlanche
   Use these variables in CSS rules OR via Elementor's
   "Custom CSS" field. Example: color: var(--cb-red);
   ========================================================= */
:root {
    /* Brand reds */
    --cb-red:        #C8252B;
    --cb-red-deep:   #A01D22;
    --cb-red-soft:   #E0473C;
    --cb-red-grad:   linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);

    /* Warm supporting palette */
    --cb-peach:      #FAD9C9;
    --cb-peach-tint: #FCE9DF;
    --cb-blush:      #F7E2D8;

    /* Neutrals (warm) */
    --cb-cream:      #FBF6EF;
    --cb-cream-2:    #F6EEE4;
    --cb-ivory:      #FFFDFA;
    --cb-ink:        #2A211C;
    --cb-ink-2:      #4A3F38;
    --cb-muted:      #8A7B70;
    --cb-line:       #EBE0D5;
    --cb-copper:     #BE815A;

    /* Layout tokens */
    --cb-maxw:       1240px;
    --cb-radius:     22px;
    --cb-radius-sm:  14px;
    --cb-shadow-sm:  0 4px 18px -8px rgba(82,48,32,.22);
    --cb-shadow-md:  0 26px 60px -28px rgba(120,60,38,.40);
    --cb-shadow-lg:  0 40px 90px -36px rgba(120,60,38,.48);
}

/* =========================================================
   PARENT THEME OVERRIDES
   ========================================================= */

/* Re-tint .line-title (parent theme green→yellow highlight)
   to the CarteBlanche brand red gradient. Higher specificity
   + !important so it wins over parent's inline styles. */
.line-title:after,
span.line-title:after {
    background: var(--cb-red-grad) !important;
    background-color: rgba(200, 37, 43, 0.18) !important;
    opacity: 0.85;
}

/* =========================================================
   UTILITY CLASSES — drop into Elementor "CSS Classes" field
   ========================================================= */

/* Eyebrow / small uppercase label
   Use on a Heading widget (tag = p) for section labels. */
.cb-eyebrow {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    font-family: 'Rubrik', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--cb-red-deep) !important;
    margin-bottom: 22px !important;
}
.cb-eyebrow:before {
    content: "";
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: var(--cb-red-grad);
}
.cb-eyebrow.cb-center { justify-content: center; }

/* Primary button — gradient pill */
.cb-btn-primary,
.cb-btn-primary > a,
a.cb-btn-primary {
    background: var(--cb-red-grad) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 15px 26px !important;
    font-family: 'Rubrik', sans-serif !important;
    font-weight: 600 !important;
    border: 1.5px solid transparent !important;
    box-shadow: 0 14px 30px -12px rgba(168,29,34,.55);
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.cb-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -14px rgba(168,29,34,.65); }

/* Ghost / outline button */
.cb-btn-ghost,
.cb-btn-ghost > a,
a.cb-btn-ghost {
    background: transparent !important;
    color: var(--cb-ink) !important;
    border: 1.5px solid var(--cb-line) !important;
    border-radius: 999px !important;
    padding: 15px 26px !important;
    font-family: 'Rubrik', sans-serif !important;
    font-weight: 600 !important;
    transition: .25s;
}
.cb-btn-ghost:hover { border-color: var(--cb-red) !important; color: var(--cb-red-deep) !important; transform: translateY(-2px); }

/* Stat number block (hero trust strip) */
.cb-stat-num {
    font-family: 'Glitten', serif !important;
    font-size: 30px !important;
    color: var(--cb-ink) !important;
    line-height: 1 !important;
}
.cb-stat-label {
    font-family: 'Rubrik', sans-serif !important;
    font-size: 13px !important;
    color: var(--cb-muted) !important;
    letter-spacing: .02em;
}

/* Soft card — for service / why / step cards */
.cb-card {
    background: #fff !important;
    border: 1px solid var(--cb-line) !important;
    border-radius: var(--cb-radius) !important;
    padding: 30px 28px 32px !important;
    box-shadow: var(--cb-shadow-sm);
    transition: transform .3s, box-shadow .3s, border-color .3s;
}
.cb-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--cb-shadow-md);
    border-color: transparent;
}

/* Dark card variant (used in "Why CarteBlanche" dark section) */
.cb-card-dark {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: var(--cb-radius-sm) !important;
    color: #fff !important;
}
.cb-card-dark:hover { background: rgba(255,255,255,.08) !important; transform: translateY(-5px); }

/* Peach icon tile — wraps an icon image (66x66) */
.cb-icon-tile {
    width: 66px;
    height: 66px;
    border-radius: 18px;
    background: var(--cb-peach-tint);
    display: grid;
    place-items: center;
    overflow: hidden;
}

/* Eyebrow + brand-red accent for the demo's "FAST AND QUALITY SERVICE"
   pattern. The parent theme already styles uppercase red labels;
   .cb-accent-red lets you mark any inline span as brand red. */
.cb-accent-red { color: var(--cb-red-deep) !important; }

/* Section background variants */
.cb-bg-cream  { background: var(--cb-cream)  !important; }
.cb-bg-ivory  { background: var(--cb-ivory)  !important; }
.cb-bg-ink    { background: var(--cb-ink)    !important; color: #fff !important; }
.cb-bg-ink h1, .cb-bg-ink h2, .cb-bg-ink h3, .cb-bg-ink h4 { color: #fff !important; }

/* =========================================================
   ELEMENTOR-SPECIFIC OVERRIDES
   Higher specificity to beat Elementor's default widget CSS
   ========================================================= */

/* Buttons — primary (red gradient pill) */
.elementor-element.cb-btn-primary .elementor-button,
.elementor-widget-button.cb-btn-primary .elementor-button,
.elementor-button-wrapper.cb-btn-primary .elementor-button,
a.elementor-button.cb-btn-primary {
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%) !important;
    background-color: #C8252B !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 16px 30px !important;
    border: 1.5px solid transparent !important;
    font-family: 'Rubrik', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15.5px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: 0 14px 30px -12px rgba(168,29,34,.55) !important;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s !important;
}
.elementor-element.cb-btn-primary .elementor-button:hover,
.elementor-widget-button.cb-btn-primary .elementor-button:hover,
.elementor-button-wrapper.cb-btn-primary .elementor-button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 22px 40px -14px rgba(168,29,34,.65) !important;
    color: #ffffff !important;
}
.elementor-element.cb-btn-primary .elementor-button-text,
.elementor-widget-button.cb-btn-primary .elementor-button-text {
    color: #ffffff !important;
    font-family: 'Rubrik', sans-serif !important;
    font-weight: 600 !important;
}

/* Buttons — ghost (outline, transparent) */
.elementor-element.cb-btn-ghost .elementor-button,
.elementor-widget-button.cb-btn-ghost .elementor-button,
a.elementor-button.cb-btn-ghost {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    color: #2A211C !important;
    border-radius: 999px !important;
    padding: 16px 30px !important;
    border: 1.5px solid #EBE0D5 !important;
    font-family: 'Rubrik', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15.5px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition: all .25s cubic-bezier(.2,.8,.2,1) !important;
}
.elementor-element.cb-btn-ghost .elementor-button:hover,
.elementor-widget-button.cb-btn-ghost .elementor-button:hover {
    border-color: #C8252B !important;
    color: #A01D22 !important;
    transform: translateY(-3px) !important;
    background-color: rgba(200,37,43,.04) !important;
}
.elementor-element.cb-btn-ghost .elementor-button-text {
    color: #2A211C !important;
    font-family: 'Rubrik', sans-serif !important;
}

/* Kill parent theme button decorations that bleed through on hover
   (the double-border / ghost outline / glow ring artifact).
   Parent theme's .elementor-button uses ::before for a hover ring. */
.elementor-element.cb-btn-primary .elementor-button::before,
.elementor-element.cb-btn-primary .elementor-button::after,
.elementor-element.cb-btn-ghost .elementor-button::before,
.elementor-element.cb-btn-ghost .elementor-button::after,
.elementor-element.cb-btn-primary .elementor-button-wrapper::before,
.elementor-element.cb-btn-primary .elementor-button-wrapper::after,
.elementor-element.cb-btn-ghost .elementor-button-wrapper::before,
.elementor-element.cb-btn-ghost .elementor-button-wrapper::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: none !important;
}

/* Suppress browser focus rings on these buttons */
.elementor-element.cb-btn-primary .elementor-button,
.elementor-element.cb-btn-ghost .elementor-button {
    outline: none !important;
}
.elementor-element.cb-btn-primary .elementor-button:focus,
.elementor-element.cb-btn-primary .elementor-button:focus-visible,
.elementor-element.cb-btn-primary .elementor-button:active,
.elementor-element.cb-btn-ghost .elementor-button:focus,
.elementor-element.cb-btn-ghost .elementor-button:focus-visible,
.elementor-element.cb-btn-ghost .elementor-button:active {
    outline: none !important;
    outline-offset: 0 !important;
}

/* Ensure background-color/image fully covers on hover (no flicker through gaps) */
.elementor-element.cb-btn-primary .elementor-button:hover {
    background-image: linear-gradient(125deg, #C8252B 0%, #A01D22 52%, #821519 100%) !important;
    background-color: #A01D22 !important;
}

/* Eyebrow — small uppercase label */
.elementor-element.cb-eyebrow .elementor-heading-title,
.elementor-widget-heading.cb-eyebrow .elementor-heading-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-family: 'Rubrik', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    color: #A01D22 !important;
    margin: 0 0 22px 0 !important;
}
.elementor-element.cb-eyebrow .elementor-heading-title::before,
.elementor-widget-heading.cb-eyebrow .elementor-heading-title::before {
    content: "" !important;
    width: 34px !important;
    height: 3px !important;
    border-radius: 2px !important;
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%) !important;
    flex: none !important;
}
/* When eyebrow class is on an Elementor wrapper, suppress the generic :before
   so we don't draw TWO accent lines (wrapper :before + heading-title ::before). */
.elementor-element.cb-eyebrow::before,
.elementor-widget-heading.cb-eyebrow::before {
    content: none !important;
    display: none !important;
}

/* Stat number — big display number */
.elementor-element.cb-stat-num .elementor-heading-title,
.elementor-widget-heading.cb-stat-num .elementor-heading-title {
    font-family: 'Glitten', serif !important;
    font-size: 38px !important;
    color: #2A211C !important;
    line-height: 1 !important;
    margin: 0 0 6px 0 !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
}

/* Stat label — small caption under the number */
.elementor-element.cb-stat-label .elementor-heading-title,
.elementor-widget-heading.cb-stat-label .elementor-heading-title {
    font-family: 'Rubrik', sans-serif !important;
    font-size: 13px !important;
    color: #8A7B70 !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Accent red inline — for italic emphasis inside text */
.elementor-widget-text-editor em,
.elementor-element-edit-mode .elementor-widget-text-editor em {
    color: #A01D22 !important;
}

/* =========================================================
   ENTRANCE ANIMATIONS — Bring text to life
   Apply via "CSS Classes": cb-fade-up, cb-fade-up-d1, cb-fade-up-d2, cb-fade-up-d3
   ========================================================= */
@keyframes cbFadeUp {
    0%   { opacity: 0; transform: translateY(28px); }
    100% { opacity: 1; transform: translateY(0); }
}

.cb-fade-up {
    animation: cbFadeUp .9s cubic-bezier(.2,.7,.2,1) both;
}
.cb-fade-up-d1 { animation: cbFadeUp .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: .1s; }
.cb-fade-up-d2 { animation: cbFadeUp .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: .22s; }
.cb-fade-up-d3 { animation: cbFadeUp .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: .34s; }
.cb-fade-up-d4 { animation: cbFadeUp .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: .46s; }
.cb-fade-up-d5 { animation: cbFadeUp .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: .58s; }

@media (prefers-reduced-motion: reduce) {
    .cb-fade-up, .cb-fade-up-d1, .cb-fade-up-d2, .cb-fade-up-d3, .cb-fade-up-d4, .cb-fade-up-d5 {
        animation: none !important;
    }
}

/* Hero image — gentle subtle continuous float, smoother than parent's autotranslatey */
@keyframes cbFloatY {
    0%, 100% { transform: translateY(0) rotate(1.2deg); }
    50%      { transform: translateY(-12px) rotate(1.2deg); }
}
.cb-float-y {
    animation: cbFloatY 6s ease-in-out infinite;
}

/* H1 italic accent — make the "Built as One System" pop more */
.cb-headline em,
h1 em.cb-accent-italic {
    color: #A01D22 !important;
    font-style: italic !important;
    font-family: 'Glitten', serif !important;
    background: linear-gradient(125deg, #E0473C 0%, #A01D22 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =========================================================
   HERO IMAGE OVERLAYS — badge + floating chip
   Apply on Column B (image column): cb-hero-media
   Then drop badge + chip widgets inside it.
   ========================================================= */

/* CSS GRID OVERLAY APPROACH — bulletproof, no absolute positioning.
   All three widgets (image, badge, chip) occupy the SAME grid cell.
   Image fills the cell naturally. Badge and chip overlay using align-self
   + justify-self + margin to hang off the edges. */
.elementor-column.cb-hero-media,
.elementor-element.cb-hero-media {
    overflow: visible !important;
    align-self: flex-start !important;
}
.elementor-column.cb-hero-media > .elementor-element-populated,
.elementor-column.cb-hero-media > .elementor-element-populated > .elementor-widget-wrap,
.elementor-column.cb-hero-media .elementor-widget-wrap,
.elementor-column.cb-hero-media .elementor-column-wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    overflow: visible !important;
}

/* All three child widgets share the SAME grid cell so they stack/overlay */
.elementor-column.cb-hero-media > .elementor-element-populated > .elementor-widget-wrap > .elementor-element,
.elementor-column.cb-hero-media .elementor-widget-wrap > .elementor-element {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
}

/* Image: fills the cell as the base layer */
.elementor-column.cb-hero-media .elementor-element.cb-hero-image {
    z-index: 1 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    position: static !important;
    width: 100% !important;
}

/* Badge: pinned to top-right of the cell, hanging slightly off */
.elementor-element.cb-hero-badge {
    z-index: 3 !important;
    align-self: start !important;
    justify-self: end !important;
    position: static !important;
    margin-top: 30px !important;
    margin-right: -18px !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    width: max-content !important;
    max-width: none !important;
}
.elementor-element.cb-hero-badge .elementor-widget-container {
    transform: rotate(3deg);
    transform-origin: center center;
}
.elementor-element.cb-hero-badge .elementor-heading-title {
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%) !important;
    color: #ffffff !important;
    font-family: 'Rubrik', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 12px 22px !important;
    border-radius: 999px !important;
    display: inline-block !important;
    box-shadow: 0 18px 40px -14px rgba(168,29,34,.55);
    margin: 0 !important;
    white-space: nowrap;
}

/* Floating chip card — bottom-left of grid cell, hanging off the edge.
   Uses grid placement (not absolute) — much more robust. */
.elementor-element.cb-hero-chip {
    z-index: 3 !important;
    align-self: end !important;
    justify-self: start !important;
    position: static !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 24px !important;
    margin-left: -30px !important;
    width: auto !important;
    max-width: 360px !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
}
.elementor-element.cb-hero-chip .elementor-widget-container {
    background: #ffffff !important;
    border-radius: 18px !important;
    padding: 16px 22px !important;
    box-shadow: 0 26px 60px -28px rgba(120,60,38,.40);
    transform: rotate(-2deg);
    transform-origin: center center;
}
.elementor-element.cb-hero-chip .cb-chip-inner {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}
.elementor-element.cb-hero-chip .cb-chip-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 13px !important;
    background: #FCE9DF !important;
    display: grid !important;
    place-items: center !important;
    flex: none !important;
    font-size: 22px !important;
    color: #C8252B !important;
}
.elementor-element.cb-hero-chip .cb-chip-title {
    font-family: 'Glitten', serif !important;
    font-size: 17px !important;
    color: #2A211C !important;
    display: block !important;
    line-height: 1.1 !important;
    margin-bottom: 4px !important;
}
.elementor-element.cb-hero-chip .cb-chip-sub {
    font-family: 'Rubrik', sans-serif !important;
    font-size: 12.5px !important;
    color: #8A7B70 !important;
    line-height: 1.4 !important;
    display: block !important;
}

/* Hero image — better frame style (replace inline JSON settings rely on these) */
.elementor-element.cb-hero-image .elementor-image img,
.elementor-element.cb-hero-image img {
    border-radius: 28px !important;
    border: 8px solid #ffffff !important;
    box-shadow: 0 40px 90px -36px rgba(120,60,38,.55) !important;
    width: 100% !important;
    object-fit: cover;
}

/* MADE TO IMPRESS badge as a CSS pseudo-element on the image widget.
   This bypasses Elementor's widget-layout issues entirely — the badge
   is literally part of the image's container and overlays it natively. */
.elementor-element.cb-hero-image {
    position: relative !important;
}
.elementor-element.cb-hero-image::after {
    content: "MADE TO IMPRESS";
    position: absolute;
    top: 30px;
    right: -18px;
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    color: #ffffff;
    font-family: 'Rubrik', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 12px 22px;
    border-radius: 999px;
    box-shadow: 0 18px 40px -14px rgba(168,29,34,.55);
    transform: rotate(3deg);
    z-index: 3;
    white-space: nowrap;
    pointer-events: none;
}

/* Mobile adjustment — tuck the pseudo-badge inside the image edge */
@media (max-width: 768px) {
    .elementor-element.cb-hero-image::after {
        top: 16px;
        right: 12px;
        font-size: 10.5px;
        padding: 9px 16px;
        letter-spacing: 0.14em;
        transform: rotate(2deg);
    }
}
@media (max-width: 480px) {
    .elementor-element.cb-hero-image::after {
        font-size: 10px;
        padding: 8px 14px;
    }
}

/* =========================================================
   RESPONSIVE — Tablet + Mobile
   ========================================================= */

/* TABLET — under 1080px */
@media (max-width: 1080px) {
    /* H1 in text-editor */
    .elementor-widget-text-editor h1 { font-size: 48px !important; line-height: 1.05 !important; }

    /* Stat number smaller */
    .elementor-element.cb-stat-num .elementor-heading-title { font-size: 32px !important; }

    /* Badge a bit smaller and tucked in */
    .elementor-element.cb-hero-badge { top: 22px !important; right: 8px !important; }
    .elementor-element.cb-hero-badge .elementor-heading-title { font-size: 11px !important; padding: 10px 18px !important; }

    /* Chip smaller */
    .elementor-element.cb-hero-chip { left: -16px !important; bottom: 18px !important; max-width: 320px !important; }
    .elementor-element.cb-hero-chip .cb-chip-title { font-size: 15px !important; }
    .elementor-element.cb-hero-chip .cb-chip-sub { font-size: 12px !important; }
}

/* MOBILE — under 768px */
@media (max-width: 768px) {
    /* Hero section — less padding */
    .elementor-section .elementor-container .cb-hero-media,
    .elementor-element.cb-hero-media { align-self: auto !important; }

    /* IMAGE FIRST on mobile — image grabs attention before headline.
       Use flex order to flip column sequence. */
    .elementor-column.cb-hero-media,
    .elementor-element.cb-hero-media {
        order: -1 !important;
        margin-top: 0 !important;
        margin-bottom: 28px !important;
    }
    /* Push the text column down a touch so spacing reads right */
    .elementor-section .elementor-row > .elementor-column:not(.cb-hero-media) {
        order: 0 !important;
    }

    /* H1 — much smaller for mobile */
    .elementor-widget-text-editor h1 { font-size: 38px !important; line-height: 1.08 !important; letter-spacing: -0.02em !important; }

    /* Lead paragraph — slightly smaller */
    .elementor-widget-text-editor p { font-size: 17px !important; line-height: 1.6 !important; }

    /* Eyebrow — slightly smaller line */
    .elementor-element.cb-eyebrow .elementor-heading-title {
        font-size: 11.5px !important;
        letter-spacing: 0.2em !important;
        gap: 10px !important;
    }
    .elementor-element.cb-eyebrow .elementor-heading-title::before { width: 24px !important; height: 2.5px !important; }

    /* Buttons — stack full-width, slightly smaller */
    .elementor-element.cb-btn-primary .elementor-button,
    .elementor-element.cb-btn-ghost .elementor-button {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 24px !important;
        font-size: 14.5px !important;
    }

    /* Stats — keep horizontal but smaller */
    .elementor-element.cb-stat-num .elementor-heading-title { font-size: 26px !important; margin-bottom: 4px !important; }
    .elementor-element.cb-stat-label .elementor-heading-title { font-size: 12px !important; line-height: 1.3 !important; }

    /* Disable the floating animation on mobile to save battery + avoid jitter on small screens */
    .cb-float-y { animation: none !important; transform: rotate(1deg) !important; }

    /* Hero image — straighten slightly so it doesn't crowd edges */
    .elementor-element.cb-hero-image img { border-width: 6px !important; border-radius: 22px !important; }

    /* Badge — keep visible inside image, no negative right offset */
    .elementor-element.cb-hero-badge { right: 12px !important; top: 16px !important; transform: rotate(2deg) !important; }
    .elementor-element.cb-hero-badge .elementor-heading-title { font-size: 10.5px !important; padding: 9px 16px !important; letter-spacing: 0.14em !important; }

    /* Chip — sit cleanly at image bottom, no negative left offset, full-width-minus-padding */
    .elementor-element.cb-hero-chip {
        left: 12px !important;
        right: 12px !important;
        bottom: 14px !important;
        max-width: calc(100% - 24px) !important;
        transform: rotate(-1deg) !important;
    }
    .elementor-element.cb-hero-chip .elementor-widget-container { padding: 12px 16px !important; }
    .elementor-element.cb-hero-chip .cb-chip-icon { width: 40px !important; height: 40px !important; font-size: 19px !important; border-radius: 11px !important; }
    .elementor-element.cb-hero-chip .cb-chip-title { font-size: 14.5px !important; margin-bottom: 2px !important; }
    .elementor-element.cb-hero-chip .cb-chip-sub { font-size: 11.5px !important; line-height: 1.3 !important; }
}

/* SMALL MOBILE — under 480px (iPhone SE etc) */
@media (max-width: 480px) {
    .elementor-widget-text-editor h1 { font-size: 32px !important; line-height: 1.1 !important; }
    .elementor-element.cb-stat-num .elementor-heading-title { font-size: 22px !important; }
    .elementor-element.cb-stat-label .elementor-heading-title { font-size: 11px !important; }
    .elementor-element.cb-btn-primary .elementor-button,
    .elementor-element.cb-btn-ghost .elementor-button { padding: 13px 20px !important; font-size: 14px !important; }
    .elementor-element.cb-hero-badge .elementor-heading-title { font-size: 10px !important; padding: 8px 14px !important; }
    .elementor-element.cb-hero-chip .cb-chip-title { font-size: 13.5px !important; }
}

/* =========================================================
   SECTION 2 — WHO WE ARE
   ========================================================= */

/* Image column — rounded frame with soft shadow */
.elementor-element.cb-who-image .elementor-image img,
.elementor-element.cb-who-image img {
    border-radius: 22px !important;
    box-shadow: 0 30px 70px -30px rgba(120,60,38,.45) !important;
    width: 100% !important;
    object-fit: cover;
}

/* Bullet list with red gradient square markers */
.elementor-element.cb-who-statements .cb-statements,
.elementor-element.cb-who-statements ul {
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: grid !important;
    gap: 14px !important;
}
.elementor-element.cb-who-statements .cb-statements li,
.elementor-element.cb-who-statements ul li {
    display: flex !important;
    gap: 14px !important;
    align-items: flex-start !important;
    font-family: 'Rubrik', sans-serif !important;
    font-size: 16px !important;
    color: #4A3F38 !important;
    line-height: 1.55 !important;
    padding-left: 0 !important;
    margin: 0 !important;
}
.elementor-element.cb-who-statements .cb-statements li::before,
.elementor-element.cb-who-statements ul li::before {
    content: "" !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 3px !important;
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%) !important;
    margin-top: 8px !important;
    flex: none !important;
}

/* TABLET (1080px) — Who We Are */
@media (max-width: 1080px) {
    /* Hero & Who We Are: H2 in text-editor smaller */
    .elementor-widget-text-editor h2 { font-size: 38px !important; line-height: 1.1 !important; }
    /* Section padding tighter */
    .elementor-section { padding-top: 80px !important; padding-bottom: 80px !important; }
}

/* MOBILE (768px) — Who We Are */
@media (max-width: 768px) {
    .elementor-element.cb-who-image .elementor-image img,
    .elementor-element.cb-who-image img {
        border-radius: 18px !important;
        max-height: 380px;
    }
    /* H2 smaller on mobile */
    .elementor-widget-text-editor h2 {
        font-size: 30px !important;
        line-height: 1.1 !important;
        margin-bottom: 20px !important;
    }
    /* Reset column padding so image hits the edges nicely */
    .elementor-row .elementor-column.cb-who-media > .elementor-element-populated,
    .elementor-row .elementor-column:not(.cb-who-media):not(.cb-hero-media) > .elementor-element-populated {
        padding: 0 !important;
    }
    /* Section padding tighter on mobile */
    .elementor-section { padding-top: 60px !important; padding-bottom: 60px !important; }
    /* Bullet items */
    .elementor-element.cb-who-statements ul li,
    .elementor-element.cb-who-statements .cb-statements li {
        font-size: 14.5px !important;
    }
    /* Image column: image first on mobile, like hero */
    .elementor-column.cb-who-media,
    .elementor-element.cb-who-media {
        order: -1 !important;
        margin-bottom: 28px !important;
    }
    /* Container padding less aggressive */
    .elementor-section .elementor-container { padding-left: 20px !important; padding-right: 20px !important; }
}

/* SMALL MOBILE (480px) — Who We Are */
@media (max-width: 480px) {
    .elementor-widget-text-editor h2 { font-size: 26px !important; line-height: 1.12 !important; }
    .elementor-element.cb-who-statements ul li,
    .elementor-element.cb-who-statements .cb-statements li { font-size: 13.5px !important; }
    .elementor-element.cb-who-image .elementor-image img,
    .elementor-element.cb-who-image img { max-height: 320px; }
}

/* =========================================================
   SECTION 3 — SERVICES (4-card grid)
   ========================================================= */

/* The 4-up card grid wrapper */
.elementor-section .cb-svc-grid {
    margin-top: 20px !important;
}

/* The service card */
.elementor-element.cb-svc-card-wrap .cb-svc-card {
    background: #ffffff;
    border: 1px solid #EBE0D5;
    border-radius: 22px;
    padding: 32px 28px 34px;
    box-shadow: 0 4px 18px -8px rgba(82,48,32,.18);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.elementor-element.cb-svc-card-wrap:hover .cb-svc-card {
    transform: translateY(-8px);
    box-shadow: 0 26px 60px -28px rgba(120,60,38,.45);
    border-color: transparent;
}

/* Top row: icon tile + number */
.cb-svc-card .cb-svc-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 22px;
}
.cb-svc-card .cb-svc-ic {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #FCE9DF;
    display: grid;
    place-items: center;
    color: #C8252B;
}
.cb-svc-card .cb-svc-ic svg {
    width: 30px;
    height: 30px;
}
.cb-svc-card .cb-svc-num {
    font-family: 'Glitten', serif;
    font-size: 16px;
    color: #C8252B;
    font-weight: 400;
    margin-top: 4px;
}

/* Card title */
.cb-svc-card h3 {
    font-family: 'Glitten', serif !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
    color: #2A211C !important;
    margin: 0 0 12px 0 !important;
    font-weight: 400 !important;
    letter-spacing: -0.005em !important;
}

/* Card description */
.cb-svc-card p {
    font-family: 'Rubrik', sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: #4A3F38 !important;
    margin: 0 0 14px 0 !important;
}

/* Inline tag pills for services with subcategories */
.cb-svc-card .cb-svc-list {
    list-style: none !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
.cb-svc-card .cb-svc-list li {
    font-family: 'Rubrik', sans-serif !important;
    font-size: 11.5px !important;
    color: #4A3F38 !important;
    background: #F6EEE4 !important;
    border-radius: 999px !important;
    padding: 5px 11px !important;
    margin: 0 !important;
    font-weight: 500 !important;
    display: inline-block !important;
}
.cb-svc-card .cb-svc-list li::before {
    content: none !important;
}

/* Service column inner padding (reset so cards fill column width) */
.cb-svc-grid .elementor-column > .elementor-element-populated {
    padding: 0 !important;
}

/* Mobile responsive: 2 columns at tablet, 1 at mobile */
@media (max-width: 1080px) {
    .cb-svc-card { padding: 26px 22px 28px; }
    .cb-svc-card h3 { font-size: 20px !important; }
    .cb-svc-card p { font-size: 14px !important; }
}
@media (max-width: 900px) {
    .cb-svc-grid .elementor-row {
        flex-wrap: wrap !important;
    }
    .cb-svc-grid .elementor-column {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: 20px !important;
    }
}
@media (max-width: 600px) {
    .cb-svc-grid .elementor-column {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .cb-svc-card { padding: 24px 22px 26px; }
}

/* =========================================================
   SECTION 3 — SERVICE BLOCKS (heading + image, alternating)
   ========================================================= */

/* Image in service blocks — generous rounded frame */
.elementor-element.cb-svc-img .elementor-image img,
.elementor-element.cb-svc-img img {
    border-radius: 22px !important;
    box-shadow: 0 30px 70px -30px rgba(120,60,38,.45) !important;
    width: 100% !important;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

/* Service text columns — vertically centered */
.elementor-column.cb-svc-block-text,
.elementor-column.cb-svc-block-img {
    align-self: center !important;
}

/* =========================================================
   SECTION 3 — PACKAGING / FINISHING IMAGE-BOX GRID
   Used for sub-services with mini-image cards (the pattern
   the user shared from the parent-theme demo)
   ========================================================= */

.cb-pkg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 22px;
    margin: 0;
    padding: 0;
}

.cb-pkg-grid .cb-pkg-card {
    background: #ffffff;
    border: 1px solid #EBE0D5;
    border-radius: 18px;
    padding: 24px 18px 22px;
    text-align: center;
    text-decoration: none !important;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
    box-shadow: 0 4px 18px -8px rgba(82,48,32,.16);
}
.cb-pkg-grid .cb-pkg-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px -22px rgba(120,60,38,.40);
    border-color: transparent;
}

/* Image inside each pkg card */
.cb-pkg-grid .cb-pkg-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: #FCE9DF;
    margin-bottom: 16px;
    display: grid;
    place-items: center;
}
.cb-pkg-grid .cb-pkg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.cb-pkg-grid .cb-pkg-card:hover .cb-pkg-img img {
    transform: scale(1.08);
}

/* Card title */
.cb-pkg-grid .cb-pkg-card h4 {
    font-family: 'Glitten', serif !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    color: #2A211C !important;
    margin: 0 !important;
    font-weight: 400 !important;
    letter-spacing: -0.005em !important;
    transition: color .3s;
}
.cb-pkg-grid .cb-pkg-card:hover h4 {
    color: #A01D22 !important;
}

/* Mobile: tighter grid */
@media (max-width: 768px) {
    .cb-pkg-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .cb-pkg-grid .cb-pkg-card { padding: 18px 14px 16px; border-radius: 14px; }
    .cb-pkg-grid .cb-pkg-img { margin-bottom: 12px; border-radius: 10px; }
    .cb-pkg-grid .cb-pkg-card h4 { font-size: 14.5px !important; }
}
@media (max-width: 420px) {
    .cb-pkg-grid { gap: 10px; }
}

/* Service-block layout on mobile: stack columns, image always above text */
@media (max-width: 768px) {
    .elementor-column.cb-svc-block-img { order: -1 !important; margin-bottom: 22px !important; }
    .elementor-element.cb-svc-img .elementor-image img,
    .elementor-element.cb-svc-img img { max-height: 360px; }
}

/* =========================================================
   SECTION 3 — IMAGE-BOX WIDGET GRID (the staff-editable version)
   Uses Elementor's native Image Box widget so staff edits via UI,
   not by editing HTML code.
   ========================================================= */

/* The COLUMN that contains all image-box widgets becomes a CSS grid */
.elementor-column.cb-pkg-grid-column > .elementor-element-populated > .elementor-widget-wrap,
.elementor-column.cb-pkg-grid-column .elementor-widget-wrap {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 22px !important;
}

/* Each image-box widget becomes a card — styled like the parent-theme demo:
   larger white card with shadow, centered image at top (in peach tile),
   prominent Glitten title, subtitle text below. */
.elementor-widget-image-box.cb-pkg-card {
    background: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s !important;
    box-shadow: 0 10px 30px -12px rgba(82,48,32,.18) !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 28px 22px 30px !important;
}
.elementor-widget-image-box.cb-pkg-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 56px -22px rgba(120,60,38,.40) !important;
}

/* Internal wrapper: stacked vertically, centered */
.elementor-widget-image-box.cb-pkg-card .elementor-image-box-wrapper {
    text-align: center !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Image area: peach-tinted square tile, smaller than the card so it looks like an icon */
.elementor-widget-image-box.cb-pkg-card .elementor-image-box-img {
    margin: 0 auto 22px auto !important;
    width: 70% !important;
    max-width: 160px !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: #FCE9DF !important;
    border-radius: 16px !important;
    display: block !important;
}
.elementor-widget-image-box.cb-pkg-card .elementor-image-box-img img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    transition: transform .6s cubic-bezier(.2,.7,.2,1) !important;
    border-radius: 0 !important;
    display: block !important;
}
.elementor-widget-image-box.cb-pkg-card:hover .elementor-image-box-img img {
    transform: scale(1.08);
}

/* Title — larger Glitten, centered */
.elementor-widget-image-box.cb-pkg-card .elementor-image-box-content {
    padding: 0 !important;
    width: 100% !important;
}
.elementor-widget-image-box.cb-pkg-card .elementor-image-box-title {
    font-family: 'Glitten', serif !important;
    font-size: 22px !important;
    color: #2A211C !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.1 !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    transition: color .3s !important;
}
.elementor-widget-image-box.cb-pkg-card:hover .elementor-image-box-title {
    color: #A01D22 !important;
}

/* Description / subtitle — small muted text, like "text here" placeholder */
.elementor-widget-image-box.cb-pkg-card .elementor-image-box-description {
    font-family: 'Rubrik', sans-serif !important;
    font-size: 13px !important;
    color: #8A7B70 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* RESPONSIVE — image-box grid breakpoints */
/* Tablet (1080px): 3 columns */
@media (max-width: 1080px) {
    .elementor-column.cb-pkg-grid-column > .elementor-element-populated > .elementor-widget-wrap,
    .elementor-column.cb-pkg-grid-column .elementor-widget-wrap {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .elementor-widget-image-box.cb-pkg-card .elementor-image-box-title { font-size: 16px !important; }
}
/* Mobile (768px): 2 columns */
@media (max-width: 768px) {
    .elementor-column.cb-pkg-grid-column > .elementor-element-populated > .elementor-widget-wrap,
    .elementor-column.cb-pkg-grid-column .elementor-widget-wrap {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
    .elementor-widget-image-box.cb-pkg-card .elementor-image-box-content { padding: 14px 12px 16px !important; }
    .elementor-widget-image-box.cb-pkg-card .elementor-image-box-title { font-size: 14.5px !important; }
}
/* Small mobile (420px): tighter gap, keep 2 columns */
@media (max-width: 420px) {
    .elementor-column.cb-pkg-grid-column > .elementor-element-populated > .elementor-widget-wrap,
    .elementor-column.cb-pkg-grid-column .elementor-widget-wrap {
        gap: 10px !important;
    }
    .elementor-widget-image-box.cb-pkg-card .elementor-image-box-title { font-size: 13px !important; }
}

/* =========================================================
   SECTION 3 — Service blocks (heading + image) — better balance
   ========================================================= */

/* Service block image — proper proportion, max-height cap */
.elementor-element.cb-svc-img .elementor-image img,
.elementor-element.cb-svc-img img {
    border-radius: 22px !important;
    box-shadow: 0 30px 70px -30px rgba(120,60,38,.45) !important;
    width: 100% !important;
    object-fit: cover;
    aspect-ratio: 5 / 4 !important;
    max-height: 560px !important;
}

/* Section 3 H2 heading widget (Branding & Design, Production Support etc) */
.elementor-widget-heading h2.elementor-heading-title {
    font-family: 'Glitten', serif !important;
    font-size: 42px !important;
    line-height: 1.06 !important;
    letter-spacing: -0.02em !important;
    color: #2A211C !important;
    margin: 0 0 22px 0 !important;
    font-weight: 400 !important;
}

/* Service block tablet */
@media (max-width: 1080px) {
    .elementor-widget-heading h2.elementor-heading-title { font-size: 36px !important; }
    .elementor-element.cb-svc-img .elementor-image img,
    .elementor-element.cb-svc-img img { max-height: 440px !important; }
}

/* Service block mobile — stack columns image first */
@media (max-width: 768px) {
    .elementor-widget-heading h2.elementor-heading-title { font-size: 30px !important; line-height: 1.1 !important; margin-bottom: 18px !important; }
    .elementor-element.cb-svc-img .elementor-image img,
    .elementor-element.cb-svc-img img {
        max-height: 360px !important;
        aspect-ratio: 4 / 3 !important;
        border-radius: 18px !important;
    }
    /* Stack columns: image first */
    .elementor-column.cb-svc-block-img { order: -1 !important; margin-bottom: 24px !important; }
}

@media (max-width: 480px) {
    .elementor-widget-heading h2.elementor-heading-title { font-size: 26px !important; }
    .elementor-element.cb-svc-img .elementor-image img,
    .elementor-element.cb-svc-img img { max-height: 280px !important; }
}

/* =========================================================
   GLOBAL SPACING / EDITORIAL RHYTHM
   Spacious layouts feel premium. These rules give breathing room
   between widgets so sections don't feel cramped.
   ========================================================= */

/* H2 (in text-editor widgets) — generous bottom margin */
.elementor-widget-text-editor h2 {
    margin: 0 0 30px 0 !important;
    font-family: 'Glitten', serif !important;
    letter-spacing: -0.02em !important;
    line-height: 1.06 !important;
}

/* Paragraphs in text-editor — better line height + bottom margin */
.elementor-widget-text-editor p {
    margin: 0 0 22px 0;
    line-height: 1.7;
}

/* Bullet list section header spacing */
.elementor-element.cb-who-statements {
    margin-top: 14px !important;
}

/* Increase column inner padding for spacious feel */
@media (min-width: 1024px) {
    .elementor-row .elementor-column.cb-who-media > .elementor-element-populated {
        padding: 0 30px 0 0 !important;
    }
    .elementor-row .elementor-column:not(.cb-who-media):not(.cb-hero-media) > .elementor-element-populated {
        padding: 0 0 0 30px !important;
    }
}

/* =========================================================
   SECTION 4 — PACKAGING SHOWCASE (Tabs widget styled as pill filters)
   ========================================================= */

/* Hide the default Elementor tab title border/background */
.elementor-element.cb-showcase-tabs {
    background: transparent !important;
}
.elementor-element.cb-showcase-tabs .elementor-tabs {
    background: transparent !important;
    border: none !important;
}

/* The tab title row — render as horizontal pills with gaps */
.elementor-element.cb-showcase-tabs .elementor-tabs-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 40px !important;
    border: none !important;
    background: transparent !important;
    justify-content: flex-start !important;
}

/* Each individual tab title — styled as a pill button */
.elementor-element.cb-showcase-tabs .elementor-tab-title {
    background: #ffffff !important;
    border: 1px solid #EBE0D5 !important;
    border-radius: 999px !important;
    padding: 10px 22px !important;
    font-family: 'Rubrik', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: #4A3F38 !important;
    cursor: pointer !important;
    transition: all .25s cubic-bezier(.2,.8,.2,1) !important;
    margin: 0 !important;
    line-height: 1 !important;
}
.elementor-element.cb-showcase-tabs .elementor-tab-title:hover {
    border-color: #C8252B !important;
    color: #A01D22 !important;
    transform: translateY(-1px);
}
.elementor-element.cb-showcase-tabs .elementor-tab-title.elementor-active {
    background: #2A211C !important;
    border-color: #2A211C !important;
    color: #ffffff !important;
}

/* Remove default tab title icon */
.elementor-element.cb-showcase-tabs .elementor-tab-title .elementor-tab-title-icon {
    display: none !important;
}

/* Tab content area — no border, just the grid */
.elementor-element.cb-showcase-tabs .elementor-tab-content {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* The grid inside each tab */
.cb-showcase-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Each showcase card */
.cb-showcase-grid .cb-show-card {
    position: relative !important;
    display: block !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: #F6EEE4 !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s !important;
    box-shadow: 0 4px 18px -8px rgba(82,48,32,.16) !important;
}
.cb-showcase-grid .cb-show-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 26px 60px -28px rgba(120,60,38,.40) !important;
}

/* Card image — square aspect, hover zoom */
.cb-showcase-grid .cb-show-img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    display: block !important;
}
.cb-showcase-grid .cb-show-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform .6s cubic-bezier(.2,.7,.2,1) !important;
    display: block !important;
}
.cb-showcase-grid .cb-show-card:hover .cb-show-img img {
    transform: scale(1.06) !important;
}

/* Category tag — top-left of card */
.cb-showcase-grid .cb-show-tag {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    z-index: 3 !important;
    background: rgba(255,255,255,.94) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    color: #2A211C !important;
    font-family: 'Rubrik', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
}

/* Caption — bottom of card, appears on hover */
.cb-showcase-grid .cb-show-cap {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    padding: 50px 22px 22px !important;
    background: linear-gradient(to top, rgba(36,24,18,.82), transparent 80%) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 12px !important;
    opacity: 0 !important;
    transform: translateY(8px) !important;
    transition: opacity .35s, transform .35s !important;
}
.cb-showcase-grid .cb-show-card:hover .cb-show-cap {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
.cb-showcase-grid .cb-show-cap h4 {
    font-family: 'Glitten', serif !important;
    font-size: 20px !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    font-weight: 400 !important;
}
.cb-showcase-grid .cb-show-plus {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #A01D22 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    flex: none !important;
    line-height: 1 !important;
    transition: transform .25s !important;
}
.cb-showcase-grid .cb-show-card:hover .cb-show-plus {
    transform: rotate(90deg) !important;
}

/* Responsive */
@media (max-width: 1080px) {
    .cb-showcase-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important; }
    .elementor-element.cb-showcase-tabs .elementor-tab-title { font-size: 13.5px !important; padding: 9px 18px !important; }
}
@media (max-width: 768px) {
    .cb-showcase-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
    .cb-showcase-grid .cb-show-tag { font-size: 10.5px !important; padding: 5px 10px !important; top: 12px !important; left: 12px !important; }
    .cb-showcase-grid .cb-show-cap { padding: 36px 16px 16px !important; }
    .cb-showcase-grid .cb-show-cap h4 { font-size: 16px !important; }
    .cb-showcase-grid .cb-show-plus { width: 30px !important; height: 30px !important; font-size: 17px !important; }
    /* Tabs wrap nicely on mobile */
    .elementor-element.cb-showcase-tabs .elementor-tabs-wrapper { gap: 6px !important; margin-bottom: 28px !important; }
    .elementor-element.cb-showcase-tabs .elementor-tab-title { font-size: 12.5px !important; padding: 8px 14px !important; }
}
@media (max-width: 480px) {
    .cb-showcase-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
    .cb-showcase-grid .cb-show-cap { opacity: 1 !important; transform: translateY(0) !important; }
}

/* Hide-by-filter helper */
.cb-show-card.cb-hide { display: none !important; }

/* Filter buttons used inside the HTML widget showcase */
.cb-showcase-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
    justify-content: flex-start;
}
.cb-showcase-filters .cb-show-filter {
    background: #ffffff;
    border: 1px solid #EBE0D5;
    border-radius: 999px;
    padding: 10px 22px;
    font-family: 'Rubrik', sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    color: #4A3F38;
    cursor: pointer;
    transition: all .25s cubic-bezier(.2,.8,.2,1);
}
.cb-showcase-filters .cb-show-filter:hover {
    border-color: #C8252B;
    color: #A01D22;
    transform: translateY(-1px);
}
.cb-showcase-filters .cb-show-filter.is-active {
    background: #2A211C;
    border-color: #2A211C;
    color: #ffffff;
}

/* =========================================================
   EDITORIAL "Specialty" LAYOUT
   3-column composition: items left | feature image center | items right
   Used by alt Section 4 and main Section 5 templates.
   ========================================================= */

.cb-editorial {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 56px;
    align-items: center;
}

.cb-editorial-col {
    display: flex;
    flex-direction: column;
    gap: 44px;
}

.cb-editorial-item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

/* Reverse direction for right column so thumbnail appears at right */
.cb-editorial-col.is-right .cb-editorial-item {
    flex-direction: row-reverse;
    text-align: right;
}

.cb-editorial-item .cb-ed-thumb {
    width: 70px;
    height: 70px;
    border-radius: 14px;
    flex: none;
    overflow: hidden;
    background: #FCE9DF;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 18px -10px rgba(82,48,32,.25);
}
.cb-editorial-item .cb-ed-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cb-editorial-item .cb-ed-body h3 {
    font-family: 'Glitten', serif !important;
    font-size: 24px !important;
    color: #2A211C !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.1 !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
}
.cb-editorial-item .cb-ed-body p {
    font-family: 'Rubrik', sans-serif !important;
    font-size: 14.5px !important;
    color: #4A3F38 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Center feature image — fills the column height set by side items
   (so it scales naturally with 2-5 items per side without leaving gaps) */
.cb-editorial-feature {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 40px 90px -36px rgba(120,60,38,.55);
    background: #FCE9DF;
    align-self: stretch;
    min-height: 100%;
    height: 100%;
}
.cb-editorial-feature img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* When grid stretches the feature, ensure it's at least image-proportional */
@supports (aspect-ratio: 1) {
    .cb-editorial-feature {
        min-height: max(100%, 540px);
    }
}

/* Tighter gap between items when there are many of them */
.cb-editorial-col {
    gap: 36px;
}

/* Dark variant for Why CarteBlanche section */
.cb-editorial.is-dark .cb-editorial-item .cb-ed-body h3 { color: #ffffff !important; }
.cb-editorial.is-dark .cb-editorial-item .cb-ed-body p { color: rgba(255,255,255,.72) !important; }
.cb-editorial.is-dark .cb-editorial-item .cb-ed-thumb { background: rgba(255,255,255,.08); }

/* H2 light variant — for dark sections (Section 5 Why)
   BRUTE FORCE selectors to win against parent theme,
   plus universal descendant so wrapped <span>/<a> stay white too. */
html body .cb-h2-light h2,
html body .cb-h2-light h2 *,
html body .cb-h2-light h2 span,
html body .cb-h2-light h2 a,
html body .cb-h2-light .elementor-heading-title,
html body .cb-h2-light .elementor-heading-title *,
html body .elementor-element.cb-h2-light h2,
html body .elementor-element.cb-h2-light h2 *,
html body .elementor-element.cb-h2-light .elementor-heading-title,
html body .elementor-element.cb-h2-light .elementor-heading-title *,
html body .elementor-widget-heading.cb-h2-light h2,
html body .elementor-widget-heading.cb-h2-light h2 *,
html body .elementor-widget-heading.cb-h2-light .elementor-heading-title,
html body .elementor-widget-heading.cb-h2-light .elementor-heading-title *,
html body [class*="cb-h2-light"] h2.elementor-heading-title,
html body [class*="cb-h2-light"] h2.elementor-heading-title *,
html body div.elementor-page .cb-h2-light h2,
html body div.elementor-page .cb-h2-light h2 .elementor-heading-title,
html body div.elementor-page .cb-h2-light h2 * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Responsive */
@media (max-width: 1080px) {
    .cb-editorial { gap: 32px; }
    .cb-editorial-col { gap: 36px; }
    .cb-editorial-item .cb-ed-thumb { width: 60px; height: 60px; }
    .cb-editorial-item .cb-ed-body h3 { font-size: 20px !important; }
}
@media (max-width: 900px) {
    .cb-editorial {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .cb-editorial-feature { order: -1; aspect-ratio: 4 / 3; max-height: 420px; }
    .cb-editorial-col.is-right .cb-editorial-item {
        flex-direction: row;
        text-align: left;
    }
    .cb-editorial-col { gap: 28px; }
}
@media (max-width: 480px) {
    .cb-editorial-item .cb-ed-thumb { width: 52px; height: 52px; border-radius: 12px; }
    .cb-editorial-item .cb-ed-body h3 { font-size: 18px !important; }
    .cb-editorial-item .cb-ed-body p { font-size: 13.5px !important; }
}

/* =========================================================
   SECTION 5 — WHY CARTE BLANCHE (MANIFESTO)
   Big numbered statements stacked vertically. Each row:
   giant red gradient number (left) + statement (right).
   Dark warm-ink bg. Hairline divider between rows.
   ========================================================= */

.cb-manifesto {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cb-mani-row {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 64px;
    align-items: center;
    padding: 56px 0;
    border-top: 1px solid rgba(255,255,255,.10);
    position: relative;
    transition: padding .35s cubic-bezier(.2,.7,.2,1);
}
.cb-mani-row:last-child { border-bottom: 1px solid rgba(255,255,255,.10); }

/* Subtle background warm tint on hover */
.cb-mani-row::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 50%, rgba(200,37,43,.10) 0%, transparent 55%);
    opacity: 0;
    transition: opacity .5s cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
}
.cb-mani-row:hover::before { opacity: 1; }

/* Giant number — uses ::before so staff edits the HTML data-num attr only */
.cb-mani-num {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 140px;
    z-index: 1;
}
.cb-mani-num::before {
    content: attr(data-num);
    font-family: 'Glitten', serif;
    font-size: clamp(96px, 11vw, 160px);
    line-height: 0.9;
    font-weight: 400;
    letter-spacing: -0.04em;
    background-image: linear-gradient(135deg, #E0473C 0%, #C8252B 50%, #A01D22 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.cb-mani-row:hover .cb-mani-num::before {
    transform: translateX(6px) scale(1.04);
}

/* Thin red accent bar under the number — slides out on hover */
.cb-mani-num::after {
    content: "";
    position: absolute;
    bottom: 22px;
    left: 0;
    width: 0;
    height: 3px;
    border-radius: 2px;
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    transition: width .5s cubic-bezier(.2,.7,.2,1);
}
.cb-mani-row:hover .cb-mani-num::after { width: 86px; }

/* Body block — tag + heading + paragraph */
.cb-mani-body {
    position: relative;
    z-index: 1;
}

.cb-mani-tag {
    font-family: 'Rubrik', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    margin-bottom: 14px;
}

.cb-mani-body h3 {
    font-family: 'Glitten', serif !important;
    font-size: clamp(28px, 2.6vw, 36px) !important;
    color: #ffffff !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.08 !important;
    font-weight: 400 !important;
    letter-spacing: -0.015em !important;
    transition: color .35s, transform .35s;
}
.cb-mani-row:hover .cb-mani-body h3 {
    color: #FCE9DF !important;
}

.cb-mani-body p {
    font-family: 'Rubrik', sans-serif !important;
    font-size: 16px !important;
    color: rgba(255,255,255,.72) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    max-width: 620px;
}

/* Tablet */
@media (max-width: 1080px) {
    .cb-mani-row {
        grid-template-columns: 220px 1fr;
        gap: 40px;
        padding: 44px 0;
    }
    .cb-mani-num { min-height: 110px; }
    .cb-mani-body p { font-size: 15px !important; }
}

/* Mobile — stack number above text, smaller numbers */
@media (max-width: 768px) {
    .cb-mani-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 36px 0;
    }
    .cb-mani-num {
        min-height: auto;
        margin-bottom: 4px;
    }
    .cb-mani-num::before {
        font-size: 82px;
    }
    .cb-mani-num::after {
        bottom: -8px;
    }
    .cb-mani-row:hover .cb-mani-num::after { width: 60px; }
    .cb-mani-tag { font-size: 10.5px; letter-spacing: 0.22em; margin-bottom: 10px; }
    .cb-mani-body h3 { font-size: 24px !important; margin-bottom: 12px !important; }
    .cb-mani-body p { font-size: 14.5px !important; line-height: 1.65 !important; }
}

@media (max-width: 480px) {
    .cb-mani-row { padding: 28px 0; }
    .cb-mani-num::before { font-size: 68px; }
    .cb-mani-body h3 { font-size: 21px !important; }
}

/* =========================================================
   SECTION 6 — HOW IT WORKS (progress journey)
   4 numbered steps connected by an animated line.
   Visual journey from "Share Your Idea" to "Deliver the Product".
   ========================================================= */

/* Row containing the 4 steps — anchor for the connector line */
.elementor-element.cb-how-steps-row {
    position: relative !important;
    padding: 30px 0 0 !important;
}

/* The animated connector line behind the icons.
   Drawn as a gradient that animates from left to right on load. */
.elementor-element.cb-how-steps-row > .elementor-container::before,
.elementor-element.cb-how-steps-row > .elementor-container > .elementor-row::before {
    content: "";
    position: absolute;
    top: 95px;
    left: 13%;
    right: 13%;
    height: 4px;
    border-radius: 2px;
    background:
        linear-gradient(90deg, #C8252B 0%, #C8252B 100%) left center / 0% 100% no-repeat,
        repeating-linear-gradient(90deg, rgba(200,37,43,.18) 0 10px, transparent 10px 20px);
    z-index: 0;
    animation: cbDrawProgress 2.2s cubic-bezier(.5,.05,.3,1) .4s both;
}

@keyframes cbDrawProgress {
    from { background-size: 0% 100%, 100% 100%; }
    to   { background-size: 100% 100%, 100% 100%; }
}

/* Forward-pointing chevrons that appear between steps */
.elementor-element.cb-how-steps-row > .elementor-container > .elementor-row::after {
    content: "›  ›  ›  ›";
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Rubrik', sans-serif;
    font-size: 28px;
    color: rgba(200,37,43,.25);
    letter-spacing: 16em;
    pointer-events: none;
    z-index: 0;
}

/* Each step container — positioning context */
.elementor-element.cb-how-step {
    position: relative !important;
    z-index: 1 !important;
}

/* The image becomes a large circle "node" on the journey line */
.elementor-element.cb-how-step .elementor-image-box-wrapper {
    text-align: center !important;
    padding: 0 !important;
}
.elementor-element.cb-how-step .elementor-image-box-img {
    width: 130px !important;
    height: 130px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 6px solid #FBF6EF !important;
    box-shadow: 0 14px 36px -16px rgba(82,48,32,.30) !important;
    margin: 0 auto 28px !important;
    display: grid !important;
    place-items: center !important;
    position: relative;
    overflow: visible !important;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s;
}
.elementor-element.cb-how-step .elementor-image-box-img img {
    width: 64% !important;
    height: 64% !important;
    max-width: 64% !important;
    object-fit: contain !important;
    border-radius: 0 !important;
}

/* Hover: lift the node, brighten the border to brand red */
.elementor-element.cb-how-step:hover .elementor-image-box-img {
    transform: translateY(-6px);
    border-color: rgba(200,37,43,.30) !important;
    box-shadow: 0 24px 50px -18px rgba(168,29,34,.30) !important;
}

/* The numbered badge — red gradient circle, pinned top-right of icon */
.elementor-element.cb-how-step .elementor-image-box-img::after {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    color: #ffffff;
    font-family: 'Glitten', serif;
    font-size: 16px;
    display: grid;
    place-items: center;
    z-index: 2;
    box-shadow: 0 10px 22px -6px rgba(168,29,34,.55);
    font-weight: 400;
    line-height: 1;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.elementor-element.cb-how-step-1 .elementor-image-box-img::after { content: "01"; }
.elementor-element.cb-how-step-2 .elementor-image-box-img::after { content: "02"; }
.elementor-element.cb-how-step-3 .elementor-image-box-img::after { content: "03"; }
.elementor-element.cb-how-step-4 .elementor-image-box-img::after { content: "04"; }

.elementor-element.cb-how-step:hover .elementor-image-box-img::after {
    transform: scale(1.12);
}

/* Subtle pulse on the active step number — feels alive */
@keyframes cbStepPulse {
    0%, 100% { box-shadow: 0 10px 22px -6px rgba(168,29,34,.55), 0 0 0 0 rgba(200,37,43,.0); }
    50%      { box-shadow: 0 10px 22px -6px rgba(168,29,34,.55), 0 0 0 14px rgba(200,37,43,.0); }
}
.elementor-element.cb-how-step .elementor-image-box-img::after {
    animation: cbStepPulse 3s ease-in-out infinite;
}

/* Step title — Glitten, centered */
.elementor-element.cb-how-step .elementor-image-box-content {
    padding: 0 !important;
    text-align: center !important;
}
.elementor-element.cb-how-step .elementor-image-box-title {
    font-family: 'Glitten', serif !important;
    font-size: 22px !important;
    color: #2A211C !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;
    letter-spacing: -0.005em !important;
    transition: color .3s;
}
.elementor-element.cb-how-step:hover .elementor-image-box-title {
    color: #A01D22 !important;
}

/* Step description */
.elementor-element.cb-how-step .elementor-image-box-description {
    font-family: 'Rubrik', sans-serif !important;
    font-size: 14.5px !important;
    color: #4A3F38 !important;
    line-height: 1.6 !important;
    max-width: 260px !important;
    margin: 0 auto !important;
}

/* Reset step column inner padding */
.elementor-element.cb-how-steps-row .elementor-column > .elementor-element-populated {
    padding: 0 !important;
}

/* RESPONSIVE — tablet 2x2, mobile stack */
@media (max-width: 1080px) {
    .elementor-element.cb-how-step .elementor-image-box-img { width: 110px !important; height: 110px !important; border-width: 5px !important; }
    .elementor-element.cb-how-step .elementor-image-box-img::after { width: 36px; height: 36px; font-size: 14px; }
    .elementor-element.cb-how-steps-row > .elementor-container > .elementor-row::before { top: 82px; }
    .elementor-element.cb-how-steps-row > .elementor-container > .elementor-row::after { top: 67px; }
}

@media (max-width: 900px) {
    /* 2x2 grid on tablet */
    .elementor-element.cb-how-steps-row .elementor-row {
        flex-wrap: wrap !important;
    }
    .elementor-element.cb-how-steps-row .elementor-column {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: 50px !important;
    }
    /* Hide connector line on multi-row layout */
    .elementor-element.cb-how-steps-row > .elementor-container > .elementor-row::before,
    .elementor-element.cb-how-steps-row > .elementor-container > .elementor-row::after,
    .elementor-element.cb-how-steps-row > .elementor-container::before {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .elementor-element.cb-how-steps-row .elementor-column {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 40px !important;
    }
    .elementor-element.cb-how-step .elementor-image-box-img { width: 100px !important; height: 100px !important; }
    .elementor-element.cb-how-step .elementor-image-box-title { font-size: 20px !important; }
}

/* =========================================================
   SECTION 7 — QUOTE CTA (floating card over hero image)
   Full-width packaging photo as backdrop with dark gradient
   overlay; a white "floating card" sits centered on top
   containing the eyebrow, headline, paragraph and CTA button.
   ========================================================= */

/* The outer section — hero image bg with darker gradient overlay.
   html body prefix + multiple variants ensure it ALWAYS applies. */
html body .elementor-section.cb-cta-hero,
html body .elementor-element.cb-cta-hero,
html body section.cb-cta-hero {
    position: relative !important;
    overflow: hidden !important;
}
html body .elementor-section.cb-cta-hero::before,
html body .elementor-element.cb-cta-hero::before,
html body section.cb-cta-hero::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background:
        linear-gradient(180deg, rgba(42,33,28,.78) 0%, rgba(42,33,28,.62) 50%, rgba(42,33,28,.85) 100%),
        radial-gradient(ellipse at center, rgba(200,37,43,.22) 0%, transparent 65%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}
html body .elementor-section.cb-cta-hero > .elementor-container,
html body .elementor-element.cb-cta-hero > .elementor-container,
html body section.cb-cta-hero > .elementor-container {
    position: relative !important;
    z-index: 2 !important;
}

/* The floating card — covers every possible column path inside cb-cta-hero.
   Since the section has only one column, we can safely target ANY column
   inside it as the card, so the card class becomes optional. */
html body .elementor-column.cb-cta-card > .elementor-element-populated,
html body .elementor-element.cb-cta-card > .elementor-element-populated,
html body .cb-cta-hero .elementor-column > .elementor-element-populated,
html body .cb-cta-hero > .elementor-container > .elementor-row > .elementor-column > .elementor-element-populated,
html body section.cb-cta-hero .elementor-column > .elementor-element-populated {
    background: #FFFDFA !important;
    background-color: #FFFDFA !important;
    background-image: none !important;
    border-radius: 28px !important;
    padding: clamp(50px, 5.6vw, 80px) clamp(28px, 4.4vw, 64px) !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    position: relative !important;
    box-shadow:
        0 60px 110px -40px rgba(20,12,8,.65),
        0 30px 60px -28px rgba(20,12,8,.45) !important;
    text-align: center !important;
    border: 1px solid rgba(235,224,213,.6) !important;
}

/* Make sure the button inside the card stays its natural pill width,
   not stretched to full column width */
html body .cb-cta-hero .elementor-widget-button,
html body .cb-cta-card .elementor-widget-button {
    width: auto !important;
    display: inline-block !important;
    text-align: center !important;
}
html body .cb-cta-hero .elementor-widget-button .elementor-button-wrapper,
html body .cb-cta-card .elementor-widget-button .elementor-button-wrapper {
    text-align: center !important;
}
html body .cb-cta-hero .elementor-widget-button .elementor-button,
html body .cb-cta-card .elementor-widget-button .elementor-button {
    width: auto !important;
    display: inline-flex !important;
}

/* Decorative thin gradient bar — top of the card, brand cue */
.elementor-column.cb-cta-card > .elementor-element-populated::before,
.elementor-element.cb-cta-card > .elementor-element-populated::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 5px;
    border-radius: 0 0 4px 4px;
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    pointer-events: none;
}

/* Constrain the inner wrap so the card breathes */
.elementor-column.cb-cta-card > .elementor-element-populated > .elementor-widget-wrap {
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* CTA eyebrow — brand red on cream card */
.elementor-element.cb-cta-eyebrow .elementor-heading-title,
.elementor-widget-heading.cb-cta-eyebrow .elementor-heading-title {
    font-family: 'Rubrik', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    color: #A01D22 !important;
    margin: 0 0 18px 0 !important;
    text-align: center !important;
    display: block !important;
}
.elementor-element.cb-cta-eyebrow .elementor-heading-title::before {
    content: none !important;
    display: none !important;
}

/* CTA headline — Glitten dark ink */
.elementor-element.cb-cta-headline h2.elementor-heading-title,
.elementor-widget-heading.cb-cta-headline h2.elementor-heading-title {
    font-family: 'Glitten', serif !important;
    font-size: clamp(28px, 3.6vw, 44px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
    color: #2A211C !important;
    margin: 0 0 22px 0 !important;
    font-weight: 400 !important;
    text-align: center !important;
}

/* CTA paragraph — muted warm text */
.elementor-element.cb-cta-text p,
.elementor-widget-text-editor.cb-cta-text p {
    color: #4A3F38 !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    margin: 0 auto 32px auto !important;
    text-align: center !important;
    max-width: 520px !important;
}

/* Responsive */
@media (max-width: 1080px) {
    .elementor-section.cb-cta-hero,
    .elementor-element.cb-cta-hero {
        padding-top: 90px !important;
        padding-bottom: 90px !important;
    }
    .elementor-column.cb-cta-card > .elementor-element-populated,
    .elementor-element.cb-cta-card > .elementor-element-populated {
        max-width: 600px !important;
        border-radius: 24px !important;
    }
}

@media (max-width: 768px) {
    .elementor-section.cb-cta-hero,
    .elementor-element.cb-cta-hero {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }
    .elementor-column.cb-cta-card > .elementor-element-populated,
    .elementor-element.cb-cta-card > .elementor-element-populated {
        padding: 44px 26px !important;
        border-radius: 20px !important;
    }
    .elementor-element.cb-cta-headline h2.elementor-heading-title {
        font-size: 26px !important;
        margin-bottom: 16px !important;
    }
    .elementor-element.cb-cta-text p { font-size: 14.5px !important; margin-bottom: 26px !important; }
    .elementor-column.cb-cta-card > .elementor-element-populated::before { width: 60px; height: 4px; }
}

@media (max-width: 480px) {
    .elementor-section.cb-cta-hero,
    .elementor-element.cb-cta-hero {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }
    .elementor-column.cb-cta-card > .elementor-element-populated,
    .elementor-element.cb-cta-card > .elementor-element-populated {
        padding: 38px 22px !important;
    }
    .elementor-element.cb-cta-headline h2.elementor-heading-title { font-size: 23px !important; }
    .elementor-element.cb-cta-eyebrow .elementor-heading-title { font-size: 11px !important; letter-spacing: 0.2em !important; }
}

/* =========================================================
   SECTION 8 — CONTACT PREVIEW
   3 contact-method cards: Phone/WhatsApp, Email, Website.
   Each card is a clickable <a> with icon tile, label, value,
   and action line. Hover lifts the card with brand-red border.
   ========================================================= */

.cb-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    max-width: 1080px;
    margin: 0 auto;
}

.cb-contact-card {
    background: #FFFDFA;
    border: 1px solid #EBE0D5;
    border-radius: 22px;
    padding: 38px 30px 32px;
    text-decoration: none !important;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 24px -10px rgba(82,48,32,.16);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}

/* Top accent bar — slides in on hover */
.cb-contact-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.cb-contact-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 32px 60px -22px rgba(120,60,38,.35);
    border-color: transparent;
}
.cb-contact-card:hover::before {
    transform: scaleX(1);
}

/* Icon tile — peach background, red icon */
.cb-contact-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: #FCE9DF;
    color: #C8252B;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    transition: background .35s, color .35s, transform .45s cubic-bezier(.2,.7,.2,1);
}
.cb-contact-icon svg {
    width: 28px;
    height: 28px;
}
.cb-contact-card:hover .cb-contact-icon {
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    color: #ffffff;
    transform: rotate(-4deg) scale(1.04);
}

/* Meta label — small Rubrik uppercase */
.cb-contact-meta {
    font-family: 'Rubrik', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #8A7B70;
    margin-bottom: 10px;
}

/* The actual value — phone number / email / URL */
.cb-contact-value {
    font-family: 'Glitten', serif;
    font-size: 22px;
    color: #2A211C;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
    word-break: break-word;
    transition: color .3s;
}
.cb-contact-card:hover .cb-contact-value {
    color: #A01D22;
}

/* Action line at the bottom of card */
.cb-contact-action {
    font-family: 'Rubrik', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #A01D22;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cb-contact-action span {
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
    display: inline-block;
}
.cb-contact-card:hover .cb-contact-action span {
    transform: translateX(6px);
}

/* Tablet — narrower cards */
@media (max-width: 1080px) {
    .cb-contact-grid { gap: 20px; }
    .cb-contact-card { padding: 32px 24px 28px; }
    .cb-contact-value { font-size: 19px; }
}

/* Mobile — single column stack, lighter padding */
@media (max-width: 768px) {
    .cb-contact-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 520px;
    }
    .cb-contact-card { padding: 26px 22px 24px; border-radius: 18px; }
    .cb-contact-icon { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 18px; }
    .cb-contact-icon svg { width: 24px; height: 24px; }
    .cb-contact-meta { font-size: 11px; letter-spacing: 0.18em; margin-bottom: 8px; }
    .cb-contact-value { font-size: 17px; margin-bottom: 18px; }
    .cb-contact-action { font-size: 12.5px; }
    /* Disable hover-lift on touch — feels sluggish; trigger a softer press feedback */
    .cb-contact-card:hover { transform: none; }
    .cb-contact-card:active { transform: scale(.985); }
}

@media (max-width: 480px) {
    .cb-contact-card { padding: 22px 18px 20px; }
    .cb-contact-value { font-size: 16px; }
}

/* =========================================================
   MOBILE AUDIT PASS — Cross-section refinements
   Sections were designed desktop-first; this block tightens
   spacing, sizing, and layout for tablet/mobile/small-mobile.
   ========================================================= */

/* ---- GLOBAL: tighten section padding on mobile ---- */
@media (max-width: 768px) {
    /* Default Elementor section verticals get heavy on mobile.
       Trim them while keeping enough breathing room. */
    .elementor-section:not(.cb-cta-hero) {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }
}
@media (max-width: 480px) {
    .elementor-section:not(.cb-cta-hero) {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }
}

/* ---- SECTION 1 HERO: stat strip mobile fix ---- */
@media (max-width: 480px) {
    .elementor-element.cb-stat-num .elementor-heading-title {
        font-size: 24px !important;
        letter-spacing: -0.02em !important;
    }
    .elementor-element.cb-stat-label .elementor-heading-title {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }
}

/* ---- SECTION 2 WHO WE ARE: bullet + image breathing ---- */
@media (max-width: 768px) {
    .elementor-element.cb-who-statements .cb-statements,
    .elementor-element.cb-who-statements ul {
        gap: 11px !important;
        margin-top: 4px !important;
    }
    .elementor-element.cb-who-statements .cb-statements li,
    .elementor-element.cb-who-statements ul li {
        font-size: 14.5px !important;
        line-height: 1.5 !important;
        gap: 11px !important;
    }
    .elementor-element.cb-who-statements .cb-statements li::before,
    .elementor-element.cb-who-statements ul li::before {
        margin-top: 7px !important;
        width: 8px !important;
        height: 8px !important;
    }
}

/* ---- SECTION 3 SERVICES: tighter packaging grid ---- */
@media (max-width: 768px) {
    /* Service-block headings shouldn't dwarf the section */
    .elementor-widget-heading h2.elementor-heading-title { font-size: 28px !important; }
    /* Pkg-grid items more compact */
    .elementor-widget-image-box.cb-pkg-card {
        padding: 18px 14px 20px !important;
    }
    .elementor-widget-image-box.cb-pkg-card .elementor-image-box-img {
        margin-bottom: 14px !important;
        max-width: 130px !important;
    }
    .elementor-widget-image-box.cb-pkg-card .elementor-image-box-title {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }
    .elementor-widget-image-box.cb-pkg-card .elementor-image-box-description {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
}
@media (max-width: 420px) {
    .elementor-widget-image-box.cb-pkg-card .elementor-image-box-title { font-size: 13px !important; }
    .elementor-widget-image-box.cb-pkg-card .elementor-image-box-img { max-width: 110px !important; }
}

/* ---- SECTION 4 SHOWCASE EDITORIAL: compact items on mobile ---- */
/* With 10 items + feature image, vertical stack is long.
   Make each item more compact so total scroll is bearable. */
@media (max-width: 900px) {
    .cb-editorial { gap: 24px !important; }
    .cb-editorial-col { gap: 20px !important; }
    .cb-editorial-feature { max-height: 320px !important; aspect-ratio: 16 / 10 !important; }
    .cb-editorial-item { gap: 14px !important; }
    .cb-editorial-item .cb-ed-thumb { width: 56px !important; height: 56px !important; border-radius: 12px !important; }
    .cb-editorial-item .cb-ed-body h3 { font-size: 17px !important; margin: 0 0 6px 0 !important; }
    .cb-editorial-item .cb-ed-body p { font-size: 13.5px !important; line-height: 1.5 !important; }
}
@media (max-width: 480px) {
    .cb-editorial-feature { max-height: 240px !important; }
    .cb-editorial-item .cb-ed-thumb { width: 48px !important; height: 48px !important; }
    .cb-editorial-item .cb-ed-body h3 { font-size: 16px !important; }
    .cb-editorial-item .cb-ed-body p { font-size: 13px !important; }
}

/* ---- SECTION 6 HOW IT WORKS: shrink icon nodes on small mobile ---- */
@media (max-width: 600px) {
    .elementor-element.cb-how-step .elementor-image-box-img {
        width: 88px !important;
        height: 88px !important;
        border-width: 5px !important;
        margin-bottom: 22px !important;
    }
    .elementor-element.cb-how-step .elementor-image-box-img::after {
        width: 34px;
        height: 34px;
        font-size: 13px;
        top: -2px;
        right: -2px;
    }
    .elementor-element.cb-how-step .elementor-image-box-title { font-size: 18px !important; margin-bottom: 8px !important; }
    .elementor-element.cb-how-step .elementor-image-box-description { font-size: 13.5px !important; max-width: 240px !important; }
    .elementor-element.cb-how-steps-row .elementor-column { margin-bottom: 32px !important; }
}
@media (max-width: 380px) {
    .elementor-element.cb-how-step .elementor-image-box-img { width: 78px !important; height: 78px !important; }
    .elementor-element.cb-how-step .elementor-image-box-title { font-size: 17px !important; }
}

/* ---- SECTION 7 CTA: stronger card visibility on mobile ----
   When the floating card collapses, ensure the dark overlay
   stays heavy enough that white card pops cleanly. */
@media (max-width: 768px) {
    .elementor-section.cb-cta-hero::before,
    .elementor-element.cb-cta-hero::before {
        background:
            linear-gradient(180deg, rgba(42,33,28,.82) 0%, rgba(42,33,28,.70) 50%, rgba(42,33,28,.90) 100%) !important;
    }
}

/* ---- GENERIC: text-editor headlines tighter on mobile ---- */
@media (max-width: 480px) {
    .elementor-widget-text-editor h2 { font-size: 24px !important; line-height: 1.1 !important; margin-bottom: 16px !important; }
    .elementor-widget-text-editor h3 { font-size: 19px !important; }
    .elementor-widget-text-editor p { font-size: 14.5px !important; line-height: 1.6 !important; margin-bottom: 16px !important; }
}

/* ---- GLOBAL: container side padding tightens on small mobile ---- */
@media (max-width: 480px) {
    .elementor-section .elementor-container {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

/* =========================================================
   NUCLEAR FALLBACKS — works even if _css_classes are missing
   These target Elementor's INLINE style attributes (bg-color,
   bg-image), so the rules apply regardless of class names.
   ========================================================= */

/* ---- Section 5 Why: any section with dark ink bg makes its h2 white ---- */
html body .elementor-section[style*="2A211C"] h2,
html body .elementor-section[style*="2A211C"] h2 *,
html body .elementor-section[style*="2A211C"] .elementor-heading-title,
html body .elementor-section[style*="2A211C"] .elementor-heading-title *,
html body .elementor-section[style*="2a211c"] h2,
html body .elementor-section[style*="2a211c"] h2 *,
html body .elementor-section[style*="2a211c"] .elementor-heading-title,
html body .elementor-section[style*="2a211c"] .elementor-heading-title *,
html body .elementor-section[style*="rgb(42, 33, 28)"] h2,
html body .elementor-section[style*="rgb(42, 33, 28)"] .elementor-heading-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ---- Section 7 CTA: target the quotation-cta image bg ---- */
html body .elementor-section[style*="quotation-cta"],
html body .elementor-section[style*="07-quotation"],
html body .elementor-section[style*="quotation"] {
    position: relative !important;
    overflow: hidden !important;
}
html body .elementor-section[style*="quotation-cta"]::before,
html body .elementor-section[style*="07-quotation"]::before,
html body .elementor-section[style*="quotation"]::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background:
        linear-gradient(180deg, rgba(42,33,28,.78) 0%, rgba(42,33,28,.62) 50%, rgba(42,33,28,.85) 100%),
        radial-gradient(ellipse at center, rgba(200,37,43,.22) 0%, transparent 65%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}
html body .elementor-section[style*="quotation-cta"] > .elementor-container,
html body .elementor-section[style*="07-quotation"] > .elementor-container,
html body .elementor-section[style*="quotation"] > .elementor-container {
    position: relative !important;
    z-index: 2 !important;
}

/* Any column inside the quotation-cta section becomes the floating white card */
html body .elementor-section[style*="quotation-cta"] .elementor-column > .elementor-element-populated,
html body .elementor-section[style*="07-quotation"] .elementor-column > .elementor-element-populated,
html body .elementor-section[style*="quotation"] .elementor-column > .elementor-element-populated {
    background: #FFFDFA !important;
    background-color: #FFFDFA !important;
    background-image: none !important;
    border-radius: 28px !important;
    padding: clamp(50px, 5.6vw, 80px) clamp(28px, 4.4vw, 64px) !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    position: relative !important;
    box-shadow:
        0 60px 110px -40px rgba(20,12,8,.65),
        0 30px 60px -28px rgba(20,12,8,.45) !important;
    text-align: center !important;
    border: 1px solid rgba(235,224,213,.6) !important;
}

/* Headline color inside the floating card — dark ink */
html body .elementor-section[style*="quotation-cta"] h2,
html body .elementor-section[style*="quotation-cta"] h2 *,
html body .elementor-section[style*="quotation-cta"] .elementor-heading-title,
html body .elementor-section[style*="quotation"] h2,
html body .elementor-section[style*="quotation"] h2 *,
html body .elementor-section[style*="quotation"] .elementor-heading-title {
    color: #2A211C !important;
    -webkit-text-fill-color: #2A211C !important;
}

/* Eyebrow inside the card — brand red */
html body .elementor-section[style*="quotation"] .elementor-widget-heading:first-child .elementor-heading-title {
    color: #A01D22 !important;
    -webkit-text-fill-color: #A01D22 !important;
}

/* CONSTRAIN the button inside Section 7 — was stretching full-width */
html body .elementor-section[style*="quotation-cta"] .elementor-widget-button,
html body .elementor-section[style*="07-quotation"] .elementor-widget-button,
html body .elementor-section[style*="quotation"] .elementor-widget-button {
    width: auto !important;
    text-align: center !important;
}
html body .elementor-section[style*="quotation-cta"] .elementor-widget-button .elementor-button-wrapper,
html body .elementor-section[style*="07-quotation"] .elementor-widget-button .elementor-button-wrapper,
html body .elementor-section[style*="quotation"] .elementor-widget-button .elementor-button-wrapper {
    text-align: center !important;
    display: block !important;
}
html body .elementor-section[style*="quotation-cta"] .elementor-widget-button .elementor-button,
html body .elementor-section[style*="07-quotation"] .elementor-widget-button .elementor-button,
html body .elementor-section[style*="quotation"] .elementor-widget-button .elementor-button {
    width: auto !important;
    max-width: 280px !important;
    display: inline-flex !important;
    padding: 14px 28px !important;
    font-size: 15px !important;
}

/* =========================================================
   BUTTON WIDTH HARD CAP — pill stays pill-sized, never stretches.
   Strategy: wrapper uses flexbox to center, the button itself is
   inline-flex with max-content width. No 100% width on the button.
   ========================================================= */

/* The widget wrapper — flexbox centers its child without going 100% */
html body .elementor-element.cb-btn-primary .elementor-button-wrapper,
html body .elementor-widget-button.cb-btn-primary .elementor-button-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

/* The button itself — shrink-to-fit pill */
html body a.elementor-button.cb-btn-primary,
html body .elementor-element.cb-btn-primary a.elementor-button,
html body .elementor-element.cb-btn-primary .elementor-button,
html body .elementor-widget-button.cb-btn-primary .elementor-button,
html body .elementor-widget-button.cb-btn-primary a.elementor-button,
html body .elementor-element.cb-btn-primary .elementor-button-link {
    width: auto !important;
    max-width: 320px !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
}

/* Section-7 context fallback (works without cb-btn-primary class) */
html body .elementor-section[style*="quotation"] .elementor-widget-button .elementor-button-wrapper,
html body .elementor-section[style*="quotation"] .elementor-button-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
html body .elementor-section[style*="quotation"] a.elementor-button,
html body .elementor-section[style*="quotation"] .elementor-button,
html body .elementor-section[style*="quotation"] .elementor-button-link {
    width: auto !important;
    max-width: 280px !important;
    min-width: 0 !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
}

/* Also remove the mobile width:100% rule from earlier — user does NOT want
   full-width buttons on mobile either. Keep them pill-sized on every breakpoint. */
@media (max-width: 768px) {
    html body .elementor-element.cb-btn-primary .elementor-button,
    html body .elementor-element.cb-btn-ghost .elementor-button {
        width: auto !important;
        max-width: 280px !important;
    }
}

/* =========================================================
   MOBILE OPTIMIZATION — Deep pass
   This block exists to make the desktop-first design feel
   native on mobile: no horizontal scroll, proper touch tap
   feedback, tighter rhythms, image crops that prioritize subject.
   ========================================================= */

/* ---- GLOBAL: prevent horizontal scroll + improve touch UX ---- */
@media (max-width: 1080px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
        -webkit-text-size-adjust: 100%;
    }
    /* Smooth scroll for in-page anchor links (Quote CTA → Contact etc) */
    html { scroll-behavior: smooth; }
    /* Touch tap: faster response, brand-red tap highlight, no blue iOS overlay */
    a, button, .elementor-button {
        -webkit-tap-highlight-color: rgba(200, 37, 43, 0.18);
        touch-action: manipulation;
    }
    /* Sections shouldn't ever cause horizontal scroll */
    .elementor-section { max-width: 100vw !important; }
    /* Images never overflow their container */
    img { max-width: 100% !important; height: auto; }
}

/* ---- SECTION 1 HERO — tighter on mobile, image grabs attention ---- */
@media (max-width: 768px) {
    /* Hero section padding tighter */
    .elementor-section:first-of-type {
        padding-top: 40px !important;
        padding-bottom: 50px !important;
    }
    /* Eyebrow gets less margin */
    .elementor-element.cb-eyebrow .elementor-heading-title { margin-bottom: 14px !important; }
    /* Hero stat row gap tighter */
    .elementor-row > .elementor-column .cb-stat-num,
    .elementor-row > .elementor-column .cb-stat-label { margin-bottom: 2px !important; }
}
@media (max-width: 480px) {
    /* Smaller stat font ratio that still reads */
    .elementor-element.cb-stat-num .elementor-heading-title { font-size: 22px !important; }
    /* Tap-friendly button minimum height (Apple HIG: 44pt) */
    .elementor-element.cb-btn-primary .elementor-button,
    .elementor-element.cb-btn-ghost .elementor-button {
        min-height: 44px !important;
    }
}

/* ---- SECTION 4 SHOWCASE EDITORIAL — horizontal SLIDER on mobile ----
   12 cards stacked vertically is bad UX. Convert to a horizontal
   scroll-snap carousel — swipe left/right to browse. No JS needed. */
@media (max-width: 768px) {
    html body .cb-editorial {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        gap: 14px !important;
        padding: 8px 16px 28px 16px !important;
        margin: 0 -16px !important;
        scroll-padding-left: 16px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    html body .cb-editorial::-webkit-scrollbar { display: none !important; height: 0 !important; }
    /* Hide the giant center feature image on mobile slider — focus on cards */
    html body .cb-editorial-feature { display: none !important; }
    /* Columns flatten so all items become slider items */
    html body .cb-editorial-col { display: contents !important; }
    /* Each item: a self-contained swipe card */
    html body .cb-editorial-item {
        flex: 0 0 78% !important;
        max-width: 78% !important;
        min-width: 78% !important;
        scroll-snap-align: start !important;
        flex-direction: column !important;
        text-align: left !important;
        gap: 10px !important;
        padding: 14px !important;
        background: #FFFDFA !important;
        border: 1px solid #EBE0D5 !important;
        border-radius: 16px !important;
        box-shadow: 0 6px 18px -8px rgba(82,48,32,.18) !important;
    }
    html body .cb-editorial-item .cb-ed-thumb {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        border-radius: 12px !important;
    }
    html body .cb-editorial-item .cb-ed-body h3 { font-size: 15.5px !important; margin: 6px 0 4px 0 !important; }
    html body .cb-editorial-item .cb-ed-body p { font-size: 13px !important; line-height: 1.5 !important; }
    /* Right-column items keep card flow on mobile */
    html body .cb-editorial-col.is-right .cb-editorial-item {
        flex-direction: column !important;
        text-align: left !important;
    }
    /* Visual hint: subtle scroll indicator at end */
    html body .cb-editorial::after {
        content: "" !important;
        flex: 0 0 16px !important;
    }
}

/* ---- SECTION 3 PACKAGING GRID — horizontal slider on mobile ---- */
@media (max-width: 768px) {
    html body .elementor-column.cb-pkg-grid-column > .elementor-element-populated > .elementor-widget-wrap,
    html body .elementor-column.cb-pkg-grid-column .elementor-widget-wrap {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        gap: 14px !important;
        padding: 8px 16px 28px 16px !important;
        margin: 0 -16px !important;
        scroll-padding-left: 16px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    html body .elementor-column.cb-pkg-grid-column .elementor-widget-wrap::-webkit-scrollbar {
        display: none !important;
        height: 0 !important;
    }
    html body .elementor-column.cb-pkg-grid-column .elementor-widget-image-box.cb-pkg-card {
        flex: 0 0 70% !important;
        max-width: 70% !important;
        min-width: 70% !important;
        scroll-snap-align: start !important;
        margin: 0 !important;
    }
    /* Reset the previous odd-count "span 2 cols" rule — not needed with slider */
    html body .elementor-column.cb-pkg-grid-column .elementor-widget-wrap > .elementor-widget-image-box.cb-pkg-card:nth-child(odd):last-child {
        grid-column: auto !important;
    }
}

@media (max-width: 480px) {
    html body .cb-editorial-item {
        flex: 0 0 82% !important;
        max-width: 82% !important;
        min-width: 82% !important;
    }
    html body .elementor-column.cb-pkg-grid-column .elementor-widget-image-box.cb-pkg-card {
        flex: 0 0 75% !important;
        max-width: 75% !important;
        min-width: 75% !important;
    }
}

/* ---- SECTION 5 WHY (cb-editorial.is-dark) — mobile text contrast.
   When mobile turns each item into a white card via the slider rule
   above, the is-dark variant's "white text" rule was still applying,
   making titles + descriptions invisible. Force DARK text inside
   each white card on mobile. */
@media (max-width: 768px) {
    html body .cb-editorial.is-dark .cb-editorial-item,
    html body .cb-editorial.is-dark .cb-editorial-item * {
        color: #2A211C !important;
        -webkit-text-fill-color: #2A211C !important;
    }
    html body .cb-editorial.is-dark .cb-editorial-item .cb-ed-body h3,
    html body .cb-editorial.is-dark .cb-editorial-item .cb-ed-body h3 * {
        color: #2A211C !important;
        -webkit-text-fill-color: #2A211C !important;
    }
    html body .cb-editorial.is-dark .cb-editorial-item .cb-ed-body p,
    html body .cb-editorial.is-dark .cb-editorial-item .cb-ed-body p * {
        color: #4A3F38 !important;
        -webkit-text-fill-color: #4A3F38 !important;
    }
    /* Thumb stays peach-tinted as designed, but SHRINK it on mobile.
       Default mobile rule above set width:100% + aspect-ratio:4/3 for
       general editorial cards (showcase grid), but for the Why section's
       icon-style images that's WAY too big — the icon dominates the card.
       Make it a centered 92x92 tile instead. */
    html body .cb-editorial.is-dark .cb-editorial-item {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 14px !important;
        text-align: left !important;
        padding: 16px !important;
    }
    html body .cb-editorial.is-dark .cb-editorial-item .cb-ed-thumb {
        background: #FCE9DF !important;
        width: 64px !important;
        height: 64px !important;
        aspect-ratio: auto !important;
        border-radius: 14px !important;
        margin: 0 !important;
        flex: none !important;
        padding: 8px !important;
    }
    html body .cb-editorial.is-dark .cb-editorial-item .cb-ed-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
    html body .cb-editorial.is-dark .cb-editorial-item .cb-ed-body {
        flex: 1 !important;
        min-width: 0 !important;
    }
    html body .cb-editorial.is-dark .cb-editorial-item .cb-ed-body h3 {
        font-size: 15px !important;
        margin: 2px 0 6px 0 !important;
        line-height: 1.2 !important;
    }
    html body .cb-editorial.is-dark .cb-editorial-item .cb-ed-body p {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }
}

/* ---- SECTION 5 MANIFESTO — tighter rows on mobile ---- */
@media (max-width: 768px) {
    .cb-mani-row { padding: 28px 0 !important; gap: 4px !important; }
    .cb-mani-num::before { font-size: 64px !important; }
    .cb-mani-tag { margin-bottom: 8px !important; }
    .cb-mani-body h3 { font-size: 20px !important; margin-bottom: 10px !important; }
    .cb-mani-body p { font-size: 14px !important; line-height: 1.6 !important; }
}
@media (max-width: 480px) {
    .cb-mani-num::before { font-size: 54px !important; }
    .cb-mani-body h3 { font-size: 18px !important; }
}

/* ---- SECTION 6 HOW IT WORKS — single column on mobile, tighter ---- */
@media (max-width: 600px) {
    .elementor-element.cb-how-step .elementor-image-box-img {
        margin-bottom: 16px !important;
    }
    .elementor-element.cb-how-step .elementor-image-box-description {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }
    /* Tighter spacing between stacked steps */
    .elementor-element.cb-how-steps-row .elementor-column { margin-bottom: 24px !important; }
}

/* ---- SECTION 7 CTA — tighter card on mobile, button tap-friendly ---- */
@media (max-width: 768px) {
    html body .elementor-section[style*="quotation"] .elementor-column > .elementor-element-populated {
        padding: 36px 22px !important;
        border-radius: 18px !important;
        max-width: calc(100% - 24px) !important;
    }
    html body .elementor-section[style*="quotation"] .elementor-button {
        min-height: 46px !important;
        padding: 13px 26px !important;
    }
}
@media (max-width: 480px) {
    html body .elementor-section[style*="quotation"] .elementor-column > .elementor-element-populated {
        padding: 30px 18px !important;
    }
}

/* ---- SECTION 8 CONTACT — better touch feedback ---- */
@media (max-width: 768px) {
    .cb-contact-card {
        -webkit-tap-highlight-color: transparent;
    }
    .cb-contact-card:active {
        background: #FBF6EF !important;
    }
    /* Make action line bigger and tappable on mobile */
    .cb-contact-action {
        min-height: 24px !important;
        font-size: 13px !important;
    }
}

/* ---- GLOBAL TYPOGRAPHY: tighter h1/h2/p across mobile ---- */
@media (max-width: 480px) {
    /* Slightly tighten letter-spacing on big headings so they fit narrow screens */
    .elementor-widget-text-editor h1,
    .elementor-widget-text-editor h2 {
        letter-spacing: -0.025em !important;
    }
    /* Sub-pixel line-height adjustment for narrow viewports */
    .elementor-widget-text-editor p { line-height: 1.6 !important; }
}

/* ---- GLOBAL: smoother image rendering on mobile (avoids fuzziness) ---- */
@media (max-width: 768px) {
    .cb-editorial-feature img,
    .elementor-image img,
    .elementor-widget-image img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ---- GLOBAL: kill ALL ::before / ::after that might cause horizontal overflow ---- */
@media (max-width: 768px) {
    .elementor-section { contain: paint; }
}

/* =========================================================
   MOBILE PADDING FIX — kill stacked horizontal padding
   On mobile the section had 40px L/R + container had 18-20px
   + column had its own padding. That's ~60px of dead space on
   each side, making cards float in a narrow column. Wipe the
   section L/R, tighten container, zero out column.
   ========================================================= */
@media (max-width: 768px) {
    /* SECTION: no horizontal padding — let container handle the gutter */
    html body .elementor-section,
    html body section.elementor-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* CONTAINER: small consistent gutter */
    html body .elementor-section .elementor-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    /* COLUMNS: no extra inner padding (they were getting 30px from desktop rule) */
    html body .elementor-row .elementor-column > .elementor-element-populated {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 480px) {
    html body .elementor-section .elementor-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* =========================================================
   PKG-GRID SLIDER FALLBACK — class-agnostic on mobile
   Uses CSS :has() to detect any Elementor column that contains
   .cb-pkg-card widgets and turn its widget-wrap into a horizontal
   scroll-snap carousel. Works even if the column wasn't tagged
   with the explicit cb-pkg-grid-column class.
   Browser support: iOS 16+, Android Chrome 105+, all current desktop.
   ========================================================= */
@media (max-width: 768px) {
    html body .elementor-widget-wrap:has(> .elementor-widget-image-box.cb-pkg-card) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        gap: 14px !important;
        padding: 8px 16px 28px 16px !important;
        margin: 0 -16px !important;
        scroll-padding-left: 16px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        grid-template-columns: none !important;
    }
    html body .elementor-widget-wrap:has(> .elementor-widget-image-box.cb-pkg-card)::-webkit-scrollbar {
        display: none !important;
        height: 0 !important;
    }
    /* Make sure the card itself becomes a slider item */
    html body .elementor-widget-image-box.cb-pkg-card {
        flex: 0 0 70% !important;
        max-width: 70% !important;
        min-width: 70% !important;
        scroll-snap-align: start !important;
        margin: 0 !important;
        grid-column: auto !important;
    }
}
@media (max-width: 480px) {
    html body .elementor-widget-image-box.cb-pkg-card {
        flex: 0 0 76% !important;
        max-width: 76% !important;
        min-width: 76% !important;
    }
}

/* PKG-GRID SLIDER — bulletproof reinforcement.
   The earlier slider rules target .cb-pkg-grid-column. This block adds
   even higher-specificity reinforcement so a stale Elementor cached CSS
   can't keep the cards stacked vertically. */
@media (max-width: 768px) {
    html body .elementor-section .elementor-column.cb-pkg-grid-column,
    html body section .elementor-column.cb-pkg-grid-column {
        overflow: visible !important;
    }
    html body .elementor-column.cb-pkg-grid-column > .elementor-element-populated,
    html body .elementor-column.cb-pkg-grid-column > .elementor-element-populated > .elementor-widget-wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        gap: 14px !important;
        padding: 8px 16px 28px 16px !important;
        margin: 0 -16px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        grid-template-columns: none !important;
    }
    html body .elementor-column.cb-pkg-grid-column > .elementor-element-populated::-webkit-scrollbar,
    html body .elementor-column.cb-pkg-grid-column .elementor-widget-wrap::-webkit-scrollbar {
        display: none !important;
        height: 0 !important;
        width: 0 !important;
    }
    /* Each card: fixed shrink-to-fit width with snap alignment */
    html body .elementor-column.cb-pkg-grid-column .elementor-widget-image-box.cb-pkg-card,
    html body .elementor-column.cb-pkg-grid-column > .elementor-element-populated > .elementor-widget-wrap > .elementor-element.elementor-widget {
        flex: 0 0 70% !important;
        max-width: 70% !important;
        min-width: 70% !important;
        width: 70% !important;
        scroll-snap-align: start !important;
        margin: 0 !important;
        grid-column: auto !important;
    }
}
@media (max-width: 480px) {
    html body .elementor-column.cb-pkg-grid-column .elementor-widget-image-box.cb-pkg-card,
    html body .elementor-column.cb-pkg-grid-column > .elementor-element-populated > .elementor-widget-wrap > .elementor-element.elementor-widget {
        flex: 0 0 76% !important;
        max-width: 76% !important;
        min-width: 76% !important;
        width: 76% !important;
    }
}

/* Section 7 CTA card needs its own padding back since section padding is now 0 */
@media (max-width: 768px) {
    html body .elementor-section[style*="quotation"] {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }
}

/* =========================================================
   BUTTON SHADOW FIX — kill the double-pill ghost ring on mobile
   The aggressive box-shadow blurs ~30px which on small screens
   looks like a 2nd pill behind the button. Tighten on mobile.
   ========================================================= */
@media (max-width: 768px) {
    html body .elementor-element.cb-btn-primary .elementor-button,
    html body .elementor-widget-button.cb-btn-primary .elementor-button {
        box-shadow: 0 8px 18px -8px rgba(168,29,34,.45) !important;
    }
    html body .elementor-element.cb-btn-primary .elementor-button:hover,
    html body .elementor-widget-button.cb-btn-primary .elementor-button:hover {
        box-shadow: 0 12px 24px -10px rgba(168,29,34,.55) !important;
    }
    /* Ghost button — make sure no weird ring either */
    html body .elementor-element.cb-btn-ghost .elementor-button {
        box-shadow: none !important;
    }
}

/* =========================================================
   MOBILE-ONLY / DESKTOP-ONLY HELPERS
   For sections built specifically per breakpoint. Add these
   classes to a section's "CSS Classes" field; pair with Elementor's
   Hide on Desktop / Hide on Mobile visibility toggles for staff
   editing convenience.
   ========================================================= */
.cb-mobile-only { display: none !important; }
.cb-desktop-only { display: block !important; }

@media (max-width: 768px) {
    .cb-mobile-only { display: block !important; }
    .cb-desktop-only { display: none !important; }
}

/* =========================================================
   SECTION 7 MOBILE FALLBACK — ditch the bg image entirely
   The packaging image + dark overlay + white card is a desktop
   treatment. On mobile the overlay/card weren't winning the
   cascade reliably, leaving dark text floating on a bright
   image. Solution: kill the bg image on mobile, use clean cream
   bg with a centered white card. Same content, far better legibility.
   ========================================================= */
@media (max-width: 768px) {
    html body .elementor-section[style*="quotation"],
    html body .elementor-section.cb-cta-hero {
        background-image: none !important;
        background-color: #FBF6EF !important;
        padding: 60px 16px !important;
    }
    /* Kill the dark overlay since there's no image to overlay */
    html body .elementor-section[style*="quotation"]::before,
    html body .elementor-section.cb-cta-hero::before {
        display: none !important;
        content: none !important;
    }
    /* Card becomes a clean white panel — works whether class is there or not */
    html body .elementor-section[style*="quotation"] .elementor-column > .elementor-element-populated,
    html body .elementor-section.cb-cta-hero .elementor-column > .elementor-element-populated {
        background: #FFFDFA !important;
        border: 1px solid #EBE0D5 !important;
        border-radius: 22px !important;
        padding: 40px 24px !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-shadow: 0 20px 50px -20px rgba(82,48,32,.20) !important;
    }
    /* Brand cue bar on top of the card */
    html body .elementor-section[style*="quotation"] .elementor-column > .elementor-element-populated::before,
    html body .elementor-section.cb-cta-hero .elementor-column > .elementor-element-populated::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 60px !important;
        height: 4px !important;
        border-radius: 0 0 3px 3px !important;
        background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%) !important;
        pointer-events: none !important;
    }
}

/* =========================================================
   PARENT THEME LINE-TITLE — tone down on mobile
   The parent theme injects a wide red rectangle marker behind
   the last word of some headings. Reads as a clean accent on
   desktop but feels heavy on mobile narrow viewports.
   ========================================================= */
@media (max-width: 768px) {
    html body .line-title:after,
    html body span.line-title:after {
        opacity: 0.35 !important;
        height: 4px !important;
        bottom: -2px !important;
    }
}

/* =========================================================
   WEBGL / VANTA — animated gradient background container
   Apply class `cb-vanta-bg` on a section's "CSS Classes" field.
   Use the optional data-effect attribute to pick: waves | fog
   | halo | birds | topology (set via custom attributes in
   Elementor → Advanced → Attributes: data-effect|waves)
   ========================================================= */
.cb-vanta-bg {
    position: relative !important;
    overflow: hidden !important;
}
.cb-vanta-bg > .elementor-container,
.cb-vanta-bg > .elementor-background-overlay {
    position: relative !important;
    z-index: 2 !important;
}
.cb-vanta-bg canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
}
/* Loading state — soft brand gradient before Vanta initializes */
.cb-vanta-bg:not(.vanta-initialized) {
    background-image: linear-gradient(135deg, #FBF6EF 0%, #FCE9DF 100%);
}
.cb-vanta-bg.is-dark:not(.vanta-initialized) {
    background-image: linear-gradient(135deg, #2A211C 0%, #4A3F38 100%);
}

/* =========================================================
   LIQUID BLOB SHAPES — decorative, CSS-only, no JS deps
   Drop a `<div class="cb-blob cb-blob-red"></div>` anywhere in
   an HTML widget inside a section. Position with the modifier
   classes or override via inline style.
   ========================================================= */

/* Base blob — soft, blurred, animated */
.cb-blob {
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
    animation: cbBlobFloat 14s ease-in-out infinite;
    will-change: transform, border-radius;
    /* Morphing shape via clip-path of irregular border-radius */
    border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
}

/* Brand color variants */
.cb-blob-red {
    background: radial-gradient(circle at 30% 30%, #E0473C 0%, #C8252B 50%, transparent 80%);
}
.cb-blob-red-deep {
    background: radial-gradient(circle at 30% 30%, #C8252B 0%, #A01D22 50%, transparent 80%);
}
.cb-blob-peach {
    background: radial-gradient(circle at 30% 30%, #FCE9DF 0%, #FAD9C9 50%, transparent 80%);
    opacity: 0.65;
}
.cb-blob-cream {
    background: radial-gradient(circle at 30% 30%, #FBF6EF 0%, #F6EEE4 50%, transparent 80%);
    opacity: 0.55;
}

/* Position helpers — drop blobs into corners or sides */
.cb-blob-top-left    { top: -180px;   left: -180px; }
.cb-blob-top-right   { top: -180px;   right: -180px; }
.cb-blob-bottom-left { bottom: -180px; left: -180px; }
.cb-blob-bottom-right{ bottom: -180px; right: -180px; }
.cb-blob-center-left { top: 50%; left: -240px; transform: translateY(-50%); }
.cb-blob-center-right{ top: 50%; right: -240px; transform: translateY(-50%); }

/* Size variants */
.cb-blob-sm { width: 280px; height: 280px; filter: blur(40px); }
.cb-blob-lg { width: 640px; height: 640px; filter: blur(80px); }

/* Animation delays so multiple blobs in one section drift independently */
.cb-blob-delay-1 { animation-delay: -2s;  }
.cb-blob-delay-2 { animation-delay: -5s;  }
.cb-blob-delay-3 { animation-delay: -8s;  }
.cb-blob-delay-4 { animation-delay: -11s; }

/* The morphing/drifting keyframe — slow, organic, never repeats the same shape twice */
@keyframes cbBlobFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
    }
    25% {
        transform: translate(40px, -30px) scale(1.08) rotate(60deg);
        border-radius: 40% 60% 70% 30% / 60% 40% 50% 50%;
    }
    50% {
        transform: translate(-20px, 40px) scale(0.95) rotate(120deg);
        border-radius: 50% 50% 30% 70% / 40% 60% 70% 30%;
    }
    75% {
        transform: translate(-40px, -20px) scale(1.05) rotate(180deg);
        border-radius: 70% 30% 50% 50% / 50% 50% 60% 40%;
    }
}

/* Reduce motion for accessibility / battery */
@media (prefers-reduced-motion: reduce) {
    .cb-blob {
        animation: none !important;
        transform: none !important;
    }
    .cb-vanta-bg canvas {
        display: none !important;
    }
}

/* Hide blobs on small mobile to save performance + avoid visual clutter */
@media (max-width: 480px) {
    .cb-blob {
        width: 240px;
        height: 240px;
        filter: blur(30px);
        opacity: 0.35;
    }
}

/* =========================================================
   CB-MHERO — premium mobile hero replacement.
   Drop the cb-mhero HTML markup into an HTML widget inside a
   section with class `cb-mhero-section` set to Hide on Desktop
   + Hide on Tablet. RevSlider stays hidden on mobile.
   ========================================================= */

/* The section wrapper — only visible on mobile, edge-to-edge */
html body .cb-mhero-section {
    padding: 0 !important;
    margin: 0 !important;
}
html body .cb-mhero-section > .elementor-container {
    padding: 0 !important;
    max-width: 100% !important;
}
html body .cb-mhero-section .elementor-column > .elementor-element-populated {
    padding: 0 !important;
}

.cb-mhero {
    position: relative;
    min-height: calc(100vh - 70px);
    background: linear-gradient(180deg, #FBF6EF 0%, #F6EEE4 60%, #FCE9DF 100%);
    padding: 48px 24px 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #2A211C;
}

/* Soft animated blobs floating in the background */
.cb-mhero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
    will-change: transform, border-radius;
}
.cb-mhero-blob-1 {
    width: 320px; height: 320px;
    top: -120px; right: -100px;
    background: radial-gradient(circle at 30% 30%, #E0473C 0%, rgba(224, 71, 60, 0.4) 50%, transparent 80%);
    animation: cbMheroBlob1 18s ease-in-out infinite;
}
.cb-mhero-blob-2 {
    width: 300px; height: 300px;
    bottom: -100px; left: -120px;
    background: radial-gradient(circle at 30% 30%, #FAD9C9 0%, rgba(250, 217, 201, 0.6) 50%, transparent 80%);
    opacity: 0.75;
    animation: cbMheroBlob2 22s ease-in-out infinite;
}
.cb-mhero-blob-3 {
    width: 240px; height: 240px;
    top: 45%; right: -130px;
    background: radial-gradient(circle at 30% 30%, rgba(168, 29, 34, 0.18) 0%, transparent 80%);
    animation: cbMheroBlob3 26s ease-in-out infinite;
}
@keyframes cbMheroBlob1 {
    0%, 100% { transform: translate(0,0) scale(1); border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%; }
    50%      { transform: translate(-26px, 36px) scale(1.08); border-radius: 50% 50% 30% 70% / 40% 60% 70% 30%; }
}
@keyframes cbMheroBlob2 {
    0%, 100% { transform: translate(0,0); border-radius: 50% 60% 40% 50% / 50% 40% 60% 50%; }
    50%      { transform: translate(34px, -24px); border-radius: 60% 40% 60% 40% / 50% 60% 40% 50%; }
}
@keyframes cbMheroBlob3 {
    0%, 100% { transform: translate(0,0) scale(1); }
    50%      { transform: translate(-44px, 28px) scale(1.04); }
}

/* Faint grid pattern overlay — adds tech / craft texture */
.cb-mhero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(168, 29, 34, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(168, 29, 34, 0.045) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none;
    z-index: 1;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* Content sits above blobs + grid */
.cb-mhero-content {
    position: relative;
    z-index: 5;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

.cb-mhero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Rubrik', sans-serif !important;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #A01D22 !important;
    animation: cbMheroFadeUp 0.7s 0.1s both ease-out;
}
.cb-mhero-eyebrow-bar {
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background-image: linear-gradient(90deg, #E0473C, #C8252B, #A01D22);
    flex: none;
}

.cb-mhero-headline {
    font-family: 'Glitten', serif !important;
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1.05 !important;
    color: #2A211C !important;
    letter-spacing: -0.022em !important;
    font-weight: 400 !important;
    margin: 0 !important;
    animation: cbMheroFadeUp 0.7s 0.2s both ease-out;
}
.cb-mhero-headline em {
    font-style: italic !important;
    background: linear-gradient(125deg, #E0473C 0%, #C8252B 50%, #A01D22 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block;
}

.cb-mhero-lead {
    font-family: 'Rubrik', sans-serif !important;
    font-size: 15.5px !important;
    line-height: 1.6 !important;
    color: #4A3F38 !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
    animation: cbMheroFadeUp 0.7s 0.35s both ease-out;
}

/* Optional product preview card */
.cb-mhero-visual {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0 2px 0;
    animation: cbMheroFadeUp 0.7s 0.42s both ease-out;
}
.cb-mhero-visual-card {
    position: relative;
    width: 92px;
    height: 92px;
    border-radius: 18px;
    overflow: hidden;
    flex: none;
    background: linear-gradient(135deg, #FCE9DF 0%, #FAD9C9 100%);
    box-shadow: 0 18px 36px -16px rgba(120, 60, 38, 0.45),
                0 4px 10px -4px rgba(82, 48, 32, 0.20);
    transform: rotate(-3deg);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cb-mhero-visual-card:active {
    transform: rotate(-3deg) scale(0.96);
}
.cb-mhero-visual-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cb-mhero-visual-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(3deg);
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    color: #ffffff;
    font-family: 'Rubrik', sans-serif;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 6px 14px -4px rgba(168, 29, 34, 0.55);
}
.cb-mhero-visual-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.cb-mhero-visual-label {
    font-family: 'Rubrik', sans-serif;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8A7B70;
    font-weight: 600;
}
.cb-mhero-visual-value {
    font-family: 'Glitten', serif;
    font-size: 16px;
    color: #2A211C;
    line-height: 1.15;
    letter-spacing: -0.005em;
}

/* CTAs */
.cb-mhero-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
    animation: cbMheroFadeUp 0.7s 0.5s both ease-out;
}
.cb-mhero-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    padding: 16px 28px !important;
    border-radius: 999px;
    font-family: 'Rubrik', sans-serif !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.25s,
                border-radius 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                background 0.25s !important;
    min-height: 52px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.cb-mhero-btn-primary {
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    color: #ffffff !important;
    box-shadow: 0 14px 30px -10px rgba(168, 29, 34, 0.55);
    border: 1.5px solid transparent;
}
.cb-mhero-btn-primary:active {
    transform: scale(0.97);
    border-radius: 16px;
}
.cb-mhero-btn-primary svg {
    width: 16px;
    height: 16px;
}
.cb-mhero-btn-ghost {
    background: rgba(255, 253, 250, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #2A211C !important;
    border: 1.5px solid #EBE0D5;
}
.cb-mhero-btn-ghost:active {
    background: rgba(168, 29, 34, 0.08);
}

/* Trust strip — 3 quick stats below CTAs */
.cb-mhero-trust {
    display: flex;
    gap: 20px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(235, 224, 213, 0.7);
    animation: cbMheroFadeUp 0.7s 0.65s both ease-out;
}
.cb-mhero-trust-stat {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.cb-mhero-trust-num {
    font-family: 'Glitten', serif;
    font-size: 22px;
    line-height: 1;
    color: #2A211C;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}
.cb-mhero-trust-label {
    font-family: 'Rubrik', sans-serif;
    font-size: 11px;
    color: #8A7B70;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

/* Scroll cue at the very bottom */
.cb-mhero-scroll {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #8A7B70;
    font-family: 'Rubrik', sans-serif;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 22px;
    animation: cbMheroBounce 2.2s ease-in-out infinite;
}
.cb-mhero-scroll svg {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

@keyframes cbMheroBounce {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50%      { transform: translateY(6px); opacity: 1; }
}
@keyframes cbMheroFadeUp {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .cb-mhero-blob,
    .cb-mhero-scroll,
    .cb-mhero-content > * {
        animation: none !important;
    }
}

/* Small phone tweak */
@media (max-width: 380px) {
    .cb-mhero { padding: 36px 20px 32px; }
    .cb-mhero-headline { font-size: 30px !important; }
    .cb-mhero-lead { font-size: 14.5px !important; }
    .cb-mhero-trust { gap: 14px; }
    .cb-mhero-trust-num { font-size: 19px; }
    .cb-mhero-trust-label { font-size: 10px; }
}

/* =========================================================
   MOBILE HERO PATCH — make the RevSlider readable on mobile.
   The slide was authored for desktop; its mobile layout has the
   text layers sitting ON TOP of the bag mockup image. CSS can't
   move the layers (RevSlider positions them via inline transforms),
   but we CAN add a heavy dark overlay so the white text reads
   against the busy background.

   For a PROPER fix, either:
   - Edit each text layer's mobile X/Y inside RevSlider's editor
   - OR hide RevSlider on mobile (set Hide on Mobile in Elementor)
     and add a fresh Elementor hero section just for mobile
   ========================================================= */
@media (max-width: 768px) {
    html body .rev_slider_wrapper,
    html body .forcefullwidth_wrapper_tp_banner,
    html body [id*="rev_slider"][class*="wrapper"] {
        position: relative !important;
        max-height: 620px !important;
        overflow: hidden !important;
    }
    /* Heavy dark overlay — sits between the slide image and the text
       so white text reads cleanly. z-index 4 puts it above the slide
       background but below the text captions (z-index 5+). */
    html body .rev_slider_wrapper::after,
    html body .forcefullwidth_wrapper_tp_banner::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background:
            linear-gradient(180deg,
                rgba(40, 20, 18, 0.35) 0%,
                rgba(40, 20, 18, 0.65) 50%,
                rgba(168, 29, 34, 0.55) 100%) !important;
        z-index: 4 !important;
        pointer-events: none !important;
    }
    /* Bring all RevSlider text captions above the overlay */
    html body .rev_slider .tp-caption,
    html body .rev_slider_wrapper .tp-caption {
        z-index: 10 !important;
    }
    /* Stronger text shadow on captions so even faded letters pop */
    html body .rev_slider .tp-caption {
        text-shadow: 0 2px 14px rgba(0,0,0,0.40) !important;
    }
}

/* =========================================================
   MOBILE MENU Z-INDEX — sit above RevSlider / Vanta canvases
   The mobile menu drawer was sliding open BEHIND the hero
   slider on mobile. Force every common parent-theme mobile-menu
   wrapper to render above everything else.
   ========================================================= */
@media (max-width: 1080px) {
    /* The drawer itself + every variant the parent theme might use */
    html body .mobile-menu,
    html body .mobile-nav,
    html body .mobile-navigation,
    html body .mobile-menu-wrap,
    html body .mobile-menu-wrapper,
    html body .tht-mobile-menu,
    html body .tht-header-mobile-menu,
    html body .th-mobile-menu,
    html body .mmenu-blocker,
    html body .mm-menu,
    html body .mm-page,
    html body [class*="mobile-menu"],
    html body [class*="mobile-nav"],
    html body [class*="-mobile-menu"],
    html body .off-canvas,
    html body .offcanvas,
    html body .mobile-side-menu,
    /* Parent theme uses `.th-side-menu` / `.th-menu-wrap` / `.th-menu-inner` */
    html body .th-side-menu,
    html body .th-menu-wrap,
    html body .th-menu-inner,
    html body .th-menu,
    html body .th-side-menu-wrap,
    html body [class*="th-menu"]:not(.th-menu-toggler),
    html body [class*="th-side"] {
        z-index: 999999 !important;
    }
    /* When the parent theme adds `.menu-open` to the drawer OR
       `body.th-menu-opened` fires, force position:fixed so the drawer
       escapes any transformed ancestor and pins to the viewport.
       Scoped to OPEN state only — otherwise this rule turned the drawer
       into a full-viewport red panel on every page load. */
    html body .th-menu-inner.open,
    html body .th-side-menu.menu-open,
    html body .th-menu-wrap.menu-open,
    html body body.th-menu-opened .th-side-menu,
    html body body.th-menu-opened .th-menu-wrap,
    html body body.th-menu-opened .th-menu-inner,
    html body body.menu-open .th-side-menu,
    html body body.menu-open .th-menu-wrap,
    html body body.menu-open .th-menu-inner {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        height: 100vh !important;
        z-index: 99999999 !important;
    }

    /* ULTRA-NUCLEAR mobile menu fix — when the parent theme toggles
       `.menu-open` / `.open` / `body.th-menu-opened`, render the drawer
       at MAX z-index, pinned to the viewport, with white panel + shadow.
       Force parents to NOT create a stacking context that traps it. */
    html body.th-menu-opened,
    html body.menu-open {
        overflow: hidden !important;
    }
    html body.th-menu-opened [class*="th-menu"]:not(.th-menu-toggler):not(.th-menu-icon-wrap),
    html body.th-menu-opened [class*="th-side"],
    html body.th-menu-opened .th-side-menu,
    html body.th-menu-opened .th-menu-wrap,
    html body.th-menu-opened .th-menu-inner,
    html body.menu-open [class*="th-menu"]:not(.th-menu-toggler):not(.th-menu-icon-wrap),
    html body.menu-open [class*="mobile-menu"]:not(.mobile-menu-toggle),
    html body.menu-open [class*="mobile-nav"] {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        max-width: 360px !important;
        width: 84vw !important;
        z-index: 2147483647 !important;
        background: #ffffff !important;
        overflow-y: auto !important;
        box-shadow: -20px 0 50px rgba(20, 12, 8, 0.30) !important;
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    /* Backdrop behind the open drawer */
    html body.th-menu-opened::before,
    html body.menu-open::before {
        content: "" !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(20, 12, 8, 0.55) !important;
        z-index: 2147483646 !important;
        pointer-events: none !important;
    }
    /* Strip transforms/filters from any potential stacking-context ancestor
       so the fixed-position drawer attaches to the viewport, not a parent */
    html body .site-header,
    html body header.site-header,
    html body header,
    html body .th-header,
    html body .main-header,
    html body .header-area,
    html body #wrapper-navbar,
    html body .elementor-section.elementor-hidden-desktop {
        transform: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        contain: none !important;
        isolation: auto !important;
        will-change: auto !important;
    }
    /* The fullscreen close button so it stays tappable */
    html body .mobile-menu-close,
    html body .mobile-nav-close,
    html body [class*="mobile-menu-close"],
    html body [class*="mobile-nav-close"],
    html body .mm-navbar > .mm-close {
        z-index: 1000000 !important;
    }
    /* The backdrop / overlay behind the drawer */
    html body .menu-overlay,
    html body .mobile-menu-overlay,
    html body .mobile-nav-overlay,
    html body .mmenu-page-overlay,
    html body .mm-blocker,
    html body [class*="menu-overlay"],
    html body [class*="menu-backdrop"] {
        z-index: 999998 !important;
        background: rgba(20, 12, 8, 0.55) !important;
    }
    /* RevSlider, Vanta canvases, blob layers — pinned BELOW the menu */
    html body .rev_slider_wrapper,
    html body .rev_slider,
    html body [class*="rev_slider"],
    html body .cb-vanta-bg canvas,
    html body .cb-blob {
        z-index: 1 !important;
    }
    /* Keep the parent site header sticky above slider but below menu */
    html body .site-header,
    html body header.site-header,
    html body .main-header,
    html body .header-area,
    html body .top-header,
    html body #wrapper-navbar,
    html body .th-header {
        z-index: 9999 !important;
    }
}

/* =========================================================
   MOBILE HEADER SPACING — kill excess vertical padding
   Parent theme adds heavy padding on small screens. Tighten it
   so the hero starts immediately under the logo bar.
   ========================================================= */
@media (max-width: 768px) {
    html body .site-header,
    html body .main-header,
    html body .header-area,
    html body .top-header,
    html body header.site-header,
    html body .th-header {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    /* Any empty section directly under the header — collapse it */
    html body .elementor-section:empty,
    html body .elementor-section:not(:has(.elementor-widget)) {
        display: none !important;
    }
    /* Site wrapper shouldn't add huge top margin on mobile */
    html body .site-content,
    html body #content,
    html body .site-main,
    html body main {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* =========================================================
   MOBILE BURGER MENU — rebrand the parent-theme hamburger
   Parent theme renders 3 black lines on a tiny toggler. Make
   it bigger, branded red, with a smooth animate-to-X on open.
   ========================================================= */
@media (max-width: 1080px) {
    /* Container — bigger tap target */
    html body .th-menu-toggler,
    html body .th-nav-identity-panel.toggler-icon .th-menu-toggler {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        cursor: pointer !important;
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        border-radius: 8px !important;
        transition: background 0.25s ease !important;
    }
    html body .th-menu-toggler:hover {
        background: rgba(200, 37, 43, 0.08) !important;
    }
    html body .th-menu-toggler:active {
        background: rgba(200, 37, 43, 0.18) !important;
    }

    /* The 3 lines — span (middle line) + ::before (top) + ::after (bottom) */
    html body .th-menu-toggler > span,
    html body .th-menu-toggler::before,
    html body .th-menu-toggler::after {
        content: "" !important;
        position: absolute !important;
        left: 7px !important;
        right: 7px !important;
        height: 2.5px !important;
        background: #C8252B !important;
        border-radius: 2px !important;
        transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                    opacity 0.25s ease,
                    top 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                    bottom 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                    background 0.25s ease !important;
        margin: 0 !important;
        width: auto !important;
    }
    html body .th-menu-toggler::before {
        top: 11px !important;
    }
    html body .th-menu-toggler > span {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    html body .th-menu-toggler::after {
        bottom: 11px !important;
    }
    html body .th-menu-toggler:hover > span,
    html body .th-menu-toggler:hover::before,
    html body .th-menu-toggler:hover::after {
        background: #A01D22 !important;
    }

    /* OPEN state — animate to X
       Parent theme adds `.menu-open` to the toggler when drawer is open.
       Also covers Elementor's body-level toggle states. */
    html body .th-menu-toggler.menu-open::before,
    html body body.th-menu-opened .th-menu-toggler::before,
    html body .th-nav-identity-panel.menu-open .th-menu-toggler::before {
        top: 50% !important;
        transform: translateY(-50%) rotate(45deg) !important;
        background: #ffffff !important;
    }
    html body .th-menu-toggler.menu-open > span,
    html body body.th-menu-opened .th-menu-toggler > span,
    html body .th-nav-identity-panel.menu-open .th-menu-toggler > span {
        opacity: 0 !important;
        transform: translateY(-50%) scaleX(0) !important;
    }
    html body .th-menu-toggler.menu-open::after,
    html body body.th-menu-opened .th-menu-toggler::after,
    html body .th-nav-identity-panel.menu-open .th-menu-toggler::after {
        bottom: 50% !important;
        transform: translateY(50%) rotate(-45deg) !important;
        background: #ffffff !important;
    }

    /* If the menu drawer header has a red background, the X needs to be
       white. Catch the close button inside the open drawer too. */
    html body .th-menu-inner .close-menu .th-menu-toggler::before,
    html body .th-menu-inner .close-menu .th-menu-toggler::after {
        background: #ffffff !important;
    }
    html body .th-menu-inner .close-menu .th-menu-toggler > span {
        display: none !important;
    }
}

/* =========================================================
   MOBILE-ONLY ELEMENTOR SECTIONS — no content padding
   Sections marked `elementor-hidden-desktop` or `elementor-hidden-laptop`
   are by definition UI/header components (mobile header, sticky bar,
   floating action) — they should NOT get the 48/64px section padding
   that applies to regular content sections.
   ========================================================= */
@media (max-width: 1080px) {
    html body .elementor-section.elementor-hidden-desktop,
    html body .elementor-section.elementor-hidden-laptop,
    html body .elementor-section.elementor-hidden-desktop.elementor-hidden-laptop,
    /* Any mobile-only section that contains a menu or logo widget — almost
       certainly the mobile header */
    html body .elementor-section.elementor-hidden-desktop:has(.elementor-widget-th-menu),
    html body .elementor-section.elementor-hidden-desktop:has(.elementor-widget-th-logo),
    html body .elementor-section.elementor-hidden-desktop:has(.elementor-widget-th-mini-cart) {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    /* Tight inner container padding so logo + menu + cart sit comfortably */
    html body .elementor-section.elementor-hidden-desktop > .elementor-container,
    html body .elementor-section.elementor-hidden-laptop > .elementor-container {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
}

/* =========================================================
   PKG-GRID SLIDER — FINAL NUCLEAR FALLBACK
   Targets ANY parent containing 2+ consecutive cb-pkg-card widgets
   via the adjacent sibling combinator. NO :has() needed, works in
   every browser. The styling cascades through to the parent via
   pure CSS — when 2 cb-pkg-cards sit next to each other, both
   they AND their shared parent get slider treatment.
   ========================================================= */
@media (max-width: 768px) {
    /* The card itself — always a fixed-width snap item */
    html body .elementor-widget-image-box.cb-pkg-card {
        flex: 0 0 72% !important;
        max-width: 72% !important;
        min-width: 72% !important;
        scroll-snap-align: start !important;
        margin: 0 !important;
        grid-column: auto !important;
    }
    /* When 2 cards are siblings, they're in a slider container.
       Force the IMMEDIATE shared parent and its parent populated wrapper
       into the flex carousel layout. */
    html body .elementor-widget-image-box.cb-pkg-card + .elementor-widget-image-box.cb-pkg-card {
        margin-left: 0 !important;
    }
    /* Any wrap or populated container that holds cb-pkg-card widgets */
    html body .elementor-element-populated:has(.cb-pkg-card),
    html body .elementor-widget-wrap:has(.cb-pkg-card),
    html body .elementor-column:has(.cb-pkg-card) > .elementor-element-populated,
    html body .elementor-column:has(.cb-pkg-card) > .elementor-element-populated > .elementor-widget-wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        gap: 14px !important;
        padding: 8px 16px 28px 16px !important;
        margin: 0 !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        grid-template-columns: none !important;
        width: 100% !important;
    }
    html body .elementor-column:has(.cb-pkg-card) {
        max-width: 100vw !important;
    }
    html body .elementor-widget-wrap:has(.cb-pkg-card)::-webkit-scrollbar,
    html body .elementor-element-populated:has(.cb-pkg-card)::-webkit-scrollbar {
        display: none !important;
        height: 0 !important;
    }
}
@media (max-width: 480px) {
    html body .elementor-widget-image-box.cb-pkg-card {
        flex: 0 0 78% !important;
        max-width: 78% !important;
        min-width: 78% !important;
    }
}

/* =========================================================
   PKG-GRID SLIDER — REAL-DOM TARGETING
   The user's import didn't preserve cb-pkg-card / cb-pkg-grid-column
   classes. The actual DOM is just plain elementor-col-20 columns
   each containing an elementor-widget-image-box widget. Target
   that pattern directly: any container with multiple col-20 columns
   whose widgets are image-box widgets becomes a horizontal slider.
   ========================================================= */
@media (max-width: 768px) {
    /* The container becomes the horizontal scrolling track */
    html body .elementor-container:has(> .elementor-column.elementor-col-20 .elementor-widget-image-box) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        gap: 14px !important;
        padding: 8px 16px 10px 16px !important;
        margin: 0 !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    html body .elementor-container:has(> .elementor-column.elementor-col-20 .elementor-widget-image-box)::-webkit-scrollbar {
        display: none !important;
        height: 0 !important;
    }
    /* Each col-20 column becomes a slider item */
    html body .elementor-container:has(> .elementor-column.elementor-col-20 .elementor-widget-image-box) > .elementor-column {
        flex: 0 0 72% !important;
        max-width: 72% !important;
        min-width: 72% !important;
        width: 72% !important;
        scroll-snap-align: start !important;
        margin: 0 !important;
    }
    /* Each image-box widget inside such a column gets card styling */
    html body .elementor-container:has(> .elementor-column.elementor-col-20 .elementor-widget-image-box) .elementor-widget-image-box {
        background: #FFFFFF !important;
        border-radius: 16px !important;
        padding: 14px !important;
        box-shadow: 0 6px 18px -8px rgba(82,48,32,.18) !important;
        margin: 0 !important;
        height: 100% !important;
    }
    html body .elementor-container:has(> .elementor-column.elementor-col-20 .elementor-widget-image-box) .elementor-image-box-img img {
        width: 100% !important;
        height: auto !important;
        border-radius: 10px !important;
    }
    html body .elementor-container:has(> .elementor-column.elementor-col-20 .elementor-widget-image-box) .elementor-image-box-title {
        font-family: 'Glitten', serif !important;
        font-size: 16px !important;
        color: #2A211C !important;
        margin: 10px 0 0 0 !important;
        text-align: center !important;
    }
}
@media (max-width: 480px) {
    html body .elementor-container:has(> .elementor-column.elementor-col-20 .elementor-widget-image-box) > .elementor-column {
        flex: 0 0 78% !important;
        max-width: 78% !important;
        min-width: 78% !important;
        width: 78% !important;
    }
}

/* =========================================================
   MOBILE SLIDER UI — arrows, dots, nudge cue (cb-slider.js)
   The JS wraps qualifying .elementor-container nodes in a
   .cb-slider-shell that positions the arrow buttons and dot
   indicators absolutely over the slider on mobile only.

   The .cb-slider-shell wrapper drives the slider layout — that
   way the same CSS works for col-20, col-25, col-33, col-50
   grids without writing a :has() variant per column class.
   ========================================================= */

/* Shell — positioning context. Tight bottom padding so the slider
   doesn't leave a huge gap before the next section. */
.cb-slider-shell {
    position: relative !important;
    margin: 0 !important;
    padding: 0 0 32px 0 !important;
}

/* UNIVERSAL: any container the JS wrapped in .cb-slider-shell
   becomes a horizontal scroll-snap track on mobile, regardless of
   whether the columns are col-20, col-25, col-33, or col-50. */
@media (max-width: 768px) {
    html body .cb-slider-shell > .elementor-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        gap: 14px !important;
        padding: 8px 16px 10px 16px !important;
        margin: 0 !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    html body .cb-slider-shell > .elementor-container::-webkit-scrollbar {
        display: none !important;
        height: 0 !important;
    }
    /* Each column becomes a 72% snap card (78% on phones < 480px) */
    html body .cb-slider-shell > .elementor-container > .elementor-column {
        flex: 0 0 72% !important;
        max-width: 72% !important;
        min-width: 72% !important;
        width: 72% !important;
        scroll-snap-align: start !important;
        margin: 0 !important;
    }
    /* Image-box widget inside the shell — white card with shadow */
    html body .cb-slider-shell .elementor-widget-image-box {
        background: #FFFFFF !important;
        border-radius: 16px !important;
        padding: 14px !important;
        box-shadow: 0 6px 18px -8px rgba(82,48,32,.18) !important;
        margin: 0 !important;
    }
    html body .cb-slider-shell .elementor-image-box-img img {
        width: 100% !important;
        height: auto !important;
        border-radius: 10px !important;
    }
    html body .cb-slider-shell .elementor-image-box-title {
        font-family: 'Glitten', serif !important;
        font-size: 16px !important;
        color: #2A211C !important;
        margin: 10px 0 0 0 !important;
        text-align: center !important;
    }
}
@media (max-width: 480px) {
    html body .cb-slider-shell > .elementor-container > .elementor-column {
        flex: 0 0 78% !important;
        max-width: 78% !important;
        min-width: 78% !important;
        width: 78% !important;
    }
}

/* Tight bottom padding on the slider container itself */
@media (max-width: 768px) {
    html body .cb-slider-shell .elementor-container,
    html body .cb-slider-shell > .elementor-container {
        padding-bottom: 8px !important;
        margin-bottom: 0 !important;
    }
    /* Don't stretch each card to match the tallest — that creates gaps */
    html body .cb-slider-shell .elementor-widget-image-box {
        height: auto !important;
    }
    html body .cb-slider-shell .elementor-column {
        height: auto !important;
        align-self: flex-start !important;
    }
}

/* Default: hide arrows + dots on desktop */
.cb-slider-arrow,
.cb-slider-dots {
    display: none !important;
}

/* Mobile-only: render arrows + dots */
@media (max-width: 768px) {
    .cb-slider-arrow {
        display: inline-flex !important;
        position: absolute !important;
        top: 38% !important;
        transform: translateY(-50%) !important;
        z-index: 20 !important;
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 50% !important;
        background: #ffffff !important;
        color: #A01D22 !important;
        box-shadow: 0 8px 20px -6px rgba(82, 48, 32, 0.30) !important;
        cursor: pointer !important;
        align-items: center !important;
        justify-content: center !important;
        transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
                    background 0.25s ease,
                    color 0.25s ease,
                    opacity 0.25s ease !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    .cb-slider-arrow:hover,
    .cb-slider-arrow:active {
        background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%) !important;
        color: #ffffff !important;
        transform: translateY(-50%) scale(1.08) !important;
    }
    .cb-slider-arrow svg {
        width: 18px !important;
        height: 18px !important;
        display: block !important;
    }
    .cb-slider-arrow.cb-slider-prev { left: 6px !important; }
    .cb-slider-arrow.cb-slider-next { right: 6px !important; }
    .cb-slider-arrow.is-disabled {
        opacity: 0.35 !important;
        pointer-events: none !important;
    }

    /* Dot indicators — centered just below the cards */
    .cb-slider-dots {
        display: flex !important;
        position: absolute !important;
        bottom: 6px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        gap: 6px !important;
        z-index: 20 !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .cb-slider-dot {
        width: 6px !important;
        height: 6px !important;
        border-radius: 999px !important;
        background: rgba(42, 33, 28, 0.22) !important;
        transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
                    background 0.3s ease !important;
        display: block !important;
    }
    .cb-slider-dot.is-active {
        width: 22px !important;
        background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%) !important;
    }

    /* Subtle right-edge fade — persistent "more to swipe" cue */
    .cb-slider-shell::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 32px !important;
        width: 22px !important;
        background: linear-gradient(to right, transparent 0%, rgba(251, 246, 239, 0.95) 100%) !important;
        pointer-events: none !important;
        z-index: 15 !important;
    }

    /* One-time nudge cue: shifts the first card briefly so users notice
       the slider is swipable. JS toggles `.cb-slider-nudge` for ~1.2s. */
    @keyframes cbSliderNudge {
        0%   { transform: translateX(0); }
        25%  { transform: translateX(-22px); }
        55%  { transform: translateX(0); }
        100% { transform: translateX(0); }
    }
    .cb-slider-shell.cb-slider-nudge .elementor-container > .elementor-column:first-child {
        animation: cbSliderNudge 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cb-slider-shell .elementor-container > .elementor-column:first-child {
        animation: none !important;
    }
}

/* =========================================================
   CB-CAROUSEL — always-on horizontal scroll-snap mode
   Add `cb-carousel` to a section's CSS Classes field to make
   it scroll horizontally on BOTH desktop and mobile, with the
   number of visible cards configurable per breakpoint.

   Modifier classes (combine with cb-carousel):
     cb-carousel-d3 / -d4 / -d5 / -d6  → cards visible on desktop
     cb-carousel-m1 / -m2 / -m3        → cards visible on mobile
   Defaults: 5 visible desktop / 1 visible mobile.
   ========================================================= */

/* Default card counts via CSS custom properties */
html body .cb-carousel { --cb-cnt-d: 5; --cb-cnt-m: 1; }

html body .cb-carousel.cb-carousel-d2 { --cb-cnt-d: 2; }
html body .cb-carousel.cb-carousel-d3 { --cb-cnt-d: 3; }
html body .cb-carousel.cb-carousel-d4 { --cb-cnt-d: 4; }
html body .cb-carousel.cb-carousel-d5 { --cb-cnt-d: 5; }
html body .cb-carousel.cb-carousel-d6 { --cb-cnt-d: 6; }

html body .cb-carousel.cb-carousel-m1 { --cb-cnt-m: 1; }
html body .cb-carousel.cb-carousel-m1-25 { --cb-cnt-m: 1.25; }
html body .cb-carousel.cb-carousel-m1-5 { --cb-cnt-m: 1.5; }
html body .cb-carousel.cb-carousel-m1-75 { --cb-cnt-m: 1.75; }
html body .cb-carousel.cb-carousel-m2 { --cb-cnt-m: 2; }
html body .cb-carousel.cb-carousel-m2-25 { --cb-cnt-m: 2.25; }
html body .cb-carousel.cb-carousel-m2-5 { --cb-cnt-m: 2.5; }
html body .cb-carousel.cb-carousel-m2-75 { --cb-cnt-m: 2.75; }
html body .cb-carousel.cb-carousel-m3 { --cb-cnt-m: 3; }

/* The carousel track — horizontal scroll at every breakpoint.
   Targets the container directly (no .cb-slider-shell required) so the
   layout works even before JS injects arrow controls. */
html body .cb-carousel > .elementor-container,
html body .cb-carousel .cb-slider-shell > .elementor-container,
html body section.cb-carousel > .elementor-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    gap: 14px !important;
    padding: 12px 16px 16px 16px !important;
    margin: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
html body .cb-carousel > .elementor-container::-webkit-scrollbar,
html body .cb-carousel .cb-slider-shell > .elementor-container::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
}

/* Card width: (100% / desktopCount) - 14px → exactly N cards fit + small peek.
   Targets the column directly + via .cb-slider-shell so both pre-JS and
   post-JS states render correctly. */
html body .cb-carousel > .elementor-container > .elementor-column,
html body .cb-carousel .cb-slider-shell > .elementor-container > .elementor-column,
html body section.cb-carousel > .elementor-container > .elementor-column {
    flex: 0 0 calc((100% - (var(--cb-cnt-d) - 1) * 14px) / var(--cb-cnt-d)) !important;
    max-width: calc((100% - (var(--cb-cnt-d) - 1) * 14px) / var(--cb-cnt-d)) !important;
    min-width: calc((100% - (var(--cb-cnt-d) - 1) * 14px) / var(--cb-cnt-d)) !important;
    width: calc((100% - (var(--cb-cnt-d) - 1) * 14px) / var(--cb-cnt-d)) !important;
    scroll-snap-align: start !important;
    margin: 0 !important;
    height: auto !important;
    align-self: flex-start !important;
}

/* Mobile: switch to mobile count */
@media (max-width: 768px) {
    html body .cb-carousel > .elementor-container > .elementor-column,
    html body .cb-carousel .cb-slider-shell > .elementor-container > .elementor-column,
    html body section.cb-carousel > .elementor-container > .elementor-column {
        flex: 0 0 calc((100% - (var(--cb-cnt-m) - 1) * 14px) / var(--cb-cnt-m)) !important;
        max-width: calc((100% - (var(--cb-cnt-m) - 1) * 14px) / var(--cb-cnt-m)) !important;
        min-width: calc((100% - (var(--cb-cnt-m) - 1) * 14px) / var(--cb-cnt-m)) !important;
        width: calc((100% - (var(--cb-cnt-m) - 1) * 14px) / var(--cb-cnt-m)) !important;
    }
}

/* Make sure the section itself doesn't overflow the viewport.
   Position relative so the CSS-only fade indicator can pin to the
   section edge (works without JS). */
html body .cb-carousel {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative !important;
}

/* DEFENSIVE: explicit image-box rendering inside cb-carousel.
   Without these, earlier mobile-only .cb-slider-shell rules (which
   were tuned for cb-pkg-card grids) hide / collapse the image and
   title on mobile cb-carousel cards. Force everything visible. */
html body .cb-carousel .elementor-widget-image-box,
html body .cb-carousel .elementor-widget-image-box .elementor-widget-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}
html body .cb-carousel .elementor-widget-image-box .elementor-image-box-wrapper {
    display: block !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
}
html body .cb-carousel .elementor-widget-image-box .elementor-image-box-img {
    display: block !important;
    margin: 0 auto 14px auto !important;
    width: auto !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    text-align: center !important;
}
/* Image sizing: small icon images stay small (width:auto), larger
   product photos scale up to 100% width but cap at 220px tall so a
   500x500 photo doesn't tower over the title. */
html body .cb-carousel .elementor-widget-image-box .elementor-image-box-img img {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 220px !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    margin: 0 auto !important;
}
/* Icon-box widget: constrain icon size inside cb-carousel cards.
   Without this, the icon's font-size inherits from the section's
   large display setting and dominates the card. */
html body .cb-carousel .elementor-widget-icon-box {
    text-align: center !important;
}
html body .cb-carousel .elementor-widget-icon-box .elementor-icon-box-icon {
    margin: 0 auto 14px auto !important;
}
html body .cb-carousel .elementor-widget-icon-box .elementor-icon {
    width: 68px !important;
    height: 68px !important;
    font-size: 32px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
html body .cb-carousel .elementor-widget-icon-box .elementor-icon svg {
    width: 32px !important;
    height: 32px !important;
}
html body .cb-carousel .elementor-widget-icon-box .elementor-icon i {
    font-size: 32px !important;
}
html body .cb-carousel .elementor-widget-image-box .elementor-image-box-content {
    display: block !important;
    padding: 0 !important;
    width: 100% !important;
    text-align: center !important;
}
html body .cb-carousel .elementor-widget-image-box .elementor-image-box-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-family: 'Glitten', serif !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    color: #2A211C !important;
    margin: 4px 0 0 0 !important;
    font-weight: 400 !important;
    text-align: center !important;
}
html body .cb-carousel .elementor-widget-image-box .elementor-image-box-title a {
    color: inherit !important;
    text-decoration: none !important;
}
html body .cb-carousel .elementor-widget-image-box .elementor-image-box-description {
    display: block !important;
    font-family: 'Rubrik', sans-serif !important;
    font-size: 13px !important;
    color: #8A7B70 !important;
    margin: 6px 0 0 0 !important;
}

/* COLOR-CONTRAST OVERRIDE for cb-carousel cards.
   The parent section may force ALL inner text to white (dark Why
   section, nuclear fallbacks targeting [style*="2A211C"]). When
   cards have white backgrounds, that text disappears. Force every
   text node inside a cb-carousel card to render in dark ink so
   contrast is always readable. */
html body .cb-carousel .elementor-widget-image-box .elementor-image-box-title,
html body .cb-carousel .elementor-widget-image-box .elementor-image-box-title *,
html body .cb-carousel .elementor-widget-image-box .elementor-image-box-title a,
html body .cb-carousel .elementor-widget-image-box .elementor-image-box-title a:visited,
html body .cb-carousel .elementor-widget-image-box .elementor-image-box-title span {
    color: #2A211C !important;
    -webkit-text-fill-color: #2A211C !important;
    background: none !important;
    background-image: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
}
html body .cb-carousel .elementor-widget-image-box .elementor-image-box-description,
html body .cb-carousel .elementor-widget-image-box .elementor-image-box-description * {
    color: #4A3F38 !important;
    -webkit-text-fill-color: #4A3F38 !important;
}

/* Same protection for heading + text widgets used inside cb-carousel
   cards (when the user puts non-image-box content in the carousel). */
html body .cb-carousel .elementor-widget-heading .elementor-heading-title,
html body .cb-carousel .elementor-widget-heading .elementor-heading-title *,
html body .cb-carousel .elementor-widget-heading h1,
html body .cb-carousel .elementor-widget-heading h2,
html body .cb-carousel .elementor-widget-heading h3,
html body .cb-carousel .elementor-widget-heading h4,
html body .cb-carousel .elementor-widget-heading h5,
html body .cb-carousel .elementor-widget-heading h6 {
    color: #2A211C !important;
    -webkit-text-fill-color: #2A211C !important;
    background: none !important;
    background-image: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
}
html body .cb-carousel .elementor-widget-text-editor,
html body .cb-carousel .elementor-widget-text-editor *,
html body .cb-carousel .elementor-widget-text-editor p,
html body .cb-carousel .elementor-widget-text-editor span,
html body .cb-carousel .elementor-widget-text-editor li {
    color: #4A3F38 !important;
    -webkit-text-fill-color: #4A3F38 !important;
}
html body .cb-carousel .elementor-widget-text-editor a {
    color: #A01D22 !important;
    -webkit-text-fill-color: #A01D22 !important;
}

/* Same for icon widgets / icon-box titles inside cb-carousel cards */
html body .cb-carousel .elementor-widget-icon-box .elementor-icon-box-title,
html body .cb-carousel .elementor-widget-icon-box .elementor-icon-box-title *,
html body .cb-carousel .elementor-widget-icon-box .elementor-icon-box-title a {
    color: #2A211C !important;
    -webkit-text-fill-color: #2A211C !important;
}
html body .cb-carousel .elementor-widget-icon-box .elementor-icon-box-description {
    color: #4A3F38 !important;
    -webkit-text-fill-color: #4A3F38 !important;
}

/* ULTRA-NUCLEAR TEXT CONTRAST OVERRIDE for cb-carousel CARDS.
   The dark Why section has rules like `.cb-bg-ink h1-h4 { color: #fff !important }`
   and `.elementor-section[style*="2A211C"] h2 { color: #fff !important }` that
   force every text element to white. When carousel cards have white backgrounds,
   that text disappears.

   These rules target RAW h1-h6 + p + span + a INSIDE any column of a
   cb-carousel section, with `html body` prefix for high specificity.
   The scope is `.cb-carousel .elementor-column` so the section's own intro
   heading (which sits OUTSIDE the carousel container in a separate section)
   stays white as designed. */
html body .cb-carousel .elementor-column h1,
html body .cb-carousel .elementor-column h2,
html body .cb-carousel .elementor-column h3,
html body .cb-carousel .elementor-column h4,
html body .cb-carousel .elementor-column h5,
html body .cb-carousel .elementor-column h6,
html body .cb-carousel .elementor-column h1 span,
html body .cb-carousel .elementor-column h2 span,
html body .cb-carousel .elementor-column h3 span,
html body .cb-carousel .elementor-column h4 span,
html body .cb-carousel .elementor-column h5 span,
html body .cb-carousel .elementor-column h6 span,
html body .cb-carousel .elementor-column h1 a,
html body .cb-carousel .elementor-column h2 a,
html body .cb-carousel .elementor-column h3 a,
html body .cb-carousel .elementor-column h4 a,
html body .cb-carousel .elementor-column h5 a,
html body .cb-carousel .elementor-column h6 a,
html body .cb-carousel .elementor-column h1 strong,
html body .cb-carousel .elementor-column h2 strong,
html body .cb-carousel .elementor-column h3 strong,
html body .cb-carousel .elementor-column h4 strong,
html body .cb-carousel .elementor-column h5 strong,
html body .cb-carousel .elementor-column h6 strong {
    color: #2A211C !important;
    -webkit-text-fill-color: #2A211C !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

html body .cb-carousel .elementor-column p,
html body .cb-carousel .elementor-column p *,
html body .cb-carousel .elementor-column li,
html body .cb-carousel .elementor-column li * {
    color: #4A3F38 !important;
    -webkit-text-fill-color: #4A3F38 !important;
    opacity: 1 !important;
}

html body .cb-carousel .elementor-column a:not(.elementor-button) {
    color: #A01D22 !important;
    -webkit-text-fill-color: #A01D22 !important;
}

@media (max-width: 768px) {
    /* Mobile column = 1 card per view → full-width card.
       Tighter inner padding so the image gets max real estate. */
    html body .cb-carousel .elementor-widget-image-box .elementor-image-box-title {
        font-size: 18px !important;
    }
    html body .cb-carousel .elementor-widget-image-box .elementor-image-box-img {
        margin-bottom: 10px !important;
    }
}

/* CSS-ONLY scroll hint — right-edge fade that says "more →".
   Visible even before JS runs so the user knows the section scrolls. */
html body .cb-carousel::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 60px !important;
    background: linear-gradient(to right,
                rgba(251, 246, 239, 0) 0%,
                rgba(251, 246, 239, 0.85) 60%,
                rgba(251, 246, 239, 1) 100%) !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

/* CSS-ONLY scroll cue — a small bouncing chevron in the right gutter so
   users see at a glance that the row scrolls horizontally */
html body .cb-carousel > .elementor-container::after {
    content: "›" !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: 'Rubrik', sans-serif !important;
    font-size: 28px !important;
    color: #A01D22 !important;
    z-index: 10 !important;
    pointer-events: none !important;
    animation: cbCarouselChevron 1.4s ease-in-out infinite !important;
}
@keyframes cbCarouselChevron {
    0%, 100% { transform: translateY(-50%) translateX(0); opacity: 0.6; }
    50%      { transform: translateY(-50%) translateX(6px); opacity: 1; }
}

/* The CSS-only chevron is a fallback for users with JS disabled. When
   JS is on (which it is for all users in practice), the proper arrows
   render instead. On mobile, hide the chevron entirely — it reads as
   a "big right arrow" floating beside the cards, which is visually
   loud. The right-edge fade is enough cue. */
@media (max-width: 768px) {
    html body .cb-carousel > .elementor-container::after {
        display: none !important;
    }
}

/* When the JS shell mounts, hide the CSS-only fade/chevron — the JS
   provides better arrows + dots */
html body .cb-carousel:has(.cb-slider-shell)::after {
    display: none !important;
}
html body .cb-carousel:has(.cb-slider-shell) > .elementor-container::after {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    html body .cb-carousel > .elementor-container::after {
        animation: none !important;
    }
}

/* Force arrows + dots to render on desktop too (default is mobile-only) */
html body .cb-carousel .cb-slider-shell .cb-slider-arrow {
    display: inline-flex !important;
    position: absolute !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
    z-index: 20 !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #A01D22 !important;
    box-shadow: 0 10px 24px -6px rgba(82, 48, 32, 0.35) !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
                background 0.25s ease,
                color 0.25s ease,
                opacity 0.25s ease !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
html body .cb-carousel .cb-slider-shell .cb-slider-arrow:hover {
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%) !important;
    color: #ffffff !important;
    transform: translateY(-50%) scale(1.08) !important;
}
html body .cb-carousel .cb-slider-shell .cb-slider-arrow svg {
    width: 20px !important;
    height: 20px !important;
}
html body .cb-carousel .cb-slider-shell .cb-slider-arrow.cb-slider-prev { left: -6px !important; }
html body .cb-carousel .cb-slider-shell .cb-slider-arrow.cb-slider-next { right: -6px !important; }
html body .cb-carousel .cb-slider-shell .cb-slider-arrow.is-disabled {
    opacity: 0.35 !important;
    pointer-events: none !important;
}

html body .cb-carousel .cb-slider-shell .cb-slider-dots {
    display: flex !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    gap: 6px !important;
    z-index: 20 !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Right-edge fade indicator persistent on cb-carousel too */
html body .cb-carousel .cb-slider-shell::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 32px !important;
    width: 28px !important;
    background: linear-gradient(to right, transparent 0%, rgba(251, 246, 239, 0.95) 100%) !important;
    pointer-events: none !important;
    z-index: 15 !important;
}

/* Mobile: smaller arrows so they don't crowd cards */
@media (max-width: 768px) {
    html body .cb-carousel .cb-slider-shell .cb-slider-arrow {
        width: 38px !important;
        height: 38px !important;
        top: 38% !important;
    }
    html body .cb-carousel .cb-slider-shell .cb-slider-arrow.cb-slider-prev { left: 4px !important; }
    html body .cb-carousel .cb-slider-shell .cb-slider-arrow.cb-slider-next { right: 4px !important; }
}

/* =========================================================
   BURGER MENU VISIBILITY FIX — earlier rule made the toggler
   invisible. Make sure the 3 red lines render against any bg.
   ========================================================= */
@media (max-width: 1080px) {
    /* Make sure the toggler container is visible AND clickable */
    html body .th-menu-toggler,
    html body .th-nav-identity-panel .th-menu-toggler,
    html body .th-nav-identity-panel.toggler-icon .th-menu-toggler {
        width: 40px !important;
        height: 40px !important;
        padding: 4px !important;
        display: inline-block !important;
        position: relative !important;
        cursor: pointer !important;
        background: transparent !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 100 !important;
    }
    /* Make sure the parent header column doesn't hide the toggler */
    html body .th-nav-identity-panel.toggler-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    /* The 3 lines — fall back to filled-block visibility */
    html body .th-menu-toggler > span {
        display: block !important;
        position: absolute !important;
        left: 8px !important;
        right: 8px !important;
        top: 50% !important;
        height: 2.5px !important;
        background: #C8252B !important;
        border-radius: 2px !important;
        transform: translateY(-50%) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    html body .th-menu-toggler::before,
    html body .th-menu-toggler::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 8px !important;
        right: 8px !important;
        height: 2.5px !important;
        background: #C8252B !important;
        border-radius: 2px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    html body .th-menu-toggler::before { top: 12px !important; }
    html body .th-menu-toggler::after  { bottom: 12px !important; }
}

/* =========================================================
   RED OVERLAY ON HERO — kill stray parent-theme banner that
   appears above the RevSlider on mobile. The parent's
   `.page-title-area` / promo strip is overflowing the hero.
   ========================================================= */
@media (max-width: 1080px) {
    html body .page-title-area,
    html body .breadcrumb-area,
    html body .promo-strip,
    html body .top-banner-area,
    html body .header-promo-bar,
    html body [class*="promo-bar"]:not(.cb-keep) {
        display: none !important;
    }
}

/* =========================================================
   HEADER "START A PROJECT" CTA BUTTON — rebrand
   Parent theme renders this as washed-out peach with white
   text — unreadable. Force the CarteBlanche brand red pill
   regardless of which class the theme uses.
   ========================================================= */
html body .site-header .header-btn,
html body .site-header .header-cta,
html body .site-header .start-btn,
html body .site-header .top-bar-btn,
html body .site-header .tht-btn,
html body .main-header .header-btn,
html body .main-header .header-cta,
html body .top-header .header-btn,
html body header.site-header a.btn,
html body header.site-header .menu-btn,
html body header .menu-button,
html body header .cta-button,
html body header [class*="header-btn"],
html body header [class*="header-cta"],
html body header [class*="start-project"],
html body header [class*="start-btn"],
html body header [class*="-cta-btn"],
html body header [class*="header_btn"],
html body header [class*="primary-btn"]:not(.elementor-button) {
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%) !important;
    background-color: #C8252B !important;
    color: #ffffff !important;
    border: 1.5px solid transparent !important;
    border-radius: 999px !important;
    padding: 12px 24px !important;
    font-family: 'Rubrik', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    text-decoration: none !important;
    box-shadow: 0 12px 26px -10px rgba(168, 29, 34, 0.55) !important;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}
html body .site-header .header-btn:hover,
html body .site-header .header-cta:hover,
html body .site-header .start-btn:hover,
html body .site-header .tht-btn:hover,
html body header.site-header a.btn:hover,
html body header .menu-button:hover,
html body header .cta-button:hover,
html body header [class*="header-btn"]:hover,
html body header [class*="header-cta"]:hover,
html body header [class*="start-project"]:hover,
html body header [class*="start-btn"]:hover,
html body header [class*="-cta-btn"]:hover,
html body header [class*="primary-btn"]:not(.elementor-button):hover {
    background-image: linear-gradient(125deg, #C8252B 0%, #A01D22 52%, #821519 100%) !important;
    background-color: #A01D22 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 32px -10px rgba(168, 29, 34, 0.65) !important;
    border-color: transparent !important;
}
/* Kill any inherited hover-ring decorations */
html body header [class*="header-btn"]::before,
html body header [class*="header-btn"]::after,
html body header [class*="header-cta"]::before,
html body header [class*="header-cta"]::after,
html body header [class*="start-btn"]::before,
html body header [class*="start-btn"]::after,
html body header [class*="start-project"]::before,
html body header [class*="start-project"]::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: none !important;
}
/* Mobile: tighter padding so it doesn't crowd the cart icon */
@media (max-width: 768px) {
    html body header [class*="header-btn"],
    html body header [class*="header-cta"],
    html body header [class*="start-btn"],
    html body header [class*="start-project"],
    html body header [class*="-cta-btn"] {
        padding: 10px 18px !important;
        font-size: 13px !important;
    }
}

/* Header CTA on hover — pill morphs into rounded rectangle (4px) */
html body header .elementor-widget-button .elementor-button:hover,
html body header .elementor-widget-button a.elementor-button:hover,
html body header [class*="header-btn"]:hover,
html body header [class*="header-cta"]:hover,
html body header [class*="start-project"]:hover,
html body header [class*="start-btn"]:hover,
html body header [class*="-cta-btn"]:hover {
    border-radius: 4px 4px 4px 4px !important;
    transition: border-radius 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.25s,
                background-image 0.25s !important;
}

/* FORCE Rubrik sans-serif on the button + every child text node.
   Parent theme injects a script font (Monotype Corsiva / Yellowtail)
   somewhere down the chain — kill it at every level. */
html body header [class*="header-btn"],
html body header [class*="header-btn"] *,
html body header [class*="header-cta"],
html body header [class*="header-cta"] *,
html body header [class*="start-btn"],
html body header [class*="start-btn"] *,
html body header [class*="start-project"],
html body header [class*="start-project"] *,
html body header [class*="-cta-btn"],
html body header [class*="-cta-btn"] *,
html body header [class*="primary-btn"]:not(.elementor-button),
html body header [class*="primary-btn"]:not(.elementor-button) *,
html body header .menu-button,
html body header .menu-button *,
html body header .cta-button,
html body header .cta-button *,
html body header a.btn,
html body header a.btn *,
html body header a.btn span,
html body header a.btn i,
html body header a.btn em {
    font-family: 'Rubrik', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* =========================================================
   HEADER ELEMENTOR BUTTON — the "Start a project" CTA is actually
   an Elementor button widget (.elementor-button), not a parent-theme
   class. This block targets it specifically and forces the brand red
   pill + Rubrik typography on every state and child node.
   ========================================================= */
html body header .elementor-widget-button .elementor-button,
html body header .elementor-widget-button a.elementor-button,
html body header a.elementor-button,
html body header .elementor-button-link,
html body header .elementor-button {
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%) !important;
    background-color: #C8252B !important;
    color: #ffffff !important;
    border: 1.5px solid transparent !important;
    border-radius: 999px !important;
    padding: 12px 24px !important;
    font-family: 'Rubrik', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    text-decoration: none !important;
    box-shadow: 0 12px 26px -10px rgba(168, 29, 34, 0.55) !important;
    transition: border-radius 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.25s,
                background-image 0.25s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* All descendants of the header Elementor button — kill script/italic fonts */
html body header .elementor-widget-button .elementor-button *,
html body header .elementor-widget-button a.elementor-button *,
html body header a.elementor-button *,
html body header .elementor-button *,
html body header .elementor-button-text,
html body header .elementor-button-content-wrapper,
html body header .elementor-button-content-wrapper *,
html body header .elementor-button span,
html body header .elementor-button i,
html body header .elementor-button em {
    font-family: 'Rubrik', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: transparent !important;
    background-image: none !important;
}

/* Hover state for header Elementor button — pill to rounded rectangle */
html body header .elementor-widget-button .elementor-button:hover,
html body header .elementor-widget-button a.elementor-button:hover,
html body header a.elementor-button:hover,
html body header .elementor-button:hover {
    background-image: linear-gradient(125deg, #C8252B 0%, #A01D22 52%, #821519 100%) !important;
    background-color: #A01D22 !important;
    color: #ffffff !important;
    border-radius: 4px 4px 4px 4px !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 32px -10px rgba(168, 29, 34, 0.65) !important;
    border-color: transparent !important;
}

/* Kill any hover-ring / underline / decoration on the header button */
html body header .elementor-widget-button .elementor-button::before,
html body header .elementor-widget-button .elementor-button::after,
html body header a.elementor-button::before,
html body header a.elementor-button::after,
html body header .elementor-button::before,
html body header .elementor-button::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: none !important;
}

/* Mobile: tighter padding */
@media (max-width: 768px) {
    html body header .elementor-widget-button .elementor-button,
    html body header .elementor-widget-button a.elementor-button,
    html body header a.elementor-button,
    html body header .elementor-button {
        padding: 10px 18px !important;
        font-size: 13px !important;
    }
}

/* =========================================================
   CB-QUOTE WIZARD — modal popup with 5-step form
   ========================================================= */

/* Lock body scroll when the modal is open */
body.cb-quote-locked {
    overflow: hidden !important;
}

/* Backdrop + container */
.cb-quote-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483645;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(20, 12, 8, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.cb-quote-modal.is-open {
    display: flex;
    opacity: 1;
    animation: cbQuoteFadeIn 0.3s ease both;
}
@keyframes cbQuoteFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* The white card */
.cb-quote-modal-card {
    position: relative;
    width: 100%;
    max-width: 760px;
    max-height: calc(100vh - 48px);
    background: #FFFDFA;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 60px 110px -40px rgba(20, 12, 8, 0.65),
        0 20px 50px -20px rgba(20, 12, 8, 0.40);
    border: 1px solid rgba(235, 224, 213, 0.6);
    font-family: 'Rubrik', system-ui, -apple-system, sans-serif;
    color: #2A211C;
    transform: translateY(20px) scale(0.98);
    animation: cbQuoteSlideUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s both;
}
@keyframes cbQuoteSlideUp {
    0%   { transform: translateY(20px) scale(0.98); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
.cb-quote-modal.cb-q-shake .cb-quote-modal-card {
    animation: cbQuoteShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes cbQuoteShake {
    10%, 90% { transform: translateX(-4px); }
    20%, 80% { transform: translateX(6px); }
    30%, 50%, 70% { transform: translateX(-8px); }
    40%, 60% { transform: translateX(8px); }
}

/* Decorative gradient bar at the top edge of the card */
.cb-quote-modal-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    z-index: 2;
}

/* Close X button — high-specificity overrides so parent theme button
   styles (red bg, hidden SVG) can't bleed through */
html body .cb-quote-modal .cb-quote-modal-close,
html body button.cb-quote-modal-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 10 !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 1.5px solid #EBE0D5 !important;
    background: #FFFDFA !important;
    background-image: none !important;
    color: #2A211C !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease, color 0.2s ease, transform 0.3s ease, border-color 0.2s ease !important;
    box-shadow: 0 4px 12px -4px rgba(82, 48, 32, 0.30) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
}
html body .cb-quote-modal .cb-quote-modal-close:hover,
html body button.cb-quote-modal-close:hover {
    background: #A01D22 !important;
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: rotate(90deg) !important;
}
html body .cb-quote-modal .cb-quote-modal-close svg,
html body button.cb-quote-modal-close svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    stroke: currentColor !important;
    fill: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}
html body .cb-quote-modal .cb-quote-modal-close svg line,
html body button.cb-quote-modal-close svg line {
    stroke: currentColor !important;
}
html body .cb-quote-modal .cb-quote-modal-close::before,
html body .cb-quote-modal .cb-quote-modal-close::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: none !important;
}

/* Header */
.cb-q-header {
    padding: 36px 36px 16px;
    flex: none;
}
.cb-q-header .cb-quote-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #A01D22;
    margin: 0 0 12px 0;
}
.cb-q-header .cb-quote-eyebrow::before {
    content: "";
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
}
.cb-q-header h2 {
    font-family: 'Glitten', Georgia, serif;
    font-weight: 400;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.06;
    letter-spacing: -0.018em;
    color: #2A211C;
    margin: 0 0 8px 0;
}
.cb-q-header h2 em {
    font-style: italic;
    background-image: linear-gradient(125deg, #E0473C 0%, #A01D22 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.cb-q-tagline {
    font-size: 14px;
    line-height: 1.5;
    color: #4A3F38;
    margin: 0;
}

/* Progress */
.cb-q-progress {
    padding: 0 36px 18px;
    flex: none;
}
.cb-q-progress-track {
    width: 100%;
    height: 4px;
    background: #F6EEE4;
    border-radius: 2px;
    overflow: hidden;
}
.cb-q-progress-bar {
    height: 100%;
    width: 20%;
    background-image: linear-gradient(90deg, #E0473C, #C8252B, #A01D22);
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cb-q-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-family: 'Rubrik', sans-serif;
}
.cb-q-step-counter {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8A7B70;
}
.cb-q-step-label {
    font-family: 'Glitten', serif;
    font-size: 14px;
    color: #2A211C;
}
.cb-q-dots {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    justify-content: center;
}
.cb-q-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #F6EEE4;
    border: 1.5px solid #EBE0D5;
    color: #B3A89E;
    font-family: 'Rubrik', sans-serif;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    padding: 0;
}
.cb-q-dot.is-done {
    background: #FCE9DF;
    border-color: #FAD9C9;
    color: #A01D22;
    cursor: pointer;
}
.cb-q-dot.is-active {
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    border-color: transparent;
    color: #fff;
    transform: scale(1.12);
    box-shadow: 0 6px 14px -4px rgba(168, 29, 34, 0.55);
}
.cb-q-dot:not(.is-active):not(.is-done) {
    cursor: not-allowed;
}

/* Body / scroll region */
.cb-q-body {
    padding: 8px 36px 36px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

/* Steps — only the active one is visible */
.cb-q-step {
    display: none;
    flex-direction: column;
    gap: 18px;
    animation: cbQStepIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.cb-q-step.is-active {
    display: flex;
}
@keyframes cbQStepIn {
    0%   { opacity: 0; transform: translateX(20px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Field rows + columns */
.cb-q-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cb-q-field {
    display: flex;
    flex-direction: column;
}
.cb-q-field > span:first-child {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #2A211C;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.cb-q-field > span:first-child em {
    color: #C8252B;
    font-style: normal;
    margin-left: 2px;
}
.cb-q-field > span:first-child small {
    font-weight: 500;
    color: #8A7B70;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11.5px;
    margin-left: 8px;
}
.cb-q-field input,
.cb-q-field select,
.cb-q-field textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1.5px solid #EBE0D5;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14.5px;
    color: #2A211C;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}
.cb-q-field input:hover,
.cb-q-field select:hover,
.cb-q-field textarea:hover {
    border-color: #FAD9C9;
}
.cb-q-field input:focus,
.cb-q-field select:focus,
.cb-q-field textarea:focus {
    outline: none;
    border-color: #C8252B;
    box-shadow: 0 0 0 4px rgba(200, 37, 43, 0.10);
}
.cb-q-field input.is-invalid,
.cb-q-field select.is-invalid,
.cb-q-field textarea.is-invalid {
    border-color: #C8252B;
    box-shadow: 0 0 0 4px rgba(200, 37, 43, 0.10);
    animation: cbQuoteShakeField 0.3s ease both;
}
@keyframes cbQuoteShakeField {
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-2px); }
}
.cb-q-field textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.55;
}

/* Finishing checkbox grid */
.cb-q-checks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.cb-q-check {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FBF6EF;
    border: 1.5px solid #EBE0D5;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #4A3F38;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    user-select: none;
}
.cb-q-check:hover {
    border-color: #E0473C;
    background: #fff;
    transform: translateY(-1px);
}
.cb-q-check input {
    width: 16px;
    height: 16px;
    flex: none;
    accent-color: #C8252B;
    margin: 0;
    cursor: pointer;
}
.cb-q-check:has(input:checked) {
    border-color: #C8252B;
    background: #fff;
    color: #2A211C;
    box-shadow: 0 4px 10px -4px rgba(200, 37, 43, 0.25);
}

/* File drop zones */
.cb-q-file-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #2A211C;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.cb-q-file-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px 14px;
    border: 1.5px dashed #EBE0D5;
    border-radius: 12px;
    background: #FBF6EF;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    gap: 6px;
}
.cb-q-file-drop:hover {
    border-color: #C8252B;
    background: #fff;
    transform: translateY(-1px);
}
.cb-q-file-drop input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.cb-q-file-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #FCE9DF;
    color: #A01D22;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.cb-q-file-icon svg { width: 18px; height: 18px; }
.cb-q-file-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #2A211C;
    line-height: 1.3;
}
.cb-q-file-drop small {
    font-size: 11.5px;
    color: #8A7B70;
    font-style: italic;
}
.cb-q-file.has-file .cb-q-file-drop {
    border-style: solid;
    border-color: #C8252B;
    background: #FFFDFA;
}
.cb-q-file.has-file .cb-q-file-icon {
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    color: #fff;
}

/* Recommendation support box */
.cb-q-support {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: linear-gradient(135deg, #FBF6EF 0%, #FCE9DF 100%);
    border: 1.5px solid #EBE0D5;
    padding: 16px 18px;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.cb-q-support:hover {
    border-color: #C8252B;
    transform: translateY(-1px);
}
.cb-q-support input {
    width: 20px;
    height: 20px;
    accent-color: #C8252B;
    margin-top: 2px;
    flex: none;
}
.cb-q-support span {
    font-size: 13.5px;
    line-height: 1.5;
    color: #4A3F38;
}
.cb-q-support strong {
    color: #2A211C;
    font-weight: 600;
}

/* Error message */
.cb-q-error {
    display: none;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(200, 37, 43, 0.08);
    border-left: 3px solid #C8252B;
    color: #A01D22;
    font-size: 13.5px;
    line-height: 1.4;
}
.cb-q-error.is-visible {
    display: block;
}

/* Nav row (back / continue) */
.cb-q-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

/* Buttons */
.cb-q-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-family: 'Rubrik', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.25s ease,
                border-radius 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                background 0.25s ease,
                color 0.25s ease;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    line-height: 1;
    min-width: 130px;
}
.cb-q-btn svg { width: 16px; height: 16px; }
.cb-q-btn-primary {
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    color: #fff;
    box-shadow: 0 12px 26px -10px rgba(168, 29, 34, 0.55);
}
.cb-q-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -12px rgba(168, 29, 34, 0.65);
    border-radius: 4px 4px 4px 4px;
}
.cb-q-btn-primary:active { transform: translateY(0) scale(0.98); border-radius: 4px 4px 4px 4px; }
.cb-q-btn-ghost {
    background: rgba(255, 253, 250, 0.6);
    color: #2A211C;
    border-color: #EBE0D5;
}
.cb-q-btn-ghost:hover {
    border-color: #C8252B;
    color: #A01D22;
    background: rgba(200, 37, 43, 0.04);
    border-radius: 4px 4px 4px 4px;
}
.cb-q-btn-ghost:active { border-radius: 4px 4px 4px 4px; }

/* HIGH-SPECIFICITY HOVER OVERRIDE — parent theme's `button {}` rules
   were winning against the lower-specificity hover above. This block
   forces the pill→4px morph on every state regardless of cascade. */
html body .cb-quote-modal .cb-q-btn,
html body .cb-quote-modal button.cb-q-btn {
    border-radius: 999px !important;
}
html body .cb-quote-modal .cb-q-btn:hover,
html body .cb-quote-modal button.cb-q-btn:hover,
html body .cb-quote-modal .cb-q-btn-primary:hover,
html body .cb-quote-modal .cb-q-btn-ghost:hover,
html body .cb-quote-modal button.cb-q-btn-primary:hover,
html body .cb-quote-modal button.cb-q-btn-ghost:hover {
    border-radius: 4px !important;
}
html body .cb-quote-modal .cb-q-btn:active,
html body .cb-quote-modal button.cb-q-btn:active {
    border-radius: 4px !important;
}

/* Submit loading spinner */
.cb-q-submit { position: relative; }
.cb-q-btn-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    animation: cbQuoteSpin 0.7s linear infinite;
}
.cb-q-submit.is-loading .cb-q-btn-text { opacity: 0.6; }
.cb-q-submit.is-loading .cb-q-btn-spinner { display: inline-block; }
@keyframes cbQuoteSpin {
    to { transform: rotate(360deg); }
}

/* Success screen */
.cb-q-success {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 0 12px;
    animation: cbQStepIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.cb-q-success.is-visible { display: flex; }
.cb-q-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 18px 36px -12px rgba(168, 29, 34, 0.55);
    animation: cbQSuccessPop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
}
@keyframes cbQSuccessPop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.cb-q-success-icon svg { width: 32px; height: 32px; }
.cb-q-success h3 {
    font-family: 'Glitten', serif;
    font-weight: 400;
    font-size: 22px;
    color: #2A211C;
    margin: 0 0 10px 0;
    letter-spacing: -0.01em;
}
.cb-q-success p {
    font-size: 14.5px;
    line-height: 1.5;
    color: #4A3F38;
    max-width: 380px;
    margin: 0 0 24px 0;
}
.cb-q-success .cb-q-nav {
    width: 100%;
    margin-top: 0;
    justify-content: center;
}

/* MOBILE */
@media (max-width: 640px) {
    .cb-quote-modal { padding: 12px; align-items: flex-end; }
    .cb-quote-modal-card {
        max-height: calc(100vh - 24px);
        border-radius: 20px;
    }
    .cb-q-header { padding: 28px 22px 14px; }
    .cb-q-progress { padding: 0 22px 14px; }
    .cb-q-body { padding: 4px 22px 24px; }
    .cb-q-header h2 { font-size: 22px; }
    .cb-q-row { grid-template-columns: 1fr; gap: 14px; }
    .cb-q-checks { grid-template-columns: 1fr 1fr; }
    .cb-q-dots { gap: 4px; }
    .cb-q-dot { width: 24px; height: 24px; font-size: 10px; }
    .cb-q-nav {
        flex-direction: column-reverse;
        gap: 10px;
    }
    .cb-q-btn { width: 100%; min-width: 0; }
    .cb-quote-modal-close { top: 12px; right: 12px; width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    .cb-quote-modal,
    .cb-quote-modal-card,
    .cb-q-step,
    .cb-q-success,
    .cb-q-success-icon,
    .cb-q-progress-bar,
    .cb-q-btn,
    .cb-q-btn-spinner {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   CB-HOW-STEP — ultra-high-specificity reinforcement
   The original cb-how-step rules (line ~2000) use selectors
   like `.elementor-element.cb-how-step ...` which lose to
   later-defined rules with `html body` prefix. This block
   re-applies the circle-node treatment with maximum specificity
   so the icons can never burst out, regardless of what other
   class the user might have on the section.
   ========================================================= */

/* Each step column — positioning context */
html body .elementor-section .elementor-column.cb-how-step,
html body .elementor-element.cb-how-step.cb-how-step,
html body div.cb-how-step.elementor-column {
    position: relative !important;
    z-index: 1 !important;
}

/* Image-box wrapper inside a cb-how-step column → centered text */
html body .cb-how-step .elementor-widget-image-box .elementor-image-box-wrapper,
html body .elementor-element.cb-how-step .elementor-widget-image-box .elementor-image-box-wrapper {
    text-align: center !important;
    padding: 0 !important;
    display: block !important;
}

/* The image figure becomes a 130×130 white circle node */
html body .cb-how-step .elementor-widget-image-box .elementor-image-box-img,
html body .elementor-element.cb-how-step .elementor-widget-image-box .elementor-image-box-img,
html body div.cb-how-step.elementor-column .elementor-image-box-img {
    width: 130px !important;
    height: 130px !important;
    max-width: 130px !important;
    min-width: 130px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 6px solid #FBF6EF !important;
    box-shadow: 0 14px 36px -16px rgba(82,48,32,.30) !important;
    margin: 0 auto 28px auto !important;
    display: grid !important;
    place-items: center !important;
    position: relative !important;
    overflow: visible !important;
    padding: 0 !important;
    flex: none !important;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s !important;
}

/* The actual icon image inside the circle → 64% of circle */
html body .cb-how-step .elementor-widget-image-box .elementor-image-box-img img,
html body .elementor-element.cb-how-step .elementor-widget-image-box .elementor-image-box-img img,
html body div.cb-how-step.elementor-column .elementor-image-box-img img {
    width: 64% !important;
    height: 64% !important;
    max-width: 64% !important;
    max-height: 64% !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* Numbered badge — render via ::after on the figure */
html body .cb-how-step .elementor-widget-image-box .elementor-image-box-img::after,
html body .elementor-element.cb-how-step .elementor-widget-image-box .elementor-image-box-img::after {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background-image: linear-gradient(125deg, #E0473C 0%, #C8252B 52%, #A01D22 100%) !important;
    color: #ffffff !important;
    font-family: 'Glitten', serif !important;
    font-size: 16px !important;
    display: grid !important;
    place-items: center !important;
    z-index: 2 !important;
    box-shadow: 0 10px 22px -6px rgba(168,29,34,.55) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}
html body .cb-how-step-1 .elementor-image-box-img::after { content: "01" !important; }
html body .cb-how-step-2 .elementor-image-box-img::after { content: "02" !important; }
html body .cb-how-step-3 .elementor-image-box-img::after { content: "03" !important; }
html body .cb-how-step-4 .elementor-image-box-img::after { content: "04" !important; }

/* Title + description — restore Glitten/Rubrik defaults inside cb-how-step */
html body .cb-how-step .elementor-widget-image-box .elementor-image-box-title,
html body .elementor-element.cb-how-step .elementor-widget-image-box .elementor-image-box-title {
    font-family: 'Glitten', serif !important;
    font-size: 22px !important;
    color: #2A211C !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;
    text-align: center !important;
    display: block !important;
}
html body .cb-how-step .elementor-widget-image-box .elementor-image-box-description,
html body .elementor-element.cb-how-step .elementor-widget-image-box .elementor-image-box-description {
    font-family: 'Rubrik', sans-serif !important;
    font-size: 14.5px !important;
    color: #4A3F38 !important;
    line-height: 1.6 !important;
    max-width: 260px !important;
    margin: 0 auto !important;
    text-align: center !important;
    display: block !important;
}

/* Mobile: smaller circle */
@media (max-width: 600px) {
    html body .cb-how-step .elementor-widget-image-box .elementor-image-box-img,
    html body .elementor-element.cb-how-step .elementor-widget-image-box .elementor-image-box-img {
        width: 100px !important;
        height: 100px !important;
        max-width: 100px !important;
        min-width: 100px !important;
        border-width: 5px !important;
        margin-bottom: 20px !important;
    }
    html body .cb-how-step .elementor-image-box-img::after,
    html body .elementor-element.cb-how-step .elementor-image-box-img::after {
        width: 34px !important;
        height: 34px !important;
        font-size: 13px !important;
        top: -2px !important;
        right: -2px !important;
    }
}