/*
Theme Name: IT LIKE LIFE Premium
Author: Amir
Description: Luxury IT & Security Services Template
Version: 2.0.1
Text Domain: it-like-life
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================
   GLOBAL VARIABLES & RESETS
   ========================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
    scroll-behavior: smooth;
    /* Offset anchor jumps so section titles sit below sticky header + promo */
    scroll-padding-top: var(--it-anchor-offset, clamp(76px, 18vw, 108px));
    /* Do not use overflow-x: hidden on html/body — it breaks position:sticky on the header */
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
    /* Fallback when Global → Typography CSS is not injected (ACF off) */
    font-size: var(--base-font-size, 18px);
}
body {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #fff;
    background: #000;
    line-height: 1.6;
    max-width: 100%;
    position: relative;
}
/* Stop wide embeds / editor content from forcing horizontal scroll */
main {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
/* Let hero gradient text paint correctly (WebKit can clip background-clip:text when ancestors clip) */
main .hero,
main .hero .hero-copy,
main .hero .hero-inner {
    overflow: visible;
}
main .entry-content,
main .post-content {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
main .entry-content img,
main .entry-content video,
main .entry-content iframe,
main .entry-content embed {
    max-width: 100%;
    height: auto;
}
main .wp-block-embed,
main .wp-block-image {
    max-width: 100%;
}
main .wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    display: block;
}

/* In-page anchor for #clients (same block as testimonials) */
.it-anchor-mark {
    display: block;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    position: absolute;
    width: 1px;
}

/* Promo strip: color from Global → Colors → Promo Bar Background (--promo-bg) */
.promo-link {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 16px;
    background: var(--promo-bg, #facc15) !important;
    color: #000 !important;
    font-weight: 600;
    font-size: 0.875rem;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; }
.center { text-align: center; }
/* Consistent vertical rhythm between major sections (desktop / mobile) */
.section-padding { padding: clamp(44px, 6vw, 72px) 0; }
@media (max-width: 767px) {
    .section-padding { padding: clamp(36px, 8vw, 52px) 0; }
}
a { text-decoration: none; color: inherit; transition: 0.3s; }

/* Dynamic Theme Colors (controlled by JS switcher) */
body.theme-gold      { --primary: #D4AF37; --secondary: #1a1a1a; --gold: #D4AF37; }
body.theme-platinum  { --primary: #e5e7eb; --secondary: #111827; --gold: #e5e7eb; }
body.theme-emerald   { --primary: #10b981; --secondary: #064e3b; --gold: #10b981; }
body.theme-sapphire  { --primary: #3b82f6; --secondary: #1e3a8a; --gold: #3b82f6; }
body.theme-plum      { --primary: #a855f7; --secondary: #3b0764; --gold: #a855f7; }
/* Ruby: accent is coral/rose red (not champagne) so UI reads clearly red */
body.theme-luxury-red {
    --primary: #9a1b1e;
    --secondary: #0c0404;
    --gold: #fb7185;
    --gold-gradient: linear-gradient(118deg, #450a0a 0%, #b91c1c 40%, #fb7185 70%, #fecdd3 100%);
}
body.theme-onyx      { --primary: #facc15; --secondary: #000000; --gold: #facc15; }

/* ==========================================
   LUXURY UI ELEMENTS
   ========================================== */
.luxury-title {
    font-size: clamp(2rem, 4vw, 3.5rem) !important;
    font-family: 'Playfair Display', serif !important;
    color: var(--gold, #facc15) !important;
    margin-bottom: 40px;
}

.glowing-border-gold {
    border: 1px solid var(--gold, #facc15) !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4), inset 0 0 10px rgba(212, 175, 55, 0.1) !important;
    background: #151515 !important;
    border-radius: 12px;
}

/* FIX: Shining Divider Visibility */
.shining-divider {
    display: block;
    height: 2px;
    width: 100%;
    max-width: 800px;
    margin: clamp(20px, 4vw, 32px) auto;
    background: linear-gradient(90deg, transparent, var(--gold, #facc15), transparent);
    box-shadow: 0 0 15px var(--gold, #facc15);
    opacity: 0.8;
}

/* About Us (homepage, ACF) */
.about-section {
    background: linear-gradient(180deg, rgba(17, 21, 28, 0.35) 0%, transparent 42%);
}
.about-section__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(28px, 5vw, 56px);
}
.about-section__inner--image-right {
    flex-direction: row;
}
.about-section__inner--image-left {
    flex-direction: row-reverse;
}
.about-section__content {
    flex: 1 1 min(100%, 520px);
    min-width: 0;
    text-align: left;
}
.about-section__eyebrow {
    font-size: 0.8125rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold, #facc15);
    opacity: 0.95;
    margin-bottom: 0.75rem;
    font-weight: 600;
}
.about-section__title.luxury-title {
    text-align: left !important;
    margin-bottom: clamp(1rem, 2.5vw, 1.5rem) !important;
}
.about-section__body {
    color: #c9cdd4;
    font-size: clamp(0.95rem, 1.35vw, 1.0625rem);
    line-height: 1.75;
    max-width: 38rem;
}
.about-section__body p {
    margin-bottom: 1rem;
}
.about-section__body p:last-child {
    margin-bottom: 0;
}
.about-section__media {
    flex: 0 1 380px;
    max-width: 100%;
    margin: 0 auto;
}
.about-section__figure {
    margin: 0;
    padding: clamp(10px, 2vw, 14px);
    border-radius: 14px;
    overflow: hidden;
    background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(212, 175, 55, 0.12), transparent 55%);
}
.about-section__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    aspect-ratio: 4 / 5;
    max-height: min(72vh, 520px);
}
@media (max-width: 767px) {
    .about-section__inner--image-right,
    .about-section__inner--image-left {
        flex-direction: column;
    }
    .about-section__media {
        flex: 1 1 auto;
        width: 100%;
        max-width: 420px;
        order: -1;
    }
    .about-section__title.luxury-title {
        text-align: center !important;
    }
    .about-section__content {
        text-align: center;
    }
    .about-section__body {
        margin-left: auto;
        margin-right: auto;
    }
}

.btn-gold {
    background-color: var(--gold, #facc15) !important;
    color: #000 !important;
    padding: 12px 30px;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
    border: none;
    cursor: pointer;
}
.btn-gold:hover { filter: brightness(1.2); box-shadow: 0 0 15px rgba(250, 204, 21, 0.4); }

/* ==========================================
   HEADER & NAVIGATION
   ========================================== */
.dark-header {
    background: #11151c;
    padding: 15px 0;
    border-bottom: 1px solid var(--gold, #facc15);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    max-width: 100%;
}
.header-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.dark-header .logo {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 120px);
}
.logo-flex { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.logo-image {
    max-height: 48px;
    width: auto;
    max-width: min(160px, 42vw);
    height: auto;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}
.logo-circle-icon {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    border: 2px solid var(--gold, #facc15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold, #facc15);
    font-weight: bold;
    font-size: 18px;
}
.logo-text-wordmark {
    font-family: 'Playfair Display', serif;
    font-size: clamp(15px, 4.2vw, 24px);
    letter-spacing: clamp(0.5px, 0.3vw, 2px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: inline-flex;
    align-items: baseline;
    min-width: 0;
}
.logo-text-gold {
    color: var(--gold, #facc15);
    font-weight: 700;
    text-shadow: 0 0 14px rgba(250, 204, 21, 0.35);
}
.logo-text-rest {
    color: #fff;
    font-weight: 400;
}

.nav-links {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
}
.nav-links > ul.it-primary-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 22px 25px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-links > ul.it-primary-menu > li {
    margin: 0;
    padding: 0;
}
.nav-links a { color: #fff; font-size: 0.875rem; font-weight: 500; position: relative; padding-bottom: 5px; }
.nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 2px; background-color: var(--gold, #facc15); transition: width 0.3s; }
.nav-links a:hover::after { width: 100%; }

/* Hamburger Menu */
.hamburger { display: none; cursor: pointer; flex-direction: column; gap: 6px; z-index: 1005; }
.hamburger span { width: 30px; height: 3px; background: var(--gold, #facc15); transition: 0.3s; }

/* ==========================================
   PAGE SECTIONS
   ========================================== */
.hero {
    padding: 85px 0;
    width: 100%;
    max-width: 100%;
    background-size: cover !important;
    background-position: center !important;
}
@media (min-width: 992px) {
    .hero { padding: 100px 0 110px; }
}
.hero .container {
    max-width: min(1200px, 100%) !important;
    width: 100%;
}
.hero-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    align-items: center;
    text-align: left;
}
@media (min-width: 992px) {
    .hero-split {
        grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
        gap: 48px;
        align-items: center;
    }
}
.hero-copy {
    min-width: 0;
}
.hero-visual {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-visual__img {
    width: 100%;
    max-width: 560px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    object-fit: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 992px) {
    .hero-visual__img {
        margin-right: 0;
        margin-left: auto;
    }
}
.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.35rem, 5.5vw, 4.0625rem);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    line-height: 1.12;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}
.hero-title--sans {
    font-family: inherit;
    font-weight: 400;
    text-transform: none;
    line-height: 1.08;
    margin-bottom: 24px;
}
.hero-title--sans .hero-headline__light {
    display: block;
    font-family: var(--hero-font-light, 'Montserrat', system-ui, sans-serif);
    font-weight: 400;
    /* font-size: set inline from ACF “Size: light line” */
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hero-headline-muted, #94a3b8);
    margin-bottom: clamp(10px, 2vw, 16px);
}
.hero-title--sans .hero-headline__bold {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2em 0.35em;
    align-items: baseline;
    font-weight: 900;
    /* font-size: per-word inline from ACF gold/silver size sliders */
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: inherit;
}
.hero-title--sans .hero-headline__word {
    font-family: var(--hero-font-bold, 'Montserrat', system-ui, sans-serif);
}
.hero-headline__word {
    display: inline-block;
    position: relative;
    max-width: 100%;
    padding-bottom: 0.06em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
/* Solid fallbacks (visible if background-clip is stripped by a minifier or old browser) */
.hero .hero-title--sans .hero-headline__word--gold {
    color: var(--gold, #d4af37);
}
.hero .hero-title--sans .hero-headline__word--silver {
    color: #e2e8f0;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
    .hero .hero-title--sans .hero-headline__word--gold {
        background-image: linear-gradient(118deg, #4a3a0a 0%, var(--gold, #d4af37) 42%, #fff9e6 92%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
    body.theme-luxury-red .hero .hero-title--sans .hero-headline__word--gold {
        background-image: var(--gold-gradient, linear-gradient(118deg, #450a0a 0%, #b91c1c 40%, #fb7185 70%, #fecdd3 100%));
    }
    .hero .hero-title--sans .hero-headline__word--silver {
        background-image: linear-gradient(
            118deg,
            var(--text-light, #64748b) 0%,
            var(--border, #e2e8f0) 48%,
            #ffffff 100%
        );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}
.hero-title--legacy {
    font-family: 'Playfair Display', serif;
}
.hero-inner {
    text-align: left;
}
.hero-lead {
    font-family: var(--hero-font-lead, 'Inter', system-ui, sans-serif);
    /* font-size: set inline from ACF “Size: hero description” */
    font-weight: 400;
    line-height: 1.65;
    color: #e2e8f0;
    max-width: min(38em, 100%);
    margin-bottom: 32px;
}
.hero-btns--start {
    justify-content: flex-start;
}
.hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 15px;
    --hero-btn-radius: 4px;
}
.hero .hero-cta {
    font-family: var(--hero-font-lead, 'Inter', system-ui, sans-serif);
    display: inline-block;
    padding: 13px 33px;
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--hero-btn-radius, 4px);
    border-width: 2px;
    border-style: solid;
    box-sizing: border-box;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, border-color 0.2s;
    text-align: center;
    line-height: 1.25;
}
.hero .hero-cta--p-gold-solid {
    background: var(--gold, #d4af37) !important;
    color: #0b1120 !important;
    border-color: transparent !important;
}
.hero .hero-cta--p-gold-solid:hover {
    filter: brightness(1.08);
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.45);
}
.hero .hero-cta--p-gold-outline {
    background: transparent !important;
    color: var(--gold, #d4af37) !important;
    border-color: var(--gold, #d4af37) !important;
}
.hero .hero-cta--p-gold-outline:hover {
    background: rgba(212, 175, 55, 0.1) !important;
}
.hero .hero-cta--p-dark-solid {
    background: var(--secondary, #0b1120) !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}
.hero .hero-cta--p-dark-solid:hover {
    filter: brightness(1.12);
}
.hero .hero-cta--p-white-solid {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: transparent !important;
}
.hero .hero-cta--p-white-solid:hover {
    filter: brightness(0.97);
}
.hero .hero-cta--s-ghost-gold {
    background: transparent !important;
    color: var(--gold, #d4af37) !important;
    border-color: var(--gold, #d4af37) !important;
}
.hero .hero-cta--s-ghost-gold:hover {
    background: rgba(212, 175, 55, 0.12) !important;
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.25);
}
.hero .hero-cta--s-ghost-light {
    background: transparent !important;
    color: #e2e8f0 !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
}
.hero .hero-cta--s-ghost-light:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}
.hero .hero-cta--s-solid-gold {
    background: var(--gold, #d4af37) !important;
    color: #0b1120 !important;
    border-color: var(--gold, #d4af37) !important;
}
.hero .hero-cta--s-solid-gold:hover {
    filter: brightness(1.08);
}
.hero .hero-cta--s-outline-dark {
    background: transparent !important;
    color: #0f172a !important;
    border-color: #0f172a !important;
}
.hero .hero-cta--s-outline-dark:hover {
    background: rgba(15, 23, 42, 0.08) !important;
}
.btn-hero--ghost {
    background: transparent !important;
    color: var(--gold, #d4af37) !important;
    border: 2px solid var(--gold, #d4af37) !important;
    padding: 13px 33px;
    border-radius: 2px;
    font-weight: 700;
    text-transform: uppercase;
    transition: background 0.2s, color 0.2s;
}
.btn-hero--ghost:hover {
    background: rgba(212, 175, 55, 0.12) !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.25);
    filter: none;
}
@media (max-width: 767px) {
    .hero-btns { flex-direction: column; align-items: stretch; }
    .hero-btns .btn-hero,
    .hero-btns .hero-cta {
        text-align: center;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Stats & process grids (used on front page) */
.luxury-grid-stats,
.luxury-grid-process {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    text-align: center;
    width: 100%;
}
.luxury-grid-stats > *,
.luxury-grid-process > * {
    min-width: 0;
}
@media (min-width: 480px) {
    .luxury-grid-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .luxury-grid-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 900px) {
    .luxury-grid-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 30px;
    }
    .luxury-grid-process {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 25px;
    }
}

/* Process workflows — luxury “algorithm” cards (click to expand) */
.process-section {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.35) 0%, transparent 45%),
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 175, 55, 0.08), transparent 55%);
}
.process-workflows {
    display: flex;
    flex-direction: column;
    gap: 48px;
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
}
.process-workflow {
    padding: 28px 22px 32px;
    text-align: left;
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(21, 21, 21, 0.96) 0%, rgba(10, 12, 18, 0.98) 100%);
}
.process-workflow__title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.35rem, 3.5vw, 1.85rem);
    color: var(--gold, #d4af37);
    margin: 0 0 8px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.process-workflow__subtitle {
    margin: 0 0 28px;
    color: var(--text-light, #94a3b8);
    font-size: 0.98rem;
    line-height: 1.5;
    max-width: 52ch;
}
.process-workflow__track {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 8px;
}
.process-workflow__track::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: linear-gradient(180deg, var(--gold, #d4af37), rgba(212, 175, 55, 0.15));
    border-radius: 2px;
    opacity: 0.85;
    pointer-events: none;
}
.process-card {
    position: relative;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0;
}
.process-card + .process-card {
    margin-top: 12px;
}
.process-card__summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 14px 16px;
    padding: 16px 14px;
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.2) 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
}
.process-card__summary::-webkit-details-marker {
    display: none;
}
.process-card__summary:hover {
    border-color: rgba(212, 175, 55, 0.65);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 24px rgba(212, 175, 55, 0.12);
}
.process-card[open] .process-card__summary {
    border-color: var(--gold, #d4af37);
    background: linear-gradient(120deg, rgba(212, 175, 55, 0.12) 0%, rgba(0, 0, 0, 0.35) 100%);
}
.process-card__node {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: #0b1120;
    background: radial-gradient(circle at 30% 25%, #fff6d6, var(--gold, #d4af37) 55%, #8a7218);
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.95), 0 6px 20px rgba(0, 0, 0, 0.45);
    flex-shrink: 0;
}
.process-card__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}
.process-card__title {
    display: block;
    font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
    font-size: clamp(0.95rem, 2.2vw, 1.1rem);
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.3;
    text-transform: none;
}
.process-card__teaser {
    display: block;
    font-size: 0.82rem;
    color: var(--text-light, #94a3b8);
    font-weight: 500;
    letter-spacing: 0.03em;
}
.process-card__chev {
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--gold, #d4af37);
    border-bottom: 2px solid var(--gold, #d4af37);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    justify-self: end;
    opacity: 0.9;
}
.process-card[open] .process-card__chev {
    transform: rotate(-135deg);
    margin-top: 6px;
}
.process-card__body {
    padding: 0 14px 18px 78px;
    margin-top: 4px;
    animation: process-card-open 0.35s ease;
}
@keyframes process-card-open {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.process-card__detail {
    color: #e2e8f0;
    font-size: 0.95rem;
    line-height: 1.65;
}
.process-card__detail p {
    margin: 0 0 0.75em;
}
.process-card__detail p:last-child {
    margin-bottom: 0;
}
@media (max-width: 600px) {
    .process-workflow__track::before {
        left: 21px;
    }
    .process-card__summary {
        grid-template-columns: 44px minmax(0, 1fr) 24px;
        padding: 14px 12px;
    }
    .process-card__node {
        width: 38px;
        height: 38px;
        font-size: 0.75rem;
    }
    .process-card__body {
        padding-left: 0;
        padding-right: 0;
    }
}

.btn-hero { padding: 15px 35px; border-radius: 4px; font-weight: 700; text-transform: uppercase; }
.btn-outline { border: 2px solid var(--gold, #facc15); color: var(--gold, #facc15); }

/* Services / portfolio / card grids (mobile-first: minmax(300px) caused horizontal overflow on phones) */
.luxury-grid-3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    width: 100%;
}
.luxury-grid-3 > * {
    min-width: 0;
    max-width: 100%;
}
@media (min-width: 560px) {
    .luxury-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }
}
@media (min-width: 960px) {
    .luxury-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 25px;
    }
}

.premium-3col {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s;
    width: 100%;
    max-width: 100%;
}
.premium-3col:hover { transform: translateY(-10px); }

/* Why Us: full-frame images + lightbox */
.why-us-section .why-us-card {
    padding: 0;
    text-align: center;
    overflow: hidden;
}
button.why-us-card__media {
    font: inherit;
    color: inherit;
    appearance: none;
    -webkit-appearance: none;
}
.why-us-card__media {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: #0f172a;
    cursor: zoom-in;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.why-us-card__media--static {
    cursor: default;
}
.why-us-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.why-us-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 0;
}
.why-us-card__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(3rem, 12vw, 4.5rem);
    z-index: 0;
}
.why-us-card__body {
    padding: 22px 18px 26px;
    overflow-wrap: break-word;
    word-break: break-word;
}
.why-us-card__body h3 {
    color: var(--gold, #facc15);
    margin: 0 0 10px;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    text-transform: uppercase;
}
.why-us-card__body p {
    margin: 0;
    color: var(--text-main, #334155);
    font-size: 0.98rem;
    line-height: 1.55;
}

.it-image-lightbox[hidden] {
    display: none !important;
}
.it-image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10070;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
}
.it-image-lightbox__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.88);
    cursor: pointer;
}
.it-image-lightbox__inner {
    position: relative;
    z-index: 1;
    max-width: min(96vw, 1400px);
    max-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.it-image-lightbox__img {
    max-width: 100%;
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}
.it-image-lightbox__close {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--gold, #d4af37);
    color: #0b1120;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.it-image-lightbox__close:hover {
    filter: brightness(1.08);
}

.luxury-service-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.service-image-frame { height: 220px; width: 100%; max-width: 100%; min-height: 180px; }
.service-image-frame img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
}
.card-content { padding: 20px; flex-grow: 1; overflow-wrap: break-word; word-break: break-word; }
@media (min-width: 768px) {
    .card-content { padding: 25px; }
}
.card-content h3 { color: var(--gold, #facc15); margin-bottom: 10px; font-size: clamp(1rem, 2.5vw, 1.3rem); text-transform: uppercase; }

/* Senior VIP Box */
.senior-flex-layout { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 40px; }
.senior-flex-layout .vip-content, .senior-flex-layout .vip-image { flex: 1; min-width: 0; }
.senior-flex-layout .vip-image img { max-width: 100%; height: auto; display: block; }
@media (max-width: 767px) {
    .senior-flex-layout { padding: 24px 16px; gap: 24px; }
}

/* Testimonials carousel: one row of 3 cards per slide, horizontal scroll + dots */
.testimonials-carousel {
    width: 100%;
    margin-top: clamp(16px, 3vw, 28px);
}
.testimonials-carousel__controls {
    display: flex;
    align-items: stretch;
    gap: clamp(6px, 1.5vw, 12px);
    width: 100%;
}
.testimonials-carousel__viewport {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x;
}
.testimonials-carousel__viewport::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.testimonials-carousel__track {
    display: contents;
}
.testimonials-carousel__slide {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 2vw, 20px);
    align-items: stretch;
    box-sizing: border-box;
    padding: 0 4px;
    min-height: 0;
}
/* Mobile: one card per slide — same card styling, full width of viewport area */
.testimonials-carousel__slide--single {
    grid-template-columns: minmax(0, 1fr);
}
.testimonials-carousel--single-card .testimonial-card {
    width: 100%;
    max-width: 100%;
}
.testimonials-carousel__arrow {
    flex: 0 0 auto;
    align-self: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--gold, #facc15);
    border-radius: 50%;
    background: rgba(17, 17, 17, 0.9);
    color: var(--gold, #facc15);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.testimonials-carousel__arrow:hover {
    background: rgba(212, 175, 55, 0.15);
}
.testimonials-carousel__arrow:active {
    transform: scale(0.96);
}
.testimonials-carousel[data-slides="1"] .testimonials-carousel__arrow {
    visibility: hidden;
    pointer-events: none;
}
.testimonials-carousel__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: clamp(18px, 3vw, 26px);
    flex-wrap: wrap;
}
.testimonials-carousel__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.testimonials-carousel__dot.is-active {
    background: var(--gold, #facc15);
    transform: scale(1.25);
}
.testimonials-cta-wrap {
    margin-top: clamp(28px, 5vw, 48px);
}
.testimonials-carousel__slide .testimonial-card {
    min-height: 100%;
    height: 100%;
    box-sizing: border-box;
}
.testimonials-carousel .testimonial-card {
    min-height: 240px;
}
.testimonial-card {
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-wrap: break-word;
}
@media (min-width: 768px) {
    .testimonial-card {
        padding: 25px;
    }
    .testimonials-carousel .testimonial-card {
        min-height: 260px;
    }
}
.empty-box { height: 200px; }
.quote-text {
    font-style: italic;
    color: #ccc;
    font-size: clamp(12px, 1.35vw, 14px);
    margin-bottom: 20px;
    flex: 1 1 auto;
    min-height: 3em;
}
.client-info {
    display: flex;
    align-items: flex-end;
    gap: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
    margin-top: auto;
}
.client-role {
    margin: 4px 0 0;
    font-size: 13px;
    color: #aaa;
}
.client-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--gold, #facc15); }

/* Forms & Footer */
.quote-section { background-color: #0b1120; }
.quote-form-wrapper { max-width: 800px; margin: 0 auto; padding: 40px; box-sizing: border-box; width: 100%; }
@media (max-width: 767px) {
    .quote-form-wrapper { padding: 24px 16px; }
}
.dark-form input, .dark-form textarea { background: #2a2a2a; border: 1px solid #444; color: #fff; width: 100%; padding: 12px; margin-bottom: 15px; }
.contact-section { background-color: #05080f; }
.contact-grid-3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    text-align: center;
    width: 100%;
}
.contact-grid-3 > * { min-width: 0; }
@media (min-width: 600px) {
    .contact-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}
@media (min-width: 900px) {
    .contact-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 30px;
    }
}
.contact-card i { font-style: normal; font-size: 30px; display: block; margin-bottom: 15px; }
a.contact-card.contact-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 26px 22px;
    box-sizing: border-box;
    transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
a.contact-card.contact-card--link:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 22px rgba(212, 175, 55, 0.45), inset 0 0 12px rgba(212, 175, 55, 0.12) !important;
}
a.contact-card.contact-card--link:focus-visible {
    outline: 2px solid var(--gold, #facc15);
    outline-offset: 3px;
}
.contact-card__primary,
.contact-card__area {
    font-size: 15px;
    color: #ddd !important;
    margin: 0;
    word-break: break-word;
}
.contact-card__secondary {
    font-size: 14px;
    color: #aaa !important;
    margin: 10px 0 0;
}
.contact-card__hint {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold, #facc15) !important;
    margin: 14px 0 0;
    font-weight: 600;
    opacity: 0.95;
}
.contact-card--service-map .contact-card__area {
    margin-top: 6px;
    line-height: 1.45;
}
.site-footer { background: #000; padding: 30px 0; font-size: 13px; color: #888; border-top: 1px solid #222; }

/* Testimonial modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10050;
    padding: 16px;
    box-sizing: border-box;
}
.modal-content {
    width: min(100%, 520px) !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Fluent Forms (shortcode) */
.fluentform,
.frm-fluent-form,
.ff_form_wrap,
.ff-el-group {
    max-width: 100% !important;
}
.fluentform input,
.fluentform textarea,
.fluentform select {
    max-width: 100%;
    box-sizing: border-box;
}

/* Back to home (appears after scrolling) */
.back-to-home {
    position: fixed;
    right: 16px;
    bottom: 24px;
    z-index: 10003;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--gold, #facc15);
    background: rgba(0, 0, 0, 0.88);
    color: var(--gold, #facc15);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.back-to-home.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-home:hover {
    filter: brightness(1.12);
}
@media (max-width: 991px) {
    .back-to-home {
        bottom: calc(60px + 16px);
    }
}

/* Admin Switcher */
.switcher-toggle { position: fixed; bottom: 80px; left: 20px; background: rgba(0,0,0,0.8); border: 1px solid var(--gold, #facc15); color: #fff; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10001; }
#switcher { position: fixed; bottom: 130px; left: 20px; background: #111; padding: 15px; border-radius: 8px; border: 1px solid #333; width: 160px; display: none; z-index: 10000; }
.t-btn { width: 100%; padding: 8px; margin-bottom: 5px; border: none; cursor: pointer; color: white; font-size: 11px; font-weight: bold; }

/* ==========================================
   MOBILE RESPONSIVENESS
   ========================================== */
.mobile-only { display: none; }

@media (max-width: 991px) {
    .container { padding-left: 16px; padding-right: 16px; }
    .luxury-title { margin-bottom: 28px !important; }
    .desktop-only { display: none !important; }
    .hamburger { display: flex; z-index: 10055; }
    
    /* Mobile Menu Dropdown (above bottom CTA bar) */
    .nav-links { position: fixed; top: 76px; right: -100%; left: auto; width: 100%; max-width: 100%; height: calc(100vh - 76px); background: #11151c; flex-direction: column; justify-content: flex-start; align-items: stretch; padding-top: 40px; transition: 0.4s ease; z-index: 10050; box-sizing: border-box; overflow-y: auto; }
    .nav-links > ul.it-primary-menu {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        gap: 0;
    }
    .nav-links ul { width: 100%; max-width: 100%; margin: 0; padding: 0; list-style: none; box-sizing: border-box; }
    .nav-links.active { right: 0; }
    .nav-links li {
        width: 100%;
        max-width: 100%;
        list-style: none;
        text-align: center;
    }
    .nav-links a {
        display: block;
        padding: 12px 16px;
    }
    .hamburger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

    .senior-flex-layout { flex-direction: column; text-align: center; }
    .senior-flex-layout .vip-content { max-width: 100%; }

    /* Sticky Mobile Bottom Bar */
    body { padding-bottom: 60px; } /* Prevents content from hiding under bar */
    .mobile-only { display: flex; }
    .mobile-cta-bar { position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; background: #000; z-index: 9999; box-shadow: 0 -5px 20px rgba(0,0,0,0.5); }
    .mobile-cta-btn { flex: 1; display: flex; justify-content: center; align-items: center; font-weight: 800; font-size: 14px; text-transform: uppercase; color: #000; }
    .mobile-cta-call { background: #fff; }
    .mobile-cta-quote { background: var(--gold, #facc15); }
}
/* 1. Header Menu pushed to the right */
.right-aligned-nav {
    margin-left: auto;
    margin-right: 35px; /* Spaces it nicely from the quote button */
}
@media (max-width: 991px) {
    .right-aligned-nav {
        margin-right: 0;
    }
}

/* 2. Services Card Centered Text Alignment */
.centered-service-card .card-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.centered-service-card .card-action {
    margin-top: auto;
    display: inline-block;
    color: var(--gold, #facc15);
    font-weight: bold;
    font-size: 14px;
    padding-top: 15px;
}

/* FAQ column */
.faq-wrap {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Portfolio cards: optional link to client site + service caption (uses theme --gold) */
#portfolio .portfolio-card {
    display: block;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}
#portfolio a.portfolio-card--linked {
    cursor: pointer;
}
#portfolio .portfolio-card:hover .portfolio-card__img {
    filter: brightness(1.06);
}
#portfolio .portfolio-card__inner {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    height: 100%;
}
#portfolio .portfolio-card__figure {
    display: block;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
}
#portfolio .portfolio-card__img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}
#portfolio .portfolio-card__placeholder {
    display: block;
    width: 100%;
    min-height: 200px;
    border-radius: 12px;
    background: #222;
}
#portfolio .portfolio-card__caption {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold, #facc15);
    line-height: 1.35;
    padding: 0 2px 4px;
}
#portfolio .portfolio-card__caption--left {
    text-align: left;
    padding-left: 0.65rem;
    padding-right: 0.35rem;
}
#portfolio .portfolio-card__caption--center {
    text-align: center;
}

/* ==========================================
   Global typography scale (rem) + section alignment
   Base size: Global Settings → Typography (--base-font-size on :root)
   ========================================== */
.it-section-align {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.it-section-align .container {
    width: 100%;
    max-width: min(1200px, 100%);
    box-sizing: border-box;
}

/* Desktop / tablet: honor ACF alignment */
@media (min-width: 769px) {
    .it-section-align--left {
        text-align: left;
    }
    .it-section-align--left .center,
    .it-section-align--left .luxury-title.center {
        text-align: left !important;
    }
    .it-section-align--center {
        text-align: center;
    }
    .it-section-align--center .center,
    .it-section-align--center .luxury-title.center {
        text-align: center !important;
    }
    .it-section-align--right {
        text-align: right;
    }
    .it-section-align--right .center,
    .it-section-align--right .luxury-title.center {
        text-align: right !important;
    }

    .hero.it-section-align--center .hero-split,
    .hero.it-section-align--center .hero-inner {
        text-align: center;
        justify-items: center;
    }
    .hero.it-section-align--center .hero-copy {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .hero.it-section-align--center .hero-lead {
        margin-left: auto;
        margin-right: auto;
    }
    .hero.it-section-align--center .hero-btns {
        justify-content: center;
    }
    .hero.it-section-align--center .hero-title--sans .hero-headline__bold {
        justify-content: center;
    }

    .hero.it-section-align--right .hero-split,
    .hero.it-section-align--right .hero-inner {
        text-align: right;
        justify-items: end;
    }
    .hero.it-section-align--right .hero-copy {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
    }
    .hero.it-section-align--right .hero-lead {
        margin-left: auto;
        margin-right: 0;
    }
    .hero.it-section-align--right .hero-btns {
        justify-content: flex-end;
    }
    .hero.it-section-align--right .hero-title--sans .hero-headline__bold {
        justify-content: flex-end;
    }

    .hero.it-section-align--left .hero-btns {
        justify-content: flex-start;
    }

    .about-section.it-section-align--center .about-section__content {
        text-align: center;
    }
    .about-section.it-section-align--center .about-section__title.luxury-title {
        text-align: center !important;
    }
    .about-section.it-section-align--center .about-section__body {
        margin-left: auto;
        margin-right: auto;
    }
    .about-section.it-section-align--right .about-section__content {
        text-align: right;
    }
    .about-section.it-section-align--right .about-section__title.luxury-title {
        text-align: right !important;
    }

    .why-us-section.it-section-align--left .luxury-grid-3,
    .why-us-section.it-section-align--right .luxury-grid-3 {
        justify-items: stretch;
    }

    .stats-section.it-section-align--left .luxury-grid-stats {
        text-align: left !important;
    }
    .stats-section.it-section-align--right .luxury-grid-stats {
        text-align: right !important;
    }
    .stats-section.it-section-align--center .luxury-grid-stats {
        text-align: center !important;
    }

    .process-section.it-section-align--left .process-workflow__title,
    .process-section.it-section-align--right .process-workflow__title {
        text-align: inherit;
    }

    .faq-section.it-section-align--left .faq-wrap,
    .faq-section.it-section-align--right .faq-wrap {
        text-align: inherit;
    }
}

/* Mobile: left-align flowing text for readability (ignore desktop center/right offsets) */
@media (max-width: 768px) {
    .it-section-align.it-section-align--left,
    .it-section-align.it-section-align--center,
    .it-section-align.it-section-align--right {
        text-align: left !important;
    }
    .it-section-align .center,
    .it-section-align .luxury-title,
    .it-section-align .luxury-title.center {
        text-align: left !important;
    }
    .it-section-align .container {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    .hero.it-section-align .hero-split,
    .hero.it-section-align .hero-inner,
    .hero.it-section-align .hero-copy {
        text-align: left !important;
        align-items: flex-start !important;
        justify-items: stretch !important;
    }
    .hero.it-section-align .hero-title--sans .hero-headline__bold {
        justify-content: flex-start !important;
    }
    .hero.it-section-align .hero-lead {
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    .hero.it-section-align .hero-btns {
        justify-content: flex-start !important;
        align-items: stretch;
    }

    .about-section.it-section-align .about-section__content,
    .about-section.it-section-align .about-section__title.luxury-title {
        text-align: left !important;
    }

    .vip-senior-box .vip-content {
        text-align: left !important;
    }

    .luxury-grid-stats,
    .luxury-grid-process {
        text-align: left !important;
    }
    .luxury-grid-stats > div {
        text-align: left !important;
    }

    .process-section .luxury-grid-process > div {
        text-align: left !important;
    }

    .faq-section .faq-item summary {
        text-align: left !important;
    }
}

/* FAQ: stronger body text contrast on dark bg */
.faq-section .faq-item p,
.faq-section .faq-item .entry-content {
    color: #e5e7eb;
    font-weight: 400;
}
.faq-section .faq-item summary {
    font-weight: 600;
}

/* Section surfaces (Homepage → per-section background + contrast) */
.it-section-surface:not(.it-section-surface--transparent) .luxury-title,
.it-section-surface:not(.it-section-surface--transparent) h2.luxury-title {
    color: var(--it-surface-heading, var(--gold, #facc15)) !important;
}
.it-section-surface--on-dark .why-us-card__body p,
.it-section-surface--on-dark .why-us-card__body h3 {
    color: var(--it-surface-fg, #f1f5f9);
}
.it-section-surface--on-light .why-us-card__body p,
.it-section-surface--on-light .why-us-card__body h3 {
    color: var(--it-surface-fg, #0f172a);
}
.it-section-surface--on-dark .about-section__body,
.it-section-surface--on-dark .about-section__eyebrow {
    color: var(--it-surface-muted, #cbd5e1);
}
.it-section-surface--on-light .about-section__body {
    color: var(--it-surface-muted, #475569);
}
.it-section-surface--on-dark .hero-lead {
    color: var(--it-surface-muted, #e2e8f0);
}
.it-section-surface--on-dark .hero-headline__light {
    color: var(--it-surface-muted, #cbd5e1) !important;
}