/* ============================================
   K.A.T SIGNS - Khetout Al Tahaluf
   ============================================ */

:root {
    --magenta: #b20e54;
    --magenta-line: #c4145f;
    --magenta-dark: #8d1d4e;
    --charcoal: #4a4a4a;
    --charcoal-dark: #3f3f3f;
    --ink: #1a1a1a;
    --grey-light: #fafafa;
    --grey-border: #ececec;
    --grey-text: #6f6f6f;
    --white: #ffffff;
    --strip-h: 0px;  /* brand strip removed */
    --header-h: 189px; /* main header 114 + service bar 75 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* overflow-x: clip (not hidden) guards mobile from a stray wide element
   (marquees, off-canvas menu) if an aggressive CSS optimiser drops a container
   rule — clip keeps the sticky header working. */
html { scroll-behavior: smooth; overflow-x: clip; }
body {
    font-family: 'Inter', sans-serif;
    color: var(--charcoal);
    background-color: var(--white);
    /* clip, not hidden: hidden turns body into a scroll container, which
       silently kills position:sticky on the header (hidden kept as a
       fallback for engines without clip support) */
    overflow-x: hidden;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 4vw;
    width: 100%;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; }
img { display: block; }

::selection { background: var(--magenta); color: #fff; }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #f3f3f3; }
::-webkit-scrollbar-thumb { background: #c9c9c9; border-radius: 6px; border: 2px solid #f3f3f3; }
::-webkit-scrollbar-thumb:hover { background: var(--magenta); }

:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }

/* ============================================
   1. Top Micro Header
   ============================================ */
.top-micro-header {
    background-color: var(--grey-light);
    height: 78px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--grey-border);
    font-size: 14px;
    color: #222;
}

.top-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-left {
    display: flex;
    align-items: center;
    gap: 24px;
    font-weight: 500;
}
.top-left a { transition: color .2s; }
.top-left a:hover { color: var(--magenta); }
.top-left i { margin-right: 10px; color: #111; font-size: 14px; }
.top-divider { width: 1px; height: 20px; background: #d9d9d9; }

.top-right { display: flex; align-items: center; gap: 26px; }
.top-right a { color: #111; font-size: 17px; transition: color .2s; }
.top-right a:hover { color: var(--magenta); }

/* ============================================
   2. Main Header
   ============================================ */
/* Government approvals bar (above header) */
.approvals-bar {
    background: var(--magenta);
    color: #fff;
    font-size: 12.5px;
    overflow: hidden;
}
.approvals-bar-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    min-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    flex-wrap: nowrap;
    overflow: hidden;
}
.approvals-bar-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: stretch;
    flex: 0 0 auto;
    padding: 0 26px 0 18px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--magenta);
    box-shadow: 42px 0 24px var(--magenta);
    position: relative;
    z-index: 3;
}
.approvals-marquee {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 72px;
    overflow: hidden;
}
.approvals-bar-list {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-left: 0;
    min-width: max-content;
    animation: approvalsMarquee 24s linear infinite;
    will-change: transform;
    position: relative;
    z-index: 1;
}
.approvals-bar-list li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 34px;
    font-weight: 600;
    white-space: nowrap;
    opacity: .96;
}
.approvals-bar-list li i { font-size: 11px; }
.approvals-bar-list li img.approval-logo {
    height: 22px;
    width: auto;
    object-fit: contain;
    background: #fff;
    border-radius: 4px;
    padding: 2px 4px;
    flex-shrink: 0;
}
.approvals-bar:hover .approvals-bar-list {
    animation-play-state: paused;
}
@keyframes approvalsMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .approvals-bar-list {
        animation: none;
    }
}
@media (max-width: 900px) {
    .approvals-bar {
        display: block;
        font-size: 11.5px;
        border-bottom: 1px solid rgba(255,255,255,.18);
        box-shadow: 0 6px 18px rgba(20, 4, 11, .12);
    }
    .approvals-bar-inner {
        min-height: 36px;
        padding-left: 0;
        padding-right: 0;
    }
    .approvals-bar-label {
        min-height: 36px;
        padding: 0 12px;
        gap: 6px;
        font-size: 10.5px;
        letter-spacing: .045em;
        box-shadow: 18px 0 16px var(--magenta);
    }
    .approvals-marquee {
        margin-left: 20px;
    }
    .approvals-bar-list {
        animation-duration: 20s;
    }
    .approvals-bar-list li {
        height: 36px;
        padding: 0 22px;
        gap: 6px;
        font-size: 11.5px;
    }
    .approvals-bar-list li img.approval-logo {
        height: 20px;
        border-radius: 4px;
        padding: 2px 4px;
    }
}
@media (max-width: 430px) {
    .approvals-bar {
        font-size: 10.5px;
    }
    .approvals-bar-inner {
        min-height: 34px;
    }
    .approvals-bar-label {
        min-height: 34px;
        padding: 0 9px;
        font-size: 9.5px;
        box-shadow: 12px 0 14px var(--magenta);
    }
    .approvals-marquee {
        margin-left: 14px;
    }
    .approvals-bar-list {
        animation-duration: 18s;
    }
    .approvals-bar-list li {
        height: 34px;
        padding: 0 18px;
        font-size: 10.5px;
    }
    .approvals-bar-list li img.approval-logo {
        height: 18px;
        padding: 1px 3px;
    }
}

.main-header {
    height: 114px;
    display: flex;
    align-items: center;
    background-color: var(--white);
    position: relative;
    z-index: 60;
}

.main-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

/* Transparent, pre-cropped logo — just contain it to the header height */
.logo-crop {
    display: flex;
    align-items: center;
    height: 84px;
    flex-shrink: 0;
}
.logo-crop img {
    height: 100%;
    width: auto;
    max-width: 340px;
    object-fit: contain;
}
/* Phone: nav collapses to a hamburger, so use the freed space for a bigger logo */
@media (max-width: 600px) {
    .logo-crop { height: 84px; }
    .logo-crop img { max-width: 72vw; }
}

.main-nav ul { display: flex; gap: 32px; }
.main-nav a {
    font-size: 14px;
    font-weight: 600;
    color: var(--charcoal-dark);
    text-transform: uppercase;
    padding: 10px 0;
    position: relative;
    letter-spacing: .4px;
    transition: color .2s;
}
.main-nav a:hover { color: var(--magenta); }
.main-nav a.active { color: var(--magenta); }
.main-nav a::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--magenta);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}
.main-nav a:hover::after,
.main-nav a.active::after { transform: scaleX(1); }

.btn-gradient {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(95deg, var(--magenta) 0%, #90003b 100%);
    color: var(--white);
    padding: 15px 28px;
    border-radius: 32px;
    font-size: 13.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(178, 14, 84, .18), 0 8px 22px rgba(178, 14, 84, .24);
    transition: transform .25s, box-shadow .25s;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.btn-gradient:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(178, 14, 84, .2), 0 14px 30px rgba(178, 14, 84, .34); }
.btn-gradient i { font-size: 13px; transition: transform .25s; }
.btn-gradient:hover i { transform: translateX(3px); }

/* Sheen sweep on hover */
.btn-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent);
    transform: skewX(-22deg);
    transition: left .55s ease;
    pointer-events: none;
}
.btn-gradient:hover::before { left: 135%; }

/* Header CTA cluster (lang toggle, callback, quote button) */
.header-cta {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Hamburger (mobile) */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.hamburger span {
    width: 26px;
    height: 3px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
}
.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================
   Mobile menu — premium dark slide-over panel
   ============================================ */
.mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 89;
    background: rgba(10, 6, 8, .55);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}
.mobile-backdrop.open { opacity: 1; pointer-events: auto; }

.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: min(400px, 90vw);
    height: 100dvh;
    background:
        radial-gradient(120% 60% at 100% 0%, rgba(178, 14, 84, .28) 0%, transparent 60%),
        linear-gradient(200deg, #1c1416 0%, #120d0f 60%, #0d090a 100%);
    color: #fff;
    box-shadow: -24px 0 60px rgba(0, 0, 0, .5);
    z-index: 90;
    padding: 0;
    flex-direction: column;      /* becomes flex in the ≤992px query below */
    transform: translateX(105%);
    transition: transform .42s cubic-bezier(.16, 1, .3, 1);
}
.mobile-menu.open { transform: translateX(0); }

/* Head: brand + close */
.mobile-menu .mm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    flex: 0 0 auto;
}
.mobile-menu .mm-logo {
    font-family: 'Anton', sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
    color: #fff;
    border: none;
    padding: 0;
}
.mobile-menu .mm-logo span { color: var(--magenta-line); }
.mobile-menu .mm-close {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
}
.mobile-menu .mm-close:hover { background: var(--magenta); border-color: var(--magenta); transform: rotate(90deg); }

/* Scroll area */
.mobile-menu .mm-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px 28px 36px;
}
.mobile-menu ul { display: flex; flex-direction: column; gap: 0; }

/* Nav links + staggered reveal on open */
.mobile-menu .mm-scroll > ul > li,
.mobile-menu .mm-cta,
.mobile-menu .mm-contact,
.mobile-menu .mm-social {
    opacity: 0;
    transform: translateX(18px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.mobile-menu.open .mm-scroll > ul > li,
.mobile-menu.open .mm-cta,
.mobile-menu.open .mm-contact,
.mobile-menu.open .mm-social { opacity: 1; transform: none; }
.mobile-menu.open .mm-scroll > ul > li:nth-child(1) { transition-delay: .08s; }
.mobile-menu.open .mm-scroll > ul > li:nth-child(2) { transition-delay: .13s; }
.mobile-menu.open .mm-scroll > ul > li:nth-child(3) { transition-delay: .18s; }
.mobile-menu.open .mm-scroll > ul > li:nth-child(4) { transition-delay: .23s; }
.mobile-menu.open .mm-scroll > ul > li:nth-child(5) { transition-delay: .28s; }
.mobile-menu.open .mm-scroll > ul > li:nth-child(6) { transition-delay: .33s; }
.mobile-menu.open .mm-scroll > ul > li:nth-child(n+7) { transition-delay: .38s; }
.mobile-menu.open .mm-cta { transition-delay: .42s; }
.mobile-menu.open .mm-contact { transition-delay: .47s; }
.mobile-menu.open .mm-social { transition-delay: .52s; }

.mobile-menu a {
    display: block;
    padding: 15px 0;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: rgba(255, 255, 255, .92);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    transition: color .2s, padding-left .2s;
}
.mobile-menu a.active, .mobile-menu a:hover { color: var(--magenta-line); padding-left: 6px; }
html[dir="rtl"] .mobile-menu a.active, html[dir="rtl"] .mobile-menu a:hover { padding-left: 0; padding-right: 6px; }
.mobile-menu .lang-toggle { color: var(--magenta-line) !important; font-weight: 600; }

/* SERVICES dropdown (native <details>) */
.mobile-menu .m-has-sub details { border-bottom: 1px solid rgba(255, 255, 255, .07); }
.mobile-menu .m-has-sub summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: rgba(255, 255, 255, .92);
    cursor: pointer;
    list-style: none;
}
.mobile-menu .m-has-sub summary::-webkit-details-marker { display: none; }
.mobile-menu .m-has-sub summary i { transition: transform .25s ease; font-size: 13px; color: var(--magenta-line); }
.mobile-menu .m-has-sub details[open] summary i { transform: rotate(180deg); }
.mobile-menu .m-sub {
    gap: 0;
    margin: 2px 0 10px;
    padding: 6px 0 6px 14px;
    border-left: 2px solid rgba(178, 14, 84, .5);
}
html[dir="rtl"] .mobile-menu .m-sub { padding: 6px 14px 6px 0; border-left: none; border-right: 2px solid rgba(178, 14, 84, .5); }
.mobile-menu .m-sub a { padding: 11px 0; font-size: 13.5px; font-family: 'Inter', sans-serif; letter-spacing: .3px; border-bottom: none; color: rgba(255, 255, 255, .68); }
.mobile-menu .m-sub a:hover { color: #fff; padding-left: 4px; }
.mobile-menu .m-sub .m-sub-all { color: var(--magenta-line); font-weight: 700; }

/* CTA + contact + social */
.mobile-menu .mm-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
    padding: 16px;
    border-radius: 40px;
    text-align: center;
    font-size: 14px;
}
.mobile-menu .mm-contact { display: flex; flex-direction: column; gap: 4px; margin-top: 22px; }
.mobile-menu .mm-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: none;
    font-family: 'Inter', sans-serif;
    text-transform: none;
    letter-spacing: 0;
    font-size: 15px;
    color: rgba(255, 255, 255, .85);
}
.mobile-menu .mm-line i { width: 20px; text-align: center; color: var(--magenta-line); }
.mobile-menu .mm-wa i { color: #25d366; }
.mobile-menu .mm-social { display: flex; gap: 12px; margin-top: 24px; }
.mobile-menu .mm-social a {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    transition: background .2s, border-color .2s;
}
.mobile-menu .mm-social a:hover { background: var(--magenta); border-color: var(--magenta); }

@media (prefers-reduced-motion: reduce) {
    .mobile-menu, .mobile-menu.open .mm-scroll > ul > li,
    .mobile-menu.open .mm-cta, .mobile-menu.open .mm-contact,
    .mobile-menu.open .mm-social { transition: none !important; }
}

/* ============================================
   3. Service Category Bar + Dropdowns
   ============================================ */
.service-category-bar {
    border-top: 1px solid var(--grey-border);
    border-bottom: 1px solid var(--grey-border);
    height: 75px;
    display: flex;
    align-items: center;
    background: var(--white);
    position: relative;
    z-index: 50;
}
.service-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
.service-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
}
.service-list li.divider {
    height: 32px;
    width: 1px;
    background-color: var(--grey-border);
}
.service-list > li > a {
    display: flex;
    align-items: center;
    font-size: 13.5px;
    font-weight: 600;
    color: #161616;
    letter-spacing: .3px;
    transition: color .2s;
    padding: 24px 0;
}
.service-list > li > a:hover { color: var(--magenta); }
.nav-icon { width: 26px; height: 26px; margin-right: 12px; }
.small-arrow { font-size: 10px; margin-left: 10px; color: #9a9a9a; transition: transform .2s; }

.has-dropdown { position: relative; }
.has-dropdown:hover .small-arrow,
.has-dropdown.open .small-arrow { transform: rotate(180deg); color: var(--magenta); }

.dropdown-menu {
    position: absolute;
    top: calc(100% - 6px);
    left: -16px;
    min-width: 290px;
    background: var(--white);
    border: 1px solid var(--grey-border);
    border-top: 3px solid var(--magenta);
    box-shadow: 0 18px 44px rgba(0,0,0,.12);
    border-radius: 0 0 10px 10px;
    padding: 12px 0 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dropdown-menu ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    font-size: 13.5px;
    font-weight: 500;
    color: #333;
    transition: color .15s, background .15s, padding-left .15s;
}
.dropdown-menu ul li a i { font-size: 10px; color: var(--magenta); }
.dropdown-menu ul li a:hover {
    color: var(--magenta);
    background: #fdf3f7;
    padding-left: 26px;
}
.dropdown-all {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 13px 22px;
    background: var(--grey-light);
    border-top: 1px solid var(--grey-border);
    border-radius: 0 0 10px 10px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--magenta);
}
.dropdown-all:hover { background: #fdf3f7; }

.search-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background-color: #fcfcfc;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #111;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .2s, color .2s;
}
.search-icon:hover { border-color: var(--magenta); color: var(--magenta); }

/* Search Overlay */
.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.97);
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 6vw;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
}
.search-overlay.open { opacity: 1; visibility: visible; }
.search-close {
    position: absolute;
    top: 36px;
    right: 44px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid var(--magenta);
    background: transparent;
    color: var(--magenta);
    font-size: 20px;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.search-close:hover { background: var(--magenta); color: #fff; }
.search-form { width: min(760px, 100%); }
.search-label {
    display: block;
    font-family: 'Anton', sans-serif;
    font-size: clamp(28px, 4vw, 52px);
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 28px;
    letter-spacing: .5px;
}
.search-input-row { display: flex; gap: 14px; }
.search-input-row input {
    flex: 1;
    font-family: inherit;
    font-size: 18px;
    padding: 16px 8px;
    border: none;
    border-bottom: 3px solid var(--magenta);
    background: transparent;
    outline: none;
    color: var(--ink);
}
.search-suggestions {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    font-size: 14px;
    color: var(--grey-text);
}
.search-suggestions a {
    padding: 7px 16px;
    border: 1px solid var(--grey-border);
    border-radius: 20px;
    font-weight: 500;
    transition: all .2s;
}
.search-suggestions a:hover { border-color: var(--magenta); color: var(--magenta); }

/* ============================================
   4. Hero Section Layout
   ============================================ */
.hero-section {
    position: relative;
    height: calc(100vh - var(--header-h));
    min-height: 700px;
    max-height: 980px;
    display: flex;
    align-items: center;
    background: #fff;
    overflow: hidden;
}

.hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* keep content clear of the absolutely-positioned brand strip */
    padding-bottom: var(--strip-h);
}

.hero-content {
    width: 50%;
    position: relative;
    z-index: 2;
    padding: 20px 0;
}

/* Staggered entrance for hero copy */
.hero-content > * {
    animation: fadeUp .75s cubic-bezier(.22, .61, .36, 1) both;
}
.hero-content > *:nth-child(1) { animation-delay: .05s; }
.hero-content > *:nth-child(2) { animation-delay: .15s; }
.hero-content > *:nth-child(3) { animation-delay: .25s; }
.hero-content > *:nth-child(4) { animation-delay: .35s; }
.hero-content > *:nth-child(5) { animation-delay: .45s; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-content > *, .collage-item, .collage-lines, .reveal { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* Fine concentric arc pattern on the left, fading out */
.hero-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    bottom: var(--strip-h);
    width: 46%;
    background:
        repeating-radial-gradient(circle at -14% -30%, transparent 0 30px, rgba(178, 14, 84, .055) 30px 31.5px),
        repeating-radial-gradient(circle at -10% 125%, transparent 0 34px, rgba(178, 14, 84, .05) 34px 35.5px);
    -webkit-mask-image: linear-gradient(to right, #000 35%, transparent 92%);
    mask-image: linear-gradient(to right, #000 35%, transparent 92%);
    z-index: 0;
}

.subtitle {
    font-size: 22px;
    font-weight: 600;
    color: var(--charcoal-dark);
    letter-spacing: .5px;
    margin-bottom: 10px;
}

/* Fast slide-up cascade when the slide text swaps */
.subtitle, .main-title, .description {
    transition: opacity .22s cubic-bezier(.3, .7, .25, 1), transform .22s cubic-bezier(.3, .7, .25, 1);
}
.main-title { transition-delay: .05s; }
.description { transition-delay: .1s; }
.hero-content.swap .subtitle,
.hero-content.swap .main-title,
.hero-content.swap .description {
    opacity: 0;
    transform: translateY(14px);
    transition-duration: .13s;
    transition-delay: 0s;
}
.text-magenta { color: var(--magenta); }

.main-title {
    font-family: 'Anton', 'Oswald', sans-serif;
    font-weight: 400;
    font-size: clamp(54px, 6.4vw, 132px);
    line-height: 1.05;
    letter-spacing: 0.03vw;
    text-transform: uppercase;
    margin-bottom: 18px;
    margin-left: -0.2vw;
}
.title-line { display: block; }
.text-charcoal { color: var(--charcoal-dark); }

.title-through {
    position: relative;
    display: inline-block;
    background: linear-gradient(100deg, var(--magenta-dark) 0%, var(--magenta) 45%, #c2356f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-bottom: 14px;
}
.brush-stroke {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 22px;
}

.description {
    font-size: 16px;
    color: var(--grey-text);
    line-height: 1.55;
    margin-bottom: 24px;
}
.description strong.text-magenta { font-weight: 700; }

.stats-container {
    display: flex;
    align-items: center;
    gap: 36px;
    margin-bottom: 28px;
}
.stat-item {
    display: flex;
    align-items: center;
    gap: 16px;
}
.stat-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1.5px solid var(--magenta);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 21px;
    color: #2c2c2c;
}
.stat-text { display: flex; flex-direction: column; gap: 2px; }
.stat-label { font-size: 13px; color: var(--grey-text); letter-spacing: 1.2px; font-weight: 500; }
.stat-value { font-size: 17px; font-weight: 800; color: #111; letter-spacing: .4px; }
.stat-divider { width: 1px; height: 54px; background-color: #e0e0e0; }

.hero-actions {
    display: flex;
    align-items: center;
    gap: 34px;
}
.btn-hero {
    padding: 17px 34px;
    background: linear-gradient(90deg, var(--magenta) 0%, #685a62 100%);
}
.btn-hero:hover {
    background: linear-gradient(90deg, #9a0c49 0%, #52474e 100%);
}
.nav-circles { display: flex; gap: 16px; }
.circle-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1.5px solid var(--magenta);
    background: transparent;
    color: var(--magenta);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background .2s, color .2s;
}
.circle-btn:hover { background: var(--magenta); color: var(--white); transform: scale(1.08); box-shadow: 0 8px 20px rgba(178,14,84,.3); }
.circle-btn { transition: background .2s, color .2s, transform .25s, box-shadow .25s; }

/* Slide counter + progress bar */
.hero-progress {
    display: flex;
    align-items: center;
    gap: 14px;
}
.hero-count {
    font-family: 'Oswald', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 1px;
}
.hero-count em { font-style: normal; font-size: 13px; color: #b5b5b5; margin-left: 3px; }
.hero-bar {
    width: 92px;
    height: 3px;
    background: #ebd3df;
    border-radius: 2px;
    overflow: hidden;
}
.hero-bar i {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--magenta), #e0407f);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
}
.hero-bar i.run {
    animation: heroBar var(--slide-ms, 6500ms) linear forwards;
}
.hero-section:hover .hero-bar i.run { animation-play-state: paused; }
@keyframes heroBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ============================================
   5. Hero Slider (Right Side)
   One visible image at a time with simple fade transitions.
   ============================================ */
.hero-collage {
    position: absolute;
    top: 0;
    right: 0;
    left: clamp(740px, 56vw, 920px);
    height: calc(100% - var(--strip-h));
    width: auto;
    max-width: none;
    background: linear-gradient(135deg, #ffffff 0%, #fff7fb 100%);
    border-left: 1px solid rgba(178, 14, 84, .08);
    overflow: hidden;
    z-index: 1;
}

.hero-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: none;
    transition: opacity .35s ease;
    pointer-events: none;
}
.hero-slide.active {
    opacity: 1;
    pointer-events: auto;
}
.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.06) contrast(1.03);
}
.hero-slide.active img {
    animation: none;
}

.hero-slide-dots {
    position: absolute;
    left: 24px;
    bottom: 22px;
    display: flex;
    gap: 8px;
    z-index: 3;
}
.hero-slide-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .45);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .05);
    transition: width .25s ease, background .25s ease;
}
.hero-slide-dot.active {
    width: 26px;
    background: var(--magenta);
}

/* hide legacy collage pieces if any stale markup remains */
.collage-item,
.collage-lines {
    display: none;
}

/* ============================================
   6. Brand Strip
   ============================================ */
.brand-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--strip-h);
    background: #fff;
    border-top: 1px solid #eee;
    z-index: 2;
    display: flex;
    align-items: center;
}

.brand-strip .container {
    max-width: 100%;
    padding: 0 5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-strip-inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.brand-logo {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 10px;
}
.brand-logo + .brand-logo { border-left: 1px solid var(--grey-border); }
.brand-logo img {
    height: 34px;
    max-width: 120px;
    object-fit: contain;
    filter: grayscale(100%) brightness(.35) opacity(.75);
    transition: filter .25s;
}
.brand-logo:hover img { filter: grayscale(0) brightness(1) opacity(1); }

/* ============================================
   7. Shared Section Styles
   ============================================ */
.section { padding: 96px 0; }
.section-grey { background: var(--grey-light); }

.kicker {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--magenta);
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.kicker::before {
    content: '';
    width: 34px;
    height: 2px;
    background: var(--magenta);
}

.section-title {
    font-family: 'Anton', 'Oswald', sans-serif;
    font-weight: 400;
    font-size: clamp(32px, 3.4vw, 52px);
    line-height: 1.12;
    color: var(--charcoal-dark);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    margin-bottom: 52px;
    flex-wrap: wrap;
}
.section-head-center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.section-head-center .kicker::after {
    content: '';
    width: 34px;
    height: 2px;
    background: var(--magenta);
}

.lead { font-size: 18px; line-height: 1.65; color: #444; margin-bottom: 16px; font-weight: 500; }
.split-content p { line-height: 1.7; color: var(--grey-text); margin-bottom: 16px; }

.card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--magenta);
    transition: gap .2s;
}
a:hover .card-link, .card-link:hover { gap: 13px; }

/* ============================================
   8. About Teaser (split layout)
   ============================================ */
.split-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 70px;
    align-items: center;
}
.split-media { position: relative; }
.media-frame {
    clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
    overflow: hidden;
}
/* WordPress's media library (loaded on the front end only in ?kat_edit=1 mode)
   ships its own `.media-frame` class for its picker modal — position:absolute;
   inset:0 — which collides with this photo frame and collapses it to 0 height,
   making the image vanish in edit mode. Re-assert ours: the `main` scope
   out-specifies WP's bare class and never matches its modal (appended to body). */
main .media-frame { position: static; inset: auto; }
.media-frame img { width: 100%; height: 520px; object-fit: cover; }
.media-badge {
    position: absolute;
    bottom: -26px;
    right: 4px;
    background: linear-gradient(120deg, var(--magenta), #90003b);
    color: #fff;
    padding: 26px 30px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 18px 40px rgba(178,14,84,.35);
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}
.badge-num { font-family: 'Anton', sans-serif; font-size: 52px; line-height: 1; }
.badge-label { font-size: 12px; font-weight: 700; letter-spacing: 1.6px; line-height: 1.5; }

.check-list { margin: 22px 0 34px; display: flex; flex-direction: column; gap: 13px; }
.check-list li { display: flex; align-items: center; gap: 13px; font-weight: 600; color: #333; }
.check-list i {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #fdeef4;
    color: var(--magenta);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ============================================
   9. Bento Services Grid
   ============================================ */
.services-header-new {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 60px;
}
.sh-left {
    max-width: 700px;
}
.sh-left .section-title {
    margin-bottom: 20px;
    font-size: clamp(36px, 4vw, 56px);
}
.services-desc {
    font-size: 17px;
    line-height: 1.6;
    color: var(--grey-text);
}
.btn-black {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--ink);
    color: #fff;
    padding: 16px 32px;
    border-radius: 32px;
    font-size: 13.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: transform .2s, background .2s;
}
.btn-black:hover {
    transform: translateY(-2px);
    background: #000;
}
.btn-black i { transition: transform .2s; }
.btn-black:hover i { transform: translateX(3px); }

.bento-services {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}
.bento-card {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    position: relative;
    border: 1px solid var(--grey-border);
    transition: transform .3s ease, box-shadow .3s ease;
}
.bento-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}
.bento-content {
    padding: 44px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.bento-num {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #b5b5b5;
    margin-bottom: 12px;
    letter-spacing: 1px;
}
.bento-card h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    text-transform: uppercase;
    margin-bottom: 16px;
    color: var(--ink);
}
.bento-card p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--grey-text);
    margin-bottom: 24px;
}
.bento-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
}
.bento-tags span {
    background: var(--grey-light);
    border: 1px solid var(--grey-border);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--charcoal);
}
.bento-tags .bento-tag-more {
    background: transparent;
    border-color: var(--magenta);
    color: var(--magenta);
}
.btn-text-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.5px;
    transition: color .2s, gap .2s;
    text-transform: uppercase;
}
.btn-text-link:hover {
    color: var(--magenta);
    gap: 14px;
}
.bento-img {
    position: relative;
    overflow: hidden;
}
.bento-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.bento-card:hover .bento-img img {
    transform: scale(1.04);
}

/* Specific Card Layouts */
.bento-card-1 {
    grid-column: span 8;
    flex-direction: row;
}
.bento-card-1 .bento-content { width: 50%; padding-right: 20px; }
.bento-card-1 .bento-img { width: 50%; }
.bento-card-1 .bento-img::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: -1px;
    width: 80px;
    background: linear-gradient(to right, #fff, transparent);
    z-index: 2;
}

.bento-card-2 {
    grid-column: span 4;
    flex-direction: column;
}
.bento-card-2 .bento-img { height: 260px; }

.bento-card-3 {
    grid-column: span 4;
    flex-direction: column;
}
.bento-card-3 .bento-img { height: 260px; }

.bento-card-4 {
    grid-column: span 4;
    flex-direction: column;
}
.bento-card-4 .bento-img { height: 260px; }

.bento-card-5 {
    grid-column: span 4;
    flex-direction: column;
}
.bento-card-5 .bento-img { height: 260px; }
.bento-card-6 {
    grid-column: span 4;
    flex-direction: column;
}
.bento-card-6 .bento-img { height: 260px; }

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .bento-card-1 { grid-column: span 12; }
    .bento-card-2 { grid-column: span 6; }
    .bento-card-3 { grid-column: span 6; }
    .bento-card-4 { grid-column: span 6; }
    .bento-card-5 { grid-column: span 6; }
    .bento-card-6 { grid-column: span 6; }
}
@media (max-width: 768px) {
    .services-header-new { flex-direction: column; align-items: flex-start; gap: 20px; }
    .bento-card-1 { flex-direction: column-reverse; }
    .bento-card-1 .bento-content, .bento-card-1 .bento-img { width: 100%; }
    .bento-card-1 .bento-img { height: 260px; }
    .bento-card-1 .bento-img::before { display: none; }
    .bento-card-2, .bento-card-3, .bento-card-4, .bento-card-5, .bento-card-6 { grid-column: span 12; }
}

.services-home:not(.whatwedo-home) {
    display: none;
}

.whatwedo-home {
    background: #fafafa;
    padding: 68px 0 25px;
    scroll-margin-top: 126px;
}

.whatwedo-home .container {
    max-width: none;
    padding: 0 2.25vw;
}

.whatwedo-home .services-header-new {
    align-items: center;
    margin-bottom: 26px;
    padding: 0 16px;
}

.whatwedo-home .sh-left {
    max-width: 560px;
}

.whatwedo-home .kicker {
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.whatwedo-home .kicker::before {
    width: 22px;
}

.whatwedo-home .section-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(36px, 3.7vw, 42px);
    line-height: 1.1;
    letter-spacing: -1.6px;
    text-transform: none;
    font-weight: 800;
    color: #202026;
    margin-bottom: 10px;
}

.whatwedo-home .services-desc {
    max-width: 520px;
    font-size: 15px;
    line-height: 1.5;
    color: #2f2f36;
}

.whatwedo-home .services-all-btn {
    border-radius: 8px;
    width: 200px;
    height: 40px;
    justify-content: center;
    padding: 0 18px;
    font-size: 13px;
    box-shadow: 0 12px 24px rgba(178, 14, 84, .26);
}

.whatwedo-home .sh-right {
    align-self: flex-start;
    padding-top: 54px;
}

.whatwedo-home .bento-services {
    gap: 18px;
}

.whatwedo-home .bento-card {
    border-radius: 8px;
    border: 1px solid #e7e7e7;
    box-shadow: 0 4px 18px rgba(14, 14, 18, .05);
    background: #fff;
    min-height: 0;
    isolation: isolate;
}

.whatwedo-home .bento-card:hover {
    transform: none;
    box-shadow: 0 4px 18px rgba(14, 14, 18, .05);
}

.whatwedo-home .bento-content {
    padding: 40px 30px 30px;
    position: relative;
    z-index: 2;
    min-width: 0;
}

.whatwedo-home .bento-num {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .3px;
    color: var(--magenta);
    margin-bottom: 22px;
}

.whatwedo-home .bento-num::before {
    content: '';
    width: 22px;
    height: 2px;
    background: var(--magenta);
}

.whatwedo-home .bento-card h3 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.12;
    text-transform: none;
    letter-spacing: -1.15px;
    font-weight: 800;
    color: #202026;
    margin-bottom: 20px;
}

.whatwedo-home .bento-card p {
    max-width: 350px;
    font-size: 15px;
    line-height: 1.72;
    color: #2d2d33;
    margin-bottom: 20px;
}

.whatwedo-home .bento-tags {
    margin-bottom: 20px;
}

.whatwedo-home .bento-tags span {
    background: #fff;
    border: 1px solid rgba(178, 14, 84, .65);
    border-radius: 4px;
    color: #8f164b;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
}

.whatwedo-home .bento-cta {
    align-self: flex-start;
    border-radius: 5px;
    min-height: 40px;
    padding: 0 22px;
    font-size: 12.5px;
    box-shadow: 0 12px 24px rgba(178, 14, 84, .22);
    flex-shrink: 0;
}

.whatwedo-home .btn-text-link {
    margin-top: 0;
    color: var(--magenta);
    letter-spacing: .2px;
    flex-shrink: 0;
}

/* Full service descriptions — no line clamp. Each card grows to fit its copy
   and the CTA stays pinned to the card bottom (margin-top:auto) so it never
   clips. Tag counts are tuned per card in front-page.php ($tag_caps). */
.whatwedo-home .bento-cta,
.whatwedo-home .btn-text-link {
    margin-top: auto;
}

.whatwedo-home .bento-img img {
    /* Absolutely fill the image column so the photo's intrinsic height no longer
       dictates the card height — the CONTENT drives height instead, letting the
       full service description show without ever clipping the pinned CTA.
       (Mobile carousel gives .bento-img an explicit 185px box, so this is safe.) */
    position: absolute;
    inset: 0;
    object-fit: cover;
    transition: none;
    background: #fff;
}

.whatwedo-home .bento-card:hover .bento-img img {
    transform: none;
}

.whatwedo-home .bento-card-1 {
    grid-column: 1 / -1;
    min-height: 384px;
    flex-direction: row;
}

.whatwedo-home .bento-card-1 .bento-content {
    width: 38%;
    padding-left: 26px;
    padding-right: 26px;
    padding-top: 42px;
}

.whatwedo-home .bento-card-1 .bento-img {
    width: 62%;
}

.whatwedo-home .bento-card-1 .bento-img::before {
    display: none;
}

.whatwedo-home .bento-card-2,
.whatwedo-home .bento-card-3 {
    grid-column: span 6;
    min-height: 326px;
    flex-direction: row;
}

.whatwedo-home .bento-card-2 {
    flex-direction: row-reverse;
}

.whatwedo-home .bento-card-2 .bento-content,
.whatwedo-home .bento-card-3 .bento-content {
    padding: 24px 24px 20px;
}

.whatwedo-home .bento-card-2 .bento-content {
    width: 41.5%;
}

.whatwedo-home .bento-card-3 .bento-content {
    width: 58%;
}

.whatwedo-home .bento-card-2 .bento-img {
    width: 58.5%;
    height: auto;
}

.whatwedo-home .bento-card-3 .bento-img {
    width: 42%;
    height: auto;
}

.whatwedo-home .bento-card-2 .bento-img img {
    object-position: center center;
}

.whatwedo-home .bento-card-3 .bento-img img {
    object-position: center center;
}

.whatwedo-home .bento-card-2 h3,
.whatwedo-home .bento-card-3 h3,
.whatwedo-home .bento-card-4 h3,
.whatwedo-home .bento-card-5 h3,
.whatwedo-home .bento-card-6 h3 {
    font-size: clamp(23px, 2.15vw, 29px);
    margin-bottom: 12px;
}

.whatwedo-home .bento-card-2 p,
.whatwedo-home .bento-card-3 p,
.whatwedo-home .bento-card-4 p,
.whatwedo-home .bento-card-5 p,
.whatwedo-home .bento-card-6 p {
    font-size: 12.5px;
    line-height: 1.58;
    margin-bottom: 14px;
}

.whatwedo-home .bento-card-2 .bento-num,
.whatwedo-home .bento-card-3 .bento-num,
.whatwedo-home .bento-card-4 .bento-num,
.whatwedo-home .bento-card-5 .bento-num,
.whatwedo-home .bento-card-6 .bento-num {
    margin-bottom: 14px;
}

.whatwedo-home .bento-card-4 {
    grid-column: 1 / -1;
    min-height: 274px;
    flex-direction: row;
}

.whatwedo-home .bento-card-4 .bento-img {
    width: 50%;
    height: auto;
}

.whatwedo-home .bento-card-4 .bento-content {
    width: 50%;
    padding: 28px 36px 24px;
}

.whatwedo-home .bento-card-5,
.whatwedo-home .bento-card-6 {
    grid-column: 1 / -1;
    min-height: 222px;
    flex-direction: row;
}

.whatwedo-home .bento-card-5 .bento-content,
.whatwedo-home .bento-card-6 .bento-content {
    width: 33%;
    padding: 24px 26px 22px;
}

.whatwedo-home .bento-card-5 .bento-img,
.whatwedo-home .bento-card-6 .bento-img {
    width: 67%;
    height: auto;
}

@media (min-width: 993px) {
    .whatwedo-home {
        padding: clamp(68px, 3.515625vw, 68px) 0 clamp(25px, 2.44140625vw, 47px);
    }

    .whatwedo-home .container {
        padding: 0 2.24609375vw;
    }

    .whatwedo-home .services-header-new {
        margin-bottom: 2.5390625vw;
        padding: 0 1.5625vw;
        gap: 3.90625vw;
    }

    .whatwedo-home .sh-left {
        max-width: 50.78125vw;
    }

    .whatwedo-home .kicker {
        font-size: clamp(12px, .68vw, 13px);
        margin-bottom: .48828125vw;
        gap: 1.171875vw;
    }

    .whatwedo-home .kicker::before {
        width: 2.1484375vw;
        height: .1953125vw;
    }

    .whatwedo-home .section-title {
        font-size: clamp(42px, 3vw, 56px);
        line-height: 1.1;
        letter-spacing: -1.6px;
        margin-bottom: .9765625vw;
    }

    .whatwedo-home .services-desc {
        max-width: 50.78125vw;
        font-size: clamp(15px, .85vw, 17px);
        line-height: 1.5;
    }

    .whatwedo-home .sh-right {
        padding-top: 5.2734375vw;
    }

    .whatwedo-home .services-all-btn {
        width: 19.53125vw;
        height: 3.90625vw;
        border-radius: .78125vw;
        max-width: 200px;
        max-height: 44px;
        font-size: 13px;
        padding: 0 1.7578125vw;
    }

    .whatwedo-home .bento-services {
        gap: 1.7578125vw;
    }

    .whatwedo-home .bento-card {
        border-radius: .78125vw;
    }

    /* min-height (not height) so the nice card proportions hold when copy is
       short, but the card GROWS to show the full service description instead of
       clipping it. Card 6 has no height cap and already grows. */
    .whatwedo-home .bento-card-1 {
        min-height: clamp(470px, 31vw, 595px);
    }

    .whatwedo-home .bento-card-2,
    .whatwedo-home .bento-card-3 {
        min-height: clamp(390px, 24vw, 461px);
    }

    .whatwedo-home .bento-card-4 {
        min-height: clamp(320px, 21vw, 403px);
    }

    .whatwedo-home .bento-card-5 {
        min-height: clamp(315px, 20vw, 385px);
    }

    .whatwedo-home .bento-content {
        padding: clamp(30px, 2.6vw, 50px) clamp(24px, 2.1vw, 40px) clamp(26px, 2vw, 38px);
    }

    .whatwedo-home .bento-card-1 .bento-content {
        padding: clamp(34px, 2.7vw, 52px) clamp(24px, 2vw, 38px) clamp(26px, 2vw, 38px);
    }

    .whatwedo-home .bento-card-2 .bento-content,
    .whatwedo-home .bento-card-3 .bento-content {
        padding: clamp(24px, 1.9vw, 36px) clamp(22px, 1.8vw, 34px) clamp(20px, 1.6vw, 30px);
    }

    .whatwedo-home .bento-card-4 .bento-content {
        padding: clamp(24px, 2vw, 38px) clamp(30px, 2.8vw, 54px) clamp(22px, 1.8vw, 34px);
    }

    .whatwedo-home .bento-card-5 .bento-content {
        padding: clamp(22px, 1.8vw, 34px) clamp(24px, 2vw, 38px) clamp(20px, 1.7vw, 32px);
    }

    .whatwedo-home .bento-num {
        gap: 1.171875vw;
        font-size: clamp(13px, .75vw, 15px);
        margin-bottom: 2.1484375vw;
    }

    .whatwedo-home .bento-num::before {
        width: 2.1484375vw;
        height: .1953125vw;
    }

    .whatwedo-home .bento-card-2 .bento-num,
    .whatwedo-home .bento-card-3 .bento-num,
    .whatwedo-home .bento-card-4 .bento-num,
    .whatwedo-home .bento-card-5 .bento-num {
        margin-bottom: 1.3671875vw;
    }

    .whatwedo-home .bento-card h3 {
        font-size: clamp(34px, 2.4vw, 46px);
        line-height: 1.12;
        letter-spacing: -1.15px;
        margin-bottom: 1.953125vw;
    }

    .whatwedo-home .bento-card-2 h3,
    .whatwedo-home .bento-card-3 h3,
    .whatwedo-home .bento-card-4 h3,
    .whatwedo-home .bento-card-5 h3 {
        font-size: clamp(26px, 1.7vw, 34px);
        margin-bottom: 1.171875vw;
    }

    .whatwedo-home .bento-card p {
        max-width: 34.1796875vw;
        font-size: clamp(15px, .85vw, 17px);
        line-height: 1.72;
        margin-bottom: 1.953125vw;
    }

    .whatwedo-home .bento-card-2 p,
    .whatwedo-home .bento-card-3 p,
    .whatwedo-home .bento-card-4 p,
    .whatwedo-home .bento-card-5 p {
        font-size: clamp(13px, .78vw, 15px);
        line-height: 1.58;
        margin-bottom: 1.3671875vw;
    }

    .whatwedo-home .bento-tags {
        gap: .78125vw;
        margin-bottom: 1.953125vw;
    }

    .whatwedo-home .bento-tags span {
        border-radius: 4px;
        padding: 8px 12px;
        font-size: clamp(12px, .68vw, 13px);
    }

    .whatwedo-home .bento-cta {
        min-height: 40px;
        padding: 0 22px;
        border-radius: 5px;
        font-size: 13px;
    }

    .whatwedo-home .btn-text-link {
        gap: .9765625vw;
        font-size: 13.5px;
    }
}

@media (max-width: 992px) {
    .whatwedo-home .services-header-new {
        align-items: flex-start;
    }

    .whatwedo-home .bento-card-1,
    .whatwedo-home .bento-card-2,
    .whatwedo-home .bento-card-3,
    .whatwedo-home .bento-card-4,
    .whatwedo-home .bento-card-5,
    .whatwedo-home .bento-card-6 {
        grid-column: 1 / -1;
        height: auto;
        flex-direction: column;
    }

    .whatwedo-home .bento-card-2 {
        flex-direction: column;
    }

    .whatwedo-home .bento-card-1 .bento-content,
    .whatwedo-home .bento-card-1 .bento-img,
    .whatwedo-home .bento-card-2 .bento-content,
    .whatwedo-home .bento-card-2 .bento-img,
    .whatwedo-home .bento-card-3 .bento-content,
    .whatwedo-home .bento-card-3 .bento-img,
    .whatwedo-home .bento-card-4 .bento-content,
    .whatwedo-home .bento-card-4 .bento-img,
    .whatwedo-home .bento-card-5 .bento-content,
    .whatwedo-home .bento-card-5 .bento-img,
    .whatwedo-home .bento-card-6 .bento-content,
    .whatwedo-home .bento-card-6 .bento-img {
        width: 100%;
    }

    .whatwedo-home .bento-img {
        height: 280px !important;
        order: 1;
    }

    .whatwedo-home .bento-content {
        order: 2;
    }
}

@media (max-width: 600px) {
    .whatwedo-home .container {
        padding: 0 24px;
    }

    .whatwedo-home .section-title {
        font-size: 36px;
        letter-spacing: -1px;
    }

    .whatwedo-home .bento-content,
    .whatwedo-home .bento-card-1 .bento-content,
    .whatwedo-home .bento-card-2 .bento-content,
    .whatwedo-home .bento-card-3 .bento-content,
    .whatwedo-home .bento-card-4 .bento-content,
    .whatwedo-home .bento-card-5 .bento-content,
    .whatwedo-home .bento-card-6 .bento-content {
        padding: 22px 22px 22px;
    }

    /* Shorter services section on mobile: smaller image, fewer tags, tighter spacing */
    .whatwedo-home .bento-img {
        height: 170px !important;
    }
    .whatwedo-home .bento-services { gap: 18px; }
    .whatwedo-home .bento-card p { margin-bottom: 14px; }
    .whatwedo-home .bento-tags { gap: 7px; margin-bottom: 16px; }
    /* show only the first 4 service tags per card on mobile */
    .whatwedo-home .bento-tags span:nth-of-type(n+5) { display: none; }
}

/* ============================================
   10. Featured Work Section (full-bleed showcase)
   ============================================ */
.work-home {
    position: relative;
    background-color: var(--white);
    overflow: hidden;
}

.work-showcase {
    display: grid;
    grid-template-columns: 26% 36% 38%;
    height: calc(100vh - 72px);
    min-height: 640px;
    max-height: 880px;
}

/* Left Column */
.work-home-left {
    padding: 48px 24px 0 4vw;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.work-home-left .kicker {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--magenta);
    text-transform: uppercase;
    margin-bottom: 14px;
}

.work-home-left .kicker::before {
    display: none;
}

.work-home-left .section-title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(28px, 2.5vw, 43px);
    font-weight: 700;
    line-height: 1.12;
    color: var(--ink);
    text-transform: uppercase;
    white-space: nowrap;
    margin-bottom: 18px;
}

.work-home-left .section-desc {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--grey-text);
    margin-bottom: 64px;
}

/* Featured Project (plain, no card) */
.featured-project .featured-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    color: var(--magenta);
    text-transform: uppercase;
    margin-bottom: 14px;
}

.featured-project h3 {
    font-size: 23px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 12px;
    line-height: 1.25;
}

.featured-project .featured-desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--grey-text);
    margin-bottom: 22px;
    max-width: 34ch;
}

.featured-project .featured-meta {
    display: flex;
    gap: 26px;
    margin-bottom: 28px;
    font-size: 13.5px;
    color: var(--charcoal);
    font-weight: 500;
}

.featured-project .featured-meta i {
    color: var(--charcoal);
    margin-right: 6px;
}

.featured-project .btn-case-study {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    background-color: var(--magenta);
    color: var(--white);
    padding: 14px 28px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    border-radius: 30px;
    text-transform: uppercase;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.featured-project .btn-case-study:hover {
    background-color: var(--magenta-line);
    transform: translateY(-1px);
}

/* Center Column - Large Billboard mockup */
.work-home-center {
    position: relative;
    z-index: 1;
}

.billboard-image-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -22%;
    right: 0;
    overflow: hidden;
}

.billboard-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.billboard-image-wrapper .fade-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--white) 0%, var(--white) 14%, transparent 48%),
                linear-gradient(to bottom, var(--white) 0%, transparent 22%);
    pointer-events: none;
}

/* Right Column - full-bleed project rows */
.work-home-right {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background-color: var(--white);
    z-index: 2;
}

.work-row {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    color: var(--white);
}

.work-row img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.work-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0a0306 0%, rgba(10, 3, 6, 0.9) 26%, rgba(10, 3, 6, 0.45) 50%, rgba(10, 3, 6, 0) 70%);
    z-index: 1;
}

/* keep last row's text clear of the floating stats card */
.work-row:last-child .work-row-content {
    padding-bottom: 120px;
}

.work-row:hover img {
    transform: scale(1.05);
}

.work-row-content {
    position: relative;
    z-index: 2;
    padding: 24px 24px 24px 36px;
    max-width: 58%;
}

.work-row-num {
    display: block;
    font-family: 'Anton', sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
    color: var(--magenta);
    line-height: 1;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(178, 14, 84, 0.55);
    width: 150px;
}

.work-row-cat {
    display: inline-block;
    background-color: var(--magenta);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 10px;
    margin-bottom: 12px;
}

.work-row-content h3 {
    font-size: clamp(16px, 1.25vw, 20px);
    font-weight: 700;
    color: var(--white);
    margin-bottom: 8px;
    line-height: 1.3;
}

.work-row-content p {
    font-size: 13px;
    line-height: 1.55;
    color: #c5bdc1;
    margin-bottom: 0;
}

/* Floating Stats Card */
.work-stats-float {
    position: absolute;
    left: 4vw;
    right: 4vw;
    bottom: 30px;
    z-index: 5;
}

.work-stats-card {
    background-color: var(--white);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(15, 2, 8, 0.18);
    padding: 26px 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
}

.work-stats-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 4px 0;
}

.work-stats-item:not(:first-child) {
    border-left: 1px solid #ececec;
}

.work-stats-icon {
    width: 34px;
    height: 34px;
    color: var(--magenta);
    flex-shrink: 0;
}

.work-stats-content {
    display: flex;
    flex-direction: column;
}

.work-stats-num {
    font-size: 26px;
    font-weight: 800;
    color: var(--magenta);
    line-height: 1.15;
}

.work-stats-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--charcoal);
    margin-top: 2px;
}


/* ============================================
   11. Work Grid
   ============================================ */
.work-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}
.work-card {
    position: relative;
    overflow: hidden;
    display: block;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.work-card img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    transition: transform .6s ease;
}
.work-card:hover img { transform: scale(1.06); }
.work-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15,2,8,.85) 0%, transparent 55%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px 32px;
    color: #fff;
    transition: background .4s;
}
.work-card:hover .work-overlay { background: linear-gradient(to top, rgba(120,6,55,.88) 0%, rgba(15,2,8,.15) 70%); }
.work-overlay h3, .work-overlay .work-cat { transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.work-card:hover .work-overlay h3 { transform: translateY(-4px); }
.work-card:hover .work-overlay .work-cat { transform: translateY(-4px); }
.work-cat {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ff8fbe;
    margin-bottom: 8px;
}
.work-overlay h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 23px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Work page filters */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 44px;
}
.filter-btn {
    padding: 11px 24px;
    border-radius: 26px;
    border: 1.5px solid var(--grey-border);
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--charcoal-dark);
    cursor: pointer;
    transition: all .2s;
}
.filter-btn:hover { border-color: var(--magenta); color: var(--magenta); }
.filter-btn.active { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.work-card.hidden { display: none; }

/* ============================================
   12. Industries
   ============================================ */
.industry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.industry-chip {
    background: #fff;
    border: 1px solid var(--grey-border);
    padding: 28px 26px;
    display: flex;
    align-items: center;
    gap: 18px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--ink);
    transition: all .25s;
}
.industry-chip i {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: #fdeef4;
    color: var(--magenta);
    font-size: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .25s;
}
.industry-chip:hover { border-color: var(--magenta); transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,.08); }
.industry-chip:hover i { background: var(--magenta); color: #fff; }

.industry-card {
    background: #fff;
    border: 1px solid var(--grey-border);
    padding: 36px 32px;
    transition: all .25s;
}
.industry-card:hover { border-color: var(--magenta); transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,.08); }
.industry-card i {
    width: 60px; height: 60px;
    border-radius: 16px;
    background: #fdeef4;
    color: var(--magenta);
    font-size: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.industry-card h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: var(--ink);
}
.industry-card p { font-size: 14.5px; line-height: 1.65; color: var(--grey-text); }

/* ============================================
   13. Testimonials
   ============================================ */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.testimonial-card {
    background: var(--grey-light);
    border: 1px solid var(--grey-border);
    padding: 36px 32px;
    position: relative;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.testimonial-card:hover { transform: translateY(-5px); border-color: #f0cede; box-shadow: 0 18px 40px rgba(20,4,11,.08); }
.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: 14px;
    right: 26px;
    font-family: 'Anton', sans-serif;
    font-size: 90px;
    line-height: 1;
    color: rgba(178,14,84,.12);
}
.stars { color: #f5a623; font-size: 13px; display: flex; gap: 4px; margin-bottom: 18px; }
.testimonial-card > p { font-size: 15px; line-height: 1.75; color: #3c3c3c; margin-bottom: 24px; }
.testimonial-author strong { display: block; color: var(--ink); font-size: 15px; }
.testimonial-author span { font-size: 13px; color: var(--grey-text); }

/* ============================================
   14. Insights
   ============================================ */
.insight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
/* Blog / insights archive pagination */
.kat-pagination { margin-top: 40px; }
.kat-pagination .page-numbers {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.kat-pagination .page-numbers li { margin: 0; }
.kat-pagination .page-numbers a,
.kat-pagination .page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--grey-border);
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}
.kat-pagination .page-numbers a:hover { border-color: var(--magenta); color: var(--magenta); }
.kat-pagination .page-numbers .current {
    background: linear-gradient(135deg, var(--magenta), #90003b);
    border-color: transparent;
    color: #fff;
}
/* WP core pagination (search / archive fallbacks) — mirror .kat-pagination */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.navigation.pagination { margin-top: 40px; }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.navigation.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--grey-border);
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}
.navigation.pagination a.page-numbers:hover { border-color: var(--magenta); color: var(--magenta); }
.navigation.pagination .page-numbers.current {
    background: linear-gradient(135deg, var(--magenta), #90003b);
    border-color: transparent;
    color: #fff;
}
/* Search results — premium cards (class is kat- prefixed: WP puts "search-results" on <body>) */
.kat-search-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.search-result-item {
    display: block;
    background: #fff;
    border: 1px solid var(--grey-border);
    border-radius: 14px;
    padding: 24px 26px;
    text-decoration: none;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}
.search-result-item:hover { border-color: var(--magenta); transform: translateY(-3px); box-shadow: 0 18px 40px -28px rgba(178, 14, 84, .45); }
.search-result-item h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 8px;
    transition: color .2s;
}
.search-result-item:hover h3 { color: var(--magenta); }
.search-result-item p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--grey-text); }
@media (max-width: 768px) { .kat-search-results { grid-template-columns: minmax(0, 1fr); } }
/* 404 */
.error-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.error-services { margin-top: 44px; }
.error-service-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.error-service-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--grey-border);
    border-radius: 999px;
    color: var(--ink);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: border-color .2s, color .2s;
}
.error-service-links a:hover { border-color: var(--magenta); color: var(--magenta); }
.insight-card {
    background: #fff;
    border: 1px solid var(--grey-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
}
.insight-card:hover { transform: translateY(-6px); box-shadow: 0 2px 6px rgba(0,0,0,.04), 0 26px 54px rgba(20,4,11,.12); }
.insight-thumb { position: relative; overflow: hidden; }
.insight-thumb img { width: 100%; height: 220px; object-fit: cover; transition: transform .5s; }
.insight-card:hover .insight-thumb img { transform: scale(1.06); }
.insight-cat {
    position: absolute;
    top: 16px; left: 16px;
    background: var(--magenta);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 7px 14px;
}
.insight-body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.insight-date { font-size: 12.5px; color: var(--grey-text); display: inline-flex; gap: 8px; align-items: center; }
.insight-body h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: .3px;
}
.insight-body p { font-size: 14px; line-height: 1.65; color: var(--grey-text); flex: 1; }

/* ============================================
   15. CTA Band + Footer
   ============================================ */
.cta-band {
    background:
        linear-gradient(100deg, rgba(141, 8, 62, .95), rgba(90, 4, 40, .96)),
        url('../images/kat-vehicle-branding.webp') center 60% / cover no-repeat;
    padding: 78px 0;
    color: #fff;
}
.cta-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;
}
.cta-kicker { font-size: 13px; font-weight: 700; letter-spacing: 3px; color: #ff9cc6; margin-bottom: 10px; }
.cta-title {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: clamp(30px, 3.2vw, 48px);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.cta-title span { color: #ff9cc6; }
.cta-actions { display: flex; gap: 18px; flex-wrap: wrap; }
/* Solid white pill — primary CTA on dark/magenta bands. Box-model matched
   to .btn-outline-white (same padding/radius/border) so the two pills sit at
   identical height and align perfectly side by side. */
.btn-white {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid #fff;
    background: #fff;
    color: var(--magenta);
    padding: 14px 28px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.btn-white i { font-size: 12px; transition: transform .25s; }
.btn-white:hover {
    background: transparent;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0,0,0,.22);
}
.btn-white:hover i { transform: translateX(3px); }

.btn-outline-white {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid rgba(255,255,255,.7);
    color: #fff;
    padding: 14px 28px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: background .2s, border-color .2s;
}
.btn-outline-white:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* When the CTA band can't fit text + buttons on one row, stack it as a
   clean, centered column instead of an awkward left-wrapped block. */
@media (max-width: 880px) {
    .cta-inner { flex-direction: column; align-items: center; text-align: center; gap: 28px; }
    .cta-actions { justify-content: center; align-items: center; }
    .cta-actions a { justify-content: center; }
}

.site-footer { background: var(--ink); color: #b9b9b9; }
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.1fr 1.2fr;
    gap: 48px;
    padding-top: 76px;
    padding-bottom: 60px;
}
.footer-logo {
    font-family: 'Anton', sans-serif;
    font-size: 30px;
    color: #fff;
    letter-spacing: 1px;
}
.footer-logo span { color: var(--magenta); }
.footer-tagline { font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: #8a8a8a; margin: 4px 0 18px; }
.footer-blurb { font-size: 14px; line-height: 1.75; margin-bottom: 24px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid #3a3a3a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ddd;
    font-size: 15px;
    transition: all .2s;
}
.footer-social a:hover { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.footer-col h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 22px;
    position: relative;
    padding-bottom: 12px;
}
.footer-col h4::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 34px; height: 2px;
    background: var(--magenta);
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col ul a { font-size: 14px; transition: color .2s, padding-left .2s; }
.footer-col ul a:hover { color: #fff; padding-left: 5px; }
.footer-contact li { display: flex; gap: 12px; font-size: 14px; line-height: 1.6; align-items: baseline; }
.footer-contact i { color: var(--magenta); width: 16px; }
.footer-quote-btn { margin-top: 24px; padding: 13px 24px; font-size: 12.5px; }
/* extra bottom clearance so the fixed contact fab never covers the credit */
.footer-bottom { border-top: 1px solid #2c2c2c; padding: 22px 0 100px; font-size: 13px; }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.footer-credit a { color: #fff; font-weight: 700; transition: color .2s; }
.footer-credit a:hover { color: var(--magenta); }
.footer-legal { display: flex; gap: 8px 18px; flex-wrap: wrap; }
.footer-legal a { color: rgba(255,255,255,.62); transition: color .2s; }
.footer-legal a:hover { color: #fff; }

/* ---- Legal pages (privacy / terms / disclaimer) ---- */
.legal-page .legal-body { max-width: 860px; margin: 0 auto; }
.legal-updated { font-size: 14px; color: var(--grey-text); margin-bottom: 8px; }
.legal-section { margin-top: 40px; }
.legal-section:first-of-type { margin-top: 8px; }
.legal-section h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 14px;
    letter-spacing: .3px;
}
.legal-section h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    margin: 22px 0 10px;
}
.legal-section p { font-size: 15.5px; line-height: 1.8; color: #3c3c3c; margin-bottom: 14px; }
.legal-section ul { margin: 0 0 16px; padding-left: 22px; }
[dir="rtl"] .legal-section ul { padding-left: 0; padding-right: 22px; }
.legal-section ul li { font-size: 15.5px; line-height: 1.75; color: #3c3c3c; margin-bottom: 8px; }
.legal-section a { color: var(--magenta); font-weight: 600; }
.legal-section a:hover { text-decoration: underline; }
.legal-callout {
    background: var(--grey-light);
    border-left: 3px solid var(--magenta);
    padding: 20px 24px;
    border-radius: 0 8px 8px 0;
    margin: 24px 0;
}
[dir="rtl"] .legal-callout { border-left: none; border-right: 3px solid var(--magenta); border-radius: 8px 0 0 8px; }
.legal-callout p { margin-bottom: 0; }
.footer-legal a:hover { color: #fff; }
/* ============================================
   16. Inner Pages
   ============================================ */
.page-hero {
    background:
        linear-gradient(100deg, rgba(20, 4, 11, .88) 30%, rgba(120, 6, 55, .82)),
        url('../images/kat-billboard.webp') center 35% / cover no-repeat;
    color: #fff;
    padding: 92px 0 84px;
    position: relative;
    overflow: hidden;
}
.page-hero::after {
    content: '';
    position: absolute;
    right: -60px;
    top: 0;
    bottom: 0;
    width: 280px;
    background:
        linear-gradient(105deg, transparent 46%, rgba(178,14,84,.5) 46%, rgba(178,14,84,.5) 49%, transparent 49%),
        linear-gradient(105deg, transparent 60%, rgba(178,14,84,.32) 60%, rgba(178,14,84,.32) 63%, transparent 63%);
}
.breadcrumb { font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; color: #e3a6c2; margin-bottom: 16px; font-weight: 600; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb i { font-size: 10px; margin: 0 8px; }
.page-title {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: clamp(42px, 5.4vw, 80px);
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.05;
}
.page-sub { margin-top: 18px; max-width: 640px; font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.82); }

/* Services page */
.service-section { padding: 84px 0; scroll-margin-top: 30px; }
.service-section:nth-child(even) { background: var(--grey-light); }
.service-section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.service-items-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 26px 0 30px;
}
.service-item-tile {
    background: #fff;
    border: 1px solid var(--grey-border);
    padding: 16px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all .2s;
}
.service-item-tile i { color: var(--magenta); font-size: 12px; }
.service-item-tile:hover { border-color: var(--magenta); transform: translateX(4px); }
.service-media img {
    width: 100%;
    height: 440px;
    object-fit: cover;
    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
}

/* About page */
.about-hero {
    background:
        linear-gradient(100deg, rgba(20, 4, 11, .90) 26%, rgba(120, 6, 55, .78)),
        url('../images/kat-storefront.webp') center / cover no-repeat;
}
.about-statement {
    background: var(--ink);
    color: #fff;
    padding: 76px 0;
}
.about-statement-inner {
    max-width: 980px;
}
.about-statement .kicker {
    color: #f4a6c8;
}
.about-statement h2 {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(34px, 4.2vw, 62px);
    line-height: 1.08;
    text-transform: uppercase;
    color: #fff;
    max-width: 920px;
}
.about-statement p:not(.kicker) {
    margin-top: 22px;
    max-width: 760px;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255,255,255,.74);
}
.about-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    gap: 72px;
    align-items: start;
}
.about-overview-copy {
    max-width: 820px;
}
.founder-panel {
    position: sticky;
    top: 28px;
    border: 1px solid var(--grey-border);
    background: #fff;
    padding: 34px;
    box-shadow: 0 18px 44px rgba(0,0,0,.08);
}
.founder-mark {
    width: 168px;
    height: 118px;
    overflow: hidden;
    margin-bottom: 30px;
}
.founder-mark img {
    width: 270px;
    max-width: none;
    transform: translate(-48px, -100px);
}
.founder-panel blockquote {
    border-left: 4px solid var(--magenta);
    padding-left: 22px;
    margin-bottom: 30px;
}
.founder-panel blockquote p {
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    line-height: 1.18;
    color: var(--ink);
    text-transform: uppercase;
}
.founder-meta strong {
    display: block;
    color: var(--ink);
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    text-transform: uppercase;
}
.founder-meta span {
    display: block;
    margin-top: 6px;
    color: var(--grey-text);
    font-size: 14px;
}
.section-intro {
    max-width: 780px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--grey-text);
    margin-top: 18px;
}

/* ============================================
   About page — premium editorial layout
   ============================================ */
/* 1. Hero */
.about-hero-emaar {
    background:
        linear-gradient(105deg, rgba(14, 3, 8, .94) 20%, rgba(120, 6, 55, .74) 100%),
        url('../images/kat-storefront.webp') center / cover no-repeat;
    padding: 128px 0 120px;
    text-align: center;
}
.about-hero-emaar .container { display: flex; flex-direction: column; align-items: center; }
.about-hero-emaar .breadcrumb { color: #e3a6c2; }
.about-hero-emaar .hero-kicker {
    color: #f4a6c8;
    margin-bottom: 20px;
    justify-content: center;
}
.about-hero-emaar .hero-kicker::before,
.about-hero-emaar .hero-kicker::after {
    content: '';
    width: 34px;
    height: 2px;
    background: currentColor;
    opacity: .65;
}
.about-hero-emaar .page-title { font-size: clamp(46px, 6vw, 88px); }
.about-hero-emaar .page-sub {
    max-width: 640px;
    margin-inline: auto;
    margin-top: 22px;
    font-size: 18px;
    color: rgba(255,255,255,.84);
}
.about-hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    width: 42px;
    height: 42px;
    border: 1.5px solid rgba(255,255,255,.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    animation: aboutScroll 2s ease-in-out infinite;
}
@keyframes aboutScroll {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: .6; }
    50% { transform: translateX(-50%) translateY(7px); opacity: 1; }
}

/* 2. Editorial intro statement */
.about-intro { padding: clamp(80px, 9vw, 130px) 0; background: #fff; }
.about-intro-inner { max-width: 1000px; text-align: center; margin: 0 auto; }
.about-intro .kicker { justify-content: center; }
.about-intro .kicker::after {
    content: '';
    width: 34px;
    height: 2px;
    background: var(--magenta);
}
.about-intro-statement {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: clamp(28px, 4vw, 56px);
    line-height: 1.18;
    color: var(--ink);
    text-transform: uppercase;
    margin: 14px auto 0;
    max-width: 920px;
}
.about-intro-lead {
    max-width: 720px;
    margin: 30px auto 0;
    font-size: 18px;
    line-height: 1.75;
    color: var(--grey-text);
}

/* 3. Founder feature band */
.founder-feature {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
    background: var(--ink);
    position: relative;
    overflow: hidden;
}
.founder-feature-media {
    position: relative;
    min-height: 560px;
}
.founder-feature-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.founder-feature-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 60%, rgba(26,26,26,.55));
}
.founder-feature-copy {
    color: #fff;
    padding: clamp(56px, 7vw, 96px) clamp(32px, 5.5vw, 92px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 760px;
}
.founder-feature-kicker { color: #f4a6c8; margin-bottom: 26px; }
.founder-feature-quote {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: clamp(26px, 2.7vw, 40px);
    line-height: 1.28;
    color: #fff;
    border: 0;
    margin: 0 0 30px;
    padding: 0;
    position: relative;
}
.founder-feature-quote::before {
    content: '\201C';
    display: block;
    font-family: 'Anton', sans-serif;
    font-size: 80px;
    line-height: .6;
    color: var(--magenta);
    margin-bottom: 14px;
}
.founder-feature-attr {
    margin-bottom: 36px;
    padding-left: 18px;
    border-left: 3px solid var(--magenta);
}
.founder-feature-attr strong {
    display: block;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 19px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.founder-feature-attr span {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    color: rgba(255,255,255,.6);
}
.founder-feature-copy .btn-gradient { align-self: flex-start; }

/* 4. Pillars — premium 3-column */
.about-pillars { background: #fff; }
.pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 56px;
}
.pillar-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--grey-border);
    padding: 44px 36px 40px;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s, border-color .3s;
}
.pillar-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--magenta), var(--magenta-line));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s;
}
.pillar-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(0,0,0,.10);
    border-color: transparent;
}
.pillar-card:hover::before { transform: scaleX(1); }
.pillar-num {
    position: absolute;
    top: 28px; right: 30px;
    font-family: 'Anton', sans-serif;
    font-size: 46px;
    line-height: 1;
    color: #f3f3f3;
}
.pillar-icon {
    width: 62px; height: 62px;
    border-radius: 50%;
    background: #fdeef4;
    color: var(--magenta);
    font-size: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
    transition: background .3s, color .3s;
}
.pillar-card:hover .pillar-icon { background: var(--magenta); color: #fff; }
.pillar-card h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 23px;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 14px;
}
.pillar-card p {
    font-size: 14.5px;
    line-height: 1.72;
    color: var(--grey-text);
    margin-bottom: 24px;
}
/* ---- About: credentials band ---- */
.about-creds { background: var(--ink); padding: 0; }
.about-creds-grid {
    list-style: none;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.about-cred {
    padding: 46px 30px;
    text-align: center;
    border-left: 1px solid rgba(255,255,255,.10);
}
.about-cred:first-child { border-left: none; }
.about-cred strong {
    display: block;
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 38px;
    line-height: 1;
    color: #ff8fbe;
    margin-bottom: 12px;
}
.about-cred span {
    font-family: 'Oswald', sans-serif;
    font-size: 12.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #d9c3cd;
}
[dir="rtl"] .about-cred { border-left: none; border-right: 1px solid rgba(255,255,255,.10); }
[dir="rtl"] .about-cred:first-child { border-right: none; }

/* ---- About: capabilities checklist ---- */
.about-cap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}
.about-cap-intro .section-title { text-align: left; }
[dir="rtl"] .about-cap-intro .section-title { text-align: right; }
.about-cap-intro .lead { margin: 16px 0 28px; }
.about-cap-list {
    list-style: none;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}
.about-cap-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.4;
}
.about-cap-list li i {
    flex: 0 0 auto;
    margin-top: 2px;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #fdeef4;
    color: var(--magenta);
    font-size: 11px;
}

/* ---- About: closing CTA band ---- */
.about-cta-band { background: #fff; padding: clamp(60px, 8vw, 110px) 0; border-top: 1px solid var(--grey-border); }
.about-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}
.about-cta-inner .kicker { margin-bottom: 14px; }
.about-cta-inner h2 {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.05;
    color: var(--ink);
    max-width: 620px;
}
.about-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.about-capability-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--grey-border);
    border-left: 1px solid var(--grey-border);
    margin-top: 44px;
}
.about-capability-grid article {
    background: #fff;
    border-right: 1px solid var(--grey-border);
    border-bottom: 1px solid var(--grey-border);
    padding: 32px;
    min-height: 260px;
}
.about-capability-grid article span {
    display: inline-block;
    margin-bottom: 20px;
    font-family: 'Oswald', sans-serif;
    color: var(--magenta);
    font-weight: 700;
}
.about-capability-grid article h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    line-height: 1.2;
    color: var(--ink);
    text-transform: uppercase;
    margin-bottom: 14px;
}
.about-capability-grid article p {
    font-size: 14.5px;
    line-height: 1.68;
    color: var(--grey-text);
}
.about-photo-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 70px;
    align-items: center;
}
.about-photo img {
    width: 100%;
    height: 580px;
    object-fit: cover;
    clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}
.about-photo-copy .btn-gradient {
    margin-top: 8px;
}
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.value-card {
    border: 1px solid var(--grey-border);
    background: #fff;
    padding: 38px 32px;
    transition: all .25s;
}
.value-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,.08); border-color: var(--magenta); }
.value-card i {
    width: 58px; height: 58px;
    border-radius: 50%;
    background: #fdeef4;
    color: var(--magenta);
    font-size: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.value-card h3 { font-family: 'Oswald', sans-serif; font-size: 19px; text-transform: uppercase; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.value-card p { font-size: 14.5px; line-height: 1.65; color: var(--grey-text); }

.timeline { position: relative; margin-top: 24px; }
.timeline::before { content: ''; position: absolute; left: 9px; top: 4px; bottom: 4px; width: 2px; background: #f0cede; }
.timeline-item { position: relative; padding: 0 0 30px 42px; }
.timeline-item::before {
    content: '';
    position: absolute;
    left: 0; top: 4px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 5px solid var(--magenta);
}
.timeline-item h4 { font-family: 'Oswald', sans-serif; font-size: 17px; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.timeline-item h4 span { color: var(--magenta); margin-right: 10px; }
.timeline-item p { font-size: 14.5px; line-height: 1.6; color: var(--grey-text); }

/* Careers */
.job-list { display: flex; flex-direction: column; gap: 20px; }
.job-card {
    border: 1px solid var(--grey-border);
    background: #fff;
    padding: 30px 34px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    transition: all .25s;
}
.job-card:hover { border-color: var(--magenta); box-shadow: 0 14px 34px rgba(0,0,0,.07); }
.job-card h3 { font-family: 'Oswald', sans-serif; font-size: 21px; font-weight: 600; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.job-meta { display: flex; gap: 18px; font-size: 13px; color: var(--grey-text); margin-bottom: 10px; flex-wrap: wrap; }
.job-meta span { display: inline-flex; align-items: center; gap: 7px; }
.job-meta i { color: var(--magenta); }
.job-card p { font-size: 14.5px; line-height: 1.6; color: var(--grey-text); max-width: 680px; }

/* Contact — premium split hero */
.contact-hero {
    background: linear-gradient(160deg, #241f22 0%, var(--ink) 45%, #120f11 100%); /* fallback under the image */
    color: #fff;
    padding: clamp(48px, 5.5vw, 78px) 0 clamp(44px, 5vw, 68px);
    position: relative;
    overflow: hidden;
}
/* Full-bleed branded K.A.T SIGNS storefront photo behind the hero. */
.contact-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 66% center;
    z-index: 0;
}
/* Legibility + brand overlay — darkest on the left (under the copy), lets the
   lit sign on the right show through. Sits above the photo, below the content. */
.contact-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(15,12,14,.95) 0%, rgba(15,12,14,.74) 44%, rgba(15,12,14,.30) 72%, rgba(15,12,14,.58) 100%),
        radial-gradient(circle at 86% 80%, rgba(178,14,84,.34), transparent 46%);
    pointer-events: none;
}
/* Magenta accent line across the top edge. */
.contact-hero::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    z-index: 2;
    background: linear-gradient(90deg, transparent, var(--magenta), #ff8fbe, var(--magenta), transparent);
    opacity: .85;
    pointer-events: none;
}
.contact-hero-inner { position: relative; z-index: 2; }
.contact-hero-copy { max-width: 640px; }
.contact-hero .breadcrumb { color: #e3a6c2; }
.contact-hero .breadcrumb a { color: #e3a6c2; }
.contact-hero .kicker { color: #ff8fbe; }
.contact-hero-title {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: clamp(34px, 4.6vw, 58px);
    line-height: 1.04;
    text-transform: uppercase;
    margin: 12px 0 16px;
}
.contact-hero-sub {
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.7;
    color: rgba(255,255,255,.78);
    max-width: 560px;
    margin-bottom: 32px;
}
.contact-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* base .btn-outline-dark has a white fill (for light bgs); on the dark hero
   that renders white-on-white, so force a transparent fill here. */
.contact-hero-actions .btn-outline-dark { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.contact-hero-actions .btn-outline-dark:hover { background: rgba(255,255,255,.06); border-color: #ff8fbe; color: #ff8fbe; }

/* Contact hero — compact glass trust chips under the CTA. */
.contact-hero-chips {
    list-style: none;
    display: flex; flex-wrap: wrap; gap: 10px 12px;
    margin: 30px 0 0; padding: 0;
}
.contact-hero-chips li {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 15px;
    font-size: 13.5px; font-weight: 600; color: #fff;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.contact-hero-chips i { color: #ff8fbe; font-size: 13px; }

/* Contact hero — premium social-proof card (kept for legacy/other use). */
.contact-hero-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 20px;
    padding: 30px 30px 26px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.chc-rating { display: flex; align-items: center; gap: 16px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.12); }
.chc-score { font-family: 'Anton', sans-serif; font-size: 52px; line-height: 1; color: #fff; }
.contact-hero-card .stars { color: #ffb43e; font-size: 14px; margin-bottom: 6px; }
.chc-rating-count { font-size: 13px; color: rgba(255,255,255,.7); }
.contact-hero-facts { list-style: none; margin: 0 0 24px; display: flex; flex-direction: column; gap: 16px; }
.contact-hero-facts li { display: flex; align-items: center; gap: 14px; font-size: 15px; color: rgba(255,255,255,.9); line-height: 1.4; }
.contact-hero-facts i {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(255,143,190,.14);
    color: #ff8fbe;
    font-size: 15px;
}
.chc-wa {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 13px 20px;
    border-radius: 12px;
    background: #25D366; color: #08331b;
    font-weight: 700; font-size: 15px;
    transition: transform .2s, box-shadow .2s;
}
.chc-wa:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(37,211,102,.3); color: #08331b; }

/* Contact — "what happens next" steps */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--grey-border);
    border-radius: 16px;
    padding: 34px 28px 28px;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.step-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--magenta), #6d0430); }
.step-card:hover { transform: translateY(-4px); border-color: var(--magenta); box-shadow: 0 22px 48px rgba(20,4,11,.08); }
.step-num { font-family: 'Anton', sans-serif; font-size: 42px; line-height: 1; color: #f2bcd2; display: block; margin-bottom: 14px; }
.step-card h3 { font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.step-card p { font-size: 14.5px; line-height: 1.7; color: var(--grey-text); }

/* Contact — direct-info column */
.contact-info-title {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: clamp(26px, 3vw, 36px);
    text-transform: uppercase;
    color: var(--ink);
    margin: 10px 0 28px;
}
.contact-info-list { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.contact-info-item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 20px;
    border: 1px solid var(--grey-border);
    border-radius: 12px;
    background: #fff;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.contact-info-item:hover { border-color: var(--magenta); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(20,4,11,.06); }
.contact-info-icon {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: #fdeef4;
    color: var(--magenta);
    font-size: 17px;
}
.contact-info-item h4 { font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--grey-text); margin-bottom: 6px; }
.contact-info-item a, .contact-info-item p { font-size: 15.5px; font-weight: 500; color: var(--ink); line-height: 1.55; }
.contact-info-item a { font-weight: 600; }
.contact-info-item a:hover { color: var(--magenta); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start; }
.contact-cards { display: flex; flex-direction: column; gap: 18px; }
.contact-card {
    border: 1px solid var(--grey-border);
    background: #fff;
    padding: 26px 28px;
    display: flex;
    gap: 20px;
    align-items: center;
    transition: border-color .2s;
}
.contact-card:hover { border-color: var(--magenta); }
.contact-card i {
    width: 54px; height: 54px;
    border-radius: 50%;
    background: #fdeef4;
    color: var(--magenta);
    font-size: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-card h4 { font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--grey-text); margin-bottom: 5px; }
.contact-card p, .contact-card a { font-size: 16px; font-weight: 600; color: var(--ink); }
.contact-card a:hover { color: var(--magenta); }

/* Forms */
.form-panel {
    background: #fff;
    border: 1px solid var(--grey-border);
    padding: 44px;
    box-shadow: 0 18px 50px rgba(0,0,0,.06);
}
.form-panel h3 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 28px; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.form-panel > p { color: var(--grey-text); font-size: 14.5px; margin-bottom: 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #333; margin-bottom: 8px; }
.form-group label span { color: var(--magenta); }
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    padding: 13px 16px;
    border: 1.5px solid var(--grey-border);
    border-radius: 6px;
    background: var(--grey-light);
    outline: none;
    color: var(--ink);
    transition: border-color .2s, background .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--magenta); background: #fff; }
.form-group textarea { resize: vertical; min-height: 130px; }

.alert-success {
    background: #eefaf1;
    border: 1px solid #bfe8cb;
    color: #1d7a3a;
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-weight: 600;
    display: flex;
    gap: 12px;
    align-items: center;
}
.alert-error {
    background: #fdecec;
    border: 1px solid #f3c2c2;
    color: #b3261e;
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-weight: 600;
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Thank-you page */
.thankyou-hero { text-align: center; }
.thankyou-inner { max-width: 720px; margin: 0 auto; }
.thankyou-check {
    position: relative;
    width: 92px; height: 92px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--magenta), #6d0430);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 40px;
    box-shadow: 0 16px 40px rgba(178,14,84,.32);
    animation: tyPop .5s cubic-bezier(.2,.8,.2,1.4) both;
}
.thankyou-check i { animation: tyCheck .45s ease-out .28s both; }
.thankyou-check-ring {
    position: absolute; inset: -8px;
    border: 2px solid rgba(178,14,84,.35);
    border-radius: 50%;
    animation: tyRing 1.6s ease-out infinite;
}
@keyframes tyPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes tyCheck { from { transform: scale(0) rotate(-12deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes tyRing { 0% { transform: scale(.85); opacity: .8; } 100% { transform: scale(1.25); opacity: 0; } }
.thankyou-sub { margin: 0 auto 28px; }
.thankyou-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.thankyou-assure {
    list-style: none; margin: 30px auto 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: center;
}
.thankyou-assure li { font-size: 14px; font-weight: 600; color: var(--grey-text); display: inline-flex; align-items: center; gap: 8px; }
.thankyou-assure i { color: var(--magenta); }
.thankyou-explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.thankyou-explore-card {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--grey-border);
    border-radius: 16px;
    padding: 30px 28px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.thankyou-explore-card:hover { transform: translateY(-4px); border-color: var(--magenta); box-shadow: 0 22px 48px rgba(20,4,11,.08); }
.tec-icon {
    width: 52px; height: 52px; border-radius: 12px;
    background: #fdeef4; color: var(--magenta);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 21px; margin-bottom: 18px;
}
.thankyou-explore-card h3 { font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.thankyou-explore-card p { font-size: 14.5px; line-height: 1.7; color: var(--grey-text); margin-bottom: 18px; }
.tec-link { margin-top: auto; font-size: 13.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--magenta); display: inline-flex; align-items: center; gap: 8px; }
@media (prefers-reduced-motion: reduce) {
    .thankyou-check, .thankyou-check i, .thankyou-check-ring { animation: none; }
}
@media (max-width: 820px) {
    .thankyou-explore-grid { grid-template-columns: 1fr; }
}

/* Post page */
.post-wrap { max-width: 860px; margin: 0 auto; }
.post-meta { display: flex; gap: 20px; align-items: center; font-size: 13.5px; color: var(--grey-text); margin-bottom: 28px; flex-wrap: wrap; }
.post-meta .insight-cat { position: static; }
.post-hero-img { width: 100%; height: 440px; object-fit: cover; margin-bottom: 40px; }
.post-body p { font-size: 16.5px; line-height: 1.85; color: #3b3b3b; margin-bottom: 24px; }
.post-back { margin-top: 16px; }

/* ---- Premium editorial blog components (magazine-style) ---- */
.post-body > .lead:first-child, .post-body p.lead { font-size: 20px; line-height: 1.65; color: var(--ink); font-weight: 500; margin-bottom: 30px; }
.post-body h2 {
    font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
    font-size: 27px; line-height: 1.2; color: var(--ink); margin: 48px 0 18px; padding-top: 4px;
}
.post-body h2::before { content: ''; display: block; width: 46px; height: 3px; background: var(--magenta); margin-bottom: 16px; }
.post-body h3 { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 20px; color: var(--ink); margin: 32px 0 12px; }
.post-body ul, .post-body ol { margin: 0 0 26px; padding-left: 4px; }
.post-body li { position: relative; list-style: none; font-size: 16.5px; line-height: 1.8; color: #3b3b3b; margin-bottom: 12px; padding-left: 30px; }
.post-body ul li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--magenta); position: absolute; left: 0; top: 2px; font-size: 13px; }
.post-body ol { counter-reset: kat-ol; }
.post-body ol li::before { counter-increment: kat-ol; content: counter(kat-ol); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; background: var(--magenta); color: #fff; border-radius: 50%; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.post-body a { color: var(--magenta); text-decoration: underline; text-underline-offset: 2px; }
.post-body strong { color: var(--ink); }
.post-body blockquote {
    border-left: 4px solid var(--magenta); background: var(--grey-light);
    padding: 18px 26px; margin: 0 0 30px; border-radius: 0 12px 12px 0;
    font-size: 21px; line-height: 1.5; font-style: italic; color: var(--ink);
}
/* Key-takeaways summary box */
.post-body .key-takeaways {
    border: 1px solid var(--grey-border); border-radius: 16px; padding: 26px 30px; margin: 0 0 40px;
    background: linear-gradient(180deg, rgba(178,14,84,.035), rgba(178,14,84,0));
}
.post-body .key-takeaways .kt-label { margin: 0 0 14px; display: flex; align-items: center; gap: 10px; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink); }
.post-body .key-takeaways .kt-label::before { content: '\f0eb'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--magenta); }
.post-body .key-takeaways ul { margin: 0; }
/* Callout / definition box */
.post-body .post-callout {
    border-left: 4px solid var(--magenta); background: var(--grey-light);
    border-radius: 0 14px 14px 0; padding: 20px 26px; margin: 0 0 30px;
}
.post-body .post-callout p:last-child { margin-bottom: 0; }
/* Data tables */
.post-body table { width: 100%; border-collapse: collapse; margin: 0 0 30px; font-size: 15px; overflow: hidden; border-radius: 12px; }
.post-body thead th, .post-body thead td { background: var(--ink); color: #fff; text-align: left; padding: 13px 16px; font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: .3px; border-bottom: 0; }
.post-body td { border-bottom: 1px solid var(--grey-border); padding: 13px 16px; vertical-align: top; }
.post-body tbody tr:nth-child(even) td { background: var(--grey-light); }
.post-table-wrap { overflow-x: auto; margin-bottom: 30px; }
.post-table-wrap table { margin-bottom: 0; }

/* In-article CTA block */
.post-cta { background: linear-gradient(135deg, var(--magenta), #6d0430); color: #fff; border-radius: 22px; padding: 40px; margin: 52px 0; text-align: center; }
.post-cta h3 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 28px; color: #fff; margin: 0 0 10px; letter-spacing: .3px; }
.post-cta p { color: rgba(255,255,255,.9); font-size: 16px; margin: 0 auto 22px; max-width: 560px; }
.post-cta .cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.post-cta .cta-btns a { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 40px; font-weight: 700; font-size: 14px; letter-spacing: .3px; }
.post-cta .cta-primary { background: #fff; color: var(--magenta); }
.post-cta .cta-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.post-cta .cta-ghost:hover, .post-cta .cta-primary:hover { transform: translateY(-2px); }

/* Cluster / related cards */
.cluster-band { max-width: 1100px; margin: 0 auto; }
.cluster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.cluster-card { display: flex; flex-direction: column; border: 1px solid var(--grey-border); border-radius: 16px; overflow: hidden; background: #fff; transition: transform .25s, box-shadow .25s, border-color .25s; }
.cluster-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(20,4,11,.08); border-color: rgba(178,14,84,.35); }
.cluster-card img { width: 100%; height: 148px; object-fit: cover; }
.cluster-card .cc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cluster-card .cc-step { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--magenta); }
.cluster-card h4 { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--ink); margin: 0; }
.cluster-card.is-pillar { border-color: var(--magenta); }

/* Auto table of contents (premium, above Exiloz) */
.post-toc { border: 1px solid var(--grey-border); border-radius: 16px; padding: 22px 26px; margin: 0 0 40px; background: #fff; }
.post-toc-title { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--magenta); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.post-toc-title::before { content: '\f0ca'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.post-toc ol { counter-reset: toc; margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.post-toc li { counter-increment: toc; padding-left: 0; margin: 0; }
.post-toc li::before { content: none; }
.post-toc a { display: flex; gap: 12px; align-items: baseline; color: var(--ink); text-decoration: none; font-size: 15.5px; line-height: 1.5; transition: color .2s; }
.post-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--magenta); font-weight: 700; font-size: 13px; flex-shrink: 0; }
.post-toc a:hover { color: var(--magenta); }
.post-toc a.is-active { color: var(--magenta); font-weight: 700; }
.post-body h2, .post-body h3 { scroll-margin-top: 120px; }

/* Reading progress bar */
.post-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 10000; background: transparent; pointer-events: none; }
.post-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--magenta), #e84a8b); border-radius: 0 4px 4px 0; transition: width .1s linear; }

/* Sidebar boxes (series rail / author / share) — match the TOC card look */
.aside-box { border: 1px solid rgba(178,14,84,.18); border-radius: 16px; padding: 22px 26px; background: #fff; box-shadow: 0 10px 30px rgba(178,14,84,.05); }
.aside-box-title { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--magenta); margin: 0 0 14px; }

/* "In this series" rail */
.series-list { counter-reset: series; margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.series-list li { counter-increment: series; margin: 0; }
.series-list li > a, .series-list li > span { display: flex; gap: 12px; align-items: baseline; font-size: 14.5px; line-height: 1.5; color: var(--ink); text-decoration: none; transition: color .2s; }
.series-list li > a::before, .series-list li > span::before { content: counter(series, decimal-leading-zero); color: var(--magenta); font-weight: 700; font-size: 12px; flex-shrink: 0; }
.series-list li > a:hover { color: var(--magenta); }
.series-list li.is-current > span { color: var(--magenta); font-weight: 700; }

/* Author card */
.post-author .pa-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.post-author .pa-avatar { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }
.post-author .pa-avatar.is-logo { object-fit: contain; background: var(--grey-light); padding: 8px; }
.post-author .pa-id { display: grid; gap: 2px; }
.post-author .pa-id b { font-size: 15px; color: var(--ink); line-height: 1.3; }
.post-author .pa-id span { font-size: 12.5px; font-weight: 600; color: var(--magenta); text-transform: uppercase; letter-spacing: .6px; }
.post-author .pa-bio { font-size: 13.5px; line-height: 1.65; color: var(--grey-text); margin: 0; }

/* Share row */
.share-row { display: flex; gap: 10px; flex-wrap: wrap; }
.share-btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--grey-border); background: #fff; color: var(--ink); font-size: 16px; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.share-btn:hover { background: var(--magenta); border-color: var(--magenta); color: #fff; transform: translateY(-2px); }
.share-btn.is-copied { background: #1f9d55; border-color: #1f9d55; color: #fff; }

/* Previous / Next article */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 44px 0 8px; }
.pn-card { display: grid; gap: 7px; border: 1px solid var(--grey-border); border-radius: 16px; padding: 18px 22px; background: #fff; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.pn-card:hover { border-color: rgba(178,14,84,.45); box-shadow: 0 14px 30px rgba(178,14,84,.10); transform: translateY(-2px); }
.pn-kicker { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--magenta); display: flex; align-items: center; gap: 7px; }
.pn-title { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 15.5px; line-height: 1.4; color: var(--ink); }
.pn-prev { grid-column: 1; }
.pn-next { grid-column: 2; text-align: right; }
.pn-next .pn-kicker { justify-content: flex-end; }

/* Drop cap on the opening paragraph */
.post-body.has-dropcap > p:first-of-type::first-letter {
    font-family: 'Anton', sans-serif; font-size: 58px; line-height: .85;
    float: left; padding: 6px 12px 0 0; color: var(--magenta);
}

/* RTL flips */
[dir="rtl"] .post-body.has-dropcap > p:first-of-type::first-letter { float: right; padding: 6px 0 0 12px; }
[dir="rtl"] .pn-prev { grid-column: 1; }
[dir="rtl"] .pn-next { text-align: left; }
[dir="rtl"] .post-progress i { border-radius: 4px 0 0 4px; }

@media (prefers-reduced-motion: reduce) {
    .post-progress i, .share-btn, .pn-card { transition: none; }
}
@media (max-width: 640px) {
    .post-nav { grid-template-columns: 1fr; }
    .pn-prev, .pn-next { grid-column: auto; }
    .pn-next { text-align: left; }
    [dir="rtl"] .pn-next { text-align: right; }
    .post-body.has-dropcap > p:first-of-type::first-letter { font-size: 46px; }
}

/* In-content images between paragraphs */
.post-body .post-figure { margin: 8px 0 34px; }
.post-body .post-figure img { width: 100%; height: auto; border-radius: 16px; display: block; box-shadow: 0 16px 40px rgba(20,4,11,.08); }
.post-body .post-figure figcaption { margin-top: 12px; font-size: 13.5px; color: var(--grey-text); text-align: center; font-style: italic; }

/* Blog FAQ section (reuses .faq-item styling) */
.post-faq { max-width: 860px; margin: 44px auto 0; }
.post-faq > h2 { font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; font-size: 27px; color: var(--ink); margin: 0 0 22px; }
.post-faq > h2::before { content: ''; display: block; width: 46px; height: 3px; background: var(--magenta); margin-bottom: 16px; }

/* Two-column article layout — fills the side space. The aside itself scrolls
   (series/author/share pass by); only its LAST block (.aside-sticky: TOC +
   quote card) pins while reading. A fully-sticky aside taller than the
   viewport would pin its lower cards permanently out of reach. */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 60px; max-width: 1300px; margin: 0 auto; align-items: start; }
.post-main { min-width: 0; max-width: 820px; }
.post-aside { display: flex; flex-direction: column; gap: 20px; align-self: stretch; } /* full row height = travel room for the sticky block */
.aside-sticky { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }
.post-aside .post-toc { margin: 0; }
/* TOC: rose numbering + rose active edge */
.post-toc { border-color: rgba(178,14,84,.18); box-shadow: 0 10px 30px rgba(178,14,84,.05); }
/* Sidebar CTA card — brand rose */
.aside-card { border: 0; border-radius: 20px; padding: 30px 26px; background: linear-gradient(160deg, var(--magenta), #6d0430); color: #fff; box-shadow: 0 20px 44px rgba(178,14,84,.28); }
.aside-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.75); }
.aside-card h3 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 26px; color: #fff; margin: 10px 0 8px; letter-spacing: .3px; }
.aside-card p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.9); margin: 0 0 20px; }
.aside-quote { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; background: #fff !important; color: var(--magenta) !important; }
.aside-line { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-radius: 11px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #fff; font-weight: 600; font-size: 14px; margin-top: 9px; transition: background .2s, transform .2s; }
.aside-line i { width: 18px; text-align: center; color: #fff; }
.aside-line:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); color: #fff; }

@media (max-width: 1040px) {
    .post-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 820px; }
    .post-main { max-width: none; }
    .post-aside { position: static; }
    .post-aside .post-toc { display: none; } /* redundant on a single column */
}
@media (max-width: 600px) {
    .post-body h2, .post-faq > h2 { font-size: 23px; }
    .post-cta { padding: 30px 22px; }
    .post-toc { padding: 18px 20px; }
    .post-main .post-hero-img { height: 240px; }
}

/* Search results */
.result-list { display: flex; flex-direction: column; gap: 18px; max-width: 860px; }
.result-item {
    border: 1px solid var(--grey-border);
    padding: 24px 28px;
    background: #fff;
    transition: border-color .2s, transform .2s;
    display: block;
}
.result-item:hover { border-color: var(--magenta); transform: translateX(5px); }
.result-item h3 { font-family: 'Oswald', sans-serif; font-size: 18px; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.result-item h3 span { font-size: 11px; letter-spacing: 1.5px; color: var(--magenta); margin-left: 12px; }
.result-item p { font-size: 14px; color: var(--grey-text); line-height: 1.6; }
.no-results { font-size: 17px; color: var(--grey-text); }

/* Reveal-on-scroll — smooth ease-out-expo curve for a premium settle */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Staggered cascade for card grids inside a revealed section — the section
   fades in, then its cards settle one after another for a high-end feel. */
.reveal .sub-grid > *,
.reveal .industry-grid > *,
.reveal .value-grid > *,
.reveal .insight-grid > *,
.reveal .job-grid > *,
.reveal .services-grid > *,
.reveal .faq-wrap > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s cubic-bezier(.16, 1, .3, 1), transform .55s cubic-bezier(.16, 1, .3, 1);
}
.reveal.visible .sub-grid > *,
.reveal.visible .industry-grid > *,
.reveal.visible .value-grid > *,
.reveal.visible .insight-grid > *,
.reveal.visible .job-grid > *,
.reveal.visible .services-grid > *,
.reveal.visible .faq-wrap > * { opacity: 1; transform: none; }

.reveal.visible :is(.sub-grid, .industry-grid, .value-grid, .insight-grid, .job-grid, .services-grid, .faq-wrap) > *:nth-child(1) { transition-delay: .04s; }
.reveal.visible :is(.sub-grid, .industry-grid, .value-grid, .insight-grid, .job-grid, .services-grid, .faq-wrap) > *:nth-child(2) { transition-delay: .10s; }
.reveal.visible :is(.sub-grid, .industry-grid, .value-grid, .insight-grid, .job-grid, .services-grid, .faq-wrap) > *:nth-child(3) { transition-delay: .16s; }
.reveal.visible :is(.sub-grid, .industry-grid, .value-grid, .insight-grid, .job-grid, .services-grid, .faq-wrap) > *:nth-child(4) { transition-delay: .22s; }
.reveal.visible :is(.sub-grid, .industry-grid, .value-grid, .insight-grid, .job-grid, .services-grid, .faq-wrap) > *:nth-child(5) { transition-delay: .28s; }
.reveal.visible :is(.sub-grid, .industry-grid, .value-grid, .insight-grid, .job-grid, .services-grid, .faq-wrap) > *:nth-child(6) { transition-delay: .34s; }
.reveal.visible :is(.sub-grid, .industry-grid, .value-grid, .insight-grid, .job-grid, .services-grid, .faq-wrap) > *:nth-child(n+7) { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
    .reveal .sub-grid > *, .reveal .industry-grid > *, .reveal .value-grid > *,
    .reveal .insight-grid > *, .reveal .job-grid > *, .reveal .services-grid > *,
    .reveal .faq-wrap > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================
   17b. Premium / Trust layer
   ============================================ */

/* Sticky compact header — pins to the top on every viewport; the approvals
   bar above it scrolls away, then the header shrinks (body.scrolled). */
.main-header {
    position: sticky;
    top: 0;
    transition: height .32s cubic-bezier(.22,.61,.36,1), box-shadow .32s;
}
body.scrolled .main-header {
    height: 80px;
    box-shadow: 0 6px 26px rgba(20, 4, 11, .1);
}
.logo-crop { transition: transform .32s cubic-bezier(.22,.61,.36,1); transform-origin: left center; }
body.scrolled .logo-crop { transform: scale(.86); }

/* Floating premium contact button + people panel */
.float-contact {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}
.float-fab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 58px;
    padding: 0 22px;
    border: 0;
    cursor: pointer;
    border-radius: 40px;
    background: linear-gradient(135deg, var(--magenta), #90003b);
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .3px;
    box-shadow: 0 12px 30px rgba(178, 14, 84, .36);
    transition: transform .25s, box-shadow .25s, padding .2s;
    position: relative;
}
.float-fab::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 40px;
    box-shadow: 0 0 0 0 rgba(178, 14, 84, .42);
    animation: katFabPulse 2.6s ease-out infinite;
    pointer-events: none;
}
@keyframes katFabPulse { to { box-shadow: 0 0 0 18px rgba(178, 14, 84, 0); } }
.float-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(178, 14, 84, .46); color: #fff; }
.float-fab-icon, .float-fab-close { font-size: 21px; line-height: 1; }
/* Scoped to .float-fab so it outranks Font Awesome's `.fa-solid{display:inline-block}`
   (same single-class specificity, but all.min.css loads after the theme CSS) — else
   the fa-xmark close icon shows next to the headset while the FAB is closed. */
.float-fab .float-fab-close { display: none; }
.float-fab-label { white-space: nowrap; }
.float-contact[data-open="true"] .float-fab { padding: 0; width: 58px; justify-content: center; }
.float-contact[data-open="true"] .float-fab::before { animation: none; }
.float-contact[data-open="true"] .float-fab-icon,
.float-contact[data-open="true"] .float-fab-label { display: none; }
.float-contact[data-open="true"] .float-fab-close { display: inline-block; }

/* People panel */
.float-panel {
    width: 320px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,.24);
    overflow: hidden;
    transform-origin: bottom right;
    animation: katPanelIn .22s ease;
}
@keyframes katPanelIn { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.float-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 18px;
    background: linear-gradient(135deg, var(--magenta), #90003b);
    color: #fff;
}
.float-panel-title { font-weight: 800; font-size: 15px; }
.float-panel-close {
    border: 0;
    background: rgba(255,255,255,.16);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.float-panel-close:hover { background: rgba(255,255,255,.3); }
.float-people {
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 60vh;
    overflow-y: auto;
}
.float-person {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
}
.float-person + .float-person { border-top: 1px solid var(--grey-border); }
.fp-id { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; line-height: 1.2; }
.fp-name { font-weight: 700; color: var(--ink); font-size: 15px; }
.fp-role { font-size: 12.5px; color: var(--magenta); font-weight: 600; white-space: nowrap; }
.fp-btn {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
    transition: transform .2s;
}
.fp-btn:hover { transform: translateY(-2px) scale(1.05); color: #fff; }
.fp-wa { background: #25d366; }
.fp-call { background: linear-gradient(135deg, var(--magenta), #90003b); font-size: 15px; }

/* Client logo strip */
.client-strip {
    background: #fff;
    border-bottom: 1px solid var(--grey-border);
    padding: 14px 0;
}
.client-strip .brand-marquee {
    max-width: 1320px;
    margin: 0 auto;
}
.client-strip .brand-logo img {
    height: 42px;
    max-width: 150px;
    filter: none;
    opacity: 1;
}
.client-strip .brand-logo:hover img {
    filter: none;
    opacity: 1;
}

/* Trust band */
.trust-band {
    background: var(--white);
    border-bottom: 1px solid var(--grey-border);
    padding: 26px 0;
}
.trust-band-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
.trust-item {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    font-weight: 700;
    color: #2c2c2c;
    letter-spacing: .3px;
}
.trust-item i {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fdeef4;
    color: var(--magenta);
    font-size: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.trust-item small { display: block; font-size: 12px; font-weight: 500; color: var(--grey-text); letter-spacing: .2px; }

/* Brand strip -> marquee */
.brand-marquee { overflow: hidden; width: 100%; position: relative; }
.brand-marquee::before,
.brand-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 90px;
    z-index: 2;
    pointer-events: none;
}
.brand-marquee::before { left: 0; background: linear-gradient(to right, #fff, transparent); }
.brand-marquee::after { right: 0; background: linear-gradient(to left, #fff, transparent); }
.brand-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: marquee 38s linear infinite;
}
.brand-marquee:hover .brand-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.brand-track .brand-logo { flex: 0 0 auto; padding: 14px 44px; }
.brand-track .brand-logo + .brand-logo { border-left: 1px solid var(--grey-border); }

/* Testimonials: Google review styling */
.testimonial-author { display: flex; align-items: center; gap: 14px; }
.testimonial-author > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.review-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--magenta), #90003b);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: .5px;
}
.review-source {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--grey-border);
    width: 100%;
    font-size: 12.5px;
    color: var(--grey-text);
    font-weight: 500;
}
.review-source i { font-size: 14px; }
.g-blue { color: #4285f4; }

/* Featured case study (work page) */
.case-study {
    background: var(--ink);
    color: #fff;
    overflow: hidden;
}
.case-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: center;
}
.case-media { position: relative; }
.case-media img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
}
.case-tag {
    position: absolute;
    top: 22px;
    left: 22px;
    background: var(--magenta);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 8px 16px;
}
.case-content .kicker { color: #ff8fbe; }
.case-content .section-title { color: #fff; }
.case-content p { color: #c9c9c9; line-height: 1.75; margin: 18px 0 26px; }
.case-stats { display: flex; gap: 0; margin-bottom: 30px; flex-wrap: wrap; }
.case-stat { padding: 0 30px; border-left: 2px solid rgba(255,255,255,.14); }
.case-stat:first-child { padding-left: 0; border-left: none; }
.case-stat strong {
    display: block;
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 40px;
    color: #ff8fbe;
    line-height: 1.1;
}
.case-stat span { font-size: 12.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #9a9a9a; }

/* Result metric chip on work cards */
.work-metric {
    position: absolute;
    top: 18px;
    right: 18px;
    background: rgba(255,255,255,.94);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 22px;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
    letter-spacing: .3px;
}
.work-metric i { color: var(--magenta); margin-right: 6px; }

/* Process steps band */
.process-band { padding: 84px 0; background: var(--grey-light); border-bottom: 1px solid var(--grey-border); }
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin-top: 50px;
}
.process-step { position: relative; background: #fff; border: 1px solid var(--grey-border); padding: 34px 30px; transition: transform .25s, box-shadow .25s; }
.process-step:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(20,4,11,.08); }
/* <details>/<summary> normalization — render as a plain card on desktop (no disclosure marker) */
.process-step > summary { list-style: none; display: block; cursor: default; }
.process-step > summary::-webkit-details-marker { display: none; }
.process-num {
    font-family: 'Anton', sans-serif;
    font-size: 54px;
    line-height: 1;
    background: linear-gradient(120deg, #f3cfe0, #fbeaf2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute;
    top: 20px;
    right: 24px;
}
.process-step i {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #fdeef4;
    color: var(--magenta);
    font-size: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.process-step h3 { font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 600; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
.process-step p { font-size: 14px; line-height: 1.65; color: var(--grey-text); }

/* Reassurance row under CTAs */
.assure-row {
    display: flex;
    gap: 22px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.assure-row span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
}
.assure-row i { color: var(--magenta); font-size: 13px; }

/* FAQ accordion — premium card + circular toggle + JS height animation */
.faq-wrap { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
    position: relative;
    border: 1px solid var(--grey-border);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .3s, box-shadow .3s, transform .3s;
}
.faq-item:hover { border-color: rgba(178,14,84,.32); box-shadow: 0 10px 28px rgba(20,4,11,.06); }
.faq-item[open] { border-color: rgba(178,14,84,.5); box-shadow: 0 18px 44px rgba(20,4,11,.10); }
/* magenta accent that grows down the left edge when open */
.faq-item::before {
    content: '';
    position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
    background: linear-gradient(180deg, var(--magenta), #7a0836);
    transform: scaleY(0); transform-origin: top;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.faq-item[open]::before { transform: scaleY(1); }
[dir="rtl"] .faq-item::before { left: auto; right: 0; }

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 26px;
    font-family: 'Oswald', sans-serif;
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    transition: color .25s;
}
.faq-item summary:hover, .faq-item[open] summary { color: var(--magenta); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    flex-shrink: 0;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 26px; line-height: 1;
    color: var(--magenta);
    border: 1.5px solid rgba(178,14,84,.3);
    border-radius: 50%;
    transition: transform .4s cubic-bezier(.16, 1, .3, 1), background .25s, color .25s, border-color .25s;
}
.faq-item summary:hover::after { background: rgba(178,14,84,.08); }
.faq-item[open] summary::after {
    transform: rotate(135deg);
    background: var(--magenta); color: #fff; border-color: var(--magenta);
}
.faq-item .faq-body {
    padding: 0 26px 24px;
    font-size: 15.5px; line-height: 1.8; color: var(--grey-text);
    overflow: hidden;
    transition: height .38s cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
    .faq-item .faq-body { transition: none !important; }
    .faq-item::before { transition: none !important; }
}

/* ============================================
   17c. Conversion components
   ============================================ */

/* Top-bar callback + language buttons */
.callback-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid #d9d9d9;
    border-radius: 18px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: #222;
    cursor: pointer;
    transition: all .2s;
}
.callback-trigger:hover { border-color: var(--magenta); color: var(--magenta); }
.callback-trigger i { font-size: 12px; }
.lang-toggle {
    font-weight: 700;
    font-size: 13px;
    color: var(--magenta) !important;
    padding: 4px 2px;
}
.lang-toggle:hover { text-decoration: underline; }

/* Modals */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 2, 8, .62);
    backdrop-filter: blur(3px);
    z-index: 110;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility .25s;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-box {
    background: #fff;
    width: min(440px, 100%);
    padding: 42px 38px 34px;
    position: relative;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
    border-top: 4px solid var(--magenta);
    transform: translateY(18px) scale(.97);
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.modal-overlay.open .modal-box { transform: none; }
.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--grey-light);
    color: #444;
    font-size: 16px;
    cursor: pointer;
    transition: background .2s, color .2s;
}
[dir="rtl"] .modal-close { right: auto; left: 14px; }
.modal-close:hover { background: var(--magenta); color: #fff; }
.modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fdeef4;
    color: var(--magenta);
    font-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.modal-box h3 {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 26px;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 10px;
}
.modal-box > p { font-size: 14.5px; color: var(--grey-text); line-height: 1.6; margin-bottom: 22px; }
.modal-form .form-group { margin-bottom: 14px; }
.modal-form input {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    padding: 13px 16px;
    border: 1.5px solid var(--grey-border);
    border-radius: 6px;
    background: var(--grey-light);
    outline: none;
    transition: border-color .2s;
}
.modal-form input:focus { border-color: var(--magenta); background: #fff; }
.exit-kicker { font-size: 12px; font-weight: 700; letter-spacing: 2.5px; color: var(--magenta); margin-bottom: 8px; }
.exit-wa {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    font-size: 14px;
    font-weight: 600;
    color: #1faa53;
}
.exit-wa:hover { text-decoration: underline; color: #1faa53; }
.exit-wa i { font-size: 18px; }

/* Quote wizard */
.wizard-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 32px;
}
.wizard-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.wizard-dot span {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--grey-border);
    background: #fff;
    color: #999;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s;
}
.wizard-dot small { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #999; }
.wizard-dot.active span { border-color: var(--magenta); background: var(--magenta); color: #fff; box-shadow: 0 6px 16px rgba(178,14,84,.3); }
.wizard-dot.active small { color: var(--magenta); }
.wizard-dot.done span { border-color: var(--magenta); color: var(--magenta); }
.wizard-line { flex: 1; height: 2px; background: var(--grey-border); margin-bottom: 18px; }
.wizard-step { display: none; }
.wizard-step.active { display: block; animation: fadeUp .35s ease both; }
.wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    gap: 16px;
}
.btn-outline-dark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid #cfcfcf;
    background: #fff;
    color: #333;
    padding: 13px 26px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .2s;
}
.btn-outline-dark:hover { border-color: var(--magenta); color: var(--magenta); }

.service-pick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.service-pick { position: relative; } /* contain the hidden input — without this it resolves against the card and overflows the viewport */
.service-pick input { position: absolute; opacity: 0; pointer-events: none; }
.service-pick input:focus-visible + span { border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(178, 14, 84, .18); }
.service-pick span {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1.5px solid var(--grey-border);
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: all .2s;
    background: var(--grey-light);
}
.service-pick span img { width: 24px; height: 24px; }
.service-pick:hover span { border-color: #e0a9c2; }
.service-pick input:checked + span {
    border-color: var(--magenta);
    background: #fdf3f7;
    box-shadow: 0 4px 14px rgba(178,14,84,.12);
}
.field-error .service-pick span { border-color: #e05a5a; }

/* Pricing table */
.price-table-wrap { overflow-x: auto; border: 1px solid var(--grey-border); }
.price-table { width: 100%; border-collapse: collapse; background: #fff; }
.price-table th {
    background: var(--ink);
    color: #fff;
    text-align: left;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 16px 22px;
}
.price-table td { padding: 17px 22px; border-top: 1px solid var(--grey-border); font-size: 14.5px; color: #444; vertical-align: top; }
.price-table tbody tr:hover { background: #fdf8fa; }
.price-table .price-range { color: var(--magenta); font-weight: 700; white-space: nowrap; }
.price-note { margin-top: 18px; font-size: 13.5px; color: var(--grey-text); display: flex; gap: 10px; align-items: baseline; }
.price-note i { color: var(--magenta); }

/* Map + reviews */
.map-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 30px;
    align-items: stretch;
}
.map-frame { border: 1px solid var(--grey-border); border-radius: 16px; overflow: hidden; min-height: 400px; box-shadow: 0 18px 44px rgba(20,4,11,.08); }
.map-frame iframe { width: 100%; height: 100%; min-height: 400px; border: 0; display: block; filter: grayscale(.15) contrast(1.04); }
.reviews-card {
    background: linear-gradient(160deg, var(--magenta), #6d0430);
    border: 0;
    border-radius: 16px;
    padding: 40px 34px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #fff;
    box-shadow: 0 22px 50px rgba(178,14,84,.28);
}
.reviews-score { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.reviews-num { font-family: 'Anton', sans-serif; font-size: 60px; line-height: 1; color: #fff; }
.reviews-card .stars { color: #ffce54; margin-bottom: 4px; }
.reviews-score p { font-size: 13px; color: rgba(255,255,255,.82); margin-top: 4px; }
.reviews-blurb { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.9); margin-bottom: 24px; flex: 1; }
/* buttons/links must invert on the rose card (the rose btn-gradient would vanish) */
.reviews-card .btn-gradient { background: #fff; color: var(--magenta); box-shadow: none; }
.reviews-card .btn-gradient:hover { background: #fff; color: #6d0430; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.22); }
.reviews-card .card-link { color: #fff; }
.reviews-card .card-link:hover { color: #ffd0e2; }

/* Footer areas row */
.footer-areas { border-top: 1px solid #2c2c2c; padding: 18px 0; }
.footer-areas-inner {
    display: flex;
    align-items: center;
    gap: 8px 22px;
    flex-wrap: wrap;
    font-size: 13px;
}
.footer-areas-label { font-weight: 700; color: #fff; display: inline-flex; gap: 8px; align-items: center; }
.footer-areas-label i { color: var(--magenta); }
.footer-areas-inner a { color: #a9a9a9; transition: color .2s; }
.footer-areas-inner a:hover { color: #fff; }
.footer-areas-all { color: var(--magenta) !important; font-weight: 700; }

/* RTL adjustments (layout largely flips automatically via flex/grid) */
/* The hero collage geometry and marquee are direction-locked */
[dir="rtl"] .hero-section { direction: ltr; }
[dir="rtl"] .brand-track { direction: ltr; }
[dir="rtl"] .approvals-bar-list { direction: ltr; }
/* ...but the hero copy itself reads right-to-left */
[dir="rtl"] .hero-content { direction: rtl; text-align: right; }
/* The text column's right edge overlaps the (wider) image column. In LTR the
   left-aligned copy never reaches it; in RTL the right-aligned title + CTA sit
   ON the image. Pad the copy off the overlap on desktop (hero stacks < 993px). */
@media (min-width: 993px) {
    [dir="rtl"] .hero-content { padding-right: 72px; }
}

/* Arabic typography: Cairo replaces Anton/Oswald/Inter (no Arabic glyphs),
   tracking removed (letter-spacing breaks Arabic script joins) */
[dir="rtl"] * { letter-spacing: 0 !important; }
[dir="rtl"] body { font-family: 'Cairo', 'Inter', sans-serif; }
[dir="rtl"] .main-title,
[dir="rtl"] .section-title,
[dir="rtl"] .page-title,
[dir="rtl"] .cta-title,
[dir="rtl"] .search-label,
[dir="rtl"] .modal-box h3,
[dir="rtl"] .badge-num,
[dir="rtl"] .counter-num, [dir="rtl"] .counter-suffix,
[dir="rtl"] .case-stat strong,
[dir="rtl"] .reviews-num,
[dir="rtl"] .process-num,
[dir="rtl"] .form-panel h3 {
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
}
[dir="rtl"] .service-card h3, [dir="rtl"] .work-overlay h3, [dir="rtl"] .insight-body h3,
[dir="rtl"] .job-card h3, [dir="rtl"] .process-step h3, [dir="rtl"] .value-card h3,
[dir="rtl"] .industry-card h3, [dir="rtl"] .faq-item summary, [dir="rtl"] .footer-col h4,
[dir="rtl"] .timeline-item h4, [dir="rtl"] .result-item h3, [dir="rtl"] .hero-count {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
}
/* Arabic display sizes: slightly smaller, taller line-height */
[dir="rtl"] .main-title { font-size: clamp(44px, 5.6vw, 104px); line-height: 1.3; }
[dir="rtl"] .page-title { line-height: 1.35; }
[dir="rtl"] .section-title, [dir="rtl"] .cta-title { line-height: 1.4; }
[dir="rtl"] .title-through { padding-bottom: 6px; }

/* mirrored details */
[dir="rtl"] .nav-icon { margin-right: 0; margin-left: 12px; }
[dir="rtl"] .small-arrow { margin-left: 0; margin-right: 10px; }
[dir="rtl"] .top-left i { margin-right: 0; margin-left: 10px; }
[dir="rtl"] .dropdown-menu { left: auto; right: -16px; }
/* The 290px service dropdowns are wider than their triggers; on the leftmost nav item
   the RTL menu spills past the left viewport edge and creates horizontal scroll even
   while hidden. Clip it at the root (clip preserves sticky positioning). */
html[dir="rtl"] { overflow-x: clip; }
[dir="rtl"] .dropdown-menu ul li a:hover { padding-left: 22px; padding-right: 26px; }
[dir="rtl"] .footer-col h4::after { left: auto; right: 0; }
[dir="rtl"] .footer-col ul a:hover { padding-left: 0; padding-right: 5px; }
[dir="rtl"] .timeline::before { left: auto; right: 9px; }
[dir="rtl"] .timeline-item { padding: 0 42px 30px 0; }
[dir="rtl"] .timeline-item::before { left: auto; right: 0; }
[dir="rtl"] .timeline-item h4 span { margin-right: 0; margin-left: 10px; }
[dir="rtl"] .result-item:hover { transform: translateX(-5px); }
[dir="rtl"] .service-item-tile:hover { transform: translateX(-4px); }
[dir="rtl"] .media-frame { clip-path: polygon(0 0, 94% 0, 100% 100%, 6% 100%); }
[dir="rtl"] .price-table th { text-align: right; }
[dir="rtl"] .kicker::before { order: 2; }
[dir="rtl"] .main-nav a.active::after,
[dir="rtl"] .main-nav a::after { transform-origin: right; }
[dir="rtl"] .float-contact { right: auto; left: 26px; align-items: flex-start; }
[dir="rtl"] .float-panel { transform-origin: bottom left; }
/* Emaar-style about: put the founder photo on the right in RTL */
[dir="rtl"] .founder-feature { direction: rtl; }
[dir="rtl"] .founder-feature-media { order: 2; }
[dir="rtl"] .founder-feature-copy { order: 1; }
[dir="rtl"] .founder-feature-media::after { background: linear-gradient(270deg, transparent 60%, rgba(26,26,26,.55)); }
[dir="rtl"] .founder-feature-attr { padding-left: 0; padding-right: 18px; border-left: 0; border-right: 3px solid var(--magenta); }
[dir="rtl"] .pillar-num { right: auto; left: 30px; }

/* ============================================
   17. Responsive
   ============================================ */
/* Short desktop screens: tighten the hero so it fits with less scrolling */
@media (max-height: 840px) and (min-width: 993px) {
    .hero-section { min-height: 640px; }
    .subtitle { font-size: 19px; margin-bottom: 8px; }
    .main-title { font-size: clamp(50px, 5.8vw, 108px); margin-bottom: 12px; }
    .description { font-size: 14.5px; margin-bottom: 18px; }
    .stats-container { margin-bottom: 24px; }
    .stat-icon { width: 48px; height: 48px; }
    .btn-hero { padding: 15px 30px; }
    .circle-btn { width: 46px; height: 46px; }
}

@media (max-width: 1400px) {
    .main-nav ul { gap: 22px; }
    .service-list > li > a { font-size: 12.5px; }
}

@media (max-width: 1200px) {
    .service-category-bar { display: none; }
    .main-nav ul { gap: 16px; }
    .hero-content { min-width: 0; width: 48%; }
    .services-grid, .testimonial-grid, .insight-grid, .values-grid { grid-template-columns: repeat(2, 1fr); }
    .industry-grid { grid-template-columns: repeat(2, 1fr); }
    .about-capability-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Collapse the full desktop nav + CTA cluster into the hamburger before
   they run out of horizontal room (prevents header overflow on laptops,
   browser zoom, and 125–150% OS scaling). */
@media (max-width: 1280px) {
    .main-nav, .header-cta { display: none; }
    .hamburger { display: flex; }
    .mobile-menu { display: flex; }
    .mobile-backdrop { display: block; }
}

@media (max-width: 992px) {
    .hero-section { height: auto; min-height: 0; max-height: none; display: block; }
    .hero-inner {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        padding-bottom: 0;
    }
    .hero-content { width: 100%; padding: 40px 0 28px; }
    /* Image becomes a full-width banner below the copy; reset desktop offsets */
    .hero-collage {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: 16 / 11;
        border-left: none;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 18px 40px -18px rgba(17, 17, 17, .35);
    }
    /* CTA overlaid on the bottom of the hero image as one unit */
    .hero-collage .hero-actions {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin: 0;
        padding: 44px 22px 22px;
        background: linear-gradient(to top, rgba(17, 17, 17, .72) 0%, rgba(17, 17, 17, .35) 55%, transparent 100%);
    }
    .hero-collage .hero-actions .btn-hero {
        padding: 14px 26px;
        font-size: 14px;
        white-space: nowrap;
    }
    .hero-collage .hero-actions .hero-count { color: #fff; }
    .hero-collage .hero-actions .hero-count em { color: rgba(255, 255, 255, .65); }
    .hero-collage .hero-actions .hero-bar { background: rgba(255, 255, 255, .3); }
    /* lift the slide dots above the CTA scrim */
    .hero-collage .hero-slide-dots { bottom: 78px; }
    .hero-bg-pattern { bottom: 0; }
    /* Hide the four trust badges on mobile (they stacked tall and left a big
       white gap); the sliding brand marquee stays. */
    .trust-band { display: none; }
    .brand-strip { position: relative; height: auto; }
    .brand-strip-inner { flex-wrap: wrap; }
    .brand-logo { flex: 1 1 25%; }
    .brand-logo + .brand-logo { border-left: none; }
    .split-grid, .contact-grid { grid-template-columns: 1fr; gap: 44px; }
    .steps-grid { grid-template-columns: 1fr; gap: 18px; }
    /* Contact hero stacks on mobile */
    .contact-hero-inner { grid-template-columns: 1fr; gap: 34px; }
    .contact-hero-bg { object-position: 72% center; }
    .contact-hero-actions .btn-gradient, .contact-hero-actions .btn-outline-dark { flex: 1 1 auto; justify-content: center; }
    .contact-hero-facts { border-left: none; padding-left: 0; gap: 14px; }
    [dir="rtl"] .contact-hero-facts { border-right: none; padding-right: 0; }
    /* Tighter service sections on mobile — 6 of these stack up fast */
    .service-section-grid { grid-template-columns: 1fr; gap: 26px; }
    .service-section { padding: 46px 0; }
    .service-section .lead { margin-top: 12px; }
    .service-items-grid { margin: 20px 0 22px; }
    .service-media img { height: 240px; }
    .about-overview-grid, .about-photo-grid { grid-template-columns: 1fr; gap: 44px; }
    .founder-panel { position: relative; top: auto; }
    .about-photo img { height: 420px; }
    /* Premium about: stack the founder band + pillar cards */
    .founder-feature { grid-template-columns: 1fr; }
    /* image is landscape (1600x712); show it whole instead of cropping to a portrait box */
    .founder-feature-media { min-height: 0; aspect-ratio: auto; }
    .founder-feature-media img { position: relative; height: auto; object-fit: contain; }
    .founder-feature-media::after { display: none; }
    .founder-feature-copy { padding: 52px 24px; max-width: none; }
    .pillar-grid { grid-template-columns: 1fr; gap: 20px; max-width: 520px; margin-inline: auto; }
    .about-intro { padding: 72px 0; }
    /* New about sections on mobile */
    .about-creds-grid { grid-template-columns: 1fr 1fr; }
    .about-cred { padding: 30px 18px; }
    .about-cred:nth-child(2) { border-left: none; }
    .about-cred:nth-child(3), .about-cred:nth-child(4) { border-top: 1px solid rgba(255,255,255,.10); }
    [dir="rtl"] .about-cred:nth-child(2) { border-right: none; }
    .about-cred strong { font-size: 30px; }
    .about-cap-grid { grid-template-columns: 1fr; gap: 32px; }
    .about-cap-intro .section-title { text-align: left; }
    .about-cap-list { grid-template-columns: 1fr; gap: 14px; }
    .about-cta-inner { flex-direction: column; align-items: flex-start; gap: 26px; }
    .about-cta-actions { width: 100%; }
    .about-cta-actions .btn-gradient, .about-cta-actions .btn-outline-dark { flex: 1 1 auto; justify-content: center; }
    /* Logo sits in this frame; keep it compact on mobile so it doesn't leave
       a tall empty white block. */
    .media-frame img { height: 220px; object-fit: contain; background: #fff; }
    .counter-grid { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
    .counter-item:nth-child(3) { border-left: none; }
    .work-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .section { padding: 68px 0; }
}

@media (max-width: 992px) and (min-width: 0px) {
    .case-grid { grid-template-columns: 1fr; gap: 40px; }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-band-inner { justify-content: center; }
    .map-grid { grid-template-columns: 1fr; }
    .callback-trigger span { display: none; }
}

@media (max-width: 600px) {
    .container { padding: 0 24px; }
    /* iOS Safari zooms the page when a focused input is < 16px — force 16px on mobile */
    input, select, textarea { font-size: 16px !important; }
    .float-contact { right: 16px; bottom: 16px; }
    .float-fab { height: 52px; font-size: 14px; }
    .float-contact[data-open="true"] .float-fab { width: 52px; }
    /* Process steps become a compact accordion on mobile (shorter page) */
    .process-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 30px; }
    .process-step { padding: 0; }
    .process-step:hover { transform: none; box-shadow: none; }
    .process-step > summary {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 18px;
        position: relative;
    }
    .process-step > summary::after {
        content: '\f078';                 /* fa chevron-down */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        margin-left: auto;
        color: var(--magenta);
        font-size: 13px;
        transition: transform .25s;
    }
    [dir="rtl"] .process-step > summary::after { margin-left: 0; margin-right: auto; }
    .process-step[open] > summary::after { transform: rotate(180deg); }
    .process-step .process-num {
        position: static;
        font-size: 26px;
        flex: 0 0 auto;
        line-height: 1;
    }
    .process-step summary i { width: 40px; height: 40px; font-size: 16px; border-radius: 10px; margin-bottom: 0; flex: 0 0 auto; }
    .process-step summary h3 { margin-bottom: 0; font-size: 15px; }
    .process-step p { padding: 0 18px 18px; margin: 0; }
    /* Service item tiles: cap to 6 on mobile with a "show all" toggle (much shorter page) */
    .service-items-grid.is-collapsed .service-item-tile:nth-child(n+7) { display: none; }
    .service-items-toggle {
        grid-column: 1 / -1;
        appearance: none;
        background: #fff;
        border: 1px solid var(--magenta);
        color: var(--magenta);
        font-family: 'Oswald', sans-serif;
        font-weight: 600;
        font-size: 13px;
        letter-spacing: .5px;
        text-transform: uppercase;
        padding: 13px 18px;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .service-items-toggle i { transition: transform .25s; }
    .service-items-grid:not(.is-collapsed) .service-items-toggle i { transform: rotate(180deg); }
    /* Insights: cap to 4 cards on mobile with a "view all" toggle */
    .insight-grid.is-collapsed .insight-card:nth-child(n+5) { display: none; }
    .insight-grid-toggle {
        appearance: none;
        background: #fff;
        border: 1px solid var(--magenta);
        color: var(--magenta);
        font-family: 'Oswald', sans-serif;
        font-weight: 600;
        font-size: 13px;
        letter-spacing: .5px;
        text-transform: uppercase;
        padding: 14px 18px;
        border-radius: 6px;
        cursor: pointer;
        width: 100%;
        margin-top: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .insight-grid-toggle i { transition: transform .25s; }
    .insight-grid-toggle.is-open i { transform: rotate(180deg); }
    .case-media img { height: 280px; }
    .case-stat { padding: 0 18px; }
    .service-pick-grid { grid-template-columns: 1fr; }
    .wizard-dot small { display: none; }
    .wizard-nav { flex-wrap: wrap; }
    .callback-trigger { padding: 6px 10px; font-size: 0; gap: 0; }
    .callback-trigger i { font-size: 14px; }
    .modal-box { padding: 34px 24px 28px; }
    /* Stacked card layout — avoids a 4-col table overflowing the viewport */
    .price-table-wrap { overflow-x: visible; border: none; }
    .price-table, .price-table tbody, .price-table tr, .price-table td { display: block; width: 100%; }
    .price-table thead { display: none; }
    .price-table tr {
        border: 1px solid var(--grey-border);
        border-radius: 12px;
        margin-bottom: 14px;
        padding: 6px 0;
        background: #fff;
    }
    .price-table td {
        border-top: none;
        padding: 8px 18px;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        gap: 16px;
        text-align: right;
    }
    .price-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--ink);
        text-align: left;
        flex: 0 0 auto;
    }
    .price-table td[data-label="Factors"] { flex-direction: column; text-align: left; }
    .price-table td[data-label="Service"] strong { font-size: 15px; }
    .top-micro-header { font-size: 12px; }
    .top-left a:nth-child(3) { display: none; }
    .top-divider { display: none; }
    .subtitle { font-size: 19px; }
    /* Neutralise the hero copy line-break on mobile without gluing words
       together (renders as a normal space instead of removing the break). */
    .description br { display: inline; }
    .description br::after { content: " "; white-space: pre; }
    .stats-container { gap: 20px; }
    .hero-actions { flex-wrap: wrap; gap: 20px; }
    .brand-logo { flex: 1 1 50%; }
    .services-grid, .testimonial-grid, .insight-grid, .industry-grid, .values-grid, .about-capability-grid { grid-template-columns: 1fr; }
    .about-statement { padding: 56px 0; }
    .about-statement h2 { font-size: 32px; }
    .about-capability-grid article { min-height: 0; padding: 26px; }
    .about-photo img { height: 300px; }
    .counter-grid { grid-template-columns: 1fr 1fr; }
    .counter-item + .counter-item { border-left: none; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .footer-grid { grid-template-columns: 1fr; gap: 36px; }
    .site-footer,
    .footer-col,
    .footer-bottom-inner { text-align: center; }
    .footer-social,
    .footer-col ul,
    .footer-contact li,
    .footer-bottom-inner {
        justify-content: center;
    }
    .footer-col ul { align-items: center; }
    .footer-contact li { align-items: center; }
    .footer-contact a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }
    .footer-col h4::after,
    [dir="rtl"] .footer-col h4::after {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    .form-panel { padding: 30px 24px; }
    .post-hero-img { height: 240px; }
    .search-close { top: 20px; right: 20px; }
}

/* ============================================
   Featured Work & Stats Band - Responsive & RTL Overrides
   ============================================ */
/* Short desktop screens: compact the section so it fits one viewport */
@media (min-width: 1101px) and (max-height: 900px) {
    .work-home-left {
        padding-top: 36px;
    }
    .work-home-left .section-desc {
        margin-bottom: 36px;
    }
    .featured-project .featured-desc {
        margin-bottom: 16px;
    }
    .featured-project .featured-meta {
        margin-bottom: 20px;
    }
    .work-row-content {
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .work-row-num {
        font-size: 18px;
        padding-bottom: 8px;
        margin-bottom: 10px;
    }
    .work-row-cat {
        margin-bottom: 8px;
    }
    .work-row-content h3 {
        font-size: 16px;
    }
    .work-row-content p {
        font-size: 12px;
    }
    .work-row:last-child .work-row-content {
        padding-bottom: 88px;
    }
    .work-stats-float {
        bottom: 18px;
    }
    .work-stats-card {
        padding: 16px 24px;
        border-radius: 12px;
    }
    .work-stats-icon {
        width: 28px;
        height: 28px;
    }
    .work-stats-num {
        font-size: 22px;
    }
    .work-stats-label {
        font-size: 13px;
    }
}

@media (max-width: 1100px) {
    .work-showcase {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0;
        max-height: none;
    }
    .work-home-left {
        padding: 60px 4vw 0;
    }
    .work-home-left .section-title {
        white-space: normal;
    }
    .work-home-center {
        height: 380px;
        margin-top: 36px;
    }
    .billboard-image-wrapper {
        left: 0;
    }
    .billboard-image-wrapper .fade-overlay {
        display: none;
    }
    .work-home-right {
        gap: 5px;
    }
    .work-row {
        min-height: 220px;
    }
    .work-row:last-child .work-row-content {
        padding-bottom: 24px;
    }
    .work-stats-float {
        position: static;
        padding: 40px 4vw 60px;
    }
}

@media (max-width: 700px) {
    .work-stats-card {
        grid-template-columns: 1fr 1fr;
        row-gap: 24px;
        padding: 24px 20px;
    }
    .work-stats-item {
        border-left: none !important;
        border-right: none !important;
        justify-content: flex-start;
        padding-left: 10px;
    }
    [dir="rtl"] .work-stats-item {
        padding-left: 0;
        padding-right: 10px;
    }
    .work-row-content {
        max-width: 80%;
        padding: 22px 20px 22px 5vw;
    }
    .featured-project .featured-meta {
        flex-wrap: wrap;
        gap: 10px 16px;
        margin-bottom: 20px;
    }
}

/* RTL directional overrides */
[dir="rtl"] .work-home-left {
    padding: 48px 4vw 0 24px;
}

[dir="rtl"] .featured-project .featured-meta i {
    margin-right: 0;
    margin-left: 6px;
}

[dir="rtl"] .billboard-image-wrapper {
    left: 0;
    right: -22%;
}

[dir="rtl"] .billboard-image-wrapper .fade-overlay {
    background: linear-gradient(to left, var(--white) 0%, var(--white) 14%, transparent 48%),
                linear-gradient(to bottom, var(--white) 0%, transparent 22%);
}

[dir="rtl"] .work-row::before {
    background: linear-gradient(270deg, #0a0306 0%, rgba(10, 3, 6, 0.93) 32%, rgba(10, 3, 6, 0.55) 54%, rgba(10, 3, 6, 0) 76%);
}

[dir="rtl"] .work-row-content {
    padding: 24px 36px 24px 24px;
}

[dir="rtl"] .work-stats-item:not(:first-child) {
    border-left: none;
    border-right: 1px solid #ececec;
}

/* ============================================
   Homepage premium sections (editorial, no cards)
   ============================================ */

/* Why K.A.T — One Roof */
.oneroof-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 64px;
    align-items: center;
}
.oneroof-copy .lead { margin: 16px 0 24px; }
.oneroof-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 28px;
    margin: 0 0 30px;
}
.oneroof-list li {
    display: flex;
    align-items: center;
    gap: 13px;
    font-weight: 600;
    color: #333;
    font-size: 15px;
}
.oneroof-list i {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fdeef4;
    color: var(--magenta);
    font-size: 15px;
}
.oneroof-media {
    position: relative;
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
}
.oneroof-media img,
.oneroof-media .img-placeholder {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 30px 60px -28px rgba(20, 4, 11, .4);
}
.oneroof-badge {
    position: absolute;
    left: -24px; bottom: 34px;
    background: linear-gradient(120deg, var(--magenta), #90003b);
    color: #fff;
    padding: 20px 26px;
    border-radius: 14px;
    display: flex; align-items: center; gap: 14px;
    box-shadow: 0 18px 40px rgba(178, 14, 84, .35);
}
.oneroof-badge-num { font-family: 'Anton', sans-serif; font-size: 44px; line-height: 1; }
.oneroof-badge-label { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; line-height: 1.4; }
[dir="rtl"] .oneroof-badge { left: auto; right: -24px; }

/* Process timeline (no boxes) */
.process-timeline {
    list-style: none;
    margin: 14px 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
}
.process-timeline::before {
    content: '';
    position: absolute;
    top: 29px; left: 12.5%; right: 12.5%;
    height: 2px;
    background: linear-gradient(to right, rgba(178,14,84,.25), rgba(178,14,84,.55), rgba(178,14,84,.25));
    z-index: 0;
}
.timeline-step { position: relative; padding: 0 22px; text-align: center; z-index: 1; }
.timeline-dot {
    width: 60px; height: 60px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--magenta);
    color: var(--magenta);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    box-shadow: 0 8px 22px rgba(178, 14, 84, .18);
    transition: background .25s, color .25s, transform .25s;
}
.timeline-step:hover .timeline-dot { background: var(--magenta); color: #fff; transform: translateY(-4px); }
.timeline-num {
    display: block;
    font-family: 'Anton', sans-serif;
    font-size: 15px;
    letter-spacing: 2px;
    color: #d9b9c9;
    margin-bottom: 6px;
}
.timeline-step h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 8px;
}
.timeline-step p { font-size: 14px; line-height: 1.6; color: var(--grey-text); }

/* Certifications strip */
.certs-strip { background: var(--ink); color: #fff; padding: 26px 0; }
/* The approvals are already shown in the dedicated section below — hide the strip on mobile */
@media (max-width: 600px) { .certs-strip { display: none; } }
.certs-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 30px;
}
.certs-label {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--magenta);
    display: inline-flex; align-items: center; gap: 9px;
    margin: 0;
}
.certs-list {
    list-style: none;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 12px 28px;
    margin: 0;
}
.certs-list li {
    position: relative;
    font-family: 'Oswald', sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: .6px;
    color: rgba(255,255,255,.92);
    text-transform: uppercase;
}
.certs-list li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -15px; top: 50%;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    transform: translateY(-50%);
}
[dir="rtl"] .certs-list li:not(:last-child)::after { right: auto; left: -15px; }

/* Government approvals (homepage) */
.approvals-grid {
    list-style: none;
    margin: 44px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.approval-card {
    border: 1px solid var(--grey-border);
    border-radius: 16px;
    background: var(--white);
    padding: 34px 24px;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.approval-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
    border-color: var(--magenta);
}
.approval-emblem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px; height: 72px;
    margin-bottom: 18px;
}
.approval-emblem img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
}
.approval-card h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--ink);
    margin-bottom: 6px;
}
.approval-card p {
    font-size: 13.5px;
    color: var(--grey-text);
    margin: 0;
    line-height: 1.5;
}
@media (max-width: 900px) {
    .approvals-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .approval-card { padding: 26px 18px; }
}
@media (max-width: 480px) {
    .approvals-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 992px) {
    .oneroof-grid { grid-template-columns: 1fr; gap: 40px; }
    .oneroof-media { order: -1; }
    .oneroof-media img, .oneroof-media .img-placeholder { aspect-ratio: 16 / 11; }
    .oneroof-badge { left: auto; right: 20px; bottom: -22px; }
    [dir="rtl"] .oneroof-badge { right: auto; left: 20px; }
    .process-timeline { grid-template-columns: 1fr 1fr; gap: 40px 16px; }
    .process-timeline::before { display: none; }
}
@media (max-width: 560px) {
    .oneroof-list { grid-template-columns: 1fr; }
    .process-timeline { grid-template-columns: 1fr; gap: 30px; }
    .certs-inner { flex-direction: column; gap: 14px; }
    .certs-list { justify-content: center; }
}

/* ============================================
   Industries — tabbed single-stage (compact, no cards)
   ============================================ */
.industries-tabber { margin-top: 8px; }
.industry-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}
.industry-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border: 1px solid var(--grey-border);
    background: #fff;
    border-radius: 999px;
    font-family: 'Oswald', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.industry-tab i { font-size: 14px; color: var(--magenta); transition: color .2s; }
.industry-tab:hover { border-color: rgba(178, 14, 84, .4); transform: translateY(-2px); }
.industry-tab.active {
    background: linear-gradient(95deg, var(--magenta) 0%, #90003b 100%);
    border-color: transparent;
    color: #fff;
}
.industry-tab.active i { color: #fff; }

.industry-stage {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 0;
    background: #fff;
    border: 1px solid var(--grey-border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 26px 60px -34px rgba(20, 4, 11, .35);
}
.industry-stage-media { position: relative; min-height: 420px; }
.industry-stage-img {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: scale(1.03);
    transition: opacity .45s ease, transform .6s ease;
    pointer-events: none;
}
.industry-stage-img.active { opacity: 1; transform: none; }
.industry-stage-img img,
.industry-stage-img .img-placeholder {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 0;
    min-height: 420px;
}
.industry-stage-count {
    position: absolute;
    left: 22px; bottom: 18px;
    z-index: 3;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #fff;
    background: rgba(17, 17, 17, .55);
    padding: 6px 14px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}
.industry-stage-caption { position: relative; padding: 46px 44px; display: flex; }
.industry-caption {
    position: absolute;
    inset: 46px 44px auto 44px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .4s ease, transform .4s ease;
    pointer-events: none;
}
.industry-caption.active { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; }
.industry-caption-num {
    font-family: 'Anton', sans-serif;
    font-size: 40px;
    line-height: 1;
    color: #f0d9e3;
    display: block;
    margin-bottom: 16px;
}
.industry-caption h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--ink);
    margin-bottom: 14px;
}
.industry-caption p { font-size: 15.5px; line-height: 1.75; color: var(--grey-text); margin-bottom: 22px; }

[dir="rtl"] .industry-stage-count { left: auto; right: 22px; }
[dir="rtl"] .industry-caption { inset: 46px 44px auto 44px; }

@media (max-width: 992px) {
    .industry-stage { grid-template-columns: 1fr; }
    .industry-stage-media, .industry-stage-img img, .industry-stage-img .img-placeholder { min-height: 280px; }
    .industry-stage-caption { padding: 34px 28px; }
    .industry-caption { inset: 34px 28px auto 28px; }
    .industry-caption h3 { font-size: 25px; }
}
@media (max-width: 600px) {
    .industry-tabs { gap: 8px; margin-bottom: 22px; }
    .industry-tab { padding: 9px 13px; font-size: 12px; }
    .industry-tab span { display: inline; }
}

/* ============================================
   Testimonials — refined quote blocks (no boxes) + rating
   ============================================ */
.reviews-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: -10px 0 44px;
    color: var(--grey-text);
    font-size: 14.5px;
}
.reviews-score {
    font-family: 'Anton', sans-serif;
    font-size: 30px;
    color: var(--ink);
    line-height: 1;
}
.reviews-stars { color: #f5a623; font-size: 15px; letter-spacing: 1px; }
.reviews-meta { display: inline-flex; align-items: center; gap: 8px; }
.reviews-meta strong { color: var(--ink); }

.testimonial-quotes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.testimonial-quote {
    position: relative;
    padding: 8px 36px;
    border-left: 1px solid var(--grey-border);
}
.testimonial-quote:first-child { border-left: none; }
.testimonial-quote::before {
    content: '\201C';
    font-family: Georgia, serif;
    font-size: 70px;
    line-height: .8;
    color: #f0d9e3;
    display: block;
    margin-bottom: 8px;
}
.testimonial-quote .stars { color: #f5a623; font-size: 13px; letter-spacing: 1px; margin-bottom: 14px; }
.testimonial-quote > p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink);
    font-weight: 500;
    margin-bottom: 22px;
}
[dir="rtl"] .testimonial-quote { border-left: none; border-right: 1px solid var(--grey-border); }
[dir="rtl"] .testimonial-quote:first-child { border-right: none; }

@media (max-width: 880px) {
    .testimonial-quotes { grid-template-columns: 1fr; gap: 0; }
    .testimonial-quote { border-left: none; border-top: 1px solid var(--grey-border); padding: 26px 0; }
    .testimonial-quote:first-child { border-top: none; }
    [dir="rtl"] .testimonial-quote { border-right: none; }
}

/* Services overview page → links into detail pages */
.service-title-link { color: inherit; text-decoration: none; transition: color .2s; }
.service-title-link:hover { color: var(--magenta); }
.service-cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.service-media-link { display: block; overflow: hidden; }
.service-media-link img { transition: transform .45s ease; }
.service-media-link:hover img { transform: scale(1.04); }
@media (max-width: 600px) {
    .service-cta-row { width: 100%; }
    .service-cta-row .btn-gradient,
    .service-cta-row .btn-outline-dark { width: 100%; justify-content: center; }
}

/* ============================================
   Service & sub-service detail pages
   ============================================ */

/* Hero */
.service-hero {
    position: relative;
    padding: 54px 0 64px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(178, 14, 84, .05), transparent 60%),
        var(--white);
    border-bottom: 1px solid var(--grey-border);
    overflow: hidden;
}
.service-hero .breadcrumb { margin-bottom: 26px; }
.service-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
}
.service-hero-copy .page-title { margin: 6px 0 14px; }
.service-hero-copy .page-sub { max-width: 560px; }
.service-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin: 28px 0 22px;
}
.service-hero-media { position: relative; }
.service-hero-media .service-hero-img,
.service-hero-media .img-placeholder {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 26px 60px -24px rgba(17, 17, 17, .4);
}
.subservice-hero { padding-top: 40px; }

/* Labelled image placeholder */
.img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 28px;
    min-height: 220px;
    color: #9a8f93;
    background:
        repeating-linear-gradient(45deg, #faf2f6 0 12px, #f5e9ef 12px 24px);
    border: 1.5px dashed #d9b9c9;
    border-radius: 14px;
}
.img-placeholder i { font-size: 30px; color: var(--magenta); opacity: .55; }
.img-placeholder-tag {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--magenta);
    background: #fff;
    padding: 4px 12px;
    border-radius: 999px;
}
.img-placeholder-text {
    font-size: 13px;
    line-height: 1.6;
    max-width: 340px;
    color: #6f6469;
}
.media-frame .img-placeholder { border-radius: 0; min-height: 360px; height: 100%; }
.sub-card-media .img-placeholder { border: none; border-radius: 0; min-height: 200px; padding: 20px; }
.sub-card-media .img-placeholder .img-placeholder-text { display: block; font-size: 12px; line-height: 1.5; }
.showcase-item .img-placeholder { min-height: 260px; height: 100%; }

/* Sub-service cards */
.sub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.sub-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--grey-border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.sub-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 50px -22px rgba(20, 4, 11, .3);
    border-color: rgba(178, 14, 84, .35);
}
.sub-card-media { aspect-ratio: 16 / 11; overflow: hidden; background: #f7eef2; }
.sub-card-media img,
.sub-card-media .img-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.sub-card:hover .sub-card-media img { transform: scale(1.05); }
.sub-card-body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sub-card-body h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 19px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--ink);
}
.sub-card-body p { font-size: 14px; line-height: 1.6; color: var(--grey-text); flex: 1; }
.sub-card-link {
    margin-top: 6px;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--magenta);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.sub-card:hover .sub-card-link i { transform: translateX(4px); }
.sub-card-link i { transition: transform .25s; }

/* Spec list */
.spec-list { display: flex; flex-direction: column; gap: 0; margin-top: 22px; }
.spec-row {
    display: grid;
    grid-template-columns: 38% 1fr;
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px solid var(--grey-border);
}
.spec-row dt {
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--ink);
}
.spec-row dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--grey-text); min-width: 0; overflow-wrap: anywhere; }
.specs-grid { align-items: start; }

/* Sub-service detail: main + sticky spec card */
.detail-grid {
    display: grid;
    /* minmax(0,…) so wide content (tables) scrolls inside the column instead of blowing the track */
    grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr);
    gap: 56px;
    align-items: start;
}
.detail-subhead {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--ink);
    margin: 30px 0 4px;
}
.detail-aside { position: sticky; top: 130px; }
.spec-card {
    background: #fff;
    border: 1px solid var(--grey-border);
    border-radius: 16px;
    padding: 28px 26px;
    box-shadow: 0 18px 40px -26px rgba(20, 4, 11, .25);
}
.spec-card h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink);
}
.spec-card .spec-list { margin: 14px 0 22px; }
.spec-card .spec-row:last-child { border-bottom: none; }

/* Showcase */
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.showcase-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } /* 2 images: fill the row, no empty cell */
.showcase-item {
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #f7eef2;
}
.showcase-item img { width: 100%; height: 100%; object-fit: cover; }

/* RTL */
[dir="rtl"] .spec-row { grid-template-columns: 38% 1fr; }
[dir="rtl"] .sub-card:hover .sub-card-link i,
[dir="rtl"] .sub-card-link i { transform: scaleX(-1); }

/* Responsive */
@media (max-width: 992px) {
    .service-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .service-hero-media { order: -1; }
    .service-hero-media .service-hero-img,
    .service-hero-media .img-placeholder { height: 300px; }
    .sub-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .detail-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .detail-aside { position: static; }
    .showcase-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .service-hero { padding: 34px 0 44px; }
    .sub-grid { grid-template-columns: 1fr; }
    .showcase-grid { grid-template-columns: 1fr; }
    .service-hero-actions { gap: 12px; }
    .service-hero-actions .btn-gradient,
    .service-hero-actions .btn-outline-dark { width: 100%; justify-content: center; }
    .spec-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ============================================
   Work / Portfolio page (rebuilt)
   ============================================ */
/* Tall sections never reach the scroll-reveal threshold — keep visible */
.work-portfolio.reveal,
.work-cta-band.reveal,
.work-marquee.reveal,
.work-feature-row.reveal { opacity: 1; transform: none; }

.work-hero-stats {
    display: flex;
    gap: 0;
    margin-top: 34px;
    flex-wrap: wrap;
}
.work-hero-stats .whs {
    padding: 0 34px;
    border-left: 2px solid rgba(255,255,255,.16);
}
.work-hero-stats .whs:first-child { padding-left: 0; border-left: none; }
.work-hero-stats .whs strong {
    display: block;
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 38px;
    color: #ff8fbe;
    line-height: 1.05;
}
.work-hero-stats .whs span {
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #d9c3cd;
}

/* Filter count chip */
.filter-count {
    display: inline-block;
    margin-left: 7px;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 11px;
    background: rgba(0,0,0,.07);
    font-size: 11px;
    line-height: 18px;
    color: inherit;
}
.filter-btn.active .filter-count { background: rgba(255,255,255,.24); }

/* Showcase grid: 3-up, masonry-ish varied rows */
.showcase-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.showcase-card {
    border: none;
    padding: 0;
    background: #0f0208;
    cursor: pointer;
    text-align: left;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(15,2,8,.10);
    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s;
}
.showcase-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(120,6,55,.22);
}
.showcase-card img { height: 300px; }
.showcase-card .work-overlay {
    background: linear-gradient(to top, rgba(15,2,8,.92) 0%, rgba(15,2,8,.18) 58%, transparent 80%);
    padding: 26px 26px 24px;
}
.showcase-card .work-overlay h3 { font-size: 21px; }
.work-project {
    margin-top: 6px;
    font-size: 13.5px;
    color: #e9d3dd;
    font-weight: 500;
    letter-spacing: .2px;
}
.work-view {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #fff;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s, transform .3s;
}
.showcase-card:hover .work-view { opacity: 1; transform: translateY(0); }
.showcase-card .work-metric i { margin-right: 6px; }

.work-empty {
    text-align: center;
    padding: 60px 0;
    color: var(--grey-text);
    font-size: 16px;
}

/* CTA band */
.work-cta-band {
    background:
        linear-gradient(100deg, rgba(20,4,11,.94) 38%, rgba(120,6,55,.9)),
        url('../images/portfolio/spice-fleet.jpeg') center 40% / cover no-repeat;
    color: #fff;
}
.work-cta-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 50px;
    align-items: center;
}
.work-cta-band .kicker { color: #ff8fbe; }
.work-cta-band .section-title { color: #fff; margin-bottom: 14px; }
.work-cta-band p:not(.kicker) { color: #d8c4cd; line-height: 1.7; max-width: 560px; }
.work-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.btn-outline-light {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 26px;
    border: 1.5px solid rgba(255,255,255,.5);
    border-radius: 4px;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all .25s;
}
.btn-outline-light:hover { background: #fff; color: var(--magenta); border-color: #fff; }

/* Lightbox */
.work-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(8,1,5,.94);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 5vh 6vw;
    opacity: 0;
    transition: opacity .25s;
}
.work-lightbox.open { display: flex; opacity: 1; }
.wl-figure {
    margin: 0;
    max-width: 1000px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wl-figure img {
    max-width: 100%;
    max-height: 76vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.wl-caption {
    margin-top: 18px;
    text-align: center;
    color: #fff;
}
.wl-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ff8fbe;
    margin-bottom: 6px;
}
.wl-client {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.wl-title { display: block; font-size: 14px; color: #c9b8c0; margin-top: 4px; }
.wl-close, .wl-nav {
    position: absolute;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
}
.wl-close:hover, .wl-nav:hover { background: var(--magenta); transform: scale(1.06); }
.wl-close { top: 26px; right: 30px; }
.wl-nav { top: 50%; transform: translateY(-50%); }
.wl-nav:hover { transform: translateY(-50%) scale(1.06); }
.wl-prev { left: 28px; }
.wl-next { right: 28px; }

/* RTL tweaks */
[dir="rtl"] .work-hero-stats .whs { border-left: none; border-right: 2px solid rgba(255,255,255,.16); }
[dir="rtl"] .work-hero-stats .whs:first-child { padding-right: 0; border-right: none; }
[dir="rtl"] .filter-count { margin-left: 0; margin-right: 7px; }
[dir="rtl"] .showcase-card { text-align: right; }
[dir="rtl"] .work-cta-actions { justify-content: flex-start; }
[dir="rtl"] .wl-close { right: auto; left: 30px; }
[dir="rtl"] .wl-prev { left: auto; right: 28px; }
[dir="rtl"] .wl-next { right: auto; left: 28px; }

/* Responsive */
@media (max-width: 1100px) {
    .showcase-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .work-cta-inner { grid-template-columns: 1fr; gap: 26px; }
    .work-cta-actions { justify-content: flex-start; }
    [dir="rtl"] .work-cta-actions { justify-content: flex-start; }
}
@media (max-width: 620px) {
    .showcase-grid { grid-template-columns: 1fr; gap: 18px; }
    .showcase-card img { height: 280px; }
    /* 3-up grid keeps the stats aligned instead of wrapping into a broken column */
    .work-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
    .work-hero-stats .whs { padding: 0 8px; border-left: 2px solid rgba(255,255,255,.16); text-align: center; }
    .work-hero-stats .whs:first-child { padding-left: 8px; border-left: none; }
    .work-hero-stats .whs strong { font-size: 26px; }
    .work-hero-stats .whs span { font-size: 10px; letter-spacing: .6px; }
    [dir="rtl"] .work-hero-stats .whs:first-child { padding-right: 8px; }
    .wl-close { top: 16px; right: 16px; width: 44px; height: 44px; }
    .wl-nav { width: 44px; height: 44px; }
    .wl-prev { left: 12px; }
    .wl-next { right: 12px; }
    .wl-client { font-size: 20px; }
}

/* ---- Brand marquee (social proof) ---- */
.work-marquee {
    padding: 40px 0;
    background: var(--ink);
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.work-marquee .marquee-label {
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #ff8fbe;
    margin-bottom: 26px;
}
.marquee-track {
    display: flex;
    gap: 0;                /* spacing via per-item margin so the loop seam is seamless */
    width: max-content;
    animation: work-marquee 40s linear infinite;
    will-change: transform;
}
.work-marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,.42);
    white-space: nowrap;
    transition: color .3s;
}
.marquee-track span:hover { color: #fff; }
/* Coloured brand wordmarks in the work-page marquee */
.marquee-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: 46px;
    margin: 0 28px;        /* uniform spacing → seamless loop at -50% */
    opacity: .9;
    transition: opacity .35s, transform .35s;
}
.marquee-logo:hover { opacity: 1; transform: scale(1.04); }
.marquee-logo img {
    height: 100%;
    width: auto;
    max-width: 230px;
    object-fit: contain;
    display: block;
    filter: none;
}
@keyframes work-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---- Section intro ---- */
.work-section-intro { max-width: 680px; margin-bottom: 46px; }
.work-section-intro.center { margin-left: auto; margin-right: auto; text-align: center; }
.work-section-intro.center .kicker { justify-content: center; }
.work-section-intro p { color: var(--grey-text); line-height: 1.7; margin-top: 14px; font-size: 16px; }

/* ---- Big editorial feature row ---- */
.work-feature-row { padding: 96px 0; }
.work-feature-row:nth-of-type(even) { background: var(--grey-light); }
.wf-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: center;
}
.wf-grid.flip .wf-media { order: 2; }
.wf-media {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 30px 70px rgba(15,2,8,.18);
}
.wf-media img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    transition: transform .7s ease;
}
.wf-media:hover img { transform: scale(1.04); }
.wf-media .case-tag { top: 22px; left: 22px; }
.wf-index {
    font-family: 'Anton', sans-serif;
    font-size: 15px;
    letter-spacing: 4px;
    color: var(--magenta);
    margin-bottom: 10px;
}
.wf-copy .section-title { margin-bottom: 8px; }
.wf-client {
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--grey-text);
    margin-bottom: 20px;
    display: block;
}
.wf-copy p { color: var(--charcoal); line-height: 1.8; margin-bottom: 26px; max-width: 520px; }
.wf-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.wf-tag {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .6px;
    padding: 7px 15px;
    border-radius: 20px;
    background: #fff;
    border: 1.5px solid var(--grey-border);
    color: var(--charcoal-dark);
}
.work-feature-row:nth-of-type(even) .wf-tag { background: #fff; }

/* ---- Premium gallery grid (uniform, refined) ---- */
.mosaic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
.mosaic-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--grey-border);
    padding: 0;
    background: #fff;
    cursor: pointer;
    text-align: left;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(15,2,8,.06);
    transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s, border-color .45s;
}
.mosaic-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 26px 54px rgba(120,6,55,.18);
    border-color: transparent;
}
.mosaic-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #f0eef0;
}
.mosaic-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.mosaic-card:hover img { transform: scale(1.06); }
/* subtle wash that deepens on hover — image stays bright by default */
.mosaic-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15,2,8,.34) 0%, transparent 42%);
    opacity: .55;
    transition: opacity .45s;
}
.mosaic-card:hover .mosaic-media::after { opacity: .2; }
.mosaic-chip {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(4px);
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    padding: 7px 13px;
    border-radius: 20px;
    box-shadow: 0 4px 14px rgba(0,0,0,.14);
    letter-spacing: .3px;
}
.mosaic-chip i { color: var(--magenta); margin-right: 6px; }
/* round magnify badge appears on hover */
.mosaic-zoom {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--magenta);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0;
    transform: scale(.7) translateY(-4px);
    transition: opacity .35s, transform .35s;
    box-shadow: 0 8px 20px rgba(178,14,84,.4);
}
.mosaic-card:hover .mosaic-zoom { opacity: 1; transform: scale(1) translateY(0); }
/* caption sits on a clean white footer — professional, legible */
.mosaic-body {
    padding: 18px 20px 20px;
    border-top: 1px solid var(--grey-border);
}
.mosaic-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: var(--magenta);
    margin-bottom: 8px;
    text-transform: uppercase;
}
.mosaic-card h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 19px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    line-height: 1.15;
    color: var(--ink);
}
.mosaic-card .work-project { margin-top: 5px; font-size: 13px; color: var(--grey-text); line-height: 1.5; }
.mosaic-card.hidden { display: none; }

[dir="rtl"] .mosaic-card { text-align: right; }
[dir="rtl"] .mosaic-chip { left: auto; right: 14px; }
[dir="rtl"] .mosaic-zoom { right: auto; left: 14px; }
[dir="rtl"] .wf-grid.flip .wf-media { order: 0; }

@media (max-width: 1000px) {
    .mosaic-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .wf-grid { grid-template-columns: 1fr; gap: 34px; }
    .wf-grid.flip .wf-media { order: 0; }
    .wf-media img { height: 420px; }
}
@media (max-width: 600px) {
    .work-feature-row { padding: 58px 0; }
    .mosaic-grid { grid-template-columns: 1fr; gap: 22px; }
    .marquee-track span { font-size: 18px; }
}

/* ============================================
   Work / Portfolio — LUXURY DARK GALLERY
   (scoped under .work-lux)
   ============================================ */
.work-lux {
    --lux-bg:     #ffffff;
    --lux-bg-2:   #f7f5f6;
    --lux-card:   #ffffff;
    --lux-line:   rgba(178,14,84,.18);    /* soft magenta hairline */
    --lux-accent: #b20e54;                /* magenta accent (brand) */
    --lux-rose:   #b20e54;
    --lux-mute:   #6f6f6f;
    background: var(--lux-bg);
    color: #2a2a2a;
}

/* Hero count-up numbers */
.work-lux .work-hero-stats .whs strong { color: var(--lux-rose); }

/* ---- Featured case study on light canvas ---- */
.work-lux .case-study { background: var(--lux-bg); padding-top: 96px; padding-bottom: 96px; }
.work-lux .case-media img {
    border: 1px solid var(--grey-border);
    box-shadow: 0 24px 60px rgba(20,4,11,.16);
}
.work-lux .case-content .kicker { color: var(--lux-accent); }
.work-lux .case-content .kicker::before { background: var(--lux-accent); }
.work-lux .case-content .section-title { color: var(--ink); }
.work-lux .case-content p:not(.kicker) { color: var(--charcoal); }
.work-lux .case-stat strong { color: var(--lux-accent); }
.work-lux .case-stat span { color: var(--grey-text); }
.work-lux .case-stat { border-left-color: var(--grey-border); }
.work-lux .case-arrow { border-color: var(--grey-border); color: var(--charcoal); }

/* ---- Marquee refinements ---- */
.work-lux .work-marquee { background: var(--lux-bg-2); border-color: var(--grey-border); }
.work-lux .work-marquee .marquee-label { color: var(--lux-accent); letter-spacing: 3.4px; }
.work-lux .marquee-track { animation-duration: 46s; }

/* ---- Credibility stats band ---- */
.lux-stats {
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(178,14,84,.06), transparent 60%),
        var(--lux-bg-2);
    border-top: 1px solid var(--grey-border);
    border-bottom: 1px solid var(--grey-border);
    padding: 56px 0;
}
.lux-stats-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.lux-stat { text-align: center; padding: 6px 20px; position: relative; }
.lux-stat + .lux-stat::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 48px;
    background: linear-gradient(transparent, var(--grey-border), transparent);
}
.lux-stat strong {
    display: block;
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1;
    color: var(--ink);
    letter-spacing: .5px;
}
.lux-stat span {
    display: block;
    margin-top: 12px;
    font-size: 12px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--lux-mute);
}

/* ---- Gallery shell ---- */
.lux-gallery { padding: 100px 0 96px; background: var(--lux-bg); }
.lux-gallery-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.lux-gallery-head .kicker { justify-content: center; color: var(--lux-accent); }
.lux-gallery-head .kicker::before, .lux-gallery-head .kicker::after { background: var(--lux-accent); }
.lux-gallery-head .section-title { color: var(--ink); }
.lux-gallery-sub { margin-top: 14px; color: var(--lux-mute); line-height: 1.7; font-size: 16px; }

/* Filter bar (light) */
.lux-filter { justify-content: center; margin-bottom: 8px; }
.lux-filter .filter-btn {
    background: #fff;
    border-color: var(--grey-border);
    color: var(--charcoal-dark);
}
.lux-filter .filter-btn:hover { border-color: var(--lux-accent); color: var(--lux-accent); }
.lux-filter .filter-btn.active { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.lux-filter .filter-count { background: rgba(0,0,0,.06); }
.lux-filter .filter-btn.active .filter-count { background: rgba(255,255,255,.24); }

/* ---- Category group ---- */
.lux-group { margin-top: 58px; }
.lux-group.hidden { display: none; }
.lux-group-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 28px;
}
.lux-group-index {
    font-family: 'Anton', sans-serif;
    font-size: 18px;
    color: var(--lux-accent);
    letter-spacing: 2px;
}
.lux-group-title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--ink);
}
.lux-group-count {
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--lux-mute);
    white-space: nowrap;
}
.lux-group-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--grey-border), transparent);
    align-self: center;
}

/* ---- Cards ---- */
.lux-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.lux-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--grey-border);
    padding: 0;
    background: var(--lux-card);
    cursor: pointer;
    text-align: left;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(20,4,11,.06);
    transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s, border-color .5s;
}
.lux-card:hover {
    transform: translateY(-8px);
    border-color: transparent;
    box-shadow: 0 26px 54px rgba(178,14,84,.18);
}
.lux-card.hidden { display: none; }
.lux-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #eee;
}
.lux-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.22,.61,.36,1), filter .5s;
}
.lux-card:hover img { transform: scale(1.07); }
.lux-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(20,4,11,.28) 0%, transparent 42%);
    opacity: .5;
    transition: opacity .5s;
}
.lux-card:hover .lux-media::after { opacity: .15; }
.lux-chip {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 2;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(6px);
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    padding: 7px 13px;
    border-radius: 20px;
    letter-spacing: .3px;
    border: 1px solid var(--grey-border);
}
.lux-chip i { color: var(--lux-accent); margin-right: 6px; }
.lux-zoom {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 2;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--magenta);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    opacity: 0;
    transform: scale(.7) translateY(-4px);
    transition: opacity .4s, transform .4s;
    box-shadow: 0 8px 22px rgba(178,14,84,.5);
}
.lux-card:hover .lux-zoom { opacity: 1; transform: scale(1) translateY(0); }
.lux-body {
    padding: 18px 20px 20px;
    border-top: 1px solid var(--grey-border);
}
.lux-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--lux-accent);
    margin-bottom: 8px;
}
.lux-card h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 19px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    line-height: 1.15;
    color: var(--ink);
}
.lux-project { margin-top: 5px; font-size: 13px; color: var(--lux-mute); line-height: 1.5; }

/* ---- Lightbox: counter ---- */
.wl-counter {
    display: block;
    font-family: 'Anton', sans-serif;
    font-size: 13px;
    letter-spacing: 2px;
    color: #ff8fbe;
    margin-bottom: 10px;
}

/* ---- RTL ---- */
[dir="rtl"] .lux-card { text-align: right; }
[dir="rtl"] .lux-chip { left: auto; right: 14px; }
[dir="rtl"] .lux-zoom { right: auto; left: 14px; }
[dir="rtl"] .lux-group-head { flex-direction: row-reverse; }
[dir="rtl"] .lux-group-rule { background: linear-gradient(to left, var(--grey-border), transparent); }
[dir="rtl"] .lux-stat + .lux-stat::before { left: auto; right: 0; }

/* ---- Reveal safety (tall sections) ---- */
.lux-gallery.reveal, .lux-stats.reveal, .work-lux .case-study.reveal { opacity: 1; transform: none; }

/* Article body section is taller than any viewport — the reveal threshold
   never trips at load, so it'd stay invisible until scroll. Keep it shown.
   Same reason its FAQ items must skip the .visible stagger gate: on a tall
   mobile column .visible never fires, so the accordion would stay opacity:0. */
.post-section.reveal { opacity: 1; transform: none; }
.post-section.reveal .faq-wrap > * { opacity: 1; transform: none; }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
    .lux-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .lux-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
    .lux-stat:nth-child(3)::before { display: none; }
}
@media (max-width: 600px) {
    .lux-gallery { padding: 64px 0; }
    /* 2-up keeps the portfolio compact instead of 30 full-width rows */
    .lux-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .lux-group { margin-top: 40px; }
    .lux-group-head { flex-wrap: wrap; gap: 8px 14px; }
    .lux-group-rule { display: none; }
    .lux-stat { padding: 6px 10px; }
    /* cards beyond the cap are hidden until "show more" */
    .lux-card.cap-hidden { display: none; }
    .lux-more-btn {
        grid-column: 1 / -1;
        appearance: none;
        background: #fff;
        border: 1px solid var(--magenta);
        color: var(--magenta);
        font-family: 'Oswald', sans-serif;
        font-weight: 600;
        font-size: 13px;
        letter-spacing: .6px;
        text-transform: uppercase;
        padding: 13px 18px;
        border-radius: 6px;
        cursor: pointer;
        margin-top: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .lux-more-btn i { transition: transform .25s; }
    .lux-more-btn.is-open i { transform: rotate(180deg); }
}

/* ============================================
   Work page — process, testimonials, lightbox quote (dark)
   ============================================ */

/* ---- How we work — animated timeline ---- */
.lux-process {
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(178,14,84,.05), transparent 55%),
        var(--lux-bg-2, #f7f5f6);
    padding: 96px 0 100px;
    border-top: 1px solid var(--grey-border);
    overflow: hidden;
}
.lux-process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin-top: 46px;
    position: relative;
}
/* connecting progress line */
.lux-process-line {
    position: absolute;
    top: 28px;            /* aligns to node centre */
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--grey-border);
    overflow: hidden;
    border-radius: 2px;
}
.lux-process-line-fill {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--magenta), #e0568f);
    transition: transform 1.8s cubic-bezier(.65,0,.35,1);
}
.lux-process.in-view .lux-process-line-fill { transform: scaleX(1); }
[dir="rtl"] .lux-process-line-fill { transform-origin: right center; }

.lux-step {
    padding: 0 22px;
    position: relative;
    text-align: center;
    /* reveal state */
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
    transition-delay: calc(var(--i) * .14s + .2s);
}
.lux-process.in-view .lux-step { opacity: 1; transform: translateY(0); }

/* node: icon + animated ring */
.lux-step-node {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px; height: 58px;
    margin-bottom: 22px;
}
.lux-step-icon {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--grey-border);
    color: var(--magenta);
    font-size: 22px;
    transition: background .4s, border-color .4s, color .4s, transform .4s, box-shadow .4s;
}
.lux-step-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--magenta);
    opacity: 0;
    transform: scale(.8);
    transition: opacity .4s, transform .4s;
}
/* active/hover node */
.lux-step:hover .lux-step-icon,
.lux-process.in-view .lux-step:nth-child(2) .lux-step-icon {
    transform: translateY(-3px);
}
.lux-step:hover .lux-step-icon {
    background: var(--magenta);
    border-color: var(--magenta);
    color: #fff;
    box-shadow: 0 12px 26px rgba(178,14,84,.32);
}
.lux-step:hover .lux-step-ring { opacity: .5; transform: scale(1); }

.lux-step-num {
    display: block;
    font-family: 'Anton', sans-serif;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--magenta);
    margin-bottom: 10px;
}
.lux-step-slash { color: var(--grey-border); margin: 0 1px; }
.lux-step h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ink);
    margin-bottom: 8px;
}
.lux-step p { font-size: 13.5px; line-height: 1.65; color: var(--grey-text); max-width: 210px; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
    .lux-step { opacity: 1; transform: none; transition: none; }
    .lux-process-line-fill { transition: none; }
}

/* ---- Testimonials (light variant) ---- */
.lux-testimonials { background: var(--lux-bg, #fff); padding: 92px 0 100px; }
.lux-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 12px; }
.lux-testi-card {
    background: #fff;
    border: 1px solid var(--grey-border);
    border-radius: 14px;
    padding: 32px 30px;
    box-shadow: 0 4px 18px rgba(20,4,11,.06);
    transition: transform .4s, border-color .4s, box-shadow .4s;
}
.lux-testi-card:hover {
    transform: translateY(-6px);
    border-color: rgba(178,14,84,.3);
    box-shadow: 0 22px 44px rgba(178,14,84,.12);
}
.lux-testi-card::before { content: none; }
.lux-stars { color: #f0a93c; font-size: 14px; letter-spacing: 2px; margin-bottom: 16px; }
.lux-stars .dim { color: rgba(0,0,0,.14); }
.lux-testi-card > p { color: var(--charcoal); font-size: 15px; line-height: 1.8; margin-bottom: 24px; font-style: italic; }
.lux-testi-card .testimonial-author strong { color: var(--ink); }
.lux-testi-card .testimonial-author span { color: var(--grey-text); }
.lux-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--magenta, #b20e54), #8d1d4e);
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 600;
    flex-shrink: 0;
}

/* ---- Lightbox quote CTA ---- */
.wl-quote {
    margin-top: 18px;
    display: inline-flex;
    font-size: 12px;
    padding: 11px 22px;
}

/* ---- Responsive ---- */
@media (max-width: 1000px) {
    .lux-process-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
    .lux-process-line { display: none; }
    .lux-testi-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .lux-process, .lux-testimonials { padding: 60px 0; }
    .lux-process-grid { grid-template-columns: 1fr; gap: 40px; margin-top: 30px; }
}

/* ============================================
   Featured case-study slider
   ============================================ */
.case-slider { position: relative; }
.case-slides { position: relative; }
.case-slide {
    display: none;
    animation: caseFade .6s ease;
}
.case-slide.active { display: grid; }
@keyframes caseFade {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Controls row */
.case-slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 44px;
}
.case-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--grey-border);
    color: var(--charcoal);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s, border-color .25s, transform .25s, color .25s;
}
.case-arrow:hover {
    background: var(--magenta);
    border-color: var(--magenta);
    color: #fff;
    transform: scale(1.06);
}
.case-dots { display: flex; gap: 12px; }
.case-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.18);
    cursor: pointer;
    padding: 0;
    transition: background .25s, transform .25s, width .25s;
}
.case-dot:hover { background: rgba(0,0,0,.4); }
.case-dot.active {
    background: var(--magenta);
    width: 30px;
    border-radius: 6px;
}

@media (max-width: 600px) {
    .case-slider-controls { gap: 14px; margin-top: 30px; }
    .case-arrow { width: 44px; height: 44px; }
}

/* ============================================
   Mobile-only premium redesign (phones ≤600px)
   — compact header, hero push-up, What-We-Do
   swipe carousel, approvals credential ledger.
   Desktop/tablet untouched.
   ============================================ */
@media (max-width: 600px) {

    /* ---- 1. Compact header: free ~44px so the hero (and the brand
       carousel below it) climbs into the first viewport ---- */
    .main-header,
    body.scrolled .main-header { height: 70px; }
    .logo-crop { height: 46px; }
    .logo-crop img { max-width: 46vw; }
    /* already compact — skip the desktop shrink-on-stick */
    body.scrolled .logo-crop { transform: none; }

    /* ---- 2. Hero push-up: tighter copy rhythm (design unchanged) ---- */
    .hero-content { padding: 22px 0 16px; }
    .subtitle { font-size: 16px; margin-bottom: 6px; }
    .main-title { font-size: clamp(44px, 12.6vw, 54px); margin-bottom: 10px; }
    .description { font-size: 14.5px; margin-bottom: 2px; }

    /* ---- 3. What We Do: premium swipe carousel ---- */
    .whatwedo-home .bento-services {
        display: flex;
        align-items: stretch;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 24px;
        margin-inline: -24px;
        padding: 10px 24px 6px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .whatwedo-home .bento-services::-webkit-scrollbar { display: none; }

    .whatwedo-home .bento-card {
        flex: 0 0 min(82vw, 330px);
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        border-radius: 18px;
        border: 1px solid var(--grey-border);
        box-shadow: 0 14px 30px -14px rgba(26, 26, 26, .18);
        overflow: hidden;
    }

    .whatwedo-home .bento-img {
        order: 1;
        width: 100%;
        height: 185px !important;
        position: relative;
    }
    /* soft ink scrim so the white content sheet reads as a layer above */
    .whatwedo-home .bento-img::after {
        content: '';
        position: absolute;
        inset: 55% 0 0;
        background: linear-gradient(to top, rgba(26, 26, 26, .38), transparent);
        pointer-events: none;
    }

    /* content = white sheet pulled up over the photo */
    .whatwedo-home .bento-content,
    .whatwedo-home .bento-card-1 .bento-content,
    .whatwedo-home .bento-card-2 .bento-content,
    .whatwedo-home .bento-card-3 .bento-content,
    .whatwedo-home .bento-card-4 .bento-content,
    .whatwedo-home .bento-card-5 .bento-content,
    .whatwedo-home .bento-card-6 .bento-content {
        order: 2;
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-top: -22px;
        background: var(--white);
        border-radius: 18px 18px 0 0;
        padding: 24px 20px 20px;
    }

    /* number chip straddles the sheet edge */
    .whatwedo-home .bento-num {
        position: absolute;
        top: -15px;
        left: 20px;
        margin: 0;
        gap: 8px;
        padding: 7px 14px;
        font-size: 11.5px;
        background: var(--white);
        border: 1px solid rgba(178, 14, 84, .3);
        border-radius: 999px;
        box-shadow: 0 6px 16px rgba(26, 26, 26, .14);
    }
    [dir="rtl"] .whatwedo-home .bento-num { left: auto; right: 20px; }
    .whatwedo-home .bento-num::before { width: 14px; }

    .whatwedo-home .bento-card h3,
    .whatwedo-home .bento-card-2 h3,
    .whatwedo-home .bento-card-3 h3,
    .whatwedo-home .bento-card-4 h3,
    .whatwedo-home .bento-card-5 h3,
    .whatwedo-home .bento-card-6 h3 {
        font-size: 22px;
        letter-spacing: -.6px;
        margin: 8px 0 10px;
    }

    /* clamp the blurb so every slide is the same height */
    .whatwedo-home .bento-card p,
    .whatwedo-home .bento-card-2 p,
    .whatwedo-home .bento-card-3 p,
    .whatwedo-home .bento-card-4 p,
    .whatwedo-home .bento-card-5 p,
    .whatwedo-home .bento-card-6 p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 13.5px;
        line-height: 1.62;
        margin-bottom: 14px;
        max-width: none;
    }

    /* three refined pill tags per slide */
    .whatwedo-home .bento-tags { gap: 8px; margin-bottom: 18px; }
    .whatwedo-home .bento-tags span {
        background: rgba(178, 14, 84, .05);
        border: 1px solid rgba(178, 14, 84, .3);
        border-radius: 999px;
        padding: 6px 12px;
        font-size: 11px;
    }
    .whatwedo-home .bento-tags span:nth-of-type(n+4) { display: none; }

    /* one uniform premium CTA pinned to the bottom of every slide */
    .whatwedo-home .bento-card .bento-cta,
    .whatwedo-home .bento-card .btn-text-link {
        margin-top: auto;
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 46px;
        padding: 0 20px;
        border-radius: 10px;
        background: linear-gradient(95deg, var(--magenta) 0%, #90003b 100%);
        color: var(--white);
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        box-shadow: 0 12px 24px -10px rgba(178, 14, 84, .5);
    }

    /* swipe dots (built by main.js, reuses .case-dot look) */
    .bento-dots {
        display: flex;
        justify-content: center;
        gap: 9px;
        margin-top: 18px;
    }

    /* ---- 4. Floating contact button: hidden until the visitor scrolls
       (rides the existing body.scrolled toggle from main.js) ---- */
    .float-contact {
        opacity: 0;
        transform: translateY(16px);
        pointer-events: none;
        transition: opacity .35s ease, transform .35s ease;
    }
    body.scrolled .float-contact,
    .float-contact[data-open="true"] {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    /* ---- 5. Government approvals: credential ledger ---- */
    .approvals-home .section-desc { font-size: 14px; }
    .approvals-grid {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 28px;
        background: var(--white);
        border: 1px solid var(--grey-border);
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 16px 36px -20px rgba(26, 26, 26, .22);
    }
    .approval-card {
        display: grid;
        grid-template-columns: 56px 1fr 22px;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 16px;
        text-align: left;
        padding: 16px 18px;
        border: none;
        border-radius: 0;
    }
    [dir="rtl"] .approval-card { text-align: right; }
    .approval-card + .approval-card { border-top: 1px solid var(--grey-border); }
    .approval-card:hover { transform: none; box-shadow: none; }
    .approval-emblem {
        grid-row: 1 / 3;
        width: 56px;
        height: 56px;
        padding: 8px;
        margin: 0;
        background: var(--grey-light);
        border: 1px solid var(--grey-border);
        border-radius: 14px;
    }
    .approval-card h3 { align-self: end; font-size: 15px; letter-spacing: .3px; margin-bottom: 2px; }
    .approval-card p { align-self: start; font-size: 12px; line-height: 1.45; }
    /* trailing verified mark — the section's whole promise in one glyph */
    .approval-card::after {
        content: '\f058';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        grid-column: 3;
        grid-row: 1 / 3;
        color: var(--magenta);
        font-size: 19px;
    }
}

/* ============================================
   Premium card polish (homepage + grids)
   ============================================ */
.bento-card { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .35s; }
.bento-card:hover { transform: translateY(-8px); box-shadow: 0 34px 66px -22px rgba(20,4,11,.20); border-color: rgba(178,14,84,.35); }
.bento-num { color: var(--magenta); display: inline-flex; align-items: center; gap: 10px; }
.bento-num::before { content: ''; width: 26px; height: 2px; background: var(--magenta); display: inline-block; }
.bento-tags span { transition: background .2s, color .2s, border-color .2s; }
.bento-tags span:hover { border-color: var(--magenta); color: var(--magenta); background: rgba(178,14,84,.06); }
.bento-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(178,14,84,0) 55%, rgba(178,14,84,.14)); opacity: 0; transition: opacity .45s; pointer-events: none; }
.bento-card:hover .bento-img::after { opacity: 1; }
.bento-card:hover .bento-img img { transform: scale(1.06); }

.insight-card { border-radius: 18px; transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .35s; }
.insight-card:hover { transform: translateY(-8px); border-color: rgba(178,14,84,.32); box-shadow: 0 34px 66px -22px rgba(20,4,11,.18); }

.value-card { border-radius: 16px; transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .35s; }
.value-card:hover { transform: translateY(-8px); box-shadow: 0 30px 58px -22px rgba(20,4,11,.16); }

.approval-card:hover { border-color: rgba(178,14,84,.4); box-shadow: 0 26px 52px -22px rgba(20,4,11,.16); }

.industry-chip { transition: transform .25s, box-shadow .25s, border-color .25s, color .25s; }
.industry-chip:hover { transform: translateY(-4px); border-color: rgba(178,14,84,.4); box-shadow: 0 16px 34px -12px rgba(20,4,11,.12); }

/* Sub-service cards (service pages) get the same lift */
.sub-card { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .35s; }
.sub-card:hover { transform: translateY(-8px); border-color: rgba(178,14,84,.35); box-shadow: 0 30px 58px -22px rgba(20,4,11,.16); }

/* Service hero: trust chips fill the copy column */
.hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid var(--grey-border); }
.hero-trust li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.hero-trust i { color: var(--magenta); font-size: 15px; width: 18px; text-align: center; }
[dir="rtl"] .hero-trust { direction: rtl; }

/* Service/sub-service sidebar: TOC in the right space + centered why-K.A.T actions */
.detail-aside .post-toc { margin: 0 0 20px; }
.svc-aside-card { text-align: center; }
.svc-aside-card .aside-eyebrow { display: block; }
.svc-aside-card .aside-line { justify-content: center; }
@media (max-width: 900px) { .detail-aside .post-toc { display: none; } }