:root {
    --exec-dark: #1b0f11;
    --exec-red: #421217;
    --exec-bronze: #c59b27;
    --exec-bronze-light: #e0c265;
    --exec-light: #faf7f7;
    --exec-border: #e8dee0;
    --font-display: 'Fraunces', 'Plus Jakarta Sans', serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --shadow-sm: 0 0.25rem 1rem rgba(27,15,17,0.05);
    --shadow-md: 0 1rem 2.5rem rgba(66,18,23,0.10);
    --shadow-lg: 0 2rem 4rem rgba(27,15,17,0.16);
    --ease: cubic-bezier(.25,.8,.25,1);
}

/* ---------- utility classes referenced in the markup that Bootstrap
   doesn't define out of the box — implemented properly here so
   they actually render as intended. ---------- */
.fs-7 { font-size: 0.85rem !important; }
.opacity-9 { opacity: .92 !important; }
.tracking-wide { letter-spacing: 0.06em; }
.tracking-wider { letter-spacing: 0.12em; }

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: #2c2c2c; overflow-x: hidden; background-color: #fff; letter-spacing: 0.005em; }
::selection { background: var(--exec-bronze); color: #fff; }

h1, h2, h3, .display-3, .display-4, .display-5 { font-family: var(--font-display); letter-spacing: -0.01em; }

a { transition: color .25s var(--ease); }
:focus-visible { outline: 2px solid var(--exec-bronze); outline-offset: 3px; border-radius: 3px; }

.text-exec-red { color: var(--exec-red) !important; }
.text-bronze { color: var(--exec-bronze) !important; }
.bg-exec-dark { background-color: var(--exec-dark) !important; }
.bg-exec-red { background-color: var(--exec-red) !important; }
.bg-bronze { background-color: var(--exec-bronze) !important; }
.bg-exec-light { background-color: var(--exec-light) !important; }
.border-bronze { border-color: var(--exec-bronze) !important; }

.bg-exec-gradient { background: linear-gradient(135deg, rgba(27,15,17,0.97), rgba(66,18,23,0.94)) !important; position: relative; }

/* subtle brand texture on dark sections for extra depth, no imagery required */
.bg-exec-dark, .bg-exec-gradient {
    background-image:
        radial-gradient(circle at 15% 20%, rgba(197,155,39,0.08), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(197,155,39,0.06), transparent 40%);
}

/* ---------- Buttons ---------- */
.btn-bronze {
    background: linear-gradient(135deg, var(--exec-bronze-light), var(--exec-bronze) 60%);
    color: #2a1d05; border: none; font-weight: 700; letter-spacing: 0.02em;
    position: relative; overflow: hidden; isolation: isolate;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-bronze::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(135deg, #d4ac3c, #a9821c);
    opacity: 0; transition: opacity .3s var(--ease);
}
.btn-bronze:hover { color: #241a05; transform: translateY(-3px); box-shadow: 0 0.85rem 1.75rem rgba(197,155,39,0.35); }
.btn-bronze:hover::before { opacity: 1; }
.btn-bronze:active { transform: translateY(-1px); }

.btn-outline-exec {
    color: var(--exec-dark) !important; border: 1.5px solid var(--exec-red); font-weight: 700;
    background: transparent; transition: all .3s var(--ease);
}
.btn-outline-exec:hover { background-color: var(--exec-red); color: #fff !important; transform: translateY(-3px); box-shadow: var(--shadow-md); }

.btn-outline-light { transition: all .3s var(--ease); font-weight: 700; letter-spacing: 0.02em; border-width: 1.5px; }
.btn-outline-light:hover { transform: translateY(-3px); box-shadow: 0 0.75rem 1.5rem rgba(255,255,255,0.15); }

.fw-extrabold { font-weight: 800 !important; }

/* ---------- Running announcement strip (marquee) ---------- */
.marquee-strip {
    background: linear-gradient(90deg, var(--exec-bronze), var(--exec-bronze-light) 50%, var(--exec-bronze));
    overflow: hidden; white-space: nowrap; position: relative; z-index: 1300;
}
.marquee-track {
    display: inline-flex; align-items: center; gap: 3rem; width: max-content;
    padding: 0.5rem 0; animation: marqueeScroll 32s linear infinite;
}
.marquee-strip:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-weight: 700; font-size: .78rem; letter-spacing: .04em; color: var(--exec-dark);
}
.marquee-track span i { font-size: .7rem; color: var(--exec-red); }
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---------- Top info bar ---------- */
.topbar-refined { letter-spacing: 0.01em; }
.topbar-refined a { transition: opacity .2s ease, color .2s ease; opacity: .85; }
.topbar-refined a:hover { opacity: 1; color: var(--exec-bronze-light) !important; }

/* ---------- Navbar ---------- */
.navbar { transition: box-shadow .35s var(--ease), padding .35s var(--ease); }
.navbar.navbar-scrolled { box-shadow: 0 0.5rem 1.5rem rgba(27,15,17,0.08); }
.navbar-brand { letter-spacing: -0.01em; }
.nav-link { position: relative; color: #4a3033 !important; }
.nav-link::after {
    content: ""; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 2px;
    background: var(--exec-bronze); transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--ease);
}
.nav-link:hover, .nav-link.active { color: var(--exec-red) !important; }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

/* ---------- Modern Corporate Card Hovers ---------- */
.card-custom {
    border: 1px solid var(--exec-border); border-radius: 1rem; background: #fff;
    box-shadow: var(--shadow-sm); overflow: hidden; position: relative;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card-custom::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
    background: linear-gradient(90deg, var(--exec-bronze), var(--exec-bronze-light), var(--exec-bronze));
    transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.card-custom:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg) !important; border-color: rgba(197,155,39,0.45); }
.card-custom:hover::before { transform: scaleX(1); }

/* ---------- Hero Carousel ---------- */
.carousel-item {
    height: 88vh; min-height: 560px; background: no-repeat center center scroll;
    background-size: cover; position: relative;
}
.carousel-item::after {
    content: ""; display: block; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(27,15,17,0.90), rgba(40,12,15,0.80) 55%, rgba(27,15,17,0.94));
}
.carousel-item::before {
    content: ""; position: absolute; inset: 0; z-index: 2;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(15,7,8,0.55) 100%);
}
.carousel-item img, .carousel-item { will-change: transform; }
@keyframes heroKenBurns { from { transform: scale(1); } to { transform: scale(1.08); } }
.carousel-item.active { animation: heroKenBurns 9s var(--ease) forwards; }

.carousel-caption {
    z-index: 10; bottom: 20%; left: 6%; right: 6%;
    max-width: 100%; box-sizing: border-box;
}
.carousel-caption .badge {
    letter-spacing: 0.14em; font-size: .72rem; white-space: normal;
    max-width: 100%; word-break: break-word;
}
.carousel-caption h1 {
    text-shadow: 0 2px 24px rgba(0,0,0,0.35);
    overflow-wrap: break-word; word-break: break-word; max-width: 100%;
}
.carousel-caption p { overflow-wrap: break-word; word-break: break-word; max-width: 100%; }

/* ---------- Hero caption: tuned, fully responsive font scale ---------- */
@media (max-width: 575.98px) {
    .carousel-caption { padding-left: 4.5%; padding-right: 4.5%; bottom: 8%; }
    .carousel-caption h1.display-3 { font-size: 1.85rem !important; line-height: 1.28; margin-bottom: .85rem !important; }
    .carousel-caption p.lead { font-size: .92rem !important; line-height: 1.6; margin-bottom: 1.5rem !important; }
    .carousel-caption .badge { font-size: .6rem; letter-spacing: .08em; padding: .45rem .8rem !important; margin-bottom: .75rem !important; }
    .carousel-caption .btn-lg { padding: .65rem 1.4rem !important; font-size: .8rem; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    .carousel-caption h1.display-3 { font-size: 2.35rem !important; line-height: 1.25; }
    .carousel-caption p.lead { font-size: 1rem !important; }
    .carousel-caption .badge { font-size: .65rem; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .carousel-caption h1.display-3 { font-size: 3rem !important; }
    .carousel-caption p.lead { font-size: 1.05rem !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .carousel-caption h1.display-3 { font-size: 3.4rem !important; }
}

.carousel-indicators { bottom: 2.5rem; }
.carousel-indicators [data-bs-target] {
    width: 34px; height: 4px; border-radius: 3px; background-color: rgba(255,255,255,0.35);
    border: none; opacity: 1; transition: all .3s var(--ease);
}
.carousel-indicators .active { background-color: var(--exec-bronze); width: 46px; }

.carousel-control-prev, .carousel-control-next { width: 6%; opacity: 0; transition: opacity .3s ease; }
#heroCarousel:hover .carousel-control-prev,
#heroCarousel:hover .carousel-control-next { opacity: 0.85; }
.carousel-control-prev-icon, .carousel-control-next-icon {
    width: 3rem; height: 3rem; padding: 0.75rem; border-radius: 50%;
    background-color: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.4);
    background-size: 45%; backdrop-filter: blur(4px);
}

/* scroll cue */
.scroll-cue {
    position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%); z-index: 10;
    color: rgba(255,255,255,0.75); font-size: 1.35rem; animation: scrollCueBounce 2.2s ease-in-out infinite;
}
@keyframes scrollCueBounce { 0%,100% { transform: translate(-50%,0); opacity:.6; } 50% { transform: translate(-50%,8px); opacity:1; } }

/* ---------- Interior page banner ---------- */
.page-banner { padding: 4.5rem 0 3.5rem; position: relative; overflow: hidden; }
.page-banner::before, .page-banner::after {
    content: ""; position: absolute; border-radius: 50%; filter: blur(50px); pointer-events: none;
}
.page-banner::before { width: 240px; height: 240px; background: rgba(197,155,39,0.18); top: -90px; left: -60px; }
.page-banner::after { width: 280px; height: 280px; background: rgba(197,155,39,0.12); bottom: -120px; right: -70px; }
.page-banner .container { position: relative; z-index: 1; }
.page-banner .breadcrumb-trail { font-size: .82rem; letter-spacing: .03em; color: rgba(255,255,255,0.7); }
.page-banner .breadcrumb-trail a { color: rgba(255,255,255,0.7); text-decoration: none; }
.page-banner .breadcrumb-trail a:hover { color: var(--exec-bronze-light); }

/* ---------- Image Card Overlay ---------- */
.img-card-box { position: relative; overflow: hidden; border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
.img-card-box img { transition: transform .6s var(--ease); }
.img-card-box::after {
    content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease;
    background: linear-gradient(180deg, transparent 40%, rgba(27,15,17,0.55) 100%);
}
.card-custom:hover .img-card-box img { transform: scale(1.08); }
.card-custom:hover .img-card-box::after { opacity: 1; }

/* ---------- Stats ---------- */
.stat-block { position: relative; }
.stat-block .display-4 { font-variant-numeric: tabular-nums; }

/* ---------- Testimonials ---------- */
.testi-quote { position: relative; padding-left: 2rem; }
.testi-quote::before {
    content: "\201C"; font-family: var(--font-display); font-size: 3.5rem; line-height: 1;
    color: var(--exec-bronze); opacity: .35; position: absolute; left: -0.35rem; top: -0.75rem;
}
.text-warning.stars-bronze i { color: var(--exec-bronze) !important; }

/* ---------- Pricing ---------- */
.card-custom.plan-featured { transform: translateY(-10px) scale(1.015); }
.card-custom.plan-featured:hover { transform: translateY(-16px) scale(1.015); }

/* ---------- Section eyebrow badges ---------- */
.badge.rounded-pill.border { letter-spacing: 0.08em; font-size: .72rem; }

/* ---------- Reveal-on-scroll (progressive enhancement, JS-driven) ---------- */
.reveal-el { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-el.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Scroll progress bar ---------- */
#scrollProgress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 1200;
    background: linear-gradient(90deg, var(--exec-bronze), var(--exec-bronze-light));
    transition: width .1s linear;
}

/* ---------- Back to top ---------- */
#backToTop {
    position: fixed; right: 1.5rem; bottom: 1.5rem; width: 3rem; height: 3rem; border-radius: 50%;
    background: var(--exec-red); color: #fff; border: none; display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: all .3s var(--ease); z-index: 1100; cursor: pointer;
}
#backToTop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
#backToTop:hover { background: var(--exec-bronze); color: #241a05; }

/* ---------- Trusted-by logo marquee (secondary, animated) ---------- */
.logo-marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-marquee-track { display: inline-flex; align-items: center; gap: 4rem; width: max-content; animation: logoMarqueeScroll 26s linear infinite; }
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
.logo-marquee-track span { font-weight: 800; font-size: 1.3rem; color: var(--exec-red); opacity: .55; white-space: nowrap; }
@keyframes logoMarqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Service category strip (single row, no repeat, fully responsive) ---------- */
.service-strip-wrap {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.service-strip {
    display: flex; flex-wrap: nowrap; align-items: stretch; gap: 1rem;
    overflow-x: auto; overflow-y: hidden; padding: 0.35rem 0.25rem 1rem;
    scroll-snap-type: x proximity; scrollbar-width: thin;
}
.service-strip::-webkit-scrollbar { height: 6px; }
.service-strip::-webkit-scrollbar-thumb { background: rgba(197,155,39,0.35); border-radius: 10px; }
.service-strip::-webkit-scrollbar-track { background: transparent; }
.service-chip {
    flex: 0 0 auto; scroll-snap-align: start; display: flex; align-items: center; gap: .65rem;
    background: #fff; border: 1px solid var(--exec-border); border-radius: 0.85rem;
    padding: 0.85rem 1.15rem; white-space: nowrap; text-decoration: none; color: var(--exec-dark);
    box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.service-chip:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(197,155,39,0.5); background: var(--exec-light); color: var(--exec-dark); }
.service-chip .service-chip-icon {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--exec-bronze), var(--exec-bronze-light)); color: #241a05; font-size: .95rem;
}
.service-chip span { font-weight: 700; font-size: .88rem; letter-spacing: 0.01em; }
@media (max-width: 575.98px) {
    .service-chip { padding: 0.7rem 0.9rem; gap: .55rem; }
    .service-chip .service-chip-icon { width: 32px; height: 32px; font-size: .8rem; }
    .service-chip span { font-size: .8rem; }
}

/* ---------- Decorative wave dividers (design polish) ---------- */
.wave-divider { line-height: 0; position: relative; }
.wave-divider svg { display: block; width: 100%; height: 60px; }
.wave-divider.wave-flip { transform: rotate(180deg); }

/* ---------- Section eyebrow chip glow ---------- */
.section-badge, .badge-eyebrow {
    position: relative;
}
.section-badge::after {
    content: ""; position: absolute; inset: -6px; border-radius: inherit;
    background: radial-gradient(circle, rgba(197,155,39,0.25), transparent 70%);
    z-index: -1; opacity: 0; transition: opacity .4s var(--ease);
}

/* ---------- Animated underline accent for section titles ---------- */
.title-accent-line {
    display: inline-block; width: 64px; height: 4px; border-radius: 4px;
    background: linear-gradient(90deg, var(--exec-bronze), var(--exec-bronze-light));
    position: relative; overflow: hidden;
}
.title-accent-line::after {
    content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.55);
    transform: translateX(-100%); animation: accentShine 3.2s ease-in-out infinite;
}
@keyframes accentShine { 0% { transform: translateX(-100%); } 50% { transform: translateX(100%); } 100% { transform: translateX(100%); } }

/* ---------- Soft pulsing ring behind icon circles (design polish) ---------- */
.icon-ring-pulse { position: relative; }
.icon-ring-pulse::before {
    content: ""; position: absolute; inset: -6px; border-radius: 50%;
    border: 1.5px solid rgba(197,155,39,0.4); animation: ringPulse 2.6s ease-out infinite;
}
@keyframes ringPulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }

/* ---------- Footer ---------- */
footer h5, footer h3 { letter-spacing: -0.01em; }
footer a.text-white.text-decoration-none.opacity-75 { transition: color .25s ease, opacity .25s ease, padding-left .25s ease; display: inline-block; }
footer a.text-white.text-decoration-none.opacity-75:hover { color: var(--exec-bronze-light) !important; opacity: 1 !important; padding-left: 4px; }
footer a.text-white.fs-5 {
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(255,255,255,0.06); transition: all .3s var(--ease);
}
footer a.text-white.fs-5:hover { background: var(--exec-bronze); color: #241a05 !important; transform: translateY(-3px); }

/* ---------- Forms ---------- */
.form-control, .form-select {
    border: 1.5px solid var(--exec-border); border-radius: 0.6rem; padding: 0.75rem 1rem;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--exec-bronze); box-shadow: 0 0 0 4px rgba(197,155,39,0.14);
}
.form-label { font-size: .88rem; color: var(--exec-red); }

/* ---------- Contact info page ---------- */
.contact-info-card {
    border: 1px solid var(--exec-border); border-radius: 1rem; background: #fff;
    box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.contact-info-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.contact-icon-circle {
    width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--exec-light); color: var(--exec-bronze); font-size: 1.5rem; margin: 0 auto 1rem;
}

@media (max-width: 767.98px) {
    .carousel-item { height: auto; min-height: 640px; padding-top: 5.5rem; padding-bottom: 3rem; }
    /* Once position becomes "relative" here, left/right percentages no longer
       constrain the box width (they only offset it) — so the width has to be
       controlled with padding instead, or the caption drifts sideways and
       clips off-screen. */
    .carousel-caption {
        position: relative; bottom: auto; left: 0; right: 0; width: 100%;
        padding-left: 6%; padding-right: 6%; box-sizing: border-box;
    }
}