/*
Theme Name: Kayse
Theme URI: https://kayse.co
Author: WebDeev
Author URI: https://webdeev.com
Description: Custom WordPress theme for kayse.co — built with ACF Pro and Gravity Forms.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.1
License: Proprietary — All rights reserved
Text Domain: kayse
*/

/* =============================================================================
   1. RESET / BASE
   ============================================================================= */

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

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    color: var(--color-ink);
    background: #ffffff;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

a:hover {
    color: #7A1F2B;
}

/* =============================================================================
   2. DESIGN TOKENS (CSS variables)
   ============================================================================= */

:root {
    /* Colors */
    --color-wine: #7A1F2B;
    --color-wine-dark: #681922;
    --color-wine-light: #F2DDDF;
    --color-cream: #F4ECE3;
    --color-cream-light: #FBF7F2;
    --color-paper: #FAF9F7;
    --color-ink: #0E0E10;
    --color-ink-light: #2A2A2E;
    --color-muted: #6B6B70;
    --color-border: rgba(14, 14, 16, 0.08);
    --color-wine-emphasis: #752235;


    /* Typography — families */
    --font-display: 'Blacker Display', 'Cormorant Garamond', Georgia, serif;
    --font-display-text: 'Blacker Text', 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;

    /* Typography — sizes (px) */
    --fs-h1: 65px;
    --fs-h2: 45px;
    --fs-h3: 26px;
    --fs-h4: 20px;
    --fs-body: 16px;
    --fs-small: 14px;

    /* Typography — line-heights (absolute px to match Figma exactly) */
    --lh-h1: 60px;
    --lh-h2: 50px;
    --lh-h3: 15px;
    --lh-body: 23px;

    /* Typography — letter-spacing */
    --ls-body: -0.04em;

    /* Layout */
    --container-max: 1280px;
    --container-padding: 1.5rem;
    --section-padding: 6rem;
    --section-padding-mobile: 3rem;

    /* Other */
    --radius-card: 14px;
    --radius-pill: 9999px;
    --shadow-card: 0 4px 24px -8px rgba(14, 14, 16, .08);
    --shadow-cta: 0 6px 20px -6px rgba(122, 31, 43, .35);
}

/* =============================================================================
   3. TYPOGRAPHY
   ============================================================================= */

/* Common reset for all headings — color inherits from the section context
   (dark sections inherit white, light sections inherit ink). */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: inherit;
    margin: 0 0 1rem;
    letter-spacing: 0;
}

h1,
.h1 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
}

h2,
.h2 {
    font-family: var(--font-display-text);
    font-weight: 500;
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
}

h3,
.h3 {
    font-family: var(--font-display-text);
    font-weight: 700;
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    margin-bottom: .75rem;
}

h4,
.h4 {
    font-family: var(--font-display-text);
    font-weight: 600;
    font-size: var(--fs-h4);
    line-height: 1.2;
    margin-bottom: .5rem;
}

p {
    margin: 0 0 1rem;
}

strong,
b,
.strong {
    font-weight: 600;
}

em {
    font-style: italic;
    color: var(--color-wine);
}

::selection {
    background: var(--color-wine);
    color: white;
}

/* Wine emphasis on any <span class="t-wine"> inside an H2 */
h2 .t-wine {
    color: var(--color-wine-emphasis);
}

/* Mobile — scale headings down. Line-heights are absolute (Figma-style),
   so we redefine them in tandem with sizes to preserve the intended ratio. */
@media (max-width: 768px) {
    :root {
        --fs-h1: 42px;
        --lh-h1: 42px;
        --fs-h2: 32px;
        --lh-h2: 36px;
        --fs-h3: 22px;
        --lh-h3: 14px;
    }
}

/* =============================================================================
   4. LAYOUT
   ============================================================================= */

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.section {
    padding: var(--section-padding-mobile) 0;
}

@media (min-width: 768px) {
    .section {
        padding: var(--section-padding) 0;
    }
}

.section--cream {
    background: var(--color-cream);
}

.section--ink {
    background: var(--color-ink);
    color: white;
}

.text-center {
    text-align: center;
}

/* =============================================================================
   5. BUTTONS
   ============================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    font-weight: 500;
    font-size: var(--fs-body);
    cursor: pointer;
    border: none;
    transition: all .2s ease;
    text-decoration: none;
}

.btn--primary {
    background: var(--color-wine);
    color: white;
    /* Transparent border in the base so the hover can flip it to solid
       wine without adding 2px of layout height (anti-shift rule). */
    border: 1px solid transparent;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.btn--primary:hover {
    background: white;
    color: var(--color-wine);
    border-color: var(--color-wine);
    box-shadow: var(--shadow-cta);
}

.btn--outline {
    background: transparent;
    color: var(--color-ink);
    border: 1px solid var(--color-ink);
}

.btn--outline:hover {
    background: var(--color-ink);
    color: white;
}

.btn--light {
    background: white;
    color: var(--color-ink);
    /* Transparent border in the base so the hover border-color swap
       doesn't cause a layout shift (anti-shift rule). */
    border: 1px solid transparent;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.btn--light:hover {
    background: var(--color-ink);
    color: white;
    border-color: var(--color-ink);
}

.btn--ghost {
    background: transparent;
    color: var(--color-wine);
    padding-left: 0;
    padding-right: 0;
    transition: color .2s ease, text-decoration-color .2s ease;
}

/* No bg to invert on a ghost link — the "inversion" here is a
   deepened color + an underline that fades in. Stays subtle since
   ghost is used as a text-link CTA (mega-panel intro, editorial). */
.btn--ghost:hover {
    color: var(--color-wine-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/*
 * .btn--glass — glassmorphism CTA used as a secondary call-to-action across
 * Spector sections (practice_areas_ticker, values_grid, ...). Wine border
 * (Figma: 1.5px #682232, matches our --color-wine-dark) + blurred backdrop
 * + stacked drop-shadows. Self-sufficient: doesn't depend on .btn--outline.
 */
.btn--glass {
    background: rgba(255, 255, 255, 0.4);
    color: var(--color-wine);
    border: 1.5px solid var(--color-wine-dark);
    -webkit-backdrop-filter: blur(72px);
    backdrop-filter: blur(72px);
    box-shadow:
        0 4px 4px rgba(0, 0, 0, 0.07),
        0 17px 38px rgba(0, 0, 0, 0.03),
        0 69px 69px rgba(0, 0, 0, 0.05),
        0 156px 94px rgba(0, 0, 0, 0.03),
        0 277px 111px rgba(0, 0, 0, 0.01),
        0 433px 121px rgba(0, 0, 0, 0);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* Glass on LIGHT contexts: keep the frosted fill + blur, invert the
   color/border pair. Base has (color wine, border wine-dark) -> hover
   swaps to (color wine-dark, border wine). Real color/border swap
   without changing the glass fill (bg alpha bumped a touch to signal
   the state without going solid). */
.btn--glass:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--color-wine-dark);
    border-color: var(--color-wine);
    transform: translateY(-2px);
}

/* Combined modifiers .btn--outline.btn--glass — used across the site
   as a "secondary outline glass" CTA (values_grid, faq, blog_slider,
   team_showcase, testimonials, consultation, cta-banner primary, etc.).
   The two modifier bases cascade cleanly (glass wins on all props),
   so the BASE state is left to the .btn--glass rule (or to any more
   specific context override in glass-dark contexts). Only the HOVER
   is redefined here with a real "outline -> filled" inversion: the
   wine-dark border becomes the solid fill, the wine text flips to
   white. Border-color stays wine-dark (merges with fill) so the
   1.5px box size is stable (no anti-shift needed — border already
   present in base).
   Specificity (0,2,1). Placed BEFORE the context-specific glass hover
   rules further down (.consultation-cta__action .btn--glass:hover,
   .team-showcase__cta-wrap .btn--glass:hover, mutualised glass-dark
   family, .blog-hub-latest, .practice-faq...) so those still win in
   their own contexts. This rule catches the "orphan" contexts that
   had no per-section override and were falling back to the generic
   .btn--glass:hover (subtle frost bump, not a real inversion). */
.btn--outline.btn--glass:hover {
    background: var(--color-wine-dark);
    color: white;
    border-color: var(--color-wine-dark);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {

    .btn--glass,
    .btn--glass:hover {
        transition: none;
        transform: none;
    }
}

/*
 * .btn--glass-dark — CTA glass for DARK backgrounds. Uses the top/bottom
 * translucent-white gradient shared with the .blog-hub-faq items so the
 * button reads consistently on ink/bordeaux sections. White text + white
 * 60%-alpha border align with the .u-glass utility. Add to any CTA on a
 * dark background:  <a class="btn btn--glass-dark">…</a>
 *
 * The selector list also targets the shared FAQ CTA when the FAQ is used
 * under the dark .blog-hub-faq wrapper — that button lives in the shared
 * faq.php template so we can't switch its class per variant; a scoped
 * selector inherits the same styles here instead.
 */
.btn--glass-dark,
.blog-hub-faq .faq-block__cta-wrap .btn--glass,
.testimonials__cta-wrap .btn--glass,
.cta-banner__cta--primary.btn--glass,
.consultation-cta__action .btn--glass {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.006) 33.65%, rgba(255, 255, 255, 0.006) 69.71%, rgba(255, 255, 255, 0.15) 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

/* Glass on DARK contexts: the strict color/border swap would demand
   turning color white -> border white (both white/whitish), which
   either produces no visible change or (worse) fades the text to
   near-transparency (color: rgba(white, .6)) on top of a mostly
   transparent glass over dark bg = illegible. Compromise chosen:
   keep the glass fill (backdrop-filter untouched), bump the gradient
   alpha slightly so the frost brightens on hover, keep color white
   full opacity, promote the border to fully opaque white. Reads as
   "the glass tightens and the outline pops" — visible inversion of
   the border/text prominence without breaking readability on ink /
   bordeaux sections. */
.btn--glass-dark:hover,
.blog-hub-faq .faq-block__cta-wrap .btn--glass:hover,
.testimonials__cta-wrap .btn--glass:hover,
.cta-banner__cta--primary.btn--glass:hover,
.consultation-cta__action .btn--glass:hover {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.28) 100%);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 1);
}

.btn--glass-dark:focus-visible,
.blog-hub-faq .faq-block__cta-wrap .btn--glass:focus-visible,
.testimonials__cta-wrap .btn--glass:focus-visible,
.cta-banner__cta--primary.btn--glass:focus-visible,
.consultation-cta__action .btn--glass:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

/* =============================================================================
   6. CARDS
   ============================================================================= */

.card {
    background: white;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 2rem;
}

/* =============================================================================
   7. HEADER / TOPBAR
   ============================================================================= */

/* Topbar height as a CSS variable so the header can offset itself */
:root {
    --topbar-h: 0px;
    --header-h: 80px;
    --header-z: 50;
    /* Topbar sits ABOVE the mobile overlay (.mobile-nav, z-index: 60) so the
       wine bar keeps painting on top when the overlay is open at scroll 0.
       Previously this happened for free because .mobile-nav was nested inside
       .site-header (z-index 50) — that stacking context capped the overlay
       below the topbar. Now the overlay is a root sibling of the topbar
       (moved out of the header so it wouldn't get trapped by the header's
       scrolled-state `backdrop-filter`), so we make the ordering explicit. */
    --topbar-z: 70;
}

body.has-topbar {
    --topbar-h: 40px;
}

/* ------------------------------------------------------------------------- */
/* Topbar — fixed at the very top, slides up when the page is scrolled       */
/* ------------------------------------------------------------------------- */

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--topbar-z);
    background: var(--color-wine);
    color: white;
    font-size: var(--fs-small);
    padding: .5rem 0;
    /* Guarantee the wine bar fills exactly --topbar-h so the fixed .site-header
       (positioned at top: var(--topbar-h)) sits flush below it. Without this,
       short single-line content makes the topbar render ~32px tall while
       --topbar-h is 40px, leaving a thin gap where the hero background shows
       through and the header appears "detached" from the wine bar. */
    min-height: var(--topbar-h);
    display: flex;
    align-items: center;
    transition: transform .35s ease;
    will-change: transform;
}

body.is-scrolled .topbar {
    transform: translateY(-100%);
}

.topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25rem 1.25rem;
}

.topbar__item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

/* Visual separator (small dot) between successive items */
.topbar__item+.topbar__item::before {
    content: "·";
    margin-right: 1rem;
    opacity: .55;
}

.topbar__phone {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
}

.topbar__phone:hover,
.topbar__phone:focus-visible {
    color: inherit;
    text-decoration: underline;
}

.topbar__lead {
    opacity: .9;
}

@media (max-width: 640px) {
    .topbar__hours {
        display: none;
    }

    .topbar__item+.topbar__item::before {
        content: none;
        margin: 0;
    }
}

/* ------------------------------------------------------------------------- */
/* Site header — fixed, transparent overlay over the hero; glass when scroll */
/* ------------------------------------------------------------------------- */

.site-header {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    z-index: var(--header-z);
    background: transparent;
    color: white;
    border-bottom: 1px solid transparent;
    transition: top .35s ease, background-color .35s ease, color .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.site-header a {
    color: inherit;
}

.site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    /* Vertical padding only — horizontal comes from the `.container`
       class so it stays in sync with the mega panel body and any other
       theme section that uses `.container`. Using shorthand here would
       reset horizontal padding to 0 and misalign the logo / nav vs the
       mega menu content below. */
    padding-top: 1rem;
    padding-bottom: 1rem;
    gap: 1.5rem;
}

/* Scrolled OR nav-hovered — header goes opaque (COLOR change only).
   Grouped selector shares the color / bg / border-color / shadow /
   blur — none of these affect layout dimensions:
     - border-bottom is already `1px solid transparent` on the default
       state, so switching only the COLOR keeps the header height
       constant (no +1px push).
     - box-shadow renders outside the box, no layout impact.
     - backdrop-filter is a paint effect, no layout impact.
   `top` is INTENTIONALLY excluded from this group and handled below
   only for `is-scrolled` — hovering the nav must NOT slide the
   header up (topbar is still visible), so `top` stays at the default
   `var(--topbar-h)` under the hover trigger. */
body.is-scrolled .site-header,
body.is-nav-hovered .site-header {
    background: rgba(255, 255, 255, 0.85);
    color: var(--color-ink);
    border-bottom-color: var(--color-border);
    box-shadow: 0 4px 20px -10px rgba(14, 14, 16, 0.18);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* Scroll-only — once past the threshold the topbar is hidden, so the
   header pins to the viewport top to avoid an empty gap. Hover does
   NOT trigger this move. When both classes are present (scrolled
   AND hovered) this rule wins on specificity + source order and the
   header stays pinned to 0 — no jitter between the two states. */
body.is-scrolled .site-header {
    top: 0;
}

/* Logos */
.site-header__logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    justify-self: start;
}

.site-header__logo-img {
    height: 40px;
    width: auto;
    display: block;
    transition: opacity .25s ease;
}

.site-header__logo-text {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
}

/* When a dark-logo override exists, swap the two on scroll. Otherwise the
   single (light) logo stays visible in both states. */
.site-header--has-dark-logo .site-header__logo-img--dark {
    display: none;
}

body.is-scrolled .site-header--has-dark-logo .site-header__logo-img--light,
body.is-nav-hovered .site-header--has-dark-logo .site-header__logo-img--light {
    display: none;
}

body.is-scrolled .site-header--has-dark-logo .site-header__logo-img--dark,
body.is-nav-hovered .site-header--has-dark-logo .site-header__logo-img--dark {
    display: block;
}

/* Nav — pill glassmorphism container with vertical separators between items.
   The pill container is the target of the desktop 50px radius (below).
   Below 1024px the whole .site-header__nav is display:none, so the radius
   never applies to mobile. */
.site-header__nav ul {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: .5rem 1.25rem;
    gap: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    border-radius: 50px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    transition: background-color .35s ease, border-color .35s ease;
}

/* Landing pages: the nav is not rendered, so collapse the header grid
   from 3 cols (logo | nav | cta) to 2 cols (logo | cta) so the CTA
   still sits flush right on desktop. Mobile stays untouched (the mobile
   media query below already uses flex + absolute-centered logo). */
.site-header--minimal .site-header__inner {
    grid-template-columns: 1fr auto;
}

.site-header__nav li {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 1rem;
}

/* Vertical separators between adjacent items */
.site-header__nav li+li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 15px;
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-50%);
    transition: background-color .35s ease;
}

.site-header__nav a {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 500;
    line-height: 1.391;
    color: inherit;
    white-space: nowrap;
}

.site-header__nav a:hover {
    color: var(--color-wine);
}

/* Scrolled OR nav-hovered — invert the pill from light-on-dark to
   dark-on-light. Selector list means either trigger yields the same
   visual, and both applying at once is a no-op. */
body.is-scrolled .site-header__nav ul,
body.is-nav-hovered .site-header__nav ul {
    background: rgba(14, 14, 16, 0.04);
    border-color: rgba(14, 14, 16, 0.15);
}

body.is-scrolled .site-header__nav li+li::before,
body.is-nav-hovered .site-header__nav li+li::before {
    background: rgba(14, 14, 16, 0.2);
}

/* Nav link — hovered item goes wine, matches the existing hover color
   scheme when the header is opaque (either via scroll or hover). */
body.is-nav-hovered .site-header__nav a:hover,
body.is-nav-hovered .site-header__nav .has-megamenu > a,
body.is-nav-hovered .site-header__nav .current-menu-item > a {
    color: var(--color-wine);
}

/* Mega menu — placeholder scaffolding. PART 1 renders an EMPTY panel
   div next to items with mm_has_megamenu; PART 2 will fill it and add
   the open/close visual. Kept in the DOM (not display:none on the li)
   so the container can transition when populated later. */
.site-header__nav .has-megamenu {
    position: relative;
}

.site-header__nav .mega-panel {
    /* Empty in PART 1 — visual styles come in PART 2. The `hidden`
       HTML attribute keeps it out of the a11y tree until then. */
}

@media (max-width: 1024px) {
    .site-header__nav {
        display: none;
    }

    .site-header__cta {
        display: none;
    }

    /* Mobile layout: burger (left) + logo (visually centered) on a single row.
       Drops the desktop grid in favor of flex so there's no chance of grid
       auto-placement wrapping items to a new row. The logo is absolutely
       centered to .site-header__inner so its position is independent of the
       burger's intrinsic width. Desktop layout (>1024px) is unaffected.
       Vertical padding only — horizontal stays with `.container` so the
       burger/logo respect the same 1.5rem gutter as page content. */
    .site-header__inner {
        display: flex;
        align-items: center;
        gap: 0;
        padding-top: .625rem;
        padding-bottom: .625rem;
        position: relative;
        min-height: 56px;
    }

    .menu-toggle {
        order: -1;
        flex: 0 0 auto;
        margin: 0;
    }

    .site-header__logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
    }
}

/* Header CTA "Seek Advice" — overrides .btn defaults (square radius, tighter padding) */
.site-header__cta {
    padding: 12px 22px;
    border-radius: 10px;
    font-size: var(--fs-small);
    font-weight: 500;
    gap: .5rem;
    justify-self: end;
}

/* Header CTA — opt out of the .btn--primary inverted hover (white
   bg + wine text + wine border) and restore the pre-refresh solid
   wine-dark hover across ALL header states (top transparent,
   scrolled opaque, nav-hovered opaque). The header CTA is a special
   case: it lives inside a fixed header whose background context
   changes with scroll/hover state, so a light-inverted hover would
   vanish on the white opaque states. Keeping wine-dark solid
   everywhere gives a consistent, always-readable hover.
   Specificity (0,1,1) equal to .btn--primary:hover but declared
   later in the source, so this rule wins by cascade order without
   needing a sur-specific selector.
   Anti-shift: .btn--primary base carries border: 1px solid transparent
   already — this hover keeps the 1px box and just paints the border
   the same wine-dark as the fill (visually invisible, no layout
   shift). Scope strict: other .btn--primary elsewhere on the site
   keep their new inverted hover; only .site-header__cta is opted
   out here. */
.site-header__cta:hover {
    background: var(--color-wine-dark);
    color: white;
    border-color: var(--color-wine-dark);
    box-shadow: var(--shadow-cta);
}

/* Force the "Seek Advice" label to WHITE in every header state (top,
   is-scrolled, is-nav-hovered). The CTA background is always wine or
   wine-dark (via .btn--primary and its :hover), so white is legible
   everywhere. Two chains keep dragging the text back to dark and
   the color: inherit chain is context-driven, so a plain-specificity
   override would need to be duplicated per state. Use !important to
   short-circuit both chains in one line:
     - .site-header a { color: inherit }   (spec 0,1,1) makes the
       CTA anchor follow .site-header color, which flips to
       var(--color-ink) in scrolled + nav-hovered.
     - the span then inherits ink from the anchor.
   Justified use of !important: the inheritance path is intentional
   for the nav links and shouldn't be broken globally, so we opt
   out only for THIS span with a hard override. Nothing else on the
   header depends on this span's color. */
.site-header__cta-text {
    color: #fff !important;
}

.site-header__cta-icon {
    width: 20px;
    height: 19px;
    display: block;
    flex-shrink: 0;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: .5rem;
}

@media (max-width: 1024px) {
    .menu-toggle {
        display: block;
    }
}

/* -------------------------------------------------------------------------- */
/* Mega menu — desktop panels                                                  */
/* Full-width panels anchored to the bottom of the header row via absolute    */
/* positioning inside .site-header (which is already position: fixed). Only   */
/* one .mega-panel is `.is-open` at a time (JS in assets/js/main.js manages   */
/* switching). Below the 1024px breakpoint everything is hidden — the mobile */
/* overlay (.mobile-nav, rendered as a root sibling of <header>) takes over. */
/* -------------------------------------------------------------------------- */

.mega-menu-panels {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 5;
}

/*
 * Panel — full-bleed background with a hard-stop gradient at the 33%
 * mark of the SITE CONTAINER (not the viewport). The inner content is
 * constrained by an inner `.container.mega-panel__body` so text on the
 * left aligns with the header logo and content on the right aligns
 * with the nav / CTA.
 *
 * Gradient boundary is computed from the same tokens the .container
 * rule uses (--container-max + --container-padding) so any change to
 * those tokens propagates here automatically:
 *
 *   inner   = min(container-max, 100vw)
 *   left    = (100vw - inner) / 2 + container-padding
 *   content = inner - container-padding * 2
 *   boundary = left + content * 0.33
 *
 * The inner grid also uses `33% 67%` on the container's content area,
 * so the grid column boundary lines up EXACTLY with the gradient
 * hard-stop — no visible seam.
 */
.mega-panel {
    /*
     * The inner container `.mega-panel__body` uses the standard
     * `.container` horizontal padding (var(--container-padding)) so the
     * mega panel content aligns with the header logo (left column) and
     * the nav / CTA (right column). Both the gradient hard-stop AND the
     * grid column split are measured against the content-area (inner
     * minus 2×padding), so they coincide at every viewport size.
     */
    --mm-inner: min(var(--container-max), 100vw);
    --mm-left: calc((100vw - var(--mm-inner)) / 2 + var(--container-padding));
    --mm-content: calc(var(--mm-inner) - var(--container-padding) * 2);
    /* Left column ratio — single source of truth. Consumed here for the
       gradient hard-stop AND by .mega-panel__body's grid-template-columns
       below, so the visual seam always lines up with the actual grid
       column boundary. Change this ratio in ONE place to shift both. */
    --mm-left-ratio: 0.22;
    --mm-boundary: calc(var(--mm-left) + var(--mm-content) * var(--mm-left-ratio));

    background: linear-gradient(to right,
        rgba(247, 242, 238, 1) 0,
        rgba(247, 242, 238, 1) var(--mm-boundary),
        rgba(250, 249, 247, 1) var(--mm-boundary),
        rgba(250, 249, 247, 1) 100%);
    color: var(--color-ink);
    box-shadow: 0 20px 40px -20px rgba(14, 14, 16, .25);
    border-top: 1px solid var(--color-border);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
    display: none;
}

.mega-panel:not([hidden]) {
    display: block;
}

.mega-panel.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/*
 * Inner container — inherits `.container` (max-width + margin auto +
 * `padding: 0 var(--container-padding)`). Because both `.site-header__inner`
 * (logo + nav row) and this `.mega-panel__body` use the SAME .container
 * horizontal padding, the header logo aligns with the mega left column
 * content and the nav / CTA aligns with the mega right column content.
 *
 * The 33/67 grid tracks split the container's content-area, and the
 * `--mm-boundary` calc above uses the same content-area — so the
 * gradient hard-stop lines up EXACTLY with the grid column boundary.
 */
.mega-panel__body {
    display: grid;
    /* Left column ratio consumed from --mm-left-ratio (defined on the
       .mega-panel above) so the visual gradient seam and the grid column
       boundary stay locked together — change --mm-left-ratio on
       .mega-panel to shift both at once, no risk of drift.
       Current 22 percent: title (22px) + description (14px) + optional
       image (max-width 120px) read comfortably at ~240px of useful
       width. Bump --mm-left-ratio to 0.25 if any panel's left copy
       feels too cramped after review. */
    grid-template-columns: calc(var(--mm-left-ratio) * 100%) 1fr;
    align-items: stretch;
}

/* Left column — content flush with the container left edge (aligned
   with the logo above), breathing space on the right side toward the
   color boundary. */
.mega-panel__left {
    padding: 2.5rem 2rem 2.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Right column — breathing space on the left side away from the color
   boundary, flush with the container right edge (aligned with the nav
   and CTA above). */
.mega-panel__right {
    padding: 2.5rem 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mega-panel__left-title {
    font-family: var(--font-display-text);
    font-size: 22px;
    line-height: 1.15;
    font-weight: 500;
    margin: 0;
    color: var(--color-ink);
}

.mega-panel__left-desc {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-ink-light, #2A2A2E);
}

.mega-panel__left-desc p { margin: 0 0 .5rem; }
.mega-panel__left-desc p:last-child { margin-bottom: 0; }

.mega-panel__left-media {
    margin-top: auto;
    align-self: flex-end;
    max-width: 120px;
    opacity: .8;
}

.mega-panel__left-img {
    width: 100%;
    height: auto;
    display: block;
}

.mega-panel__links {
    display: grid;
    /* 3 columns to shrink vertical footprint from 8 rows to 6 rows for
       a 16-item panel like ADR Services. Column gap tightened to 1rem
       (was 1.5rem) to squeeze back some label width. Row gap kept at
       .25rem — the wraps we still get on 3-4 longest labels are
       handled by the grid's default row stretch (all items on a row
       share the tallest one's height) + align-items: flex-start on the
       link so the icon stays at top when the label breaks to a 2nd
       line. Result: visual alignment stays clean even with residual
       wrap. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .25rem 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    align-content: start;
}

.mega-panel__link-item { margin: 0; }

.mega-panel__link {
    display: flex;
    /* center-aligned: works for BOTH the majority of single-line labels
       (icon 34px + label ~18px both centered) AND the 3-4 long labels
       that wrap to 2 lines (icon 34px + label ~35px, centers still
       align). Grid row default = stretch, so every item in the same
       row gets the tallest item's height -> no jagged baseline even
       when one item wraps. */
    align-items: center;
    gap: .625rem;
    padding: .75rem .75rem;
    border-radius: 10px;
    color: var(--color-ink);
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}

.mega-panel__link:hover,
.mega-panel__link:focus-visible {
    background: rgba(122, 31, 43, .06);
    color: var(--color-wine);
    outline: none;
}

.mega-panel__link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Shrunk from 40 -> 34px to give the label a bit more horizontal room
       in the tighter 3-column layout. Icon still reads as a clear
       pictogram at 34px with the internal image capped at 22px. */
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    background: rgba(122, 31, 43, .08);
    color: var(--color-wine);
}

.mega-panel__link-icon-img {
    max-width: 22px;
    max-height: 22px;
    width: auto;
    height: auto;
}

.mega-panel__link-label {
    flex: 1 1 auto;
    font-family: var(--font-body);
    /* Compacted from 15/.04em to 14/.02em for the 3-column layout —
       ~7% narrower + ~2% tighter tracking = ~9% more chars per line.
       uppercase and weight 600 preserved per design intent. Line-height
       set so wrapped labels stay tight. */
    font-size: 14px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.mega-panel__link-chevron {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: currentColor;
    opacity: .6;
    transition: transform .18s ease;
}

.mega-panel__link:hover .mega-panel__link-chevron,
.mega-panel__link:focus-visible .mega-panel__link-chevron {
    transform: translateX(3px);
    opacity: 1;
}

.mega-panel__link-chevron svg {
    width: 100%;
    height: 100%;
}

/*
 * Bottom bar — CTA (optional) + fullwidth item (optional). Sits INSIDE
 * .mega-panel__right so its background stays rgba(250,249,247,1) and it
 * never spans under the left cream column. A subtle top border marks the
 * separation from the links grid above.
 */
.mega-panel__bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
    margin-top: auto;
    padding: 1.5rem 0 2rem;
    border-top: 1px solid var(--color-border);
}

.mega-panel__bottom > :only-child {
    /* When only the CTA (or only the fullwidth item) is present, let it
       span the full row so the grid doesn't create dead space. */
    grid-column: 1 / -1;
    justify-self: start;
}

/* Layout: two side-by-side blocks, ALWAYS side by side (no wrap) —
   LEFT  (.mega-panel__cta-left)  = icon + body, capped at 50% width
   RIGHT (.mega-panel__cta-btn)   = the CTA button, sits in the right
                                    half via justify-content: space-between
   flex-wrap: nowrap prevents the two blocks from stacking under each
   other; the left block hard-cap at 50 percent + min-width: 0 lets
   the heading/text wrap INSIDE the left half instead of pushing the
   CTA under it. align-items: center vertically centers the button
   against the text block. */
.mega-panel__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: nowrap;
}

/* Left block — icon + body sit side by side, icon vertically centered
   against the heading + text group (align-items: center) so it doesn't
   float above or below when the body is short.
   flex: 0 1 50% + max-width: 50% is the hard cap that keeps the CTA
   next to us (never underneath). min-width: 0 propagated to the body
   below so the heading/text actually wrap inside this 50 percent slot
   instead of forcing the flex item wider. */
.mega-panel__cta-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 1 50%;
    max-width: 50%;
    min-width: 0;
}

/* Icon slot — 50px height reads as visually tall as the {heading +
   text} group (heading ~29px + text ~21px ≈ 50px). Inner img capped
   to the same 50px so any source size renders consistently. */
.mega-panel__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    flex-shrink: 0;
}

.mega-panel__cta-icon-img {
    max-height: 50px;
    width: auto;
    height: auto;
    display: block;
}

/* Body — stacks heading above text. DOM order already has heading
   first, so flex-direction column gives the requested visual order. */
.mega-panel__cta-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Heading — bumped to 24px for more presence, line-height brought
   down to 1.2 (was 50px absolute, which drowned the title in empty
   vertical space and killed the intended weight). */
.mega-panel__cta-heading {
    font-family: var(--font-display-text);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: 0;
    margin: 0;
    color: var(--color-ink);
}

/* Text — trimmed 16 -> 15px so the description sits secondary to the
   heading; the rest of the typo (Inter 500, tight tracking, ink) stays
   as spec. */
.mega-panel__cta-text {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.39;
    letter-spacing: 0.01em;
    color: #000;
    margin: 0;
}

/* .mega-panel__cta-btn no longer needs margin-left: auto — the parent's
   justify-content: space-between + explicit two-block layout already
   pushes the button to the right edge. */

/* CTA button INVERTED against .btn--primary for this context: base is
   white / wine / border wine, hover flips to wine-dark / white / border
   wine-dark (the shared "outline goes filled" pattern from the CTA
   pass, adapted to a solid rather than glass). Spec (0,2,0) for the
   base and (0,2,1) for the hover — both beat .btn--primary (0,1,0)
   and .btn--primary:hover (0,1,1) via class count.
   Anti-shift: base carries a 1px wine border, hover just re-paints
   the border-color to wine-dark, so the 1px box stays identical (no
   layout jump). flex-shrink: 0 keeps the button at its natural label
   width — it never squeezes when the left block eats its full 50%. */
.mega-panel__cta .mega-panel__cta-btn {
    background: #fff;
    color: var(--color-wine);
    border: 1px solid var(--color-wine);
    flex-shrink: 0;
}

.mega-panel__cta .mega-panel__cta-btn:hover,
.mega-panel__cta .mega-panel__cta-btn:focus-visible {
    background: var(--color-wine-dark);
    color: #fff;
    border-color: var(--color-wine-dark);
}

.mega-panel__fullwidth {
    display: inline-flex;
    align-items: center;
    gap: .875rem;
    padding: .75rem 1.25rem;
    border-radius: 10px;
    background: rgba(122, 31, 43, .06);
    color: var(--color-wine);
    /* Transparent border in the base so the hover border-color swap
       doesn't cause a layout shift (anti-shift rule). */
    border: 1px solid transparent;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
    justify-self: end;
}

.mega-panel__fullwidth:hover,
.mega-panel__fullwidth:focus-visible {
    background: var(--color-wine);
    color: #ffffff;
    border-color: var(--color-wine);
    outline: none;
}

.mega-panel__fullwidth-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
}

.mega-panel__fullwidth-icon-img {
    width: 100%;
    height: 100%;
}

.mega-panel__fullwidth-chevron {
    display: inline-flex;
    width: 14px;
    height: 14px;
    opacity: .8;
}

.mega-panel__fullwidth-chevron svg {
    width: 100%;
    height: 100%;
}

@media (max-width: 1024px) {
    /* Below the desktop breakpoint the nav pill is hidden — hide the
       mega panels too so a stray hover on the (invisible) trigger
       doesn't reveal an empty panel. */
    .mega-menu-panels {
        display: none;
    }
}

/* -------------------------------------------------------------------------- */
/* Mobile nav — full-screen dark overlay + accordion                          */
/* Fixed cover, driven by body.is-mobile-nav-open. The burger toggles the     */
/* body class; JS handles focus + Escape. Accordion sub-lists expand per      */
/* item via aria-expanded + hidden attribute.                                 */
/*                                                                            */
/* IMPORTANT: this overlay MUST be a direct child of <body>, not nested       */
/* inside <header class="site-header">. The header receives                   */
/* `backdrop-filter: blur(...)` in its scrolled state, which promotes it to   */
/* a containing block for `position: fixed` descendants — so an overlay       */
/* nested inside it would have `inset: 0` resolved against the header's box   */
/* (a thin sliver) instead of the viewport once the page has been scrolled.   */
/* The render lives in template-parts/mobile-nav.php, output by header.php    */
/* as a sibling of </header>.                                                 */
/* -------------------------------------------------------------------------- */

.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(14, 14, 16, .96);
    color: #ffffff;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .25s ease;
    display: none;
}

body.is-mobile-nav-open .mobile-nav {
    display: block;
    opacity: 1;
}

/*
 * Panel = full-height flex column. The `__header` sits at top (pixel-
 * aligned with .site-header__inner on mobile), the `__body` gets the
 * reading-width constraint (max 520px, centered) and the scroll.
 */
.mobile-nav__panel {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/*
 * Header replica — reproduces the DESKTOP `.site-header__inner` grid
 * pattern (`1fr auto 1fr`, line ~452) so the layout guarantees no
 * overlap regardless of intrinsic sizes:
 *   - Cell 1 (`1fr`): the close button, `justify-self: start` puts it
 *     flush at the container's left edge (same X as the burger on the
 *     real mobile header at 1.5rem = 24px).
 *   - Cell 2 (`auto`): the logo, `justify-self: center` centres it in
 *     the auto track. Because the flanking tracks are equal `1fr`, the
 *     `auto` track sits exactly at the row centre — perfectly balanced,
 *     immune to the burger's intrinsic width.
 *   - Cell 3 (`1fr`): empty by grid auto-placement — no HTML needed.
 *
 * The old flex + absolute-centre mixture was fragile: an absolutely
 * positioned logo can visually collide with the flex flow of the close
 * button when either grew intrinsically. The grid pattern makes the
 * three tracks share the container width deterministically.
 *
 * All other alignment tokens are identical to `.site-header__inner`
 * mobile (min-height 56, vertical padding .625rem, .container class,
 * margin-top: var(--topbar-h) below the topbar).
 */
.mobile-nav__header {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    min-height: 56px;
    padding-top: .625rem;
    padding-bottom: .625rem;
    margin-top: var(--topbar-h);
    flex-shrink: 0;
}

/*
 * Match .menu-toggle EXACTLY on mobile (lines 656-660 + 688-695). The
 * previous version added display: inline-flex + align/justify content +
 * explicit width/height + svg { display: block } which subtly shifted
 * the button's intrinsic box vs the burger's UA defaults. Reverting to
 * the burger's exact property set puts the ✕ pixel-perfect on top of
 * the burger's position.
 */
.mobile-nav__close {
    justify-self: start;
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: .5rem;
    margin: 0;
}

.mobile-nav__close svg {
    width: 24px;
    height: 24px;
}

.mobile-nav__logo {
    justify-self: center;
    margin: 0;
    padding: 0;
    display: inline-flex;
    line-height: 0;
}

.mobile-nav__logo a {
    display: inline-flex;
    line-height: 0;
}

/*
 * Force the exact 40px height that .site-header__logo-img uses on the
 * real header. Marked !important because the global `img { height: auto }`
 * rule (section 1) has the same specificity and its later position in
 * the cascade would otherwise win when both rules apply — this locks
 * the logo to the correct visual size regardless of the source file's
 * intrinsic dimensions.
 */
.mobile-nav__logo-img {
    height: 40px !important;
    width: auto !important;
    display: block;
}

/* Body — carries the reading-width constraint + scroll. Everything
   below the header (nav items, socials, CTA) lives here. */
.mobile-nav__body {
    flex: 1 1 auto;
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
    overflow-y: auto;
}

/*
 * No flex-grow — items keep their intrinsic height so the trailing
 * blocks (socials, Seek Advice) sit RIGHT AFTER the items with the
 * body's flex `gap`, rather than being pushed to the viewport bottom.
 * When the content is short, the panel is short too — no dead space.
 */
.mobile-nav__items {
    flex: 0 0 auto;
}

.mobile-nav__items ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* No divider between items — spec removed borders. */
.mobile-nav__item {
    border: 0;
}

/* Row = centered layout with the chevron sitting to the right without a
   visible container. The link takes the full available width and its text
   is centered; the chevron is a positioned button next to it, transparent
   background, no border. */
.mobile-nav__row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .25rem 0;
}

.mobile-nav__link {
    display: inline-block;
    padding: 0;
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
    /* Blacker DISPLAY per spec (not Text) */
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 22px;
    line-height: 42px;
    letter-spacing: 0.02em;
    text-align: center;
}

.mobile-nav__link:hover,
.mobile-nav__link:focus-visible {
    color: var(--color-cream);
    outline: none;
}

/* Chevron — SVG only, no circle, no border, no background. Sits to the
   right of the centered label without pushing it off-center. */
.mobile-nav__toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    padding: 0;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color .18s ease;
}

.mobile-nav__toggle:hover,
.mobile-nav__toggle:focus-visible {
    color: var(--color-cream);
    outline: none;
}

.mobile-nav__toggle svg {
    width: 18px;
    height: 18px;
    transition: transform .25s ease;
}

.mobile-nav__item.is-open .mobile-nav__toggle {
    transform: translateY(-50%) rotate(180deg);
}

/* Accordion sub-links — centered, same font family, softer weight. No
   left border, no dividers.
   Closed state = max-height 0 + opacity 0 + visibility hidden (removes
   from the a11y tree AND the tab order). Smooth expand/collapse on
   .mobile-nav__item.is-open — the visibility transition is delayed only
   on close so the fade-out finishes BEFORE the element becomes
   inaccessible, matching the WAI-ARIA disclosure pattern. */
.mobile-nav__sub {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    text-align: center;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .35s ease, opacity .25s ease, padding .35s ease, visibility 0s linear .35s;
}

.mobile-nav__item.is-open .mobile-nav__sub {
    max-height: 800px; /* generous cap — enough for realistic sub-menus */
    opacity: 1;
    visibility: visible;
    padding: .25rem 0 .75rem;
    transition: max-height .35s ease, opacity .25s ease, padding .35s ease, visibility 0s linear 0s;
}

.mobile-nav__sub li a {
    display: inline-block;
    padding: .25rem 0;
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 18px;
    line-height: 36px;
    letter-spacing: 0.02em;
    transition: color .18s ease;
}

.mobile-nav__sub li a:hover,
.mobile-nav__sub li a:focus-visible {
    color: #ffffff;
    outline: none;
}

/* FOLLOW US block — REUSES the footer_social ACF source, styled for the
   mobile overlay: centered label + horizontal icon row. */
.mobile-nav__social {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .875rem;
    padding: .5rem 0 0;
}

.mobile-nav__social-heading {
    margin: 0;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}

.mobile-nav__social-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
}

.mobile-nav__social-list li { margin: 0; }

.mobile-nav__social-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #ffffff;
    text-decoration: none;
    transition: opacity .18s ease;
}

.mobile-nav__social-list a:hover,
.mobile-nav__social-list a:focus-visible {
    opacity: .75;
    outline: none;
}

.mobile-nav__social-icon {
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1);
    opacity: .9;
}

.mobile-nav__social-text {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
}

.mobile-nav__footer {
    /* No border-top — the design removed all dividers. Spacing comes
       from the panel's flex `gap` and this element's own top padding. */
    padding-top: .5rem;
    display: flex;
    justify-content: center;
}

.mobile-nav__cta {
    display: inline-flex;
    justify-content: center;
    min-width: 200px;
}

/* Above the desktop breakpoint the mobile overlay is never shown. */
@media (min-width: 1025px) {
    .mobile-nav {
        display: none !important;
    }
    body.is-mobile-nav-open {
        overflow: auto;
    }
}

/* When the mobile nav is open, lock body scroll. */
body.is-mobile-nav-open {
    overflow: hidden;
}

/* Respect users who prefer reduced motion: no header/topbar transition */
@media (prefers-reduced-motion: reduce) {

    .topbar,
    .site-header,
    .mega-panel,
    .mobile-nav {
        transition: none;
    }
}

/* =============================================================================
   8. HERO
   ============================================================================= */

.hero {
    position: relative;
    background: var(--color-ink);
    color: white;
    overflow: hidden;
    isolation: isolate;
}

/* Background media: works for both <img> and <video> */
.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* Video tweaks: hide native UI artefacts on some browsers */
.hero__bg--video {
    background: var(--color-ink);
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--color-ink);
    z-index: 1;
    pointer-events: none;
}

.hero__inner {
    position: relative;
    z-index: 2;
    /* top padding clears the fixed topbar + header overlay */
    padding: calc(var(--topbar-h) + var(--header-h) + 3rem) 0 9rem;
    max-width: 720px;
}

.hero__intro {
    font-size: 18px;
    max-width: 520px;
    margin-bottom: 2rem;
    opacity: .9;
}

.hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.hero__rating {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--fs-small);
}

.hero__stars {
    letter-spacing: 1px;
    color: #FFC53D;
    font-size: 20px;
}

.hero__rating-text {
    opacity: .9;
    font-size: 20px;
}

/* Respect users who prefer reduced motion: pause background video. */
@media (prefers-reduced-motion: reduce) {
    .hero__bg--video {
        animation: none;
    }
}

/* =============================================================================
   9. LOGOS MARQUEE (overlaps the bottom of the hero)
   ============================================================================= */

.logos-marquee {
    /* Positioned to overlap the last ~82px of the hero */
    position: relative;
    margin-top: -82px;
    z-index: 5;

    height: 82px;
    background: rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.logos-marquee__viewport {
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.logos-marquee__track {
    display: flex;
    align-items: center;
    gap: 4rem;
    list-style: none;
    margin: 0;
    padding: 0;

    /* translateX(0) → translateX(-50%) loops perfectly because the list is duplicated */
    animation: logos-marquee-scroll linear infinite;
    animation-duration: 30s;
    will-change: transform;
}

.logos-marquee__item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logos-marquee__item img {
    height: 25px;
    width: auto;
    display: block;
    /* Force any logo (color or grayscale) to render as pure white on the dark bar */
    filter: brightness(0) invert(1);
    opacity: .85;
}

@keyframes logos-marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .logos-marquee__track {
        animation: none;
    }
}

@media (max-width: 768px) {
    .logos-marquee {
        height: 64px;
        margin-top: -64px;
    }

    .logos-marquee__item img {
        height: 24px;
    }
}

/* =============================================================
   10. PROCESS STEPS
   ============================================================= */

.process-steps {
    background: var(--color-cream);
    padding: 3rem 0;
}

.process-steps__header {
    max-width: 720px;
    margin: 0 auto 2rem;
    text-align: center;
}

.process-steps__heading {
    margin-bottom: .75rem;
}

.process-steps__intro {
    color: var(--color-muted);
    margin: 0;
}

.process-steps__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 640px) {
    .process-steps__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }
}

@media (min-width: 1024px) {
    .process-steps__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }
}

/* Card : flat sur fond cream, icône à gauche + texte à droite */
.process-steps__card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    position: relative;
}

/* Séparateur vertical fin entre cartes (sauf la première) */
/* Séparateur SVG décoratif entre cartes (courbe en V) */
@media (min-width: 640px) {
    .process-steps__card+.process-steps__card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 26px;
        height: 78px;
        background-image: url('assets/images/separators/process-divider.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        pointer-events: none;
    }
}

/* Sur mobile, on retire le border-left et on garde l'espace vertical */
@media (max-width: 639px) {
    .process-steps__card {
        padding: 1rem 0;
    }

    .process-steps__card+.process-steps__card {
        border-top: 1px solid rgba(14, 14, 16, 0.12);
        padding-top: 1.25rem;
    }
}

.process-steps__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-wine);
    /* Force monochrome SVGs/PNGs to render in wine color */
    filter: brightness(0) saturate(100%) invert(13%) sepia(60%) saturate(2500%) hue-rotate(335deg) brightness(85%) contrast(95%);
}

.process-steps__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.process-steps__text {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.process-steps__title {
    font-family: var(--font-display-text);
    font-weight: bold;
    font-size: 25px;
    line-height: 21px;
    letter-spacing: -0.01em;
    text-align: left;
    margin: 0;
    color: var(--color-ink);
    margin-bottom: 10px;
}

.process-steps__description {
    font-family: var(--font-body); /* Inter */
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0;
    color: var(--color-ink);
    margin: 0;
}


/* CTA override : glassmorphism style spécifique à ce bloc */
.practice-areas-ticker__cta-wrap .btn--primary {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(72px);
    -webkit-backdrop-filter: blur(72px);
    border: 1.5px solid rgba(20, 20, 22, 1);
    color: rgba(20, 20, 22, 1);
    box-shadow:
        0 4px 4px rgba(0, 0, 0, 0.07),
        0 17px 38px rgba(0, 0, 0, 0.03),
        0 69px 69px rgba(0, 0, 0, 0.05),
        0 156px 94px rgba(0, 0, 0, 0.03),
        0 277px 111px rgba(0, 0, 0, 0.01),
        0 433px 121px rgba(0, 0, 0, 0);
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

/* Glass ticker CTA (light context, both color + border are ink so a
   strict swap yields no change). Keep the glass fill, deepen color +
   border to wine as a visible hover accent. */
.practice-areas-ticker__cta-wrap .btn--primary:hover {
    background: rgba(255, 255, 255, 0.7);
    color: var(--color-wine);
    border-color: var(--color-wine);
    transform: translateY(-2px);
}

/* =============================================================================
   11. PRACTICE AREAS TICKER
   ============================================================================= */

.practice-areas-ticker {
    background: var(--color-paper);
    padding: 5rem 0;
    overflow: hidden;
}

.practice-areas-ticker__grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 7rem;
    align-items: center;
}

@media (max-width: 768px) {
    .practice-areas-ticker__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.practice-areas-ticker__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.practice-areas-ticker__eyebrow {
    margin: 0;
    font-family: var(--font-body);
    /* Inter */
    font-size: 25px;
    font-weight: 400;
    line-height: 31px;
    color: var(--color-ink);
}

.practice-areas-ticker__cta-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

@media (max-width: 768px) {
    .practice-areas-ticker__cta-wrap {
        justify-content: flex-start;
    }
}

/* Wheel viewport: fixed-height window with top/bottom fade-out mask.
   Items have VARIABLE heights (1 line ≈ 62px, 2 lines ≈ 124px at 55px /
   line-height 1.13) — the JS in assets/js/main.js measures each item at
   runtime instead of relying on a shared height constant. */
.practice-areas-ticker__wheel {
    position: relative;
    height: 450px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
}

.practice-areas-ticker__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* Constant vertical spacing between items, whatever their content height. */
    gap: 24px;
    transition: transform .6s cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: transform;
}

.practice-areas-ticker__item {
    /* No fixed height — box shrinks to fit 1 or 2 lines of the title. */
    font-family: var(--font-display-text);
    /* Blacker Text */
    font-size: 55px;
    font-weight: 400;
    line-height: 1.13;
    color: var(--color-ink);
    opacity: .3;
    transition: opacity .6s ease, color .6s ease, font-weight .6s ease;
}

.practice-areas-ticker__item.is-adjacent {
    opacity: .6;
}

.practice-areas-ticker__item.is-active {
    color: var(--color-wine);
    font-weight: 500;
    opacity: 1;
}

/* Item link — inherits every visual property from the parent <li> so the
   click target is 100% indistinguishable from a plain-text item. Wine
   underline on hover/focus for a discreet affordance without altering the
   base design. */
.practice-areas-ticker__item-link {
    color: inherit;
    text-decoration: none;
    background: none;
    display: inline;
    transition: text-decoration-color .2s ease;
}

.practice-areas-ticker__item-link:hover,
.practice-areas-ticker__item-link:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 0.05em;
    text-underline-offset: 0.12em;
    text-decoration-color: currentColor;
}

.practice-areas-ticker__item-link:focus-visible {
    outline: 2px solid var(--color-wine);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Manual nav — pair of circular outline buttons below the eyebrow.
   Wine border + wine icon on light bg (matches the ticker's paper background
   and the wine highlight of the active item). */
.practice-areas-ticker__nav {
    display: flex;
    gap: .5rem;
    margin-top: 2rem;
}

.practice-areas-ticker__nav-btn {
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--color-wine);
    border-radius: 50%;
    background: transparent;
    color: var(--color-wine);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, color .2s ease;
}

.practice-areas-ticker__nav-btn:hover {
    background: var(--color-wine);
    color: white;
}

.practice-areas-ticker__nav-btn:focus-visible {
    outline: 2px solid var(--color-wine);
    outline-offset: 2px;
}

.practice-areas-ticker__nav-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

@media (prefers-reduced-motion: reduce) {
    .practice-areas-ticker__list {
        transition: none;
    }

    .practice-areas-ticker__item {
        opacity: 1;
        transition: none;
    }

    .practice-areas-ticker__nav-btn {
        transition: none;
    }
}

/* =============================================================================
   12. VALUES GRID
   ============================================================================= */

.values-grid {
    background: var(--color-cream);
    padding: 6rem 0;
}

.values-grid__header {
    position: relative;
    text-align: center;
    max-width: 1100px;
    margin: 0 auto 3rem;
}

/* Decorative scales flanking the heading. Absolute → they intentionally
   overflow the header's 760px max-width. Hidden on tablet/mobile. */
.values-grid__decoration {
    position: absolute;
    top: 0;
    width: 140px;
    height: auto;
    opacity: .5;
    pointer-events: none;
    user-select: none;
}

.values-grid__decoration--left {
    left: 0;
}

.values-grid__decoration--right {
    right: 0;
}

@media (max-width: 1024px) {
    .values-grid__decoration {
        display: none;
    }
}

.values-grid__heading {
    font-family: var(--font-display-text);
    font-weight: 500;
    font-size: 45px;
    line-height: 50px;
    letter-spacing: 0;
    color: var(--color-ink);
    margin: 0 0 1rem;
    text-align: center;
}

.values-grid__heading .t-wine {
    color: var(--color-wine);
}

.values-grid__intro {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.39;
    letter-spacing: 0.01em;
    color: var(--color-ink);
    margin: 0 0 2.5rem;
    text-align: center;
}

.values-grid__quote {
    position: relative;
    padding-left: calc(1.25rem + 28px + .75rem);
    max-width: 600px;
    border-left: 3px solid var(--color-wine);
    text-align: left;
    display: block;
    margin: 0 auto;
}

.values-grid__quote::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1.25rem;
    width: 28px;
    height: 28px;
    background: url('assets/images/quotes.svg') no-repeat left top / contain;
}

.values-grid__quote p {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.54;
    letter-spacing: 0.01em;
    color: var(--color-ink);
    margin: 0;
}

.values-grid__quote p strong {
    font-weight: 700;
}

.values-grid__quote-mark {
    display: none;
}

.values-grid__list {
    list-style: none;
    margin: 4rem 0 3rem;
    padding: 0;
    display: grid;
    /* Desktop: as many equal columns as there are items, all on ONE row.
       auto-fit + minmax(180px, 1fr) stretches N cards across the container
       (N = 4, 5, 6 all fit on a single row). A 7th card wraps to a second
       row because 180px is the readability floor — the guardrail chosen so
       cards never shrink to an unreadable width. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .values-grid__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .values-grid__list {
        grid-template-columns: 1fr;
    }
}

.values-grid__card {
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.values-grid__card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
}

.values-grid__icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    /* Force monochrome SVG/PNG to render in the wine accent color */
    filter: brightness(0) saturate(100%) invert(13%) sepia(60%) saturate(2500%) hue-rotate(335deg) brightness(85%) contrast(95%);
}

.values-grid__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Card titles: Blacker Text Bold, sized to align next to the 32px icon */
.values-grid__title {
    font-family: var(--font-display-text);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: 0;
    color: var(--color-ink);
    margin: 0;
}

.values-grid__description {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    letter-spacing: -0.04em;
    color: var(--color-ink);
    margin: 0;
}

.values-grid__description strong {
    font-weight: 600;
}

.values-grid__cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

/* =============================================================================
   13. TESTIMONIALS SLIDER
   ============================================================================= */

.testimonials {
    background: var(--color-ink);
    color: white;
    padding: 6rem 0;
    overflow: hidden;
}

.testimonials__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 3rem;
}

.testimonials__head-text {
    max-width: 600px;
}

.testimonials__heading {
    font-family: var(--font-display-text);
    font-weight: 500;
    font-size: 45px;
    line-height: 50px;
    margin: 0 0 1rem;
    color: white;
}

.testimonials__heading strong {
    font-weight: 700;
}

.testimonials__intro {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Optional gold accent for a word/phrase inside the intro. Editors wrap
   the target text in a <span> in ACF; the span inherits family/size and
   only overrides the color (matches the rating gold #E6B845 already used
   below in this component). */
.testimonials__intro span {
    color: #E6B845;
}

/* Nav */
.testimonials__nav {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
}

.testimonials__nav-btn {
    width: 48px;
    height: 48px;
    border: 1.5px solid #fff;
    border-radius: 50%;
    background: transparent;
    color: white;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, border-color .2s ease;
}

.testimonials__nav-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

.testimonials__nav-btn:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

.testimonials__nav-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 3;
}

/* Rows */
.testimonials__rows {
    display: flex;
    flex-direction: column;
    /* Each __row carries its own 20px vertical padding (see below) to keep
       card shadows fully rendered. The rows are butted together (gap: 0) so
       the visible space between the two Home marquees stays close to the
       original (2×20px = 40px net), instead of stacking 20+24+20 = 64px. */
    gap: 0;
    margin-bottom: 3rem;
    /* Full-bleed: escape the parent .container so the marquee runs edge-to-edge
       of the viewport. .testimonials { overflow: hidden } prevents any horizontal
       scrollbar leak from 100vw. The header and CTA remain inside .container. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.testimonials__row {
    /* overflow-x clips the marquee horizontally, overflow-y stays visible
       so the card box-shadow isn't cut off on top/bottom. Some engines still
       coerce overflow-y to a clipping value once overflow-x is non-visible —
       the 20px padding-block gives the card box-shadow (spread 15 + blur 25)
       enough room INSIDE the row box, so it renders in every browser. */
    overflow-x: clip;
    overflow-y: visible;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Shifter — wrapping the track so manual nav offset composes with the
   running animation without disturbing it. JS sets --manual-offset on
   this element; the track keeps its keyframe transform intact. */
.testimonials__shifter {
    transform: translateX(var(--manual-offset, 0));
    transition: transform .4s cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: transform;
}

.testimonials__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: testimonials-scroll-rtl 60s linear infinite;
    will-change: transform;
}

.testimonials__row[data-direction="ltr"] .testimonials__track {
    animation-name: testimonials-scroll-ltr;
}

@keyframes testimonials-scroll-rtl {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes testimonials-scroll-ltr {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

/* Pause on hover or when JS toggles .is-paused (nav click) */
.testimonials__rows:hover .testimonials__track,
.testimonials__rows.is-paused .testimonials__track {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .testimonials__track {
        animation: none;
    }

    .testimonials__shifter {
        transition: none;
    }
}

/* Card */
.testimonials__card {
    flex-shrink: 0;
    width: 380px;
    background: linear-gradient(339.44deg, rgba(255, 255, 255, 0) 1.85%, rgba(255, 255, 255, 0.09) 50.08%, rgba(255, 255, 255, 0) 98.31%);
    border: 1.5px solid #ffffff;
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 3px 3px 25px 15px rgba(0, 0, 0, 0.9);
    -webkit-backdrop-filter: blur(57.2px);
    backdrop-filter: blur(57.2px);
}

.testimonials__rating {
    color: #E6B845;
    font-size: 20px;
    letter-spacing: 2px;
}

.testimonials__card-title {
    font-family: var(--font-display-text);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    color: white;
    margin: 0;
}

.testimonials__card-text {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    flex-grow: 1;
}

.testimonials__card-author {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-top: auto;
}

.testimonials__card-name {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: white;
}

.testimonials__card-role {
    font-family: var(--font-body);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

/* CTA wrap */
.testimonials__cta-wrap {
    display: flex;
    justify-content: center;
}

@media (max-width: 768px) {
    .testimonials__header {
        flex-direction: column;
        gap: 1.5rem;
    }

    .testimonials__heading {
        font-size: 32px;
        line-height: 36px;
    }

    .testimonials__card {
        width: 280px;
    }
}

/* =============================================================================
   14. TEAM SHOWCASE
   ============================================================================= */

.team-showcase {
    background-color: var(--color-ink);
    /* Bg image URL is set inline by the PHP (safe — esc_url at the source). */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.team-showcase__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 700px;
    /* Subtle top-left → bottom-right dark overlay. .team-showcase already
       has its own dark section bg; this adds a soft directional gradient
       inside the inner grid so the right column reads a touch darker. */
    background: linear-gradient(338.85deg, rgba(4, 2, 22, 0) 32.65%, rgba(4, 2, 22, 0.3) 59.93%);
}

@media (max-width: 1024px) {
    .team-showcase__inner {
        grid-template-columns: 1fr;
    }

    /* Invert the visual order when the grid stacks: DOM has carousel
       first, panel second (desktop = carousel left, panel right). In
       stacked layout the panel (heading + description + CTA) reads
       first, carousel below. Uses `order` since grid respects it for
       auto-placement in a single-column track. */
    .team-showcase__panel {
        order: 1;
    }

    .team-showcase__carousel {
        order: 2;
    }
}

/* ---------- LEFT: transparent carousel ---------- */
.team-showcase__carousel {
    position: relative;
    overflow: hidden;
    /* no own background — section bg image shines through */
}

/* Decorative overlay glyph anchored to the bottom-left corner of the
   carousel column. Native SVG is 394x885 (mix-blend-mode overlay +
   white stroke at 70% opacity — reads as a translucent filigree even on
   top of cards, so pointer-events: none is enough to keep the UI
   interactive). Sized at 200x450 (aspect 394/885) to leave the cards
   clearly readable while still filling the bottom-left with the pattern.
   Sits inside the carousel's overflow: hidden bounds — no clipping at
   the anchor point. */
.team-showcase__carousel::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200px;
    aspect-ratio: 394 / 885;
    max-height: 100%;
    background: url('assets/images/effets-team-home.svg') left bottom / contain no-repeat;
    opacity: 0.7;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
}

.team-showcase__slides {
    position: relative;
    height: 100%;
    min-height: 700px;
    max-width: 578px;
    margin: 0 auto;
}

.team-showcase__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility .6s ease;
}

.team-showcase__slide.is-active {
    opacity: 1;
    visibility: visible;
}

/* Cut-out PNG portrait, bottom-centered. Temporary positioning while
   waiting for the final lawyer photos: bottom -45 percent + max-height
   125 percent lets the portrait deliberately overflow BELOW the slide.
   The .team-showcase__carousel ancestor has overflow: hidden (see l.2721)
   so the visible overflow is clipped at the carousel bottom edge — the
   photo can't spill into neighbouring sections. Revisit these three
   values (bottom, max-height, max-width) once the proper photos land. */
.team-showcase__photo {
    position: absolute;
    bottom: -45%;
    left: 50%;
    transform: translateX(-50%);
    max-height: 125%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: bottom center;
    display: block;
    pointer-events: none;
}

/* Info block — placed in upper-left, no dark overlay; readability via text-shadow */
.team-showcase__info {
    position: absolute;
    bottom: 4rem;
    left: 2rem;
    right: 2rem;
    color: white;
    z-index: 1;
}

.team-showcase__role {
    font-family: var(--font-body);
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
    display: block;
    margin-bottom: .25rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

.team-showcase__name {
    font-family: var(--font-display-text);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    color: white;
    margin: 0 0 .75rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}

.team-showcase__desc {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .95);
    margin: 0 0 1.25rem;
    max-width: 90%;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

.team-showcase__see-details.btn--glass {
    border-color: rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .1);
    color: white;
}

.team-showcase__see-details.btn--glass:hover {
    background: rgba(255, 255, 255, .2);
    color: white;
    border-color: rgba(255, 255, 255, 1);
}

/* Instagram-style progress bars */
.team-showcase__bars {
    position: absolute;
    bottom: 1.5rem;
    left: 2rem;
    right: 2rem;
    display: flex;
    gap: .5rem;
    z-index: 2;
    max-width: 578px;
    margin: 0 auto;
}

.team-showcase__bar {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, .25);
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    transition: background-color .3s ease;
}

.team-showcase__bar:hover {
    background: rgba(255, 255, 255, .4);
}

.team-showcase__bar:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

.team-showcase__bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: white;
    border-radius: 2px;
}

.team-showcase__bar.is-active .team-showcase__bar-fill {
    animation: team-bar-fill var(--bar-duration, 5s) linear forwards;
}

.team-showcase__bar.is-completed .team-showcase__bar-fill {
    width: 100%;
}

@keyframes team-bar-fill {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* Pause fill animation while the carousel is hovered */
.team-showcase__carousel:hover .team-showcase__bar.is-active .team-showcase__bar-fill {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {

    .team-showcase__slide,
    .team-showcase__bar-fill {
        transition: none;
        animation: none;
    }

    .team-showcase__bar.is-active .team-showcase__bar-fill {
        width: 100%;
    }
}

/* ---------- RIGHT: transparent panel ---------- */
.team-showcase__panel {
    position: relative;
    padding: 4rem 3rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* No own background: the ::before below carries the designer's bordeaux
       filter (mix-blend-mode: darken) over the section's ACF immeuble. */
}

/* Designer spec (exact): bordeaux #752235 at 92% opacity in DARKEN blend
   mode over the section background image (immeuble). Applied via ::before
   with mix-blend-mode: darken so the blend composes AGAINST THE ANCESTORS'
   painted content (the immeuble on .team-showcase). This works because
   none of .team-showcase / .team-showcase__inner / .team-showcase__panel
   sets `isolation: isolate` — the blend group reaches back to the section
   image. Adding isolation on any of those ancestors would break the blend
   (::before would then only blend against the panel's empty background).
   The panel copy (.team-showcase__panel-content, z-index: 1) sits ABOVE
   the ::before and is NOT touched by the blend or the opacity.
   Darken keeps the darker of the two colors pixel-by-pixel: the bordeaux
   flat wins on the light zones of the building (roofs, sky reflections),
   the building keeps its own dark tones on shadow zones. */
.team-showcase__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #752235;
    opacity: 0.92;
    mix-blend-mode: darken;
    pointer-events: none;
    z-index: 0;
}

.team-showcase__panel-content {
    position: relative;
    z-index: 1;
    max-width: 540px;
}

.team-showcase__eyebrow {
    font-family: var(--font-display-text);
    font-weight: 500;
    font-size: 36px;
    line-height: 1.2;
    color: white;
    margin: 0 0 .5rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

.team-showcase__subtitle {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .95);
    margin: 0 0 2rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

.team-showcase__heading {
    font-family: var(--font-display-text);
    font-weight: 500;
    font-size: 38px;
    line-height: 1.2;
    color: white;
    margin: 0 0 1.5rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

.team-showcase__description {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: white;
    margin: 0 0 2rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

.team-showcase__description p:last-child {
    margin-bottom: 0;
}

.team-showcase__cta-wrap .btn--glass {
    border-color: rgba(255, 255, 255, .4);
    background: rgba(0, 0, 0, .25);
    color: white;
}

/* Glass on the dark team-showcase panel. Same reasoning as
   .btn--glass-dark: strict color/border swap would fade the text
   (color rgba(white, .4) = invisible). Keep glass fill (bg alpha
   bumped), keep color white, promote border to opaque white. */
.team-showcase__cta-wrap .btn--glass:hover {
    background: rgba(0, 0, 0, .45);
    color: white;
    border-color: rgba(255, 255, 255, 1);
}

@media (max-width: 1024px) {
    .team-showcase__panel {
        padding: 3rem 2rem;
    }

    .team-showcase__eyebrow {
        font-size: 28px;
    }

    .team-showcase__heading {
        font-size: 30px;
    }

    /* Stacked layout tweak for the cut-out portrait. Desktop rule (l. 2776)
       overflows bottom -45% at 125% height; here the panel becomes narrower
       and taller, so we allow the portrait to grow to 130% on both axes and
       reduce the overflow to -25%. Parent .team-showcase__carousel keeps
       overflow: hidden — the extra height is clipped as on desktop. */
    .team-showcase__photo {
        position: absolute;
        bottom: -25%;
        left: 50%;
        transform: translateX(-50%);
        max-height: 130%;
        max-width: 130%;
        width: auto;
        height: auto;
        object-fit: contain;
        object-position: bottom center;
        display: block;
        pointer-events: none;
    }
}

/* =============================================================================
   15. CTA BANNER
   ============================================================================= */

.cta-banner {
    position: relative;
    background-color: var(--color-ink);
    /* Bg image URL set inline by PHP (safe — esc_url at the source). */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 8rem 0;
    overflow: hidden;
    color: white;
}

/* Background video — covers the whole section, behind the overlay.
   When present, the section's inline background-image is omitted by the PHP
   (avoids a flash of the static image before the video starts playing). */
.cta-banner__bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.cta-banner__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 1;
}

.cta-banner__inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

/* Honor reduced-motion: hide the video, rely on its poster (or the
   static background-image — but in the video case PHP omits the inline
   style, so reduced-motion users see solid var(--color-ink) until the
   poster paints; that's acceptable and matches the static experience). */
@media (prefers-reduced-motion: reduce) {
    .cta-banner__bg-video {
        display: none;
    }
}

.cta-banner__heading {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 64px;
    line-height: 1.1;
    color: white;
    margin: 0 0 2rem;
    text-align: center;
}

.cta-banner__description {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    max-width: 720px;
    margin: 0 auto 3rem;
}

.cta-banner__description p:last-child {
    margin-bottom: 0;
}

.cta-banner__ctas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* CTA secondary (solid wine) — reaffirm in case .btn--primary is overridden elsewhere */
.cta-banner__cta--secondary.btn--primary {
    background: var(--color-wine);
    color: white;
    border: 1px solid var(--color-wine);
}

/* Match the new .btn--primary inversion so the double-selector
   override doesn't ship its own wine-dark hover that would fight
   the base rule. */
.cta-banner__cta--secondary.btn--primary:hover {
    background: white;
    color: var(--color-wine);
    border-color: var(--color-wine);
}

@media (max-width: 768px) {
    .cta-banner {
        padding: 5rem 0;
    }

    .cta-banner__heading {
        font-size: 40px;
        line-height: 1.15;
        margin-bottom: 1.5rem;
    }

    .cta-banner__description {
        font-size: 17px;
        margin-bottom: 2rem;
    }

    .cta-banner__ctas {
        flex-direction: column;
        gap: 1rem;
    }

    .cta-banner__cta {
        width: 100%;
        max-width: 320px;
    }
}

/* =============================================================================
   16. FAQ
   ============================================================================= */

.faq-block {
    background: var(--color-cream);
    padding: 6rem 0;
}

.faq-block__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}

.faq-block__heading {
    font-family: var(--font-display-text);
    font-weight: 700;
    font-size: 45px;
    line-height: 50px;
    color: var(--color-ink);
    margin: 0 0 1rem;
    text-align: center;
}

.faq-block__heading .t-wine {
    color: var(--color-wine);
}

.faq-block__intro {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.5;
    color: var(--color-ink);
    margin: 0;
    text-align: center;
}

.faq-block__intro p {
    margin: 0 0 .5rem;
}

.faq-block__intro p:last-child {
    margin-bottom: 0;
}

.faq-block__intro strong {
    font-weight: 600;
}

.faq-block__list {
    list-style: none;
    margin: 0 0 3rem;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 768px) {
    .faq-block__list {
        grid-template-columns: 1fr;
    }
}

.faq-block__item {
    /* Solid black border for the default (light-background) FAQ used on
       Home / About / Team / Contact / Category (cream bg). Dark FAQ variants
       (.blog-hub-faq, .practice-faq) override border-color on their own
       .faq-block__item rules — they stay unaffected. */
    border: 1px solid var(--color-ink);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.4);
    overflow: hidden;
    transition: border-radius .3s ease, background-color .3s ease;
}

/* Open state — pill shape relaxes to a rounded rectangle */
.faq-block__item.is-open {
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.7);
}

.faq-block__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.25rem 1.75rem;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-ink);
    transition: padding .3s ease;
}

.faq-block__question:focus-visible {
    outline: 2px solid var(--color-wine);
    outline-offset: 2px;
}

.faq-block__question-text {
    flex: 1;
}

.faq-block__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink);
    transition: transform .3s ease;
}

.faq-block__icon svg {
    width: 100%;
    height: 100%;
}

.faq-block__item.is-open .faq-block__icon {
    /* + rotates into × */
    transform: rotate(45deg);
}

.faq-block__answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height .4s ease;
}

.faq-block__item.is-open .faq-block__answer {
    /* Large enough to fit any reasonable answer; tight enough to avoid huge collapse delay */
    max-height: 800px;
}

.faq-block__answer-inner {
    padding: 0 1.75rem 1.5rem;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-ink);
}

.faq-block__answer-inner p {
    margin: 0 0 .75rem;
}

.faq-block__answer-inner p:last-child {
    margin-bottom: 0;
}

.faq-block__answer-inner strong {
    font-weight: 600;
}

.faq-block__answer-inner a {
    color: var(--color-wine);
    text-decoration: underline;
}

.faq-block__cta-wrap {
    display: flex;
    justify-content: center;
}

@media (prefers-reduced-motion: reduce) {

    .faq-block__item,
    .faq-block__icon,
    .faq-block__answer,
    .faq-block__question {
        transition: none;
    }
}

/* =============================================================================
   17. BLOG SLIDER
   ============================================================================= */

.blog-slider {
    background: rgba(250, 249, 247, 1);
    padding: 6rem 0;
    overflow: hidden;
}

.blog-slider__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 3rem;
}

.blog-slider__head-text {
    flex: 1;
    max-width: 720px;
    text-align: center;
    margin: 0 auto;
}

.blog-slider__heading {
    font-family: var(--font-display-text);
    font-weight: 700;
    font-size: 45px;
    line-height: 50px;
    color: var(--color-ink);
    margin: 0 0 1rem;
    text-align: center;
}

/* h2 .t-wine is defined globally in section 3 TYPOGRAPHY */

.blog-slider__intro {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.5;
    color: var(--color-ink);
    margin: 0;
    text-align: center;
}

.blog-slider__intro p {
    margin: 0;
}

.blog-slider__intro .t-wine {
    color: var(--color-wine-emphasis);
    font-weight: 500;
}

/* Arrow nav (top-right) */
.blog-slider__nav {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
}

.blog-slider__nav-btn {
    width: 48px;
    height: 48px;
    border: 1.5px solid #000;
    border-radius: 50%;
    background: transparent;
    color: var(--color-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, border-color .2s ease;
}

.blog-slider__nav-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--color-ink);
}

.blog-slider__nav-btn:focus-visible {
    outline: 2px solid var(--color-wine);
    outline-offset: 2px;
}

.blog-slider__nav-btn svg {
    width: 18px;
    height: 18px;
}

/* Stage — full-viewport-wide ribbon track that overflows the .container.
   Negative auto margins break out of the 1280px container so the slides
   can extend past the left/right edges of the viewport (Apple/Netflix-style). */
.blog-slider__stage {
    position: relative;
    margin-bottom: 3rem;
    overflow: hidden;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 2rem 0;
}

/* Horizontal ribbon. JS sets `transform: translateX(...)` so the active
   slide sits in the visual center; surrounding slides peek in from the
   left and right edges. */
.blog-slider__slides {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
    transition: transform .6s ease;
}

.blog-slider__slide {
    /* Card width reduced ~10% (787 -> 708) so the carousel feels lighter.
       Internal media (aspect-ratio 16/10 + width: 100%) and text/padding
       shrink proportionally; the JS uses offsetWidth + gap so no JS change
       is needed. Mobile breakpoints stay at 90vw. */
    flex: 0 0 708px;
    width: 708px;
    max-width: 708px;
    opacity: .4;
    filter: grayscale(80%);
    transform: scale(.92);
    pointer-events: none;
    transition: opacity .6s ease, filter .6s ease, transform .6s ease;
}

.blog-slider__slide.is-active {
    opacity: 1;
    filter: none;
    transform: scale(1);
    pointer-events: auto;
    z-index: 2;
}

.blog-slider__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: transparent;
    border-radius: 24px;
    overflow: visible;
}

.blog-slider__media {
    position: relative;
    display: block;
    width: 100%;
    flex-shrink: 0;
    aspect-ratio: 16 / 10;
    border-radius: 24px;
    overflow: hidden;
    background: var(--color-ink);
    text-decoration: none;
}

.blog-slider__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.blog-slider__media:hover .blog-slider__photo {
    transform: scale(1.04);
}

/* Date badge — default position is top-left. The frosted-glass surface
   (border + translucent bg + backdrop-filter + white text) is supplied by
   the .u-glass utility added in blog_slider.php / blog_grid.php, so this
   rule holds only position + typo. Grid-mode overrides tweak these values
   (see the "grid-mode card design" mirror block for .blog-slider--grid
   and the .blog-hub-grid__card block for the Blog Hub main list). */
.blog-slider__date {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    padding: .5rem 1rem;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
}

/* Footer row under the image: text-left / "Read the Article" button on the right */
.blog-slider__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.5rem 0 0;
}

.blog-slider__body {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

/* "Read the Article" — pill button, always visible, right of the text */
.blog-slider__read-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    background: var(--color-ink);
    color: white;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid var(--color-ink);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

/* True fond/color inversion: base is ink solid + white text + ink
   border; hover flips to white bg + ink text + ink border (border
   already exists in base, no anti-shift work needed). Replaces the
   previous wine-accent hover. */
.blog-slider__read-cta:hover,
.blog-slider__read-cta:focus-visible {
    background: white;
    color: var(--color-ink);
    border-color: var(--color-ink);
    transform: translateY(-1px);
}

.blog-slider__read-cta:focus-visible {
    outline: 2px solid var(--color-wine);
    outline-offset: 2px;
}

.blog-slider__title {
    font-family: var(--font-display-text);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    color: var(--color-ink);
    margin: 0 0 .75rem;
}

.blog-slider__title a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

.blog-slider__title a:hover {
    color: var(--color-wine);
}

.blog-slider__excerpt {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-muted);
    margin: 0 0 .75rem;
}

.blog-slider__cats {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    color: var(--color-ink);
    margin: 0;
}

/* Instagram-style progress bars */
.blog-slider__bars {
    display: flex;
    justify-content: center;
    gap: .5rem;
    max-width: 600px;
    margin: 2rem auto 0;
}

.blog-slider__bar {
    flex: 1;
    height: 3px;
    background: rgba(0, 0, 0, 0.15);
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    transition: background-color .3s ease;
}

.blog-slider__bar:hover {
    background: rgba(0, 0, 0, 0.3);
}

.blog-slider__bar:focus-visible {
    outline: 2px solid var(--color-wine);
    outline-offset: 2px;
}

.blog-slider__bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: var(--color-ink);
    border-radius: 2px;
}

.blog-slider__bar.is-active .blog-slider__bar-fill {
    animation: blog-bar-fill var(--bar-duration, 5s) linear forwards;
}

.blog-slider__bar.is-completed .blog-slider__bar-fill {
    width: 100%;
}

@keyframes blog-bar-fill {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

.blog-slider__stage:hover .blog-slider__bar.is-active .blog-slider__bar-fill {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {

    .blog-slider__slide,
    .blog-slider__bar-fill,
    .blog-slider__photo {
        transition: none;
        animation: none;
    }

    .blog-slider__bar.is-active .blog-slider__bar-fill {
        width: 100%;
    }
}

.blog-slider__cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

@media (max-width: 1024px) {
    .blog-slider__header {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }

    .blog-slider__nav {
        justify-content: center;
    }

    .blog-slider__slide {
        flex: 0 0 90vw;
        width: 90vw;
        max-width: 90vw;
    }
}

@media (max-width: 640px) {
    .blog-slider__heading {
        font-size: 32px;
        line-height: 36px;
    }

    .blog-slider__slide {
        flex: 0 0 90vw;
        width: 90vw;
        max-width: 90vw;
    }

    .blog-slider__footer {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .blog-slider__read-cta {
        align-self: center;
    }
}

/* ----- Static grid variant (Team page) ----- */
/* Above 768px, .blog-slider--grid renders as a static responsive CSS grid:
   no slider transform, no arrows, no progress bars. The JS still runs on
   this section but stays in "torn down" mode (no inline transform/width)
   so the grid layout is never fought against. At <=768px the overrides
   below stop applying and the base slider CSS takes over — the JS then
   initializes the real slider (arrows + autoplay + bars).
   About + Home (no --grid class) are sliders at every width. */
@media (min-width: 769px) {
    .blog-slider--grid .blog-slider__stage {
        overflow: visible;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        margin-bottom: 0;
    }

    .blog-slider--grid .blog-slider__slides {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
        transition: none;
        transform: none;
        align-items: stretch;
        justify-content: stretch;
    }

    .blog-slider--grid .blog-slider__slide {
        flex: initial;
        width: auto;
        max-width: none;
        opacity: 1;
        filter: none;
        transform: none;
        pointer-events: auto;
        transition: none;
    }

    /* Arrows + progress bars only matter at <=768px (slider mode). */
    .blog-slider--grid .blog-slider__nav,
    .blog-slider--grid .blog-slider__bars {
        display: none;
    }

    /* --- Grid-mode CARD DESIGN (Team + Blog Hub Latest News at >768px).
       Mirrors .blog-hub-grid__card below — declarations must stay in sync.
       Below 769px the whole @media block drops, .blog-slider--grid falls
       back to the canonical carousel design automatically. --- */
    .blog-slider--grid .blog-slider__card {
        display: flex;
        flex-direction: column;
        height: 100%;
        background: #ffffff;
        border-radius: 24px;
        padding: 1rem;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    }

    .blog-slider--grid .blog-slider__media {
        border-radius: 16px;
    }

    .blog-slider--grid .blog-slider__footer {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 1rem;
        flex: 1 1 auto;
        padding: 1.25rem .25rem 0;
    }

    .blog-slider--grid .blog-slider__title {
        font-size: 18px;
        line-height: 1.2;
        margin: 0 0 .5rem;
    }

    .blog-slider--grid .blog-slider__cats {
        font-family: var(--font-display-text);
        font-weight: 700;
        font-size: 16px;
        line-height: 1.39;
        letter-spacing: -0.04em;
    }

    .blog-slider--grid .blog-slider__read-cta {
        flex-shrink: 1;
        align-self: stretch;
        width: 100%;
        justify-content: center;
        text-align: center;
        margin-top: auto;
    }

    /* Date badge in grid mode — mirror .blog-hub-grid__card .blog-slider__date:
       moved to bottom-right + upgraded typo. Below 769px this whole MQ drops
       and the badge falls back to the canonical top-left position with no
       reset needed. Keep in sync with .blog-hub-grid__card .blog-slider__date. */
    .blog-slider--grid .blog-slider__date {
        top: auto;
        left: auto;
        bottom: 1rem;
        right: 1rem;
        border-radius: 10px;
        font-family: var(--font-body);
        font-weight: 700;
        font-size: 14px;
        line-height: 1.39;
        letter-spacing: -0.03em;
        text-align: center;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .blog-slider--grid .blog-slider__slides {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =============================================================================
   18. TRUST BAR
   ============================================================================= */

.trust-bar {
    background: var(--color-wine);
    color: white;
    padding: 3rem 0;
}

.trust-bar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    align-items: stretch;
}

.trust-bar__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0 2rem;
    position: relative;
}

/* Vertical separator between items (except the first one) */
.trust-bar__item+.trust-bar__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 80%;
    background: rgba(255, 255, 255, 0.25);
}

.trust-bar__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.trust-bar__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.trust-bar__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.trust-bar__title {
    font-family: var(--font-display-text);
    font-weight: 900;
    font-size: 20px;
    line-height: 1.3;
    color: white;
    margin: 0;
}

.trust-bar__desc {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .trust-bar__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 0;
    }

    .trust-bar__item:nth-child(2)::before,
    .trust-bar__item:nth-child(3)::before {
        display: none;
    }
}

@media (max-width: 640px) {
    .trust-bar__list {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .trust-bar__item+.trust-bar__item::before {
        display: none;
    }

    .trust-bar__item {
        padding: 0 1rem;
    }
}

/* =============================================================================
   19. CONSULTATION CTA
   ============================================================================= */

.consultation-cta {
    background: var(--color-ink);
    color: white;
    padding: 2.5rem 0;
    border-bottom: 1px solid #ffffff;
}

.consultation-cta__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.consultation-cta__text {
    flex: 1;
    min-width: 0;
}

.consultation-cta__heading {
    font-family: var(--font-display-text);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.3;
    color: white;
    margin: 0 0 .5rem;
}

.consultation-cta__subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    max-width: 720px;
}

.consultation-cta__action {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .consultation-cta {
        padding: 2rem 0;
    }

    .consultation-cta__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .consultation-cta__heading {
        font-size: 20px;
    }

    .consultation-cta__action {
        width: 100%;
    }

    .consultation-cta__btn {
        width: 100%;
        max-width: 320px;
    }
}

/* =============================================================================
   20. FOOTER
   ============================================================================= */

.site-footer {
    background: var(--color-ink);
    color: white;
    padding: 5rem 0 2rem;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.site-footer__logo {
    display: inline-block;
    text-decoration: none;
    color: white;
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 400;
    line-height: 1;
}

.site-footer__logo img {
    max-width: 140px;
    height: auto;
    display: block;
}

.site-footer__description {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    max-width: 280px;
}

.site-footer__btn {
    /* Visual comes from .btn--glass-dark; only the layout tweak lives here. */
    align-self: flex-start;
}

.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.site-footer__col-title {
    font-family: var(--font-display-text);
    font-weight: 700;
    font-size: 16px;
    color: white;
    margin: 0 0 .5rem;
}

/* When a column title is clickable (e.g. "Blog" wrapped in an <a> to /blog/
   in template-parts/sections/site_footer.php), keep the h4 typography and
   drop the default link styling. Hover softens the color like the menu
   links below. Landing pages neutralize the click via the
   body.is-landing .site-footer__col a rule further down. */
.site-footer__col-title a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

.site-footer__col-title a:hover {
    color: rgba(255, 255, 255, 0.8);
}

.site-footer__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.site-footer__menu li {
    margin: 0;
    padding: 0;
}

.site-footer__menu a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    transition: color .2s ease;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.site-footer__menu a:hover {
    color: white;
}

.site-footer__social-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Column 5 — image (logo/illustration above the WYSIWYG text and socials). */
.site-footer__col5-image-wrap {
    margin: 0 0 .25rem;
}

.site-footer__col5-image {
    max-width: 140px;
    max-height: 80px;
    height: auto;
    width: auto;
    display: block;
}

/* Column 5 — WYSIWYG block (typically opening hours, address, direct line). */
.site-footer__col5-text {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 .5rem;
}

.site-footer__col5-text > *:first-child { margin-top: 0; }
.site-footer__col5-text > *:last-child  { margin-bottom: 0; }

.site-footer__col5-text p {
    margin: 0 0 .6rem;
}

.site-footer__col5-text a {
    color: white;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: opacity .2s ease;
}

.site-footer__col5-text a:hover {
    opacity: .75;
}

.site-footer__col5-text strong { color: white; }

/* Social icons — horizontal row, currentColor-driven inline SVGs. */
.site-footer__social-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.site-footer__social-list li { margin: 0; padding: 0; }

.site-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
    transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.site-footer__social-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
}

.site-footer__social-link:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

.site-footer__social-icon--svg {
    display: inline-flex;
    width: 20px;
    height: 20px;
}

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

.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.site-footer__copyright {
    font-family: var(--font-body);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.site-footer__bottom-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.site-footer__bottom-menu li {
    margin: 0;
}

.site-footer__bottom-menu a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 13px;
    transition: color .2s ease;
}

.site-footer__bottom-menu a:hover {
    color: white;
}

/* Landing template — deactivate the ancillary footer navigation links so
   visitors stay focused on the landing page and its CTAs. Scope:
   - .site-footer__col a (menu links in columns 2-5 + social list),
   - .site-footer__bottom a (footer bottom menu links).
   Deliberately excluded from this scope:
   - .site-footer__brand a (logo + .site-footer__btn CTA) — the CTA is
     re-pointed to the landing hero form anchor by the footer.php
     override, and the logo stays clickable so users can escape if they
     really need to.
   Toggle via body.is-landing (added by the body_class filter in
   header.php when is_page_template('page-templates/template-landing.php')).
   pointer-events: none makes them non-interactive; cursor: default hides
   the pointer-cursor hint. The links stay in the DOM for a11y and
   layout so screen readers can still describe the structure. */
body.is-landing .site-footer__col a,
body.is-landing .site-footer__bottom a {
    pointer-events: none;
    cursor: default;
}

/* Landing template — same "keep the visitor on the page" logic
   applied to the header logo. The <a class="site-header__logo">
   normally links to home; on landing we deactivate it (still in
   the DOM for a11y — the aria-label + rel="home" stay meaningful
   to screen readers, we just neutralise the click). Toggle via
   body.is-landing (see header.php body_class filter). */
body.is-landing .site-header__logo {
    pointer-events: none;
    cursor: default;
}

@media (max-width: 1200px) {
    .site-footer__grid {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .site-footer {
        padding: 3.5rem 0 1.5rem;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-footer__bottom-menu {
        flex-direction: column;
        gap: .75rem;
    }
}

/* =============================================================================
   21. GRAVITY FORMS
   ============================================================================= */

.kayse-form .gfield_label {
    display: block;
    font-size: var(--fs-small);
    font-weight: 500;
    margin-bottom: .25rem;
}

.kayse-form input[type="text"],
.kayse-form input[type="email"],
.kayse-form input[type="tel"],
.kayse-form input[type="url"],
.kayse-form textarea,
.kayse-form select {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 12px 20px;
    font-family: inherit;
    font-size: var(--fs-body);
    background: white;
    transition: border-color .2s, box-shadow .2s;
}

.kayse-form textarea {
    border-radius: var(--radius-card);
    min-height: 120px;
}

.kayse-form input:focus,
.kayse-form textarea:focus,
.kayse-form select:focus {
    outline: none;
    border-color: var(--color-wine);
    box-shadow: 0 0 0 3px rgba(122, 31, 43, .15);
}

.kayse-form .gform_footer {
    margin-top: 1.5rem;
}

.kayse-form .gfield_error input,
.kayse-form .gfield_error textarea {
    border-color: #dc2626;
}

.kayse-form .validation_message {
    color: #dc2626;
    font-size: var(--fs-small);
    margin-top: .25rem;
}

/* =============================================================================
   22. PAGE HERO
   ============================================================================= */

.page-hero {
    position: relative;
    background-color: var(--color-ink);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    overflow: hidden;
    /* Centre the title block vertically inside the (now taller) hero. */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Desktop min-height — proportional to viewport width to match the design
   (~34% of width, clamped 450–560px). Padding still differentiates the three
   variants. Overridden by the mobile media query below (70/80/90vh). */
.page-hero--small  { padding: 5rem 0;  min-height: clamp(450px, 34vw, 560px); }
.page-hero--medium { padding: 7rem 0;  min-height: clamp(450px, 34vw, 560px); }
.page-hero--large  { padding: 10rem 0; min-height: clamp(450px, 34vw, 560px); }

.page-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 0;
}

.page-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.page-hero__eyebrow {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 1rem;
}

.page-hero__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 52px;
    line-height: 1.1;
    color: white;
    margin: 0 0 1rem;
}

.page-hero__title .t-wine { color: var(--color-wine-emphasis); }

.page-hero__subtitle {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 auto;
    max-width: 720px;
}

@media (max-width: 768px) {
    /* Mobile: make the hero imposing — fill most of the viewport and
       vertically center the title block. Base padding
       (calc(topbar-h + header-h + 0rem) 0 3rem) is applied in the
       cross-page mobile block at the end of this stylesheet — variants
       only carry their per-variant min-height here. Desktop (>768px)
       untouched. */
    .page-hero {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .page-hero__inner { width: 100%; }
    .page-hero--small  { min-height: 70vh; }
    .page-hero--medium { min-height: 80vh; }
    .page-hero--large  { min-height: 90vh; }
    .page-hero__title { font-size: 36px; }
}

/* =============================================================================
   23. BREADCRUMBS
   ============================================================================= */

.breadcrumbs {
    background: var(--color-paper);
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-ink);
}

.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.breadcrumbs__item:not(:last-child)::after {
    content: "\203A";
    color: rgba(0, 0, 0, 0.4);
    margin-left: .25rem;
}

.breadcrumbs__item a {
    color: var(--color-ink);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity .2s ease;
}

.breadcrumbs__item a:hover { opacity: 1; }

.breadcrumbs__item [aria-current="page"] {
    color: var(--color-wine);
    font-weight: 500;
}

/* =============================================================================
   24. IMAGE TEXT
   ============================================================================= */

.image-text {
    width: 100%;
    overflow: hidden;
}

.image-text__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 600px;
}

/* image_left (default): DOM order — media in col 1, text in col 2. */

/* image_right: media in col 2, text in col 1 — via explicit grid placement
   instead of `order`, so the image stretches to the full row height. */
.image-text--image_right .image-text__media { grid-column: 2; grid-row: 1; }
.image-text--image_right .image-text__text  { grid-column: 1; grid-row: 1; }

.image-text__media {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 100%;
    align-self: stretch;
}

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

.image-text__text {
    display: flex;
    align-items: center;
    padding: 5rem 5rem 5rem 5rem;
}

/* Background color variants */
.image-text__text--cream { background-color: var(--color-paper); color: var(--color-ink); }
.image-text__text--wine { background-color: var(--color-wine); color: white; }
.image-text__text--ink { background-color: var(--color-ink); color: white; position: relative; }
.image-text__text--white { background-color: white; color: var(--color-ink); }

/* Decorative effets-mission.svg pinned to the right edge of --ink text
   blocks on the About page. Scoped via body class so it doesn't leak to
   image_text --ink blocks used on other pages / future templates. Native
   SVG 437x851 (mix-blend-mode overlay + white strokes 60% opacity — reads
   as a translucent filigree). Sized 200x390 (aspect 437/851), centered
   vertically, right-aligned. opacity: 0.5 for extra discretion.
   pointer-events: none so it never blocks text selection. z-index: 0 with
   the text content sitting at z-index: 1 (via .image-text__inner-text
   below), so the filigree stays visually BEHIND the editorial text.

   Applies to BOTH mission and story blocks when both are configured as
   `ink` (default on About). To exclude one, switch its bg in the BO. */
body[class*="template-about"] .image-text__text--ink::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    aspect-ratio: 437 / 851;
    max-height: 90%;
    background: url('assets/images/effets-mission.svg') right center / contain no-repeat;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}
/* Guarantee the editorial content stays on top of the decoration. */
body[class*="template-about"] .image-text__text--ink > * {
    position: relative;
    z-index: 1;
}

.image-text--image_right .image-text__text {
    padding: 5rem 5rem 5rem 8rem;
}

.image-text--image_left .image-text__text {
    padding: 5rem 8rem 5rem 5rem;
}

.image-text__text-inner {
    max-width: 540px;
    width: 100%;
}

.image-text__eyebrow {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 12px;
    font-weight: 600;
    opacity: 0.8;
    margin: 0 0 1rem;
}

.image-text__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 48px;
    line-height: 1.1;
    margin: 0 0 0.5rem;
    color: inherit;
}

.image-text__title .t-wine { color: var(--color-wine-emphasis); }

.image-text__subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    margin: 0 0 2rem;
    color: inherit;
    opacity: 0.95;
}

.image-text__body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    color: inherit;
    opacity: 0.9;
}

.image-text__body p {
    margin: 0 0 1rem;
}

.image-text__body p:last-child {
    margin-bottom: 0;
}

.image-text__cta {
    margin-top: 2rem;
}

/* Bouton pill (style glass arrondi) */
.btn--pill {
    border-radius: 999px;
    padding: 0.875rem 2.25rem;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    text-decoration: none;
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 500;
    transition: all 0.2s ease;
}

/* Glass-pill on dark contexts. Strict color/border swap would fade
   text color to rgba(white, .2) = illegible. Keep glass fill, bump
   alpha slightly for hover feedback, promote border to opaque white,
   keep color white. */
.btn--pill:hover {
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border-color: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
}

/* Sur fond clair, .btn--pill doit s'adapter */
.image-text__text--cream .btn--pill,
.image-text__text--white .btn--pill {
    background: var(--color-ink);
    color: white;
    border-color: var(--color-ink);
}

/* Solid variant on light bg (cream/white). Base is ink solid + white
   text + ink border; hover inverts to white bg + ink text + ink
   border (border already present, no anti-shift work needed). */
.image-text__text--cream .btn--pill:hover,
.image-text__text--white .btn--pill:hover {
    background: white;
    color: var(--color-ink);
    border-color: var(--color-ink);
}

@media (max-width: 900px) {
    .image-text__inner {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    /* Stack media on top, text below — regardless of layout variant. */
    .image-text--image_right .image-text__media,
    .image-text--image_left  .image-text__media {
        grid-column: 1;
        grid-row: 1;
    }
    .image-text--image_right .image-text__text,
    .image-text--image_left  .image-text__text {
        grid-column: 1;
        grid-row: 2;
    }

    .image-text__media {
        min-height: 0;
        height: auto;
    }

    .image-text__media img {
        height: auto;
        min-height: 0;
        aspect-ratio: 4/3;
    }

    .image-text--image_left .image-text__text,
    .image-text--image_right .image-text__text {
        padding: 3rem 1.5rem;
    }

    .image-text__title {
        font-size: 36px;
    }
}

/* =============================================================================
   25. INFO BAR
   ============================================================================= */

.info-bar {
    padding: 3rem 0;
}

/* Light variant is aligned on the process-steps section (Home) so the
   About page reuses the same visual language: cream background, no top/
   bottom borders, wider Blacker titles, wine-tinted icons, and the SVG
   chevron separator between columns on ≥640px. Overrides are scoped so
   the wine/ink variants keep their existing look. */
.info-bar--light {
    background: var(--color-cream);
    color: var(--color-ink);
}

.info-bar--light .info-bar__list {
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .info-bar--light .info-bar__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }
}

@media (min-width: 1024px) {
    .info-bar--light .info-bar__list {
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }
}

.info-bar--light .info-bar__item {
    padding: 1rem 1.5rem;
}

/* Remove the base thin border-left; the SVG chevron replaces it. */
.info-bar--light .info-bar__item:not(:first-child) {
    border-left: none;
}

/* SVG chevron separator between columns, ≥640px only. Matches
   .process-steps__card + .process-steps__card::before exactly. */
@media (min-width: 640px) {
    .info-bar--light .info-bar__item {
        position: relative;
    }

    .info-bar--light .info-bar__item + .info-bar__item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 26px;
        height: 78px;
        background-image: url('assets/images/separators/process-divider.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        pointer-events: none;
    }
}

/* Mobile stack: thin top border on non-first, tighter padding. */
@media (max-width: 639px) {
    .info-bar--light .info-bar__item {
        padding: 1rem 0;
        border-top: none;
    }

    .info-bar--light .info-bar__item + .info-bar__item {
        border-top: 1px solid rgba(14, 14, 16, 0.12);
        padding-top: 1.25rem;
    }
}

.info-bar--light .info-bar__icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-wine);
    /* Force monochrome icons to render in wine. */
    filter: brightness(0) saturate(100%) invert(13%) sepia(60%) saturate(2500%) hue-rotate(335deg) brightness(85%) contrast(95%);
}

.info-bar--light .info-bar__text {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.info-bar--light .info-bar__title {
    font-family: var(--font-display-text);
    font-weight: bold;
    font-size: 25px;
    line-height: 21px;
    letter-spacing: -0.01em;
    text-align: left;
    color: var(--color-ink);
    margin: 0 0 10px;
}

.info-bar--light .info-bar__subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0;
    color: var(--color-ink);
    opacity: 1;
    margin: 0;
}

.info-bar--wine { background: var(--color-wine); color: white; }
.info-bar--ink { background: var(--color-ink); color: white; }

.info-bar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.info-bar__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0 2rem;
}

.info-bar__item:not(:first-child) {
    border-left: 1px solid rgba(0, 0, 0, .12);
}

.info-bar--wine .info-bar__item:not(:first-child),
.info-bar--ink .info-bar__item:not(:first-child) {
    border-left-color: rgba(255, 255, 255, .25);
}

.info-bar__icon { flex-shrink: 0; width: 24px; height: 24px; }
.info-bar__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

.info-bar__title {
    font-family: var(--font-display-text);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    margin: 0 0 .25rem;
    color: inherit;
}

.info-bar__subtitle {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.85;
    margin: 0;
    color: inherit;
}

@media (max-width: 1024px) {
    .info-bar__list { grid-template-columns: repeat(2, 1fr); gap: 2rem 0; }
    /* In 2-col layout, odd items start a row → no left border / no left padding */
    .info-bar__item:nth-child(odd) {
        border-left: none;
        padding-left: 0;
    }
}

@media (max-width: 640px) {
    .info-bar__list { grid-template-columns: 1fr; gap: 0; }
    .info-bar__item {
        border-left: none;
        padding: 1.5rem 0 0;
        border-top: 1px solid rgba(0, 0, 0, .12);
    }
    .info-bar__item:first-child {
        padding-top: 0;
        border-top: none;
    }
    .info-bar--wine .info-bar__item,
    .info-bar--ink .info-bar__item {
        border-top-color: rgba(255, 255, 255, .25);
    }
}

/* =============================================================================
   26. TEAM ABOUT (specific to About page)
   ============================================================================= */

.team-about {
    width: 100%;
    padding: 6rem 0;
    color: white;
}

.team-about--wine  { background-color: rgba(104, 34, 50, 1); color: white; }
.team-about--ink   { background-color: var(--color-ink);   color: white; }
.team-about--cream { background-color: var(--color-paper); color: var(--color-ink); }
.team-about--white { background-color: white;              color: var(--color-ink); }

.team-about__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.team-about__header {
    text-align: center;
    margin: 0 auto 3rem;
    max-width: 720px;
}

.team-about__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 1rem;
    color: inherit;
}

.team-about__intro {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: inherit;
    opacity: .9;
    margin: 0;
}

.team-about__slider {
    position: relative;
}

.team-about__track {
    /* Flex row so cards keep their fixed 394px width without being stretched
       by a grid track. JS pagination hides cards outside the current page. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

/* Card 394px + gradient border + glass interior.
   The card interior is TRANSPARENT so `backdrop-filter: blur(18px)` can
   frost the bordeaux behind. The 1.5px gradient border ring is drawn by a
   ::before pseudo (border-image ignores border-radius; a padding-box +
   border-box double background needs an opaque inner layer that would
   defeat the backdrop-filter — this mask-composite trick paints ONLY the
   1.5px outer ring and preserves the 12px radius). */
.team-about__card {
    width: 394px;
    max-width: 100%;
    flex: 0 0 auto;
    /* Soft top-down gradient — visible on the content area (children have
       no opaque bg, so the parent gradient shows through). Applied once
       on the card; not repeated on children (would double-tint). The
       217px media covers the top 217px with the <img>, so the gradient
       reads only under the media (placeholder) + throughout the content. */
    background: linear-gradient(180deg, rgba(214, 214, 214, 0.1) 0%, rgba(112, 112, 112, 0.1) 100%);
    border: 1.5px solid transparent; /* spacing so content stays inside the ring */
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow:
        0px 17px 38px 0px rgba(0, 0, 0, 0.02),
        0px 69px 69px 0px rgba(0, 0, 0, 0.02),
        0px 156px 94px 0px rgba(0, 0, 0, 0.02),
        0px 277px 111px 0px rgba(0, 0, 0, 0.01),
        0px 433px 121px 0px rgba(0, 0, 0, 0);
    transition: transform .3s ease;
}

.team-about__card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: linear-gradient(180deg, #F2F2F2 0%, #818181 41.42%, #FFFFFF 100%);
    /* Mask: full mask XOR content-box mask → only the 1.5px padding area
       (the outer ring) remains opaque, the interior becomes transparent. */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.team-about__card:hover {
    transform: translateY(-4px);
}

.team-about__card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
}

/* Neutralise the theme's global `a:hover { color: #7A1F2B }` inside team-about
   cards: title / name / role / bio all use `color: inherit` and would turn
   wine on card hover, becoming unreadable on the bordeaux bg. Only the card
   movement (translateY on the card itself) is meant to react to hover. */
.team-about__card-link:hover,
.team-about__card-link:focus-visible {
    color: inherit;
}

.team-about__card-media {
    width: 100%;
    height: 217px;
    overflow: hidden;
    background: rgba(0, 0, 0, .15);
}

.team-about__card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

.team-about__card-content {
    padding: 1.5rem;
    color: inherit;
}

.team-about__card-role {
    font-family: var(--font-body);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: .85;
    margin: 0 0 .25rem;
}

.team-about__card-name {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 .75rem;
    color: inherit;
}

.team-about__card-bio {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.55;
    opacity: .85;
    margin: 0 0 1.25rem;
}

.team-about__card-cta {
    /* Full-width CTA inside the card. `.btn` already provides align-items
       + justify-content: center, so switching to block-level flex just
       stretches the button edge-to-edge while keeping the label centered. */
    display: flex;
    width: 100%;
}

.team-about__dots {
    display: flex;
    justify-content: center;
    gap: .75rem;
    margin-top: 2rem;
    min-height: 3px;
}

.team-about__dot {
    width: 40px;
    height: 3px;
    background: rgba(255, 255, 255, .3);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background .2s ease;
    padding: 0;
}

.team-about__dot:hover {
    background: rgba(255, 255, 255, .5);
}

.team-about__dot.is-active {
    background: white;
}

.team-about--cream .team-about__dot,
.team-about--white .team-about__dot {
    background: rgba(0, 0, 0, .2);
}

.team-about--cream .team-about__dot:hover,
.team-about--white .team-about__dot:hover {
    background: rgba(0, 0, 0, .4);
}

.team-about--cream .team-about__dot.is-active,
.team-about--white .team-about__dot.is-active {
    background: var(--color-ink);
}

.team-about__cta {
    display: block;
    width: fit-content;
    margin: 2.5rem auto 0;
}

@media (max-width: 700px) {
    .team-about { padding: 4rem 0; }
    .team-about__title { font-size: 36px; }
    /* Cards shrink below 394px on narrow screens (max-width: 100%). */
}

/* =============================================================================
   28. TEAM PAGE (listing — hero filter + grid)
   ============================================================================= */

/* -------------------------------------------------------------------------- */
/* Hero filter bar                                                            */
/* -------------------------------------------------------------------------- */

.team-hero-filter {
    position: relative;
    background: var(--color-ink);
    color: white;
    padding: calc(var(--topbar-h) + var(--header-h) + 4rem) 0 4rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Same treatment as .blog-hero-filter: the section's <section> is the
       Team-specific shell, but the filter bar internals are shared. Without
       these two lines, the open dropdown panel was clipped by `overflow:
       hidden` AND paint-order-stacked BELOW the subsequent .breadcrumbs
       (which has auto stacking). z-index: 20 elevates the whole section
       above breadcrumbs while staying below the fixed site-header
       (--header-z: 50). */
    z-index: 20;
    isolation: isolate;
}

.team-hero-filter__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 14, 16, .55) 0%, rgba(14, 14, 16, .75) 100%);
    z-index: -1;
}

.team-hero-filter__inner {
    text-align: center;
    /* Match Blog: bar is full-width up to 1200px. Title / eyebrow / subtitle
       stay text-centered against the wider box (subtitle also caps at 640px
       via its own rule for editorial readability). */
    max-width: 1200px;
}

.team-hero-filter__eyebrow {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .85;
    margin: 0 0 1rem;
}

.team-hero-filter__title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 500;
    line-height: 1.05;
    margin: 0 0 1rem;
    color: inherit;
}

.team-hero-filter__subtitle {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.55;
    opacity: .9;
    margin: 0 auto 2.5rem;
    max-width: 640px;
}

/* The filter bar internals (.blog-hero-filter__form / __bar / __field /
   __input / __search-icon / __field--dropdown / __dropdown-* / __chips /
   __chip-* / __meta / __count / __reset) come from section 30 BLOG HUB.
   The Team markup uses those same classes for the form internals so both
   pages share a single source of truth for the pill design. Only the
   hero shell (.team-hero-filter / __overlay / __inner / __eyebrow /
   __title / __subtitle) is Team-specific and stays defined above. */

/* -------------------------------------------------------------------------- */
/* Grid of cards                                                              */
/* -------------------------------------------------------------------------- */

.team-grid {
    background: var(--color-paper, var(--color-cream, #F4ECE3));
    padding: 5rem 0;
}

.team-grid__inner {
    /* container class already sets max-width + padding */
}

/* Flex layout (not grid) so cards are always horizontally centered when
   the last row is incomplete — a plain `repeat(4, 1fr)` grid would leave
   1-2 orphaned cards on the left. flex-wrap: wrap keeps the multi-row
   layout; each card is a fixed 298px basis. Filter JS keeps working:
   hidden cards use display: none and drop out of the layout without
   affecting centering. */
.team-grid__cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 2rem;
}

/* Team grid cards — mirror the About-page pattern (media 217px cover +
   soft gradient bg + 1.5px gradient border via ::before mask-composite +
   multi-layer box-shadow + hover translateY), but recoloured bordeaux:
     - bg gradient: white -> bordeaux 6%
     - border gradient: light grey -> bordeaux 60% -> white
     - CTA in bordeaux, content in black.
   border-image would ignore border-radius (square corners at 12px) so we
   use the same ::before + mask-composite trick as .team-about__card. */
.team-grid__card {
    flex: 0 0 298px;
    width: 298px;
    max-width: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(117, 34, 53, 0.06) 100%);
    border: 1.5px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow:
        0px 17px 38px 0px rgba(0, 0, 0, 0.02),
        0px 69px 69px 0px rgba(0, 0, 0, 0.02),
        0px 156px 94px 0px rgba(0, 0, 0, 0.02),
        0px 277px 111px 0px rgba(0, 0, 0, 0.01),
        0px 433px 121px 0px rgba(0, 0, 0, 0);
    transition: transform .3s ease;
    color: var(--color-ink);
}

.team-grid__card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: linear-gradient(180deg, #F2F2F2 0%, rgba(117, 34, 53, 0.6) 41.42%, #FFFFFF 100%);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.team-grid__card:hover {
    transform: translateY(-4px);
}

.team-grid__card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
}

/* Neutralise the theme's global a:hover { color: wine } so the card
   contents don't turn wine on hover (matches the .team-about__card-link
   treatment). Only the card's translateY reacts to hover. */
.team-grid__card-link:hover,
.team-grid__card-link:focus-visible {
    color: inherit;
}

.team-grid__card-media {
    width: 100%;
    height: 217px;
    overflow: hidden;
    background: rgba(14, 14, 16, .06);
}

.team-grid__card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    transition: transform .4s ease;
}

.team-grid__card:hover .team-grid__card-media img {
    transform: scale(1.03);
}

.team-grid__card-content {
    padding: 1.5rem;
    color: #000;
}

.team-grid__card-role {
    font-family: var(--font-body);   /* Inter — 700 = real Bold cut */
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #000;
    opacity: .7;
    margin: 0 0 .25rem;
}

.team-grid__card-name {
    /* Blacker Display ships 400/500 but NO 700 — bump to Blacker Text
       (--font-display-text) which ships 700 (Bold) so we get a real bold
       cut instead of a synthesised faux-bold. */
    font-family: var(--font-display-text);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 .75rem;
    color: #000;
}

.team-grid__card-bio {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.55;
    color: #000;
    opacity: .75;
    margin: 0 0 1.25rem;
}

/* Bordeaux CTA — same wine used elsewhere across the site
   (rgba(104,34,50,1) = same value as the submit buttons + landing bordeaux
   backgrounds). Full-width pill, text centered. */
.team-grid__card-cta {
    display: block;
    width: 100%;
    padding: .7rem 1.25rem;
    background: rgba(104, 34, 50, 1);
    color: #ffffff;
    border-radius: 9999px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s ease;
}
.team-grid__card-cta:hover,
.team-grid__card-link:hover .team-grid__card-cta {
    background: var(--color-wine-dark);
    color: #ffffff;
}

.team-grid__empty {
    grid-column: 1 / -1;
    text-align: center;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-muted, #6B6B70);
    margin: 3rem auto 0;
    padding: 1.5rem;
}

/* Responsive — flex-wrap + fixed 298px width handles per-row count
   automatically; no grid-template-columns needed anymore. */
@media (max-width: 768px) {
    .team-hero-filter {
        padding: calc(var(--topbar-h) + var(--header-h) + 2.5rem) 0 2.5rem;
    }

    /* Mobile rules for the bar internals (.blog-hero-filter__bar /
       __dropdown-panel / __meta) live in section 30 BLOG HUB and apply
       here automatically since the Team markup uses those same classes. */

    .team-grid { padding: 3rem 0; }
}

@media (max-width: 560px) {
    .team-grid__cards {
        gap: 1.5rem;
    }
    /* Below 298px viewport (rare), the max-width: 100% on .team-grid__card
       shrinks the card to fit; the placeholder image + content still lay
       out cleanly. */
}

/* =============================================================================
   29. SINGLE TEAM MEMBER (lawyer detail page)
   ============================================================================= */

/* -------------------------------------------------------------------------- */
/* Hero                                                                       */
/* -------------------------------------------------------------------------- */

.single-team__hero {
    position: relative;
    background: var(--color-ink);
    color: white;
    padding: calc(var(--topbar-h) + var(--header-h) + 4rem) 0 4rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    isolation: isolate;
}

.single-team__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 14, 16, .55) 0%, rgba(14, 14, 16, .8) 100%);
    z-index: -1;
}

.single-team__hero-inner {
    text-align: left;
}

.single-team__hero-eyebrow {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .85;
    margin: 0 0 1rem;
}

.single-team__hero-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 500;
    line-height: 1.05;
    margin: 0 0 1rem;
    color: inherit;
}

.single-team__hero-tagline {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.55;
    opacity: .9;
    margin: 0;
    max-width: 640px;
}

/* -------------------------------------------------------------------------- */
/* Body — 2 columns                                                            */
/* -------------------------------------------------------------------------- */

.single-team__body {
    position: relative;
    background: var(--color-paper, var(--color-cream-light, #FBF7F2));
    padding: 4rem 0;
    /* overflow: clip clips the balance decoration inside the band WITHOUT
       creating a scrolling context. This matters: overflow: hidden here
       would trap the .single-team__form-card sticky child (Chrome/Safari
       treat overflow: hidden as a potential scroll container for sticky),
       which caused the card to render at `top: calc(topbar+header+1.5rem)`
       from the trap top even at scroll=0 — pushing it visually down to
       the level of the "Qualification" section instead of aligning with
       "Presentation". overflow: clip has the same visual clipping effect
       (balance stays inside the band) but does NOT create a scroll
       context, so sticky works normally: natural position at rest,
       docks under the header while scrolling. */
    overflow: clip;
}

/* Decorative black balance anchored to the bottom-right corner of the
   body band. Reuses assets/images/balance-white.svg (only variant that
   ships) + filter: brightness(0) which forces every RGB channel to 0 =
   pure black while preserving alpha. To swap for a real black SVG later,
   drop assets/images/balance-black.svg and change the url() + drop the
   filter. z-index: 0 so it sits BEHIND the body-inner (which is z-index
   auto = later paint = above). pointer-events: none to never intercept. */
.single-team__body::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 289px;
    aspect-ratio: 220 / 253;
    background: url('assets/images/balance-white.svg') center / contain no-repeat;
    filter: brightness(0);
    pointer-events: none;
    z-index: 0;
}

.single-team__body-inner {
    position: relative; /* keep content above the ::after decoration */
    z-index: 1;
}

@media (max-width: 768px) {
    /* Hide the balance on phones — it would clash with the stacked
       layout and add visual noise on narrow viewports. */
    .single-team__body::after {
        display: none;
    }
}

.single-team__body-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}

/* Mobile defaults — form first, content after (DOM is already in that order). */
.single-team__form-card {
    order: 1;
}
.single-team__content {
    order: 2;
}

/* Desktop — content LEFT (wide), form card RIGHT (sticky).
   900-1023px  : proportional 1fr / 38% (avoids crushing the content
                 column when the viewport is only barely wider than the
                 mobile-stack breakpoint).
   ≥1024px     : form column locked at 570px per design; content takes
                 the remainder. */
@media (min-width: 900px) {
    .single-team__body-inner {
        grid-template-columns: 1fr 38%;
        gap: 3.5rem;
    }

    .single-team__content {
        order: 1;
    }

    .single-team__form-card {
        order: 2;
        /* Explicit align-self: start defends against any grid + sticky
           interaction that would otherwise stretch or offset the card
           inside its row track. Combined with the parent's align-items:
           start (see .single-team__body-inner), the card sits flush at
           the top of the right grid track at rest — aligned with the
           top of the left column's "Presentation" section. */
        align-self: start;
        position: sticky;
        /* `top` is only a STICK THRESHOLD (fires when scrolled past),
           not an at-rest offset. At scroll=0 the card is at its natural
           grid position; while scrolling it docks under the header. */
        top: calc(var(--topbar-h, 0px) + var(--header-h, 80px) + 1.5rem);
    }
}

@media (min-width: 1024px) {
    .single-team__body-inner {
        grid-template-columns: 1fr 570px;
    }
}

/* The dashed card outer that visually contains heading + GF form. Moved
   here from .kayse-form-styled (which was the inner form-output
   wrapper); the card is the natural home for the border since it wraps
   both the heading and the rendered form. */
/* Shared visual for the form cards on single-team and contact pages —
   dashed wine card + soft shadow. The mutualised selector list keeps the
   two in lockstep so any future tweak (bg/border/radius/shadow) only has
   to live in one place. */
.single-team__form-card,
.contact-form-card {
    background: white;
    border: 1px dashed rgba(122, 31, 43, .5);
    border-radius: 24px;
    padding: 2rem 1.75rem;
    box-shadow: 3px 3px 25px 3px rgba(96, 96, 96, 0.45);
}

.single-team__form-heading {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 25px;
    line-height: 30px;
    letter-spacing: -0.02em;
    text-align: center;
    color: rgba(127, 36, 57, 1);
    margin: 0 0 1.5rem;
}

.single-team__form-fallback {
    margin: 0;
    padding: 1rem;
    background: var(--color-cream, #F4ECE3);
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-muted, #6B6B70);
    text-align: center;
}

/* =========================================================================
   Single-team lawyer contact form — Gravity Forms restyle.
   Fully scoped to .kayse-form-styled (the div wrapping gravity_form()).
   Other GF forms on the site (contact, landing) are untouched.

   WORK WITH orbital, not against it. Orbital's native layout (via
   gfield--width-half / gfield--width-full classes and its own grid on
   .gform-fields) is preserved. We reteinte the form by:
     (1) redefining orbital's --gf-* custom properties in this scope,
     (2) targeted visual overrides for what variables don't cover
         (grey-beige pill fills, sr-only labels, hidden counter, wine
         submit button).
   No custom grid, no nth-child placement, no flex-chain textarea hack.
   ========================================================================= */

/* Orbital variable overrides — bordeaux primary + generous radius +
   grey-beige control fills. Applied at the scope root; orbital's own
   rules cascade through and pick up our values automatically. */
.kayse-form-styled {
    --gf-color-primary: var(--color-wine);
    --gf-color-primary-rgb: 122, 31, 43;
    --gf-color-primary-darker: var(--color-wine-dark);
    --gf-color-primary-lighter: rgba(122, 31, 43, .15);
    --gf-color-primary-contrast: #ffffff;
    --gf-color-secondary: var(--color-wine);
    --gf-radius-sm: 9999px;
    --gf-radius-md: 9999px;
    --gf-radius-lg: 20px;
    --gf-ctrl-bg-color: #F2EEEA;
    --gf-ctrl-bg-color-focus: #FBF9F7;
    --gf-ctrl-border-color: transparent;
    --gf-ctrl-border-color-hover: transparent;
    --gf-ctrl-border-color-focus: var(--color-wine);
    --gf-ctrl-btn-bg-color-primary: rgba(104, 34, 50, 1);
    --gf-ctrl-btn-bg-color-hover-primary: var(--color-wine-dark);
    --gf-ctrl-btn-color-primary: #ffffff;
    --gf-ctrl-btn-color-hover-primary: #ffffff;
    --gf-ctrl-btn-border-color-primary: rgba(104, 34, 50, 1);
    --gf-ctrl-btn-border-color-hover-primary: var(--color-wine-dark);
}

.kayse-form-styled .gform_wrapper {
    margin: 0;
}

/* Labels visually hidden (accessible) — not display:none so screen
   readers still announce them. Includes composite-field sub-labels (e.g.
   the "Name"/"Last name" labels on top of a Name-type field) that use
   different classes. */
.kayse-form-styled .gfield_label,
.kayse-form-styled .gform_fields legend,
.kayse-form-styled .gform-field-label--type-sub,
.kayse-form-styled .gfield_label--type-sub {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.kayse-form-styled .gfield_required,
.kayse-form-styled .ginput_counter {
    display: none;
}

/* Input / select — pill fill (variables alone don't always win against
   orbital's own control declarations, so re-assert the visuals). */
/* Inputs / textarea / select — chained through .gform_wrapper to beat
   orbital's own control rules (which use .gform-theme--orbital / .gfield
   .ginput_container input chains at 040 specificity). We match at 030+
   AND include the composite Name field's sub-inputs (.name_first input,
   .name_last input) which live in <span> wrappers and can't be reached
   by a bare .gfield input selector. */
.kayse-form-styled .gform_wrapper input[type="text"],
.kayse-form-styled .gform_wrapper input[type="email"],
.kayse-form-styled .gform_wrapper input[type="tel"],
.kayse-form-styled .gform_wrapper input[type="url"],
.kayse-form-styled .gform_wrapper input[type="number"],
.kayse-form-styled .gform_wrapper select,
.kayse-form-styled .gform_wrapper textarea,
.kayse-form-styled .ginput_container_name input,
.kayse-form-styled .name_first input,
.kayse-form-styled .name_last input {
    width: 100%;
    font-family: var(--font-body);
    font-weight: 400;
    /* 16px prevents iOS auto-zoom on focus (triggered when font-size < 16). */
    font-size: 16px;
    line-height: 25.5px;
    letter-spacing: 0;
    color: var(--color-ink);
    background: rgba(245, 240, 235, 1);
    border: 1px solid transparent;
    border-radius: 40px;
    padding: .95rem 1.35rem;
    outline: none;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.kayse-form-styled .gform_wrapper textarea {
    min-height: 9rem;
    resize: vertical;
}

.kayse-form-styled .gform_wrapper input::placeholder,
.kayse-form-styled .gform_wrapper textarea::placeholder,
.kayse-form-styled .name_first input::placeholder,
.kayse-form-styled .name_last input::placeholder {
    font-family: var(--font-body);
    font-weight: 400;
    /* Match the inputs (16px) so placeholders don't visually shrink relative
       to the typed text — and stay above the iOS auto-zoom threshold. */
    font-size: 16px;
    line-height: 25.5px;
    letter-spacing: 0;
    color: rgba(14, 14, 16, .5);
}

.kayse-form-styled .gform_wrapper input:focus,
.kayse-form-styled .gform_wrapper textarea:focus,
.kayse-form-styled .gform_wrapper select:focus,
.kayse-form-styled .name_first input:focus,
.kayse-form-styled .name_last input:focus {
    background: #FBF9F7;
    box-shadow: 0 0 0 2px rgba(122, 31, 43, .25);
}

/* Composite Name field — force 2-col layout so .name_first / .name_last
   share the row evenly (orbital's `.gform-grid-col--size-auto` can shrink
   them to their content width and produce tiny inputs). This is INTERNAL
   to the Name field's own container — no conflict with the outer grid
   layout below (which operates on .gfield siblings). */
.kayse-form-styled .ginput_container_name {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}
.kayse-form-styled .ginput_container_name > .name_first,
.kayse-form-styled .ginput_container_name > .name_last,
.kayse-form-styled .ginput_container_name > .gform-grid-col {
    flex: 1 1 0;
    min-width: 0;
}

/* =========================================================================
   Outer grid layout on .gform_fields — grid-template-areas + type-based
   placement (not nth-child) so BO field reordering doesn't break the layout.

   Orbital already sets its OWN grid on .gform_fields via
   `gfield--width-half` / `--width-full` (each .gfield gets a
   grid-column). Two grids stacked = chaotic 3-column render. Fix:
     (1) neutralise orbital's per-field grid-column on the .gfield items,
     (2) declare our grid with named areas so every field lands where we
         want regardless of DOM order or orbital's own column decisions.
   ========================================================================= */

/* Neutralise orbital's per-field grid metrics. Orbital sets
   grid-column: 1 / -1 (or span N) on .gfield--width-full / --width-half
   at inline-style level or via high-specificity selectors — those
   partially override grid-area (which is a shorthand for grid-column +
   grid-row). We use !important on both the auto-reset AND the grid-area
   assignments so grid-area wins unconditionally. */
.kayse-form-styled .gform_wrapper .gform_fields > .gfield {
    width: auto !important;
    max-width: none !important;
}

.kayse-form-styled .gform_wrapper .gform_fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "name    name"
        "email   email"
        "phone   message"
        "rgpd    message";
    gap: 1rem;
    align-items: start;
}

.kayse-form-styled .gfield--type-name     { grid-area: name    !important; }
.kayse-form-styled .gfield--type-email    { grid-area: email   !important; }
.kayse-form-styled .gfield--type-phone    { grid-area: phone   !important; }
.kayse-form-styled .gfield--type-html     { grid-area: rgpd    !important; }
.kayse-form-styled .gfield--type-textarea { grid-area: message !important; }

/* Textarea (Message) fills the "message" grid cell height (= Phone + gap +
   RGPD height on the left column) via a flex chain. */
.kayse-form-styled .gfield--type-textarea {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.kayse-form-styled .gfield--type-textarea .ginput_container,
.kayse-form-styled .gfield--type-textarea .ginput_container_textarea {
    flex: 1;
    display: flex;
    min-height: 0;
}
.kayse-form-styled .gfield--type-textarea textarea {
    flex: 1;
    height: 100%;
    min-height: 100%;
    resize: none;
}

/* Character counter — orbital's default rendering re-appears despite our
   earlier display:none because it's a `.gfield_description.ginput_counter`
   inside the textarea's container (higher-specificity orbital rule). Force
   with !important on all common variants. */
.kayse-form-styled .ginput_counter,
.kayse-form-styled .charleft,
.kayse-form-styled .gfield_description.ginput_counter,
.kayse-form-styled .gform_wrapper .ginput_counter {
    display: none !important;
}

/* Responsive — collapse to single column below 560px. */
@media (max-width: 560px) {
    .kayse-form-styled .gform_wrapper .gform_fields {
        grid-template-columns: 1fr;
        grid-template-areas:
            "name"
            "email"
            "phone"
            "message"
            "rgpd";
    }
    .kayse-form-styled .gfield--type-textarea {
        display: block; /* revert flex-column so textarea uses min-height */
    }
    .kayse-form-styled .gfield--type-textarea textarea {
        height: auto;
        min-height: 8rem;
        flex: initial;
        resize: vertical;
    }
}

/* RGPD (HTML field) — small muted paragraph. */
.kayse-form-styled .gfield--type-html {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    line-height: 19px;
    letter-spacing: -0.02em;
    color: var(--color-muted, #6B6B70);
}
.kayse-form-styled .gfield--type-html p { margin: 0 0 .35rem; }
.kayse-form-styled .gfield--type-html p:last-child { margin-bottom: 0; }
.kayse-form-styled .gfield--type-html a {
    color: var(--color-wine);
    text-decoration: underline;
}

/* Submit — bordeaux pill full-width. The var overrides above ALREADY
   colour orbital's default button; these rules add width + padding +
   radius overrides that variables can't set. */
.kayse-form-styled .gform_footer {
    margin-top: 1.25rem;
    padding: 0;
}
/* Submit button. Orbital emits an INLINE <style> in the wrapper defining
   --gf-color-primary and the associated --gf-ctrl-btn-* on the form's
   #gform_wrapper_X — that inline stylesheet has very high specificity
   and repaints the button in orbital blue despite our earlier scoped
   rules. Force our design values with chirurgical !important — the
   button is the only place we grant ourselves this exception. */
.kayse-form-styled .gform_wrapper .gform_footer .btn,
.kayse-form-styled .gform_wrapper .gform_footer input[type="submit"],
.kayse-form-styled .gform_wrapper .gform_footer button[type="submit"],
.kayse-form-styled .gform_wrapper .gform_footer [id^="gform_submit_button_"],
.kayse-form-styled .gform_footer .btn--primary {
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 139% !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    color: #ffffff !important;
    background: rgba(104, 34, 50, 1) !important;
    border: 1px solid rgba(104, 34, 50, 1) !important;
    border-radius: 40px !important;
    cursor: pointer !important;
    transition: background-color .2s ease !important;
}
.kayse-form-styled .gform_wrapper .gform_footer .btn:hover,
.kayse-form-styled .gform_wrapper .gform_footer input[type="submit"]:hover,
.kayse-form-styled .gform_wrapper .gform_footer button[type="submit"]:hover,
.kayse-form-styled .gform_wrapper .gform_footer [id^="gform_submit_button_"]:hover,
.kayse-form-styled .gform_footer .btn--primary:hover {
    background: white !important;
    color: var(--color-wine) !important;
    border-color: var(--color-wine) !important;
}
.kayse-form-styled .gform_wrapper .gform_footer .btn:focus-visible,
.kayse-form-styled .gform_wrapper .gform_footer [id^="gform_submit_button_"]:focus-visible,
.kayse-form-styled .gform_footer .btn--primary:focus-visible {
    outline: 2px solid var(--color-wine) !important;
    outline-offset: 3px !important;
}

/* Validation + confirmation. */
.kayse-form-styled .gfield_validation_message,
.kayse-form-styled .validation_message {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    color: #dc2626;
    margin-top: .35rem;
    padding-left: 1rem;
}
.kayse-form-styled .gfield_error input,
.kayse-form-styled .gfield_error textarea {
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .35);
}
.kayse-form-styled .gform_validation_errors {
    font-family: var(--font-body);
    font-size: 13px;
    color: #dc2626;
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    background: rgba(220, 38, 38, .08);
    border-radius: 12px;
}
.kayse-form-styled .gform_confirmation_message {
    padding: 1.25rem 1.5rem;
    background: rgba(122, 31, 43, .08);
    border-radius: 16px;
    color: var(--color-wine);
    text-align: center;
    font-family: var(--font-body);
}

/* Responsive — orbital collapses width-half → full on its own below its
   own breakpoint. We just tighten the card padding on very small screens. */
@media (max-width: 560px) {
    .single-team__form-card {
        padding: 1.5rem 1.25rem;
    }
}

/* -------------------------------------------------------------------------- */
/* Left column — Presentation / Qualification                                  */
/* -------------------------------------------------------------------------- */

.single-team__section {
    margin-bottom: 2.25rem;
}
.single-team__section:last-child {
    margin-bottom: 0;
}

.single-team__section-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.single-team__section-icon {
    /* Bare wrapper for the section pictogram — no round wine-light halo,
       no border. Keeps the 36px slot so the icon aligns with the heading
       (the actual 18×18 icon is centered inside). */
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.single-team__section-icon svg,
.single-team__section-icon img {
    width: 25px;
    height: 25px;
    display: block;
}

.single-team__section-heading {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-wine);
    margin: 0;
}

.single-team__section-body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-ink);
}
.single-team__section-body p {
    margin: 0 0 1rem;
}
.single-team__section-body p:last-child {
    margin-bottom: 0;
}

.single-team__qualification-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .65rem;
}
.single-team__qualification-list li {
    position: relative;
    padding-left: 1.6rem;
    font-family: var(--font-body);
    font-size: .95rem;
    line-height: 1.55;
    color: var(--color-ink);
}
.single-team__qualification-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    background: var(--color-wine);
}

.single-team__contact-cta {
    margin-top: 2rem;
}

/* -------------------------------------------------------------------------- */
/* Press (now lives inside .single-team__content as a regular section)         */
/* -------------------------------------------------------------------------- */

.single-team__press-body {
    display: block;
}

/* With illustration AND enough room → media/caption left, illustration right. */
@media (min-width: 900px) {
    .single-team__press-body--has-illustration {
        display: grid;
        grid-template-columns: 1fr minmax(120px, 180px);
        gap: 1.5rem;
        align-items: center;
    }
}

.single-team__press-main {
    min-width: 0;
}

.single-team__press-media {
    border-radius: 14px;
    overflow: hidden;
    background: var(--color-cream-light, #FBF7F2);
}

.single-team__press-media--image .single-team__press-image,
.single-team__press-media--image img {
    width: 100%;
    height: auto;
    display: block;
}

.single-team__press-media--video {
    position: relative;
    aspect-ratio: 16 / 9;
}
.single-team__press-media--video iframe,
.single-team__press-media--video video,
.single-team__press-media--video embed,
.single-team__press-media--video object {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.single-team__press-caption {
    font-family: var(--font-body);
    font-size: .95rem;
    line-height: 1.55;
    color: var(--color-muted, #6B6B70);
    margin: 1rem 0 0;
}

/* Press repeater gallery — single-column stack of items (each an image
   OR a video). Simple + robust for mixed aspect ratios. .press-item
   inherits .press-media/.press-image styles above so no duplication. */
.single-team__press-gallery {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.single-team__press-item {
    margin: 0;
}
.single-team__press-item .single-team__press-caption {
    margin-top: .75rem;
}

.single-team__press-fallback {
    margin: 0;
    padding: 1.25rem;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-muted, #6B6B70);
    word-break: break-all;
}

.single-team__press-illustration {
    display: flex;
    justify-content: center;
    align-items: center;
}
.single-team__press-illustration-img {
    display: block;
    max-width: 100%;
    height: auto;
}
@media (max-width: 899px) {
    .single-team__press-illustration {
        margin-top: 1.5rem;
    }
    .single-team__press-illustration-img {
        max-width: 160px;
    }
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                  */
/* -------------------------------------------------------------------------- */

@media (max-width: 899px) {
    .single-team__body {
        padding: 2.5rem 0;
    }
    .single-team__form-card {
        padding: 1.5rem;
    }
}

@media (max-width: 768px) {
    .single-team__hero {
        padding: calc(var(--topbar-h) + var(--header-h) + 2.5rem) 0 2.5rem;
    }
}

/* =============================================================================
   30. BLOG HUB (listing — hero filter + responsive grid + see more)
   ============================================================================= */

/* -------------------------------------------------------------------------- */
/* Hero filter bar                                                            */
/* -------------------------------------------------------------------------- */

.blog-hero-filter {
    position: relative;
    background: var(--color-ink);
    color: white;
    padding: calc(var(--topbar-h) + var(--header-h) + 4rem) 0 4rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* NB: `overflow: hidden` used to be here as defensive clipping for the
       full-bleed background, but it also clipped the open dropdown panels
       (position: absolute; top: calc(100% + 8px)) inside the pill bar.
       The background is a CSS `background-image` (no <img>), so nothing can
       actually overflow — dropping the overflow is safe.

       `z-index: 20` elevates this whole section (and thus the escaped panel)
       above the following .breadcrumbs section (auto stacking) while staying
       below the fixed .site-header (--header-z: 50). Combined with the
       existing `isolation: isolate`, the panel's own z-index: 30 stacks
       cleanly inside this section's context. */
    z-index: 20;
    isolation: isolate;
}

.blog-hero-filter__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 14, 16, .55) 0%, rgba(14, 14, 16, .75) 100%);
    z-index: -1;
}

.blog-hero-filter__inner {
    text-align: center;
    max-width: 880px;
}

.blog-hero-filter__title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 500;
    line-height: 1.05;
    margin: 0 0 1rem;
    color: inherit;
}

.blog-hero-filter__intro {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.55;
    opacity: .9;
    margin: 0 auto 1.5rem;
    max-width: 640px;
}

.blog-hero-filter__inner {
    /* Bar is full-width up to 1200px (below → 100% of container inner). */
    max-width: 1200px;
}

.blog-hero-filter__form {
    max-width: 1200px;
    margin: 0 auto;
}

/* -------------------------------------------------------------------------- */
/* Pill bar: white "Research" segment + 2 wine dropdown segments              */
/* -------------------------------------------------------------------------- */

/* The pill is built from 3 sibling segments. We avoid `overflow: hidden`
   on the bar so the dropdown panels can escape downward; the pill look
   comes from rounding the OUTER corners of the first and last segments. */
.blog-hero-filter__bar {
    display: flex;
    align-items: stretch;
    /* White bar background fills the concave crescent left by the first
       dropdown's rounded left corners (elliptical 50px×30px). Without it,
       the hero image showed through those two crescents (top and bottom of
       the search/dropdown seam). Segments cover the bar bg everywhere else,
       so this white is only visible inside the crescent — visually the
       search's white flows into the dropdown's rounded cutout. */
    background: white;
    border: none;
    border-radius: 9999px;
    padding: 0;
    box-shadow: 0 18px 40px -22px rgba(14, 14, 16, .55), 0 4px 12px -8px rgba(14, 14, 16, .25);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.blog-hero-filter__field {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 60px;
}

/* Search segment — clear/white background, ink text, magnifier on the right.
   Left corners keep the pill radius (9999px clamps to height/2 = 30px at
   60px tall, giving a clean semicircular end). Right edge stays square
   (butts against the first dropdown segment). */
.blog-hero-filter__field--search {
    flex: 2 1 0;
    background: white;
    padding: 0 1.5rem;
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;
}

.blog-hero-filter__input {
    flex: 1;
    width: 100%;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-ink);
    background: transparent;
    border: none;
    padding: 1rem 2.5rem 1rem 0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.blog-hero-filter__input::placeholder {
    color: rgba(14, 14, 16, .55);
    font-weight: 400;
}

.blog-hero-filter__input:focus {
    outline: none;
}

.blog-hero-filter__search-icon {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--color-ink);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.blog-hero-filter__search-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Dropdown segments — wine background, white text.
   The two segments carry DISTINCT shades of bordeaux:
     - 1st dropdown (right after the search): lighter  rgba(127, 36, 57, 1)
     - 2nd dropdown (right after the 1st) :   darker   rgba( 86, 27, 41, 1)
   Positional selectors (adjacent siblings) work for both the Blog Hub
   (law_type / blog_topic) AND the Team page (authority / function). */
.blog-hero-filter__field--dropdown {
    flex: 1 1 0;
    position: relative;
    color: white;
}

.blog-hero-filter__field--search + .blog-hero-filter__field--dropdown {
    background: rgba(127, 36, 57, 1);
    /* Pill left corners on the first dropdown — 9999px clamps to height/2
       (~30px on the 60px-tall segment) for a perfect semicircle that
       mirrors the Research field's pill end. The white `.__bar` background
       fills the concave cutout so the join reads clean, no dark crescent.
       Adjacent-sibling selector auto-targets the correct dropdown on BOTH
       Blog (law_type) and Team (authority) — no coupling to any facet slug. */
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;
}

.blog-hero-filter__field--dropdown + .blog-hero-filter__field--dropdown {
    background: rgba(86, 27, 41, 1);
    /* Thin divider between the two wine segments. */
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .18);
}

/* The rightmost segment carries the right side of the pill. */
.blog-hero-filter__bar > .blog-hero-filter__field:last-child {
    border-top-right-radius: 9999px;
    border-bottom-right-radius: 9999px;
}

.blog-hero-filter__dropdown-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: white;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 1rem 2.5rem 1rem 1.5rem;
    cursor: pointer;
    text-align: left;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.blog-hero-filter__dropdown-toggle:focus-visible {
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
}

.blog-hero-filter__field--dropdown.has-selection .blog-hero-filter__dropdown-toggle {
    background: rgba(255, 255, 255, .1);
}

.blog-hero-filter__dropdown-chevron {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    transform: translateY(-70%) rotate(45deg);
    transition: transform .2s ease;
    pointer-events: none;
}

.blog-hero-filter__field--dropdown.is-open .blog-hero-filter__dropdown-chevron {
    transform: translateY(-30%) rotate(-135deg);
}

/* Panel: white card with rounded corners, anchored below the wine segment. */
.blog-hero-filter__dropdown-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 30;
    background: white;
    color: var(--color-ink);
    border-radius: 16px;
    box-shadow: 0 24px 48px -20px rgba(14, 14, 16, .45), 0 6px 14px -8px rgba(14, 14, 16, .25);
    padding: .5rem;
    max-height: 320px;
    overflow-y: auto;
    text-align: left;
}

.blog-hero-filter__dropdown-panel[hidden] {
    display: none;
}

.blog-hero-filter__dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-hero-filter__dropdown-item {
    margin: 0;
}

.blog-hero-filter__dropdown-option {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .65rem;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-ink);
    transition: background-color .15s ease;
}

.blog-hero-filter__dropdown-option:hover,
.blog-hero-filter__dropdown-option:focus-within {
    background: var(--color-cream-light, #FBF7F2);
}

.blog-hero-filter__dropdown-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.blog-hero-filter__dropdown-check {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--color-muted, #6B6B70);
    background: white;
    position: relative;
    transition: background-color .15s ease, border-color .15s ease;
}

.blog-hero-filter__dropdown-checkbox:checked + .blog-hero-filter__dropdown-check {
    background: var(--color-wine);
    border-color: var(--color-wine);
}

.blog-hero-filter__dropdown-checkbox:checked + .blog-hero-filter__dropdown-check::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(45deg);
}

.blog-hero-filter__dropdown-checkbox:focus-visible + .blog-hero-filter__dropdown-check {
    box-shadow: 0 0 0 2px var(--color-wine-light, #F2DDDF);
}

.blog-hero-filter__dropdown-name {
    flex: 1;
    min-width: 0;
    transition: color .15s ease;
}

/* Wine on hover. The primary hover target UX-wise is the .dropdown-option
   row (label), so cascade the color from that hover too — this way the
   name lights up whether the pointer is on the label row or the text
   span itself. Panel bg is white with a cream-light hover, so bordeaux
   text reads at ~7:1 (AAA). */
.blog-hero-filter__dropdown-name:hover,
.blog-hero-filter__dropdown-option:hover .blog-hero-filter__dropdown-name {
    color: var(--color-wine);
}

.blog-hero-filter__dropdown-empty {
    margin: 0;
    padding: .75rem;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-muted, #6B6B70);
    text-align: center;
}

/* Chips */

.blog-hero-filter__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin: 1rem 0 0;
    min-height: 0;
}

.blog-hero-filter__chips:empty {
    display: none;
}

.blog-hero-filter__chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .35rem .35rem .85rem;
    background: var(--color-wine);
    color: white;
    border: none;
    border-radius: 9999px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease;
}

.blog-hero-filter__chip:hover,
.blog-hero-filter__chip:focus-visible {
    background: var(--color-wine-dark);
    outline: none;
}

.blog-hero-filter__chip-label {
    white-space: nowrap;
}

.blog-hero-filter__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .22);
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
}

/* Meta row (count + reset) */

.blog-hero-filter__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: .85rem 0 0;
    flex-wrap: wrap;
}

.blog-hero-filter__count {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, .8);
    letter-spacing: .02em;
}

.blog-hero-filter__reset {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .45);
    color: white;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    padding: .45rem 1rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.blog-hero-filter__reset:hover,
.blog-hero-filter__reset:focus-visible {
    background: white;
    color: var(--color-ink);
    border-color: white;
    outline: none;
}

/* -------------------------------------------------------------------------- */
/* Responsive grid of article cards                                           */
/* -------------------------------------------------------------------------- */

.blog-hub-grid {
    background: var(--color-paper, var(--color-cream, #F4ECE3));
    padding: 5rem 0;
}

.blog-hub-grid__items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem 2rem;
    align-items: stretch;
}

/* Blog Hub main list — grid card design applied at ALL widths (blog_grid.php
   uses a pure grid, no carousel fallback below 769px unlike .blog-slider--grid).
   These declarations mirror the "Grid-mode CARD DESIGN" block in the
   @media (min-width: 769px) block near the .blog-slider--grid overrides —
   keep the two in sync when the design changes. */
.blog-hub-grid__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* White card container with inner padding — the image sits inside the
       padding, not flush with the card edges. */
    background: #ffffff;
    border-radius: 24px;
    padding: 1rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.blog-hub-grid__card.is-hidden {
    display: none !important;
}

/* Image radius smaller than card radius (concentric visual). */
.blog-hub-grid__card .blog-slider__media {
    border-radius: 16px;
}

/* Date badge — bottom-right + upgraded typo. Applies at ALL widths on the
   Blog Hub main list (pure grid, no carousel fallback). Mirror rule inside
   @media (min-width: 769px) targets .blog-slider--grid .blog-slider__date
   for Team + Blog Hub Latest News grid mode — keep the two in sync.
   The frosted-glass surface (border + translucent bg + backdrop-filter +
   white text) is supplied by the .u-glass utility added on the PHP markup. */
.blog-hub-grid__card .blog-slider__date {
    top: auto;
    left: auto;
    bottom: 1rem;
    right: 1rem;
    border-radius: 10px;
    /* Text color left to .u-glass (white) — do not restate here or the
       higher-specificity scoped selector would beat the utility. */
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.39;
    letter-spacing: -0.03em;
    text-align: center;
}

/* Footer stacks vertically inside the card padding. */
.blog-hub-grid__card .blog-slider__footer {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    flex: 1 1 auto;
    padding: 1.25rem .25rem 0;
}

/* Compact title on 2 lines, tighter than the shared slider default. */
.blog-hub-grid__card .blog-slider__title {
    font-size: 18px;
    line-height: 1.2;
    margin: 0 0 .5rem;
}

/* Categories — exact maquette typo (multi-cat rendered as "A - B"). */
.blog-hub-grid__card .blog-slider__cats {
    font-family: var(--font-display-text);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.39;
    letter-spacing: -0.04em;
}

/* Read the Article: full-width, centered inside the card. */
.blog-hub-grid__card .blog-slider__read-cta {
    align-self: stretch;
    width: 100%;
    text-align: center;
    justify-content: center;
    margin-top: auto;
}

.blog-hub-grid__empty {
    text-align: center;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-muted, #6B6B70);
    margin: 3rem auto 0;
    padding: 1.5rem;
}

/* See more button */

.blog-hub-grid__see-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.blog-hub-grid__see-more[hidden] {
    display: none;
}

/* Responsive */
@media (max-width: 1100px) {
    .blog-hub-grid__items { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .blog-hero-filter {
        padding: calc(var(--topbar-h) + var(--header-h) + 2.5rem) 0 2.5rem;
    }

    /* Stack the pill segments vertically; share the same rounded shell. */
    .blog-hero-filter__bar {
        flex-direction: column;
        border-radius: 22px;
    }

    .blog-hero-filter__field { min-height: 56px; }

    .blog-hero-filter__field--search {
        border-top-left-radius: 22px;
        border-top-right-radius: 22px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .blog-hero-filter__bar > .blog-hero-filter__field:last-child {
        border-bottom-left-radius: 22px;
        border-bottom-right-radius: 22px;
        border-top-right-radius: 0;
    }

    /* Switch the side-divider to a top-divider when segments stack. */
    .blog-hero-filter__field--dropdown + .blog-hero-filter__field--dropdown {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
    }

    /* Cancel the 1st dropdown's desktop-only elliptical corners once the
       bar stacks vertically — left/right don't map to the stacked layout. */
    .blog-hero-filter__field--search + .blog-hero-filter__field--dropdown {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .blog-hero-filter__dropdown-panel {
        max-height: 240px;
    }

    .blog-hero-filter__meta {
        flex-direction: column;
        gap: .5rem;
    }

    .blog-hub-grid { padding: 3rem 0; }
}

@media (max-width: 560px) {
    .blog-hub-grid__items {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* -------------------------------------------------------------------------- */
/* Our Latest News — reused .blog-slider on a bordeaux background             */
/* Wrapper class is added ONLY on the Blog Hub template, so Home/About/Team   */
/* keep the default cream slider styling.                                     */
/* -------------------------------------------------------------------------- */

.blog-hub-latest .blog-slider {
    background: rgba(100, 27, 44, 1);
    color: white;
}

.blog-hub-latest .blog-slider__heading,
.blog-hub-latest .blog-slider__intro,
.blog-hub-latest .blog-slider__intro p {
    color: white;
}

.blog-hub-latest .blog-slider__heading .t-wine,
.blog-hub-latest .blog-slider__intro .t-wine {
    color: var(--color-cream);
}

/* Arrow nav: white outline that stays legible on bordeaux. */
.blog-hub-latest .blog-slider__nav-btn {
    color: white;
    border-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .06);
}

.blog-hub-latest .blog-slider__nav-btn:hover {
    background: rgba(255, 255, 255, .14);
    border-color: white;
}

/* Progress bars: faint white track + solid white fill. */
.blog-hub-latest .blog-slider__bar {
    background: rgba(255, 255, 255, .25);
}

.blog-hub-latest .blog-slider__bar-fill {
    background: white;
}

/* ===== Horizontal scroll + arrows on .blog-hub-latest (grid variant) ======
   At ≥769px .blog-slider--grid normally renders as a static grid with the
   nav hidden. Override on .blog-hub-latest ONLY: turn the slides into a
   horizontal flex scroller (one row, scrollable) and re-expose the nav
   arrows. Card design (white bg + radius + padding + shadow) untouched —
   only the parent layout + nav visibility change. The blog-slider JS is
   torn down at >768px on the grid variant, so a small custom handler in
   main.js can safely wire the arrows to scrollBy without conflict. */
@media (min-width: 769px) {
    .blog-hub-latest .blog-slider--grid .blog-slider__slides {
        display: flex;
        flex-wrap: nowrap;
        grid-template-columns: none; /* neutralise the grid rule from the base */
        overflow-x: auto;
        overflow-y: visible;
        gap: 2rem;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scrollbar-width: none; /* Firefox */
        padding-bottom: .5rem;
    }
    .blog-hub-latest .blog-slider--grid .blog-slider__slides::-webkit-scrollbar {
        display: none; /* WebKit */
    }
    .blog-hub-latest .blog-slider--grid .blog-slider__slide {
        /* Same visual size as the previous grid (~1/4 of the row) */
        flex: 0 0 calc((100% - 6rem) / 4);
        scroll-snap-align: start;
    }
    /* Re-show the arrow nav (base rule at .blog-slider--grid .blog-slider__nav
       hides it) — scoped strictly to .blog-hub-latest. */
    .blog-hub-latest .blog-slider--grid .blog-slider__nav {
        display: flex;
        justify-content: flex-end;
        gap: .75rem;
        margin-top: 1.5rem;
    }
    /* Below 1024px keep 3 cards visible, then 2 at tablet */
    @media (max-width: 1200px) {
        .blog-hub-latest .blog-slider--grid .blog-slider__slide {
            flex: 0 0 calc((100% - 4rem) / 3);
        }
    }
    @media (max-width: 900px) {
        .blog-hub-latest .blog-slider--grid .blog-slider__slide {
            flex: 0 0 calc((100% - 2rem) / 2);
        }
    }
}

/* Card text / pill overrides — SCOPED TO CAROUSEL MODE ONLY (<=768px).
   Above 769px, .blog-slider--grid promotes the card to the new "white card"
   design (mirror of .blog-hub-grid__card) — white text on a white card
   would be invisible, and a white pill on a white card too. So these
   rules only apply when the section falls back to a real carousel (dark
   cards floating on the bordeaux backdrop). */
@media (max-width: 768px) {
    .blog-hub-latest .blog-slider__title,
    .blog-hub-latest .blog-slider__title a {
        color: white;
    }

    .blog-hub-latest .blog-slider__title a:hover {
        color: var(--color-cream);
    }

    .blog-hub-latest .blog-slider__excerpt {
        color: rgba(255, 255, 255, .75);
    }

    .blog-hub-latest .blog-slider__cats {
        color: rgba(255, 255, 255, .9);
    }

    /* "Read the Article" pill: invert to a light pill so it shows on wine. */
    .blog-hub-latest .blog-slider__read-cta {
        background: white;
        color: var(--color-ink);
        border-color: white;
    }

    .blog-hub-latest .blog-slider__read-cta:hover,
    .blog-hub-latest .blog-slider__read-cta:focus-visible {
        background: var(--color-cream);
        border-color: var(--color-cream);
        color: var(--color-ink);
    }
}

/* See More CTA at the bottom: light glass on wine. */
.blog-hub-latest .blog-slider__cta-wrap .btn--glass {
    background: rgba(255, 255, 255, .12);
    color: white;
    border-color: rgba(255, 255, 255, .5);
}

.blog-hub-latest .blog-slider__cta-wrap .btn--glass:hover {
    background: rgba(255, 255, 255, .2);
    color: white;
    border-color: rgba(255, 255, 255, 1);
}

/* -------------------------------------------------------------------------- */
/* FAQ on the Blog Hub — black background override                            */
/* Wrapper class is added ONLY on the Blog Hub template.                      */
/* -------------------------------------------------------------------------- */

.blog-hub-faq .faq-block {
    background: var(--color-ink);
    color: white;
}

.blog-hub-faq .faq-block__heading {
    color: white;
}

.blog-hub-faq .faq-block__heading .t-wine {
    color: var(--color-cream);
}

.blog-hub-faq .faq-block__intro,
.blog-hub-faq .faq-block__intro p {
    color: rgba(255, 255, 255, .8);
}

/* Top+bottom highlight gradient — dark FAQ variant only.
   Applied on __item so the effect covers the whole block (question + answer)
   uniformly in both closed and open states. .faq-block__question stays
   background: transparent (base), letting the item's gradient show through. */
.blog-hub-faq .faq-block__item {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.006) 33.65%, rgba(255, 255, 255, 0.006) 69.71%, rgba(255, 255, 255, 0.15) 100%);
    border-color: #ffffff;
}

.blog-hub-faq .faq-block__item.is-open {
    border-color: #ffffff;
}

.blog-hub-faq .faq-block__question,
.blog-hub-faq .faq-block__question-text {
    color: white;
}

.blog-hub-faq .faq-block__icon {
    color: white;
}

.blog-hub-faq .faq-block__answer-inner,
.blog-hub-faq .faq-block__answer-inner p {
    color: rgba(255, 255, 255, .82);
}

.blog-hub-faq .faq-block__answer-inner strong {
    color: white;
}

.blog-hub-faq .faq-block__answer-inner a {
    color: var(--color-cream);
    text-decoration: underline;
}

/* =============================================================================
   31. SINGLE ARTICLE (single.php — blog post detail)
   ============================================================================= */

/* -------------------------------------------------------------------------- */
/* Hero — full-bleed bg image + dark overlay + centered H1                    */
/* -------------------------------------------------------------------------- */

.single-article__hero {
    position: relative;
    background: var(--color-ink);
    color: white;
    padding: calc(var(--topbar-h) + var(--header-h) + 6rem) 0 6rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    isolation: isolate;
}

.single-article__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 14, 16, .55) 0%, rgba(14, 14, 16, .8) 100%);
    z-index: -1;
}

.single-article__hero-inner {
    text-align: center;
    max-width: 900px;
}

.single-article__hero-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
    color: inherit;
}

/* -------------------------------------------------------------------------- */
/* Head — breadcrumbs + meta row, rendered INSIDE the right column above       */
/* the_content (not in a full-width band). Local overrides scope to            */
/* .single-article__head so the global breadcrumbs on other pages stay         */
/* centered + full-width as before.                                            */
/* -------------------------------------------------------------------------- */

.single-article__head {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Left-align + de-band the canonical breadcrumbs section when it appears
   inside the article head. Scoped — global breadcrumbs unaffected. */
.single-article__head .breadcrumbs {
    background: transparent;
    padding: 0;
    border-bottom: none;
}

.single-article__head .breadcrumbs > .container {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}

.single-article__head .breadcrumbs__list {
    justify-content: flex-start;
}

.single-article__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.single-article__back-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-ink);
    text-decoration: none;
    transition: color .2s ease;
}

.single-article__back-link:hover { color: var(--color-wine); }

.single-article__back-link--inert { visibility: hidden; }

.single-article__back-arrow {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    line-height: 1;
}

.single-article__meta-info {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-muted, #6B6B70);
}

.single-article__meta-sep {
    color: rgba(0, 0, 0, .35);
}

/* -------------------------------------------------------------------------- */
/* Body — 2 columns (sidebar left ~30% + content right ~70%)                  */
/* Starts directly under the hero. Breadcrumb + meta now live inside the      */
/* right column (.single-article__head), so the body owns its top padding.    */
/* -------------------------------------------------------------------------- */

.single-article__body {
    background: var(--color-paper);
    padding: 3rem 0 5rem;
}

.single-article__body-inner {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
}

/* Right column wrapper — clamps both the head (breadcrumb + meta) AND the
   article-content to the same readable width so they stay aligned. */
.single-article__content {
    max-width: 760px;
    min-width: 0;
}

/* Sidebar */

.single-article__sidebar {
    position: sticky;
    top: calc(var(--topbar-h) + var(--header-h) + 1.5rem);
    align-self: start;
}

.single-article__sidebar-title {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-ink);
    margin: 0 0 1rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--color-wine);
}

.single-article__sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.single-article__sidebar-item {
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.single-article__sidebar-item:last-child {
    border-bottom: none;
}

.single-article__sidebar-link {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem 0;
    color: var(--color-ink);
    text-decoration: none;
    transition: color .2s ease;
}

.single-article__sidebar-link:hover {
    color: var(--color-wine);
}

.single-article__sidebar-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.single-article__sidebar-item-title {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: inherit;
}

.single-article__sidebar-item-excerpt {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-muted, #6B6B70);
}

.single-article__sidebar-chevron {
    flex-shrink: 0;
    color: rgba(0, 0, 0, .3);
    font-size: 20px;
    line-height: 1;
    margin-top: .15rem;
    transition: transform .2s ease, color .2s ease;
}

.single-article__sidebar-link:hover .single-article__sidebar-chevron {
    color: var(--color-wine);
    transform: translateX(3px);
}

.single-article__sidebar-item.is-current .single-article__sidebar-link,
.single-article__sidebar-item.is-current .single-article__sidebar-item-title {
    color: var(--color-wine);
}

.single-article__sidebar-item.is-current .single-article__sidebar-chevron {
    color: var(--color-wine);
}

/* -------------------------------------------------------------------------- */
/* Content — the_content() rendered as a clean editorial article              */
/* (.article-content scopes all the typography rules to this region only.)    */
/* -------------------------------------------------------------------------- */

.article-content {
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.75;
    max-width: 760px;
}

.article-content > * + * {
    margin-top: 1.25rem;
}

.article-content h2 {
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-ink);
    margin: 3rem 0 .75rem;
}

.article-content h2:first-child { margin-top: 0; }

.article-content h3 {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.4vw, 26px);
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-ink);
    margin: 2.25rem 0 .5rem;
    text-align: center;
}

.article-content p {
    margin: 0;
}

.article-content strong,
.article-content b {
    color: var(--color-ink);
    font-weight: 700;
}

.article-content em,
.article-content i {
    font-style: italic;
}

.article-content a {
    color: var(--color-wine);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color .2s ease;
}

.article-content a:hover {
    color: var(--color-wine-dark);
}

.article-content ul,
.article-content ol {
    margin: 0;
    padding-left: 1.5rem;
}

.article-content li + li { margin-top: .35rem; }

.article-content blockquote {
    margin: 2rem 0;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--color-wine);
    background: rgba(122, 31, 43, .04);
    font-style: italic;
    color: var(--color-ink);
}

.article-content img,
.article-content .wp-block-image img {
    max-width: 100%;
    height: auto;
    border-radius: 18px;
    display: block;
}

.article-content figure {
    margin: 2rem 0;
}

.article-content figure figcaption {
    margin-top: .5rem;
    font-size: 13px;
    color: var(--color-muted, #6B6B70);
    text-align: center;
}

.article-content hr {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, .12);
    margin: 2.5rem 0;
}

/* -------------------------------------------------------------------------- */
/* Prev / Next pager                                                          */
/* -------------------------------------------------------------------------- */

.single-article__pager {
    background: var(--color-paper);
    padding: 0 0 5rem;
}

.single-article__pager-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.single-article__pager-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-ink);
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

.single-article__pager-link:hover {
    color: var(--color-wine);
}

.single-article__pager-link--prev:hover {
    transform: translateX(-2px);
}

.single-article__pager-link--next {
    margin-left: auto;
}

.single-article__pager-link--next:hover {
    transform: translateX(2px);
}

.single-article__pager-spacer {
    display: inline-block;
}

.single-article__pager-arrow {
    font-size: 16px;
    line-height: 1;
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                  */
/* -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .single-article__body-inner {
        grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
        gap: 3rem;
    }
}

@media (max-width: 899px) {
    .single-article__hero {
        padding: calc(var(--topbar-h) + var(--header-h) + 3rem) 0 3rem;
    }

    /* On mobile the sidebar drops under the content (per the mobile mockup
       order: hero → meta → content → related list → pager). */
    .single-article__body-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .single-article__sidebar {
        position: static;
        order: 2;
    }

    .single-article__content {
        order: 1;
    }

    .single-article__meta-row {
        gap: .75rem;
    }

    .single-article__pager-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .single-article__pager-link--next {
        margin-left: 0;
        justify-content: flex-end;
    }
}

@media (max-width: 560px) {
    .single-article__meta-info {
        flex-wrap: wrap;
        gap: .35rem .65rem;
    }
}

/* =============================================================================
   32. CONTENT PAGE (template-content.php — legal / free-content pages)
   ============================================================================= */

/* -------------------------------------------------------------------------- */
/* Hero — decorative dark image band (no text)                                */
/* -------------------------------------------------------------------------- */

.content-page__hero {
    position: relative;
    background: var(--color-ink);
    /* Same pattern as .single-article__hero / .single-team__hero: the band
       starts at the very top of the page (no margin-top) so the image
       fills behind the transparent fixed header. padding-top reserves the
       header height; min-height controls the decorative band underneath. */
    padding-top: calc(var(--topbar-h) + var(--header-h));
    min-height: clamp(280px, 36vw, 440px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    isolation: isolate;
}

.content-page__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 14, 16, .55) 0%, rgba(14, 14, 16, .75) 100%);
    z-index: -1;
}

/* When a hero image is present, the H1 overlays it — mirror the pattern of
   .page-hero (Contact/About/etc.). Flex column + justify-center vertically
   centres the title block against the background image. */
.content-page__hero--has-bg {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-page__hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.content-page__hero-title {
    font-family: var(--font-display);
    font-size: clamp(38px, 5vw, 60px);
    font-weight: 500;
    line-height: 1.1;
    color: white;
    margin: 0;
}

@media (max-width: 768px) {
    .content-page__hero-title { font-size: clamp(30px, 6vw, 40px); }
}

/* -------------------------------------------------------------------------- */
/* Body — single centered column with the page title + the_content()          */
/* -------------------------------------------------------------------------- */

.content-page__body {
    background: var(--color-paper);
    padding: 4rem 0 6rem;
}

.content-page__body-inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: left;
}

.content-page__title {
    font-family: var(--font-display);
    font-size: clamp(38px, 5vw, 60px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--color-ink);
    text-align: center;
    margin: 0 0 3rem;
}

/* The body inherits the .article-content typography from section 31, plus a
   few content-page-specific overrides that match the mockup (centered H2/H3,
   subtitle letter-spacing on H3). */
.content-page__content.article-content {
    max-width: none; /* the column wrapper already clamps the width */
}

.content-page__content h2 {
    text-align: center;
    margin-top: 3.5rem;
}

.content-page__content h3 {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-family: var(--font-body);
    font-size: clamp(14px, 1.4vw, 16px);
    font-weight: 700;
    color: var(--color-ink);
    margin: 2.5rem 0 1rem;
}

/* Responsive — tighten the vertical rhythm on small screens. */
@media (max-width: 768px) {
    .content-page__hero {
        min-height: clamp(220px, 42vw, 320px);
    }

    .content-page__body {
        padding: 2.5rem 0 4rem;
    }

    .content-page__title {
        margin-bottom: 2rem;
    }

    .content-page__content h2 {
        margin-top: 2.5rem;
    }
}

/* =============================================================================
   33. PRACTICE AREA (template-practice-area.php — Competences / Our expertise)
   ============================================================================= */

/* -------------------------------------------------------------------------- */
/* Hero — dark image band. Same header-merge pattern as the other internal    */
/* heroes (no margin-top; padding-top compensates the transparent header).    */
/* Heading + intro left-aligned inside the container.                          */
/* -------------------------------------------------------------------------- */

.practice-hero {
    position: relative;
    background: var(--color-ink);
    color: white;
    padding: calc(var(--topbar-h) + var(--header-h) + 5rem) 0 5rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    isolation: isolate;
}

.practice-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 14, 16, .5) 0%, rgba(14, 14, 16, .8) 100%);
    z-index: -1;
}

/* The inner block also carries .container, so it inherits the normal
   max-width (1280px) + centered margin + left/right padding. We only
   set the text alignment here — width clamps live on the children so
   they line up with the container's left edge (and never push to the
   viewport edge). */
.practice-hero__inner {
    text-align: left;
}

.practice-hero__title {
    font-family: var(--font-display);
    font-size: clamp(40px, 5.4vw, 64px);
    font-weight: 500;
    line-height: 1.05;
    margin: 0 0 1rem;
    color: inherit;
    max-width: 880px;
}

.practice-hero__intro {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.55;
    opacity: .9;
    margin: 0;
    max-width: 640px;
}

/* -------------------------------------------------------------------------- */
/* Practice block — full-bleed round image on one side, text inside the       */
/* container on the other.                                                    */
/*                                                                            */
/* Technique: the <section> spans the full viewport width. The image lives    */
/* in .practice-block__media-wrap, which is position:absolute, anchored to    */
/* the relevant viewport edge (left:0 or right:0), translated 25% off-screen */
/* so the circle bleeds past the edge organically. The text lives inside a   */
/* normal .container; .practice-block__text is constrained to ~50% of the    */
/* container and margin-aligned (margin-left:auto for image_left so it sits  */
/* on the right, margin-right:auto for image_right so it sits on the left).  */
/*                                                                            */
/* On mobile (<=900px) the media-wrap becomes position:static, full-width    */
/* and circular, dropping above the text in DOM order. The text wrap         */
/* releases its 50% cap and takes the full container width.                   */
/* -------------------------------------------------------------------------- */

.practice-block {
    position: relative;
    padding: 6rem 0;
    background: var(--color-paper);
    overflow: hidden;
}

/* Guarantee the section is tall enough to fully host the absolutely-
   positioned .practice-block__media-wrap AND its ::before blob offset.
   Image aspect is now 731/593 (Figma spec), so wrapper height = width x
   593/731 ≈ 0.81 x width. Blob is the SAME size as the image (100 x
   100 percent) but offset by ~8 percent vertically on the top or bottom
   depending on the variant. To fit the wrapper + one-sided 8 percent
   blob bleed under a vertically-centered layout, we need section height
   >= wrapper_height x 1.16. Plus 2rem for visual breathing.
   Formula rewritten: width x 0.94 (= 593/731 x 1.16) + 2rem.
   Scoped to blocks with an image — text-full stays auto. */
.practice-block--image-left,
.practice-block--image-right {
    min-height: calc(clamp(360px, 38vw, 560px) * 0.94 + 2rem);
}

/* Media wrap sizes to the FIGMA aspect 731x593 (was 1/1). The organic
   asymmetric border-radius lives on the <img> (variant-specific) so
   the sibling ::before blob can bleed past the image without being
   clipped by a wrapper-level overflow. */
.practice-block__media-wrap {
    position: absolute;
    top: 50%;
    width: clamp(360px, 38vw, 560px);
    aspect-ratio: 731 / 593;
    /* No overflow: hidden here on purpose (see the ::before decorative
       blob below). Section-level clip on .practice-block still guards
       against horizontal scroll. */
}

.practice-block--image-left .practice-block__media-wrap {
    left: 0;
    transform: translate(-25%, -50%);
}

.practice-block--image-right .practice-block__media-wrap {
    right: 0;
    transform: translate(25%, -50%);
}

/* Decorative bordeaux blob (rectanglerouge.png, 630x594 native, RGBA).
   The PNG artwork is ASYMMETRIC: rounded on the top, right and bottom
   sides, but STRAIGHT / FLAT on the LEFT side. It is designed to be
   placed against an off-viewport edge so the flat side hides while the
   rounded sides curve visibly into the interior of the composition.
   Per Figma spec, image and blob are the same size; the bleed comes
   from an OFFSET, not from an oversized blob:
   - image-left  : blob shifted down-left  (~6 percent left, ~8 percent down)
                   The PNG's flat left edge is pushed OFFSCREEN LEFT
                   (wrapper is already translated -25 percent + blob
                   -6 percent), and the rounded right/top/bottom sides
                   curve visibly around the image on the interior side.
   - image-right : blob shifted up-right (~4 percent right, ~8 percent up).
                   Here the offset would leave the PNG's flat left edge
                   INSIDE the visible interior — reading as a hard
                   vertical line ("coupe nette") next to the image.
                   Fix: flip the PNG horizontally with scaleX(-1) so the
                   flat side lands on the RIGHT of the blob (pushed
                   offscreen by the +25 percent wrapper translate + the
                   4 percent blob bleed), and the rounded sides curve
                   into the visible interior on the left/top/bottom.
                   The vertical INVERTS too (top for image-right vs
                   bottom-effect for image-left).
   Percentages are relative to the wrapper, so the effect scales cleanly
   across the whole clamp(360px, 38vw, 560px) range.
   z-index 0 = behind the image (which sits at z:1). pointer-events none. */
.practice-block__media-wrap::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('assets/images/rectanglerouge.png') center / 100% 100% no-repeat;
    z-index: 0;
    pointer-events: none;
}

.practice-block--image-left .practice-block__media-wrap::before {
    left: -6%;
    top: 8%;
}

.practice-block--image-right .practice-block__media-wrap::before {
    right: -4%;
    top: -8%;
    /* Horizontal mirror so the PNG's flat left edge lands on the right
       side of the blob rectangle -> pushed offscreen with the +25 percent
       wrapper translate. Rounded sides then face the visible interior. */
    transform: scaleX(-1);
}

.practice-block__image {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    box-shadow: 0 24px 60px -28px rgba(14, 14, 16, .4);
    background: rgba(14, 14, 16, .06);
    /* Border-radius is variant-specific (organic asymmetric shape per
       Figma), see rules below. */
}

/* Organic asymmetric radius (Figma spec) — 500/200 pattern mirrored per
   variant. On a 731x593 rectangle, radii are large enough to fully
   round the "long" corners while the "short" corners stay softly curved,
   giving the leaf-like organic silhouette from the maquette. */
.practice-block--image-left .practice-block__image {
    border-radius: 500px 200px 500px 200px;
}

.practice-block--image-right .practice-block__image {
    border-radius: 200px 500px 200px 500px;
}

/* Landing-page variant — swap the bordeaux blob (rectanglerouge.png) for
   the beige artwork (rectanglebeige.png). Landing template
   (page-templates/template-landing.php) wraps its practice-block loop in
   a <div class="landing-blocks"> so this rule applies ONLY there — the
   Competences page and any other future use of .practice-block keep the
   default red blob.
   Everything else (position, size, offsets per variant, scaleX(-1) flip
   on image-right, image radius, min-height, mobile overrides) is
   inherited from the base .practice-block rules above. rectanglebeige.png
   is 626x590 RGBA with the SAME asymmetric geometry as the red PNG
   (rounded top/right/bottom, flat left), so the existing image-right
   scaleX(-1) mirror lands its flat edge offscreen correctly. */
.landing-blocks .practice-block__media-wrap::before {
    background-image: url('assets/images/rectanglebeige.png');
}

/* The .container is the text-side wrapper. .practice-block__text holds the
   actual editorial content. */
.practice-block__container {
    position: relative;
    z-index: 1;
}

.practice-block__text {
    max-width: 544px;
}

.practice-block--image-left .practice-block__text {
    margin-left: auto;
    margin-right: 0;
}

.practice-block--image-right .practice-block__text {
    margin-left: 0;
    margin-right: auto;
}

.practice-block--text-full .practice-block__text {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.practice-block__heading {
    font-family: var(--font-display);
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-ink);
    margin: 0 0 .5rem;
}

.practice-block__subheading {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-wine);
    letter-spacing: .02em;
    margin: 0 0 1.5rem;
}

.practice-block__content {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-ink);
    margin-bottom: 1.75rem;
}

.practice-block__content > * + * {
    margin-top: 1rem;
}

.practice-block__content p { margin: 0; }

.practice-block__content strong { font-weight: 700; }

.practice-block__content a {
    color: var(--color-wine);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .2s ease;
}

.practice-block__content a:hover { color: var(--color-wine-dark); }

/* Outline-wine pill CTA scoped to practice blocks. Renders on a .btn base
   (.btn provides display/padding/radius foundation) and overrides the
   colors. We deliberately do NOT add .btn--primary in the markup so the
   global solid wine CTA stays untouched. */
.practice-block__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-cream-light, #FBF7F2);
    color: var(--color-wine);
    border: 1.5px solid var(--color-wine);
    border-radius: 9999px;
    padding: .85rem 2.25rem;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 6px 18px -12px rgba(122, 31, 43, .35);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.practice-block__cta:hover,
.practice-block__cta:focus-visible {
    background: var(--color-wine);
    color: white;
    border-color: var(--color-wine);
    box-shadow: 0 12px 24px -14px rgba(122, 31, 43, .55);
    transform: translateY(-1px);
    outline: none;
}

/* Responsive — mobile collapses to a single column with the image always
   stacked ABOVE the text, regardless of desktop layout. */
@media (max-width: 900px) {
    .practice-block {
        padding: 3rem 0;
    }

    /* Mobile stack: media-wrap is static and contributes to the
       natural section height, so the desktop min-height guarantee
       is no longer needed (and would just add awkward empty space). */
    .practice-block--image-left,
    .practice-block--image-right {
        min-height: auto;
    }

    .practice-block__media-wrap {
        position: static;
        transform: none;
        /* Full-width in the block on mobile so the image reads at its
           natural size instead of being capped to min(360px, 80vw).
           The blob offsets below are already scaled down for mobile
           (~3 percent bleed); combined with .practice-block's overflow:
           hidden guard rail, no horizontal scroll gets introduced. */
        width: 100%;
        margin: 0 0 2rem;
    }

    /* Variant-scoped resets — the desktop rules
       .practice-block--image-left/right .practice-block__media-wrap
       carry `transform: translate(±25%, -50%)` at spec (0,2,0), which
       otherwise beats the generic mobile `transform: none` (0,1,0)
       above. Match the same spec here so mobile actually wins. left/
       right: 0 are declared for intent even though they no-op on a
       position: static element — makes the reset explicit and
       future-proofs the file if position ever changes back.
       image-right keeps a small -6% vertical translate (Y only, no X)
       to gently lift the image; image-left is fully reset. */
    .practice-block--image-left .practice-block__media-wrap {
        left: 0;
        transform: translate(0%, 0%);
    }

    .practice-block--image-right .practice-block__media-wrap {
        right: 0;
        transform: translate(0%, -6%);
    }

    /* Center all editorial content of practice-blocks on mobile — heading,
       subheading (eyebrow), and body. Applies to BOTH the Competences
       page and the Landing-blocks variant (no scope restriction). The
       CTA (a.btn) is already centered on mobile by the a.btn { margin
       auto } rule in the 768px media query below. */
    .practice-block__heading,
    .practice-block__subheading,
    .practice-block__content {
        text-align: center;
    }

    /* On mobile the media-wrap becomes static / centered / full-width.
       Blob is same size as image; tighten the offsets to ~half of the
       desktop bleed so the bordeaux backing still peeks but never
       reaches the viewport edge (no horizontal scroll bar). */
    .practice-block--image-left .practice-block__media-wrap::before {
        left: -3%;
        top: 4%;
        right: auto;
        bottom: auto;
    }

    .practice-block--image-right .practice-block__media-wrap::before {
        right: -3%;
        top: -4%;
        left: auto;
        bottom: auto;
    }

    .practice-block__text,
    .practice-block--image-left .practice-block__text,
    .practice-block--image-right .practice-block__text {
        max-width: 100%;
        margin: 0;
    }

    .practice-block--text-full .practice-block__text {
        margin: 0 auto;
    }

    .practice-hero {
        padding: calc(var(--topbar-h) + var(--header-h) + 3rem) 0 3rem;
    }
}

/* -------------------------------------------------------------------------- */
/* FAQ on the Competences page — bordeaux background override                 */
/* Scoped to .practice-faq wrapper, so the default cream FAQ on Home/About/   */
/* Team/Blog Hub stays unchanged.                                              */
/* -------------------------------------------------------------------------- */

.practice-faq .faq-block {
    background: rgba(100, 27, 44, 1);
    color: white;
}

.practice-faq .faq-block__heading {
    color: white;
}

.practice-faq .faq-block__heading .t-wine {
    color: var(--color-cream);
}

.practice-faq .faq-block__intro,
.practice-faq .faq-block__intro p {
    color: rgba(255, 255, 255, .85);
}

/* Top+bottom highlight gradient — bordeaux FAQ variant. Applied on __item
   so the effect covers the whole block (question + answer) uniformly in
   both closed and open states, mirroring the .blog-hub-faq treatment. */
.practice-faq .faq-block__item {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.04) 46.15%, rgba(255, 255, 255, 0.04) 55.29%, rgba(255, 255, 255, 0.3) 100%);
    border-color: #ffffff;
}

.practice-faq .faq-block__question,
.practice-faq .faq-block__question-text {
    color: white;
}

.practice-faq .faq-block__icon {
    color: white;
}

.practice-faq .faq-block__answer-inner,
.practice-faq .faq-block__answer-inner p {
    color: rgba(255, 255, 255, .85);
}

.practice-faq .faq-block__answer-inner strong {
    color: white;
}

.practice-faq .faq-block__answer-inner a {
    color: var(--color-cream);
    text-decoration: underline;
}

.practice-faq .faq-block__cta-wrap .btn--glass {
    background: rgba(255, 255, 255, .12);
    color: white;
    border-color: rgba(255, 255, 255, .55);
}

.practice-faq .faq-block__cta-wrap .btn--glass:hover {
    background: rgba(255, 255, 255, .2);
    color: white;
    border-color: rgba(255, 255, 255, 1);
}

/* .practice-testimonials wraps the canonical testimonials_slider section.
   The section is already dark by default (.testimonials { background:
   var(--color-ink) }) — no color override needed here. The wrapper is
   kept as a future-proofing hook in case the design needs tweaks. */

/* =============================================================================
   34. CATEGORY PAGE (template-category.php — parent of child pages)
   ============================================================================= */

/* -------------------------------------------------------------------------- */
/* Hero — dark image band; internal header-merge pattern (no margin-top,      */
/* padding-top compensates the transparent header). Heading + buttons +       */
/* in-hero breadcrumbs are all left-aligned inside the container.             */
/* -------------------------------------------------------------------------- */

.category-hero {
    position: relative;
    background: var(--color-ink);
    color: white;
    padding: calc(var(--topbar-h) + var(--header-h) + 5rem) 0 4rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    isolation: isolate;
}

.category-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 14, 16, .5) 0%, rgba(14, 14, 16, .8) 100%);
    z-index: -1;
}

.category-hero__inner {
    text-align: left;
}

.category-hero__title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
    margin: 0 0 2rem;
    max-width: 880px;
}

.category-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0 0 2.5rem;
}

.category-hero__cta {
    /* Inherits .btn .btn--primary — keep its solid wine fill. */
}

.category-hero__emergency {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.5rem;
    background: rgba(255, 255, 255, .1);
    color: white;
    border: 1.5px solid rgba(255, 255, 255, .55);
    border-radius: 9999px;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Base transparent-ish + white text + white 55% border on dark
   category hero. Hover: white bg + ink text + white border. */
.category-hero__emergency:hover,
.category-hero__emergency:focus-visible {
    background: white;
    color: var(--color-ink);
    border-color: white;
    outline: none;
}

.category-hero__emergency-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

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

.category-hero__emergency-text {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.2;
}

.category-hero__emergency-label {
    font-weight: 500;
    opacity: .85;
}

.category-hero__emergency-phone {
    font-weight: 700;
    letter-spacing: .02em;
}

/* In-hero breadcrumb — scoped light treatment that does NOT touch the
   global centered breadcrumb on About / Team / Blog Hub / etc. */
.category-hero__breadcrumbs .breadcrumbs {
    background: transparent;
    padding: 0;
    border-bottom: none;
}

.category-hero__breadcrumbs .breadcrumbs > .container {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}

.category-hero__breadcrumbs .breadcrumbs__list {
    justify-content: flex-start;
    color: rgba(255, 255, 255, .9);
}

.category-hero__breadcrumbs .breadcrumbs__item a {
    color: rgba(255, 255, 255, .85);
    opacity: 1;
}

.category-hero__breadcrumbs .breadcrumbs__item a:hover { color: white; }

.category-hero__breadcrumbs .breadcrumbs__item:not(:last-child)::after {
    color: rgba(255, 255, 255, .55);
}

.category-hero__breadcrumbs .breadcrumbs__item [aria-current="page"] {
    color: white;
}

/* Extra bottom padding when an overlap card is going to slide up over the
   hero — tuned to the current architecture where only the card overlaps
   50px (was 10rem back when the whole section pulled up 6rem). Keeps a
   30px cushion between the card's top and the hero breadcrumbs. */
.category-hero--with-overlap {
    padding-bottom: 5rem;
}

/* -------------------------------------------------------------------------- */
/* Children overlap card — only rendered when the page has child pages.       */
/* Slides up over the bottom of the hero with a negative margin.              */
/* -------------------------------------------------------------------------- */

.category-children {
    position: relative;
    background: var(--color-paper);
    padding-bottom: 4rem;
}

/* Only the card overlaps the preceding hero — the section (and its cream
   band) stays in place. `top: -50px` guarantees the visual displacement
   regardless of any margin collapse quirks (the container / section have
   no top padding/border/BFC, so `margin-top` would collapse UPward instead
   of pulling the card alone). `margin-bottom: -50px` swallows the phantom
   space `top` would otherwise leave below in the flow. */
.category-children__card {
    position: relative;
    z-index: 2;
    top: -50px;
    margin-bottom: -50px;
    background: white;
    border-radius: 24px;
    box-shadow: 3px 3px 25px 3px rgba(96, 96, 96, 0.15);
    padding: 2.5rem 2.5rem 1.5rem;
}

.category-children__header {
    margin-bottom: 1.5rem;
}

.category-children__heading {
    font-family: var(--font-display-text);
    font-size: 40px;
    line-height: 50px;
    letter-spacing: 0;
    font-weight: 900;
    color: var(--color-ink);
    text-align: center;
    margin: 0 0 .5rem;
}

.category-children__intro {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-muted, #6B6B70);
    margin: 0;
    line-height: 1.5;
}

.category-children__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem 2rem;
}

.category-children__item {
    margin: 0;
}

.category-children__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 0;
    color: var(--color-ink);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    transition: color .2s ease;
}

/* Wine-red bullet before the link title. Sits as the first flex item; the
   existing `gap: .75rem` on the link handles spacing to the title. */
.category-children__link::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(127, 36, 57, 1);
}

.category-children__link:hover {
    color: var(--color-wine);
}

.category-children__link-title {
    flex: 1;
    min-width: 0;
}

.category-children__link-chevron {
    flex-shrink: 0;
    color: #000;
    font-size: 20px;
    line-height: 1;
    transition: color .2s ease, transform .2s ease;
}

.category-children__link:hover .category-children__link-chevron {
    color: var(--color-wine);
    transform: translateX(3px);
}

/* -------------------------------------------------------------------------- */
/* Content blocks — single centered column inside the container:              */
/*   heading (h2 or h3, centered) → image (full-width centered, rounded) →    */
/*   wysiwyg (H3 subtitles centered, paragraphs left-aligned) → CTA centered. */
/* Per-block background (cream / white) and optional decorative balance       */
/* illustrations anchored to the block corners.                               */
/* -------------------------------------------------------------------------- */

.content-block {
    position: relative;
    padding: 5rem 0;
    overflow: hidden;
}

.content-block--bg-cream  { background: rgba(250, 249, 247, 1); }
.content-block--bg-white  { background: #ffffff; }

.content-block__inner {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

/* Block heading typography (Blacker Text 900). Exact spec from the
   mockup. Targets ONLY .content-block__heading — the H3 elements
   inside .content-block__content (the "LA SUCCESSION LÉGALE"
   subtitles authored in the wysiwyg) keep their own treatment from
   the .content-block__content h3 rule below. */
.content-block__heading {
    font-family: var(--font-display-text);
    font-weight: 900;
    color: var(--color-ink);
    text-align: center;
    margin: 0 0 2rem;
}

.content-block__heading--h2 {
    font-size: 42px;
    line-height: 50px;
    letter-spacing: 0;
}

.content-block__heading--h3 {
    font-size: 26px;
    line-height: 33px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

/* In-title emphasis — wrap a word in a <span> to colorize it wine.
   Inherits font-family / font-size / font-weight / line-height /
   letter-spacing / text-transform from its parent heading, so a <span>
   in the 40px children heading reads 40px wine, and a <span> in a 42px
   block H2 reads 42px wine — automatically. */
.category-children__heading span,
.content-block__heading span {
    color: var(--color-wine);
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.content-block__media {
    display: block;
    margin: 0 auto 2.5rem;
    max-width: 960px;
}

.content-block__image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
    box-shadow: 0 20px 50px -28px rgba(14, 14, 16, .35);
}

/* Inherits .article-content typography (section 31): paragraphs, wine
   links, lists, blockquote. Centred subtitles, left-aligned paragraphs. */
.content-block__content.article-content {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
    color: var(--color-ink);
}

.content-block__content h3 {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-family: var(--font-body);
    font-size: clamp(14px, 1.4vw, 16px);
    font-weight: 700;
    color: var(--color-ink);
    margin: 2.25rem 0 .75rem;
}

.content-block__content p,
.content-block__content ul,
.content-block__content ol {
    text-align: left;
}

.content-block__cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.content-block__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .85rem 2.25rem;
    background: var(--color-cream-light, #FBF7F2);
    color: var(--color-wine);
    border: 1.5px solid var(--color-wine);
    border-radius: 9999px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 6px 18px -12px rgba(122, 31, 43, .35);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.content-block__cta:hover,
.content-block__cta:focus-visible {
    background: var(--color-wine);
    color: white;
    border-color: var(--color-wine);
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -14px rgba(122, 31, 43, .55);
    outline: none;
}

/* Decorative balance illustrations: two copies of the theme's
   balances.svg flanking the heading at the top of the block. Rendered
   ONLY on blocks whose heading_level is h2 (gated in PHP).
   Sit behind the content and never block interaction. */
.content-block__scale {
    position: absolute;
    width: 108px;
    height: 124px;
    top: 4rem;
    opacity: 1;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.content-block__scale--left  { left: 3rem; }
.content-block__scale--right { right: 3rem; transform: scaleX(-1); }

/* -------------------------------------------------------------------------- */
/* Responsive                                                                  */
/* -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .category-children__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .category-hero {
        padding: calc(var(--topbar-h) + var(--header-h) + 3rem) 0 2.5rem;
    }

    .category-hero--with-overlap {
        padding-bottom: 7rem;
    }

    .category-children__card {
        top: -4.5rem; /* mobile-tuned overlap (matches desktop technique) */
        margin-bottom: -4.5rem;
        padding: 1.5rem 1.5rem .75rem;
        border-radius: 18px;
    }

    .content-block {
        padding: 3rem 0;
    }

    .content-block__heading {
        margin-bottom: 1.5rem;
    }

    .content-block__media {
        margin-bottom: 1.75rem;
    }

    .content-block__image {
        border-radius: 18px;
    }

    /* Balances are sized exactly 108x124 in the design. On narrow
       viewports they'd crowd the heading, so we hide them instead of
       shrinking (the design has no reduced variant). */
    .content-block__scale { display: none; }
}

@media (max-width: 560px) {
    .category-children__list {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .category-hero__actions {
        gap: .75rem;
    }
}

/* -------------------------------------------------------------------------- */
/* FAQ on the Categorie Mere page — cream rgba(245,240,235,1) override.       */
/* Scoped to .category-faq so Home/About/Team/Blog Hub/practice FAQ stay      */
/* on their respective backgrounds.                                           */
/* -------------------------------------------------------------------------- */

.category-faq .faq-block {
    background: rgba(245, 240, 235, 1);
}

/* -------------------------------------------------------------------------- */
/* Testimonials on the Categorie Mere page — bordeaux override.               */
/* The canonical .testimonials is dark by default (--color-ink); here we      */
/* swap the background to bordeaux rgba(104,34,50,1). All card text is        */
/* already white / translucent white, so contrast stays correct without       */
/* further overrides. Scoped to .category-testimonials so other pages keep    */
/* the default dark testimonials.                                             */
/* -------------------------------------------------------------------------- */

.category-testimonials .testimonials {
    background: rgba(104, 34, 50, 1);
}

/* The heavy dark drop-shadow on the canonical card reads as a black halo on
   the bordeaux background — drop it here (border + gradient still define the
   card edge). */
.category-testimonials .testimonials__card {
    box-shadow: none;
}

/* -------------------------------------------------------------------------- */
/* Categorie Fille — sidebar + first content block (2-col band).              */
/* Only the OUTER layout is template-specific; the editorial typography of    */
/* the first block is reused from .content-block__heading / __media /         */
/* __content / __cta (no duplication).                                        */
/* -------------------------------------------------------------------------- */

.category-child__body {
    padding: 5rem 0;
    /* Clips any horizontal overflow from the sidebar's left full-bleed
       (see .category-child__sidebar bleed rule below) so it never leaks
       into a horizontal scrollbar. `clip` preserves the sticky context
       inside — unlike `hidden` which would create a new scroll container. */
    overflow-x: clip;
}

.category-child__body--bg-cream  { background: rgba(250, 249, 247, 1); }
.category-child__body--bg-white  { background: #ffffff; }

.category-child__body-inner {
    /* Fixed widths from the design: sidebar 463px (left-glued to the
       container's left edge), primary 755px. Space-between distributes
       any leftover width when the container (max 1280 - 2×24 padding =
       ~1232) is wider than 463+755=1218 — the extra ~14px sits between
       them as a subtle gap. Falls back to a proportional grid ≤1218px. */
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 3rem;
}

/* Sidebar — sticky on desktop, glued to the container's left edge.
   Fixed 463px width per design; box-shadow + right-only rounded corners
   so it reads as a floating card anchored to the page edge. */
.category-child__sidebar {
    position: sticky;
    top: calc(var(--topbar-h) + var(--header-h) + 1.5rem);
    align-self: flex-start;
    flex: 0 0 463px;
    width: 463px;
    background: white;
    padding: 2.75rem 2.5rem;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 3px 3px 25px 3px rgba(96, 96, 96, 0.15);
}

.category-child__sidebar-title {
    font-family: var(--font-display-text);
    font-size: 22px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-ink);
    margin: 0 0 1rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--color-wine);
}

.category-child__sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.category-child__sidebar-item {
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.category-child__sidebar-item:last-child { border-bottom: none; }

.category-child__sidebar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 0;
    color: var(--color-ink);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    transition: color .2s ease;
}

/* Article icon before each link (ico-articles.svg). Uses a ::before with
   background so no PHP change / no extra request per link duplicated. The
   existing gap on the flex parent handles spacing to the title; the
   chevron at the end (a real span) is untouched. */
.category-child__sidebar-link::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: url('assets/images/icons/ico-articles.svg') center / contain no-repeat;
}

.category-child__sidebar-link:hover {
    color: var(--color-wine);
}

.category-child__sidebar-link-title {
    flex: 1;
    min-width: 0;
}

.category-child__sidebar-link-chevron {
    flex-shrink: 0;
    color: rgba(0, 0, 0, .35);
    font-size: 20px;
    line-height: 1;
    transition: color .2s ease, transform .2s ease;
}

.category-child__sidebar-link:hover .category-child__sidebar-link-chevron {
    color: var(--color-wine);
    transform: translateX(3px);
}

.category-child__sidebar-item.is-current .category-child__sidebar-link,
.category-child__sidebar-item.is-current .category-child__sidebar-link-title,
.category-child__sidebar-item.is-current .category-child__sidebar-link-chevron {
    color: var(--color-wine);
}

/* Primary column — hosts the first content-block's editorial markup
   without the outer .content-block <section> wrapper, so it inherits the
   parent band's bg/padding rather than carrying its own. The reused
   .content-block__heading / __media / __content / __cta-wrap rules
   (section 34) provide the typography unchanged.

   Base: fills the remaining flex space (fluid). The ≥1218px media below
   caps the editorial column to 755px and centers it in that space. */
.category-child__primary {
    min-width: 0;
    flex: 1 1 auto;
    width: auto;
    max-width: 100%;
}

/* On the primary column, the heading sits flush left of the column to
   align with the rest of the editorial flow (the maquette shows the
   title aligned with the body, not centered relative to the column).
   Override the centered alignment from .content-block__heading. */
.category-child__primary .content-block__heading {
    text-align: left;
    margin-bottom: 1.5rem;
}

.category-child__primary .content-block__media {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
}

.category-child__primary .content-block__content.article-content {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* CTA wrap: inherits the base .content-block__cta-wrap centering (see
   section 34). No override here — the CTAs sit centered horizontally in
   the primary column even though the surrounding heading/body copy is
   left-aligned. */

/* In-column content blocks — neutralise the base .content-block styles
   (bg, padding, overflow) because those were meant for full-width
   <section> blocks. In the column, blocks just carry the editorial group;
   the visible band bg comes from .category-child__body--bg-{cream|white},
   and the vertical rhythm below handles spacing between blocks. */
.category-child__primary .content-block--in-column {
    padding: 0;
    background: transparent;
    overflow: visible;
}

.category-child__primary .content-block--in-column + .content-block--in-column {
    margin-top: 3rem;
}

/* Decorative bottom illustration — plain image on a full-bleed cream band.
   The container spans 100% (no .container ancestor), the cream bg extends
   edge-to-edge, and the image inside caps at 463px anchored left so it
   aligns with the sidebar's viewport-0 left edge. */
.category-child__deco {
    width: 100%;
    padding: 2rem 0 0;
    background: var(--color-paper);
}

.category-child__deco-img {
    display: block;
    max-width: 463px;
    width: 100%;
    height: auto;
    margin-left: 0;
}

@media (max-width: 900px) {
    .category-child__deco {
        padding: 1rem 0 0;
    }

    .category-child__primary .content-block--in-column + .content-block--in-column {
        margin-top: 2rem;
    }
}

/* Desktop ≥1218px: pin the sidebar's LEFT edge to the viewport edge while
   keeping its 463px total width AND normal 1.5rem inner padding.

   Why not `left`: on `position: sticky`, `left` is only a horizontal-stick
   threshold (it doesn't shift the box the way `left` on `position: relative`
   does). Without horizontal scrolling on this page, `left: -104px` was
   effectively a no-op → the sidebar stayed at its flow position (the
   container's inner-left edge, i.e. "the container edge").

   Use `transform: translateX(...)` instead: it's a purely visual shift,
   doesn't reserve/free layout space (primary column stays put), and
   coexists with sticky (sticky's own top: X threshold still fires).

   Formula: container_inner_left_in_viewport = (100vw - min(100vw, 1280)) / 2
   + container_padding. This is the exact distance from viewport-left to
   the sidebar's normal position. Negate it → the box lands at viewport 0. */
@media (min-width: 1218px) {
    .category-child__sidebar {
        transform: translateX(calc(-1 * ((100vw - min(100vw, var(--container-max))) / 2 + var(--container-padding))));
    }

    /* Drop the flex gap so the primary can fully consume the container's
       remaining inner width (1232 - 463 = 769px). With a 3rem gap this
       would collapse to 721px, unable to host the 755px editorial column. */
    .category-child__body-inner {
        gap: 0;
    }

    /* Primary fills the remaining flex space; a single 755px grid column
       centered inside carries the editorial content — the ~7px leftover
       on each side is what "centered in the space right of the sidebar,
       within the container" produces. */
    .category-child__primary {
        display: grid;
        grid-template-columns: minmax(0, 755px);
        justify-content: center;
    }
}

/* Responsive */
@media (max-width: 1218px) {
    /* Between the fixed-width breakpoint (1218 = 463 + 755) and the mobile
       stack (900), collapse to proportional widths so nothing overflows. */
    .category-child__sidebar {
        flex: 0 1 40%;
        width: auto;
    }

    .category-child__primary {
        flex: 1 1 auto;
        width: auto;
    }
}

@media (max-width: 900px) {
    .category-child__body {
        padding: 3rem 0;
    }

    /* Mobile order: surface the editorial content first (matches the
       mockup — the sibling list comes underneath the first block). */
    .category-child__body-inner {
        flex-direction: column;
        gap: 2.5rem;
    }

    .category-child__sidebar {
        position: static;
        order: 2;
        flex: 1 1 auto;
        width: 100%;
        border-radius: 20px; /* rounded on all corners once stacked */
    }

    .category-child__primary {
        order: 1;
        flex: 1 1 auto;
        width: 100%;
    }
}

/* =============================================================================
   35. LANDING PAGE (template-landing.php — personal injury / lead gen style)
   ============================================================================= */

/* -------------------------------------------------------------------------- */
/* Hero                                                                       */
/* -------------------------------------------------------------------------- */

/*
 * Landing hero — dark image band + form card. Uses the internal-hero
 * header-merge pattern (transparent header sits ON TOP; padding-top
 * compensates so no margin-top is ever needed).
 *
 * Height: the Figma reference frame is 1500x743 (≈49.5% ratio). We
 * approximate that ratio via min-height: 49.5vw, clamped so we never go
 * below 640px on narrow viewports (form card would collapse) and never
 * exceed 820px on ultra-wide viewports. Because it's a MIN, the hero
 * grows if the content (bullets + form) is taller — never clips. The
 * padding-top calc() is included inside min-height so the merged
 * topbar+header space is part of the reserved band, not extra on top.
 *
 * Scoped to .landing-hero only. Other internal heroes are not touched.
 */
.landing-hero {
    position: relative;
    background: var(--color-ink);
    color: white;
    padding: calc(var(--topbar-h) + var(--header-h) + 4rem) 0 4rem;
    /* When landed via an #anchor jump, keep the fixed header from covering
       the section top (paired with html { scroll-behavior: smooth }). */
    scroll-margin-top: calc(var(--topbar-h) + var(--header-h));
    min-height: clamp(640px, 49.5vw, 820px);
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* NO overflow/isolation: the form card is allowed to overflow below the
       hero (with a positive z-index) to sit on top of the logos band and the
       next section. Overlay and inner stack via tree order (no explicit
       z-index needed), so removing isolation doesn't break the overlay. */
}

.landing-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 14, 16, .55) 0%, rgba(14, 14, 16, .78) 100%);
    pointer-events: none;
}

.landing-hero__inner {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

.landing-hero__content {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.landing-hero__title {
    font-family: var(--font-display-text);
    font-size: clamp(36px, 5vw, 60px);
    line-height: 1.05;
    font-weight: 500;
    margin: 0;
    color: inherit;
}

.landing-hero__title strong,
.landing-hero__title b {
    font-weight: 700;
}

.landing-hero__title em,
.landing-hero__title i {
    font-style: italic;
}

.landing-hero__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem 1.5rem;
}

.landing-hero__bullet {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.35;
}

.landing-hero__bullet-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: white;
    flex-shrink: 0;
}

.landing-hero__bullet-icon svg {
    width: 14px;
    height: 14px;
}

.landing-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

.landing-hero__cta {
    /* .btn base already applied */
}

.landing-hero__cta--emergency {
    background: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, .55);
}

/* Base is transparent + white text + white 55% border on the dark
   landing hero. Hover inverts to white bg + wine text + white border
   for a strong CTA punch on the ink background. Border color stays
   white (opaque) to match the new white fill flush. */
.landing-hero__cta--emergency:hover {
    background: white;
    color: var(--color-wine);
    border-color: white;
}

.landing-hero__cta-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
}

.landing-hero__cta-icon svg {
    width: 100%;
    height: 100%;
}

/* The landing hero rating reuses the Home hero classes (.hero__rating /
   .hero__stars / .hero__rating-text — see section 8) so the two hero
   variants share the exact same rating treatment. No landing-specific
   rating rules here on purpose. */

/* On desktop the form card visually escapes the bottom of the hero: it
   pushes down past the logos band and slightly over the following section
   thanks to a negative bottom margin + a z-index higher than the logos
   marquee (z:5). The parent hero has no overflow/isolation so nothing
   clips the card, and no ancestor creates a stacking context — the card's
   z:20 participates in the root context and beats the logos band. */
.landing-hero__form-card {
    position: relative;
    z-index: 20;
    background: white;
    color: var(--color-ink);
    border-radius: 18px;
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .45);
    padding: 2rem;
    max-width: 480px;
    justify-self: end;
    width: 100%;
    margin-bottom: -140px;
}

/* Landing-hero form title — Blacker Text, bold, black, centered.
   Deliberately diverges from the shared Kayse form heading
   (.single-team__form-heading / .contact-form-card__heading, Inter 600
   wine) because the landing hero form card sits on white and a heavier
   black display title reads stronger there.
   --font-display-text (Blacker Text) picked over --font-display (Blacker
   Display) because at 34px the heading is still a medium size — Blacker
   Text is designed for that range. Blacker Text ships 700 as a real cut,
   so font-weight: 700 renders as a native Bold once the webfont is served
   (until then, the Cormorant Garamond fallback provides a real 700). */
.landing-hero__form-card .landing-hero__form-title {
    font-family: var(--font-display-text);
    font-weight: 700;
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: center;
    color: #000;
    margin: 0 0 1.5rem;
}

.landing-hero__form-render {
    /* Gravity Forms output — inherit .kayse-form styles */
}

.landing-hero__form-fallback {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-muted);
    margin: 0;
}

/* Thankyou message shown inside the hero form-card after a successful
   Gravity Forms submission (?confirmation=1 mode). Same card shell (bg
   white, dashed wine border via .landing-hero__form-card) — only the
   inner content swaps from the form to this text block. */
.landing-hero__thankyou {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-ink);
    text-align: left;
}

.landing-hero__thankyou > *:first-child { margin-top: 0; }
.landing-hero__thankyou > *:last-child  { margin-bottom: 0; }

.landing-hero__thankyou p {
    margin: 0 0 1rem;
}

.landing-hero__thankyou strong {
    color: var(--color-wine);
    font-weight: 600;
}

@media (max-width: 960px) {

    .landing-hero__inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .landing-hero__content {
        max-width: none;
    }

    .landing-hero__form-card {
        justify-self: stretch;
        max-width: none;
        order: 2;
        /* On stacked mobile layouts the form no longer floats below the
           hero — keep it inside the section flow. */
        margin-bottom: 0;
        z-index: auto;
    }

    .landing-hero__bullets {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {

    .landing-hero {
        /* Top/bottom padding inherits from the 768px block above
           (calc(topbar-h + header-h + 0rem) 0 3rem). We only override
           min-height here so the section doesn't reserve dead space
           on phones — the form card stacks under the content and
           pushes the section tall enough on its own. */
        min-height: 0;
    }

    .landing-hero__form-card {
        padding: 1.5rem;
    }

    .landing-hero__ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .landing-hero__ctas .btn {
        justify-content: center;
    }
}

/* -------------------------------------------------------------------------- */
/* Logos band under the landing hero — softer fondu with the hero bottom.     */
/* Scoped via .landing-hero + .logos-marquee so the home marquee is untouched.*/
/* The marquee already overlaps the hero by margin-top:-82px (section 9); we */
/* add a top-fade (transparent → dark) so the hero image visibly bleeds into */
/* the glass bar instead of hitting a hard edge.                              */
/* -------------------------------------------------------------------------- */
.landing-hero + .logos-marquee {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.25) 45%,
        rgba(0, 0, 0, 0.45) 100%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 55%);
            mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 55%);
}

/* Personal / Tailored blocks reuse the canonical .practice-block styles
   from section 33 — no additional CSS needed here. */

/* -------------------------------------------------------------------------- */
/* Ready block — dark bg image + form + optional balances                     */
/* -------------------------------------------------------------------------- */

.landing-ready {
    position: relative;
    background: var(--color-ink);
    color: white;
    /* Anchor-scroll offset — see .landing-hero above. */
    scroll-margin-top: calc(var(--topbar-h) + var(--header-h));
    /* Extra bottom padding extends the Ready block's background image +
       overlay far enough down to sit visually behind the (transparent)
       process bar that overlaps up into this section — same principle as
       the hero showing through the logos band. */
    padding: var(--section-padding) 0 calc(var(--section-padding) + 260px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    isolation: isolate;
}

.landing-ready__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 14, 16, .55) 0%, rgba(14, 14, 16, .82) 100%);
    z-index: -1;
}

/* Bottom balances — 2 copies flanking the bottom edge of the Ready block.
   The right copy is mirrored via scaleX(-1) so both balances face inward. */
.landing-ready__balance {
    position: absolute;
    bottom: 0;
    width: clamp(140px, 18vw, 260px);
    height: auto;
    display: block;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    opacity: .55;
}

.landing-ready__balance--left  { left: 0; }
.landing-ready__balance--right { right: 0; transform: scaleX(-1); }

.landing-ready__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1177px;
    margin: 0 auto;
    text-align: center;
}

/* Ready glass card — wraps heading + form intro + Gravity Form.
   Figma spec (angle -90deg is a Figma-layer rotation, NOT applied here):
     border-radius 20px
     background linear-gradient(339.44deg, rgba(255,255,255,.01) 1.85%, rgba(255,255,255,.1) 50.08%, rgba(255,255,255,.01) 98.31%)
     border 1.5px solid #ffffff
     box-shadow 3px 3px 61.4px 28px rgba(6, 1, 17, .6)
     backdrop-filter blur(30.7px)
   Padding is our own (Figma has no width/height constraint that should
   force the card — it flexes with content and viewport). */
.landing-ready__card {
    position: relative;
    border-radius: 20px;
    background: linear-gradient(339.44deg,
        rgba(255, 255, 255, 0.01) 1.85%,
        rgba(255, 255, 255, 0.10) 50.08%,
        rgba(255, 255, 255, 0.01) 98.31%);
    border: 1.5px solid rgba(255, 255, 255, 1);
    box-shadow: 3px 3px 61.4px 28px rgba(6, 1, 17, 0.6);
    -webkit-backdrop-filter: blur(30.7px);
            backdrop-filter: blur(30.7px);
    /* Roomier padding for the fields to breathe + host the decorative
       balances at the bottom corners. No overflow: hidden — the balances
       need to bleed below the card edge. */
    padding: 3.25rem 2.75rem;
    text-align: center;
}

/* Decorative balance-white.svg glyphs — anchored to the SECTION, not
   the card. Bottom sits at 260px from the section's padding-box bottom
   which is exactly where .landing-process visually starts (see the
   `.landing-ready + .landing-process { margin-top: -260px }` rule below).
   Horizontally aligned with the container's inner edges (max 1280,
   inner 1232), which matches the card's outer edges since the card
   fills the container. Native SVG is 220x253 -> aspect-ratio 220/253.
   pointer-events: none, z-index 2 (above section bg + backdrop, not
   blocking form). Section's own overflow: hidden is fine — balances
   sit inside the section box, no bleed. */
.landing-ready::before,
.landing-ready::after {
    content: "";
    position: absolute;
    bottom: 260px;
    width: 219px;
    aspect-ratio: 220 / 253;
    background: url('assets/images/balance-white.svg') center / contain no-repeat;
    pointer-events: none;
    z-index: 2;
}
/* Shift each balance outward by half its width (~110 = 219/2) so its
   CENTER lands on the card's outer edge (i.e. half of the icon sits
   inside the card area, half bleeds outside). On narrow viewports
   the outer half may extend past the viewport — clipped safely by
   .landing-ready { overflow: hidden }. */
.landing-ready::before {
    left: calc(max(1rem, calc((100vw - 1232px) / 2)) - 110px);
}
.landing-ready::after {
    right: calc(max(1rem, calc((100vw - 1232px) / 2)) - 110px);
    transform: scaleX(-1); /* mirror the right one so both face inward */
}

/* Toggle: hide the on-form balances when the ACF field
   `landing_ready_show_balances` is off (PHP adds --hide-balances). */
.landing-ready--hide-balances::before,
.landing-ready--hide-balances::after {
    display: none;
}

@media (max-width: 640px) {
    /* Hide the section balances on phones — they dominate the narrow
       viewport and clash with the stacked mobile layout. */
    .landing-ready::before,
    .landing-ready::after {
        display: none;
    }
}

.landing-ready__heading {
    font-family: var(--font-display-text);
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.15;
    font-weight: 500;
    margin: 0 0 1.25rem;
    color: white;
}

.landing-ready__form-intro {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
    margin: 0 0 2rem;
}

.landing-ready__form {
    text-align: left;
}

.landing-ready__form-fallback {
    font-family: var(--font-body);
    font-size: 14px;
    color: rgba(255, 255, 255, .75);
    margin: 0;
    text-align: center;
}

/* Thankyou message shown inside the ready block after a successful
   Gravity Forms submission (?confirmation=1 mode). Dark context —
   light text. "The KAYSE Team" (rendered as <strong>) is picked out
   in a warmer cream so the signature reads as an accent on the ink
   card. */
.landing-ready__thankyou {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .92);
    text-align: center;
}

.landing-ready__thankyou > *:first-child { margin-top: 0; }
.landing-ready__thankyou > *:last-child  { margin-bottom: 0; }

.landing-ready__thankyou p {
    margin: 0 0 1rem;
}

.landing-ready__thankyou strong {
    color: var(--color-cream);
    font-weight: 600;
}

/* =========================================================================
   Landing Ready form — DARK-CONTEXT design (scoped .kayse-form-wrap--dark).
   Distinct from .kayse-form-styled (light card): translucent white inputs,
   1px white border, white text, glass-dark gradient submit with white
   border. Orbital's native gfield--width-half/--width-full handles the
   Nom | Prénom | Email | Phone 2x2 layout + RGPD full-width. No Message
   field here, so no custom grid-template-areas is needed.
   ========================================================================= */

/* Labels sr-only (accessible) + required + counter hidden.
   Includes composite Name sub-labels. */
.kayse-form-wrap--dark .gform_wrapper .gfield_label,
.kayse-form-wrap--dark .gform_wrapper legend,
.kayse-form-wrap--dark .gform_wrapper .gform-field-label--type-sub,
.kayse-form-wrap--dark .gform_wrapper .gfield_label--type-sub {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.kayse-form-wrap--dark .gform_wrapper .gfield_required,
.kayse-form-wrap--dark .gform_wrapper .ginput_counter,
.kayse-form-wrap--dark .gform_wrapper .charleft {
    display: none !important;
}

/* Inputs — translucent white bg, 1px white border, white text, 40px pill,
   Inter 16px (matches the other forms + prevents iOS auto-zoom on focus).
   Chained through .gform_wrapper for specificity vs orbital. Composite Name
   subinputs included explicitly. */
.kayse-form-wrap--dark .gform_wrapper input[type="text"],
.kayse-form-wrap--dark .gform_wrapper input[type="email"],
.kayse-form-wrap--dark .gform_wrapper input[type="tel"],
.kayse-form-wrap--dark .gform_wrapper input[type="url"],
.kayse-form-wrap--dark .gform_wrapper input[type="number"],
.kayse-form-wrap--dark .gform_wrapper select,
.kayse-form-wrap--dark .gform_wrapper textarea,
.kayse-form-wrap--dark .ginput_container_name input,
.kayse-form-wrap--dark .name_first input,
.kayse-form-wrap--dark .name_last input {
    width: 100%;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 25.5px;
    letter-spacing: 0;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid #ffffff;
    border-radius: 40px;
    /* Fixed 54px height (border-box). Horizontal padding kept, vertical
       padding dropped — inputs vertically center their text natively when
       height is set with no vertical padding. */
    height: 54px;
    padding: 0 1.35rem;
    outline: none;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.kayse-form-wrap--dark .gform_wrapper input::placeholder,
.kayse-form-wrap--dark .gform_wrapper textarea::placeholder,
.kayse-form-wrap--dark .name_first input::placeholder,
.kayse-form-wrap--dark .name_last input::placeholder {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 25.5px;
    color: rgba(255, 255, 255, 0.7);
    opacity: 1;
}

.kayse-form-wrap--dark .gform_wrapper input:focus,
.kayse-form-wrap--dark .gform_wrapper select:focus,
.kayse-form-wrap--dark .gform_wrapper textarea:focus,
.kayse-form-wrap--dark .name_first input:focus,
.kayse-form-wrap--dark .name_last input:focus {
    background: rgba(255, 255, 255, 0.28);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

/* Composite Name field (if the form uses one) — 2 subinputs side-by-side. */
.kayse-form-wrap--dark .ginput_container_name {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}
.kayse-form-wrap--dark .ginput_container_name > .name_first,
.kayse-form-wrap--dark .ginput_container_name > .name_last,
.kayse-form-wrap--dark .ginput_container_name > .gform-grid-col {
    flex: 1 1 0;
    min-width: 0;
}

/* RGPD (HTML field) — light text on dark bg, per spec. */
.kayse-form-wrap--dark .gform_wrapper .gfield--type-html {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 23px;
    letter-spacing: -0.03em;
    color: rgba(255, 255, 255, 0.85);
}
.kayse-form-wrap--dark .gform_wrapper .gfield--type-html p { margin: 0 0 .35rem; }
.kayse-form-wrap--dark .gform_wrapper .gfield--type-html p:last-child { margin-bottom: 0; }
.kayse-form-wrap--dark .gform_wrapper .gfield--type-html a {
    color: #ffffff;
    text-decoration: underline;
}

/* Submit — glass-dark gradient (same as .btn--glass-dark) + white border,
   Inter 600/20/139% white centered, auto-width (fits its content), 40px
   pill. Center the button inside .gform_footer via text-align so the
   inline-block submit is horizontally centered in the form card.
   !important surgical to beat orbital's inline #gform_wrapper_X style
   rules — same pattern as .kayse-form-styled submit. */
/* Flex centering is more reliable than text-align on GF's default
   .gform_footer (the submit may be rendered as block by orbital, in
   which case text-align wouldn't center it). */
.kayse-form-wrap--dark .gform_wrapper .gform_footer {
    display: flex;
    justify-content: center;
    text-align: center;
}
.kayse-form-wrap--dark .gform_wrapper .gform_footer .btn,
.kayse-form-wrap--dark .gform_wrapper .gform_footer input[type="submit"],
.kayse-form-wrap--dark .gform_wrapper .gform_footer button[type="submit"],
.kayse-form-wrap--dark .gform_wrapper .gform_footer [id^="gform_submit_button_"],
.kayse-form-wrap--dark .gform_footer .btn--primary {
    width: auto !important;
    padding: 1rem 2rem !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 139% !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    color: #ffffff !important;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.006) 33.65%, rgba(255, 255, 255, 0.006) 69.71%, rgba(255, 255, 255, 0.15) 100%) !important;
    border: 1px solid #ffffff !important;
    border-radius: 40px !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    cursor: pointer !important;
    transition: background .2s ease, border-color .2s ease !important;
}
.kayse-form-wrap--dark .gform_wrapper .gform_footer .btn:hover,
.kayse-form-wrap--dark .gform_wrapper .gform_footer input[type="submit"]:hover,
.kayse-form-wrap--dark .gform_wrapper .gform_footer button[type="submit"]:hover,
.kayse-form-wrap--dark .gform_wrapper .gform_footer [id^="gform_submit_button_"]:hover,
.kayse-form-wrap--dark .gform_footer .btn--primary:hover {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.28) 100%) !important;
    border-color: rgba(255, 255, 255, 1) !important;
    color: #ffffff !important;
}
.kayse-form-wrap--dark .gform_wrapper .gform_footer .btn:focus-visible,
.kayse-form-wrap--dark .gform_wrapper .gform_footer [id^="gform_submit_button_"]:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 3px !important;
}

/* Validation on dark — soft red kept readable. */
.kayse-form-wrap--dark .gfield_validation_message,
.kayse-form-wrap--dark .validation_message {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    color: #ffb4b4;
    margin-top: .35rem;
    padding-left: 1rem;
}
.kayse-form-wrap--dark .gfield_error input {
    box-shadow: 0 0 0 2px rgba(255, 180, 180, .55) !important;
}
.kayse-form-wrap--dark .gform_validation_errors {
    font-family: var(--font-body);
    font-size: 13px;
    color: #ffb4b4;
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    background: rgba(255, 180, 180, .08);
    border-radius: 12px;
}
.kayse-form-wrap--dark .gform_confirmation_message {
    padding: 1.25rem 1.5rem;
    background: rgba(255, 255, 255, .08);
    border-radius: 16px;
    color: #ffffff;
    text-align: center;
    font-family: var(--font-body);
}

@media (max-width: 720px) {

    .landing-ready {
        padding: 3rem 0;
    }

    .landing-ready__scales {
        display: none;
    }
}

/* -------------------------------------------------------------------------- */
/* Process bar — dark band, 4 steps.                                          */
/* Base (mobile OR standalone) keeps a solid dark background so the section  */
/* stays readable when it's NOT overlapping the Ready block.                 */
/* When it directly follows the Ready block on desktop, the process becomes */
/* FULLY TRANSPARENT and rides up 260px into Ready's extended padding-bottom */
/* — the Ready background image + dark overlay show through, matching how   */
/* the logos band lets the hero image show through above it.                */
/* z-index keeps the process above Ready's isolated stacking context.       */
/* -------------------------------------------------------------------------- */

.landing-process {
    position: relative;
    /* Was solid #16161a — replaced with a translucent white + backdrop
       blur so the section reads as frosted glass everywhere it lands.
       The .landing-ready + .landing-process overlap variant below still
       overrides bg to transparent (Ready's image shows through). */
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(24.3px);
    backdrop-filter: blur(24.3px);
    color: white;
    padding: 3rem 0;
    border-top: 1px solid rgba(255, 255, 255, 1);
}

.landing-ready + .landing-process {
    margin-top: -260px;
    z-index: 3;
    padding-top: 3rem;
    background: transparent;
    -webkit-backdrop-filter: blur(24.3px);
            backdrop-filter: blur(24.3px);
}

.landing-process__inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.5rem;
    align-items: start;
}

.landing-process__step {
    position: relative;
    padding: 0 1rem;
    text-align: left;
    overflow: visible;
}

/* Arrow separator between adjacent process steps — replaces the old
   1px vertical divider. The SVG lives at
   assets/images/separators/fleche-step.svg (repo convention — the brief's
   assets/img/... path was corrected). ~25×77 px, opacity .3 per Figma.
   Anchored to the RIGHT edge of each step and centered in the grid gap
   via a translateX(50%) so the arrow sits in the middle of the 2.5rem
   gap between two step columns. Hidden on the last step, and on the
   mobile 2-col grid where a horizontal arrow no longer makes sense. */
.landing-process__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1.25rem; /* half of grid gap (2.5rem) */
    transform: translate(50%, -50%);
    width: 25px;
    height: 77px;
    background-image: url('assets/images/separators/fleche-step.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .3;
    pointer-events: none;
}

.landing-process__icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    margin-bottom: 1rem;
}

.landing-process__icon-img {
    max-width: 32px;
    max-height: 32px;
    width: auto;
    height: auto;
}

.landing-process__title {
    font-family: var(--font-display-text);
    font-weight: 500;
    font-size: 25px;
    line-height: 21px;
    letter-spacing: -0.01em;
    text-align: left;
    margin: 0 0 .5rem;
    color: white;
}

.landing-process__desc {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .75);
    margin: 0;
}

@media (max-width: 900px) {

    .landing-process__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem 1.5rem;
    }

    /* Mobile: 2-col (then 1-col) grid — a horizontal arrow between step 2
       and step 3 would point off the row into empty space, so hide arrows
       entirely on mobile layouts. Chosen over rotating them vertically
       (added visual noise for a decorative element). */
    .landing-process__step:not(:last-child)::after {
        display: none;
    }

    /* Below the desktop overlap layout, drop the negative margin/padding
       trick so the process bar sits cleanly under Ready. Also drop the
       extra bottom padding on Ready so nothing looks empty. */
    .landing-ready + .landing-process {
        margin-top: 0;
        padding-top: 3rem;
        background: #16161a;
    }

    .landing-ready {
        padding: 3rem 0;
    }
}

@media (max-width: 520px) {

    .landing-process__inner {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

/* -------------------------------------------------------------------------- */
/* Resolution — light band with a centered heading (allows .t-wine span from  */
/* section 3), optional balances flanking the heading (reuses                */
/* .content-block__scale from section 33) and a 3-card grid.                */
/* -------------------------------------------------------------------------- */

.landing-resolution {
    position: relative;
    background: rgba(247, 242, 238, 1);
    color: var(--color-ink);
    padding: var(--section-padding) 0;
    overflow: hidden;
}

.landing-resolution__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.landing-resolution__heading {
    font-family: var(--font-display-text);
    font-size: clamp(30px, 3.8vw, 46px);
    line-height: 1.1;
    font-weight: 700;
    margin: 0 auto 1.25rem;
    max-width: 900px;
    color: var(--color-ink);
}

.landing-resolution__subheading {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
    color: var(--color-muted);
    margin: 0 auto 1.75rem;
    max-width: 720px;
    font-style: italic;
}

/* Pull-quote citation — centered under the subheading, above the cards.
   The mockup shows a thin vertical wine accent on the left; we do this
   with a border-left on a max-width block, keeping the text centered
   inside. Emphasis (bold/italic) comes from the WYSIWYG content saved by
   the editor (rendered via wp_kses_post in the template). */
/* Same treatment as the .values-grid__quote on the homepage: a wine
   left-border + a decorative `assets/images/quotes.svg` glyph rendered
   as a ::before, and a padding-left that reserves the room for it.
   .landing-resolution's cream background reads the same as .values-grid's
   context, so no colour adjustment is needed for the glyph. Text is
   left-aligned here (matching the reference — was center before). */
.landing-resolution__quote {
    position: relative;
    max-width: 780px;
    margin: 0 auto 3rem;
    padding-left: calc(1.25rem + 28px + .75rem);
    padding-top: .5rem;
    padding-right: 1.25rem;
    padding-bottom: .5rem;
    border-left: 3px solid var(--color-wine);
    text-align: left;
    color: var(--color-ink);
}

.landing-resolution__quote::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1.25rem;
    width: 28px;
    height: 28px;
    background: url('assets/images/quotes.svg') no-repeat left top / contain;
}

.landing-resolution__quote p {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.54;
    letter-spacing: 0.01em;
    color: var(--color-ink);
    margin: 0;
}

.landing-resolution__quote p + p {
    margin-top: .75rem;
}

.landing-resolution__quote strong,
.landing-resolution__quote b {
    font-weight: 700;
    font-style: normal;
    color: var(--color-wine);
}

.landing-resolution__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    text-align: left;
    margin-bottom: 2.5rem;
}

.landing-resolution__card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 2rem 1.75rem;
    box-shadow: 3px 3px 25px 3px rgba(4, 2, 17, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    text-align: center;
}

.landing-resolution__card-icon {
    /* Bare wrapper — no cream/white badge behind the icon anymore.
       The 56x56 slot + flex-centering are kept so the pictogram stays
       aligned with the previous position (icon sits centered in a
       transparent 56x56 box). */
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-wine);
    margin: 0 auto .5rem;
}

.landing-resolution__card-icon-img {
    max-width: 32px;
    max-height: 32px;
    width: auto;
    height: auto;
}

.landing-resolution__card-title {
    font-family: var(--font-body);
    font-size: 26px;
    font-weight: 600;
    line-height: 32px;
    text-transform: uppercase;
    color: #000;
    margin: 0;
}

.landing-resolution__card-desc {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-ink-light);
    margin: 0;
}

.landing-resolution__cta-wrap {
    display: flex;
    justify-content: center;
}

/* Outline-wine pill CTA — same visual as .practice-block__cta so all
   editorial CTAs on the site read the same. */
.landing-resolution__cta,
.landing-steps__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-cream-light, #FBF7F2);
    color: var(--color-wine);
    border: 1.5px solid var(--color-wine);
    border-radius: 9999px;
    padding: .85rem 2.25rem;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 6px 18px -12px rgba(122, 31, 43, .35);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.landing-resolution__cta:hover,
.landing-resolution__cta:focus-visible,
.landing-steps__cta:hover,
.landing-steps__cta:focus-visible {
    background: var(--color-wine);
    color: white;
    border-color: var(--color-wine);
    box-shadow: 0 12px 24px -14px rgba(122, 31, 43, .55);
    transform: translateY(-1px);
    outline: none;
}

/* Balances SVG position tune — shared .content-block__scale sets width/
   height/opacity; here we just anchor them relative to the resolution
   section's top. */
.landing-resolution .content-block__scale {
    top: 3rem;
}

@media (max-width: 900px) {

    .landing-resolution {
        padding: 3rem 0;
    }

    .landing-resolution__cards {
        grid-template-columns: 1fr;
    }

    /* Balances hidden under 900px — same behaviour as section 34
       (.content-block__scale { display: none }) already handles it, but
       we restate here for clarity in case the shared rule changes. */
    .landing-resolution .content-block__scale {
        display: none;
    }
}

/* -------------------------------------------------------------------------- */
/* Five Steps — horizontal timeline (icon + label per step).                  */
/* A dashed horizontal line runs behind the icons; on mobile the timeline    */
/* stacks vertically with the dashed line becoming vertical between icons.  */
/* -------------------------------------------------------------------------- */

.landing-steps {
    background: var(--color-paper);
    color: var(--color-ink);
    padding: var(--section-padding) 0;
}

.landing-steps__inner {
    text-align: center;
}

.landing-steps__heading {
    font-family: var(--font-display-text);
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.15;
    /* Blacker Text weights available: 300/500/700/900 (no 600) — use 700 for
       a real Bold cut instead of synthesised faux-bold. */
    font-weight: 700;
    margin: 0 auto 3rem;
    max-width: 900px;
    color: var(--color-ink);
}

.landing-steps__timeline {
    position: relative;
    list-style: none;
    margin: 0 auto 2.5rem;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    max-width: 1080px;
}

/* Dashed connector — sits at icon-center Y (icon height 72 + a bit), spans
   from the center of the first item to the center of the last item so the
   line never extends past the timeline visually. */
.landing-steps__timeline::before {
    content: "";
    position: absolute;
    top: 36px;
    left: 10%;
    right: 10%;
    height: 0;
    border-top: 2px dashed rgba(122, 31, 43, .35);
    z-index: 0;
}

.landing-steps__item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.landing-steps__icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid var(--color-wine);
    color: var(--color-wine);
    box-shadow: 0 8px 24px -12px rgba(122, 31, 43, .35);
}

.landing-steps__icon-img {
    max-width: 36px;
    max-height: 36px;
    width: auto;
    height: auto;
}

.landing-steps__label {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: bold;
    color: var(--color-ink);
    margin: 0;
    max-width: 160px;
    text-transform: uppercase;
}

.landing-steps__cta-wrap {
    display: flex;
    justify-content: center;
}

@media (max-width: 900px) {

    .landing-steps {
        padding: 3rem 0;
    }

    .landing-steps__timeline {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 320px;
    }

    /* Vertical dashed connector — spans from the top of the first icon
       to the bottom of the last icon, centered on the icon column. */
    .landing-steps__timeline::before {
        top: 36px;
        bottom: 36px;
        left: 50%;
        right: auto;
        height: auto;
        width: 0;
        border-top: 0;
        border-left: 2px dashed rgba(122, 31, 43, .35);
    }
}

/* -------------------------------------------------------------------------- */
/* Testimonials (landing-only) — full-bleed bordeaux band with a single row  */
/* of glass cards that loop horizontally in marquee style + prev/next arrows.*/
/* JS in assets/js/landing-testimonials.js drives the loop; CSS provides the */
/* layout, colors and the "cards bleed off both sides" viewport.             */
/* -------------------------------------------------------------------------- */

.landing-testimonials {
    background: rgba(104, 34, 50, 1);
    color: white;
    padding: var(--section-padding) 0;
    overflow: hidden;
    position: relative;
}

.landing-testimonials__inner {
    /* header container — .container provides the max-width */
}

.landing-testimonials__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 3rem;
}

.landing-testimonials__head-text {
    max-width: 640px;
}

.landing-testimonials__heading {
    font-family: var(--font-display-text);
    font-size: clamp(30px, 3.8vw, 46px);
    line-height: 1.1;
    font-weight: 500;
    margin: 0 0 .75rem;
    color: white;
}

.landing-testimonials__heading .t-wine {
    color: var(--color-cream);
}

.landing-testimonials__intro {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    margin: 0;
}

.landing-testimonials__nav {
    display: flex;
    gap: .75rem;
    flex-shrink: 0;
}

.landing-testimonials__nav-btn {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .12);
    color: white;
    border: 1.5px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
}

.landing-testimonials__nav-btn:hover,
.landing-testimonials__nav-btn:focus-visible {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .8);
    outline: none;
    transform: translateY(-1px);
}

.landing-testimonials__nav-btn svg {
    width: 20px;
    height: 20px;
}

/*
 * Viewport = full-bleed. It sits OUTSIDE .container so cards can bleed to
 * the physical edges of the browser. The section itself has overflow:hidden
 * so nothing causes horizontal page scroll. The track uses transform:
 * translate3d(-Xpx, 0, 0), driven by the JS in landing-testimonials.js.
 *
 * A horizontal mask-image gradient fades the leftmost/rightmost cards into
 * the bordeaux background — same visual softening the Figma design shows.
 * The mask is applied on the viewport so the arrows (rendered in the
 * .container header above) are not affected.
 */
.landing-testimonials__viewport {
    width: 100%;
    padding: 30px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0%,
        #000 2%,
        #000 92%,
        transparent 100%);
            mask-image: linear-gradient(90deg,
        transparent 0%,
        #000 2%,
        #000 92%,
        transparent 100%);
}

.landing-testimonials__track {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0 1.5rem;
    gap: 1.5rem;
    will-change: transform;
}

/*
 * Card — exact Figma spec:
 *   width  475.3px  ×  height 344.02px
 *   background linear-gradient(339.44deg, transparent 1.85%, rgba(255,255,255,.09) 50.08%, transparent 98.31%)
 *   border 1.5px solid #ffffff
 *   box-shadow 3px 3px 25px 15px rgba(38, 5, 12, .4)
 *   backdrop-filter blur(57.2px)
 *   border-radius 20px
 */
.landing-testimonials__card {
    flex: 0 0 475.3px;
    width: 475.3px;
    max-width: 475.3px;
    height: 344.02px;
    background: linear-gradient(339.44deg,
        rgba(255, 255, 255, 0) 1.85%,
        rgba(255, 255, 255, 0.09) 50.08%,
        rgba(255, 255, 255, 0) 98.31%);
    border: 1.5px solid rgba(255, 255, 255, 1);
    border-radius: 20px;
    box-shadow: 3px 3px 25px 15px rgba(38, 5, 12, 0.4);
    -webkit-backdrop-filter: blur(57.2px);
            backdrop-filter: blur(57.2px);
    padding: 2rem 2.25rem;
    display: flex;
    flex-direction: column;
    gap: .875rem;
    color: white;
}

.landing-testimonials__rating {
    color: #F5B700;
    letter-spacing: 2px;
    font-size: 18px;
    line-height: 1;
}

.landing-testimonials__card-title {
    font-family: var(--font-display-text);
    font-size: 22px;
    line-height: 1.2;
    font-weight: 500;
    margin: 0;
    color: white;
}

.landing-testimonials__card-text {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .85);
    margin: 0;
    flex: 1 1 auto;
}

.landing-testimonials__card-author {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin-top: .5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.landing-testimonials__card-name {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: white;
}

.landing-testimonials__card-role {
    font-family: var(--font-body);
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
}

.landing-testimonials__cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

/* Landing testimonials CTA — override the shared .btn--outline.btn--glass
   to a solid white / wine outline card in this bordeaux band, then apply
   the shared inverted hover explicitly. Specificity notes:
   - base .landing-testimonials__cta-wrap .btn--outline.btn--glass = 3
     classes = (0,3,0). Beats the two mod bases (.btn--outline, .btn--glass)
     at (0,1,0) each and the double-class hover fallback (0,3,0 with the
     :hover pseudo-class) via source order (declared later).
   - the global .btn--outline.btn--glass:hover (0,3,0) has the SAME spec
     as this base rule, so it does NOT override the base in the hover
     state — cascade order picks the base and the CTA would stay white.
     Re-declare the hover in the scoped context so the inversion actually
     fires here. Border stays 1px in both states => no anti-shift work
     needed. Glass side-effects (backdrop-filter + stacked box-shadow)
     are cleared: the solid white fill makes them pointless. */
.landing-testimonials__cta-wrap .btn--outline.btn--glass {
    background: #fff;
    color: var(--color-wine);
    border: 1px solid var(--color-wine);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

.landing-testimonials__cta-wrap .btn--outline.btn--glass:hover {
    background: var(--color-wine-dark);
    color: #fff;
    border-color: var(--color-wine-dark);
    transform: translateY(-2px);
}

/* Marquee paused via JS: adds `is-paused` on the track (hover / focus /
   arrow interaction). The JS respects prefers-reduced-motion (no auto
   scroll at all in that case). */

@media (prefers-reduced-motion: reduce) {

    .landing-testimonials__track {
        will-change: auto;
    }
}

@media (max-width: 900px) {

    .landing-testimonials {
        padding: 3rem 0;
    }

    .landing-testimonials__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .landing-testimonials__nav {
        align-self: flex-end;
    }
}

/* Mobile: card width = viewport border-width minus 2*gap (=3rem). The JS
   centers this card at the border-box middle, and because step = card +
   gap = W_border - gap, the neighbouring cards land exactly at the visible
   left / right edges (fully clipped by overflow: hidden). Result: one
   centered card, no visible neighbours. Height goes auto because the
   fixed 344.02px would look forced on tall phone screens; the gradient /
   border / shadow / blur / radius all stay identical. */
@media (max-width: 700px) {

    .landing-testimonials__card {
        flex: 0 0 calc(100vw - 3rem);
        width: calc(100vw - 3rem);
        max-width: calc(100vw - 3rem);
        height: auto;
        min-height: 300px;
        padding: 1.5rem;
    }
}

@media (max-width: 560px) {

    .landing-testimonials__nav-btn {
        width: 42px;
        height: 42px;
    }
}

/* =============================================================================
   36. CONTACT PAGE (template-contact.php)
   =============================================================================
   Layout:
   - 2-column body (LEFT: infos + transports cards | RIGHT: wine-dotted form
     card). DOM order = form card FIRST so mobile stacks form on top with no
     JS/order tricks; CSS grid places it on the RIGHT on desktop (>=1024px).
   - The infos grid inside the "Where to find us" card is 2 columns on
     desktop (matches the desktop mockup: Phone / Mail on row 1, Opening
     Hours / Adresse on row 2) and collapses to 1 column on mobile.
   - Transports uses per-group aligned rows: group label on the left,
     stacked lines with a coloured pill icon on the right.
   - Google Maps iframe: full-bleed section with a responsive 16/9 ratio
     capped by max-height so it never dominates the fold on wide screens.
   ============================================================================= */

.contact-body {
    background: var(--color-paper);
    padding: 3.5rem 0 4.5rem;
}

.contact-body__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    align-items: start;
}

/* Cards shared style (infos + transports). */
.contact-card {
    background: #ffffff;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.75rem 1.75rem 2rem;
}

.contact-card + .contact-card {
    margin-top: 1.5rem;
}

.contact-card__heading {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-display-text);
    font-size: 18px;
    /* Blacker Text has no SemiBold (600) — remap up to 700 (Bold) so the
       browser uses the real Bold cut instead of synthesising a fake bold. */
    font-weight: 700;
    color: var(--color-wine);
    margin: 0 0 1.25rem;
    letter-spacing: -0.01em;
}

.contact-card__heading--transports {
    margin-bottom: 1rem;
}

.contact-card__heading-icon {
    display: inline-flex;
    color: var(--color-wine);
}

/* Infos grid inside the "Where to find us" card. */
.contact-infos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem 2rem;
}

.contact-info__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
    color: var(--color-wine);
}

.contact-info__icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    color: var(--color-wine);
}

.contact-info__icon img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.contact-info__label {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-wine);
}

.contact-info__value {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-ink);
    letter-spacing: -0.01em;
    padding-left: 26px; /* aligns value under the label text (past the icon column) */
}

/* Transports. */
.transports {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.transports__group {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: start;
    gap: 1rem;
}

.transports__group-label {
    margin: .35rem 0 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-wine); /* #7A1F2B */
    letter-spacing: -0.01em;
}

.transports__lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.transports__line {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-ink);
    letter-spacing: -0.01em;
}

.transports__pill {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.transports__pill img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* Contact-specific tweaks — the shared bg/border/radius/padding/shadow
   live in the mutualised selector list up near .single-team__form-card. */
.contact-form-card {
    text-align: left;
}

.contact-form-card__heading {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 25px;
    line-height: 30px;
    letter-spacing: -0.02em;
    text-align: center;
    color: rgba(127, 36, 57, 1);
    margin: 0 0 1.5rem;
}

.contact-form-card__form {
    text-align: left;
}

.contact-form-card__fallback {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-muted);
    margin: 0;
    text-align: center;
}

.contact-form-card__rgpd {
    margin: 1.25rem 0 0;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.55;
    color: var(--color-muted);
    letter-spacing: -0.01em;
    text-align: center;
}

/* Google Maps embed. */
.contact-map {
    /* Paper bg + padding reveals a subtle warm frame around the map
       (Figma "leger cadre beige discret"). Switch background to
       var(--color-cream) if a more visible beige is wanted. */
    background: var(--color-paper);
    padding: 1.5rem;
}

.contact-map__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    max-height: 520px;
    overflow: hidden;
}

/* Desaturate + slightly brighten + soften the map into a light monochrome
   look (Google Maps "light" style, per the maquette). filter on the iframe
   works — the whole iframe is treated as a rasterized surface by the CSS
   compositor and the filter applies cleanly.
   Tuning knobs if the final rendering needs adjustment:
     - stronger light look:    filter: grayscale(1) brightness(1.1) contrast(.9);
     - keep a hint of color:   filter: grayscale(.85) brightness(1.05);
     - warm sepia touch:       add sepia(.15) at the end. */
.contact-map__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    filter: grayscale(1) brightness(1.05) contrast(.95);
}

/* Centered pin marker (Vector.png = bordeaux drop pin). Sized at 48px
   wide, aspect preserved via height: auto. pointer-events: none keeps
   the underlying iframe fully interactive (drag / zoom / POI click). */
.contact-map__pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: auto;
    pointer-events: none;
    z-index: 1;
}

/* Desktop layout (>=1024px): 2 columns, form on the RIGHT.
   Form column locked at 570px per design (same as .single-team__form-card). */
@media (min-width: 1024px) {
    .contact-body {
        padding: 4.5rem 0 6rem;
    }
    .contact-body__inner {
        grid-template-columns: 1fr 570px;
        gap: 2.5rem;
    }
    /* DOM order is form-first, content-second — swap with `order` so the
       form card sits on the right visually. */
    .contact-form-card { order: 2; }
    .contact-body__content { order: 1; }

    /* Infos grid becomes 2 columns on desktop, matching the mockup
       (Phone / Mail row, then Opening Hours / Adresse row). */
    .contact-infos {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem 2rem;
    }

    /* Wider padding on the form card so the fields breathe (kept, but the
       heading font-size cap is now the shared 25px from the base rule). */
    .contact-form-card {
        padding: 2.5rem 2.25rem 2.75rem;
    }
}

/* Wider viewport tweak. */
@media (min-width: 1200px) {
    .contact-card {
        padding: 2rem 2rem 2.25rem;
    }
}

/* Mobile refinements — hero + form card padding tighter, transports
   group label goes above the lines. */
@media (max-width: 640px) {
    .contact-body {
        padding: 2.5rem 0 3rem;
    }
    .contact-body__inner {
        gap: 1.25rem;
    }
    .contact-card {
        padding: 1.5rem 1.25rem 1.75rem;
    }
    .contact-form-card {
        padding: 1.75rem 1.25rem 2rem;
    }
    /* heading font-size stays at the shared 25px from the base rule */
    .transports__group {
        /* Stack label above the lines on mobile. */
        grid-template-columns: 1fr;
        gap: .5rem;
    }
    .contact-info__value {
        padding-left: 0;
    }
    .contact-map__frame {
        aspect-ratio: 4 / 3;
        max-height: 380px;
    }
}

/* =============================================================================
   37. UTILITIES
   ============================================================================= */

/**
 * .u-glass — reusable "frosted glass" surface.
 *
 * Provides the appearance only (border + translucent background +
 * backdrop-filter + white text) — NO padding, size, or radius, so the
 * class can be dropped onto any badge / button / card and the host rule
 * controls sizing.
 *
 * The background uses a very subtle white veil (10% alpha) so the
 * backdrop-filter blur is visible while the badge stays slightly brighter
 * than the raw content behind it. Text is white for legibility on the
 * typical dark/mid-tone backdrops this effect targets (photos, dark
 * sections).
 */
.u-glass {
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

/**
 * <span class="or"> — inline gold accent for one word inside a field
 * escaped via kayse_inline_kses(). Colour only, so the accented word
 * inherits the surrounding typography (size/weight/family) unchanged.
 *
 * Element-qualified selector (span.or) so the utility can only ever
 * colour a <span>, never a stray element that happens to carry class="or".
 *
 * Specificity 011 — same as .testimonials__intro span (also 011) and
 * h2 .t-wine (011). Declared LATER in the cascade than either, so a
 * <span class="or"> nested inside either context correctly picks up the
 * gold colour, while bare spans and .t-wine spans keep their own colour.
 */
span.or {
    color: rgba(235, 194, 142, 1);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    position: absolute;
    top: 0;
    left: 0;
    padding: .75rem 1rem;
    background: var(--color-wine);
    color: white;
    z-index: 9999;
}

/* =============================================================================
   MOBILE OVERRIDES (max-width: 768px)
   Cross-page tweaks grouped at the end of the stylesheet so they win over
   any earlier same-specificity rule via the natural cascade.
   ============================================================================= */

@media (max-width: 768px) {

    /* Homepage hero — tighten the top padding to just clear the fixed
       topbar + header, and drop the very tall 9rem bottom padding to a
       compact 3rem. Scoped naturally by class (.hero__inner is used only
       on the Home hero — landing / practice / single-team have their
       own hero classes). */
    .hero__inner {
        padding: calc(var(--topbar-h) + var(--header-h) + 0rem) 0 3rem;
    }

    /* Non-home hero (Practice Area, Category, and any other page reusing
       .practice-hero) — same treatment: no extra top padding beyond the
       header clearance, 3rem below. This is stricter than the existing
       max-width: 900px override (which uses +3rem), so from 768px down
       we get a tighter mobile hero. */
    .practice-hero {
        padding: calc(var(--topbar-h) + var(--header-h) + 0rem) 0 3rem;
    }

    /* Process steps + info-bar (light variant) — center the GROUP as a
       block within its section, but keep the individual items left-
       aligned INSIDE the group so their icons form a clean vertical
       column instead of jittering horizontally with each row's text
       length. Technique: width: fit-content sizes the list to its
       widest item, margin-inline: auto centers it. max-width: 100%
       is a safety net if any item has very long text on narrow
       viewports (never forces a horizontal scroll). No text-align:
       center anywhere — items keep their left-aligned defaults. */
    .process-steps__grid,
    .info-bar--light .info-bar__list {
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Center every anchor-based CTA in mobile. `.btn` base is
       display: inline-flex; switching to flex + margin auto turns the
       button into a block that shrinks to its content and centers
       horizontally in its parent. Restricted to `a.btn` on purpose so
       form <button class="btn"> submit CTAs keep their inline behavior
       (Gravity Forms handles their layout).
       Exclusions:
         .site-header__cta — hidden on mobile by the header rule
           (display: none at max-width: 1024px). Without :not() the
           higher a.btn specificity would flip it back to display: flex
           and it would overlap the centered logo. It stays hidden on
           mobile; users get it via the burger's mobile-nav drawer. */
    a.btn:not(.site-header__cta) {
        display: flex;
        margin-left: auto;
        margin-right: auto;
    }

    /* Article hero (single post) — same tightened mobile pattern as
       .hero__inner / .practice-hero above. Existing 899px override
       (+3rem) stays for the tablet band 769-899; here we drop the
       extra top padding entirely on <= 768px so the H1 sits right
       under the fixed header. */
    .single-article__hero {
        padding: calc(var(--topbar-h) + var(--header-h) + 0rem) 0 3rem;
    }

    /* Landing hero — same treatment. The existing 560px override
       (which used to set padding: ...+2.5rem 0 3rem) has its padding
       line removed in the same commit so smaller phones inherit this
       rule and don't grow the padding back up. The 560px block keeps
       its other tweaks (min-height: 0, form-card padding, ctas
       flex-column). */
    .landing-hero {
        padding: calc(var(--topbar-h) + var(--header-h) + 0rem) 0 3rem;
    }

    /* Contact hero — uses the shared .page-hero section template,
       also used by template-about.php. Both pages get the compact
       mobile top padding here. Padding moved from the per-variant
       (.page-hero--small/medium/large) to the base .page-hero;
       the variants keep their per-variant min-heights below. */
    .page-hero {
        padding: calc(var(--topbar-h) + var(--header-h) + 0rem) 0 3rem;
    }