/*!
 * CloudTart — Targeted Visual Overrides
 * -----------------------------------------------------------
 * Loads AFTER cloudtart-main, cloudtart-theme, and cloudtart-responsive,
 * so it wins the cascade for the specific selectors below without us
 * needing !important. Place future surgical fixes (single bug, single
 * design tweak) here — never broad-stroke rewrites.
 */

/* ============================================================
   CIRCLE BUTTONS — free the morphing wave from its clipping circle
   ============================================================
   Affected classes:  .wc-btn-primary, .wc-btn-secondary,
                      .wc-btn-pink, .wc-btn-light, .wc-btn-black
                      (used as `.btn-item wc-btn-primary cta__btn-gold`
                      for "Request a Consultation" CTAs and similar.)

   The problem the user reported (and the screenshot confirms):
     The button is a perfectly clipped 170×170 circle
       (border-radius: 100% + overflow: hidden).
     Its `::before` draws a 1px gold border whose `border-radius` is
     animated by `morphFrame` between values like
       60% 40% 30% 70% / 60% 30% 70% 40%.
     When the morph reaches these blobby values, the gold border curves
     wider than the parent's perfect 50% circle — so every time the
     wave bulges past that radius it gets sliced by the parent's
     overflow:hidden clip, producing the broken / "exits the frame"
     arc fragments visible in the screenshot.

   The fix — exactly matching the user's intent
   ("remove the inner-circle constraint; let the soft motion float on
    its own"):
     1. Drop `overflow: hidden` so the morphing wave can complete its
        natural curves without clipping.
     2. Make the button background transparent so the dark inner disk
        no longer competes with the wave.
     3. Re-anchor the gold accent `span` (the small dot / hover ripple)
        to the centre of the button — at rest it's now a contained
        glow behind the text; on hover it grows to exactly fill the
        button without spilling outside. This preserves the luxury
        "fill from inside" hover micro-interaction even though
        overflow:hidden is gone.
     4. Keep the `border-radius: 100%` on the parent so the focus
        outline / click area stays nicely round.
*/
.wc-btn-black,
.wc-btn-light,
.wc-btn-pink,
.wc-btn-primary,
.wc-btn-secondary {
    overflow: visible;
    background-color: transparent;
}

/* Make sure the morphing wave is never clipped by an ancestor either —
   the closest positioned ancestor is usually `.btn_wrapper` which is
   inline-block. We don't need to change it, we just make sure the
   wave's pseudo doesn't accidentally inherit a clip from anywhere. */
.wc-btn-black::before,
.wc-btn-light::before,
.wc-btn-pink::before,
.wc-btn-primary::before,
.wc-btn-secondary::before {
    overflow: visible;
    /* Keep the existing border / inset / animation from cloudtart-main.
       This rule intentionally adds nothing new other than the safety
       overflow declaration. */
}

/* Re-anchor the accent span.
   ---------------------------------------------------------------
   The original cloudtart-main rule places the dot at left:0;top:0
   with `transform: translate(-50%, -50%)`, so the dot's centre
   sits exactly at the button's top-left corner — too tucked away.

   We want the idle dot to sit on the RIGHT side, slightly BELOW
   the center — past the button text, roughly under the arrow icon
   — and then slide smoothly to the middle on hover while growing
   to fill the button.

   To keep the position transition continuous (CSS can't animate
   value↔auto), both states use the same coordinate system:
   left/top in % with `translate(-50%, -50%)` doing the centering.
*/
.wc-btn-black > span,
.wc-btn-light > span,
.wc-btn-pink > span,
.wc-btn-primary > span,
.wc-btn-secondary > span {
    left: 72%;
    top: 70%;
    /* original .7s transition + translate(-50%, -50%) from main.css
       are inherited; nothing else needs declaring here. */
}

/* Cap the hover ripple to exactly the button bounds and slide the
   dot's centre back to the middle so the expanded circle sits
   evenly around the label. */
.wc-btn-black:hover > span,
.wc-btn-light:hover > span,
.wc-btn-pink:hover > span,
.wc-btn-primary:hover > span,
.wc-btn-secondary:hover > span {
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
}

/* When hovered, the button itself takes on a soft gold glow without
   needing a solid inner-circle fill. Keeps the luxury feel. */
.wc-btn-black:hover,
.wc-btn-light:hover,
.wc-btn-pink:hover,
.wc-btn-primary:hover,
.wc-btn-secondary:hover {
    background-color: transparent;
}

/* ============================================================
   ANIMATED GLOWING SEARCH BAR
   ============================================================
   Concept: 21st.dev animated glowing search input, adapted to
   the CloudTart gold palette (#d6b9a8).

   How it works:
     • Two absolutely-positioned layers (.ct-search-glow) sit
       behind the form, each with a conic-gradient that sweeps
       a gold arc around the pill border.
     • @property --ct-search-angle turns the custom property
       into an animatable <angle>. @keyframes rotates it 360 °.
     • The first layer is sharp (the visible rotating border);
       the second is blurred outward for a soft bloom halo.
     • Both layers are opacity:0 at rest and animate in on
       :hover / :focus-within, giving a "wake from sleep" feel.
   Browsers without @property support (old Firefox/Safari) see
   a static gold tint on focus — clean progressive enhancement.
   ============================================================ */

@property --ct-search-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes ct-search-spin {
    to { --ct-search-angle: 360deg; }
}

/* Outer wrapper — positions the glow layers */
.ct-search-wrap {
    position: relative;
    display: flex;
    width: 100%;
}

/* Glow layers (sharp + blurred) */
.ct-search-glow {
    position: absolute;
    inset: -1px;
    border-radius: 999px;
    background: conic-gradient(
        from var(--ct-search-angle),
        transparent  0%,
        transparent 28%,
        #9a7d62     46%,
        #d6b9a8     58%,
        #ead7c7     68%,
        #d6b9a8     76%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
    z-index: 0;
}

.ct-search-glow--blur {
    inset: -10px;
    filter: blur(18px);
}

/* Activate on interaction */
.ct-search-wrap:hover .ct-search-glow,
.ct-search-wrap:focus-within .ct-search-glow {
    opacity: 1;
    animation: ct-search-spin 3s linear infinite;
}

.ct-search-wrap:hover .ct-search-glow--blur,
.ct-search-wrap:focus-within .ct-search-glow--blur {
    opacity: 0.48;
    animation: ct-search-spin 3s linear infinite;
}

/* The form itself — stacked above the glow layers */
.ct-search-form {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    width: 100%;
    background: #0c1828;
    border: 1px solid rgba(214, 185, 168, 0.2);
    border-radius: 999px;
    overflow: hidden;
    transition: border-color 0.35s ease;
}

/* The thin border dissolves once the rotating glow takes over */
.ct-search-wrap:hover .ct-search-form,
.ct-search-wrap:focus-within .ct-search-form {
    border-color: transparent;
}

.ct-search-form input[type="search"] {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1;
    padding: 14px 6px 14px 22px;
    -webkit-appearance: none;
    appearance: none;
}

.ct-search-form input[type="search"]::placeholder {
    color: rgba(214, 185, 168, 0.42);
}

/* Remove WebKit's built-in search UI chrome */
.ct-search-form input[type="search"]::-webkit-search-decoration,
.ct-search-form input[type="search"]::-webkit-search-cancel-button,
.ct-search-form input[type="search"]::-webkit-search-results-button {
    display: none;
}

.ct-search-form button[type="submit"] {
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(214, 185, 168, 0.6);
    font-size: 1rem;
    transition: color 0.3s ease, transform 0.2s ease;
}

.ct-search-form button[type="submit"]:hover,
.ct-search-wrap:focus-within .ct-search-form button[type="submit"] {
    color: #d6b9a8;
    transform: scale(1.15);
}

/* Context: off-canvas header (full available width) */
.offcanvas__search .ct-search-wrap {
    max-width: 100%;
}

/* Context: archive / search-results hero (slightly larger pill) */
.archive__hero-search .ct-search-wrap {
    max-width: 100%;
}

.archive__hero-search .ct-search-form {
    background: rgba(9, 20, 34, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.archive__hero-search .ct-search-form input[type="search"] {
    padding: 18px 8px 18px 26px;
    font-size: 1.05rem;
}

.archive__hero-search .ct-search-form button[type="submit"] {
    width: 58px;
    height: 58px;
    font-size: 1.1rem;
}

/* Search-term highlight chips inside result excerpts */
mark.ct-search-hl {
    background: rgba(214, 185, 168, 0.18);
    color: #d6b9a8;
    padding: 0 3px;
    border-radius: 3px;
    font-weight: 500;
    font-style: normal;
}

/* .highlight-cloudtart is a rose-gold "chip" (rose-gold bg + navy text, from
   theme.css). We intentionally do NOT override its colour to rose-gold here —
   doing so made it rose-gold-on-rose-gold (invisible) on the contact hero and
   the comment title. The chip style reads well on every background. */

/* RTL mirrors */
html[dir="rtl"] .ct-search-form input[type="search"] {
    padding: 14px 22px 14px 6px;
    text-align: right;
}
html[dir="rtl"] .archive__hero-search .ct-search-form input[type="search"] {
    padding: 18px 26px 18px 8px;
}

/* ============================================================
   SEARCH — NO RESULTS EMPTY STATE
   ============================================================ */
.ct-search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 80px 20px 100px;
    gap: 20px;
}

.ct-search-empty__icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid rgba(214, 185, 168, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: rgba(214, 185, 168, 0.55);
    margin-bottom: 8px;
}

.ct-search-empty__title {
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 1.25;
}

.ct-search-empty__desc {
    color: rgba(255, 255, 255, 0.55);
    font-size: 1.05rem;
    max-width: 460px;
    margin: 0;
}

.ct-search-empty__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 12px;
}

/* ============================================================
   SEARCH RESULTS — GROUPED BY POST TYPE
   Each post-type band gets a sub-header with icon + count.
   ============================================================ */
.search__results .search__group { margin-bottom: 70px; }
.search__results .search__group:last-child { margin-bottom: 0; }

.search__group-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 36px;
    border-bottom: 1px solid rgba(214, 185, 168, 0.18);
}

.search__group-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(214, 185, 168, 0.1);
    color: #d6b9a8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.search__group-title {
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    font-weight: 600;
    color: #fff;
    margin: 0;
    flex: 1;
}

.search__group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    padding: 0 10px;
    background: #d6b9a8;
    color: #0c1828;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 999px;
}

/* Make highlight visible inside the result-card title */
.search__item .blog__title-2 mark.ct-search-hl {
    background: rgba(214, 185, 168, 0.22);
    color: inherit;
}

/* ============================================================
   ABOUT SECTION — keep .about__img-right inside the section
   ============================================================
   `.about__img-right` is `position: absolute; right: 0; top: 280px`
   in cloudtart-main.css, but `.about__area` has no positioning
   context. Without this, the absolute element positions relative
   to <main> (the nearest position:relative ancestor) and escapes
   its own section. Pinning `.about__area` to position:relative is
   the minimal fix that brings the right image back inside the band.
   The grid wrapper also gets position:relative so the image scopes
   to the actual content area, not the full-width section. */
.about__area {
    position: relative;
}
.about__area .about__content-wrapper {
    position: relative;
}
/* Within the inner wrapper, hold the floating right image to the
   wrapper's right edge (the section often has line/g-0 container). */
.about__area .about__img-right {
    right: 0;
}
/* Stop absolute-image cascading from leaving the section on RTL pages */
html[dir="rtl"] .about__area .about__img-right {
    right: auto;
    left: 0;
}

/* ============================================================
   HOMEPAGE PORTFOLIO — REAL PROJECT CARDS
   ============================================================
   Replaces the legacy "category icon" grid with a thumbnail
   layout that mirrors /portfolio so the home and portfolio
   pages stay visually in sync. */
.portfolio__list-projects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 40px;
}

.portfolio__item--project {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: #162032;
    aspect-ratio: 4 / 3;
    transition: transform 0.45s ease, box-shadow 0.45s ease;
}

.portfolio__item--project:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.portfolio__item--project a {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.portfolio__item--project img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.65s ease;
}

.portfolio__item--project:hover img {
    transform: scale(1.06);
}

.portfolio__item--project .portfolio__info {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 22px 24px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
    transform: translateY(0);
    transition: padding 0.3s ease;
}

.portfolio__item--project .portfolio__title {
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    font-weight: 600;
    margin: 0 0 4px;
    color: #fff;
}

.portfolio__item--project .portfolio__category {
    font-size: 0.85rem;
    color: #d6b9a8;
    margin: 0;
    letter-spacing: 0.02em;
}

.portfolio__empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #777;
    font-size: 1rem;
    padding: 40px 0;
}

@media (max-width: 1199px) {
    .portfolio__list-projects { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

@media (max-width: 767px) {
    .portfolio__list-projects { grid-template-columns: 1fr; gap: 18px; }
    .portfolio__item--project { aspect-ratio: 16 / 11; }
}

/* ============================================================
   OFF-CANVAS — LUXURY MOBILE REDESIGN
   ============================================================
   header.php ships the menu UL with an inline `style="display:none"`
   that mean-menu JS toggles on a tap. In the desktop off-canvas the
   menu was being made visible by JS, but inside our stacked mobile
   layout that mechanism stops working — only the first link leaks
   out, and the search/contact panels stack on top of the missing
   menu. We forcibly override:
     • the inline display:none on the menu list,
     • the redundant in-canvas hamburger toggle,
     • the bizarre letter-by-letter <span> markup that makes each
       link 9 chars tall on a phone.

   Final visual: full-size legible menu first, then a hairline
   divider before each subsequent band (search → contact → social
   → links). Every band sits inside a 22px gutter — no more
   content touching the panel edge.

   Section order top → bottom:
     1. Page menu                  (.offcanvas__mid)
     2. Search bar                 (.offcanvas__search)
     3. Contact (phone/email/addr) (.offcanvas__contact)
     4. Follow Us (social chips)   (.offcanvas__social)
     5. Privacy / footer links     (.offcanvas__links)
   ============================================================ */
@media (max-width: 767px) {
    .offcanvas__body {
        display: flex !important;
        flex-direction: column;
        gap: 0;
        padding: 72px 22px 56px;
        overflow-y: auto;
        max-height: 100vh;
        background: linear-gradient(180deg, #0a1626 0%, #0d1b2e 100%);
    }

    /* Order: menu first, then right (search+contact), then left (social+privacy). */
    .offcanvas__mid   { order: 1; margin: 0 0 8px; display: flex !important; flex-direction: column; }
    .offcanvas__right { order: 2; display: flex !important; flex-direction: column; width: 100%; padding: 0; margin: 0; position: relative; }
    .offcanvas__left  { order: 3; display: flex !important; flex-direction: column; width: 100%; padding: 0; margin: 0; }

    /* Decorative blob shapes don't translate to the stacked layout. */
    .offcanvas__right .shape-1,
    .offcanvas__right .shape-2 { display: none; }
    /* Skip the in-canvas logo on phones — the page header already shows it. */
    .offcanvas__left .offcanvas__logo { display: none; }

    /* ─────────────────────────────────────────────────────────────
       MENU LIST — force visible, hide redundant scaffolding
       ─────────────────────────────────────────────────────────── */
    .offcanvas__menu-wrapper.mean-container,
    .offcanvas__menu-wrapper .mean-bar,
    .offcanvas__menu-wrapper .mean-nav {
        width: 100% !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        position: static !important;
    }
    /* Hide the redundant in-canvas hamburger toggle that mean-menu
       injects — the close X is already at the top right. */
    .offcanvas__menu-wrapper .mean-bar > .meanmenu-reveal { display: none !important; }
    /* `mean-push` is a 1px spacer mean-menu uses on its primary nav
       host; harmless to hide here. */
    .mean-push { display: none !important; }

    /* THE FIX — override the inline style="display:none" that
       header.php sets on the menu UL. mean-menu would normally
       toggle this; inside our nested off-canvas it never gets a
       chance, leaving 4 of 5 links invisible. */
    .offcanvas__menu-wrapper ul.menu-anim {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .offcanvas__menu-wrapper ul.menu-anim > li {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 0;
        margin: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .offcanvas__menu-wrapper ul.menu-anim > li:last-child { border-bottom: 0; }
    .offcanvas__menu-wrapper ul.menu-anim > li > a {
        display: block;
        padding: 18px 4px;
        font-family: var(--ct-font-display, 'Funnel Display'), sans-serif;
        font-size: 1.6rem;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: 0.02em;
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        transition: color 0.25s ease, padding-left 0.25s ease;
    }
    .offcanvas__menu-wrapper ul.menu-anim > li > a:hover,
    .offcanvas__menu-wrapper ul.menu-anim > li > a:focus {
        color: #d6b9a8;
        padding-left: 10px;
    }
    /* The desktop "letter-by-letter" span structure makes each link
       1 character per row on a phone. Flatten back to inline runs. */
    .offcanvas__menu-wrapper .menu-text {
        display: inline !important;
        width: auto !important;
        height: auto !important;
    }
    .offcanvas__menu-wrapper .menu-text span {
        display: inline !important;
        width: auto !important;
        height: auto !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* ─────────────────────────────────────────────────────────────
       BAND DIVIDERS + GUTTERS — every section gets 2px of side
       padding so content never touches the panel edge
       ─────────────────────────────────────────────────────────── */
    .offcanvas__search,
    .offcanvas__contact,
    .offcanvas__social,
    .offcanvas__links {
        position: relative;
        padding: 28px 2px 22px !important;
        margin: 0;
    }
    .offcanvas__search::before,
    .offcanvas__contact::before,
    .offcanvas__social::before,
    .offcanvas__links::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(214, 185, 168, 0.32) 50%, transparent 100%);
    }

    /* ── Search band — first under the menu, no top rule needed ── */
    .offcanvas__search { padding-top: 28px !important; }
    .offcanvas__search .ct-search-wrap { width: 100%; max-width: 100%; }

    /* ── Uppercase gold section caption ───────────────────────── */
    .offcanvas__social .social-title,
    .offcanvas__contact p {
        display: block;
        font-family: var(--ct-font-display, 'Funnel Display'), sans-serif;
        font-size: 11px;
        font-weight: 600;
        color: #d6b9a8;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        margin: 0 0 20px;
        padding: 0 !important;
    }

    /* ── Contact band ─────────────────────────────────────────── */
    .offcanvas__contact ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .offcanvas__contact li,
    .offcanvas__contact address { margin: 0; padding: 0; font-style: normal; }
    .offcanvas__contact li a {
        position: relative;
        display: block;
        padding: 10px 12px 10px 50px;
        font-size: 0.98rem;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
        word-break: break-word;
    }
    .offcanvas__contact li a:hover,
    .offcanvas__contact li a:focus {
        color: #d6b9a8;
        background: rgba(214, 185, 168, 0.05);
        border-color: rgba(214, 185, 168, 0.25);
    }
    .offcanvas__contact li a::before {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: rgba(214, 185, 168, 0.1);
        color: #d6b9a8;
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 11px;
        transition: background 0.25s ease;
    }
    .offcanvas__contact li:nth-child(1) a::before { content: "\f095"; }  /* phone   */
    .offcanvas__contact li:nth-child(2) a::before { content: "\f0e0"; }  /* envelope */
    .offcanvas__contact li:nth-child(3) a::before { content: "\f3c5"; }  /* map-pin */
    .offcanvas__contact li a:hover::before { background: rgba(214, 185, 168, 0.2); }

    /* ── Follow Us band — icon chips ──────────────────────────── */
    .offcanvas__social ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }
    .offcanvas__social ul li { margin: 0; padding: 0; }
    .offcanvas__social ul li a {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 18px 10px 16px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(214, 185, 168, 0.2);
        border-radius: 999px;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 500;
        text-decoration: none;
        transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, color 0.25s ease;
    }
    .offcanvas__social ul li a::before {
        font-family: "Font Awesome 6 Brands";
        font-size: 14px;
        color: #d6b9a8;
        width: 18px;
        text-align: center;
        transition: color 0.25s ease;
    }
    .offcanvas__social ul li a[aria-label*="Instagram"]::before { content: "\f16d"; }
    .offcanvas__social ul li a[aria-label*="LinkedIn"]::before  { content: "\f0e1"; }
    .offcanvas__social ul li a[aria-label*="Twitter"]::before,
    .offcanvas__social ul li a[aria-label*="X"]::before         { content: "\e61b"; } /* x-twitter */
    .offcanvas__social ul li a[aria-label*="Telegram"]::before  { content: "\f2c6"; }
    .offcanvas__social ul li a:hover,
    .offcanvas__social ul li a:focus {
        background: rgba(214, 185, 168, 0.12);
        border-color: rgba(214, 185, 168, 0.55);
        color: #d6b9a8;
        transform: translateY(-2px);
    }
    .offcanvas__social ul li a:hover::before { color: #d6b9a8; }

    /* ── Footer link strip ────────────────────────────────────── */
    .offcanvas__links { margin-top: 4px; padding-bottom: 0 !important; }
    .offcanvas__links ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 10px 18px;
    }
    .offcanvas__links ul li a {
        font-size: 0.82rem;
        color: rgba(255, 255, 255, 0.5);
        text-decoration: none;
        letter-spacing: 0.04em;
        transition: color 0.25s ease;
    }
    .offcanvas__links ul li a:hover { color: #d6b9a8; }

    /* Close button — small visual nudge so it doesn't crash into the
       luxury layout, plus high z-index so it never gets covered. */
    .offcanvas__close {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 10;
    }
    .offcanvas__close button {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #fff;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.25s ease, border-color 0.25s ease;
    }
    .offcanvas__close button:hover {
        background: rgba(214, 185, 168, 0.18);
        border-color: rgba(214, 185, 168, 0.4);
    }
}

/* ============================================================
   ABOUT US — "+45 YEARS OF COMBINED MASTERY" TEAM AVATARS
   ============================================================
   The stacked-avatars chip next to the +45 number is the visual
   shorthand for "our team has 45 years between them". Each photo
   is rendered in black & white for editorial-style consistency
   (Farshad → Aria, in the same order as the team grid below).
   On hover, a single avatar pops back to colour to invite
   interaction without breaking the monochrome composition. */
.mxd-avatars--team {
    display: flex;
    align-items: center;
    gap: 0;
}
.mxd-avatars--team .mxd-avatars__item {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    background: #162032;
    margin-left: -16px;
    transition: transform 0.35s ease, z-index 0s linear 0.35s;
    z-index: 1;
}
.mxd-avatars--team .mxd-avatars__item:first-child { margin-left: 0; }
.mxd-avatars--team .mxd-avatars__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.05);
    transition: filter 0.45s ease, transform 0.45s ease;
    display: block;
}
.mxd-avatars--team .mxd-avatars__item:hover {
    transform: translateY(-4px) scale(1.08);
    z-index: 5;
    transition: transform 0.35s ease, z-index 0s linear;
}
.mxd-avatars--team .mxd-avatars__item:hover img {
    filter: grayscale(0%) saturate(1.1);
}

@media (max-width: 991px) {
    .mxd-avatars--team .mxd-avatars__item { width: 52px; height: 52px; margin-left: -14px; border-width: 2px; }
}
@media (max-width: 575px) {
    .mxd-avatars--team .mxd-avatars__item { width: 44px; height: 44px; margin-left: -12px; }
}

/* ============================================================
   TEAM SHOWCASE — staggered photo grid + member list
   ============================================================
   Layout:
     LEFT  → 3 photo columns; col 2 is offset downward, col 3 less so,
             producing the "thrown-on-the-table polaroid" stagger.
             Photos are filtered grayscale + dim by default; the
             hovered/active one comes back to full colour while the
             rest fade further.
     RIGHT → A single-column list of names, each with a chip on the
             left and a small uppercase role beneath. Hover/focus on
             a photo OR a name triggers the same `.is-active` state
             on its sibling (a tiny JS helper wires this up by data-id).
   The component is keyboard-friendly — photos are <button>s and the
   list rows are tab-stops, so :focus-within mirrors hover. */
.ct-team-showcase {
    display: flex;
    flex-direction: column;
    align-items: center;          /* centre the photo grid + list column on phones */
    justify-content: center;      /* centre the pair on desktop */
    gap: 36px;
    width: 100%;
    max-width: 980px;             /* smaller so margin auto truly centres the composition */
    margin: 0 auto;
    padding: 8px 0 0;
    color: #fff;
}
@media (min-width: 992px) {
    .ct-team-showcase {
        flex-direction: row;
        align-items: flex-start;  /* photos start at the top, list sits beside them */
        gap: 64px;
        padding: 16px 0 0;
    }
}

/* ── LEFT: photo grid ── */
.ct-team-photos {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.ct-team-photos::-webkit-scrollbar { display: none; }
.ct-team-photos { scrollbar-width: none; }

@media (min-width: 992px) {
    .ct-team-photos {
        overflow: visible;
        padding-bottom: 0;
        gap: 14px;
    }
}

.ct-team-photo-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}
@media (min-width: 992px) {
    .ct-team-photo-col { gap: 14px; }
}
/* The vertical stagger that gives the grid its editorial feel. */
.ct-team-photo-col--2 { margin-top: 48px; }
.ct-team-photo-col--3 { margin-top: 22px; }
@media (min-width: 768px) {
    .ct-team-photo-col--2 { margin-top: 56px; }
    .ct-team-photo-col--3 { margin-top: 26px; }
}
@media (min-width: 992px) {
    .ct-team-photo-col--2 { margin-top: 68px; }
    .ct-team-photo-col--3 { margin-top: 32px; }
}

.ct-team-photo {
    position: relative;
    display: block;
    flex-shrink: 0;
    overflow: hidden;
    border: 0;
    padding: 0;
    background: #091422;
    border-radius: 14px;
    cursor: pointer;
    scroll-snap-align: center;
    transition: opacity 0.4s ease, transform 0.4s ease;
    /* default size (mobile) */
    width: 110px;
    height: 120px;
}
.ct-team-photo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(1) brightness(0.77);
    transition: filter 0.5s ease, transform 0.6s ease;
}
.ct-team-photo:hover,
.ct-team-photo:focus-visible,
.ct-team-photo.is-active {
    outline: none;
    opacity: 1;
}
.ct-team-photo:hover > img,
.ct-team-photo:focus-visible > img,
.ct-team-photo.is-active > img {
    filter: grayscale(0) brightness(1);
    transform: scale(1.04);
}
/* When another item in the showcase is active, dim everyone else. */
.ct-team-showcase.has-active .ct-team-photo:not(.is-active) { opacity: 0.55; }

/* Per-column sizes so the three columns look intentionally uneven. */
@media (min-width: 576px) {
    .ct-team-photo-col--1 .ct-team-photo { width: 130px; height: 140px; }
    .ct-team-photo-col--2 .ct-team-photo { width: 145px; height: 155px; }
    .ct-team-photo-col--3 .ct-team-photo { width: 136px; height: 146px; }
}
@media (min-width: 992px) {
    .ct-team-photo-col--1 .ct-team-photo { width: 155px; height: 165px; }
    .ct-team-photo-col--2 .ct-team-photo { width: 172px; height: 182px; }
    .ct-team-photo-col--3 .ct-team-photo { width: 162px; height: 172px; }
}

/* ── RIGHT: member list ── */
.ct-team-list {
    flex: 0 1 auto;               /* shrink to content so the pair stays centred */
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    width: 100%;
    max-width: 420px;             /* readable rag-right column */
}
@media (min-width: 576px) and (max-width: 991px) {
    .ct-team-list {
        grid-template-columns: 1fr 1fr;
        column-gap: 24px;
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    .ct-team-list {
        gap: 22px;
        padding-top: 8px;
        flex: 0 0 340px;          /* fixed slot so the row stays balanced */
        max-width: 340px;
    }
}

.ct-team-row {
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease;
    outline: none;
}
.ct-team-row:focus-visible { transform: translateX(4px); }
.ct-team-showcase.has-active .ct-team-row:not(.is-active) { opacity: 0.45; }

.ct-team-row-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ct-team-chip {
    display: inline-block;
    width: 16px;
    height: 12px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.22);
    flex-shrink: 0;
    transition: background 0.35s ease, width 0.35s ease;
}
.ct-team-row.is-active .ct-team-chip,
.ct-team-row:hover .ct-team-chip,
.ct-team-row:focus-visible .ct-team-chip {
    width: 22px;
    background: #d6b9a8;
}

.ct-team-name {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.82);
    transition: color 0.3s ease;
}
.ct-team-row.is-active .ct-team-name,
.ct-team-row:hover .ct-team-name,
.ct-team-row:focus-visible .ct-team-name {
    color: #fff;
}

.ct-team-role {
    margin: 8px 0 0;
    padding-left: 26px;
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.5);
}
@media (min-width: 768px) {
    .ct-team-role { font-size: 0.7rem; }
}

.ct-team-socials {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 2px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
.ct-team-row.is-active .ct-team-socials,
.ct-team-row:hover .ct-team-socials,
.ct-team-row:focus-within .ct-team-socials {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
.ct-team-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.7rem;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.ct-team-socials a:hover {
    color: #d6b9a8;
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.1);
}

/* Hide the old team-stack scaffolding now that the showcase replaces it. */
.team-stack-wrapper.team-stack-fallback,
.team-stack-offset { display: none !important; }

/* ============================================================
   HOMEPAGE PORTFOLIO — EXPANDING HORIZONTAL GALLERY
   ============================================================
   Six tiles sit shoulder-to-shoulder. Each is given a fluid base
   width via `flex: 1 1 0` but with a strong `min-width` so they
   stay readable. On hover/focus, the touched tile's `flex-grow`
   jumps to a huge number, so it grabs almost all of the row while
   the siblings shrink to their min-width. The transition runs on
   `flex`, which animates smoothly in modern engines. */
.ct-gallery__head {
    text-align: center;
    margin-bottom: 56px;
    position: relative;
    z-index: 1;
}
.ct-gallery__head .ct-gallery__title.portfolio__text {
    text-align: center !important;
    margin: 0 0 14px;
    padding: 0;
    color: #fff;
    /* Override the 120px/50px padding that .portfolio__text adds from main.css */
    font-size: clamp(2.4rem, 4.5vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.ct-gallery__sub {
    max-width: 640px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.6);
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.65;
}

.ct-gallery__row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    height: clamp(360px, 52vw, 580px);
    margin: 40px 0 60px;
    padding: 0;
    position: relative;
    z-index: 2;
}

/* Each tile is now a slim frosted-glass column. At rest it shows only the
   category name set vertically (mirroring the rotated phone label in the
   sidebar menu); on hover/focus the same flex-grow expansion reveals a
   horizontal panel with the title, a blurb and a CTA. No images. */
.ct-gallery__item {
    position: relative;
    flex: 1 1 0;
    min-width: 84px;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(34, 48, 74, 0.55) 0%, rgba(13, 20, 36, 0.62) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    backdrop-filter: blur(16px) saturate(135%);
    border: 1px solid rgba(214, 185, 168, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 24px 55px -34px rgba(0, 0, 0, 0.85);
    text-decoration: none;
    color: #fff;
    /* Gentler expand — 1.4s with a slow-out curve feels luxurious instead
       of snappy. The longer the hover, the more deliberate the reveal. */
    transition: flex-grow 1.4s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.6s ease, box-shadow 0.6s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Luminous top sheen — preserved from the navy+gold palette work. */
.ct-gallery__item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(130% 65% at 50% 0%, rgba(214, 185, 168, 0.14) 0%, transparent 60%);
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 0.8s ease;
}

.ct-gallery__item:hover,
.ct-gallery__item:focus-visible,
.ct-gallery__item.is-active {
    flex-grow: 99;
    outline: none;
    border-color: rgba(214, 185, 168, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 30px 65px -32px rgba(0, 0, 0, 0.9);
}
.ct-gallery__item:hover::before,
.ct-gallery__item:focus-visible::before,
.ct-gallery__item.is-active::before { opacity: 1; }

/* Vertical resting label — bottom-to-top, matching the sidebar phone. */
.ct-cat__label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    margin: 0;
    font-size: clamp(1.05rem, 1.5vw, 1.45rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
    transition: opacity 0.45s ease;
}
.ct-gallery__item:hover .ct-cat__label,
.ct-gallery__item:focus-visible .ct-cat__label,
.ct-gallery__item.is-active .ct-cat__label { opacity: 0; }

/* Expanded panel — hidden until the tile grows. */
.ct-cat__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(16px, 1.8vw, 24px);
    padding: clamp(26px, 3vw, 48px);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.7s ease 0.25s,
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
    pointer-events: none;
}
.ct-gallery__item:hover .ct-cat__panel,
.ct-gallery__item:focus-visible .ct-cat__panel,
.ct-gallery__item.is-active .ct-cat__panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Title sits in a rounded rectangular plate at the top of the panel. */
.ct-cat__title {
    align-self: flex-start;
    max-width: 100%;
    margin: 0;
    padding: 14px 22px;
    font-size: clamp(1.4rem, 2.3vw, 2.15rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(214, 185, 168, 0.18) 0%, rgba(214, 185, 168, 0.05) 100%);
    border: 1px solid rgba(214, 185, 168, 0.3);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.ct-cat__desc {
    margin: 0;
    max-width: 540px;
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.74);
}
.ct-cat__btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 28px;
    border-radius: 999px;
    background: #d6b9a8;
    color: #12203a;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 12px 32px -12px rgba(214, 185, 168, 0.6);
    transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}
.ct-cat__btn i { transition: transform 0.4s ease; }
.ct-cat__btn:hover {
    transform: translateY(-2px);
    background: #e0c8ba;
    box-shadow: 0 18px 42px -12px rgba(214, 185, 168, 0.78);
}
.ct-cat__btn:hover i { transform: translateX(5px); }

/* Tablet — lower min-width so 6 columns still fit; shorter row. */
@media (max-width: 991px) {
    .ct-gallery__row {
        height: clamp(320px, 60vw, 480px);
        gap: 8px;
    }
    .ct-gallery__item { min-width: 58px; border-radius: 12px; }
    .ct-cat__label { letter-spacing: 0.12em; font-size: clamp(1rem, 1.8vw, 1.2rem); }
}

/* Phone — vertical columns are too cramped without a pointer, so each
   category becomes a full-width stacked card with the panel always open
   (the vertical label is dropped). Tap-to-expand from ct-gallery.js is
   no longer needed here but stays harmless. */
@media (max-width: 767px) {
    .ct-gallery__row {
        flex-direction: column;
        height: auto;
        gap: 14px;
        margin: 40px 0 50px;
    }
    .ct-gallery__item {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        min-width: 0;
    }
    .ct-cat__label { display: none; }
    .ct-cat__panel {
        position: static;
        inset: auto;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        padding: 30px 24px;
    }
    .ct-cat__title { font-size: 1.5rem; }
}

/* ============================================================
   THREE PILLARS — RESPONSIVE CARD REDESIGN (homepage)
   ============================================================
   Desktop (≥1200px) keeps the original layout untouched:
     • Floating image column on the left (.service__img-wrapper),
       crossfading between three pictures driven by JS hover.
     • Each row is a 4-column grid: number | title | text | arrow.

   Below 1200px the floating image is hidden (see responsive.css)
   and the row layout breaks down on narrow viewports — text was
   wedged against the column edge, and the arrow disappeared on
   phones. We rebuild each pillar as a self-contained card.

   Per-feedback iteration:
     • Tablet + narrow-desktop (576-1199px) — NO per-item image.
       The user gets a clean horizontal card: small gold number
       caption, left-aligned title, description, gold arrow pill
       on the right. The desktop hover already crossfades the
       floating column when room allows; duplicating a small
       thumbnail inside each card felt redundant.
     • Phone (≤575px) ONLY — show the per-item image as a banner
       on top of the card, since there's no floating column at
       that width and the visual needs the image to land at all.
   ============================================================ */

/* Hidden by default — desktop ≥1200px uses the floating column. */
.service__item-img { display: none; }

@media (max-width: 1199px) {

    /* The pillar column gets normal flow + a visible flex stack. */
    .service__list-wrapper .service__list {
        display: flex;
        flex-direction: column;
        gap: 22px;
    }

    /* Each pillar becomes a self-contained card. The grid has only
       three columns at this breakpoint (no image): number | title /
       text | arrow. Title sits on row 1 next to the number; the
       description spans the same two columns on row 2; the arrow
       pill spans both rows on the right. */
    .service__list-wrapper .service__item {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) 52px !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "num   title arrow"
            "text  text  arrow" !important;
        column-gap: 16px;
        row-gap: 10px;
        align-items: center !important;
        padding: 24px 26px !important;
        margin: 0 !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005)) !important;
        border: 1px solid rgba(214, 185, 168, 0.14) !important;
        border-radius: 20px !important;
        text-align: left !important;
        transition: border-color 0.35s ease, transform 0.35s ease, background 0.35s ease !important;
    }
    .service__list-wrapper .service__item:hover {
        border-color: rgba(214, 185, 168, 0.42) !important;
        /* Navy fill on hover so the white text + gold arrow stay readable on
           touch / no-pointer devices (there is no floating image at this width). */
        background: linear-gradient(135deg, #162032 0%, #0d1b2e 100%) !important;
        transform: translateY(-3px);
    }

    /* Per-item image is REMOVED at this breakpoint — the user found
       it redundant against the floating-column hover image. Phone
       (≤575px) restores it below. */
    .service__list-wrapper .service__item-img { display: none !important; }

    /* Number — same gray palette as desktop (var(--gray-2) = #999) so
       the mobile card matches the desktop pillar list, then transitions
       to white on hover/active just like desktop. */
    .service__list-wrapper .service__number {
        grid-area: num;
        align-self: center;
        padding: 0 !important;
        margin: 0 !important;
    }
    .service__list-wrapper .service__number span {
        display: inline-block;
        font-size: 0.85rem !important;
        font-weight: 700;
        letter-spacing: 0.18em;
        color: var(--gray-2) !important;
        text-align: left !important;
        transition: color 0.3s ease;
    }

    /* Title — desktop colour, desktop alignment, mobile size. */
    .service__list-wrapper .service__title-wrapper {
        grid-area: title;
        align-self: center;
        min-width: 0;
        text-align: left !important;
        justify-content: flex-start !important;
    }
    .service__list-wrapper .service__title {
        font-size: clamp(1.15rem, 2.4vw, 1.6rem) !important;
        color: var(--gray-2) !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        text-align: left !important;
        word-break: break-word;
        transition: color 0.3s ease;
    }

    /* Description — desktop colour token. */
    .service__list-wrapper .service__text {
        grid-area: text;
        align-self: start;
        min-width: 0;
        text-align: left !important;
    }
    .service__list-wrapper .service__text p {
        color: var(--gray-2) !important;
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin: 0 !important;
        text-align: left !important;
        transition: color 0.3s ease;
    }

    /* Hover / focus — mirror the desktop rule that turns
       number / title / description text to white. */
    .service__list-wrapper .service__item:hover .service__number span,
    .service__list-wrapper .service__item:hover .service__title,
    .service__list-wrapper .service__item:hover .service__text p {
        color: var(--white) !important;
    }

    /* Arrow — circular gold pill on the right, centred vertically. */
    .service__list-wrapper .service__link {
        grid-area: arrow !important;
        align-self: center !important;
        justify-self: end !important;
        text-align: right !important;
        overflow: visible !important;
    }
    .service__list-wrapper .service__link p {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(214, 185, 168, 0.08);
        border: 1px solid rgba(214, 185, 168, 0.22);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #d6b9a8;
        margin: 0;
        padding: 0;
        font-size: 1rem !important;
        transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
    }
    .service__list-wrapper .service__link p::after { display: none !important; }
    .service__list-wrapper .service__link p i {
        font-size: 0.95rem;
        /* Theme already rotates the arrow -45deg; keep that intent
           but lock it so the hover scale doesn't double-rotate. */
        transform: rotate(-45deg);
    }
    .service__list-wrapper .service__item:hover .service__link p {
        background: #d6b9a8;
        color: #162032;
        transform: scale(1.08);
    }
}

/* Phone — vertical stack: image becomes a banner on top. */
@media (max-width: 575px) {
    .service__list-wrapper .service__item {
        grid-template-columns: minmax(0, 1fr) 44px !important;
        grid-template-rows: auto auto auto auto !important;
        grid-template-areas:
            "img    img"
            "num    arrow"
            "title  arrow"
            "text   text" !important;
        column-gap: 14px;
        row-gap: 10px;
        padding: 18px !important;
    }
    .service__list-wrapper .service__item-img {
        display: block !important;
        grid-area: img;
        width: 100%;
        aspect-ratio: 16 / 10;
        border-radius: 14px;
        overflow: hidden;
        background: #162032;
        margin-bottom: 4px;
    }
    .service__list-wrapper .service__item-img img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover;
        display: block;
        transition: transform 0.6s ease, filter 0.5s ease;
        filter: brightness(0.92);
    }
    .service__list-wrapper .service__item:hover .service__item-img img {
        transform: scale(1.04);
        filter: brightness(1);
    }
    .service__list-wrapper .service__number      { align-self: end;   }
    .service__list-wrapper .service__title-wrapper { align-self: start; }
    .service__list-wrapper .service__link        { align-self: center; }
    .service__list-wrapper .service__link p      { width: 40px; height: 40px; }
}

/* ============================================================
   PORTFOLIO HERO MARQUEE — mobile scaling
   ============================================================
   The marquee items are 430×320 by default, with caption text at
   2.2rem (~35px). On a phone that means each card is wider than
   the viewport and the caption type is dwarfed by the surrounding
   black tile. We scale items down proportionally so the cards
   read like miniature versions of the desktop tiles, then bump
   the caption size relative to the new tile so the gold "Built to
   Scale" / "Designed to Sell" tags still feel commanding.
   ============================================================ */
@media (max-width: 767px) {
    .marquee__item {
        width: 280px !important;
        height: 210px !important;
        margin-right: 0.875rem;
        margin-top: 0.75rem;
        border-radius: 14px;
    }
    /* Make image tiles FILL the box exactly like the text tiles (and like desktop).
       responsive.css caps the img max-height on mobile, which left the image
       shorter than its box, so image boxes didn't match the text boxes. */
    .marquee__item img,
    .marquee__item .marquee__link img {
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover;
        /* Round the image DIRECTLY — the marquee parent is transform-animated, and
           transformed ancestors don't reliably clip border-radius+overflow on mobile,
           which left the image corners sharp. */
        border-radius: 14px;
    }
    .marquee__item .marquee__link { border-radius: 14px; overflow: hidden; }
    .marquee__item.has-caption {
        padding: 1.4rem;
    }
    .marquee__item.has-caption p {
        font: normal 600 1.7rem/1.15 var(--ct-font-display, 'Funnel Display'), sans-serif;
    }
}

@media (max-width: 479px) {
    .marquee__item {
        width: 220px !important;
        height: 165px !important;
        margin-right: 0.75rem;
        border-radius: 12px;
    }
    .marquee__item img,
    .marquee__item .marquee__link img {
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover;
        border-radius: 12px;
    }
    .marquee__item .marquee__link { border-radius: 12px; overflow: hidden; }
    .marquee__item.has-caption {
        padding: 1.1rem;
    }
    .marquee__item.has-caption p {
        font-size: 1.4rem;
    }
}

/* ============================================================
   PORTFOLIO FILTER RAIL — horizontal scroll, minimal black/white
   ============================================================
   Pulled from the 21st.dev MiniNavbar reference the user shared:
   • Dark glass pill (`rgba(22, 32, 50,0.62)` + 6px backdrop-blur)
   • Light-gray label that goes pure white on hover/active
   • 1px `#333` border that lights up to `rgba(255,255,255,0.5)`
   • Pills sit in a flex row that scrolls horizontally — never
     wraps — with snap-points and edge fades that hint at more
     content on either side. The scrollbar itself is hidden.
   The legacy `.portfolio__filter-wrapper` class is preserved as a
   sibling on each button so the existing Isotope JS keeps working.
   ============================================================ */

/* "Website Categories" heading above the portfolio filter rail (dark page). */
.ct-filter-heading {
    text-align: center;
    color: #fff;
    font-size: clamp(1.7rem, 3.4vw, 2.7rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 32px;
}

.ct-filter {
    position: relative;
    width: 100%;
}

.ct-filter__rail {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 28px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Fade-edge mask so the row visually feathers at left/right — a subtle cue
       that more pills are scrollable into view (on the rail, not the wrapper, so
       the ‹ › arrows below stay crisp). */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.ct-filter__rail::-webkit-scrollbar { display: none; }

/* Prev/next slide controls — hidden until JS detects the pills overflow, then
   shown via .is-visible (cloudtart-filter-rail.js). They sit over the faded
   edges; left = scroll left, right = scroll right (direction-agnostic). */
.ct-filter__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 38px;
    height: 38px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #333;
    background: rgba(8, 14, 24, 0.95);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    color: #eceef2;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.ct-filter__nav.is-visible { display: inline-flex; }
.ct-filter__nav:hover,
.ct-filter__nav:focus-visible {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
    outline: none;
}
.ct-filter__nav--prev { left: -4px; }
.ct-filter__nav--next { right: -4px; }

.ct-filter__pill {
    flex-shrink: 0;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    background: rgba(22, 32, 50, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid #333;
    border-radius: 999px;
    color: #d1d5db;        /* gray-300 */
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    font-family: var(--ct-font-body, 'Funnel Sans'), sans-serif;
}
.ct-filter__pill:hover,
.ct-filter__pill:focus-visible {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    outline: none;
}
.ct-filter__pill.is-active,
.ct-filter__pill.active {
    background: rgba(255, 255, 255, 0.92);
    color: #081320;
    border-color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 575px) {
    .ct-filter__rail { padding: 10px 20px; gap: 8px; }
    .ct-filter__pill { padding: 9px 18px; font-size: 0.82rem; }
}

/* ============================================================
   CANVAS REVEAL — animated dot grid behind the portfolio cards
   ============================================================ */
.ct-canvas-reveal-host {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(ellipse at top, #162032 0%, #081320 60%, #060f1b 100%);
}
.ct-canvas-reveal-host > .container {
    position: relative;
    z-index: 1;
}
.ct-canvas-reveal {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    /* Vignette so the dot field intensifies in the middle, fades
       at the section edges — gives the cards a glowing stage. */
    -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, rgba(0,0,0,0.65) 60%, transparent 95%);
            mask-image: radial-gradient(ellipse at center, #000 25%, rgba(0,0,0,0.65) 60%, transparent 95%);
}

/* ============================================================
   LANGUAGE SWITCHER (Polylang)
   ============================================================
   Rendered inside .footer__copyright via cloudtart_language_switcher().
   Two or more language slugs separated by a centered slash divider.
   Active slug is gold; inactive is muted white; both transition to
   full gold on hover. Only visible when Polylang is active and more
   than one language is configured. */
.ct-lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-top: 10px;
}

.ct-lang-item {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    text-decoration: none;
    padding: 4px 2px;
    line-height: 1;
    transition: color 0.3s ease;
}

.ct-lang-item + .ct-lang-item::before {
    content: "/";
    display: inline-block;
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.15);
    font-weight: 400;
    letter-spacing: 0;
}

.ct-lang-item:hover,
.ct-lang-item--active {
    color: #d6b9a8;
}

/* RTL: the divider slash position stays the same —
   the slash visually separates slugs regardless of direction. */
html[dir="rtl"] .ct-lang-item + .ct-lang-item::before {
    margin: 0 8px;
}

/* ============================================================
   THREE PILLARS — REST-STATE READABILITY (homepage .service__area)
   ============================================================
   The pillar number / title / description use `var(--gray-2)` for their
   resting colour. After the navy+gold migration that token resolves to the
   light rose-gold #d6b9a8, which is unreadable (~1.8:1) on this section's
   light background. On hover the theme already switches the text to white
   (revealed over the floating dark image on desktop).

   Fix = re-scope ONLY the `--gray-2` custom property inside this section to
   the palette's "Text Soft" (#6b7a8d, ~4.5:1 on white). Because the hover/
   active rules use `var(--white)` — not --gray-2 — the hover reveal is left
   completely intact, and there is no specificity battle. */
.service__area,
.service__list-wrapper {
    --gray-2: #6b7a8d;
}

/* ============================================================
   CULTURE PANEL (about-us) — readable text on the gold metallic bg
   ============================================================
   The panel sits on a light metallic-gold gradient, so the original white
   heading / intro / card text wash out on the pale gold stops. Use navy on the
   gold (heading + intro + card text at rest — high contrast, luxury); on hover
   the card darkens to navy glass, so the card text flips to white for the lift. */
.culture__area .header_v2 { color: #0d1b2e; }
.culture__area .sec-title-wrapper p { color: rgba(13, 27, 46, 0.85); }

.culture__area .culture__title { color: #0d1b2e; }
.culture__area .culture__text  { color: rgba(13, 27, 46, 0.82); }

.culture__area .culture__item:hover {
    background: rgba(13, 27, 46, 0.62);
    border-color: rgba(13, 27, 46, 0.6);
}
.culture__area .culture__item:hover .culture__title { color: #ffffff; }
.culture__area .culture__item:hover .culture__text  { color: rgba(255, 255, 255, 0.85); }

/* ============================================================
   HOMEPAGE SERVICES STACK — card visibility + separation
   ============================================================
   The pinned scroll-stack cards (.services-stack .stack-item) sit on the navy
   page background. Problems reported:
     • the navy `.bg-base-opp` cards were the SAME colour as the page, so their
       frame was invisible;
     • cards butted edge-to-edge with no separation as they slid across.
   Fix (pure CSS — the GSAP slide/pin logic is left untouched):
     • soft shadow + hairline frame on every card so the edge always reads;
     • lift the navy cards to navy-mid (#162032) so they stand off the #0d1b2e page;
     • a small horizontal gutter on desktop so cards keep breathing room while
       they slide (offsetWidth used by the GSAP maths is unchanged). */
.services-stack .mxd-services-stack__inner {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.services-stack .bg-base-opp {
    background-color: #162032 !important;        /* navy-mid: distinct from the #0d1b2e page */
    border: 1px solid rgba(214, 185, 168, 0.22);  /* faint gold frame */
}
.services-stack .bg-accent {
    border: 1px solid rgba(214, 185, 168, 0.22);
}
.services-stack .bg-base-tint {
    border: 1px solid rgba(13, 27, 46, 0.10);
}
@media (min-width: 992px) {
    .services-stack .stack-item {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ============================================================
   /contact/ HERO — "YOUR EMPIRE" visibility + mobile type scale
   ============================================================
   1) "YOUR EMPIRE." uses .highlight-cloudtart. theme.css styles it as a gold
      chip with NAVY text, but the global .highlight-cloudtart (the gold search-
      query colour) overrides the text to gold -> gold-on-gold = invisible.
      Restore navy text on the gold chip, scoped to the contact hero. */
.contact__hero .highlight-cloudtart {
    color: #0d1b2e;
    /* Luminous metallic rose-gold chip (replaces the old shiny gold) + soft glow. */
    background: linear-gradient(135deg, #f3e7dd 0%, #d6b9a8 45%, #b08d6b 100%);
    background-size: 200% auto;
    box-shadow: 0 8px 26px rgba(214, 185, 168, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    animation: gradientShift 4s ease-in-out infinite;
}

/* 2) Mobile: the headline spans have white-space:nowrap (they overflow on a
      phone) and the hierarchy reads wrong (the section's "LET'S TALK" looked
      bigger than the hero "LET'S ARCHITECT"). Let the headline wrap, make it
      clearly the largest type, and keep the section heading smaller. */
@media (max-width: 767px) {
    .contact__hero .hero__title {
        font-size: clamp(2.3rem, 9vw, 3.2rem);
        line-height: 1.12;
    }
    .contact__hero .hero__title span {
        white-space: normal;
    }
    .contact__info .header_v2 {
        font-size: clamp(1.35rem, 5vw, 1.8rem);
    }
}

/* ============================================================
   HOMEPAGE SERVICES STACK — MOBILE (<=991px) uses the desktop GSAP slide
   ============================================================
   The same right-to-left GSAP stack runs on mobile (cloudtart-main.js builds it
   on every width). For that the cards must OVERLAP (absolute) inside a sized
   container — exactly like desktop. responsive.css sets height:auto on mobile
   which collapses the absolute cards, so we restore a real height here. */
@media (max-width: 991px) {
    /* Mobile: GSAP stacking is disabled (JS calls teardownStack below 992px).
       responsive.css already sets the correct flex-column layout; these rules
       ensure nothing from prior override attempts interferes. */
    .stack-wrapper.in-content-stack { margin-top: 0; }
    .services-stack {
        position: relative;
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0;
        overflow: visible;
    }
    .services-stack .stack-item {
        position: static;
        width: 100%;
        height: auto;
        inset: auto;
        transform: none;
        opacity: 1;
        visibility: visible;
    }
    .services-stack .mxd-services-stack__inner { height: auto; min-height: 0; }
}

/* ============================================================
   HOMEPAGE VIDEO SECTION — remove the tall empty gap on mobile
   ============================================================
   .single__image-8 is a fixed 600px tall with pt-130/pb-200 (~930px total) at
   every width, so on phones it reads as a big empty band below the stats.
   Shrink the height + padding on small screens. */
@media (max-width: 767px) {
    .single__image-8 { height: clamp(210px, 58vw, 340px); }
    .single__image-8.pt-130 { padding-top: 50px; }
    .single__image-8.pb-200 { padding-bottom: 60px; }
}

/* ============================================================
   FOOTER "Got a project?" — drop the boxed background on mobile
   ============================================================
   .footer__widget-4 has a solid navy background (var(--black-4)) + huge padding,
   which on phones floats as an out-of-place box over the footer image. On mobile
   make it transparent so it sits directly on the footer background. */
@media (max-width: 767px) {
    .footer__widget-4 {
        background-color: transparent !important;
        padding: 28px 0 12px !important;
        margin-left: 0 !important;
    }
}

/* ============================================================
   HOMEPAGE ABOUT IMAGE — MOBILE PARALLAX FRAME (<=1023px)
   ============================================================
   ScrollSmoother (which honours the image's data-speed) only initialises at
   >=1024px, so on phones/tablets the About studio image is static. Give it an
   overflow-hidden frame with an oversized, vertically-centred image (10% hidden
   top + 10% bottom) so the companion ScrollTrigger parallax in cloudtart-main.js
   can drift it on scroll without ever exposing a gap. */
@media (max-width: 1023px) {
    .about__img .img-anim {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: clamp(260px, 58vw, 460px);
        border-radius: 16px;
    }
    .about__img .img-anim img {
        position: absolute;
        top: -17.5%;
        left: 0;
        width: 100%;
        height: 135%;       /* extra headroom so the parallax can travel further */
        object-fit: cover;
        will-change: transform;
    }
}

/* ============================================================
   /leaders-choice/ — "The CloudTart Advantage" pop cards
   ============================================================
   The cards are translucent (rgba glass), so a backdrop-filter blur on the
   active card blurs the hero content behind it — i.e. the background blurs as a
   card pops to the centre and sharpens as it settles back into its slot. The
   blur amount is driven by the GSAP timeline via the --ct-feat-blur variable
   (0px in the slot, ~10px when centred). */
.webdesign__hero .hero-feature-item {
    -webkit-backdrop-filter: blur(var(--ct-feat-blur, 0px));
    backdrop-filter: blur(var(--ct-feat-blur, 0px));
    will-change: transform;
    padding: 20px 22px;          /* a touch more compact than the original 25px */
}
@media (max-width: 575px) {
    .webdesign__hero .hero-feature-item { padding: 15px 16px; border-radius: 12px; margin-bottom: 16px; }
    .webdesign__hero .feature-number { width: 42px; height: 42px; font-size: 15px; margin-right: 14px; }
    .webdesign__hero .feature-content h3 { font-size: 1.08rem; }
    .webdesign__hero .feature-content p { font-size: 0.9rem; line-height: 1.5; }
}

/* ============================================================
   /what-we-do/ — luxury scroll titles (FLAGSHIP EXPERTISE / SEO OPERATIONS)
   ============================================================
   The animated title was a fixed 4rem, which is far too large on phones and
   makes the pinned forward/back motion overshoot the screen. Make the max size
   responsive (and tighten letter-spacing on small screens) so the movement
   stays inside the viewport at every breakpoint. The smoothing of the motion
   itself is tuned in services.js. */
.title-luxury .header_v2 {
    font-size: clamp(1.7rem, 6vw, 4rem) !important;
}
@media (max-width: 575px) {
    .title-luxury .header_v2 {
        letter-spacing: 1px;
        line-height: 1.1;
    }
}

/* ============================================================
   /leaders-choice/ — luminous "Advantage" headline word
   ============================================================
   Gold is gone (now rose-gold); to keep the glossy/luminous feel the gold gave
   this signature word, paint it with an animated metallic rose-gold text shine
   plus a soft glow. */
.webdesign__hero .hero-text-2 {
    background: linear-gradient(92deg, #e7d3c5 0%, #d6b9a8 30%, #b08d6b 55%, #e7d3c5 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: gradientShift 3.5s ease-in-out infinite;
    -webkit-filter: drop-shadow(0 0 14px rgba(214, 185, 168, 0.4));
    filter: drop-shadow(0 0 14px rgba(214, 185, 168, 0.4));
}

/* ============================================================
   HOMEPAGE BLOG CAROUSEL ("INSIDE THE LAB.") — TASK F
   ============================================================
   Replaces the old vertical/deformed 3-up grid with a smooth 7-up carousel of
   horizontal (1024×720) rounded thumbnails that are black & white and turn to
   colour on hover (transition preserved). */
.blog__area-2 .header_v3 {
    /* The base header_v3 scales up to 130px and overflowed its column (the
       "INSIDETHE LAB." overlap). Cap it so it fits beside the description. */
    font-size: clamp(1.9rem, 3.4vw, 3.4rem) !important;
    line-height: 1.06;
    word-spacing: normal;
    letter-spacing: normal;
    white-space: normal;
    display: block;
}
@media (min-width: 992px) {
    .blog__area-2 > .container > .row:first-child { align-items: center; }
}

.blog__swiper-2 { overflow: hidden; padding-bottom: 4px; }
.blog__swiper-2 .swiper-slide { height: auto; }
.blog__swiper-2 .blog__img-wrapper {
    display: block;
    overflow: hidden;
    border-radius: 16px;
    aspect-ratio: 1024 / 720;     /* horizontal rectangle, matches the upload size */
    background: #162032;
}
.blog__swiper-2 .blog__thumb-2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);          /* black & white by default */
    transition: filter 0.5s ease, -webkit-filter 0.5s ease, transform 0.65s ease;
}
.blog__swiper-2 .blog__item-2:hover .blog__thumb-2 {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);          /* colour on hover */
    transform: scale(1.05);
}
.blog__swiper-2 .blog__meta-2 { margin-top: 16px; color: #d6b9a8; font-size: 0.85rem; letter-spacing: 0.02em; }
.blog__swiper-2 .blog__title-2 { color: #fff; transition: color 0.25s ease; }
.blog__swiper-2 .blog__title-2:hover { color: #d6b9a8; }

.blog__carousel-nav { display: flex; gap: 12px; justify-content: flex-end; margin-top: 28px; }
.blog__nav-prev, .blog__nav-next {
    width: 50px; height: 50px; border-radius: 50%;
    border: 1px solid rgba(214, 185, 168, 0.35);
    background: transparent; color: #d6b9a8;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.blog__nav-prev:hover, .blog__nav-next:hover { background: #d6b9a8; color: #0d1b2e; transform: translateY(-2px); }
.blog__nav-prev.swiper-button-disabled, .blog__nav-next.swiper-button-disabled { opacity: 0.35; cursor: default; }

/* ============================================================
   /what-we-do/ SEO OPERATIONS cards — proper spacing (they were touching)
   ============================================================
   The grid had no horizontal gutter, so the .seo__item cards butted together.
   Restore a 30px gutter (vertical gap already comes from .seo__item margin). */
.seo__area .row { --bs-gutter-x: 30px; }
.seo__area .row > [class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
}

/* ============================================================
   HEADER LOGO — bigger on desktop; centered + bigger + a fine line on mobile
   ============================================================ */
.header__logo img { width: 64px; }                 /* desktop bump from 52px */
.header__logo a { position: relative; }
.header__logo a::after {                            /* fine elegant rose-gold line under the logo */
    content: '';
    width: 44px;
    height: 2px;
    margin-top: 5px;
    background: linear-gradient(90deg, transparent, #d6b9a8, transparent);
    border-radius: 2px;
}
@media (max-width: 991px) {
    /* The mobile header is a flex row (logo | hamburger). Pin the logo to the
       exact centre and keep the hamburger on the right. */
    .header__inner { position: relative; }
    .header__logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: auto;
    }
    .header__logo img { width: 72px; }
    .header__nav-icon { margin-left: auto; }
}

/* ============================================================
   MOBILE OFF-CANVAS MENU — show ALL page links fully (no inner scroll box)
   ============================================================
   The menu link list was confined to a short scrolling area (so "What We Do",
   "About", "Contact" were hidden behind an inner scrollbar). Force the menu
   region to its natural height with no inner overflow — the whole panel
   (.offcanvas__body) is the only scroller, and since the menu is order:1 it
   shows fully first; search / contact / social are revealed by scrolling. */
@media (max-width: 991px) {
    .offcanvas__mid,
    .offcanvas__menu-wrapper,
    .offcanvas__menu-wrapper.mean-container,
    .offcanvas__menu-wrapper .mean-bar,
    .offcanvas__menu-wrapper .mean-nav,
    .offcanvas__menu-wrapper ul.menu-anim {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }
}

/* ============================================================
   404 PAGE  —  single hero section, top-to-bottom stacking:
   big 404 outline → subtitle → description → search → CTA button
   ============================================================ */

/* .hero__area::after is a full-section "rgb(0 0 0 / 22%)" tint overlay with
   no pointer-events:none. It paints ON TOP of the content, dimming it AND
   swallowing every click / hover on the Back-to-Home button. Neutralise it
   on the 404 page and lift the content above it. */
.error404 .hero__area::after {
    pointer-events: none;
}

/* Outer content wrapper — stacks everything vertically, centred, and
   sits ABOVE the hero tint overlay so it's neither dimmed nor blocked. */
.ct-404-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Heading block */
.ct-404-heading {
    margin-bottom: 20px;
}

/* The "404" number — large outlined stroke on the dark background */
.ct-404-number {
    display: block;
    font-size: clamp(96px, 16vw, 190px);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 2px rgba(214, 185, 168, 0.55);
    text-shadow: 0 0 80px rgba(214, 185, 168, 0.12);
    margin-bottom: 12px;
}

/* "PAGE NOT FOUND" subtitle */
.ct-404-sub {
    display: block;
    font-size: clamp(14px, 2.2vw, 24px);
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(214, 185, 168, 0.72);
}

/* Description paragraph */
.ct-404-desc {
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    color: rgba(255, 255, 255, 0.58);
    line-height: 1.7;
    max-width: 500px;
    margin: 0 auto 36px;
}

/* Search field — constrained width, flush inside hero */
.ct-404-search-wrap {
    width: 100%;
    max-width: 480px;
    margin-bottom: 48px;
}

/* Circular CTA — centres the 250px btn_wrapper (overrides margin-left:-40px) */
.error404 .ct-404-btn,
.error404 .ct-404-btn.btn_wrapper {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
}

/* ============================================================
   ABOUT US — HERO STATS
   Rose-gold luminous numbers + readable labels on dark BG
   ============================================================ */

.stat-number {
    display: block;
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
    background: linear-gradient(
        150deg,
        #faf2e6 0%,
        #e8c87e 22%,
        #d6b9a8 52%,
        #c09070 78%,
        #ead8b8 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(214, 185, 168, 0.65))
            drop-shadow(0 0 24px rgba(219, 192, 120, 0.38));
}

.hero-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-stat-item .culture__text {
    font-size: clamp(0.82rem, 1.05vw, 0.98rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.4;
    text-align: center;
    max-width: 140px;
}

.team__hero-stats {
    gap: 2rem 3.5rem;
    margin-top: 2.5rem;
}

@media (max-width: 767px) {
    .stat-number { font-size: 1.8rem !important; }
    .hero-stat-item .culture__text { font-size: 0.82rem; max-width: 120px; }
    .team__hero-stats { gap: 1.5rem 2rem; margin-top: 1.5rem; }
}

/* ============================================================
   BLOG SINGLE — CONTINUE READING (related posts)
   Fix: images were portrait (height:500px, left:-148px) — distorted.
   Now: horizontal 3:2 container, images fill via object-fit:cover.
   The two-image blur-swap hover transition (.img-box:hover) is
   preserved — only the container shape and image fill change.
   ============================================================ */
.single__related .img-box {
    height: auto;
    aspect-ratio: 3 / 2;
}

.single__related .img-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ============================================================
   PORTFOLIO GRID — 16:9 IMAGE CONTAINERS
   Replace all fixed heights (280px / 300px / 200px across
   breakpoints in cloudtart-theme.css) with a fluid 16:9 ratio.
   Images already have object-fit:cover in cloudtart-theme.css.
   ============================================================ */
.page-portfolio .portfolio__thumb {
    height: auto;
    aspect-ratio: 16 / 9;
}

/* ============================================================
   HOMEPAGE — PORTFOLIO CATEGORIES SECTION TOP SPACING
   The section has pb-140 but no pt-* class, so the heading
   "Portfolio Categories" butts directly against the previous
   section. Add proper breathing room at all sizes.
   ============================================================ */
.portfolio__area--home {
    padding-top: 110px;
}

@media (max-width: 991px) {
    .portfolio__area--home { padding-top: 80px; }
}

@media (max-width: 767px) {
    .portfolio__area--home { padding-top: 60px; }
}

/* ============================================================
   HOMEPAGE SERVICES STACK — MOBILE CARD TYPOGRAPHY
   At ≤767px the cards render as a simple vertical column.
   responsive.css leaves tags at 0.8rem and description at
   0.95rem — too small for comfortable reading. Bring both up
   to standard mobile body-text sizes.
   ============================================================ */
@media (max-width: 767px) {
    .mxd-services-cards__tags .tag,
    .mxd-services-cards__tags .tag.tag-default {
        font-size: 0.9rem;
        padding: 6px 14px;
    }

    .mxd-services-stack__info p,
    .mxd-services-stack__info .t-small-mobile {
        font-size: 1rem;
        line-height: 1.68;
    }
}

/* ============================================================
   CTA BUTTON (.btn_wrapper / .wc-btn-primary) — visibility bug + spacing
   ============================================================
   cloudtart-main.js applies a global gsap.from(opacity:0, y:-70) scroll-reveal
   to EVERY .btn_wrapper, tied to a ScrollTrigger (start: "top center+=150").
   For the footer CTA ("Got a project?" / "Let's talk") that trigger point sits
   so low on the page it often can't be reached by scrolling, so the trigger
   never fires and the button stays stuck at the inline opacity:0 / transform —
   only a hard refresh (which recomputes positions) reveals it. This is not RTL-
   specific; it affects every language. A CSS !important reliably beats the stuck
   inline styles, so the footer button is always visible (it simply doesn't fade).
   The magnetic hover (gsap on the inner .btn-item) is unaffected. */
.footer__widget-4 .btn_wrapper {
    opacity: 1 !important;
    transform: none !important;
    /* The widget is text-align:center; the global .btn_wrapper margin-left:-40px
       (a hero-overlap hack) dragged the 250px button off-centre — in RTL it
       drifted LEFT, away from its centred title. Centre it in both directions. */
    margin-left: auto;
    margin-right: auto;
}

/* More breathing room between the CTA title and its button — everywhere this
   title→button pattern is used (footer + section CTAs). */
.footer__widget-4 .project-title {
    display: inline-block;
    margin-bottom: 18px;
}
.btn_wrapper {
    margin-top: 14px;
}

/* ============================================================
   OFF-CANVAS CLOSE BUTTON — top breathing room (all directions)
   Was top:30px (top:15px on mobile) — felt glued to the viewport top.
   ============================================================ */
.offcanvas__close { top: 55px; }
@media only screen and (max-width: 767px) {
    .offcanvas__close { top: 28px; }
}

/* ============================================================
   SERVICES-STACK BANNERS — readable tag + description type
   ============================================================
   The four home banners (Web & Experience, Growth & Performance, …) had tiny
   tags (.tag 0.75rem) and a small description (.t-small-mobile 0.9rem) that
   were hard to read. Enlarge them for every language/direction. */
.services-stack .mxd-services-cards__tags .tag {
    font-size: 0.95rem;
    padding: 6px 16px;
}
.services-stack .mxd-services-stack__info p {
    font-size: clamp(1rem, 1.05vw, 1.15rem);
    line-height: 1.7;
}

/* ============================================================
   FOOTER — fully centred content (all languages, all widths)
   ============================================================
   Per request: every widget's content (logo, brief, service links, contact
   info, hours, copyright) is centred to match the already-centred titles
   ("Services", "Contact Us", "Got a project?"). Applies to LTR and RTL alike
   (not dir-scoped), so it also governs the Persian/Arabic footer. */
/* Each widget becomes a CENTRED FLEX COLUMN so every child sits dead-centre.
   This is essential because `.footer__widget p` (the brief) has max-width:310px
   in the theme — `text-align: center` only centres the TEXT inside that 310px
   block while the block itself stays pinned to the start edge (left in LTR,
   right in RTL). align-items:center centres the block too. The copyright row
   (sibling of the widgets) is centred the same way. */
.footer__widget,
.footer__widget-2,
.footer__widget-3,
.footer__widget-4,
.footer__copyright {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.footer__widget p,
.footer__contact,
.footer__contact li,
.footer__link,
.footer__link li,
.footer__copyright p { text-align: center; }

/* Social icon row centres on its main axis; reset list padding-inline so the
   vertical lists sit dead-centre rather than indented. */
.footer__social {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-left: 0;
}
.footer__link,
.footer__contact { padding-left: 0; list-style: none; }

/* The CTA circle button centres under its centred title (overrides the global
   .btn_wrapper margin-left:-40px hero hack) in every direction. */
.footer__widget-4 .btn_wrapper { margin-left: auto; margin-right: auto; }

/* ============================================================
   CONTACT CTA ("Make it happen") — wrap the circular buttons on small screens
   ============================================================
   The four circle buttons sit in a flex row with flex-wrap:nowrap, so on phones
   they bled past (and were clipped by) the section. Allow wrapping. General fix
   (affects LTR + RTL). */
@media only screen and (max-width: 991px) {
    .cta__actions { flex-wrap: wrap; gap: 24px; }
}

/* ============================================================
   FAQ ACCORDION — keep CLOSED answers fully collapsed (all languages/widths)
   ============================================================
   The closed `.faq__answer` is `max-height:0; overflow:hidden`, but the mobile
   rule `.faq__answer { padding: 0 18px 18px }` (cloudtart-responsive.css) leaves
   bottom padding on the collapsed box, so the first line of the answer peeks out
   below the question. Force the closed state to a true zero so only the open
   (`.active`) answer is visible. */
.faq__answer:not(.active) {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
}

/* ============================================================
   USER-REQUESTED RESPONSIVE / SPACING FIXES (all languages, LTR + RTL)
   ============================================================ */

/* Footer "Got a project?" widget (widget-4): drop the leftover background panel
   on tablet/phone — it should have no background colour below 992px. */
@media (max-width: 991px) {
    .footer__btm .footer__widget-4 { background-color: transparent; }
}

/* Services-stack banners (Web & Experience, Growth & Performance, …): soften the
   corner radius — 73px(4.6rem)/57px(3.6rem) in the theme → 55px everywhere, 45px
   on small phones. The 3-class selector outranks the theme's `.radius-dark`
   rules at every breakpoint, so no per-width radius override is needed above. */
.services-stack .stack-item .justify-between {
    border-radius: 55px;
}
@media (max-width: 575px) {
    .services-stack .stack-item .justify-between { border-radius: 45px; }
}

/* Contact page — info cards: on mobile & tablet the four boxes stack and touch,
   so add top spacing to separate them. */
@media (max-width: 991px) {
    .contact__info .col-xxl-3 { padding-top: 15px; }
}

/* What We Do page — SEO/service cards: add vertical breathing room so the cards
   don't crowd each other. */
.seo__area .col-xxl-4 {
    padding-top: 15px;
    padding-bottom: 15px;
}

/* About page — culture cards: gutter + top spacing so the cards don't butt up
   against each other; on phones add bottom spacing and clear the stray top
   margin so the stacked cards sit evenly. */
.culture__area .col-xxl-4 {
    padding-right: 12px;
    padding-top: 12px;
}
@media (max-width: 767px) {
    .culture__area .col-xxl-4 {
        padding-bottom: 12px;
        margin-top: 0 !important;
    }
}

/* Home services-stack banners (Web & Experience, Growth & Performance, …) — the
   outline TAG pills inside each banner: neutralise any stray transform offset,
   set a soft grey border, and give them side padding on wide screens. Unique to
   the home page (`.services-stack` only exists in front-page.php). */
.services-stack .stack-item .tag-outline-opposite {
    transform: translateX(0px) translateY(0px);
    border-color: #c9c9c9;
}
.services-stack .stack-item .tag-outline {
    border-color: #c9c9c9;
}
@media (min-width: 1280px) {
    .services-stack .stack-item .tag-outline-opposite {
        padding-left: 12px;
        padding-right: 12px;
    }
    .services-stack .stack-item .tag-outline {
        padding-right: 12px;
        padding-left: 12px;
    }
}

/* Leaders-choice page — card spacing on phones. SCOPED to the page template:
   `.feature__area` is also used by single-project, and we don't want to touch
   it there. (`.page-template-page-leaders-choice` is shared by every language
   version of the page, so this works under Polylang too.) */
@media (max-width: 767px) {
    .page-template-page-leaders-choice .workflow__area .col-xxl-3 {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .page-template-page-leaders-choice .feature__area .col-xxl-4 {
        padding-top: 12px;
        margin-top: 0 !important;
    }
}

/* What We Do page — card spacing + section pull-up on phones. SCOPED to the page
   template because `.service__area` is ALSO the home pillars + portfolio section;
   an unscoped `#primary .service__area .container { margin-top:-50px }` would
   yank the home pillars up. The template class is shared across languages. */
@media (max-width: 767px) {
    .page-template-page-what-we-do .service__area .col-xxl-3 {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .page-template-page-what-we-do #primary .service__area .container {
        margin-top: -50px;
    }
    .page-template-page-what-we-do .additional__services .col-xxl-6 {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .page-template-page-what-we-do .process__area .col-xxl-6 {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

/* ============================================================
   SERVICES-STACK BANNER IMAGE — mobile corner placement (LTR)
   ============================================================
   On phones/tablets each banner image is a narrow vertical photo that currently
   sits centred at the bottom of its card. Move it into the BOTTOM-RIGHT corner,
   flush to the card edges, so the card's rounded corner clips the image's
   bottom-right corner; also round the image's TOP-LEFT corner with the same
   radius for the "tab" look. The negative margins cancel the card's inner
   padding (which differs per breakpoint) so the image reaches the actual corner;
   the card is `overflow:hidden; height:auto`, so this stays clean.
   (RTL mirrors every left/right + corner — see cloudtart-rtl.css.) */
@media (max-width: 991px) {
    .services-stack__image {
        margin-left: auto;       /* push to the right… */
        margin-right: -2rem;     /* …past the 2rem side padding → flush right */
        margin-bottom: -2.4rem;  /* cancel the 2.4rem bottom padding → flush bottom */
        border-top-left-radius: 55px;
        border-bottom-right-radius: 55px;
    }
}
@media (max-width: 767px) {
    .services-stack__image {
        margin-right: -1.5rem;   /* side padding shrinks to 1.5rem here */
        margin-bottom: -2rem;    /* bottom padding shrinks to 2rem here */
    }
}
@media (max-width: 575px) {
    .services-stack__image {
        border-top-left-radius: 45px;     /* card radius drops to 45px on phones */
        border-bottom-right-radius: 45px;
    }
}

/* ============================================================
   OFF-CANVAS MENU — fit as ONE full screen on every monitor (no scroll)
   ============================================================
   DESKTOP (≥992px = the 3-column grid overlay): the menu type scales with
   viewport HEIGHT — capped at the 60px approved on a large monitor, shrinking on
   laptops — so all 6 items + Privacy always fit one screen. The old fixed
   min-height/line-height (which forced ~86px rows and overflowed) is gone.
   IMPORTANT: these are SCOPED to ≥992 because below that the off-canvas becomes a
   stacked column / 400px panel, where the vh-scaled font was HUGE and broke the
   mobile layout. */
@media (min-width: 992px) {
    .mean-nav li .menu-text {
        font-size: clamp(26px, 5vh, 50px);
        min-height: 0;
        margin-bottom: 0;
        line-height: 1.05;
    }
    .offcanvas__area .offcanvas__body .offcanvas__mid .mean-container .mean-bar .mean-nav .menu-anim li .uppercase .menu-text {
        line-height: 1.05 !important;
    }
    /* More breathing room between links (was 8px) — vh-scaled so the 6 items
       still fit one screen on short laptops. */
    .mean-nav li a { padding-top: clamp(10px, 1.8vh, 20px) !important; padding-bottom: clamp(10px, 1.8vh, 20px) !important; }
    .offcanvas__mid .mean-bar .mean-nav .menu-anim li .uppercase .menu-text span {
        display: inline-block !important;
        height: auto !important;
    }
    /* Privacy Policy: scale its big top padding with height so it stays on-screen. */
    .offcanvas__links { padding-top: clamp(18px, 9vh, 110px) !important; }
}

/* MOBILE / TABLET (≤991px = stacked column / 400px panel): the desktop vh-scaled
   font was far too large here and broke the layout. Use a tap-friendly,
   width-scaled size — caps at ~38px on the largest phones, shrinks on small ones.
   Both LTR and RTL. */
@media (max-width: 991px) {
    .mean-nav li .menu-text {
        font-size: clamp(24px, 7vw, 38px);
        line-height: 1.2;
        min-height: 0;
    }
}

/* ============================================================
   OFF-CANVAS CLICK-CAPTURE FIX (real bug — phones only)
   ============================================================
   The off-canvas is a fixed, full-screen, z-index:9999 overlay that is
   opacity:0 + visibility:hidden when CLOSED. But the phone-only block above
   (@media max-width:767px) forces `visibility: visible !important` on the menu
   <ul>/<li> so the links render — which ALSO defeats the CLOSED overlay's hidden
   state. Because opacity:0 does NOT block pointer events, those invisible menu
   links were intercepting taps across the WHOLE page: tapping anywhere (even an
   element with no link of its own) fired a hidden menu link.
   Fix: make the CLOSED overlay click-through; the OPEN (.show) state stays fully
   interactive. Purely additive — it does not touch the menu's show/visibility
   logic, so it cannot break opening the menu. */
.offcanvas__area { pointer-events: none; }
.offcanvas__area.show { pointer-events: auto; }

/* ============================================================
   LANGUAGE SWITCHER — rotating globe (header rail) + flag-map burst
   ============================================================
   A spinning rose-gold globe sits above the phone number in the vertical rail.
   Clicking it bursts the Polylang languages upward, each as a country-map chip
   filled with that country's real flag (flag image masked by a country
   silhouette SVG). Palette: the site's rose-gold (#d6b9a8 / #e7d3c5). */

.ct-globe-switcher {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* the phone <p> below is 215px wide rotated -90deg, so it visually extends
       ~100px UPWARD beyond its layout box — clear it so the globe sits above. */
    margin-bottom: 120px;
    z-index: 20;
}

/* The SAME globe placed inside the OPEN off-canvas menu (under the address) —
   bigger, no rail clearance margin, centred in its column. Clicking it opens the
   full flag ring (see cloudtart-lang-globe.js). */
.ct-globe-switcher--menu {
    margin: 28px 0 0;
    width: 100%;
    align-items: center;       /* centred in its section, under the office address */
}
.ct-globe-switcher--menu .ct-globe { --ct-gsize: 72px; }
.ct-globe-switcher--menu .ct-globe-trigger { cursor: pointer; }

/* --- the globe trigger --- */
.ct-globe-trigger {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    line-height: 0;
    cursor: pointer;
    border-radius: 50%;
}
.ct-globe {
    position: relative;
    display: block;
    --ct-gsize: 46px;        /* globe diameter (overridden bigger for the menu globe) */
    width: var(--ct-gsize);
    height: var(--ct-gsize);
    border-radius: 50%;
    overflow: hidden;
    /* NAVY sphere body (site palette #0d1b2e family), lit from the top-left */
    background: radial-gradient(circle at 33% 28%,
        #3a5c90 0%, #21396a 28%, #122544 58%, #0a1626 100%);
    box-shadow:
        inset -3px -4px 9px rgba(3, 8, 18, 0.75),       /* deep navy core shadow */
        inset 3px 3px 8px rgba(120, 165, 225, 0.32),    /* cool blue rim-light */
        0 0 0 1px rgba(214, 185, 168, 0.42),            /* gold outline */
        0 0 8px 1px rgba(214, 185, 168, 0.30);          /* gold glow */
    animation: ct-globe-glow 4.2s ease-in-out infinite;
    transition: transform 0.4s ease;
}
.ct-globe-trigger:hover .ct-globe { transform: scale(1.08); }

/* REAL rotating globe: a 90-frame sprite-sheet (world.jpg projected onto a
   sphere with fixed top-left lighting → gold continents on a navy sphere),
   played with steps() for a genuine 3D spin. Size-INDEPENDENT: background-size
   and the keyframe are derived from --ct-gsize, so the same sprite drives both
   the 46px rail globe and the bigger menu globe (each frame = one globe width). */
.ct-globe__surface {
    position: absolute;
    inset: 0;
    background-image: url(../images/lang-maps/globe-sprite.webp);
    background-repeat: no-repeat;
    background-size: calc(90 * var(--ct-gsize)) 100%;
    animation: ct-globe-spin 12s steps(90) infinite;   /* 4°/step → smooth spin */
}
.ct-globe__shine { display: none; }   /* lighting is baked into the sprite frames */
@keyframes ct-globe-spin { to { background-position-x: calc(-90 * var(--ct-gsize)); } }
@keyframes ct-globe-glow {
    0%, 100% { box-shadow:
        inset -3px -4px 9px rgba(3, 8, 18, 0.75), inset 3px 3px 8px rgba(120, 165, 225, 0.32),
        0 0 0 1px rgba(214, 185, 168, 0.32), 0 0 6px 1px rgba(214, 185, 168, 0.22); }
    50%      { box-shadow:
        inset -3px -4px 9px rgba(3, 8, 18, 0.75), inset 3px 3px 8px rgba(120, 165, 225, 0.32),
        0 0 0 1px rgba(214, 185, 168, 0.50), 0 0 11px 3px rgba(231, 211, 197, 0.42); }
}

/* --- the flag ring: on click the flags ORBIT the globe in a circle --- */
.ct-globe-flags {
    position: absolute;            /* JS portals this to <body>, position:fixed,
                                      with left/top pinned to the GLOBE CENTRE */
    margin: 0;
    padding: 0;
    width: 0;
    height: 0;
    list-style: none;
    pointer-events: none;
    --ct-r: 54px;                  /* orbit radius (kept in sync with the JS clamp) */
}
.ct-globe-flag {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    /* this flag's angle. --ct-start and --ct-step are set per-open by
       cloudtart-lang-globe.js (full circle for the menu globe; half circle on
       the interior side for the rail globe), computed from the live flag count
       so it can never pile flags onto a wrong fallback count. */
    --ct-ang: calc(var(--ct-start, 0deg) + (var(--i) - 1) * var(--ct-step, 120deg));
    /* closed: collapsed at the globe centre. Same transform shape as the open
       state so it animates smoothly outward (only translateY + scale change). */
    transform: translate(-50%, -50%) rotate(var(--ct-ang)) translateY(0px) rotate(calc(var(--ct-ang) * -1)) scale(0.2);
    transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.2, 1.35, 0.4, 1);
}
/* Open state keyed on the FLAGS element's own class (it is PORTALED out to
   <body> — see cloudtart-lang-globe.js — so it escapes the rail's
   mix-blend-mode and keeps true flag colours, without affecting the rest of the
   menu). Each flag is pushed out to its point on the orbit, kept upright. */
.ct-globe-flags.is-open { pointer-events: auto; }
.ct-globe-flags.is-open .ct-globe-flag {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) rotate(var(--ct-ang)) translateY(calc(var(--ct-r) * -1)) rotate(calc(var(--ct-ang) * -1)) scale(1);
    transition-delay: calc((var(--i) - 1) * 55ms);
}
/* the globe grows a little while the ring is open */
.ct-globe-switcher.is-open .ct-globe { transform: scale(1.25); }

.ct-flag-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}
/* Language chip — shows the real Polylang flag (clean rounded rectangle) by
   default. A future per-country MAP can be dropped at
   assets/images/lang-maps/<cc>.svg (user-supplied): it layers ON TOP of the flag
   below. A MISSING background-image layer is simply transparent (unlike a CSS
   mask, which would hide the element), so until that file exists the flag keeps
   showing with zero breakage. Make the dropped-in SVG full-bleed if you want it
   to fully replace the flag. */
.ct-flagmap {
    /* size is set per-context by cloudtart-lang-globe.js: ~14×11 in the rail
       (smaller), 28×21 in the open-menu globe. */
    width: var(--ct-fw, 28px);
    height: var(--ct-fh, 21px);
    border-radius: 4px;
    background-image: var(--ct-flag);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    opacity: 0.6;   /* dimmed by default; full opacity on hover (below) */
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
.ct-flagmap--us { background-image: url(../images/lang-maps/us.svg), var(--ct-flag); }
.ct-flagmap--it { background-image: url(../images/lang-maps/it.svg), var(--ct-flag); }
.ct-flagmap--ir { background-image: url(../images/lang-maps/ir.svg), var(--ct-flag); }
.ct-flag-link:hover .ct-flagmap {
    transform: scale(1.15);
    opacity: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 6px rgba(231, 211, 197, 0.5);
}
.ct-flag-link.is-current .ct-flagmap { opacity: 1; }
.ct-flag-name {
    /* hidden in the circular ring layout — the flag image identifies the
       language; the link still carries an aria-label for screen readers */
    display: none;
}
.ct-flag-link:hover .ct-flag-name { color: #e7d3c5; }
.ct-flag-link.is-current .ct-flag-name { color: #d6b9a8; }
.ct-flag-link.is-current .ct-flagmap { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(214, 185, 168, 0.9); }

/* respect reduced-motion: hold the globe still, keep everything usable */
/* NOTE: the globe spin is intentionally NOT gated by prefers-reduced-motion.
   The owner wants the rotation on EVERY system. Some Windows 11 laptops have
   "Animation effects" turned OFF (Settings → Accessibility → Visual effects),
   which makes the browser report reduced-motion and previously froze the globe
   (`animation:none`). Leaving it always-on so the globe spins everywhere. */

/* ---- off-canvas (open menu) switcher under Privacy Policy ---- */
.offcanvas__links .ct-lang-switcher {
    margin-top: 18px;
}
.offcanvas__links .ct-lang-item {
    font-size: 13px;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.45);
    padding: 4px 2px;
}
.offcanvas__links .ct-lang-item + .ct-lang-item::before {
    margin: 0 10px;
    font-size: 13px;
}
.offcanvas__links .ct-lang-item:hover,
.offcanvas__links .ct-lang-item--active {
    color: #d6b9a8;
}

/* Front-page "INSIDE THE LAB" heading: the shared title style justifies it,
   which stretches the line awkwardly below the largest monitors. Left-align it
   (LTR). RTL is set back to right-align in cloudtart-rtl.css. */
@media (max-width: 1867px) {
    .blog__animation .sec-title-wrapper span {
        text-align: left;
        text-align-last: left;
    }
}

/* Header rail hamburger: it's the MIDDLE item of a `justify-content:space-between`
   column (logo / hamburger / phone). Adding the language globe made the bottom
   item (phone+globe) taller, which shoved the hamburger up. Pin it to the true
   centre of the rail instead, independent of the other items' heights. Desktop
   rail only (≥992px); the mobile top-bar layout is left alone. `.header__inner`
   is position:sticky → it is the containing block for this absolute element. */
@media only screen and (min-width: 992px) {
    .header__nav-icon {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* ============================================================
   ABOUT-US HERO — mobile: make it a clean single phone screen
   ============================================================
   The hero is min-height:100vh with `pt-150 pb-150` (300px of padding) and is
   vertically CENTRED (align-items:center). On phones the title therefore sat
   pushed-down in the middle instead of near the top, and with the big padding the
   section overflowed past one screen (it read as "stretched"). On 576–768px the
   theme also stacks the 4 stats in a tall single column, making it worse.
   Fix: trim the padding, anchor the content to the TOP, tighten the block
   margins, lay the stats out 2×2 across all phone widths, and shrink the
   decorative background blobs so they stay subtle. LTR + RTL (mobile layout, not
   direction-specific). */
@media (max-width: 768px) {
    .team__hero.pt-150.pb-150 { padding-top: 90px; padding-bottom: 50px; }
    .team__hero { align-items: flex-start; }
    .team__hero-subtitle { margin-bottom: 1rem; }
    .team__hero-title { margin-bottom: 1.2rem; }
    .team__hero-description { margin-bottom: 1.5rem; }
    /* Tame the floating blobs so they don't dominate / look stretched. */
    .hero-shape-1 { width: 170px; height: 170px; top: 5%; right: -30px; }
    .hero-shape-2 { width: 120px; height: 120px; bottom: 10%; left: -25px; }
    .hero-shape-3 { width: 90px;  height: 90px;  top: 58%; right: 6%; }
}
/* 576–768px: theme makes the stats a tall single column — match the ≤575px 2×2
   grid so the hero stays one screen here too (≤575px already gets the grid +
   small numbers from cloudtart-responsive.css, so leave those alone). */
@media (min-width: 576px) and (max-width: 768px) {
    .team__hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .hero-stat-item { text-align: center; }
    .stat-number { font-size: 1.6rem; }
}

/* ============================================================
   SINGLE-PROJECT PAGE — dark luxury theme (navy + gold)
   ============================================================
   The CPT single template reuses .service__hero-2 (a light bg image) and
   .feature__area (#f8f8f8 with white cards + navy text), and its CTA heading is
   navy-on-navy — so the project-detail page rendered almost entirely white and
   off-brand. Flip the whole page to the site palette: navy #0d1b2e background,
   light text, gold #d6b9a8 accents. Scoped to the single-project body class and
   the template-unique .single-project-hero, so other pages that reuse these
   blocks are untouched. */
body.single-project { background-color: #0d1b2e; }

/* Hero */
.single-project-hero.service__hero-2 {
    background-image: none;
    background: radial-gradient(125% 135% at 72% -12%, #1b2d49 0%, #0d1b2e 58%);
}
.single-project-hero .hero-subtitle-text { color: #d6b9a8; letter-spacing: 0.04em; }
.single-project-hero .title { color: #ffffff; }
.single-project-hero .animate_content,
.single-project-hero .text-gray-999 { color: #c4cedd; }

/* Layout: title/copy on the LEFT, project image on the RIGHT (the shared service
   hero is image-left/text-right). Override the grid to a predictable LTR flex and
   reverse it so the order is explicit; RTL mirrors this in cloudtart-rtl.css. */
body.single-project .service__hero-inner-2 {
    display: flex;
    flex-direction: row-reverse;   /* markup [image, text] → reversed = text left, image right */
    direction: ltr;
    align-items: center;
    gap: 4%;
}
body.single-project .service__hero-left-2  { flex: 0 0 32%; }
body.single-project .service__hero-left-2 img { max-width: 100%; height: auto; border-radius: 14px; }
body.single-project .service__hero-right-2 { flex: 1; text-align: left; }
@media (max-width: 767px) {
    body.single-project .service__hero-inner-2 { flex-direction: column-reverse; }
    body.single-project .service__hero-left-2  { flex: 0 0 auto; width: 100%; }
}

/* Body copy + feature cards */
body.single-project .feature__area { background-color: #0d1b2e; }
body.single-project .single__content { color: #c4cedd; font-size: 1.05rem; line-height: 1.85; }
body.single-project .single__content h2 { color: #ffffff; margin-top: 0; }
body.single-project .single__content h3 { color: #e7d3c5; margin-top: 1.7em; margin-bottom: .5em; }
body.single-project .single__content a { color: #d6b9a8; }

body.single-project .feature__item {
    background: linear-gradient(135deg, #16263f 0%, #0f1f35 100%);
    border: 1px solid rgba(214, 185, 168, 0.18);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
body.single-project .feature__item:hover { border-color: rgba(214, 185, 168, 0.5); }
body.single-project .feature__title { color: #f0e7df; }
body.single-project .feature__item:hover .feature__title { color: #d6b9a8; }

/* Hover one of the six cards → the other five softly blur & dim, while the hovered
   one lifts and takes on a luminous gold glow. `:has()` scopes the blur to when a
   card is actually hovered (not the gaps); it degrades gracefully (no blur) on
   engines without :has, where the gold-glow hover still works. */
body.single-project .feature__area .row .feature__item {
    transition: filter 0.45s ease, opacity 0.45s ease, transform 0.45s ease,
                box-shadow 0.45s ease, border-color 0.45s ease, background 0.45s ease;
}
body.single-project .feature__area .row:has(.feature__item:hover) .feature__item:not(:hover) {
    filter: blur(3px);
    opacity: 0.5;
}
body.single-project .feature__area .row .feature__item:hover {
    filter: none;
    opacity: 1;
    transform: translateY(-10px);
    border-color: rgba(214, 185, 168, 0.78);
    background: linear-gradient(135deg, rgba(214, 185, 168, 0.16), rgba(214, 185, 168, 0.03));
    box-shadow: 0 0 0 1px rgba(214, 185, 168, 0.5),
                0 18px 46px rgba(214, 185, 168, 0.26),
                0 0 72px rgba(214, 185, 168, 0.16);
}

/* Even row spacing. The shared rule `.feature__area .row > [class*="col-"]
   :nth-child(n+4){margin-top:20px}` is meant for the 3-column culture grid; on
   this 2-COLUMN feature grid it only pushes items 4/5/6 down and leaves item 3
   (row-2 left) misaligned. Give every row after the first a consistent top gap. */
body.single-project .feature__area .row > [class*="col-"] { margin-top: 24px; }
body.single-project .feature__area .row > [class*="col-"]:nth-child(-n + 2) { margin-top: 0; }

/* CTA is already a navy gradient — just rescue the navy-on-navy heading. */
body.single-project .cta__content h2 { color: #ffffff; }

/* ---- Fan-out gallery (ported from the React "AnimatedHikeCard") -------------
   A card of stacked frames that fan out like a hand of cards on hover; each
   frame opens full-size in the lightbox. Positions use `left` (container-
   relative) so the spread math is exact regardless of frame width; the live
   frame count drives the spread via --n, the index via --i. */
.ct-fan {
    width: 100%;                      /* full width of its section — matches the two cards above */
    max-width: none;
    margin: 60px 0 0;
    padding: 38px 40px 34px;
    background: linear-gradient(135deg, #16263f 0%, #0f1f35 100%);
    border: 1px solid rgba(214, 185, 168, 0.18);
    border-radius: 24px;
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.32);
}
.ct-fan__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.ct-fan__title { margin: 0; color: #fff; font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; }
/* Clickable button: opens the full gallery lightbox. */
.ct-fan__arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    color: #d6b9a8; font-size: 1rem; cursor: pointer;
    border: 1px solid rgba(214, 185, 168, 0.32);
    background: rgba(214, 185, 168, 0.06);
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.3s ease;
}
.ct-fan__arrow:hover,
.ct-fan__arrow:focus-visible {
    background: rgba(214, 185, 168, 0.9); color: #0d1b2e;
    border-color: rgba(214, 185, 168, 0.9); transform: scale(1.08); outline: none;
}
.ct-fan:hover .ct-fan__arrow:not(:hover) { transform: translateX(4px); }

.ct-fan__stack { position: relative; height: clamp(300px, 34vw, 440px); margin-bottom: 24px; }
.ct-fan__frame {
    position: absolute;
    top: 0;
    left: calc(var(--i) * 9%);        /* stacked */
    width: 46%;
    height: 100%;
    padding: 0;
    border: none;                     /* no hard (black) outline — palette only */
    border-radius: 16px;
    overflow: hidden;
    background: #16263f;              /* subtle navy letterbox (palette), not black */
    cursor: pointer;
    transform-origin: bottom center;
    /* slow, soft easing so the fan-out + reflow feels pleasant */
    transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1), right 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
    /* soft depth shadow + a hairline gold ring instead of a border */
    box-shadow: 0 16px 38px rgba(5, 10, 20, 0.5), 0 0 0 1px rgba(214, 185, 168, 0.16);
    z-index: calc(50 - var(--i));
}
.ct-fan__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* fan out: even spread across the card + a slight per-frame tilt */
.ct-fan:hover .ct-fan__frame {
    left: calc(var(--i) * 54% / max(1, var(--n) - 1));
    transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 5deg));
}
/* Hovered frame: comes forward with a gold glow, grows a touch, and lifts /
   separates from the row. The 0.7s transform transition (above) makes moving
   between frames feel soft — the previous one eases back down as the next rises,
   rather than snapping. */
.ct-fan__frame:hover { z-index: 60; box-shadow: 0 26px 58px rgba(5, 10, 20, 0.66), 0 0 0 2px rgba(214, 185, 168, 0.62), 0 0 48px rgba(214, 185, 168, 0.3); }
.ct-fan:hover .ct-fan__frame:hover {
    transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 5deg)) scale(1.1) translateY(-18px);
}
.ct-fan__hint { margin: 0; color: #8fa0b6; font-size: 0.92rem; }
@media (max-width: 575px) { .ct-fan { padding: 24px 22px 22px; } }
/* Touch / no-hover devices can't trigger the fan-out, so lay the frames out as a
   tappable 2-col grid instead — every frame visible and clickable → lightbox. */
@media (hover: none) {
    .ct-fan__stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; height: auto; }
    .ct-fan__frame { position: static; width: 100% !important; height: 180px; left: auto !important; transform: none !important; z-index: auto; }
    .ct-fan__hint { display: none; }
}

/* ---- Lightbox (vanilla) ----------------------------------------------------- */
html.ct-lightbox-open { overflow: hidden; }
.ct-lightbox {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.ct-lightbox.is-open { opacity: 1; visibility: visible; }
.ct-lightbox__backdrop {
    position: absolute; inset: 0;
    background: rgba(6, 11, 20, 0.88);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* Stage: main image + counter + thumbnail rail, stacked & centred. */
.ct-lightbox__stage {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    max-width: min(1180px, 94vw); max-height: 92vh;
    transform: scale(0.96);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ct-lightbox.is-open .ct-lightbox__stage { transform: scale(1); }
.ct-lightbox__figure { margin: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.ct-lightbox__img {
    display: block; width: auto; height: auto; max-width: 100%; max-height: 64vh;
    border-radius: 14px;
    border: 1px solid rgba(214, 185, 168, 0.25);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
    background: #16263f;
}
.ct-lightbox__counter { color: rgba(255, 255, 255, 0.65); font-size: 0.9rem; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
/* Thumbnail rail — click to jump; the active one is highlighted in gold. */
.ct-lightbox__thumbs {
    display: flex; gap: 10px; max-width: 100%;
    overflow-x: auto; padding: 4px 2px 6px; scroll-behavior: smooth; scrollbar-width: thin;
}
.ct-lightbox__thumbs::-webkit-scrollbar { height: 6px; }
.ct-lightbox__thumbs::-webkit-scrollbar-thumb { background: rgba(214, 185, 168, 0.35); border-radius: 6px; }
.ct-lightbox__thumb {
    flex: 0 0 auto; width: 90px; height: 58px; padding: 0;
    border: 2px solid transparent; border-radius: 9px; overflow: hidden;
    cursor: pointer; background: #16263f; opacity: 0.5;
    transition: opacity 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.ct-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-lightbox__thumb:hover { opacity: 0.85; }
.ct-lightbox__thumb.is-active { opacity: 1; border-color: #d6b9a8; transform: translateY(-2px); }
/* Prev / next side arrows. */
.ct-lightbox__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 54px; height: 54px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(13, 27, 46, 0.55);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ct-lightbox__nav:hover { background: #d6b9a8; color: #0d1b2e; border-color: #d6b9a8; }
.ct-lightbox__nav--prev { left: 22px; }
.ct-lightbox__nav--next { right: 22px; }
/* Single image → no nav/thumbs/counter, larger image. */
.ct-lightbox--single .ct-lightbox__nav,
.ct-lightbox--single .ct-lightbox__thumbs,
.ct-lightbox--single .ct-lightbox__counter { display: none; }
.ct-lightbox--single .ct-lightbox__img { max-height: 82vh; }
.ct-lightbox__close {
    position: absolute; top: 20px; right: 24px; z-index: 3;
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(13, 27, 46, 0.55);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.3s ease;
}
.ct-lightbox__close:hover { background: #d6b9a8; color: #0d1b2e; transform: rotate(90deg); }
@media (max-width: 767px) {
    .ct-lightbox__nav { width: 42px; height: 42px; font-size: 1.6rem; }
    .ct-lightbox__nav--prev { left: 8px; }
    .ct-lightbox__nav--next { right: 8px; }
    .ct-lightbox__thumb { width: 66px; height: 44px; }
    .ct-lightbox__img { max-height: 56vh; }
}

/* ---- Magnetic title (ported from the React "MagneticText") ------------------
   A gold spotlight circle follows the cursor over the title, revealing the text
   in inverted navy inside it. JS drives the position (transform) + circle size;
   CSS owns the grow/shrink transition. Base text forced visible so any hero
   intro `.title span{opacity:0}` rule can't hide it. */
/* Implemented with a clip-path circle on a DUPLICATE navy layer pinned exactly
   over the base text (inset:0 + identical padding), so the reveal can never drift
   from the base — alignment is structural, not transform-math. JS drives the
   circle's position + radius (lerped). `display:block; width:fit-content` shrink-
   wraps the text (no spotlight over empty space) while keeping it on its own line
   (the subtitle before it is inline, so inline-block would join it). The small
   padding gives the gold circle vertical room without a hard line-height change. */
.ct-mag {
    position: relative;
    display: block;
    width: -moz-fit-content; width: fit-content;
    max-width: 100%;
}
.ct-mag:hover { cursor: none; }
.ct-mag .ct-mag__base { display: block; opacity: 1; transform: none; }
/* JS sizes/places the reveal to EXACTLY overlay the base text (measured), then
   expands it by a fixed padding on every side — so (a) its inverted navy text
   sits pixel-exact on the title, and (b) the gold circle has room to stay whole
   near the edges instead of being clipped by the title box. left/top/width/
   height/padding are all set in cloudtart-project-fx.js. */
.ct-mag__reveal {
    position: absolute;
    box-sizing: border-box;
    display: block;
    color: #0d1b2e;
    background: #d6b9a8;
    white-space: nowrap;
    pointer-events: none;
    -webkit-clip-path: circle(0px at 50% 50%);
            clip-path: circle(0px at 50% 50%);
    will-change: clip-path;
}

/* ---- Animated icons beside the case-study titles (Challenge/Approach/Result) --
   cloudtart-project-fx.js injects an inline SVG into the first three <h3>s of the
   project body; these rules lay it out (icon + heading in a row — RTL flips via
   the inherited direction) and animate it. On-brand gold. */
.single__content h3.ct-case-h3 { display: flex; align-items: center; gap: 15px; }
/* Bigger, no container box — the icon sits directly beside the heading. */
.ct-case-ico { flex: 0 0 auto; width: 54px; height: 54px; color: #d6b9a8; overflow: visible; }
/* Challenge — a flag flutters on the summit */
.ct-case-ico--challenge .ct-ico-flag { transform-box: fill-box; transform-origin: left center; animation: ct-ico-wave 1.9s ease-in-out infinite; }
@keyframes ct-ico-wave { 0%, 100% { transform: rotate(0deg) scaleX(1); } 50% { transform: rotate(-5deg) scaleX(0.88); } }
/* Approach — a compass needle swings to find its bearing */
.ct-case-ico--approach .ct-ico-needle { transform-box: fill-box; transform-origin: center; animation: ct-ico-swing 3s ease-in-out infinite; }
@keyframes ct-ico-swing { 0%, 100% { transform: rotate(-28deg); } 50% { transform: rotate(28deg); } }
/* Result — an upward trend line draws itself */
.ct-case-ico--result .ct-ico-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ct-ico-draw 3s ease-in-out infinite; }
@keyframes ct-ico-draw { 0% { stroke-dashoffset: 1; } 42%, 78% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }