/* =============================================================
   File: assets/css/site.css
   Pienaar Group — complete stylesheet, one file.

   Art-direction pass, 21 Sep 2026.
   One serif (EB Garamond), one sans (Montserrat).
   8-based spacing scale. 1560px content column.
   Black + ivory + photography; gold used as jewellery.

   Contents
     TOKENS · BASE · HEADER · HERO · THE GROUP · OUR APPROACH ·
     OUR MARKETS · OUR COMMITMENT · FOOTER · SCREEN COMPOSITION ·
     REVEAL · RESPONSIVE (A tablet · B portrait · C phone)
   ============================================================= */


/* ############################################################
   TOKENS
   ############################################################ */

@font-face {
    font-family: "EB Garamond";
    src: url("../fonts/ebgaramond.woff2") format("woff2");
    font-weight: 400 800;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
}

:root {
    /* --- Colour ---------------------------------------------- */
    --black:       #0C1012;   /* header, hero ground            */
    --black-deep:  #090C0E;   /* footer                          */
    --charcoal:    #161B1E;   /* raised dark surfaces            */
    --night:       #0B0F11;   /* Approach, beneath the texture   */
    --ivory:       #F1EDE5;   /* The Group, Markets              */
    --stone:       #D8D0C2;   /* hairlines on ivory              */
    --ink:         #15191B;
    --ink-soft:    #3B3F42;
    --ink-quiet:   #6E6A63;   /* captions on ivory, 4.6:1        */
    --white:       #F3F0EA;
    --white-soft:  rgba(243, 240, 234, 0.76);
    --white-quiet: rgba(243, 240, 234, 0.58);
    /* Gold family. Jewellery, never a theme.
       deep antique — hairlines and edges only (fails as text)
       muted mid    — the working gold on dark, 7.1:1
       champagne    — highlights and the active navigation mark, 10.2:1
       bronze       — the only gold-family text allowed on ivory, 5.1:1 */
    --gold-deep:   #8E713B;
    --gold:        #B79A5A;
    --gold-champ:  #D1BC82;
    --bronze:      #7A5F30;
    --line-gold:   rgba(183, 154, 90, 0.45);
    --line-gold-2: rgba(183, 154, 90, 0.24);
    --line-dark:   rgba(243, 240, 234, 0.12);

    /* --- Type -------------------------------------------------
       One serif for statement and text; one sans for the voice
       of the institution: labels, navigation, controls.        */
    --serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
    --sans:  "Montserrat", "Helvetica Neue", Arial, sans-serif;

    /*               min        fluid                max        @1920 / @1440 */
    --fs-hero:   clamp(2.375rem, 0.6rem + 2.55vw,  3.625rem);  /* 58 / 46.3 */
    --fs-h2:     clamp(2.125rem, 0.7rem + 1.9vw,   2.875rem);  /* 46 / 38.6 */
    --fs-lead:   1rem;                                         /* 16        */
    --fs-body:   clamp(0.97rem,  0.9rem + 0.1vw,   1.03rem);   /* 16.5 / 15.8 */
    --fs-caps:   clamp(1.0625rem, 1rem + 0.1vw,    1.125rem);  /* 18 / 17.4 */
    --fs-place:  0.9375rem;                                    /* 15        */
    --fs-small:  0.9375rem;                                    /* 15        */
    --fs-foot:   0.875rem;                                     /* 14        */
    --fs-label:  clamp(0.625rem, 0.58rem + 0.08vw, 0.6875rem); /* 10.8 / 10.1 */
    --fs-nav:    clamp(0.6875rem, 0.64rem + 0.06vw, 0.75rem);  /* 11.4 / 11.1 */
    --fs-button: 0.6875rem;                                    /* 11        */

    --track-label: 0.36em;
    --track-nav:   0.2em;

    /* --- Space: 8-based scale ------------------------------------ */
    --s1: 8px;  --s2: 12px; --s3: 16px; --s4: 24px;  --s5: 32px;
    --s6: 48px; --s7: 64px; --s8: 80px; --s9: 96px;  --s10: 128px;

    --edge:     clamp(24px, 0.3rem + 4.4vw, 96px);     /* gutter: 89 / 68  */
    --content:  1560px;
    --max:      calc(var(--content) + 2 * var(--edge));
    --section:  clamp(var(--s7), 2rem + 4vw, var(--s10));  /* section padding */

    --header-h:       clamp(4.25rem, 3.5rem + 1.2vw, 5rem);  /* 79 / 73 */
    --header-compact: clamp(4rem, 3.5rem + 0.6vw, 4.5rem);   /* 72 / 64.6 */
    --logo:           clamp(52px, 2rem + 1.4vw, 60px);        /* 60 / 52  */
    --panel:          calc(100svh - var(--header-compact));
    --footer-h:       257px;                                /* measured footer height */

    --ease: cubic-bezier(0.25, 0.46, 0.3, 1);
    --dur:  500ms;
    --dur-quick: 280ms;
}

@media (prefers-reduced-motion: reduce) {
    :root { --dur: 1ms; --dur-quick: 1ms; }
}


/* ############################################################
   BASE
   ############################################################ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--black);
    color: var(--white);
    font-family: var(--serif);
    font-size: var(--fs-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    font-variant-ligatures: common-ligatures;
}

h1, h2, h3, h4, p, figure, blockquote, address { margin: 0; }
address { font-style: normal; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Eyebrow — champagne on dark, bronze on ivory. */
.label {
    display: inline-block;
    font-family: var(--sans);
    font-weight: 500;
    font-size: var(--fs-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--gold);
    line-height: 1;
}
.group .label, .markets .label { color: var(--bronze); }

.gold-rule {
    display: block;
    width: 40px;
    height: 1px;
    border: 0;
    margin: 0;
    background: var(--gold);
}
.group .gold-rule, .markets .gold-rule { background: var(--bronze); opacity: 0.6; }

.h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--fs-h2);
    line-height: 1.1;
    letter-spacing: -0.012em;
    text-wrap: balance;
}

/* --- The one filled button: small, champagne, quiet ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    min-height: 44px;
    padding: 0 var(--s4);
    font-family: var(--sans);
    font-weight: 600;
    font-size: var(--fs-button);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; }
/* The one filled control: a very quiet gold gradient, hairline edge,
   near-black label. Every stop clears 5:1 with the label colour.
   Hover moves the light across it rather than changing colour. */
.btn-gold {
    /* Antique, not bright: the champagne stop is a narrow band of light
       across a muted gold, not the body of the button. Every stop clears
       4.6:1 with the label. */
    background-image: linear-gradient(100deg, #96793F 0%, #AE9253 34%, #C0A76B 52%, #A1874B 100%);
    background-size: 190% 100%;
    background-position: 46% 0;   /* the light band sits inside the button */
    border-color: rgba(192, 167, 107, 0.4);
    color: #0E1113;
    transition: background-position 700ms var(--ease), border-color var(--dur) var(--ease);
}
.btn-gold:hover { background-position: 56% 0; border-color: rgba(192, 167, 107, 0.7); }

/* --- Editorial link: caps, wide tracking, hairline, small arrow */
.text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    min-height: 44px;
    padding-bottom: 2px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: var(--fs-button);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 28px 1px no-repeat;
    transition: background-size var(--dur) var(--ease), opacity var(--dur-quick) var(--ease);
}
.text-link:hover { background-size: 100% 1px; }
.text-link svg { width: 16px; height: 16px; flex: none; }


/* --- Accessibility -------------------------------------------- */
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

.skip {
    position: fixed; left: var(--s3); top: var(--s3); z-index: 200;
    padding: var(--s2) var(--s4); background: var(--ivory); color: var(--ink);
    font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.08em;
    transform: translateY(-200%);
    transition: transform var(--dur-quick) var(--ease);
}
.skip:focus { transform: none; }
main:focus { outline: none; }

section[id], footer[id] { scroll-margin-top: calc(var(--header-compact) - 1px); }

::selection { background: var(--gold); color: var(--black); }


/* ############################################################
   01 HEADER — private-bank bar
   ############################################################ */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    height: var(--header-h);
    transition: height 600ms var(--ease), background-color 600ms var(--ease), box-shadow 600ms var(--ease);
}
.site-header[data-solid="true"] {
    height: var(--header-compact);
    background: rgba(12, 16, 18, 0.97);
    box-shadow: 0 1px 0 var(--line-gold-2);
}

.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--s5);
    padding-inline: var(--edge);
    max-width: var(--max);
    margin-inline: auto;
}

.brand { display: flex; align-items: center; gap: var(--s4); }

/* The official logo: one size, one position, at every scroll state. */
.medallion { display: block; width: var(--logo); aspect-ratio: 1; flex: none; }
.medallion img { width: 100%; height: 100%; object-fit: contain; }

.brand-divider { width: 1px; height: 32px; background: rgba(243, 240, 234, 0.22); }

.descriptor {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.65625rem;             /* 10.5px */
    letter-spacing: 0.3em;
    line-height: 1.95;
    text-transform: uppercase;
    color: var(--white-quiet);
    white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: clamp(20px, 0.2rem + 1.5vw, 36px); margin-left: auto; }

.nav a {
    flex: none;
    font-family: var(--sans);
    font-weight: 500;
    font-size: var(--fs-nav);
    letter-spacing: var(--track-nav);
    text-transform: uppercase;
    color: var(--white-soft);
    padding-block: var(--s1);
    background: linear-gradient(var(--gold), var(--gold)) 50% 100% / 0 1px no-repeat;
    transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav a:hover { background-size: 100% 1px; color: var(--white); }

/* Active page: a champagne hairline, held. */
.nav a[aria-current] {
    color: var(--white);
    background-image: linear-gradient(var(--gold-champ), var(--gold-champ));
    background-size: 100% 1px;
}

.nav a.private-access {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: var(--s2);
    padding: 0 var(--s3);
    min-height: 38px;
    border: 1px solid var(--line-gold);
    font-size: 0.65625rem;
    letter-spacing: 0.24em;
    color: var(--white-soft);
    white-space: nowrap;
    background: none;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav a.private-access:hover { border-color: var(--gold); color: var(--white); }
.private-access svg { width: 12px; height: 12px; flex: none; color: var(--gold); }

.nav-signature { display: none; }

/* Menu control: two fine lines crossing into a close mark. */
.nav-toggle {
    display: none;
    position: relative;
    width: 44px; height: 44px;
    padding: 0;
    background: none; border: 1px solid var(--line-gold);
    color: var(--white); cursor: pointer;
}
.nav-toggle span {
    position: absolute; left: 50%; top: 50%;
    width: 18px; height: 1px; margin-left: -9px;
    background: currentColor;
    transition: transform var(--dur) var(--ease);
}
.nav-toggle span:nth-child(1) { transform: translateY(-3.5px); }
.nav-toggle span:nth-child(2) { display: none; }
.nav-toggle span:nth-child(3) { transform: translateY(3.5px); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

.header-access, .footer-nav { display: none; }

@media (max-width: 1480px) { .descriptor, .brand-divider { display: none; } }


/* ############################################################
   02 HERO — the photograph first, then the words
   ############################################################ */

.hero {
    position: relative;
    min-height: max(100svh, 620px);
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
}

.hero-media, .hero-media picture, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media { z-index: -2; }
.hero-media img { object-fit: cover; object-position: 50% 50%; }

/* Shade held inside the dark interior on the left; the view is left clear. */
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(90deg, rgba(9,12,14,.7) 0%, rgba(9,12,14,.46) 24%, rgba(9,12,14,.08) 42%, rgba(9,12,14,0) 56%),
        linear-gradient(180deg, rgba(9,12,14,.46) 0%, rgba(9,12,14,0) 18%, rgba(9,12,14,0) 82%, rgba(9,12,14,.32) 100%);
}

.hero-inner {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding: calc(var(--header-h) + var(--s6)) var(--edge) var(--s9);
    position: relative;
}
.hero-inner > * { max-width: 560px; }

.hero-kicker {
    font-family: var(--sans);
    font-weight: 500;
    font-size: var(--fs-label);
    letter-spacing: 0.46em;
    text-transform: uppercase;
    color: var(--white-quiet);
}

.hero-title {
    margin-top: var(--s4);
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--fs-hero);
    line-height: 1.04;
    letter-spacing: -0.015em;
}
.hero-title span { display: block; }

.hero .gold-rule { margin-top: var(--s5); width: 32px; }

.hero-lead {
    margin-top: var(--s5);
    max-width: 33em;                    /* ~530px, 62–66 characters */
    font-size: var(--fs-lead);
    line-height: 1.7;
    color: var(--white-soft);
    text-wrap: pretty;
}

.hero-actions {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--s5);
    margin-top: var(--s6);
}
.hero-actions .text-link { color: var(--white-soft); }
.hero-actions .text-link:hover { color: var(--white); }

/* Barely there: a hairline and a whisper. */
.hero-scroll {
    position: absolute;
    left: max(var(--edge), calc(50% - var(--content) / 2));
    bottom: var(--s5);
    display: flex; align-items: center; gap: var(--s3);
    font-family: var(--sans); font-weight: 500; font-size: 0.59375rem;   /* 9.5px */
    letter-spacing: 0.42em; text-transform: uppercase;
    color: var(--white-quiet);
    opacity: 0.75;
    transition: opacity var(--dur) var(--ease);
}
.hero-scroll:hover { opacity: 1; }
.hero-scroll svg { width: 10px; height: 28px; color: var(--white-quiet); }



@media (prefers-reduced-motion: no-preference) {
    .hero-media img { animation: hero-settle 2600ms var(--ease) both; }
    @keyframes hero-settle { from { transform: scale(1.015); } to { transform: none; } }
}


/* ############################################################
   03 THE GROUP — editorial spread
   ############################################################ */

.group {
    display: grid;
    grid-template-columns: 44fr 56fr;
    background: var(--ivory);
    color: var(--ink);
}

.group-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--section) var(--s9) var(--section) max(var(--edge), calc(50vw - var(--content) / 2));
}

.group .label { margin-bottom: var(--s4); }
.group .h2 { max-width: 11em; }
.group .gold-rule { margin: var(--s5) 0; }

.group-copy p {
    max-width: 27em;                    /* 60–66 characters */
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--ink-soft);
    text-wrap: pretty;
}
.group-copy p + p { margin-top: var(--s3); }
.group .text-link { margin-top: var(--s5); color: var(--ink); align-self: flex-start; }

.group-media { position: relative; overflow: hidden; min-height: 420px; background: var(--charcoal); }
.group-media picture, .group-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.group-media img { object-fit: cover; object-position: 38% 58%; transition: transform 1200ms var(--ease); }
/* Tonal grading: the wall sign recedes; architecture leads. */
.group-media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 30% 28% at 57% 33%, rgba(9,12,14,.4), rgba(9,12,14,0) 75%),
                linear-gradient(180deg, rgba(9,12,14,.18), rgba(9,12,14,0) 45%),
                linear-gradient(90deg, rgba(9,12,14,.12), rgba(9,12,14,0) 30%);
}



/* ############################################################
   04 OUR APPROACH — four principles, engraved
   ############################################################ */

.approach {
    position: relative;
    display: flex;
    align-items: center;
    background:
        linear-gradient(rgba(11,15,17,.93), rgba(11,15,17,.93));
    padding: var(--section) 0;
}

.approach-inner { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--edge); }
.approach .gold-rule { margin-top: var(--s4); width: 32px; }

.pillars {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: var(--s9);
}

.pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--s1) clamp(var(--s4), 0.4rem + 2.6vw, var(--s8)) 0;
}
.pillar + .pillar { border-left: 1px solid var(--line-gold-2); }

.pillar-icon { width: 44px; height: 44px; color: var(--gold); }

.pillar h3 {
    margin-top: var(--s5);
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--fs-caps);
    letter-spacing: 0.22em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--white);
}

.pillar p {
    margin: var(--s3) 0 var(--s5);
    font-size: var(--fs-small);
    line-height: 1.65;
    color: var(--white-quiet);
    max-width: 17em;
    text-wrap: balance;
}

.pillar .gold-rule { margin-top: auto; width: 24px; opacity: 0.7; }


/* ############################################################
   05 OUR MARKETS — geographic presence, set like plates
   Photographs are captioned beneath, not overlaid: a monograph,
   not a destination grid.
   ############################################################ */

.markets {
    --measure: 1400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--ivory);
    color: var(--ink);
    padding: var(--s7) 0;
}

.markets-head, .market-grid, .market-divider {
    width: 100%;
    max-width: calc(var(--measure) + 2 * var(--edge));
    margin-inline: auto;
    padding-inline: var(--edge);
}

.markets-head {
    display: grid;
    grid-template-columns: 7fr 5fr;
    column-gap: var(--s9);
    align-items: end;
}
.markets-head > div { grid-column: 1; grid-row: 1 / span 2; }
.markets .gold-rule { margin: var(--s4) 0; width: 32px; }

.markets-intro {
    grid-column: 2; grid-row: 1;
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--ink-soft);
    max-width: 28em;
    text-wrap: pretty;
}
.markets-all { grid-column: 2; grid-row: 2; justify-self: start; margin-top: var(--s2); color: var(--ink); }

/* Geographic classification: label, then a hairline to the edge. */
.market-divider {
    display: flex;
    align-items: center;
    gap: var(--s4);
    margin-top: var(--s8);
    margin-bottom: var(--s4);
    font-family: var(--sans);
    font-weight: 500;
    font-size: var(--fs-label);
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ink-quiet);
    white-space: nowrap;
}
.market-divider::after { content: ""; flex: 1; height: 1px; background: var(--stone); }
.market-divider + .market-grid + .market-divider { margin-top: var(--s7); }

.market-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s4);
}

.market-card { position: relative; }
.market-card picture { display: block; aspect-ratio: 17 / 10; overflow: hidden; background: var(--stone); }
.market-card img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 900ms var(--ease);
}
.market-card figcaption {
    margin-top: var(--s2);
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--fs-place);
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--ink);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .market-card:hover img { transform: scale(1.01); }
}


/* ############################################################
   06 OUR COMMITMENT — the closing spread
   ############################################################ */

.commitment {
    position: relative;
    isolation: isolate;
    min-height: clamp(460px, 10rem + 24vw, 640px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--black-deep);
}

.commitment-media, .commitment-media picture, .commitment-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.commitment-media { z-index: -2; }
.commitment-media img { object-fit: cover; object-position: 50% 50%; }

/* Text held to ~36% of the width; the architecture keeps the rest. */
.commitment::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(90deg, rgba(9,12,14,.8) 0%, rgba(9,12,14,.52) 24%, rgba(9,12,14,.06) 42%, rgba(9,12,14,0) 100%),
        linear-gradient(180deg, rgba(9,12,14,.2) 0%, rgba(9,12,14,0) 22%, rgba(9,12,14,0) 72%, rgba(9,12,14,.4) 100%);
}

.commitment-inner {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding: var(--s9) var(--edge);
    position: relative;
}
.commitment-inner > * { max-width: 560px; }

.commitment .gold-rule { margin: var(--s4) 0 var(--s5); width: 32px; }
.commitment .h2 { color: var(--white); }

.commitment p {
    margin-top: var(--s4);
    max-width: 28em;
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--white-soft);
    text-wrap: pretty;
}

.commitment .text-link { margin-top: var(--s5); color: var(--white-soft); }
.commitment .text-link:hover { color: var(--white); }

/* Inscription set against the stone column. */


/* ############################################################
   07 FOOTER — a quiet close
   ############################################################ */

.site-footer {
    background: var(--black-deep);
    color: var(--white);
    border-top: 1px solid var(--line-gold);
    padding: var(--s6) 0 var(--s3);
}

.footer-inner { max-width: var(--max); margin-inline: auto; padding-inline: var(--edge); }

.footer-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center;
    column-gap: var(--s9);
}

.footer-main .medallion { width: 72px; }

.footer-office .label { font-size: 0.625rem; margin-bottom: var(--s3); }
.footer-office address { font-size: var(--fs-foot); line-height: 1.6; color: var(--white-soft); }

.footer-contact li {
    display: flex; align-items: center; gap: var(--s3);
    font-size: var(--fs-foot); line-height: 1.2; color: var(--white-soft);
}
.footer-contact li + li { margin-top: var(--s2); }
.footer-contact svg { width: 14px; height: 14px; flex: none; color: var(--gold); opacity: 0.8; }
.footer-contact a { transition: color var(--dur) var(--ease); }
.footer-contact a.tel { white-space: nowrap; overflow-wrap: normal; }   /* the number never breaks */
.footer-contact a:hover { color: var(--white); }


.footer-base {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s1) var(--s5);
    margin-top: var(--s5);
    padding-top: var(--s3);
    border-top: 1px solid var(--line-dark);
    font-family: var(--sans);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: #8E8A83;                     /* 5.7:1 */
}
.footer-legal { display: flex; align-items: center; gap: var(--s3); }
.footer-legal li + li::before { content: ""; display: inline-block; width: 1px; height: 0.9em; background: var(--line-dark); margin-right: var(--s3); vertical-align: -0.1em; }
.footer-legal a { transition: color var(--dur) var(--ease); }
.footer-legal a:hover { color: var(--white); }


/* ############################################################
   SCREEN COMPOSITION — desktop and laptop (>1080px)
   Group, Approach and Markets each fill the screen beneath the
   compact bar; Commitment + footer together are the last screen.
   Proportion only: no scroll-snap, no scroll-jacking.
   ############################################################ */

@media (min-width: 1081px) and (min-height: 640px) {
    .group, .approach, .markets { min-height: var(--panel); }
    .commitment { min-height: max(440px, calc(var(--panel) - var(--footer-h))); }
}

/* Shorter screens (1600×900, 1440×900, 1366×768). */
@media (min-width: 1081px) and (max-height: 940px) {
    .markets { padding-block: var(--s6); }
    .markets .gold-rule { margin: var(--s3) 0; }
    .market-divider { margin-top: var(--s6); margin-bottom: var(--s3); }
    .market-divider + .market-grid + .market-divider { margin-top: var(--s5); }
    .market-card picture { aspect-ratio: 2 / 1; }
    .market-card figcaption { margin-top: var(--s1); }
    .commitment-inner { padding-block: var(--s7); }
    .group-copy { padding-block: var(--s8); }
}


/* Laptop-height screens (≤800px tall, e.g. 1366×768). */
@media (min-width: 1081px) and (max-height: 800px) {
    :root { --footer-h: 233px; }
    .markets { padding-block: var(--s5); }
    .markets .h2 { font-size: clamp(2.125rem, 0.7rem + 1.7vw, 2.5rem); }
    .market-card picture { aspect-ratio: 11 / 5; }
    .market-divider { margin-top: var(--s5); }
    .market-divider + .market-grid + .market-divider { margin-top: var(--s4); }
    .commitment-inner { padding-block: var(--s6) !important; }
    .site-footer { padding-top: var(--s5); }
    .footer-base { margin-top: var(--s4); }
}

/* ############################################################
   REVEAL — nearly invisible; see site.js
   ############################################################ */

.js-reveal .group-copy, .js-reveal .approach-inner, .js-reveal .markets-head,
.js-reveal .market-divider, .js-reveal .market-grid, .js-reveal .commitment-inner, .js-reveal .footer-inner {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.js-reveal .is-in { opacity: 1 !important; transform: none !important; }
.js-reveal .no-transition { transition: none !important; }


/* ############################################################
   RESPONSIVE SYSTEM
     A. ≤1080px   tablet: overlay menu, 2×2 principles, 2-col markets
     B. portrait  phones + portrait tablets: stacked Group,
                  cinematic stacked Commitment, horizontal inscriptions
     C. ≤700px    phones: own type scale, 20/24/28px gutter
   ############################################################ */

/* ============================================================
   A. TABLET AND BELOW
   ============================================================ */

@media (max-width: 1080px) {
    :root {
        --edge: clamp(24px, 2rem + 2vw, 48px);
        --header-h: 72px;
        --header-compact: 64px;
        --logo: 52px;
        --fs-h2: clamp(2.125rem, 1.4rem + 1.4vw, 2.5rem);
        --fs-hero: clamp(2.375rem, 1.5rem + 1.8vw, 2.875rem);
        --section: clamp(var(--s7), 3rem + 3vw, var(--s9));
    }

    /* Header: logo left; Private Access + menu right. */
    .brand { position: relative; z-index: 2; }

    .header-access {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        position: relative; z-index: 2;
        margin-left: auto;
        min-width: 44px; min-height: 44px;
        padding: 0 var(--s3);
        border: 1px solid var(--line-gold);
        font-family: var(--sans);
        font-weight: 500;
        font-size: 0.625rem;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        white-space: nowrap;
        color: var(--white-soft);
        transition: opacity var(--dur) var(--ease), visibility 0s linear 0s;
    }
    .header-access svg { width: 12px; height: 12px; flex: none; color: var(--gold); }
    .site-header[data-menu="open"] .header-access { opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur); }

    .nav-toggle { display: block; z-index: 2; margin-left: var(--s2); }

    /* Full-screen overlay: 100vw × 100dvh, opaque, nothing behind. */
    .nav {
        position: fixed; inset: 0; z-index: 1;
        width: 100vw; height: 100vh; height: 100dvh;
        display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
        gap: 0; margin: 0;
        padding: calc(var(--header-h) + clamp(16px, 4svh, 48px)) var(--edge) calc(var(--s4) + env(safe-area-inset-bottom));
        overflow-y: auto; overscroll-behavior: contain;
        background: var(--black);
        opacity: 0; visibility: hidden;
        transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
    }
    .nav[data-open="true"] { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease), visibility 0s linear 0s; }
    .site-header[data-menu="open"] { background: var(--black); box-shadow: none; }

    .nav::before {
        content: "Menu";
        margin-bottom: var(--s4);
        font-family: var(--sans); font-weight: 500; font-size: var(--fs-label);
        letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold);
    }

    .nav a {
        display: flex; align-items: center;
        min-height: clamp(48px, 6.4svh, 56px);
        padding: 0;
        border-bottom: 1px solid var(--line-gold-2);
        font-family: var(--serif);
        font-weight: 400;
        font-size: 1.1875rem;          /* 19px */
        letter-spacing: 0.18em;
        color: var(--white);
        background: none;
        opacity: 0;
        transition: opacity 450ms var(--ease), color var(--dur) var(--ease);
    }
    .nav a:first-of-type { border-top: 1px solid var(--line-gold-2); }
    .nav a[aria-current] { color: var(--gold-champ); background-image: none; }
    .nav a:hover { background: none; color: var(--gold); }
    .nav[data-open="true"] a { opacity: 1; }
    .nav[data-open="true"] a:nth-of-type(2) { transition-delay: 40ms; }
    .nav[data-open="true"] a:nth-of-type(3) { transition-delay: 80ms; }
    .nav[data-open="true"] a:nth-of-type(4) { transition-delay: 120ms; }
    .nav[data-open="true"] a:nth-of-type(5) { transition-delay: 160ms; }
    .nav[data-open="true"] a:nth-of-type(6) { transition-delay: 200ms; }
    .nav[data-open="true"] a:nth-of-type(7) { transition-delay: 240ms; }

    .nav a.private-access {
        align-self: flex-start;
        margin: var(--s5) 0 0;
        min-height: 44px;
        padding: 0 var(--s4);
        border: 1px solid var(--line-gold);
        font-family: var(--sans);
        font-size: 0.65625rem;
        letter-spacing: 0.26em;
    }

    .nav-signature {
        display: block;
        margin-top: auto;
        padding-top: var(--s5);
        font-family: var(--sans); font-weight: 500; font-size: 0.59375rem;
        letter-spacing: 0.34em; line-height: 2; text-transform: uppercase;
        color: rgba(243, 240, 234, 0.4);
    }

    /* Approach: 2 × 2 */
    .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s7); margin-top: var(--s7); }
    .pillar:nth-child(3) { border-left: 0; }

    /* Markets: two columns */
    .markets { padding-block: var(--section); }
    .markets-head { grid-template-columns: 1fr; row-gap: var(--s3); }
    .markets-head > div, .markets-intro, .markets-all { grid-column: 1; grid-row: auto; }
    .markets-intro { max-width: 34em; order: 2; }
    .markets-all { order: 3; }
    .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s5); }
    .market-card picture { aspect-ratio: 16 / 9; }
    .market-divider { margin-top: var(--s7); }
    .market-divider + .market-grid + .market-divider { margin-top: var(--s7); }

    /* Footer: navigation joins; tag beneath. */
    .footer-main { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s6); row-gap: var(--s5); }
    .footer-nav { display: block; grid-column: 1 / -1; }
    .footer-nav ul {
        display: flex; flex-wrap: wrap; column-gap: var(--s5);
        border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark);
        padding-block: var(--s1);
    }
    .footer-nav a {
        display: inline-flex; align-items: center; min-height: 44px;
        font-family: var(--sans); font-weight: 500; font-size: 0.65625rem;
        letter-spacing: 0.26em; text-transform: uppercase; color: var(--white-soft);
    }
            .footer-legal a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
    .footer-contact a { display: inline-flex; align-items: center; min-height: 44px; }
    .footer-contact li + li { margin-top: 0; }
    .hero-scroll { min-height: 44px; }
}

/* Landscape tablets: The Group keeps a split, at 40/60. */
@media (min-width: 701px) and (max-width: 1080px) and (orientation: landscape) {
    .group { grid-template-columns: 40fr 60fr; }
    .group-copy { padding-right: var(--s6); }
}


/* ============================================================
   B. PORTRAIT — phones and portrait tablets
   ============================================================ */

@media (max-width: 700px), (max-width: 1080px) and (orientation: portrait) {
    .group { grid-template-columns: 1fr; }
    .group-media { min-height: clamp(420px, 72vw, 620px); }
    .group-media::after {
        background: radial-gradient(ellipse 34% 26% at 52% 30%, rgba(9,12,14,.32), rgba(9,12,14,0) 75%),
                    linear-gradient(0deg, rgba(9,12,14,.78) 0%, rgba(9,12,14,.3) 22%, rgba(9,12,14,0) 40%);
    }

    /* Commitment: cinematic, stacked. Image across the upper ~60%. */
    .commitment {
        min-height: calc(100svh - var(--header-compact));
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
    }
    .commitment-media { bottom: auto; height: 62%; }
    .commitment::before {
        background: linear-gradient(180deg, rgba(9,12,14,.3) 0%, rgba(9,12,14,0) 18%, rgba(9,12,14,0) 34%,
                    rgba(9,12,14,.82) 54%, var(--black-deep) 62%, var(--black-deep) 100%);
    }
    .commitment-inner { padding: var(--s6) var(--edge) 0; }
    .commitment-inner > * { max-width: 34rem; }
        }

/* Portrait tablets: hero copy low over a bottom gradient. */
@media (min-width: 701px) and (max-width: 1080px) and (orientation: portrait) {
    .hero { align-items: flex-end; }
    .hero::before {
        background: linear-gradient(180deg, rgba(9,12,14,.5) 0%, rgba(9,12,14,0) 16%, rgba(9,12,14,0) 38%,
                    rgba(9,12,14,.62) 56%, rgba(9,12,14,.9) 74%, rgba(9,12,14,.94) 100%);
    }
    .hero-inner { padding-bottom: var(--s10); }
}


/* ============================================================
   C. PHONES (≤700px) — an independent scale
   ============================================================ */

@media (max-width: 700px) {
    :root {
        --edge: 24px;
        --header-h: 64px;
        --header-compact: 64px;
        --logo: 48px;
        --section: var(--s8);

        --fs-hero:   clamp(2.375rem, 1rem + 5.6vw, 2.75rem);   /* 38 · 38 · 40 (360 · 390 · 430) */
        --fs-h2:     clamp(2.125rem, 0.9rem + 4.8vw, 2.5rem);  /* 34 · 34 · 35 */
        --fs-lead:   0.97rem;                                   /* 15.5 */
        --fs-body:   0.97rem;                                   /* 15.5 */
        --fs-caps:   1.0625rem;                                 /* 17 */
        --fs-place:  0.9375rem;                                 /* 15 */
        --fs-small:  0.9375rem;                                 /* 15 */
        --fs-foot:   0.875rem;                                  /* 14 */
        --fs-label:  0.625rem;                                  /* 10 */
    }

    .header-access { padding: 0; width: 44px; }
    .header-access span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

    /* Hero: art-directed crop; copy set low. */
    .hero { min-height: 100svh; align-items: flex-end; }
    .hero::before {
        background: linear-gradient(180deg, rgba(9,12,14,.5) 0%, rgba(9,12,14,.05) 16%, rgba(9,12,14,0) 34%,
                    rgba(9,12,14,.3) 46%, rgba(9,12,14,.82) 62%, rgba(9,12,14,.94) 100%);
    }
    .hero-inner { padding: calc(var(--header-h) + var(--s5)) var(--edge) calc(var(--s6) + env(safe-area-inset-bottom)); }
    .hero-inner > * { max-width: 30rem; }
    .hero-title { margin-top: var(--s3); }
    .hero .gold-rule { margin-top: var(--s4); }
    .hero-lead { margin-top: var(--s4); line-height: 1.65; }
    .hero-actions { flex-direction: column; align-items: stretch; gap: var(--s2); margin-top: var(--s5); }
    .hero-actions .btn { width: 100%; min-height: 48px; }
    .hero-actions .text-link { justify-content: center; background-position: 50% calc(100% - 10px); }
    .hero-scroll { display: none; }

    /* The Group */
    .group-copy { padding: var(--s7) var(--edge) var(--s8); }
    .group .gold-rule { margin: var(--s4) 0; }
    .group-copy p { max-width: none; }
    .group-media { min-height: clamp(420px, 118vw, 520px); }
    .group-media img { object-position: 50% 50%; }

    /* Approach: one engraved sequence */
    .approach {
        padding-block: var(--s8);
        background:
            linear-gradient(rgba(11,15,17,.95), rgba(11,15,17,.95));
    }
    .pillars { grid-template-columns: 1fr; row-gap: var(--s7); margin-top: var(--s6); }
    .pillar, .pillar + .pillar { border: 0; padding: 0; }
    .pillar-icon { width: 40px; height: 40px; }
    .pillar h3 { margin-top: var(--s4); }
    .pillar p { margin: var(--s2) 0 var(--s4); max-width: 20em; }

    /* Markets: one plate per row */
    .markets { padding-block: var(--s8); }
    .markets .gold-rule { margin: var(--s3) 0 var(--s4); }
    .markets-intro { max-width: none; }
    .market-divider { margin-top: var(--s6); margin-bottom: var(--s3); letter-spacing: 0.36em; }
    .market-divider + .market-grid + .market-divider { margin-top: var(--s6); }
    .market-grid { grid-template-columns: 1fr; row-gap: var(--s4); }

    /* Commitment */
    .commitment .text-link { margin-top: var(--s4); }

    /* Footer: one column */
    .site-footer { padding: var(--s7) 0 var(--s4); }
    .footer-main { grid-template-columns: 1fr; row-gap: var(--s5); }
    .footer-main .medallion { width: 64px; }
    .footer-contact a { overflow-wrap: anywhere; }
    .footer-nav ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s3); }
    .footer-base { flex-direction: column; align-items: flex-start; gap: 0; margin-top: var(--s5); }
    .footer-legal { flex-wrap: wrap; column-gap: var(--s1); }
    .footer-legal li + li::before { margin-right: var(--s2); }
}

@media (max-width: 374px) { :root { --edge: 20px; } }
@media (min-width: 430px) and (max-width: 700px) { :root { --edge: 28px; } }


/* ############################################################
   HOME — photographic hero (25 Sep 2026)
   The copy sits left over open plain and sky, so the shading is
   weighted to that side only; the rest of the frame stays clear.
   ############################################################ */

.page-home .hero::before {
    background:
        linear-gradient(90deg, rgba(9,12,14,.9) 0%, rgba(9,12,14,.66) 26%, rgba(9,12,14,.22) 48%, rgba(9,12,14,0) 66%),
        linear-gradient(180deg, rgba(9,12,14,.5) 0%, rgba(9,12,14,0) 20%, rgba(9,12,14,0) 76%, rgba(9,12,14,.45) 100%);
}
@media (max-width: 700px) {
    .page-home .hero::before {
        background: linear-gradient(180deg, rgba(9,12,14,.5) 0%, rgba(9,12,14,.08) 16%, rgba(9,12,14,.05) 32%,
                    rgba(9,12,14,.62) 50%, rgba(9,12,14,.9) 70%, rgba(9,12,14,.95) 100%);
    }
    .page-home .hero-media img { object-position: 50% 45%; }
}

@media (min-width: 701px) and (max-width: 1600px) {
    .page-home .hero::before {
        background:
            linear-gradient(90deg, rgba(9,12,14,.94) 0%, rgba(9,12,14,.78) 26%, rgba(9,12,14,.38) 48%, rgba(9,12,14,0) 70%),
            linear-gradient(180deg, rgba(9,12,14,.5) 0%, rgba(9,12,14,0) 20%, rgba(9,12,14,0) 76%, rgba(9,12,14,.45) 100%);
    }
}


/* ############################################################
   PRIVATE ACCESS — interaction states (25 Sep 2026)
   Default stays as approved. On hover the control fills with the
   antique-gold gradient and the label and lock turn near-black.
   ############################################################ */

.nav a.private-access, .private-access {
    transition: background-color 210ms var(--ease), background-position 210ms var(--ease),
                border-color 210ms var(--ease), color 210ms var(--ease);
}
.nav a.private-access:hover, .nav a.private-access:focus-visible,
.private-access:hover, .private-access:focus-visible {
    background-image: linear-gradient(100deg, #96793F 0%, #AE9253 34%, #C0A76B 52%, #A1874B 100%);
    background-size: 190% 100%;
    background-position: 46% 0;
    border-color: rgba(192, 167, 107, 0.55);
    color: #0E1113;
}
.nav a.private-access:hover svg, .nav a.private-access:focus-visible svg,
.private-access:hover svg, .private-access:focus-visible svg { color: #0E1113; }

/* Pressed: a firmer, slightly deeper gold so the tap reads as contact. */
.nav a.private-access:active,
.private-access:active {
    background-image: linear-gradient(100deg, #8A6E39 0%, #A78B4C 34%, #B99F62 52%, #957C43 100%);
    background-position: 56% 0;
    border-color: rgba(192, 167, 107, 0.75);
    color: #0E1113;
}
.nav a.private-access:active svg, .private-access:active svg { color: #0E1113; }

/* Keyboard focus keeps the site ring as well as the gold fill. */
.nav a.private-access:focus-visible,
.private-access:focus-visible {
    outline: 2px solid var(--gold-champ);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .private-access { transition-duration: 1ms; }
}

/* ############################################################
   HOME HERO SLIDER (26 Sep 2026)
   Three photographs, crossfaded. The copy does not change, so
   only the picture moves. No autoplay when the visitor prefers
   reduced motion.
   ############################################################ */

.hero-slider { position: absolute; inset: 0; z-index: -2; }
.hero-slide {
    position: absolute; inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1100ms var(--ease), visibility 0s linear 1100ms;
}
.hero-slide.is-current { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
.hero-slide picture, .hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* The copy does not move between slides, so a pale photograph needs its
   own extra shading on the copy side rather than a heavier base overlay
   that would flatten the darker two. */
.hero-slide::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
}
.hero-slide:nth-child(2)::after {
    background: linear-gradient(90deg, rgba(9,12,14,.46) 0%, rgba(9,12,14,.3) 28%, rgba(9,12,14,.08) 50%, rgba(9,12,14,0) 68%);
}
.hero-slide:nth-child(3)::after {
    background: linear-gradient(90deg, rgba(9,12,14,.18) 0%, rgba(9,12,14,.1) 30%, rgba(9,12,14,0) 58%);
}
.hero-slide img { object-fit: cover; object-position: 50% 50%; }

/* Controls: the site's own gold detailing, held to the lower right. */
.hero-controls {
    position: absolute;
    right: max(var(--edge), calc(50vw - var(--content) / 2));
    bottom: var(--s7);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--s4);
}
.hero-dots { display: flex; align-items: center; gap: var(--s4); }

.hero-dot {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;          /* the hit area is full size; the mark stays small */
    padding: 0 4px;
    background: none;
    border: 0;
    font-family: var(--sans);
    font-weight: 500;
    font-size: var(--fs-label);
    letter-spacing: var(--track-label);
    color: var(--white-quiet);
    cursor: pointer;
    transition: color var(--dur) var(--ease);
}
.hero-dot::after {
    content: "";
    position: absolute; left: 4px; right: 4px; bottom: 12px;
    height: 1px;
    background: var(--gold-champ);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease);
}
.hero-dot:hover { color: var(--white); }
.hero-dot.is-current { color: var(--white); }
.hero-dot.is-current::after { transform: scaleX(1); }

.hero-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: none;
    border: 1px solid var(--line-gold-2);
    color: var(--white-soft);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
                background-color var(--dur) var(--ease);
}
.hero-arrow svg { width: 18px; height: 18px; }
.hero-arrow:hover { border-color: var(--gold); color: var(--white); background: rgba(183,154,90,.08); }
.hero-dot:focus-visible, .hero-arrow:focus-visible {
    outline: 2px solid var(--gold-champ);
    outline-offset: 3px;
}

@media (max-width: 700px) {
    .hero-controls { bottom: calc(var(--s5) + env(safe-area-inset-bottom)); gap: var(--s3); }
    .hero-arrow { width: 44px; height: 44px; }
    .hero-dots { gap: var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition-duration: 1ms; }
}