/* =============================================================
   CT Header — new global header (isolated). STAGE 1: the bar.
   From Figma: desktop default node 4673-3668.
   Tokens: Union Blue #1C2136, Royal Red #F22D13, CT White #FFFFFF, Lato.
   Namespaced under .cth so it never collides with the existing header.
   ============================================================= */

.cth,
.cth *,
.cth *::before,
.cth *::after {
    box-sizing: border-box;
}

.cth {
    /* Transparent over the hero at the top of the page; solid Union Blue once the
       page is scrolled (matches the previous header's behaviour). The header is
       fixed to the top and overlays the hero. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: transparent;
    color: #ffffff;
    font-family: "Lato", sans-serif;
    width: 100%;
    transition: background-color 0.3s ease;
}

/* Solid background once scrolled away from the very top. */
.cth.is-scrolled {
    background-color: #1c2136;
    padding-bottom: 10px;
}

/* Scroll-shrink (desktop only): once scrolled, the main bar gets shorter and
   the logo minimises — matching the current/live header's condensed state.
   Scoped above the mobile breakpoint so the mobile bar keeps its own sizing. */
@media screen and (min-width: 1201px) {

    /* On scroll the bar gets shorter and the logo minimises. align-items:center
       keeps the logo + nav vertically aligned; the bar stays flush to the
       1340px container edges (no horizontal shift). */
    .cth.is-scrolled .cth__main {
        padding: 12px 0;
    }

    .cth.is-scrolled .cth__logo img {
        width: 150px;
        height: 65px;
    }
}

/* While a dropdown or the mobile menu is open the header must be solid. */
.cth.cth--menu-open,
.cth.cth--dropdown-open {
    background-color: #1c2136;
}

/* ---------- Utility row ----------
   Rows are constrained to the same 1340px centred container as the site body
   (.container) so the logo lines up with the hero/content left edge. */
.cth__utility-inner {
    max-width: 1340px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    padding: 22px 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    /* Smoothly pull inward on scroll (see .cth.is-scrolled rules). */
    transition: padding 0.3s ease;
}

.cth__util-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #ffffff;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.cth__util-link:hover {
    opacity: 1;
    text-decoration: underline;
}

.cth__util-icon {
    display: inline-flex;
    width: 14px;
    height: 16px;
}

.cth__util-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.cth__util-label {
    font-family: "Lato", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: 0.28px;
    text-transform: uppercase;
}

/* ---------- Main bar ---------- */
.cth__main {
    max-width: 1340px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 26px 0;
    /* Smoothly shrink the bar height on scroll (see .cth.is-scrolled below). */
    transition: padding 0.3s ease;
}

.cth__logo {
    display: inline-flex;
    flex: 0 0 auto;
}

.cth__logo img {
    width: 218px;
    height: 95px;
    object-fit: contain;
    display: block;
    /* Smoothly shrink the logo on scroll. */
    transition: width 0.3s ease, height 0.3s ease;
}

/* Nav sits on the right side; spacer between logo and nav. */
.cth__nav {
    margin-left: auto;
}

.cth__nav-list {
    display: flex;
    align-items: center;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cth__nav-item {
    position: relative;
}

.cth__nav-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: "Lato", sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.15;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
}

.cth__nav-link--static {
    cursor: default;
}

.cth__nav-link span:first-child {
    position: relative;
}

/* Active red underline under the label (shown when the dropdown is open). */
.cth__nav-item.is-open .cth__nav-link span:first-child::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: #f22d13;
}

.cth__nav-chevron {
    display: inline-flex;
    width: 10px;
    height: 5px;
    transition: transform 0.2s ease;
}

.cth__nav-chevron svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Chevron flips up when the dropdown is open. */
.cth__nav-item.is-open .cth__nav-chevron {
    transform: rotate(180deg);
}

/* ---------- Actions (search + CTA) ---------- */
.cth__actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 0 0 auto;
}

.cth__search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    width: 220px;
    padding: 0 14px;
    border: 1px solid #ffffff;
    border-radius: 3px;
    background: transparent;
}

.cth__search-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    flex: 0 0 auto;
}

.cth__search-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.cth__search-input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: #ffffff;
    font-family: "Lato", sans-serif;
    font-size: 16px;
    line-height: normal;
}

.cth__search-input::placeholder {
    color: #ffffff;
    opacity: 0.8;
}

/* Hide the browser's native search clear (the blue ✕ in some browsers) and the
   decoration/results buttons — we provide our own .cth__search-clear. */
.cth__search-input::-webkit-search-cancel-button,
.cth__search-input::-webkit-search-decoration,
.cth__search-input::-webkit-search-results-button,
.cth__search-input::-webkit-search-results-decoration,
.cth__drawer-search-input::-webkit-search-cancel-button,
.cth__drawer-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* Firefox/Edge native clear control. */
.cth__search-input::-ms-clear,
.cth__drawer-search-input::-ms-clear {
    display: none;
}

.cth__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f22d13;
    color: #ffffff;
    border-radius: 3px;
    padding: 12.65px 25px;
    font-family: "Lato", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}

.cth__cta:hover,
.cth__cta:active,
.cth__cta.is-touch-hover {
    opacity: 0.5;
}

/* Mobile CTA (shown next to the burger). Figma mobile shows it white with dark
   text. Hidden on desktop (the red CTA in .cth__actions is used there). */
.cth__cta--mobile {
    display: none;
    background: #ffffff;
    color: #1c2136;
    padding: 10px 18px 11px;
    font-size: 14px;
}

.cth__cta--mobile:hover,
.cth__cta--mobile:active,
.cth__cta--mobile.is-touch-hover {
    opacity: 0.5;
}

/* ---------- Mobile burger (full menu arrives in a later stage) ---------- */
.cth__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 28px;
    height: 24px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
}

.cth__burger span {
    display: block;
    height: 2px;
    width: 100%;
    background: #ffffff;
    transform-origin: center;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Burger morphs into an X when the menu is open. */
.cth.cth--menu-open .cth__burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.cth.cth--menu-open .cth__burger span:nth-child(2) {
    opacity: 0;
}

.cth.cth--menu-open .cth__burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* =============================================================
   STAGE 2 — Mega-menu panels (rebuilt 1:1 from Figma)
   White dropdown spanning the full header width, dropping below the bar.
   From Figma "Current / Desktop" interactive menus:
     What we do   4673:3822  (service groups grid)
     Who we serve 4673:3964  (audience list + feature image)
     Who we are   4673:3897  (About / Locations / Journal columns)
   Panel padding 56px top / 64px bottom / 90px sides; content gap 48px.
   Intro column 260px with 40px right padding + right divider.
   Headings: Petit Serif 22px uppercase, letter-spacing -0.66px.
   Links/body: Lato 20px #1C2136. Royal Red #F22D13 accents.
   ============================================================= */
.cth__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    color: #1c2136;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    /* Smooth "glide down" open: a longer ease-out with a slightly larger slide
       so the panel eases open instead of snapping in. */
    transform: translateY(-10px);
    transform-origin: top center;
    transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.32s;
    z-index: 999;
}

.cth__panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s;
}

/* Figma uses 90px side padding on the 1440px frame. We keep the inner content
   aligned to the same 1340px container as the rest of the header, with the 90px
   insets expressed as padding so the dropdown background still spans full width. */
.cth__panel-inner {
    /* Match the main bar's container (max-width 1340, no horizontal padding) so
       the dropdown content's left edge lines up with the logo + nav headings
       and its right edge lines up with the "Make an Enquiry" CTA / arrows. */
    max-width: 1340px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 48px;
    padding: 56px 0 64px;
}

/* ---- Intro column (shared across every layout) ---- */
.cth__panel-intro {
    flex: 0 0 260px;
    width: 260px;
    align-self: stretch;
    padding-right: 40px;
    border-right: 1px solid rgba(28, 33, 54, 0.18);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cth__panel-heading {
    display: block;
    font-family: "Petit", "Georgia", serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.66px;
    text-transform: uppercase;
    color: #1c2136;
    margin: 0;
}

.cth__panel-body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.15;
    color: #1c2136;
    opacity: 0.8;
    margin: 0;
}

/* ---- Shared group header (uppercase serif title + → arrow + underline) ---- */
.cth__group-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(28, 33, 54, 0.18);
}

.cth__group-title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: "Petit", "Georgia", serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.66px;
    text-transform: uppercase;
    color: #1c2136;
    text-decoration: none;
    transition: color 0.15s ease;
}

a.cth__group-title:hover {
    color: #f22d13;
}

.cth__group-title--static {
    cursor: default;
}

.cth__group-arrow {
    flex: 0 0 auto;
    font-family: "Lato", sans-serif;
    font-size: 20px;
    line-height: 1.15;
    color: #1c2136;
    transition: transform 0.15s ease, color 0.15s ease;
}

/* Standard site arrow (resources/images/arrow-right.svg). Inherits the host
   element's `color` via currentColor, so hover colour changes still apply. */
.cth__group-arrow,
.cth__audience-arrow,
.cth__m-all-arrow,
.cth__drawer-locations-arrow,
.cth__journal-cta-arrow {
    display: inline-flex;
    align-items: center;
}

.cth__link--static {
    cursor: default;
}

.cth__group--static .cth__group-arrow {
    display: none;
}

.cth__group-arrow svg,
.cth__audience-arrow svg,
.cth__m-all-arrow svg,
.cth__drawer-locations-arrow svg,
.cth__journal-cta-arrow svg {
    display: block;
    width: 24px;
    height: 12px;
}

.cth__group:hover .cth__group-arrow {
    color: #f22d13;
    transform: translateX(4px);
}

/* Shared link list (Lato 20px, 14px gap) ---- */
.cth__group-links {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cth__group-links a,
.cth__group-links .cth__link--static {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.15;
    color: #1c2136;
    text-decoration: none;
    /* A little breathing room between the label and its hover underline. */
    text-underline-offset: 4px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.cth__group-links a:hover {
    color: #f22d13;
    text-decoration: underline;
}

/* =========================================================
   Layout A — service groups grid (What We Do)
   Two rows of three 290px groups; 40px column gap, 48px row gap.
   ========================================================= */
.cth__groups {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    /* Three equal columns that STRETCH to fill the panel width, so the last
       column (and its → arrow) ends at the panel's right edge — lining up with
       the "Make an Enquiry" CTA above. Fixed 290px columns left a ~32px gap. */
    grid-template-columns: repeat(3, 1fr);
    column-gap: 40px;
    row-gap: 48px;
}

.cth__group {
    width: auto;
    min-width: 0;
}

/* Feature group (Bespoke projects): title with no arrow, image + caption. */
.cth__group--feature .cth__group-arrow {
    display: none;
}

.cth__group-figure {
    display: block;
    margin-top: 16px;
    height: 150px;
    background: rgba(28, 33, 54, 0.1);
    overflow: hidden;
}

.cth__group-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cth__group-caption {
    margin: 16px 0 0;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.15;
    color: #1c2136;
    opacity: 0.8;
}

/* =========================================================
   Layout B — audience list + feature image (Who We Serve)
   ========================================================= */
.cth__audience {
    flex: 0 0 340px;
    width: 340px;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cth__audience-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.15;
    color: #1c2136;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cth__audience-label {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 400;
    /* A little breathing room between the label and its hover underline. */
    text-underline-offset: 4px;
}

.cth__audience-arrow {
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.cth__audience-item a:hover {
    background-color: rgba(28, 33, 54, 0.06);
    border-left-color: #f22d13;
}

.cth__audience-item a:hover .cth__audience-label {
    text-decoration: underline;
}

.cth__audience-item a:hover .cth__audience-arrow {
    opacity: 1;
}

.cth__feature {
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
    background: rgba(28, 33, 54, 0.1);
    overflow: hidden;
}

.cth__feature img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 188px;
    object-fit: cover;
}

/* =========================================================
   Layout C — columns (Who We Are): About / Locations / Journal
   ========================================================= */
.cth__group--about {
    width: 230px;
    flex: 0 0 230px;
}

.cth__group--locations {
    width: 340px;
    flex: 0 0 340px;
}

.cth__group--journal {
    flex: 1 1 0;
    min-width: 0;
}

/* Region sub-heading (United States / United Kingdom & France). */
.cth__region-label {
    display: block;
    margin-top: 16px;
    font-family: "Lato", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: 0.28px;
    text-transform: uppercase;
    color: #1c2136;
    opacity: 0.65;
}

/* A region label that follows a city list is a subsequent region (e.g. United
   Kingdom & France) — give it a clear gap above, matching the Figma spacing. */
.cth__cities+.cth__region-label {
    margin-top: 36px;
}

/* Two-column city list. Figma fills top-to-bottom down the first column, then
   the second — so flow by column rather than by row. Row count is derived from
   the per-region city count via the --cth-rows custom property (set in markup);
   falls back to a sensible auto flow when unset. */
.cth__cities {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--cth-rows, 5), auto);
    column-gap: 24px;
    row-gap: 12px;
}

.cth__cities a {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.15;
    color: #1c2136;
    text-decoration: none;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.cth__cities a:hover {
    color: #f22d13;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Journal column: intro paragraph, story cards, CTA. */
.cth__journal-intro {
    margin: 16px 0 0;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.15;
    color: #1c2136;
    opacity: 0.8;
}

.cth__stories {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cth__story {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
}

.cth__story-thumb {
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
    background: rgba(28, 33, 54, 0.1);
    overflow: hidden;
}

.cth__story-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* When falling back to the Cadogan Tate logo placeholder, contain it (with a
   little padding) on a light background so the logo isn't cropped. */
.cth__story-thumb--placeholder {
    background: #1c2136;
}

.cth__story-thumb--placeholder img {
    object-fit: contain;
    padding: 18px;
}

.cth__story-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cth__story-eyebrow {
    font-family: "Lato", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: 0.28px;
    text-transform: uppercase;
    color: #1c2136;
    opacity: 0.65;
}

.cth__story-title {
    font-family: "Lato", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    color: #1c2136;
    transition: color 0.15s ease;
    /* Limit the title to two lines with an ellipsis. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Post excerpt/description under the title, clamped to two lines. */
.cth__story-desc {
    margin-top: 2px;
    font-family: "Lato", sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.3;
    color: #1c2136;
    opacity: 0.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cth__story:hover .cth__story-title {
    color: #f22d13;
}

.cth__journal-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    font-family: "Lato", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    color: #1c2136;
    transition: color 0.15s ease;
}

.cth__journal-cta-text {
    text-decoration: underline;
}

.cth__journal-cta:hover {
    color: #f22d13;
}

/* Hide panels on mobile — the slide-out menu (Stage 3) handles navigation. */
@media screen and (max-width: 1200px) {
    .cth__panel {
        display: none;
    }
}

/* =============================================================
   STAGE 3 — Mobile slide-out menu (full-screen white drawer)
   From Figma "Current / Mobile / Menu" 4673:3801 and expanded
   states 4673:4469 / 4673:4492 / 4673:4513.
   Hidden on desktop; shown (as a drawer) only on <=1200px when open.
   ============================================================= */
.cth__drawer {
    display: none;
}

/* The mobile drawer reuses the existing header bar. Keep its duplicate
   logo/CTA/close bar permanently hidden so only the real burger → X control
   remains visible when the menu opens. */
.cth__drawer-bar {
    display: none !important;
}

.cth__drawer-scrim {
    display: none;
}

@media screen and (max-width: 1200px) {

    /* The header bar must stay ABOVE the drawer so the burger/X stays clickable.
       The drawer is a full-screen wrapper inside <header>; without this it would
       cover the bar and swallow the close tap. */
    .cth__main {
        position: relative;
        z-index: 1060;
    }

    /* The existing header stays exactly where it is — only the burger morphs to
       an X (handled above). The menu body simply reveals BELOW the current
       header; no second bar slides in from the top.
       The drawer wrapper is a transparent full-screen container; only its body
       carries the visible (frosted) background. */
    .cth__drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        width: 100%;
        background: transparent;
        color: #1c2136;
        z-index: 1050;
        /* below the header bar so the burger stays tappable */
        visibility: hidden;
        transition: visibility 0s linear 0.35s;
        overflow: hidden;
        pointer-events: none;
    }

    .cth.cth--menu-open .cth__drawer {
        visibility: visible;
        transition: visibility 0s;
        pointer-events: auto;
    }

    /* The drawer keeps its own bar in the markup but we HIDE it — the real header
       (logo + burger→X) stays in place and is used instead. */
    .cth__drawer-bar {
        display: none !important;
    }

    /* No separate scrim — the drawer body is the overlay. */
    .cth__drawer-scrim {
        display: none;
    }

    /* ---- Stage 2: Union Blue header strip sweeps in first ----
       (The drawer's own bar is hidden; the real header is used instead.) ---- */
    .cth__drawer-logo {
        display: inline-flex;
        margin-right: auto;
    }

    .cth__drawer-logo img {
        width: 110px;
        height: auto;
        object-fit: contain;
        display: block;
    }

    .cth__drawer-cta {
        background: #ffffff;
        color: #1c2136;
        padding: 10px 20px 12px;
        font-size: 14px;
        border-radius: 5px;
    }

    .cth__drawer-close {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        padding: 0;
        background: transparent;
        border: 0;
        cursor: pointer;
    }

    .cth__drawer-close svg {
        width: 18px;
        height: 18px;
        display: block;
    }

    .cth__drawer-close svg path {
        stroke: #ffffff;
    }

    /* ---- Menu body: reveals directly BELOW the existing header ----
       Starts at the measured header height (--cth-header-h) so the real header
       (logo + burger→X) stays visible and in place — no bar slides in from the
       top. Frosted translucent white so the page shows through; fades in place. */
    .cth__drawer-body {
        flex: 1 1 auto;
        margin-top: var(--cth-header-h, 80px);
        max-height: calc(100vh - var(--cth-header-h, 80px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 20px;
        background: rgba(255, 255, 255, 0.94);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.28s ease, transform 0.28s ease;
    }

    .cth.cth--menu-open .cth__drawer-body {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* ---- Search (icon + underlined input) ---- */
    .cth__drawer-search {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 0 14px;
        /* Clear gap between the search field and the first nav item (Figma). */
        margin-bottom: 40px;
        border-bottom: 1px solid rgba(28, 33, 54, 0.3);
    }

    .cth__drawer-search-icon {
        flex: 0 0 auto;
        display: inline-flex;
        width: 20px;
        height: 20px;
        padding: 0;
        background: transparent;
        border: 0;
        cursor: pointer;
    }

    .cth__drawer-search-icon svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    .cth__drawer-search-icon svg path {
        stroke: #1c2136;
    }

    .cth__drawer-search-input {
        flex: 1 1 auto;
        min-width: 0;
        border: 0;
        outline: none;
        background: transparent;
        font-family: "Lato", sans-serif;
        font-size: 16px;
        color: #1c2136;
    }

    .cth__drawer-search-input::placeholder {
        color: #1c2136;
        opacity: 0.55;
    }

    /* ---- Accordion (top level) ---- */
    .cth__acc {
        border-bottom: 1px solid rgba(28, 33, 54, 0.18);
    }

    .cth__drawer-nav>.cth__acc:first-child {
        border-top: 0;
    }

    .cth__acc-head {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 22px 0;
        background: transparent;
        border: 0;
        cursor: pointer;
        text-align: left;
    }

    .cth__acc-title {
        flex: 1 1 auto;
        min-width: 0;
        font-family: "Petit", "Georgia", serif;
        font-weight: 500;
        font-size: 28px;
        line-height: 1.15;
        letter-spacing: -0.3px;
        text-transform: uppercase;
        color: #1c2136;
    }

    .cth__acc-chevron {
        flex: 0 0 auto;
        display: inline-flex;
        width: 14px;
        height: 8px;
        transition: transform 0.2s ease;
    }

    .cth__acc-chevron svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* The bundled chevron is white (for the dark header bar); recolour it dark
       for the white drawer. */
    .cth__acc-chevron svg path {
        stroke: #1c2136;
    }

    .cth__acc-head[aria-expanded="true"] .cth__acc-chevron {
        transform: rotate(180deg);
    }

    /* Collapsible panel (max-height toggle driven by JS adding .is-open). */
    /* Collapsible panel — smooth height animation.
       The panel's max-height is driven by JS (set to the real scrollHeight on
       open, 0 on close) so open AND close both ease smoothly to the content's
       exact height, for any number of children, instead of snapping. */
    .cth__acc-panel {
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: max-height 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.26s ease;
    }

    .cth__acc.is-open>.cth__acc-panel {
        opacity: 1;
        padding-bottom: 8px;
    }

    /* Keep default-open panels visible even before JavaScript initializes. */
    .cth__acc[data-cth-acc-default-open].is-open>.cth__acc-panel {
        max-height: none;
    }

    /* Plain (non-dropdown) nav link styled like a top-level item. */
    .cth__drawer-link {
        display: block;
        padding: 22px 0;
        border-bottom: 1px solid rgba(28, 33, 54, 0.18);
        font-family: "Petit", "Georgia", serif;
        font-weight: 500;
        font-size: 28px;
        line-height: 1.15;
        text-transform: uppercase;
        color: #1c2136;
        text-decoration: none;
    }

    /* ---- Sub-accordion (second level) ---- */
    .cth__acc--sub {
        border-bottom: 1px solid rgba(28, 33, 54, 0.18);
    }

    .cth__acc--sub:last-child {
        border-bottom: 0;
    }

    .cth__acc-head--sub {
        padding: 18px 0;
    }

    .cth__acc-subtitle {
        flex: 1 1 auto;
        min-width: 0;
        font-family: "Lato", sans-serif;
        font-weight: 600;
        font-size: 16px;
        line-height: 1.2;
        color: #1c2136;
        /* Match the Figma mobile casing (Title Case) without editing content. */
        text-transform: capitalize;
    }

    /* +/- sign toggle (text-free, drawn with pseudo-elements). */
    /* +/- toggle rendered as the actual Lato text glyph (matches Figma, which
       uses a 22px Lato "+"/"–" character — not a drawn icon). Closed = "+",
       open = "–". */
    .cth__acc-sign {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        font-family: "Lato", sans-serif;
        font-weight: 500;
        font-size: 22px;
        line-height: 1;
        color: #1c2136;
    }

    .cth__acc-sign::before {
        content: "+";
    }

    .cth__acc-head--sub[aria-expanded="true"] .cth__acc-sign::before {
        content: "\2013";
        /* en dash – */
    }

    /* ---- Sub-level link lists ---- */
    .cth__m-links {
        list-style: none;
        margin: 0;
        padding: 0 0 4px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .cth__m-links a,
    .cth__m-links .cth__link--static {
        font-family: "Lato", sans-serif;
        font-weight: 500;
        font-size: 15px;
        line-height: 1.15;
        color: #1c2136;
        text-decoration: none;
    }

    .cth__m-all {
        display: inline-flex;
        align-items: center;
        /* Smaller gap above the link (closer to the list). */
        margin-top: 8px;
        /* Space below so it's separated from the next group/section. */
        margin-bottom: 12px;
        /* Larger gap between the "All …" text and its → arrow. */
        gap: 10px;
        font-family: "Lato", sans-serif;
        font-weight: 600;
        font-size: 15px;
        line-height: 1.2;
        color: #1c2136;
        text-decoration: none;
    }

    /* ---- Flat list (Who We Serve audiences / Journal link) ---- */
    .cth__m-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .cth__m-list li {
        border-bottom: 1px solid rgba(28, 33, 54, 0.18);
    }

    .cth__m-list li:last-child {
        border-bottom: 0;
    }

    .cth__m-list a,
    .cth__m-list .cth__link--static {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 18px 0;
        font-family: "Lato", sans-serif;
        font-weight: 600;
        font-size: 16px;
        line-height: 1.2;
        color: #1c2136;
        text-decoration: none;
    }

    .cth__m-list a span:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cth__m-chevron {
        flex: 0 0 auto;
        display: inline-flex;
        width: 8px;
        height: 14px;
    }

    .cth__m-chevron svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    .cth__m-chevron svg path {
        stroke: #1c2136;
    }

    /* ---- Mobile region labels / cities (spacing matched to Figma 4673:4513) ---- */
    .cth__acc-panel .cth__region-label {
        margin-top: 6px;
        font-size: 14px;
    }

    /* Clear gap before a following region (United Kingdom & France). */
    .cth__acc-panel .cth__cities+.cth__region-label {
        margin-top: 30px;
    }

    .cth__acc-panel .cth__cities {
        margin-top: 14px;
        row-gap: 14px;
    }

    .cth__acc-panel .cth__cities a {
        font-size: 15px;
        font-weight: 500;
    }

    /* Space above the "View All Locations →" link. */
    .cth__acc-panel .cth__m-all {
        margin-top: 14px;
    }

    /* ---- What We Do feature (Bespoke projects) ---- */
    .cth__m-feature {
        padding: 18px 0;
    }

    .cth__m-feature-img {
        display: block;
        height: 120px;
        background: rgba(28, 33, 54, 0.1);
        overflow: hidden;
    }

    .cth__m-feature-img img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .cth__m-feature-caption {
        margin: 12px 0 6px;
        font-family: "Lato", sans-serif;
        font-weight: 500;
        font-size: 15px;
        line-height: 1.2;
        color: #1c2136;
        opacity: 0.8;
    }

    .cth__m-feature-link {
        font-family: "Lato", sans-serif;
        font-weight: 700;
        font-size: 16px;
        line-height: 1.2;
        color: #1c2136;
        text-decoration: none;
    }

    /* ---- Drawer footer (Client Login + Our Locations) ---- */
    .cth__drawer-foot {
        margin-top: 40px;
    }

    .cth__drawer-login {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14px 20px;
        border: 1px solid #1c2136;
        border-radius: 5px;
        font-family: "Lato", sans-serif;
        font-weight: 700;
        font-size: 14px;
        color: #1c2136;
        text-decoration: none;
    }

    .cth__drawer-locations {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-top: 18px;
        padding-bottom: 5px;
        font-family: "Lato", sans-serif;
        font-weight: 600;
        font-size: 16px;
        color: #1c2136;
        text-decoration: none;
        /* Draw the underline as a border so it spans the whole link width —
           text, gap AND arrow — as one continuous line (text-decoration can't
           cover the flex gap). */
        border-bottom: 1px solid #1c2136;
    }

    /* On mobile the CTA (header mobile button + drawer button) is a touch heavier. */
    .cth__cta {
        font-weight: 600;
    }

    /* Lock body scroll while the drawer is open. */
    body.cth-menu-open {
        overflow: hidden;
    }
}

/* =============================================================
   RESPONSIVE
   Below 1200px the primary nav + search collapse to the burger
   (full mobile slide-out menu is implemented in a later stage).
   ============================================================= */
@media screen and (max-width: 1200px) {
    .cth__utility {
        padding: 0 24px;
    }

    .cth__main {
        padding: 16px 24px;
        gap: 20px;
        max-width: none;
    }

    .cth__nav,
    .cth__actions {
        display: none;
    }

    /* Logo left; CTA + burger grouped on the right. */
    .cth__logo {
        margin-right: auto;
    }

    .cth__cta--mobile {
        display: inline-flex;
    }

    .cth__burger {
        display: flex;
        position: relative;
        z-index: 1070;
        margin-left: 0;
    }

    /* The utility row (Locations / Client Login) is not shown on mobile —
       those links live inside the mobile slide-out menu instead. */
    .cth__utility {
        display: none;
    }

    .cth__logo img {
        width: 150px;
        height: 65px;
    }
}

@media screen and (max-width: 767px) {
    .cth__utility {
        padding: 0 16px;
    }

    .cth__main {
        padding: 14px 16px;
    }

    .cth__logo img {
        width: 120px;
        height: 52px;
    }
}

/* =============================================================
   Header search autocomplete (Figma node 4673-4531 "Active" state)
   The field turns solid white with a red caret + clear (✕) while typing,
   and a predictions dropdown (PAGES / ARTICLES + "See All Results") drops
   below it. Native WordPress AJAX — no plugin.
   ============================================================= */
.cth__search-wrap {
    position: relative;
}

.cth__search {
    position: relative;
}

/* Clear button — hidden until there is a query. */
.cth__search-clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 8px;
    background: transparent;
    border: 0;
    cursor: pointer;
    flex: 0 0 auto;
}

.cth__search-clear svg {
    width: 14px;
    height: 14px;
    display: block;
}

.cth__search-clear svg path {
    stroke: #1c2136;
}

/* Active state: solid white field, dark text, red caret. */
.cth__search-wrap.is-active .cth__search {
    background: #ffffff;
    border-color: #ffffff;
}

.cth__search-wrap.is-active .cth__search-input {
    color: #1c2136;
    caret-color: #f22d13;
}

.cth__search-wrap.is-active .cth__search-input::placeholder {
    color: rgba(28, 33, 54, 0.5);
}

.cth__search-wrap.is-active .cth__search-icon svg path {
    stroke: #1c2136;
}

.cth__search-wrap.is-active .cth__search-clear {
    display: inline-flex;
}

/* ---- Predictions dropdown ---- */
.cth__suggest {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 360px;
    max-width: 90vw;
    background: #ffffff;
    color: #1c2136;
    border-radius: 3px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
    padding: 8px 0;
    z-index: 1001;
    max-height: 70vh;
    overflow-y: auto;
}

.cth__suggest[hidden] {
    display: none;
}

.cth__suggest-group+.cth__suggest-group {
    margin-top: 4px;
    padding-top: 4px;
}

.cth__suggest-group--pages {
    padding-bottom: 8px;
}

.cth__suggest-group--pages::after {
    content: "";
    display: block;
    margin: 0 20px;
    border-bottom: 1px solid rgba(28, 33, 54, 0.12);
}

.cth__suggest-label {
    display: block;
    padding: 10px 20px 6px;
    font-family: "Lato", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #9aa0b0;
}

.cth__suggest-item {
    display: block;
    padding: 9px 20px;
    font-family: "Lato", sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.3;
    color: #1c2136;
    text-decoration: none;
}

.cth__suggest-item:hover,
.cth__suggest-item.is-highlighted {
    background: rgba(28, 33, 54, 0.06);
    color: #f22d13;
}

.cth__suggest-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 8px 20px 6px;
    padding-bottom: 4px;
    font-family: "Lato", sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    color: #1c2136;
    text-decoration: none;
    /* Single continuous underline under the text + gap + arrow (a border spans
       the whole element width, unlike text-decoration which skips the flex gap). */
    border-bottom: 1px solid #1c2136;
}

.cth__suggest-all:hover {
    color: #f22d13;
    border-bottom-color: #f22d13;
}

.cth__suggest-empty {
    padding: 16px 20px;
    font-family: "Lato", sans-serif;
    font-size: 15px;
    color: #47506b;
}

/* Loading state (shown immediately while a query is in flight). */
.cth__suggest-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    font-family: "Lato", sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #47506b;
}

.cth__suggest-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(28, 33, 54, 0.2);
    border-top-color: #f22d13;
    border-radius: 50%;
    animation: cth-spin 0.6s linear infinite;
    flex: 0 0 auto;
}

@keyframes cth-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Mobile dropdown: sits inline under the field, full width. */
.cth__drawer-search-wrap {
    position: relative;
}

.cth__suggest--mobile {
    /* position: static; */
    width: 100%;
    max-width: none;
    box-shadow: none;
    border: 1px solid rgba(28, 33, 54, 0.12);
    margin-top: 0px;
    top: 36px;
}

/* =============================================================
   Search results page (/?s=...) — template search/search.twig
   Union Blue background to sit under the fixed header; reuses the
   theme's blog_list cards for the result grid.
   ============================================================= */
.ct-search {
    background: #1c2136;
    color: #ffffff;
    /* Clear the fixed header (two-row bar). */
    padding: 200px 0 96px;
    min-height: 70vh;
}

.ct-search .container {
    max-width: 1340px;
    margin: 0 auto;
}

.ct-search__head {
    margin-bottom: 48px;
}

.ct-search__eyebrow {
    display: block;
    font-family: "Petit", "Georgia", serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.66px;
    text-transform: uppercase;
    color: #f22d13;
    margin-bottom: 12px;
}

.ct-search__title {
    font-family: "Petit", "Georgia", serif;
    font-weight: 500;
    font-size: 48px;
    line-height: 1.1;
    color: #ffffff;
    margin: 0 0 10px;
}

.ct-search__count {
    font-family: "Lato", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Empty state. */
.ct-search__empty {
    padding: 24px 0 40px;
}

.ct-search__empty-text {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    color: #ffffff;
    margin: 0 0 8px;
}

.ct-search__empty-hint {
    font-family: "Lato", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 24px;
}

.ct-search__form {
    display: flex;
    gap: 12px;
    max-width: 440px;
}

.ct-search__form input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    background: transparent;
    color: #ffffff;
    font-family: "Lato", sans-serif;
    font-size: 16px;
}

.ct-search__form input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.ct-search__form button {
    flex: 0 0 auto;
    padding: 0 24px;
    border: 0;
    border-radius: 3px;
    background: #f22d13;
    color: #ffffff;
    font-family: "Lato", sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
}

@media screen and (max-width: 1200px) {
    .ct-search {
        padding: 150px 24px 72px;
    }
}

@media screen and (max-width: 767px) {
    .ct-search {
        padding: 120px 16px 56px;
    }

    .ct-search__title {
        font-size: 32px;
    }
}