/* ==========================================================================
   SSP dynamic header  ·  "SSP White Room" direction
   White bar, bare logo, near-black ink, hairline rules, square corners, one
   bronze accent. Custom properties are prefixed --sspx- so nothing collides
   with the token sets the SSP pages declare in their own :root blocks.
   ========================================================================== */

.sspx-scope.sspx-scope {
    --sspx-white: #FFFFFF;
    /* Four light grounds rather than one white, each a step warmer and deeper,
       so a surface can sit on another surface without a border doing the work. */
    --sspx-paper: #FAF9F6;
    --sspx-linen: #F3F0E9;
    --sspx-stone: #E9E5DC;
    --sspx-wash: #F7F1E6;
    --sspx-shell: #FAF9F6;
    --sspx-ink: #121316;
    --sspx-ink-mid: #45474D;
    --sspx-ink-soft: #8B8D94;
    --sspx-rule: #E7E6E2;
    --sspx-rule-strong: #D6D4CE;
    --sspx-bronze: #9C7A45;
    --sspx-bronze-wash: rgba(156, 122, 69, 0.10);

    --sspx-r: 2px;
    --sspx-r-lg: 3px;

    /* One shadow recipe, neutral and low, only under a sheet that floats. */
    --sspx-lift: 0 24px 48px -28px rgba(18, 19, 22, 0.28), 0 2px 6px rgba(18, 19, 22, 0.04);

    --sspx-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --sspx-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --sspx-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --sspx-max: 1560px;
    --sspx-h: clamp(88px, 9vh, 106px);
    --sspx-h-scrolled: clamp(72px, 7.4vh, 86px);
    --sspx-h-compact: clamp(64px, 8vh, 74px);
    --sspx-pad: clamp(16px, 3.6vw, 56px);
    --sspx-pad-compact: clamp(14px, 4vw, 22px);

    --sspx-t-fast: 0.16s cubic-bezier(0.4, 0, 0.2, 1);
    --sspx-t: 0.26s cubic-bezier(0.4, 0, 0.2, 1);
    --sspx-t-slow: 0.38s cubic-bezier(0.22, 0.68, 0, 1);
}

.sspx-scope.sspx-scope,
.sspx-scope.sspx-scope *,
.sspx-scope.sspx-scope *::before,
.sspx-scope.sspx-scope *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* text-transform, font-style and word-spacing inherit, so a theme rule on an
       ancestor leaks in and, for example, uppercases the action. Neutralised
       here; the components that want caps set them themselves. */
    text-transform: none;
    font-style: normal;
    word-spacing: normal;
}

.sspx-scope.sspx-scope {
    line-height: 1.45;
    text-align: left;
    font-style: normal;
}

.sspx-scope.sspx-scope ul,
.sspx-scope.sspx-scope ol {
    list-style: none;
}

/* ── THE BAR ─────────────────────────────────────────────────────────────── */

.sspx-header.sspx-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    font-family: var(--sspx-sans);
    background: var(--sspx-white);
    /* One bronze line across the top edge of the site. It is the brand's only
       piece of pure decoration, and the reason the white bar reads as framed
       rather than blank. */
    border-top: 3px solid var(--sspx-bronze);
    border-bottom: 1px solid var(--sspx-rule);
    transition: border-color var(--sspx-t-slow), transform var(--sspx-t-slow);
    will-change: transform;
}

/* Scrolled, the hairline under the bar goes bronze at the left. That is the
   only thing that changes: no blur, no shadow, no colour shift. */
.sspx-header.sspx-header::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, var(--sspx-bronze) 0%, var(--sspx-bronze) 16%, var(--sspx-rule-strong) 16%, var(--sspx-rule-strong) 100%);
    opacity: 0;
    transition: opacity var(--sspx-t-slow);
    pointer-events: none;
}

.sspx-header.sspx-header.is-scrolled::after {
    opacity: 1;
}

/* Reading progress, drawn along the bottom edge of the bar. scaleX only. */
.sspx-progress.sspx-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--sspx-bronze);
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sspx-t);
    will-change: transform;
}

.sspx-header.sspx-header.is-scrolled .sspx-progress.sspx-progress {
    opacity: 1;
}

.sspx-header.sspx-header.is-tucked {
    transform: translateY(-101%);
}

/* While a sheet is open the page behind it settles one step back. Opacity only,
   so nothing under the scrim is ever repainted and the sheet reads as the one
   live surface on screen. */
.sspx-scrim.sspx-scrim {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(18, 19, 22, 0.20);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--sspx-t-slow), visibility var(--sspx-t-slow);
}

.sspx-scrim.sspx-scrim.is-on {
    opacity: 1;
    visibility: visible;
}

.sspx-bar.sspx-bar {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 28px);
    width: 100%;
    max-width: var(--sspx-max);
    margin-inline: auto;
    padding: 0 var(--sspx-pad);
    /* Constant height. The scrolled state changes only compositor properties,
       so scrolling never relayouts the document. */
    height: var(--sspx-h);
}

/* ── LOGO ────────────────────────────────────────────────────────────────── */
/* Bare on the white bar. No plate, no card, no container. */

.sspx-brand.sspx-brand {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.2vw, 18px);
}

.sspx-brand-rule.sspx-brand-rule {
    width: 1px;
    height: clamp(26px, 2.6vw, 34px);
    background: var(--sspx-rule-strong);
    flex-shrink: 0;
    transform-origin: center;
    transition: transform var(--sspx-t-slow), background var(--sspx-t);
}

.sspx-brand.sspx-brand:hover .sspx-brand-rule.sspx-brand-rule {
    background: var(--sspx-bronze);
}

.sspx-brand-tag.sspx-brand-tag span {
    display: block;
}

.sspx-brand-tag.sspx-brand-tag {
    display: block;
    font-family: var(--sspx-mono);
    font-size: clamp(8.96px, 8px + 0.14vw, 10.16px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sspx-ink-soft);
    white-space: nowrap;
}

.sspx-header.sspx-header.is-scrolled .sspx-brand-rule.sspx-brand-rule {
    transform: scaleY(0.8);
}

.sspx-brand-link.sspx-brand-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.sspx-brand.sspx-brand a[href] {
    cursor: pointer;
}

.sspx-logo.sspx-logo {
    display: block;
    height: clamp(38px, 4.1vw, 54px);
    width: auto;
    max-width: clamp(150px, 17vw, 240px);
    object-fit: contain;
    object-position: left center;
    transform-origin: left center;
    transition: transform var(--sspx-t-slow), opacity var(--sspx-t-fast);
}

.sspx-brand.sspx-brand a[href]:hover .sspx-logo.sspx-logo {
    opacity: 0.72;
}

/* The shrink is a scale, not a height: it reads the same and costs nothing. */
.sspx-header.sspx-header.is-scrolled .sspx-logo.sspx-logo {
    transform: scale(0.84);
}

/* A typographic wordmark stands in when no logo image is set. */
.sspx-wordmark.sspx-wordmark {
    font-family: var(--sspx-serif);
    font-size: clamp(27.2px, 2.5vw, 36.8px);
    line-height: 1;
    color: var(--sspx-ink);
    letter-spacing: 0.005em;
}

/* ── NAVIGATION ──────────────────────────────────────────────────────────── */

.sspx-nav.sspx-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.sspx-nav-list.sspx-nav-list {
    display: flex;
    align-items: center;
    gap: clamp(2px, 1.4vw, 26px);
}

.sspx-nav-item.sspx-nav-item {
    position: static;
}

.sspx-triggers.sspx-triggers {
    display: flex;
    align-items: center;
}

.sspx-nav-link.sspx-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sspx-sans);
    font-size: clamp(11.52px, 10.24px + 0.2vw, 13.04px);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sspx-ink-mid);
    background: none;
    border: 0;
    text-decoration: none;
    padding: clamp(12px, 1.1vw, 16px) clamp(6px, 0.7vw, 12px);
    white-space: nowrap;
    cursor: default;
    transition: color var(--sspx-t-fast), opacity var(--sspx-t-fast);
}

.sspx-nav-link.sspx-nav-link[href],
button.sspx-nav-link.sspx-nav-link {
    cursor: pointer;
}

/* One hairline, bronze, drawn from the left. The only nav decoration. */
.sspx-nav-link.sspx-nav-link::after {
    content: "";
    position: absolute;
    left: clamp(6px, 0.7vw, 12px);
    right: clamp(6px, 0.7vw, 12px);
    bottom: clamp(6px, 0.6vw, 10px);
    height: 1px;
    background: var(--sspx-bronze);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--sspx-t);
}

.sspx-nav-link.sspx-nav-link:hover,
.sspx-nav-link.sspx-nav-link.is-active {
    color: var(--sspx-ink);
}

/* The open trigger keeps its weight; its neighbours step back. This is what
   makes a wide nav feel deliberate rather than merely wide. */
.sspx-nav-list.sspx-nav-list.has-open .sspx-nav-link.sspx-nav-link {
    opacity: 0.42;
}

.sspx-nav-list.sspx-nav-list.has-open .sspx-nav-item.sspx-nav-item.is-open .sspx-nav-link.sspx-nav-link {
    opacity: 1;
}

.sspx-nav-link.sspx-nav-link:hover::after,
.sspx-nav-link.sspx-nav-link.is-active::after,
.sspx-nav-item.sspx-nav-item.is-open .sspx-nav-link.sspx-nav-link::after {
    transform: scaleX(1);
}

/* One bronze hairline travels between the items instead of each item fading its
   own in. It is positioned against the header, so the nav list stays a static
   containing block and the sheet can still run full bleed. Only transform is
   animated, so the travel is free. */
.sspx-nav-ind.sspx-nav-ind {
    position: absolute;
    left: 0;
    width: 1px;
    height: 1px;
    background: var(--sspx-bronze);
    transform-origin: left center;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.34s cubic-bezier(0.22, 0.68, 0, 1), opacity var(--sspx-t-fast);
    will-change: transform;
}

.sspx-nav-ind.sspx-nav-ind.is-on {
    opacity: 1;
}

/* Once the indicator is measuring, the per-item underlines step aside. */
.sspx-nav-list.sspx-nav-list.has-ind .sspx-nav-link.sspx-nav-link::after {
    display: none;
}

/* Two triggers inside one group are parted by a hairline, the same device the
   sheet uses between its columns. */
.sspx-nav-link.sspx-nav-link + .sspx-nav-link.sspx-nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 13px;
    background: var(--sspx-rule);
}

.sspx-caret.sspx-caret {
    width: 6px;
    height: 6px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: 0.5;
    transition: transform var(--sspx-t), opacity var(--sspx-t-fast);
}

.sspx-nav-item.sspx-nav-item.is-open .sspx-caret.sspx-caret {
    transform: translateY(1px) rotate(225deg);
    opacity: 1;
}

/* ── THE SHEET (submenu) ─────────────────────────────────────────────────── */
/* Full bleed white, a 1px ink top edge, content on the bar's own inner width. */

.sspx-shelf.sspx-shelf {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--sspx-paper);
    border-top: 1px solid var(--sspx-ink);
    border-bottom: 1px solid var(--sspx-stone);
    box-shadow: var(--sspx-lift);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity var(--sspx-t), visibility var(--sspx-t), transform var(--sspx-t-slow);
}

.sspx-nav-item.sspx-nav-item.is-open > .sspx-shelf.sspx-shelf {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.sspx-shelf-inner.sspx-shelf-inner {
    --sspx-sheet-pt: clamp(34px, 3.2vw, 54px);
    --sspx-sheet-pb: clamp(38px, 3.6vw, 60px);
    display: grid;
    grid-template-columns: minmax(230px, 0.85fr) minmax(0, 2.3fr);
    gap: clamp(28px, 3.6vw, 72px);
    width: 100%;
    max-width: var(--sspx-max);
    margin-inline: auto;
    padding: var(--sspx-sheet-pt) var(--sspx-pad) var(--sspx-sheet-pb);
}

.sspx-shelf-lead.sspx-shelf-lead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 18px;
    /* The linen block bleeds to the top, bottom and left edges of the sheet, so
       the section name sits in its own ground rather than on a ruled margin. */
    background: var(--sspx-linen);
    border-right: 1px solid var(--sspx-stone);
    margin: calc(-1 * var(--sspx-sheet-pt)) 0 calc(-1 * var(--sspx-sheet-pb)) calc(-1 * var(--sspx-pad));
    padding: var(--sspx-sheet-pt) clamp(24px, 2.6vw, 52px) var(--sspx-sheet-pb) var(--sspx-pad);
}

/* Big and fine: scale carries this, not weight or colour. */
.sspx-shelf-lead.sspx-shelf-lead::before {
    content: "";
    width: 34px;
    height: 1px;
    background: var(--sspx-bronze);
    flex-shrink: 0;
}

.sspx-shelf-title.sspx-shelf-title {
    font-family: var(--sspx-serif);
    font-weight: 400;
    font-size: clamp(33.6px, 19.2px + 2.6vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.012em;
    color: var(--sspx-ink);
}

.sspx-shelf-all.sspx-shelf-all {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12.16px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sspx-ink);
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--sspx-bronze);
    transition: color var(--sspx-t-fast), gap var(--sspx-t-fast);
}

.sspx-shelf-all.sspx-shelf-all:hover {
    color: var(--sspx-bronze);
    gap: 14px;
}

.sspx-shelf-cols.sspx-shelf-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    column-gap: clamp(20px, 2.2vw, 46px);
    row-gap: 0;
}

.sspx-shelf-col.sspx-shelf-col {
    min-width: 0;
}

/* Hairlines between the columns as well as beside the lead: the sheet reads as
   a ruled index rather than three loose lists. */
.sspx-shelf-col.sspx-shelf-col + .sspx-shelf-col.sspx-shelf-col {
    border-left: 1px solid var(--sspx-stone);
    padding-left: clamp(20px, 2.2vw, 46px);
}

/* Every column name sits in one shared row, so the rules under them stay level
   however many lines a name wraps to. Browsers without subgrid simply get the
   rule under each name where it falls. */
@supports (grid-template-rows: subgrid) {
    .sspx-shelf-cols.sspx-shelf-cols {
        grid-template-rows: auto 1fr;
    }

    .sspx-shelf-col.sspx-shelf-col {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
    }
}

/* A section with a single column would otherwise stretch its few links across
   the whole sheet. Cap it so the list stays a column rather than a scatter. */
.sspx-shelf-cols.sspx-shelf-cols:has(> .sspx-shelf-col.sspx-shelf-col:only-child) {
    grid-template-columns: minmax(0, 736px);
}

.sspx-shelf-col.sspx-shelf-col:only-child:not(.is-flat) {
    max-width: 416px;
}

.sspx-shelf-col.sspx-shelf-col.is-flat .sspx-col-list.sspx-col-list {
    columns: 2;
    column-gap: clamp(20px, 2vw, 48px);
}

@keyframes sspxColIn {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sspx-nav-item.sspx-nav-item.is-open .sspx-shelf-col.sspx-shelf-col {
    animation: sspxColIn 0.42s cubic-bezier(0.22, 0.68, 0, 1) both;
}

.sspx-nav-item.sspx-nav-item.is-open .sspx-shelf-col.sspx-shelf-col:nth-child(2) { animation-delay: 0.05s; }
.sspx-nav-item.sspx-nav-item.is-open .sspx-shelf-col.sspx-shelf-col:nth-child(3) { animation-delay: 0.10s; }
.sspx-nav-item.sspx-nav-item.is-open .sspx-shelf-col.sspx-shelf-col:nth-child(4) { animation-delay: 0.15s; }

.sspx-col-head.sspx-col-head {
    position: relative;
    display: flex;
    align-items: flex-end;
    line-height: 1.4;
    font-family: var(--sspx-mono);
    font-size: clamp(12px, 11.04px + 0.17vw, 13.36px);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--sspx-ink);
    text-decoration: none;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--sspx-stone);
    transition: color var(--sspx-t-fast), border-color var(--sspx-t-fast);
}

/* A bronze arrow arrives at the far end of the section rule on hover. Absolute,
   so it reserves no width and can never push a section name onto a second line
   and break the rule alignment across the columns. */
.sspx-col-head.sspx-col-head[href]::after {
    content: "\2192";
    position: absolute;
    right: 0;
    bottom: 14px;
    font-family: var(--sspx-sans);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--sspx-bronze);
    opacity: 0;
    transform: translateX(-5px);
    transition: opacity var(--sspx-t-fast), transform var(--sspx-t);
    pointer-events: none;
}

.sspx-col-head.sspx-col-head[href]:hover {
    color: var(--sspx-bronze);
    border-bottom-color: var(--sspx-bronze);
}

.sspx-col-head.sspx-col-head[href]:hover::after,
.sspx-col-head.sspx-col-head[href]:focus-visible::after {
    opacity: 1;
    transform: translateX(0);
}

.sspx-col-list.sspx-col-list li {
    break-inside: avoid;
}

.sspx-col-list.sspx-col-list a {
    position: relative;
    display: block;
    font-size: 15.28px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--sspx-ink);
    text-decoration: none;
    padding: 9px 10px 9px 0;
    transition: color var(--sspx-t-fast), transform var(--sspx-t-fast);
}

.sspx-col-list.sspx-col-list a:hover {
    color: var(--sspx-bronze);
    transform: translateX(4px);
}

/* Third level and deeper indent behind a hairline tick. */
.sspx-col-list.sspx-col-list li.sspx-d2.sspx-d2 > a,
.sspx-col-list.sspx-col-list li.sspx-d3.sspx-d3 > a {
    font-size: 14.16px;
    font-weight: 400;
    color: var(--sspx-ink-mid);
    padding-left: 18px;
}

.sspx-col-list.sspx-col-list li.sspx-d3.sspx-d3 > a {
    padding-left: 30px;
}

.sspx-col-list.sspx-col-list li.sspx-d2.sspx-d2 > a::before,
.sspx-col-list.sspx-col-list li.sspx-d3.sspx-d3 > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 9px;
    height: 1px;
    background: var(--sspx-rule-strong);
    transform: translateY(-50%);
    transition: width var(--sspx-t-fast), background var(--sspx-t-fast);
}

.sspx-col-list.sspx-col-list li.sspx-d3.sspx-d3 > a::before {
    left: 13px;
}

.sspx-col-list.sspx-col-list li.sspx-d2.sspx-d2 > a:hover::before,
.sspx-col-list.sspx-col-list li.sspx-d3.sspx-d3 > a:hover::before {
    width: 13px;
    background: var(--sspx-bronze);
}

/* ── LANGUAGE CONTROL ────────────────────────────────────────────────────── */

.sspx-lang.sspx-lang {
    position: relative;
    flex-shrink: 0;
    z-index: 2;
}

.sspx-lang-trigger.sspx-lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sspx-sans);
    font-size: 12.48px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--sspx-ink-mid);
    background: none;
    border: 1px solid var(--sspx-rule);
    border-radius: var(--sspx-r);
    padding: clamp(9px, 0.9vw, 12px) clamp(11px, 1.1vw, 15px);
    cursor: pointer;
    transition: border-color var(--sspx-t-fast), color var(--sspx-t-fast);
}

.sspx-lang-trigger.sspx-lang-trigger:hover,
.sspx-lang.sspx-lang.is-open .sspx-lang-trigger.sspx-lang-trigger {
    border-color: var(--sspx-ink);
    color: var(--sspx-ink);
}

.sspx-lang-flag.sspx-lang-flag {
    font-size: 1.05em;
    line-height: 1;
}

.sspx-lang-name.sspx-lang-name {
    white-space: nowrap;
}

.sspx-lang-list.sspx-lang-list {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 190px;
    background: var(--sspx-white);
    border: 1px solid var(--sspx-rule);
    border-top: 1px solid var(--sspx-ink);
    border-radius: var(--sspx-r-lg);
    box-shadow: var(--sspx-lift);
    padding: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--sspx-t), transform var(--sspx-t), visibility var(--sspx-t);
}

.sspx-lang.sspx-lang.is-open .sspx-lang-list.sspx-lang-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sspx-lang-option.sspx-lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.4px;
    font-weight: 500;
    color: var(--sspx-ink-mid);
    padding: 10px 12px;
    border-radius: var(--sspx-r);
    cursor: pointer;
    transition: background var(--sspx-t-fast), color var(--sspx-t-fast);
}

.sspx-lang-option.sspx-lang-option:hover {
    background: var(--sspx-linen);
    color: var(--sspx-ink);
}

.sspx-lang-option.sspx-lang-option.is-active {
    color: var(--sspx-ink);
    background: var(--sspx-bronze-wash);
}

/* ── ACTION ──────────────────────────────────────────────────────────────── */

.sspx-cta-wrap.sspx-cta-wrap {
    flex-shrink: 0;
    z-index: 2;
}

.sspx-cta.sspx-cta {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--sspx-sans);
    font-size: clamp(12.48px, 11.52px + 0.18vw, 13.76px);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--sspx-white);
    background: var(--sspx-ink);
    border: 1px solid var(--sspx-ink);
    border-radius: var(--sspx-r);
    text-decoration: none;
    padding: clamp(13px, 1.2vw, 17px) clamp(18px, 1.8vw, 28px);
    white-space: nowrap;
    cursor: default;
    transition: border-color var(--sspx-t);
}

/* The bronze fills from the left rather than switching on. A 340ms sweep is
   the whole of the interface's personality, so it is worth getting right. */
.sspx-cta.sspx-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--sspx-bronze);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.34s cubic-bezier(0.22, 0.68, 0, 1);
}

.sspx-cta.sspx-cta > * {
    position: relative;
    z-index: 1;
}

.sspx-cta.sspx-cta[href] {
    cursor: pointer;
}

.sspx-cta.sspx-cta:hover {
    border-color: var(--sspx-bronze);
}

.sspx-cta.sspx-cta:hover::before {
    transform: scaleX(1);
}

.sspx-cta.sspx-cta .sspx-arrow.sspx-arrow {
    font-size: 1.02em;
    transition: transform var(--sspx-t);
}

.sspx-cta.sspx-cta:hover .sspx-arrow.sspx-arrow {
    transform: translateX(5px);
}

/* ── HAMBURGER ───────────────────────────────────────────────────────────── */

.sspx-burger.sspx-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-left: auto;
    background: none;
    border: 1px solid var(--sspx-rule);
    border-radius: var(--sspx-r);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color var(--sspx-t-fast);
}

.sspx-burger.sspx-burger:hover {
    border-color: var(--sspx-ink);
}

.sspx-burger-icon.sspx-burger-icon {
    position: relative;
    display: block;
    width: 20px;
    height: 12px;
}

.sspx-burger-icon.sspx-burger-icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--sspx-ink);
    transition: transform var(--sspx-t), opacity var(--sspx-t-fast), background var(--sspx-t-fast);
}

.sspx-burger-icon.sspx-burger-icon span:nth-child(1) { top: 0; }
.sspx-burger-icon.sspx-burger-icon span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.sspx-burger-icon.sspx-burger-icon span:nth-child(3) { bottom: 0; }

.sspx-burger.sspx-burger.is-open .sspx-burger-icon.sspx-burger-icon span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    background: var(--sspx-bronze);
}

.sspx-burger.sspx-burger.is-open .sspx-burger-icon.sspx-burger-icon span:nth-child(2) {
    opacity: 0;
}

.sspx-burger.sspx-burger.is-open .sspx-burger-icon.sspx-burger-icon span:nth-child(3) {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    background: var(--sspx-bronze);
}

/* ── DRAWER ──────────────────────────────────────────────────────────────── */

.sspx-overlay.sspx-overlay {
    position: fixed;
    inset: 0;
    background: rgba(18, 19, 22, 0.34);
    opacity: 0;
    visibility: hidden;
    z-index: 1001;
    transition: opacity var(--sspx-t-slow), visibility var(--sspx-t-slow);
}

.sspx-overlay.sspx-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.sspx-drawer.sspx-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(430px, 90vw);
    height: 100%;
    background: var(--sspx-white);
    border-left: 1px solid var(--sspx-ink);
    box-shadow: var(--sspx-lift);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    transform: translateX(105%);
    transition: transform var(--sspx-t-slow);
    overflow-y: auto;
    overscroll-behavior: contain;
    font-family: var(--sspx-sans);
}

.sspx-drawer.sspx-drawer.is-open {
    transform: translateX(0);
}

.sspx-drawer-head.sspx-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: clamp(20px, 5vw, 28px) clamp(18px, 5vw, 28px) 16px;
    border-bottom: 1px solid var(--sspx-rule);
}

.sspx-drawer-head-id.sspx-drawer-head-id {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}

.sspx-drawer-mark.sspx-drawer-mark {
    font-family: var(--sspx-serif);
    font-size: 29.6px;
    line-height: 1;
    color: var(--sspx-ink);
}

.sspx-drawer-sub.sspx-drawer-sub {
    font-family: var(--sspx-mono);
    font-size: 9.92px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sspx-ink-soft);
}

.sspx-drawer-close.sspx-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    color: var(--sspx-ink);
    background: none;
    border: 1px solid var(--sspx-rule);
    border-radius: var(--sspx-r);
    cursor: pointer;
    transition: color var(--sspx-t-fast), border-color var(--sspx-t-fast);
}

.sspx-drawer-close.sspx-drawer-close:hover {
    color: var(--sspx-bronze);
    border-color: var(--sspx-ink);
}

.sspx-drawer-close.sspx-drawer-close svg {
    width: 15px;
    height: 15px;
}

.sspx-drawer-nav.sspx-drawer-nav {
    flex: 1 1 auto;
    padding: 8px clamp(18px, 5vw, 28px);
}

.sspx-drawer-list.sspx-drawer-list > li + li {
    border-top: 1px solid var(--sspx-rule);
}

.sspx-drawer-link.sspx-drawer-link {
    display: block;
    font-size: 16.8px;
    font-weight: 500;
    color: var(--sspx-ink);
    text-decoration: none;
    padding: 18px 2px;
    transition: color var(--sspx-t-fast), padding-left var(--sspx-t-fast);
}

.sspx-drawer-link.sspx-drawer-link[href]:hover,
.sspx-drawer-link.sspx-drawer-link.is-active {
    color: var(--sspx-bronze);
    padding-left: 6px;
}

.sspx-acc-toggle.sspx-acc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    font-family: var(--sspx-sans);
    font-size: 16.8px;
    font-weight: 500;
    text-align: left;
    color: var(--sspx-ink);
    background: none;
    border: 0;
    padding: 18px 2px;
    cursor: pointer;
    transition: color var(--sspx-t-fast);
}

.sspx-acc-toggle.sspx-acc-toggle:hover {
    color: var(--sspx-bronze);
}

.sspx-acc-sign.sspx-acc-sign {
    position: relative;
    flex-shrink: 0;
    width: 13px;
    height: 13px;
}

.sspx-acc-sign.sspx-acc-sign::before,
.sspx-acc-sign.sspx-acc-sign::after {
    content: "";
    position: absolute;
    background: currentColor;
    transition: transform var(--sspx-t), opacity var(--sspx-t-fast);
}

.sspx-acc-sign.sspx-acc-sign::before {
    left: 0;
    top: 50%;
    width: 13px;
    height: 1px;
    transform: translateY(-50%);
}

.sspx-acc-sign.sspx-acc-sign::after {
    left: 50%;
    top: 0;
    width: 1px;
    height: 13px;
    transform: translateX(-50%);
}

.sspx-acc-item.sspx-acc-item.is-open .sspx-acc-toggle.sspx-acc-toggle {
    color: var(--sspx-bronze);
}

.sspx-acc-item.sspx-acc-item.is-open .sspx-acc-sign.sspx-acc-sign::after {
    transform: translateX(-50%) scaleY(0);
    opacity: 0;
}

.sspx-acc-panel.sspx-acc-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--sspx-t-slow);
}

.sspx-acc-item.sspx-acc-item.is-open .sspx-acc-panel.sspx-acc-panel {
    max-height: 1600px;
}

.sspx-acc-inner.sspx-acc-inner {
    padding: 0 0 18px 16px;
    border-left: 1px solid var(--sspx-rule);
    margin-left: 2px;
}

.sspx-acc-inner.sspx-acc-inner a {
    display: block;
    font-size: 15.12px;
    font-weight: 500;
    color: var(--sspx-ink-mid);
    text-decoration: none;
    padding: 10px 0;
    transition: color var(--sspx-t-fast), transform var(--sspx-t-fast);
}

.sspx-acc-inner.sspx-acc-inner a:hover,
.sspx-acc-inner.sspx-acc-inner a.is-active {
    color: var(--sspx-bronze);
    transform: translateX(3px);
}

.sspx-acc-inner.sspx-acc-inner li.sspx-d2.sspx-d2 > a {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    color: var(--sspx-ink-soft);
    padding-left: 16px;
}

.sspx-acc-inner.sspx-acc-inner li.sspx-d2.sspx-d2 > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 1px;
    background: var(--sspx-rule-strong);
    transform: translateY(-50%);
}

.sspx-acc-inner.sspx-acc-inner li.sspx-d3.sspx-d3 > a {
    font-size: 13.76px;
    font-weight: 400;
    color: var(--sspx-ink-soft);
    padding-left: 28px;
}

.sspx-drawer-foot.sspx-drawer-foot {
    padding: 20px clamp(18px, 5vw, 28px) clamp(26px, 6vw, 34px);
    border-top: 1px solid var(--sspx-stone);
    background: var(--sspx-linen);
}

.sspx-drawer-foot.sspx-drawer-foot .sspx-cta.sspx-cta {
    width: 100%;
    justify-content: center;
    padding: 17px 22px;
    font-size: 15.2px;
}

.sspx-drawer-meta.sspx-drawer-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 16px;
}

.sspx-drawer-meta.sspx-drawer-meta a,
.sspx-drawer-meta.sspx-drawer-meta span {
    font-family: var(--sspx-mono);
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--sspx-ink-soft);
    text-decoration: none;
}

.sspx-drawer-meta.sspx-drawer-meta a:hover {
    color: var(--sspx-bronze);
}

/* ── COMPACT MODE (toggled by script at 1120px) ──────────────────────────── */

body.ssp-compact .sspx-bar.sspx-bar {
    height: var(--sspx-h-compact);
    padding: 0 var(--sspx-pad-compact);
    gap: 10px;
}

body.ssp-compact .sspx-nav.sspx-nav {
    display: none;
}

body.ssp-compact .sspx-burger.sspx-burger {
    display: flex;
}

body.ssp-compact .sspx-logo.sspx-logo {
    height: clamp(30px, 6.4vw, 40px);
}

body.ssp-compact .sspx-brand-rule.sspx-brand-rule,
body.ssp-compact .sspx-brand-tag.sspx-brand-tag {
    display: none;
}

body.ssp-compact .sspx-cta.sspx-cta {
    padding: 12px 18px;
    font-size: 12.8px;
}

body.ssp-compact .sspx-lang.sspx-lang {
    margin-left: auto;
}

body.ssp-compact .sspx-lang-name.sspx-lang-name,
body.ssp-compact .sspx-lang-option.sspx-lang-option .sspx-lang-name.sspx-lang-name {
    display: none;
}

body.ssp-compact .sspx-lang-trigger.sspx-lang-trigger {
    padding: 10px 12px;
    gap: 4px;
}

body.ssp-compact .sspx-lang-trigger.sspx-lang-trigger .sspx-caret.sspx-caret {
    display: none;
}

body.ssp-compact .sspx-lang-list.sspx-lang-list {
    min-width: auto;
}

body.ssp-compact .sspx-lang-option.sspx-lang-option {
    justify-content: center;
    padding: 10px;
}

body:not(.ssp-compact) .sspx-overlay.sspx-overlay,
body:not(.ssp-compact) .sspx-drawer.sspx-drawer {
    display: none !important;
    transform: translateX(105%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

body.ssp-menu-open {
    overflow: hidden;
}

@media screen and (max-width: 430px) {
    .sspx-cta.sspx-cta .sspx-cta-text.sspx-cta-text {
        display: none;
    }

    .sspx-cta.sspx-cta {
        padding: 0;
        width: 46px;
        height: 46px;
        justify-content: center;
    }

    .sspx-cta.sspx-cta .sspx-arrow.sspx-arrow {
        font-size: 18.4px;
    }

    .sspx-drawer.sspx-drawer {
        width: 100vw;
        border-left: 0;
    }

    .sspx-drawer-foot.sspx-drawer-foot .sspx-cta.sspx-cta {
        width: 100%;
        height: auto;
    }

    .sspx-drawer-foot.sspx-drawer-foot .sspx-cta.sspx-cta .sspx-cta-text.sspx-cta-text {
        display: inline;
    }
}

@media screen and (max-width: 1320px) {
    .sspx-shelf-inner.sspx-shelf-inner {
        grid-template-columns: minmax(190px, 0.75fr) minmax(0, 2.5fr);
        gap: clamp(22px, 2.6vw, 44px);
    }

    .sspx-shelf-cols.sspx-shelf-cols {
        grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
    }
}

/* ── MOTION AND FOCUS ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .sspx-scope.sspx-scope,
    .sspx-scope.sspx-scope *,
    .sspx-scope.sspx-scope *::before,
    .sspx-scope.sspx-scope *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

.sspx-scope.sspx-scope :focus-visible {
    outline: 1px solid var(--sspx-ink);
    outline-offset: 4px;
    border-radius: 0;
}

/* ── HOST CONTAINER RESETS ───────────────────────────────────────────────── */
/* The bar prints inside an Elementor header template, whose container would
   otherwise hold it to the content width. */

.elementor-editor-active .sspx-header.sspx-header {
    z-index: 9999;
}

.sspx-header.sspx-header {
    max-width: 100% !important;
    width: 100% !important;
}

.elementor-widget-wrap .sspx-header.sspx-header,
.elementor-section .sspx-header.sspx-header,
.e-con .sspx-header.sspx-header,
.e-con-inner .sspx-header.sspx-header {
    max-width: 100% !important;
    width: 100% !important;
}

.sspx-header.sspx-header .sspx-bar.sspx-bar {
    width: 100% !important;
    max-width: var(--sspx-max) !important;
}

.sspx-bar.sspx-bar * {
    max-width: none;
}
/* ==========================================================================
   SSP dynamic footer  ·  "SSP White Room" direction
   Off-white band, oversized fine serif wordmark, hairline rules, square
   corners, one ink action. Tokens are prefixed --sspf-.
   ========================================================================== */

.sspf-scope.sspf-scope {
    --sspf-white: #FFFFFF;
    /* The header's four light grounds, so the two ends of the page are built
       out of the same materials. */
    --sspf-paper: #FAF9F6;
    --sspf-linen: #F3F0E9;
    --sspf-stone: #E9E5DC;
    --sspf-wash: #F7F1E6;
    --sspf-shell: #FAF9F6;
    --sspf-ink: #121316;
    --sspf-ink-mid: #45474D;
    --sspf-ink-soft: #8B8D94;
    --sspf-rule: #E7E6E2;
    --sspf-rule-strong: #D6D4CE;
    --sspf-bronze: #9C7A45;
    --sspf-bronze-wash: rgba(156, 122, 69, 0.08);

    --sspf-r: 2px;
    --sspf-r-lg: 3px;

    --sspf-lift: 0 24px 48px -28px rgba(18, 19, 22, 0.26), 0 2px 6px rgba(18, 19, 22, 0.04);

    --sspf-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --sspf-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --sspf-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --sspf-max: 1560px;
    --sspf-pad: clamp(18px, 3.6vw, 56px);

    --sspf-fs-label: clamp(10.32px, 9.92px + 0.11vw, 11.28px);
    --sspf-fs-sm: clamp(13.12px, 12.64px + 0.14vw, 14.24px);
    --sspf-fs-body: clamp(14.24px, 13.6px + 0.18vw, 15.52px);

    --sspf-t-fast: 0.16s cubic-bezier(0.4, 0, 0.2, 1);
    --sspf-t: 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.sspf-scope.sspf-scope,
.sspf-scope.sspf-scope *,
.sspf-scope.sspf-scope *::before,
.sspf-scope.sspf-scope *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* text-transform, font-style and word-spacing inherit, so a theme rule on an
       ancestor leaks in and, for example, uppercases the action. Neutralised
       here; the components that want caps set them themselves. */
    text-transform: none;
    font-style: normal;
    word-spacing: normal;
}

.sspf-scope.sspf-scope {
    line-height: 1.45;
    text-align: left;
    font-style: normal;
}

.sspf-scope.sspf-scope ul {
    list-style: none;
}

.sspf-footer.sspf-footer {
    position: relative;
    width: 100%;
    background: var(--sspf-linen);
    border-top: 1px solid var(--sspf-stone);
    font-family: var(--sspf-sans);
    color: var(--sspf-ink);
    padding: clamp(56px, 6vw, 104px) var(--sspf-pad) 0;
}

/* The same bronze hairline the bar carries, so the two read as one system. */
.sspf-footer.sspf-footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--sspf-bronze) 0%, var(--sspf-bronze) 9%, transparent 9%, transparent 100%);
}

.sspf-inner.sspf-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.06fr) minmax(0, 1fr);
    gap: clamp(28px, 3.6vw, 68px);
    width: 100%;
    max-width: var(--sspf-max);
    margin-inline: auto;
    padding-bottom: clamp(38px, 4.2vw, 64px);
}

.sspf-inner.sspf-inner > * {
    min-width: 0;
}

/* ── BRAND COLUMN ────────────────────────────────────────────────────────── */

.sspf-brand.sspf-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(18px, 2vw, 28px);
}

.sspf-brand-tick.sspf-brand-tick {
    width: 40px;
    height: 1px;
    background: var(--sspf-bronze);
}

.sspf-mark.sspf-mark {
    display: flex;
    align-items: baseline;
    gap: 18px;
    text-decoration: none;
    color: inherit;
}

.sspf-mark.sspf-mark[href] {
    cursor: pointer;
}

/* The one big typographic moment in the whole build. */
.sspf-mark-text.sspf-mark-text {
    font-family: var(--sspf-serif);
    font-weight: 400;
    font-size: clamp(52.8px, 28.8px + 4.6vw, 96px);
    line-height: 0.86;
    letter-spacing: -0.032em;
    color: var(--sspf-ink);
    transition: color var(--sspf-t);
}

.sspf-mark.sspf-mark[href]:hover .sspf-mark-text.sspf-mark-text {
    color: var(--sspf-bronze);
}

.sspf-mark-rule.sspf-mark-rule {
    flex: 0 0 auto;
    width: 38px;
    height: 1px;
    background: var(--sspf-rule-strong);
    transform: translateY(-9px);
    transition: width var(--sspf-t), background var(--sspf-t);
}

.sspf-mark.sspf-mark[href]:hover .sspf-mark-rule.sspf-mark-rule {
    width: 52px;
    background: var(--sspf-bronze);
}

.sspf-mark-tag.sspf-mark-tag {
    font-family: var(--sspf-mono);
    font-size: clamp(9.28px, 8.8px + 0.1vw, 10.32px);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sspf-ink-soft);
    transform: translateY(-9px);
}

.sspf-desc.sspf-desc {
    font-size: var(--sspf-fs-body);
    line-height: 1.7;
    color: var(--sspf-ink-mid);
    max-width: 40ch;
}

/* Two facts, ruled rather than boxed, anchored to the foot of the column so the
   masthead ends level with the two panels beside it. */
.sspf-facts.sspf-facts {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    background: var(--sspf-wash);
    border: 1px solid var(--sspf-stone);
    border-radius: var(--sspf-r-lg);
}

.sspf-fact.sspf-fact {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 6px;
    padding: 18px 20px;
    text-decoration: none;
    color: inherit;
}

.sspf-fact.sspf-fact + .sspf-fact.sspf-fact {
    border-left: 1px solid var(--sspf-stone);
}

.sspf-fact.sspf-fact[href] {
    cursor: pointer;
}

.sspf-fact-label.sspf-fact-label {
    font-family: var(--sspf-mono);
    font-size: var(--sspf-fs-label);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sspf-ink-soft);
}

.sspf-fact-value.sspf-fact-value {
    font-family: var(--sspf-serif);
    font-weight: 400;
    font-size: clamp(18.4px, 15.2px + 0.6vw, 23.2px);
    line-height: 1.05;
    color: var(--sspf-ink);
    transition: color var(--sspf-t-fast);
}

.sspf-fact.sspf-fact[href]:hover .sspf-fact-value.sspf-fact-value {
    color: var(--sspf-bronze);
}

.sspf-social-row.sspf-social-row {
    display: flex;
    gap: 10px;
}

.sspf-social.sspf-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--sspf-ink-mid);
    background: var(--sspf-white);
    border: 1px solid var(--sspf-rule);
    border-radius: var(--sspf-r);
    transition: color var(--sspf-t-fast), border-color var(--sspf-t-fast);
}

.sspf-social.sspf-social[href] {
    cursor: pointer;
}

.sspf-social.sspf-social:hover {
    color: var(--sspf-bronze);
    border-color: var(--sspf-ink);
}

.sspf-social.sspf-social svg {
    width: 17px;
    height: 17px;
}

/* ── THE ONE ACTION ──────────────────────────────────────────────────────── */

.sspf-cta.sspf-cta {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Anchored to the foot of the panel, so the link rows stay tight at the top
       and the breathing room collects in one place instead of three. */
    margin-top: auto;
    gap: 12px;
    font-size: var(--sspf-fs-body);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--sspf-white);
    background: var(--sspf-ink);
    border: 1px solid var(--sspf-ink);
    border-radius: var(--sspf-r);
    text-decoration: none;
    padding: 17px 26px;
    transition: border-color var(--sspf-t);
}

.sspf-cta.sspf-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--sspf-bronze);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.34s cubic-bezier(0.22, 0.68, 0, 1);
}

.sspf-cta.sspf-cta > * {
    position: relative;
    z-index: 1;
}

.sspf-cta.sspf-cta[href] {
    cursor: pointer;
}

.sspf-cta.sspf-cta:hover {
    border-color: var(--sspf-bronze);
}

.sspf-cta.sspf-cta:hover::before {
    transform: scaleX(1);
}

.sspf-cta.sspf-cta .sspf-arrow.sspf-arrow {
    transition: transform var(--sspf-t);
}

.sspf-cta.sspf-cta:hover .sspf-arrow.sspf-arrow {
    transform: translateX(5px);
}

/* ── INDEX PANEL ─────────────────────────────────────────────────────────── */

.sspf-explore.sspf-explore {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    background: var(--sspf-white);
    border: 1px solid var(--sspf-rule);
    border-radius: var(--sspf-r-lg);
    padding: clamp(18px, 1.6vw, 26px) clamp(18px, 1.6vw, 26px) clamp(20px, 1.8vw, 28px);
}

.sspf-sec.sspf-sec {
    padding: clamp(13px, 1.3vw, 19px) 0;
    border-bottom: 1px solid var(--sspf-rule);
}

.sspf-sec.sspf-sec:first-child {
    padding-top: 0;
}

.sspf-sec.sspf-sec:last-of-type {
    border-bottom: 0;
    padding-bottom: clamp(16px, 1.5vw, 22px);
}

.sspf-sec-title.sspf-sec-title {
    display: block;
    font-family: var(--sspf-mono);
    font-size: clamp(12px, 11.04px + 0.17vw, 13.36px);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--sspf-ink);
    margin-bottom: 14px;
}

.sspf-pills.sspf-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sspf-pill.sspf-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sspf-sans);
    font-size: var(--sspf-fs-sm);
    font-weight: 500;
    color: var(--sspf-ink);
    background: var(--sspf-paper);
    border: 1px solid var(--sspf-rule);
    border-radius: var(--sspf-r);
    text-decoration: none;
    padding: 11px 16px;
    cursor: pointer;
    transition: color var(--sspf-t-fast), border-color var(--sspf-t-fast), background var(--sspf-t-fast);
}

.sspf-pill.sspf-pill:hover,
.sspf-dd.sspf-dd:hover .sspf-pill.sspf-pill,
.sspf-dd.sspf-dd:focus-within .sspf-pill.sspf-pill {
    color: var(--sspf-ink);
    border-color: var(--sspf-ink);
    background: var(--sspf-wash);
}

.sspf-pill-icon.sspf-pill-icon {
    display: inline-flex;
    color: var(--sspf-ink-soft);
    transition: color var(--sspf-t-fast);
}

.sspf-pill.sspf-pill:hover .sspf-pill-icon.sspf-pill-icon,
.sspf-dd.sspf-dd:hover .sspf-pill.sspf-pill .sspf-pill-icon.sspf-pill-icon,
.sspf-dd.sspf-dd:focus-within .sspf-pill.sspf-pill .sspf-pill-icon.sspf-pill-icon {
    color: var(--sspf-bronze);
}

.sspf-pill-icon.sspf-pill-icon svg {
    width: 15px;
    height: 15px;
}

.sspf-pill-caret.sspf-pill-caret {
    width: 5px;
    height: 5px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-3px) rotate(225deg);
    opacity: 0.55;
    transition: transform var(--sspf-t);
}

.sspf-dd.sspf-dd:hover .sspf-pill-caret.sspf-pill-caret,
.sspf-dd.sspf-dd:focus-within .sspf-pill-caret.sspf-pill-caret {
    transform: translateY(0) rotate(45deg);
    opacity: 1;
}

/* ── FOOTER DROPDOWNS (open upward, hover and keyboard) ──────────────────── */

.sspf-dd.sspf-dd {
    position: relative;
}

.sspf-dd-panel.sspf-dd-panel {
    position: absolute;
    bottom: calc(100% + 9px);
    left: 0;
    min-width: 268px;
    max-width: min(370px, 84vw);
    max-height: min(320px, 44vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--sspf-white);
    border: 1px solid var(--sspf-rule);
    border-bottom: 1px solid var(--sspf-ink);
    border-radius: var(--sspf-r-lg);
    box-shadow: var(--sspf-lift);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    z-index: 5;
    transition: opacity var(--sspf-t), transform var(--sspf-t), visibility var(--sspf-t);
}

.sspf-dd.sspf-dd:hover .sspf-dd-panel.sspf-dd-panel,
.sspf-dd.sspf-dd:focus-within .sspf-dd-panel.sspf-dd-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sspf-dd-panel.sspf-dd-panel ul {
    display: flex;
    flex-direction: column;
}

.sspf-dd-panel.sspf-dd-panel a {
    position: relative;
    display: block;
    font-size: clamp(13.68px, 13.12px + 0.14vw, 14.8px);
    font-weight: 700;
    line-height: 1.35;
    color: var(--sspf-ink);
    text-decoration: none;
    padding: 10px 12px 10px 22px;
    border-radius: var(--sspf-r);
    transition: color var(--sspf-t-fast), background var(--sspf-t-fast);
}

.sspf-dd-panel.sspf-dd-panel a::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 7px;
    height: 1px;
    background: var(--sspf-rule-strong);
    transform: translateY(-50%);
    transition: width var(--sspf-t-fast), background var(--sspf-t-fast);
}

.sspf-dd-panel.sspf-dd-panel a:hover {
    color: var(--sspf-bronze);
    background: var(--sspf-wash);
}

.sspf-dd-panel.sspf-dd-panel a:hover::before {
    width: 11px;
    background: var(--sspf-bronze);
}

.sspf-dd-panel.sspf-dd-panel li.sspf-d2.sspf-d2 > a {
    padding-left: 32px;
    font-size: 13.52px;
    font-weight: 500;
    color: var(--sspf-ink-mid);
}

.sspf-dd-panel.sspf-dd-panel li.sspf-d2.sspf-d2 > a::before {
    left: 19px;
}

/* ── CONTACT PANEL ───────────────────────────────────────────────────────── */

.sspf-contact.sspf-contact {
    display: flex;
}

.sspf-card.sspf-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--sspf-white);
    border: 1px solid var(--sspf-rule);
    border-radius: var(--sspf-r-lg);
    overflow: hidden;
}

.sspf-photo.sspf-photo {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--sspf-linen);
    border-bottom: 1px solid var(--sspf-rule);
    overflow: hidden;
}

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

.sspf-photo.sspf-photo figcaption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--sspf-mono);
    font-size: var(--sspf-fs-label);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sspf-ink-soft);
}

.sspf-photo.sspf-photo.has-image figcaption {
    display: none;
}

.sspf-photo.sspf-photo figcaption svg {
    width: 26px;
    height: 26px;
    opacity: 0.45;
}

.sspf-rows.sspf-rows {
    display: flex;
    flex-direction: column;
    padding: 4px clamp(16px, 1.5vw, 22px) clamp(14px, 1.4vw, 20px);
}

.sspf-row.sspf-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 15px 0;
    text-decoration: none;
    color: inherit;
}

.sspf-row.sspf-row + .sspf-row.sspf-row {
    border-top: 1px solid var(--sspf-rule);
}

.sspf-row.sspf-row[href] {
    cursor: pointer;
}

.sspf-row-icon.sspf-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    color: var(--sspf-ink-soft);
    background: none;
    border: 1px solid var(--sspf-rule);
    border-radius: var(--sspf-r);
    transition: color var(--sspf-t-fast), border-color var(--sspf-t-fast);
}

.sspf-row.sspf-row[href]:hover .sspf-row-icon.sspf-row-icon {
    color: var(--sspf-bronze);
    border-color: var(--sspf-rule-strong);
}

.sspf-row-icon.sspf-row-icon svg {
    width: 14px;
    height: 14px;
}

.sspf-row-text.sspf-row-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sspf-row-label.sspf-row-label {
    font-family: var(--sspf-mono);
    font-size: var(--sspf-fs-label);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sspf-ink-soft);
}

.sspf-row-value.sspf-row-value {
    font-size: var(--sspf-fs-sm);
    font-weight: 500;
    line-height: 1.5;
    color: var(--sspf-ink);
    overflow-wrap: anywhere;
    transition: color var(--sspf-t-fast);
}

.sspf-row.sspf-row[href]:hover .sspf-row-value.sspf-row-value {
    color: var(--sspf-bronze);
}

/* ── BOTTOM BAR ──────────────────────────────────────────────────────────── */

.sspf-bottom.sspf-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    width: 100%;
    max-width: var(--sspf-max);
    margin-inline: auto;
    padding: clamp(18px, 1.7vw, 24px) 0 clamp(24px, 2.5vw, 34px);
    border-top: 1px solid var(--sspf-stone);
    font-family: var(--sspf-mono);
    font-size: clamp(11.2px, 10.72px + 0.12vw, 12.24px);
    letter-spacing: 0.01em;
    color: var(--sspf-ink-soft);
}

.sspf-bottom-links.sspf-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}

.sspf-bottom.sspf-bottom a {
    color: var(--sspf-ink-soft);
    text-decoration: none;
    transition: color var(--sspf-t-fast);
}

.sspf-bottom.sspf-bottom a[href] {
    cursor: pointer;
}

.sspf-bottom.sspf-bottom a:hover {
    color: var(--sspf-ink);
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */

@media screen and (max-width: 1080px) {
    .sspf-inner.sspf-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sspf-brand.sspf-brand {
        grid-column: 1 / -1;
    }

    .sspf-desc.sspf-desc {
        max-width: 58ch;
    }
}

@media screen and (max-width: 680px) {
    .sspf-inner.sspf-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .sspf-facts.sspf-facts {
        margin-top: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    .sspf-fact.sspf-fact + .sspf-fact.sspf-fact {
        border-left: 0;
        border-top: 1px solid var(--sspf-rule);
        padding-left: 0;
    }

    .sspf-pills.sspf-pills {
        flex-direction: column;
        align-items: stretch;
    }

    .sspf-pill.sspf-pill {
        justify-content: flex-start;
    }

    .sspf-dd-panel.sspf-dd-panel {
        position: static;
        min-width: 0;
        max-width: none;
        max-height: none;
        box-shadow: none;
        border: 0;
        border-left: 1px solid var(--sspf-rule);
        border-radius: 0;
        padding: 4px 0 4px 8px;
        margin-top: 6px;
        opacity: 1;
        visibility: visible;
        transform: none;
        overflow: visible;
    }

    .sspf-dd-panel.sspf-dd-panel a {
        padding-left: 20px;
    }

    .sspf-dd-panel.sspf-dd-panel a::before {
        left: 6px;
    }

    .sspf-dd-panel.sspf-dd-panel li.sspf-d2.sspf-d2 > a {
        padding-left: 30px;
    }

    .sspf-dd-panel.sspf-dd-panel li.sspf-d2.sspf-d2 > a::before {
        left: 17px;
    }

    .sspf-pill-caret.sspf-pill-caret {
        display: none;
    }

    .sspf-bottom.sspf-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media screen and (max-width: 400px) {
    .sspf-mark.sspf-mark {
        flex-wrap: wrap;
        gap: 10px;
    }

    .sspf-mark-rule.sspf-mark-rule,
    .sspf-mark-tag.sspf-mark-tag {
        transform: none;
    }

    .sspf-photo.sspf-photo {
        aspect-ratio: 3 / 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sspf-scope.sspf-scope *,
    .sspf-scope.sspf-scope *::before,
    .sspf-scope.sspf-scope *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

.sspf-scope.sspf-scope :focus-visible {
    outline: 1px solid var(--sspf-ink);
    outline-offset: 4px;
    border-radius: 0;
}

/* ── HOST CONTAINER RESETS ───────────────────────────────────────────────── */

.sspf-footer.sspf-footer {
    max-width: 100% !important;
}

.elementor-widget-wrap .sspf-footer.sspf-footer,
.elementor-section .sspf-footer.sspf-footer,
.e-con .sspf-footer.sspf-footer,
.e-con-inner .sspf-footer.sspf-footer {
    max-width: 100% !important;
    width: 100% !important;
}